/* ==========================================================================
   Hotel Admin — light, calm, modern. One accent, soft depth, generous space.
   ========================================================================== */

:root {
    --bg: #f5f7fb;
    --bg-deep: #eef1f8;
    --surface: #ffffff;
    --surface-2: #f8fafd;
    --line: #e4e9f2;
    --line-strong: #d3dae8;

    --ink: #131a26;
    --ink-2: #47536b;
    --ink-3: #8592a8;

    --brand: #3b5bfd;
    --brand-ink: #2440d8;
    --brand-wash: #eef2ff;
    --accent: #00c2a8;
    --warn: #b7791f;
    --warn-wash: #fff8e8;
    --bad: #d6403a;
    --bad-wash: #fdeeed;
    --ok: #17916a;
    --ok-wash: #e8f7f1;

    --r-sm: 8px;
    --r: 14px;
    --r-lg: 20px;
    --shadow-1: 0 1px 2px rgba(19, 26, 38, .06), 0 4px 12px rgba(19, 26, 38, .05);
    --shadow-2: 0 8px 28px rgba(19, 26, 38, .10);
    --shadow-pop: 0 18px 50px rgba(19, 26, 38, .18);
    --rail: 248px;
    --ease: cubic-bezier(.2, .8, .3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    background-image: radial-gradient(1100px 500px at 12% -8%, #e8edff 0%, transparent 60%),
                      radial-gradient(900px 420px at 100% 0%, #e6fbf7 0%, transparent 55%);
    background-attachment: fixed;
    color: var(--ink);
    font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 10px; line-height: 1.22; letter-spacing: -.01em; }
h1 { font-size: 22px; font-weight: 650; }
h2 { font-size: 18px; font-weight: 650; }
h3 { font-size: 16px; font-weight: 640; }
p { margin: 0 0 12px; }
img { max-width: 100%; }
small { font-size: 13px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 90; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand-wash); }

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }

.rail {
    position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 40;
    background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px);
    border-right: 1px solid var(--line); display: flex; flex-direction: column;
    transform: translateX(-100%); transition: transform .28s var(--ease);
}
body.rail-open .rail { transform: none; box-shadow: var(--shadow-pop); }

.rail__brand { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; min-height: 76px; }
.rail__logo { width: 42px; height: 42px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 4px; flex: 0 0 auto; }
.rail__mark { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }
.rail__name { font-weight: 650; font-size: 15px; line-height: 1.2; }
.rail__name small { display: block; color: var(--ink-3); font-weight: 500; font-size: 12px; }

.rail__nav { padding: 6px 12px 28px; overflow-y: auto; flex: 1; }
.rail__group { margin: 18px 10px 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 650; }
.rail__link {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin-bottom: 2px;
    border-radius: var(--r-sm); color: var(--ink-2); font-size: 14.5px; font-weight: 500;
    transition: background .16s var(--ease), color .16s var(--ease);
}
.rail__link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.rail__link.is-active { background: var(--brand-wash); color: var(--brand-ink); font-weight: 620; }
.rail__link svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .85; }
.rail__link.is-active svg { opacity: 1; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; min-height: 68px;
    background: rgba(245, 247, 251, .78); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.icon-btn {
    width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--line);
    background: var(--surface); color: var(--ink-2); display: inline-grid; place-items: center; cursor: pointer;
    transition: border-color .16s var(--ease), color .16s var(--ease);
}
.icon-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.topbar__spacer { flex: 1; }

.site-switch { position: relative; }
.site-switch select {
    appearance: none; min-height: 42px; padding: 0 38px 0 14px; border: 1px solid var(--line);
    border-radius: 999px; background: var(--surface); font: inherit; font-weight: 560; color: var(--ink); cursor: pointer;
}
.site-switch::after { content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); pointer-events: none; }
.site-switch select:hover { border-color: var(--line-strong); }

.content { padding: 22px 16px 80px; }
@media (min-width: 1024px) {
    .rail { transform: none; }
    .main { margin-left: var(--rail); }
    #railToggle { display: none; }
    .content { padding: 26px 30px 90px; }
}

