:root {
    --sushiro-red: #c91d31;
    --sushiro-action-red: #c91d31;
    --sushiro-ink: #20242b;
    --sushiro-paper: #f7f4ee;
    --sushiro-line: #e4ded4;
    --sushiro-surface: #fff;
    --sushiro-surface-muted: #f6f3ed;
    --sushiro-muted: #74777b;
    --sushiro-card-copy: #6c7076;
    --sushiro-subtle-line: #cbc3b7;
    --sushiro-translucent: rgba(255, 255, 255, .65);
    --sushiro-field-bg: #fff;
    --sushiro-field-ink: #20242b;
    --sushiro-pill-bg: #20242b;
    --sushiro-ticket-bg: #20242b;
    --sushiro-positive: #28663a;
    --sushiro-warning-ink: #79121e;
    --sushiro-warning-bg: #fff0f2;
    --sushiro-unavailable-ink: #5e5548;
    --sushiro-unavailable-bg: #f1eee8;
    --sushiro-shadow: rgba(39, 33, 24, .06);
    --sushiro-card-shadow: rgba(50, 42, 30, .1);
}

html[data-sushiro-theme="dark"] {
    --sushiro-red: #ff7f8d;
    --sushiro-action-red: #b51f33;
    --sushiro-ink: #edf0f4;
    --sushiro-paper: #111318;
    --sushiro-line: #393e48;
    --sushiro-surface: #1b1f26;
    --sushiro-surface-muted: #252a32;
    --sushiro-muted: #abb1ba;
    --sushiro-card-copy: #b3b8c0;
    --sushiro-subtle-line: #4a505b;
    --sushiro-translucent: rgba(27, 31, 38, .72);
    --sushiro-field-bg: #14171c;
    --sushiro-field-ink: #f3f4f6;
    --sushiro-pill-bg: #353b45;
    --sushiro-ticket-bg: #0c0f14;
    --sushiro-positive: #78d491;
    --sushiro-warning-ink: #ffbbc3;
    --sushiro-warning-bg: #4a1d25;
    --sushiro-unavailable-ink: #d1c8ba;
    --sushiro-unavailable-bg: #34312d;
    --sushiro-shadow: rgba(0, 0, 0, .24);
    --sushiro-card-shadow: rgba(0, 0, 0, .3);
}

