:root {
    --ink: #17242b;
    --muted: #607078;
    --paper: #f5f7f3;
    --card: #ffffff;
    --green: #176b52;
    --green-dark: #0e503c;
    --mint: #dff2e7;
    --yellow: #f4c95d;
    --blue: #dcecf5;
    --border: #dce3dd;
    --danger: #a43b36;
    --shadow: 0 14px 34px rgba(27, 56, 43, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 12%, rgba(244, 201, 93, 0.16), transparent 24rem),
        var(--paper);
    font-family: "Yu Gothic UI", "Hiragino Sans", "Meiryo", sans-serif;
    line-height: 1.65;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; }

.site-header {
    min-height: 72px;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(245, 247, 243, 0.92);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

.brand {
    color: var(--green);
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    text-decoration: none;
}

.header-user { display: flex; align-items: center; gap: 18px; font-size: 0.9rem; }
.header-user form { margin: 0; }
.text-button { padding: 0; color: var(--green); background: none; border: 0; cursor: pointer; text-decoration: underline; }

.container { width: min(1120px, 90vw); margin: 0 auto; padding: 52px 0 80px; }
.content-narrow { width: min(680px, 100%); margin: 0 auto; }

.hero { width: min(720px, 100%); margin: 8vh auto 0; text-align: center; }
.hero h1, .page-heading h1 { margin: 0; line-height: 1.25; letter-spacing: -0.04em; }
.hero h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); }
.hero-copy { max-width: 580px; margin: 24px auto 38px; color: var(--muted); font-size: 1.08rem; }
.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; }

.setup-notice { max-width: 520px; margin: 0 auto 16px; padding: 18px; background: #fff6d9; border: 1px solid #ead28c; border-radius: 14px; }
.setup-notice p { margin: 4px 0 0; }

.button {
    display: inline-flex;
    min-height: 52px;
    padding: 12px 24px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white;
    background: var(--green);
    border: 1px solid var(--green);
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease;
}

.button:hover { background: var(--green-dark); transform: translateY(-1px); }
.button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.button-secondary { color: var(--green); background: transparent; }
.button-secondary:hover { color: white; }
.google-button { margin-bottom: 14px; background: white; color: var(--ink); border-color: var(--border); box-shadow: var(--shadow); }
.google-button:hover { color: white; }
.google-mark { font-weight: 900; color: #4285f4; }
.hero form { margin-top: 10px; }

.page-heading { margin: 18px 0 32px; }
.page-heading h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.page-heading > p:last-child { max-width: 680px; margin: 12px 0 0; color: var(--muted); }
.back-link { color: var(--green); font-size: 0.92rem; font-weight: 700; text-decoration: none; }

.action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.action-card { min-height: 290px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 20px; text-decoration: none; box-shadow: var(--shadow); transition: transform 0.2s ease; }
.action-card:hover { transform: translateY(-5px); }
.action-card h2 { margin: auto 0 4px; font-size: 2rem; }
.action-card p { margin: 0 0 24px; }
.card-number { font-size: 0.8rem; font-weight: 800; }
.card-link { font-weight: 800; }
.card-register { background: var(--mint); }
.card-search { background: var(--yellow); }
.card-analytics { background: var(--blue); }

.form-card { min-width: 0; padding: clamp(22px, 5vw, 38px); display: grid; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.form-card label { margin-top: 10px; font-weight: 800; }
.form-card input, .form-card select, .form-card textarea { width: 100%; min-width: 0; max-width: 100%; padding: 13px 14px; color: var(--ink); background: #fbfcfa; border: 1px solid #cbd5ce; border-radius: 10px; outline: none; }
.form-card input[type="datetime-local"] { display: block; }
.form-card textarea { resize: vertical; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23, 107, 82, 0.12); }
.form-card .button { margin-top: 18px; width: 100%; }
.required { color: var(--danger); font-size: 0.72rem; }
.optional { color: var(--muted); font-size: 0.72rem; }
.new-tag-box { margin: 2px 0 8px; padding: 12px 14px; background: var(--paper); border-radius: 10px; }
.new-tag-box summary { color: var(--green); font-weight: 700; cursor: pointer; }
.new-tag-box .sub-label { display: block; margin: 14px 0 7px; }
.new-tag-box small { color: var(--muted); }
.location-picker { margin: 10px 0 0; padding: 0; display: grid; gap: 12px; border: 0; }
.location-picker legend { margin-bottom: 2px; font-weight: 800; }
.location-picker label { margin-top: 0; }
.location-picker small { color: var(--muted); }

.character-status { padding: 13px 15px; display: flex; justify-content: space-between; color: var(--danger); background: #fff5f4; border-radius: 10px; }
.character-status .is-valid { color: var(--green); }

.flash { margin: 0 auto 20px; padding: 13px 16px; border-radius: 10px; }
.flash-error { color: #782d29; background: #f9dedb; border: 1px solid #efbbb6; }
.flash-success { color: #164f3d; background: var(--mint); border: 1px solid #b8ddc7; }

.result-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.result-card { padding: 26px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.tag-pill { display: inline-block; padding: 4px 11px; color: var(--green-dark); background: var(--mint); border-radius: 999px; font-size: 0.85rem; font-weight: 800; }
.result-card dl { margin: 20px 0 0; }
.result-card dl div { padding: 10px 0; display: grid; grid-template-columns: 110px 1fr; border-top: 1px solid var(--border); }
.result-card dt { color: var(--muted); font-size: 0.85rem; }
.result-card dd { margin: 0; font-weight: 700; }
.storage-value { color: var(--green); }
.thanks-form { margin-top: 20px; display: grid; gap: 10px; }
.thanks-form label { color: var(--green-dark); font-weight: 800; }
.thanks-form .button { width: 100%; margin-top: 0; }
.empty-state { padding: 58px 24px; text-align: center; background: white; border: 1px dashed #b8c8be; border-radius: 18px; }

.analytics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.data-card { padding: 26px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.data-card h2 { margin: 0; font-size: 1.25rem; }
.section-note { margin: 2px 0 18px; color: var(--muted); font-size: 0.85rem; }
.ranking-list, .compact-list { margin: 0; padding: 0; list-style: none; counter-reset: ranking; }
.ranking-list li, .compact-list li { padding: 12px 0; display: flex; justify-content: space-between; border-top: 1px solid var(--border); }
.ranking-list li { counter-increment: ranking; }
.ranking-list li:not(.no-data)::before { content: counter(ranking); width: 28px; color: var(--green); font-weight: 900; }
.ranking-list li span { flex: 1; }
.bar-row { margin: 14px 0; display: grid; grid-template-columns: 76px 1fr 44px; align-items: center; gap: 10px; font-size: 0.9rem; }
.bar-track { height: 10px; overflow: hidden; background: #e7ece8; border-radius: 999px; }
.bar-fill { height: 100%; background: var(--green); border-radius: inherit; }
.split-card { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.no-data { color: var(--muted); }

@media (max-width: 760px) {
    .container { width: min(92vw, 680px); padding-top: 34px; }
    .form-card { padding: 20px 16px; }
    .header-user > span { display: none; }
    .action-grid, .analytics-grid, .result-list { grid-template-columns: 1fr; }
    .action-card { min-height: 220px; }
    .split-card { grid-template-columns: 1fr; }
    .character-status { flex-direction: column; }
    .result-card dl div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}