/* ---------- Page heading ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.page-head__text { min-width: 0; }
.page-head h1 { margin-bottom: 4px; }
.page-head p { margin: 0; color: var(--ink-2); max-width: 70ch; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); margin-bottom: 18px; overflow: hidden; }
.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.card__head h2, .card__head h3 { margin: 0; }
.card__body { padding: 18px; }
.card__body > :last-child { margin-bottom: 0; }
.card--flush .card__body { padding: 0; }
.card--glass { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.72)); backdrop-filter: blur(10px); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 0 17px; border-radius: 999px; border: 1px solid transparent;
    background: var(--brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
    transition: transform .14s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
    white-space: nowrap;
}
.btn:hover { background: var(--brand-ink); text-decoration: none; box-shadow: 0 6px 18px rgba(59, 91, 253, .25); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; }
.btn--sm { min-height: 34px; padding: 0 13px; font-size: 13.5px; }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.btn--quiet { background: transparent; color: var(--ink-2); }
.btn--quiet:hover { background: var(--surface-2); color: var(--ink); box-shadow: none; }
.btn--danger { background: var(--bad); }
.btn--danger:hover { background: #b93430; box-shadow: 0 6px 18px rgba(214, 64, 58, .25); }
.btn--accent { background: linear-gradient(120deg, var(--brand), #6a4bff); }
.btn[disabled], .btn.is-busy { opacity: .6; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.grid th, table.grid td { padding: 13px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
table.grid thead th { background: var(--surface-2); color: var(--ink-2); font-weight: 620; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--line); }
table.grid tbody tr { transition: background .14s var(--ease); }
table.grid tbody tr:hover { background: var(--surface-2); }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid td.actions { text-align: right; white-space: nowrap; }
table.grid img.thumb { width: 74px; height: 54px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); display: block; }
.row-num { color: var(--ink-3); font-variant-numeric: tabular-nums; width: 44px; }
/* Every icon gets a size of its own. Without one an inline SVG stretches to fill whatever
   holds it, which is how the ticks in the lists came out several times too large. Anything
   needing a different size says so with a more specific rule. */
.icon { width: 18px; height: 18px; flex: 0 0 auto; }
.flag-yes, .flag-no { display: inline-flex; align-items: center; }
.flag-yes svg, .flag-no svg { width: 18px; height: 18px; }
.flag-yes { color: var(--ok); }
.flag-no { color: var(--ink-3); }
.cell-strong { font-weight: 600; }
.cell-sub { display: block; color: var(--ink-3); font-size: 13px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; min-width: 0; }
.field label, .field > .label { display: block; font-weight: 580; font-size: 14px; margin-bottom: 6px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number],
.field input[type=date], .field input[type=url], .field input[type=tel], .field select, .field textarea, .input {
    width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r-sm);
    font: inherit; color: var(--ink); background: var(--surface); transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(59, 91, 253, .12); }
.field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.field .help { display: block; margin-top: 6px; color: var(--ink-3); font-size: 13px; }
.field--check { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.field--check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brand); flex: 0 0 auto; }
.field--check label { margin: 0; font-weight: 520; }
.grid-2 { display: grid; gap: 0 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-2 .field--full { grid-column: 1 / -1; } }
fieldset.group { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin: 0 0 18px; background: var(--surface-2); }
fieldset.group legend { padding: 0 9px; font-weight: 640; font-size: 13.5px; color: var(--ink-2); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--line); }
.field-error { display: block; margin-top: 6px; color: var(--bad); font-size: 13px; font-weight: 560; }

/* ---------- Image picker ---------- */
.picker { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: var(--surface-2); }
.picker__current { display: flex; gap: 14px; align-items: flex-start; }
.picker__current img { width: 128px; height: 94px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); flex: 0 0 auto; }
.picker__drop { margin-top: 12px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); padding: 14px; text-align: center; color: var(--ink-2); background: var(--surface); transition: border-color .16s var(--ease), background .16s var(--ease); }
.picker__drop.is-over { border-color: var(--brand); background: var(--brand-wash); }
.picker__drop input { display: block; margin: 8px auto 0; max-width: 100%; }
.picker__library { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; max-height: 214px; overflow-y: auto; margin-top: 12px; padding-right: 4px; }
.picker__library button { border: 2px solid transparent; padding: 0; background: none; cursor: pointer; border-radius: var(--r-sm); overflow: hidden; line-height: 0; }
.picker__library button img { width: 100%; height: 68px; object-fit: cover; }
.picker__library button:hover { border-color: var(--line-strong); }
.picker__library button.is-selected { border-color: var(--brand); }