body { background: var(--sushiro-paper); color: var(--sushiro-ink); }
.sushiro-page [hidden] { display: none !important; }
.sushiro-page { max-width: 1180px; margin: 0 auto; padding: 28px 16px 60px; }
.hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #fff; background: var(--sushiro-action-red); border-radius: 4px 4px 36px 4px; padding: 42px; box-shadow: 0 18px 45px rgba(105, 17, 28, .2); }
.hero h1 { margin: 0 0 10px; font-size: clamp(2rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.04em; }
.hero .lead { margin: 0; max-width: 650px; color: rgba(255,255,255,.88); }
.hero-actions { display: flex; align-items: center; gap: 10px; }
.eyebrow, .section-kicker { margin: 0 0 4px; font-size: .72rem; font-weight: 800; letter-spacing: .17em; }
.section-kicker { color: var(--sushiro-red); }
.panel { margin-top: 24px; padding: 24px; background: var(--sushiro-surface); border: 1px solid var(--sushiro-line); border-radius: 14px; box-shadow: 0 8px 24px var(--sushiro-shadow); }
.auth-panel { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(420px, 1.2fr); align-items: end; gap: 24px; }
.auth-panel h2 { margin: 0; font-weight: 800; }
.auth-copy { margin: 7px 0 0; font-size: .82rem; }
.login-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr) auto auto; align-items: end; gap: 10px; }
.login-form label { margin: 0; font-size: .83rem; font-weight: 700; }
.login-form .remember-login { display: flex; align-items: center; align-self: center; gap: 7px; white-space: nowrap; cursor: pointer; }
.remember-login input { width: 17px; height: 17px; accent-color: var(--sushiro-red); }
.logged-in-state { display: flex; align-items: center; justify-content: flex-end; gap: 14px; color: var(--sushiro-positive); font-weight: 700; }
.sushiro-page .form-control { color: var(--sushiro-field-ink); background-color: var(--sushiro-field-bg); border-color: var(--sushiro-line); }
.sushiro-page .form-control:focus { color: var(--sushiro-field-ink); background-color: var(--sushiro-field-bg); border-color: var(--sushiro-red); box-shadow: 0 0 0 .12rem rgba(201, 29, 49, .2); }
.sushiro-page .form-control::placeholder { color: var(--sushiro-muted); opacity: .85; }
.sushiro-page .btn-outline-secondary { color: var(--sushiro-muted); border-color: var(--sushiro-muted); }
.sushiro-page .btn-outline-secondary:hover, .sushiro-page .btn-outline-secondary:focus { color: var(--sushiro-surface); background: var(--sushiro-muted); }
.toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.filter-controls { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(135px, .3fr) minmax(135px, .3fr); gap: 12px; flex: 1; }
.search-box label, .region-filter label, .area-filter label, .party-grid label { display: block; margin-bottom: 7px; font-size: .83rem; font-weight: 700; }
.toolbar-actions { display: flex; gap: 8px; }
.section-title, .panel-heading, .subheading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-title { margin: 34px 4px 14px; }
.section-title h2, .panel-heading h2 { margin: 0; font-weight: 800; }
.count-pill { min-width: 38px; padding: 5px 10px; text-align: center; color: #fff; background: var(--sushiro-pill-bg); border-radius: 99px; font-size: .8rem; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.store-card { width: 100%; padding: 20px; text-align: left; color: inherit; background: var(--sushiro-surface); border: 1px solid var(--sushiro-line); border-radius: 12px; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s, color .2s ease, background-color .2s ease; }
.store-card:hover, .store-card:focus { transform: translateY(-3px); border-color: var(--sushiro-red); box-shadow: 0 12px 25px var(--sushiro-card-shadow); outline: none; }
.store-card.selected { border-color: var(--sushiro-red); box-shadow: 0 0 0 2px rgba(201, 29, 49, .18), 0 12px 25px var(--sushiro-card-shadow); }
.store-card h3 { margin: 7px 0; font-size: 1.15rem; font-weight: 800; }
.store-card p { margin: 0; color: var(--sushiro-card-copy); font-size: .88rem; }
.store-area { color: var(--sushiro-red); font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.loading-card, .empty-card { padding: 42px; text-align: center; color: var(--sushiro-muted); background: var(--sushiro-translucent); border: 1px dashed var(--sushiro-subtle-line); border-radius: 12px; }
.spinner { display: inline-block; width: 17px; height: 17px; margin-right: 8px; vertical-align: -3px; border: 2px solid var(--sushiro-line); border-top-color: var(--sushiro-red); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-button { border: 0; color: var(--sushiro-muted); background: transparent; font-size: 2rem; line-height: 1; cursor: pointer; }
.detail-panel { grid-column: 1 / -1; width: 100%; margin: 2px 0 10px; animation: expand-detail .2s ease-out; }
@keyframes expand-detail { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.detail-heading { padding-bottom: 18px; border-bottom: 1px solid var(--sushiro-line); }
.detail-actions { display: flex; align-items: center; gap: 8px; }
.muted { color: var(--sushiro-muted); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); gap: 28px; padding-top: 24px; }
.detail-grid.queue-only { grid-template-columns: minmax(0, 1fr); }
.detail-grid h3 { margin: 0 0 15px; font-size: 1.15rem; font-weight: 800; }
.queue-refresh-actions { display: flex; align-items: center; gap: 10px; }
.queue-refresh-status { color: var(--sushiro-muted); font-size: .75rem; white-space: nowrap; }
.queue-refresh-status.error { color: var(--sushiro-red); }
.queue-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.queue-stat { padding: 16px; background: var(--sushiro-surface-muted); border-radius: 10px; }
.queue-stat:nth-child(n + 3) { grid-column: 1 / -1; }
.queue-stat > span { display: block; color: var(--sushiro-muted); font-size: .78rem; }
.queue-stat-value { display: block; margin-top: 7px; color: var(--sushiro-ink); font-size: 1.35rem; font-weight: 700; }
.queue-number-list { display: flex; flex-wrap: wrap; gap: 6px; }
.queue-number { display: inline-block; min-width: 46px; padding: 4px 7px; text-align: center; background: var(--sushiro-surface); border: 1px solid var(--sushiro-line); font-size: 1rem; }
.ticket-form-card { padding-left: 28px; border-left: 1px solid var(--sushiro-line); }
.warning-copy { padding: 12px; color: var(--sushiro-warning-ink); background: var(--sushiro-warning-bg); border-radius: 8px; font-size: .85rem; }
.warning-copy.unavailable { color: var(--sushiro-unavailable-ink); background: var(--sushiro-unavailable-bg); }
.party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.take-number-button { margin-top: 14px; color: #fff !important; background-color: var(--sushiro-action-red) !important; border: 1px solid var(--sushiro-action-red) !important; box-shadow: 0 5px 12px rgba(201, 29, 49, .24); }
.take-number-button:hover, .take-number-button:focus { color: #fff !important; background-color: #a91628 !important; border-color: #a91628 !important; box-shadow: 0 7px 16px rgba(201, 29, 49, .32); }
.take-number-button:disabled { color: rgba(255,255,255,.78) !important; background-color: #a7656d !important; border-color: #a7656d !important; box-shadow: none; cursor: not-allowed; }
.take-number-button:disabled.busy { cursor: wait; }
.notice { position: sticky; top: 12px; z-index: 20; margin: 18px auto 0; padding: 13px 18px; color: #fff; background: #30353c; border-radius: 9px; box-shadow: 0 8px 30px rgba(0,0,0,.22); }
.notice.error { background: #9f1929; }
.ticket-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; }
.ticket { padding: 18px; color: #fff; background: var(--sushiro-ticket-bg); border-radius: 10px; }
.ticket-number { display: block; margin: 5px 0; font-size: 2.4rem; font-weight: 900; }
.source-note { margin-top: 30px; text-align: center; color: var(--sushiro-muted); font-size: .78rem; }

@media (max-width: 720px) {
    .hero, .toolbar { align-items: stretch; flex-direction: column; }
    .hero-actions { display: grid; grid-template-columns: 1fr; }
    .hero { padding: 28px 22px; }
    .filter-controls { grid-template-columns: 1fr; }
    .auth-panel, .login-form { grid-template-columns: 1fr; }
    .logged-in-state { justify-content: space-between; }
    .toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .subheading-row { align-items: flex-start; }
    .queue-refresh-actions { align-items: flex-end; flex-direction: column-reverse; }
    .queue-stats { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .ticket-form-card { padding: 22px 0 0; border-top: 1px solid var(--sushiro-line); border-left: 0; }
}