/* ---------- Badges, chips, notices ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 620; }
.badge--ok { background: var(--ok-wash); color: var(--ok); }
.badge--warn { background: var(--warn-wash); color: var(--warn); }
.badge--off { background: var(--bg-deep); color: var(--ink-3); }
.badge--brand { background: var(--brand-wash); color: var(--brand-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; font-size: 12.5px; color: var(--ink-2); }
.notice { border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px; border: 1px solid; }
.notice--bad { background: var(--bad-wash); border-color: #f3c8c6; color: #8f2723; }
.notice--warn { background: var(--warn-wash); border-color: #f0dcae; color: #7a5312; }
.notice ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 32px)); }
.toast {
    display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: var(--r);
    background: var(--ink); color: #fff; box-shadow: var(--shadow-pop); font-size: 14.5px; font-weight: 520;
    animation: toast-in .26s var(--ease) both;
}
.toast--ok { background: #11694f; }
.toast--bad { background: #9c2f2a; }
.toast button { margin-left: auto; background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.toast.is-out { animation: toast-out .2s var(--ease) both; }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }

/* ---------- Stats ---------- */
.stat-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); margin-bottom: 20px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-1); }
.stat strong { display: block; font-size: 27px; font-weight: 660; letter-spacing: -.02em; line-height: 1.1; }
.stat span { color: var(--ink-3); font-size: 13px; }
.stat--accent { background: linear-gradient(135deg, #1b2440, #2c3a66); border-color: transparent; color: #fff; }
.stat--accent span { color: rgba(255, 255, 255, .72); }

.kv { display: grid; grid-template-columns: minmax(96px, 132px) minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 14.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; word-break: break-word; }
.split { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .split { grid-template-columns: 330px minmax(0, 1fr); } .split--wide { grid-template-columns: minmax(0, 1fr) 360px; } }

.logo-frame { display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-height: 132px; margin-bottom: 14px; }

/* ---------- Room picker ---------- */
.room-picks { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); }
.room-pick { display: block; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); color: inherit; box-shadow: var(--shadow-1); transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease); }
.room-pick:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.room-pick img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--surface-2); }
.room-pick span { display: block; padding: 13px 14px; font-weight: 620; }
.room-pick small { display: block; color: var(--ink-3); font-weight: 500; }

/* ---------- Preview workspace ---------- */
.workspace { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1200px) { .workspace { grid-template-columns: minmax(0, 1fr) 420px; } }
.preview-bar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 14px; }
.preview-bar select { min-height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font: inherit; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 560; color: var(--ink-2); cursor: pointer; min-height: 34px; }
.seg button.is-on { background: var(--ink); color: #fff; }
.stage { background: linear-gradient(180deg, #e9edf6, #dfe5f1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; display: grid; place-items: start center; }
.stage iframe { width: 100%; height: 74vh; min-height: 480px; border: 0; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-2); display: block; }
/* A chosen screen size is shown at its true width, even when the column is narrower than
   that: capping it to the column made Tablet look exactly like Desktop. */
.stage.is-tablet, .stage.is-phone { overflow-x: auto; place-items: start; }
.stage.is-tablet iframe { width: 768px; margin: 0 auto; }
.stage.is-phone iframe { width: 390px; margin: 0 auto; }
.editor-panel { position: sticky; top: 88px; }
.editor-panel .card { margin-bottom: 14px; }
.section-list { display: grid; gap: 8px; }
.section-link { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); transition: border-color .16s var(--ease), background .16s var(--ease); }
.section-link:hover { border-color: var(--brand); background: var(--brand-wash); text-decoration: none; }
.section-link strong { display: block; font-weight: 600; }
.section-link small { color: var(--ink-3); }
.section-link svg { margin-left: auto; width: 16px; height: 16px; color: var(--ink-3); }

/* ---------- Drawer ---------- */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(560px, 100%); background: var(--surface); box-shadow: var(--shadow-pop); z-index: 70; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s var(--ease); }
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer__head h2 { margin: 0; }
.drawer__body { padding: 18px; overflow-y: auto; flex: 1; }
.scrim { position: fixed; inset: 0; background: rgba(19, 26, 38, .38); backdrop-filter: blur(2px); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.scrim.is-on { opacity: 1; pointer-events: auto; }

/* ---------- Loading ---------- */
#routeProgress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--brand), var(--accent)); z-index: 90; opacity: 0; transition: width .3s var(--ease), opacity .25s var(--ease); }
html.is-loading #routeProgress { width: 78%; opacity: 1; transition: width 7s cubic-bezier(.1,.7,.3,1), opacity .1s; }
html.is-loading .content { opacity: .55; }
.content { transition: opacity .18s var(--ease); }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--surface-2), #eef2f8, var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Login ---------- */
body.login { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.login-card { width: 100%; max-width: 412px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 30px; }
.login-card .mark { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg, var(--brand), var(--accent)); display: grid; place-items: center; color: #fff; font-weight: 700; margin: 0 auto 14px; font-size: 20px; }
.login-card h1 { text-align: center; font-size: 20px; }
.login-card .lead { text-align: center; color: var(--ink-3); margin-top: -4px; }

.muted { color: var(--ink-3); }
.mb0 { margin-bottom: 0; }
.mt0 { margin-top: 0; }
.nowrap { white-space: nowrap; }
.empty { text-align: center; padding: 42px 20px; color: var(--ink-2); }
/* Only the illustration at the top of an empty panel is large. Written as `.empty svg` it also
   caught the icon inside the button below it, which came out more than twice its proper size. */
.empty > svg { width: 42px; height: 42px; color: var(--ink-3); margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Phone top bar: labels give way to icons so nothing is pushed off screen. */
@media (max-width: 719px) {
    .topbar { gap: 8px; padding: 10px 12px; }
    .topbar .btn span.label, .topbar .btn--ghost .label { display: none; }
    .topbar .btn { padding: 0 12px; }
    .site-switch select { min-width: 0; max-width: 42vw; text-overflow: ellipsis; }
    .content { padding: 18px 12px 72px; }
    .page-head { gap: 10px; }
    .page-head__actions { width: 100%; }
    .page-head__actions .btn { flex: 1 1 auto; }
    table.grid th, table.grid td { padding: 11px 12px; }
}

/* ---------- Cropper ---------- */
.cropper { position: fixed; inset: 0; z-index: 85; background: rgba(15, 20, 32, .62); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; }
.cropper[hidden] { display: none; }
.cropper__panel { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); width: min(600px, 100%); overflow: hidden; }
.cropper__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cropper__stage { background: #0f1420; display: grid; place-items: center; padding: 14px; }
.cropper__stage canvas { max-width: 100%; border-radius: var(--r-sm); cursor: grab; touch-action: none; }
.cropper__stage canvas:active { cursor: grabbing; }
.cropper__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cropper__zoom { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 190px; font-size: 14px; font-weight: 560; }
.cropper__zoom input { flex: 1; accent-color: var(--brand); }
.cropper__actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 16px; }

/* ---------- Action loader ----------
   Raised for work that must finish before the panel is useful again: saving, syncing,
   deleting. Quick page changes keep the thin progress bar instead. */
.app-loader {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .2s var(--ease);
}
.app-loader[hidden] { display: none; }
.app-loader.is-on { opacity: 1; }
.app-loader__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* Three bars that slide past each other, echoing the shape of the site marks. */
.app-loader__mark { display: block; width: 84px; height: 46px; position: relative; }
.app-loader__mark i {
    position: absolute; left: 0; height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}
.app-loader__mark i:nth-child(1) { top: 0;    width: 60%; animation: loaderBar 1.4s ease-in-out infinite; }
.app-loader__mark i:nth-child(2) { top: 17px; width: 100%; animation: loaderBar 1.4s ease-in-out infinite .16s; }
.app-loader__mark i:nth-child(3) { top: 34px; width: 46%; animation: loaderBar 1.4s ease-in-out infinite .32s; }
@keyframes loaderBar {
    0%, 100% { transform: translateX(0) scaleX(1); opacity: .55; }
    50%      { transform: translateX(26%) scaleX(.72); opacity: 1; }
}
.app-loader__msg { margin: 0; font-size: 14px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .app-loader__mark i { animation-duration: 3s; } }

/* ---------- Availability calendar ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tab {
    display: inline-flex; flex-direction: column; gap: 2px;
    padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px;
}
.tab:hover { border-color: var(--brand); }
.tab.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.tab__sub { font-weight: 400; font-size: 11px; opacity: .72; }

.cal-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 900px) { .cal-grid { grid-template-columns: 1fr 1fr; } }
.cal__title { margin: 0 0 12px; font-size: 16px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal__dow { text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-bottom: 4px; }
.cal__day {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; min-height: 58px; padding: 4px 2px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
    transition: border-color .15s var(--ease), background .15s var(--ease), transform .12s var(--ease);
}
.cal__day:hover:not(:disabled) { border-color: var(--brand); transform: translateY(-1px); }
.cal__num { font-weight: 700; font-size: 14px; line-height: 1; }
.cal__left { font-size: 11px; color: var(--muted); line-height: 1; }
.cal__rate { font-size: 10px; color: var(--brand); font-weight: 600; line-height: 1; }
.cal__day.is-past { opacity: .35; cursor: default; }
.cal__day.is-full { background: color-mix(in srgb, var(--warn, #C2410C) 12%, var(--surface)); }
.cal__day.is-closed { background: color-mix(in srgb, var(--danger, #B91C1C) 14%, var(--surface)); border-color: color-mix(in srgb, var(--danger, #B91C1C) 35%, var(--line)); }
.cal__day.is-tuned { border-color: var(--brand); }
.cal__day.is-picked { background: var(--brand); border-color: var(--brand); color: #fff; }
.cal__day.is-picked .cal__left, .cal__day.is-picked .cal__rate { color: rgba(255,255,255,.85); }

.cal__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 20px 0 0; padding: 0; font-size: 13px; color: var(--muted); }
.cal__legend li { display: inline-flex; align-items: center; gap: 8px; }
.cal__legend .swatch { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--line); display: inline-block; }
.swatch--free { background: var(--surface); }
.swatch--full { background: color-mix(in srgb, var(--warn, #C2410C) 22%, var(--surface)); }
.swatch--closed { background: color-mix(in srgb, var(--danger, #B91C1C) 24%, var(--surface)); }
.swatch--tuned { background: var(--surface); border-color: var(--brand); }

/* Three across, for shorter fields. */
.grid-3 { display: grid; gap: 0 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* A line of feedback above a page's content. */
.note { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; border: 1px solid var(--line); background: var(--surface); }
.note--ok { border-color: color-mix(in srgb, var(--ok, #15803D) 40%, var(--line)); background: color-mix(in srgb, var(--ok, #15803D) 8%, var(--surface)); }

/* A tickable list of people, for sending a coupon to named guests. */
.picklist { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.picklist label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.picklist label:hover { background: var(--surface-2, rgba(0,0,0,.03)); }
.picklist input { width: 16px; height: 16px; }
.picklist__meta { margin-left: auto; color: var(--muted); font-size: 12px; }

/* Payment history, one step per row. */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 20px 26px; border-left: 2px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--bg); }
.timeline li.is-bad::before { background: var(--danger, #B91C1C); }
.timeline__when { display: block; font-size: 12px; color: var(--muted); }
.timeline__what { font-weight: 600; }
.card-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-variant-numeric: tabular-nums; }

/* The screen-size control is made of links, so they need the button treatment. */
.seg a {
    display: inline-flex; align-items: center; border: 0; background: none; border-radius: 999px;
    padding: 7px 14px; font: inherit; font-weight: 560; color: var(--ink-2);
    cursor: pointer; min-height: 34px; text-decoration: none;
}
.seg a:hover { color: var(--ink); }
.seg a.is-on { background: var(--ink); color: #fff; }

/* Stripe events: the raw event, and inline setup values */
.json-view { margin: 0; max-height: 560px; overflow: auto; padding: 14px 16px; border-radius: var(--r); background: var(--bg-deep); font: 12.5px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }
.card code { font: 13px ui-monospace, SFMono-Regular, Consolas, monospace; background: var(--bg-deep); padding: 1px 6px; border-radius: 4px; word-break: break-all; }
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
.searchbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.searchbar .input { width: auto; flex: 0 1 200px; min-width: 0; }
.searchbar input[type="search"] { flex: 1 1 240px; }