:root {
    --bg: #f4f6f9;
    --card: #ffffff;
    --ink: #17191f;
    --muted: #8b919c;
    --line: #eef0f3;
    --nav: #fff6ec;
    --shadow: 0 1px 2px rgba(23, 25, 31, 0.04), 0 10px 28px rgba(23, 25, 31, 0.04);
    --radius: 20px;
    --font: "Inter", "Segoe UI", sans-serif;
    --heading: "Bricolage Grotesque", "Inter", sans-serif;
    --serif: "Bricolage Grotesque", "Inter", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading);
    font-weight: 700;
    letter-spacing: -0.035em;
}
.settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.subnav { display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 22px; padding: 10px; box-shadow: var(--shadow); }
.subnav a { padding: 10px 12px; border-radius: 12px; font-weight: 700; color: #5c6572; }
.subnav a.is-on { background: var(--nav); color: var(--ink); }
.stack { display: grid; gap: 12px; }
.stack label, .card.stack label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: #66707c; }
.empty-state { background: #fff; border-radius: 22px; padding: 36px; text-align: center; }
.empty-state b, .empty-state span { display: block; }
.empty-state span { color: var(--muted); margin-top: 6px; }
.lightbox { position: fixed; inset: 0; background: rgba(18, 20, 26, .55); display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: center; padding: 40px; z-index: 20; }
.lightbox .strip { background: #fff; border-radius: 18px; padding: 12px; }
.lightbox-back { position: absolute; top: 20px; right: 24px; background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 800; }
.chart { display: flex; align-items: end; gap: 18px; min-height: 180px; margin-top: 12px; }
.chart div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chart i { display: block; width: 28px; background: #17191f; border-radius: 8px 8px 4px 4px; }
.chart span { color: var(--muted); font-size: 12px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.shell { display: flex; min-height: 100vh; background: var(--bg); }
.sidebar {
    width: 252px;
    flex: none;
    background: #fff;
    padding: 28px 16px 20px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: auto;
}
.brand { display: flex; flex-direction: column; padding: 0 14px 26px; }
.brand-mark { font-family: var(--serif); letter-spacing: 0.18em; font-size: 13px; font-weight: 600; }
.brand-sub { letter-spacing: 0.34em; font-size: 7px; color: #b0b5bd; margin-top: 4px; }
.nav-label { margin: 8px 14px; color: #b7bcc4; font-size: 12px; font-weight: 500; }
.nav-split { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 999px; color: #3c414b; font-weight: 600; font-size: 14px;
}
.nav-link svg { stroke: #6d7380; }
.nav-link.is-active { background: var(--nav); color: var(--ink); }
.nav-link.is-active svg { stroke: var(--ink); }

.main { flex: 1; min-width: 0; padding: 22px 28px 48px; }
.topbar { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(240px, 440px) auto; gap: 18px; align-items: center; margin-bottom: 16px; }
.topbar h1 { margin: 0; font-size: 30px; letter-spacing: -0.04em; font-weight: 750; }
.topbar p, .lede { margin: 2px 0 0; color: #8d949e; font-size: 14px; font-weight: 500; }
.crumb { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.crumb a { color: #5c6572; }
.search, .tool-search {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border-radius: 999px; padding: 0 16px; height: 46px;
    box-shadow: var(--shadow); color: #98a0aa;
}
.search input, .tool-search input { color: var(--ink); }
.search input, .tool-search input { border: 0; outline: 0; width: 100%; background: transparent; }
.top-tools { display: flex; align-items: center; gap: 10px; }
.bell, .userchip { position: relative; }
.bell summary, .icon-btn, .userchip summary {
    list-style: none; background: #fff; border: 0; border-radius: 999px;
    height: 48px; display: flex; align-items: center; box-shadow: var(--shadow);
}
.bell summary, .icon-btn { width: 48px; justify-content: center; position: relative; }
.bell summary::-webkit-details-marker, .userchip summary::-webkit-details-marker { display: none; }
.bell i { position: absolute; top: 12px; right: 13px; width: 8px; height: 8px; background: #e25b45; border-radius: 50%; }
.userchip summary { gap: 10px; padding: 0 16px 0 6px; }
.userchip summary b, .userchip summary small { display: block; line-height: 1.1; }
.userchip summary small { color: var(--muted); font-size: 11px; font-weight: 600; }
.bell-menu, .user-menu, .filter-pop {
    position: absolute; right: 0; top: 56px; background: #fff; border-radius: 18px;
    box-shadow: 0 18px 50px rgba(23,25,31,.12); padding: 12px; min-width: 280px; z-index: 5;
}
.bell-menu a, .user-menu a, .search-cols a { display: block; padding: 10px; border-radius: 12px; }
.bell-menu a:hover, .user-menu a:hover, .search-cols a:hover { background: #f6f7f9; }
.bell-menu b, .bell-menu span { display: block; }
.bell-menu span { color: var(--muted); font-size: 12px; margin-top: 3px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.stat, .card, .panel {
    background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.stat small { display: block; color: var(--muted); margin: 10px 0 4px; font-size: 13px; font-weight: 500; }
.stat strong { font-size: 28px; letter-spacing: -0.045em; font-weight: 750; }
.stat-ico { width: 34px; height: 34px; border-radius: 12px; background: #f6f1ea; display: grid; place-items: center; }
.dash-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 14px; margin-bottom: 14px; }
.dash-grid-2 { grid-template-columns: .85fr 1.15fr; }
.dash-grid-cal { grid-template-columns: .7fr 1.3fr; }
.card-head, .panel-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card h2, .card-head h2 { margin: 0; font-size: 18px; }
.card-head a { color: #3d7dff; font-weight: 700; font-size: 13px; }
.headline { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.headline-title { display: flex; align-items: center; gap: 10px; }
.headline h3 { margin: 0; font-size: 28px; letter-spacing: -0.03em; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chip { border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 700; }
.welcome-art {
    border-radius: 18px; min-height: 188px; position: relative; overflow: hidden;
    background: #fff5f7;
}
.welcome-art img { width: 100%; height: 100%; min-height: 188px; object-fit: cover; object-position: left center; display: block; }
.welcome-art.tall { min-height: 240px; }
.art-copy, .art-logo { position: relative; z-index: 1; padding: 22px; color: #fff; text-shadow: 0 8px 20px rgba(120,40,60,.25); }
.art-copy span { display: block; font-family: var(--serif); font-size: 28px; }
.art-copy small { display: block; margin-top: 6px; }
.art-copy em { display: inline-block; margin-top: 14px; background: #111; color: #fff; text-shadow: none; font-style: normal; border-radius: 999px; padding: 8px 14px; font-size: 13px; }
.art-logo { font-family: var(--serif); letter-spacing: .16em; font-size: 12px; }
.alert { border-radius: 16px; padding: 14px; margin-top: 12px; }
.alert-danger { background: #fff; border: 1px solid #e7b7b1; }
.alert-warn { background: #fff; border: 1px solid #e4d2a4; }
.alert-danger .alert-top strong { color: #c4473c; }
.alert-warn .alert-top strong { color: #b08a3c; }
.alert-ico { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
.alert-top { display: flex; justify-content: space-between; gap: 8px; }
.alert p { margin: 6px 0 10px; color: #5c534c; font-size: 14px; }
.feed { list-style: none; margin: 8px 0 0; padding: 0; }
.feed li, .upcoming li, .side-bookings li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.feed b, .upcoming b, .side-bookings b { display: block; }
.feed span, .upcoming span, .side-bookings span, .who small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.feed time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.grid { width: 100%; border-collapse: collapse; margin-top: 8px; }
.grid th { text-align: left; font-size: 12px; color: #a0a6b0; font-weight: 600; padding: 10px 8px; }
.grid td { padding: 12px 8px; border-top: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.who { display: flex; align-items: center; gap: 10px; }
.who-lg { align-items: flex-start; margin-bottom: 16px; }
.code, .avatar, .booth-face {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12px; font-weight: 800; flex: none;
}
.booth-face.lg { width: 64px; height: 64px; font-size: 18px; }
.avatar-dark { background: #17191f; color: #fff; }
.avatar-cream { background: #f6ecdf; color: #8a6a3b; }
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; background: #f3f4f6; color: #66707c; }
.pill-live, .pill-online, .pill-paid, .pill-settled, .pill-confirmed { background: #e7f6ee; color: #1f9a5c; }
.pill-offline, .pill-overdue, .pill-refunded { background: #fde8e6; color: #e15a4a; }
.pill-paper_low, .pill-setup, .pill-scheduled, .pill-due, .pill-pending, .pill-option { background: #fff3dc; color: #d4922a; }
.pill-maintenance, .pill-ended, .pill-sent, .pill-draft { background: #f2f3f5; color: #8b919c; }
.paper-cell b, .paper-block b { display: block; }
.paper-cell i, .paper-block i { display: block; height: 6px; background: #eceff3; border-radius: 99px; margin-top: 6px; width: 108px; }
.paper-block i { width: 100%; height: 8px; }
.paper-cell i span, .paper-block i span { display: block; height: 100%; background: #17191f; border-radius: 99px; }
.paper-cell.is-low b, .paper-block.is-low b { color: #d4891a; }
.paper-cell.is-low i span, .paper-block.is-low i span { background: #e0a04a; }
.muted { color: var(--muted); }
.quiet { color: #98a0aa; display: inline-grid; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 18px; font-weight: 700; background: #fff; }
.btn-dark { background: #17191f; color: #fff; }
.btn-line, .btn-ghost { background: #fff; border: 1px solid #e6e8ee; }
.btn-white { background: #fff; border: 1px solid #f0d2ce; }
.btn-pink { background: #f3b6c4; color: #4a2430; }
.btn-sm { padding: 8px 12px; }
.btn.xl { width: 100%; padding: 16px; }
.btn-row, .form-actions, .kiosk-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.is-hot { color: #d4534a; border-color: #f3c7c2; }
.mini-head, .mini-nav { display: flex; justify-content: space-between; align-items: center; }
.mini-head small { color: var(--muted); }
.mini-head strong { display: block; font-size: 20px; }
.mini-nav span { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; margin-left: 6px; }
.mini-week, .mini-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.mini-week { color: #b0b6bf; font-size: 12px; margin: 14px 0 6px; }
.mini-days span { height: 42px; font-size: 13px; color: #5d6570; position: relative; }
.mini-days .is-out { color: #c5cad1; }
.mini-days .is-today { background: #17191f; color: #fff; border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; margin: 0 auto; }
.mini-days i { width: 4px; height: 4px; border-radius: 50%; display: inline-block; margin: 0 1px; }
.upcoming { list-style: none; margin: 0; padding: 0; }
.upcoming small { color: #8d6cff; font-weight: 700; }

.panel { position: relative; }
.panel-actions { justify-content: flex-end; margin-bottom: 8px; }
.table-tools { display: flex; gap: 10px; align-items: center; margin: 8px 0 12px; }
.tool-search { flex: 1; box-shadow: none; border: 1px solid #eceff3; }
.tool-search.wide { margin-bottom: 16px; }
.tool-filter { position: relative; }
.tool-filter summary, .tool-select select, .cal-sync button, a.cal-sync {
    list-style: none; height: 46px; border-radius: 999px; border: 1px solid #eceff3; background: #fff;
    padding: 0 16px; display: flex; align-items: center; gap: 8px;
}
.tool-select select { min-width: 150px; }
.filter-pop { display: grid; gap: 8px; }
.filter-pop label, .form-card label, .stack textarea { display: grid; gap: 6px; font-size: 13px; color: #66707c; font-weight: 700; }
body:not(.kiosk) input:not([type]),
body:not(.kiosk) input[type="text"],
body:not(.kiosk) input[type="email"],
body:not(.kiosk) input[type="password"],
body:not(.kiosk) input[type="date"],
body:not(.kiosk) input[type="time"],
body:not(.kiosk) input[type="number"],
body:not(.kiosk) select,
body:not(.kiosk) textarea {
    width: 100%;
    border: 1px solid #e4e7ee;
    border-radius: 14px;
    padding: 12px 14px;
    background: #fff;
    font-weight: 600;
    color: #17191f;
    outline: none;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
body:not(.kiosk) input:not([type]):focus,
body:not(.kiosk) input[type="text"]:focus,
body:not(.kiosk) input[type="email"]:focus,
body:not(.kiosk) input[type="password"]:focus,
body:not(.kiosk) input[type="date"]:focus,
body:not(.kiosk) input[type="time"]:focus,
body:not(.kiosk) input[type="number"]:focus,
body:not(.kiosk) select:focus,
body:not(.kiosk) textarea:focus {
    border-color: #17191f;
    box-shadow: 0 0 0 4px rgba(23, 25, 31, .06);
}
body:not(.kiosk) input[readonly] {
    background: #f6f7f9;
    color: #8b919c;
}
body:not(.kiosk) select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238b919c' stroke-width='1.6' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
body:not(.kiosk) .search input,
body:not(.kiosk) .tool-search input {
    width: 100%;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
body:not(.kiosk) .tool-select select {
    width: auto;
    min-width: 160px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid #eceff3;
    padding: 0 36px 0 16px;
    box-shadow: none;
    background-color: #fff;
}
.pager { display: flex; justify-content: space-between; align-items: center; color: #8b919c; font-size: 13px; margin-top: 8px; }
.pager-nav, .page-num, .page-arrow { display: inline-flex; align-items: center; gap: 6px; }
.page-num, .page-arrow { min-width: 28px; height: 28px; border-radius: 8px; justify-content: center; }
.page-num.is-current { background: #f4f5f7; color: var(--ink); font-weight: 800; }
.is-disabled { pointer-events: none; opacity: .35; }
.empty { color: var(--muted); padding: 20px; }
.is-over { color: #d4534a; font-weight: 700; }
.tabs, .status-tabs, .seg-switch, .booth-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tabs a, .status-tabs a, .seg-switch a, .booth-filters a {
    border-radius: 999px; padding: 8px 12px; color: #66707c; font-weight: 700; font-size: 13px;
}
.tabs { margin-bottom: 12px; }
.status-tabs { margin-bottom: 12px; }
.status-tabs a.is-on, .seg-switch a.is-on, .booth-filters a.is-on { background: #17191f; color: #fff; }
.status-tabs b { margin-left: 6px; background: #eef0f3; color: #667; border-radius: 99px; padding: 1px 6px; font-size: 11px; }
.status-tabs a.is-on b { background: #2a2d34; color: #fff; }
.event-status { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.event-status select { width: auto; min-width: 140px; }
.event-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.event-meta span { display: block; color: var(--muted); font-size: 13px; }
.steps { display: flex; gap: 18px; align-items: center; margin: 8px 0 16px; color: #98a0aa; font-weight: 700; font-size: 14px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; }
.step i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #eceff3; font-style: normal; font-size: 12px; }
.step.is-on { color: var(--ink); }
.step.is-on i { background: #17191f; color: #fff; }
.identity, .split, .form-grid, .search-cols { display: grid; gap: 16px; }
.identity, .split { grid-template-columns: 1.1fr .9fr; margin-top: 12px; }
.form-grid { grid-template-columns: repeat(2, 1fr); }
.search-cols { grid-template-columns: repeat(3, 1fr); }
.upload { display: block; border: 1px dashed #e1e4ea; border-radius: 16px; padding: 16px; }
.swatches, .mode-row, .overlay-row, .choice-grid, .filter-picks { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.swatches label, .mode, .choice, .filter-picks label {
    background: #fff; border: 1px solid #eceff3; border-radius: 16px; padding: 10px; display: grid; justify-items: center; gap: 6px; font-size: 12px;
}
.mode.is-on, .choice:has(input:checked), .filter-picks label:has(input:checked) { border-color: #17191f; box-shadow: inset 0 0 0 1px #17191f; }
.mode input, .choice input, .filter-picks input { position: absolute; opacity: 0; }
.field-label { display: block; font-size: 13px; font-weight: 700; color: #66707c; }
.spec dt { font-size: 12px; color: #98a0aa; margin-top: 10px; }
.spec dd { margin: 2px 0 0; font-weight: 700; }
.seg { display: flex; gap: 16px; color: #98a0aa; font-size: 13px; font-weight: 700; margin: 16px 0; }
.range { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 12px 0; }
.toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0; font-weight: 700; }
.field-pair { display: grid; gap: 10px; }
.style-preview { background: #f7f4f1; border-radius: 20px; padding: 20px; }
.filter-card, .swatch { width: 84px; height: 96px; border-radius: 14px; background: #fff; display: grid; place-items: end center; padding-bottom: 8px; }
.swatch.color { background: linear-gradient(160deg, #f0c3b4, #6d3b3b); }
.swatch.bw { background: #f4f4f4; place-items: center; font-size: 9px; letter-spacing: .12em; }
.savebar { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 14px; color: #8b919c; font-size: 13px; }
.check-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.check { background: #fff; border-radius: 999px; padding: 8px 12px; border: 1px solid #eceff3; }
.stack textarea { width: 100%; }
.flash { border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; background: #e9f8ef; }
.flash-bad { background: #fdeceb; }
.bars, .fleet { list-style: none; margin: 12px 0 0; padding: 0; }
.bars li, .fleet li { display: grid; grid-template-columns: 140px 1fr auto; gap: 10px; align-items: center; margin: 10px 0; }
.bars i { height: 8px; background: #f1f2f4; border-radius: 99px; display: block; }
.bars b { display: block; height: 8px; background: #17191f; border-radius: 99px; }
.fleet li { grid-template-columns: 1fr auto; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.shot { background: #f7f8fa; border-radius: 18px; padding: 12px; }
.strip { display: grid; gap: 6px; margin-bottom: 10px; }
.strip i, .strip img { display: block; width: 100%; height: 54px; border-radius: 8px; object-fit: cover; background: hsl(var(--hue), 45%, 72%); }
.lightbox .strip img { height: 92px; }
.strip.is-grid { grid-template-columns: 1fr 1fr; }
.strip.is-bw i { filter: grayscale(1); }
.shot b, .shot span, .shot small { display: block; }
.shot span, .shot small { color: var(--muted); font-size: 12px; }

.cal-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.seg-switch { background: #fff; border-radius: 999px; padding: 4px; }
.cal-nav { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 6px 12px; }
.cal-nav a { width: 28px; height: 28px; display: grid; place-items: center; }
.booth-filters { margin-bottom: 12px; }
.cal-layout { display: grid; grid-template-columns: 300px 1fr; gap: 14px; }
.month-head, .month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.month-head span { color: #a0a6b0; font-size: 12px; padding: 8px; }
.day { min-height: 108px; border-top: 1px solid var(--line); padding: 6px; }
.day.is-out { opacity: .45; }
.day.is-today b { background: #17191f; color: #fff; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; }
.block, .lane-block { display: block; border-radius: 10px; padding: 6px; margin-top: 4px; font-size: 11px; font-weight: 700; }
.agenda-head, .agenda-body { display: grid; }
.agenda-head strong { padding: 8px; font-size: 13px; }
.hours span { height: 56px; display: block; color: #b0b6bf; font-size: 11px; line-height: 1; }
.lane { position: relative; border-left: 1px solid var(--line); min-height: 616px; background-image: repeating-linear-gradient(to bottom, transparent, transparent 55px, #eef0f4 55px, #eef0f4 56px); }
.lane.is-today { background-color: #fbfcfe; }
.lane-block { position: absolute; left: 6px; right: 6px; overflow: hidden; }
.side-bookings { list-style: none; padding: 0; margin: 0; }

.kiosk {
    min-height: 100vh;
    background: radial-gradient(circle at 70% 40%, #fff, #f4efe8 45%, #efe4d8);
    display: grid;
}
.kiosk-card {
    width: min(920px, calc(100% - 48px));
    margin: auto;
    background: rgba(255,255,255,.72);
    border-radius: 28px;
    padding: 36px;
    box-shadow: var(--shadow);
}
.login-body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    color: #f4f4f5;
    background:
        radial-gradient(900px 520px at 78% 18%, rgba(255,255,255,.08), transparent 60%),
        #141414;
}
.login-wrap { width: min(420px, calc(100% - 32px)); text-align: center; }
.login-brand { margin-bottom: 28px; color: #f7f7f7; }
.login-brand .brand-mark { font-size: 22px; letter-spacing: .22em; }
.login-brand .brand-sub { letter-spacing: .42em; }
.login-card {
    text-align: left;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 28px 26px 22px;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.login-card h1 { margin: 0 0 8px; font-size: 32px; letter-spacing: -.04em; font-weight: 750; }
.login-lead { margin: 0 0 18px; color: #b7b7bc; font-size: 14px; }
.login-card label.field { display: grid; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 650; color: #ececef; }
.login-card [hidden] { display: none !important; }
.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="text"] {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: #111214;
    color: #fff;
    padding: 0 18px;
    font-weight: 600;
}
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 48px; }
.eye {
    position: absolute; right: 8px; top: 6px; width: 36px; height: 36px;
    border: 0; border-radius: 50%; background: transparent; color: #d0d0d4;
}
.login-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 16px; font-size: 13px; color: #d7d7db; }
.login-row label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.login-row a { color: #f2f2f4; }
.login-card .btn-white {
    width: 100%; background: #fff; color: #111; border-radius: 999px; padding: 14px; font-weight: 750; border: 0;
}
.login-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: #8d8d93; font-size: 13px; margin: 16px 0; }
.login-or::before, .login-or::after { content: ""; height: 1px; background: rgba(255,255,255,.12); }
.btn-oauth {
    width: 100%; margin-top: 10px; background: #0e0e10; color: #fff;
    border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 13px 16px; font-weight: 700;
}
.login-foot { margin: 16px 0 0; color: #9a9aa0; font-size: 12px; line-height: 1.45; }
.login-note { margin-top: 12px; color: #f0d0a2; font-size: 13px; }
.login-card .flash { margin-bottom: 12px; }
.attract { padding: 10vh 8vw; }
.attract h1 { font-size: clamp(48px, 7vw, 92px); line-height: .95; letter-spacing: -0.045em; margin: 0; }
.start {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
    background: #fff; border-radius: 999px; padding: 14px 18px; font-weight: 800;
    box-shadow: var(--shadow);
}
.kiosk-foot { display: flex; justify-content: space-between; align-items: end; padding: 18px 28px 22px; color: #8d867d; }
.kiosk-foot nav { display: flex; gap: 16px; font-size: 13px; }
.layout-screen { display: grid; grid-template-columns: 240px 1fr; gap: 28px; }
.live-preview { background: #f7f5f2; border-radius: 24px; padding: 16px; }
.live-preview .frame { background: #fff; border-radius: 10px; min-height: 72px; margin: 8px 0; display: grid; place-items: center; font-size: 10px; letter-spacing: .14em; color: #b0aaa4; }
.live-preview.border-black .frame { background: #17191f; color: #fff; }
.live-preview.border-pink .frame { background: #f8d5df; }
.live-preview.border-blue .frame { background: #d7ecf8; }
.live-preview.border-floral .frame { background: linear-gradient(160deg, #f7c6d8, #d9ecfb); }
.kicker { letter-spacing: .16em; font-size: 11px; color: #98a0aa; font-weight: 800; }
.kiosk-actions { margin-top: 22px; }
.filter-screen { min-height: 420px; }
.camera-screen, .shoot-screen, .share-screen { display: grid; grid-template-columns: 1.4fr .8fr; gap: 28px; padding: 28px; align-items: center; }
.viewfinder { position: relative; border-radius: 28px; overflow: hidden; background: #d9d3cc; min-height: 68vh; }
.viewfinder video, .viewfinder img { width: 100%; height: 68vh; object-fit: cover; display: block; }
.viewfinder.is-bw video { filter: grayscale(1); }
.corners { position: absolute; inset: 18px; border: 2px solid rgba(255,255,255,.8); border-radius: 8px; pointer-events: none; }
.count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 120px; font-weight: 800; color: #fff; text-shadow: 0 10px 30px rgba(0,0,0,.35); }
.live-pill { display: inline-flex; border-radius: 999px; background: #fff; padding: 8px 12px; font-size: 12px; font-weight: 800; }
.live-pill::before { content: ""; width: 8px; height: 8px; background: #e25b45; border-radius: 50%; display: inline-block; margin-right: 8px; }
.camera-screen ul, .share-screen ol { padding-left: 18px; color: #4d5662; }
.camera-screen li span { display: block; color: var(--muted); }
.back { display: block; text-align: center; margin-top: 10px; color: #667; }
.shot-dots { display: flex; gap: 8px; }
.shot-dots i { width: 12px; height: 12px; border-radius: 50%; background: #e4e0da; display: block; }
.shot-dots i.is-on { background: #17191f; }
.phone-body { background: #111; border-radius: 32px; padding: 18px; color: #fff; width: min(280px, 100%); }
.phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.phone-grid span, .phone-grid img { height: 78px; border-radius: 8px; background: #d9d3cc; width: 100%; object-fit: cover; }
.filter-picks .person { width: 92px; height: 108px; border-radius: 16px; background: #f4efe9; position: relative; overflow: hidden; }
.filter-picks .person::before { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; background: #e7b5a8; left: 29px; top: 18px; }
.filter-picks .person::after { content: ""; position: absolute; width: 54px; height: 36px; border-radius: 20px 20px 8px 8px; background: #6d5a4e; left: 19px; bottom: 14px; }
.filter-picks .person.is-bw { filter: grayscale(1); }
.filter-picks label { position: relative; }
.filter-picks label.is-on::after, .filter-picks label:has(input:checked)::after { content: "✓"; position: absolute; left: 18px; bottom: 28px; width: 18px; height: 18px; border-radius: 50%; background: #111; color: #fff; font-size: 11px; display: grid; place-items: center; }
.shoot-live { position: relative; min-height: 100vh; background: #d7d1cb; }
.shoot-live video { width: 100%; height: 100vh; object-fit: cover; display: block; }
.shoot-live.is-bw video { filter: grayscale(1); }
.shoot-live .corners { position: absolute; inset: 22px; pointer-events: none; }
.shoot-live .corners::before, .shoot-live .corners::after { content: ""; position: absolute; width: 42px; height: 42px; border: 3px solid #fff; }
.shoot-live .corners::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.shoot-live .corners::after { top: 0; right: 0; border-left: 0; border-bottom: 0; box-shadow: -0 0 0 0; }
.count-bubble { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 148px; height: 148px; border-radius: 50%; background: rgba(255,255,255,.72); display: grid; place-items: center; }
.count-bubble b { font-size: 84px; letter-spacing: -.04em; }
.lens-pill { position: absolute; left: 50%; top: calc(42% + 92px); transform: translateX(-50%); background: rgba(90,96,110,.72); color: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 700; }
.shot-thumbs { position: absolute; left: 28px; bottom: 72px; display: flex; gap: 8px; }
.shot-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 3px solid #fff; background: #111; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.flash.is-on { opacity: .85; }
.review-screen, .deliver-screen, .qr-screen { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center; padding: 28px 40px 80px; }
.strip-card { background: rgba(255,255,255,.55); border-radius: 28px; padding: 28px; text-align: center; }
.strip-card small { letter-spacing: .16em; color: #9aa0aa; font-size: 11px; }
.strip-sheet { width: 180px; margin: 12px auto; background: #fff; border-radius: 8px; padding: 8px; display: grid; gap: 6px; }
.strip-sheet img, .strip-sheet span { height: 92px; width: 100%; object-fit: cover; background: #ddd4cc; border-radius: 4px; display: block; }
.strip-sheet em { font-style: normal; font-family: var(--serif); letter-spacing: .14em; font-size: 11px; display: block; padding: 8px 0 4px; }
.strip-sheet em small { display: block; letter-spacing: .2em; font-size: 7px; }
.copies { display: flex; align-items: center; justify-content: space-between; border: 1px solid #ece7e1; border-radius: 999px; padding: 8px; background: #fff; max-width: 420px; }
.copies button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #f4f5f7; font-size: 22px; }
.copies b, .copies small { display: block; text-align: center; }
.copies small { color: var(--muted); font-weight: 500; }
.review-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.review-actions .btn { min-width: 180px; }
.review-actions small { display: block; font-size: 11px; font-weight: 600; color: #7d8794; }
.deliver-screen .route, .route { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; background: #fff; border-radius: 18px; padding: 16px 18px; margin-top: 12px; border: 1px solid #f0eeea; }
.route span { grid-column: 1; color: var(--muted); font-size: 13px; }
.route em { font-style: normal; align-self: center; }
.route-links { display: flex; justify-content: space-between; margin-top: 16px; color: #5c6572; }
.phone-pack small { letter-spacing: .14em; color: #9aa0aa; font-size: 11px; }
.phone-body.light { background: #fff; color: #17191f; }
.gif-row, .waiting-choice { background: #f6f7f9; border-radius: 12px; padding: 10px; margin-top: 8px; }
.print-progress { margin-top: 14px; font-size: 13px; }
.print-progress i { display: block; height: 4px; background: linear-gradient(90deg, #111 40%, #e7e7ea 40%); border-radius: 99px; margin: 6px 0; }
.pay-screen { min-height: 100vh; display: grid; place-items: center; padding: 40px 16px 80px; }
.print-pill, .wait-pill, .looking { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: #fff; border: 1px solid #eee; padding: 8px 14px; font-size: 13px; }
.print-pill { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); }
.pay-card { width: min(460px, 100%); background: #fff; border-radius: 28px; padding: 28px 26px; text-align: center; box-shadow: var(--shadow); }
.pay-card h1 { font-size: 64px; margin: 8px 0; letter-spacing: -.04em; }
.pay-card h2 { margin-bottom: 0; }
.pay-card hr { border: 0; border-top: 1px solid #eee; margin: 18px 0; }
.chevrons { color: #9aa3b2; line-height: 1; margin: 10px 0; }
.fine, .pay-methods { color: #8b919c; font-size: 13px; }
.qr-card { background: #fff; border-radius: 28px; padding: 28px; text-align: center; }
.qr-frame { width: min(320px, 100%); aspect-ratio: 1; margin: 16px auto; display: grid; place-items: center; background:
    linear-gradient(#16324a, #16324a) 0 0 / 28px 4px no-repeat,
    linear-gradient(#16324a, #16324a) 0 0 / 4px 28px no-repeat,
    linear-gradient(#16324a, #16324a) 100% 0 / 28px 4px no-repeat,
    linear-gradient(#16324a, #16324a) 100% 0 / 4px 28px no-repeat,
    linear-gradient(#16324a, #16324a) 0 100% / 28px 4px no-repeat,
    linear-gradient(#16324a, #16324a) 0 100% / 4px 28px no-repeat,
    linear-gradient(#16324a, #16324a) 100% 100% / 28px 4px no-repeat,
    linear-gradient(#16324a, #16324a) 100% 100% / 4px 28px no-repeat; }
.qr-mark { width: 210px; height: 210px; background: repeating-conic-gradient(#111 0% 25%, #fff 0% 50%) 0 0 / 14px 14px; }
.keep-note, .done-row, .reset-note { background: #fff; border-radius: 16px; padding: 14px 16px; margin-top: 12px; }
.done-row b, .done-row span, .keep-note b, .keep-note span { display: block; }
.done-row span, .keep-note span { color: var(--muted); font-size: 13px; }
.reset-note { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.reset-note i { grid-column: 1 / -1; height: 4px; background: #111; border-radius: 99px; }
.email-screen { padding: 36px 40px 24px; }
.email-screen form { display: flex; gap: 12px; align-items: center; margin: 16px 0; }
.email-screen input { flex: 1; height: 64px; border-radius: 16px; border: 1px solid #d9dde3; padding: 0 16px; font-size: 22px; }
.email-screen .btn { height: 64px; padding: 0 28px; }
.keypad { display: grid; gap: 8px; margin-top: 18px; }
.keypad div { display: flex; gap: 8px; justify-content: center; }
.keypad button { min-width: 58px; height: 52px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.04); font-size: 18px; }
.keypad .space { flex: 1; }
.keypad .go { background: #111; color: #fff; min-width: 72px; }
.is-legal { background: #2a2d33; }
.legal-card { width: min(720px, calc(100% - 32px)); margin: 40px auto; background: #fff; border-radius: 28px; padding: 32px 32px 24px; }
.legal-card h1 { margin: 0; }
.legal-card .ver { color: #8b919c; }
.legal-card h2 { font-size: 16px; margin: 16px 0 4px; }
.legal-card .btn { display: block; margin: 18px auto 0; min-width: 140px; }
body.kiosk.is-live .kiosk-foot { position: absolute; left: 0; right: 0; bottom: 0; color: #fff; }
body.kiosk.is-live .kiosk-foot a { color: #fff; }
.airdrop { background: #fff; color: #17191f; border-radius: 18px; padding: 12px; margin-top: 12px; }
.airdrop button { width: 100%; border: 0; border-radius: 12px; padding: 10px; margin-top: 8px; background: #2f80ff; color: #fff; font-weight: 800; }
.airdrop button.ghost { background: #eef1f4; color: #667; }
.paid { color: #1c9a57; font-weight: 800; }
.looking, .sender { border: 1px solid #e6e1da; border-radius: 16px; padding: 12px 14px; background: #fff; }
.sender { display: grid; margin: 16px 0; }
.sender em { justify-self: end; font-size: 11px; color: #98a0aa; font-style: normal; }

.page-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.page-toolbar .status-tabs { margin: 0; }
.stat .hint { display: block; color: #a0a6b0; font-size: 12px; font-weight: 500; margin-bottom: 8px; }
.rank { list-style: none; margin: 8px 0 0; padding: 0; }
.rank li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 12px 0; }
.rank b { font-size: 14px; }
.rank span { color: var(--muted); font-size: 13px; }
.rank i { grid-column: 1 / -1; height: 4px; background: #f1f2f4; border-radius: 99px; display: block; }
.rank i em { display: block; height: 4px; background: #17191f; border-radius: 99px; }
.chart i { background: #eceff3; width: 36px; border-radius: 10px 10px 6px 6px; }
.chart i.is-peak { background: #17191f; }
.settings-layout { display: block; }
.subnav { flex-direction: row; flex-wrap: wrap; background: transparent; box-shadow: none; padding: 0; margin: 0 0 14px; border-radius: 0; }
.subnav a.is-on { background: #17191f; color: #fff; }

@media (max-width: 1100px) {
    .shell { flex-direction: column; }
    .sidebar { position: static; height: auto; width: auto; }
    .topbar, .stat-grid, .dash-grid, .dash-grid-2, .dash-grid-cal, .headline, .identity, .split, .cal-layout, .gallery, .search-cols, .camera-screen, .shoot-screen, .share-screen, .layout-screen {
        grid-template-columns: 1fr;
    }
    body.kiosk .review-screen,
    body.kiosk .deliver-screen,
    body.kiosk .qr-screen,
    body.kiosk .camera-screen,
    body.kiosk .layout-screen { grid-template-columns: 1fr; }
}

body.kiosk {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #1c2433;
    background: radial-gradient(1100px 720px at 72% 18%, #ffffff 0%, #f7f4ef 42%, #efe6dc 100%);
}
body.kiosk > main { flex: 1; }
body.kiosk h1 { color: #1a2030; font-weight: 800; letter-spacing: -0.045em; }
body.kiosk p, body.kiosk .back { color: #6d7786; }
body.kiosk .kiosk-card {
    width: min(1120px, calc(100% - 48px));
    margin: 28px auto 8px;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(40, 32, 20, .06);
}
body.kiosk .kiosk-foot {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    padding: 8px 28px 18px;
    color: #9a9188;
}
body.kiosk .foot-brand { grid-column: 2; text-align: center; }
body.kiosk .foot-brand .brand-mark { display: block; font-size: 13px; letter-spacing: .22em; color: #8d8680; }
body.kiosk .foot-brand .brand-sub { display: block; }
body.kiosk .kiosk-foot nav { grid-column: 3; justify-self: end; display: flex; gap: 8px; font-size: 13px; }
body.kiosk .kiosk-foot a { color: #8d8680; }
body.kiosk .btn-dark { background: #171a21; color: #fff; border-radius: 999px; min-height: 48px; padding: 12px 22px; }
body.kiosk .btn-line { background: #fff; border: 1px solid #e6e2dc; border-radius: 999px; min-height: 48px; }
body.kiosk .attract { padding: 12vh 9vw 4vh; }
body.kiosk .attract p { font-size: 20px; margin-top: 14px; }
body.kiosk .start { background: #fff; color: #1a2030; box-shadow: 0 10px 30px rgba(40,32,20,.08); padding: 14px 20px; }
body.kiosk .tile-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 18px; }
body.kiosk .tile { width: 108px; display: grid; justify-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: #3c4553; position: relative; }
body.kiosk .tile input { position: absolute; opacity: 0; }
body.kiosk .tile .ico, body.kiosk .tile .mini-strip {
    width: 92px; height: 92px; border-radius: 18px; background: #fff;
    border: 1px solid #ece8e2; display: grid; place-items: center;
    box-shadow: 0 8px 20px rgba(40,32,20,.04);
}
body.kiosk .tile:has(input:checked) .ico,
body.kiosk .tile:has(input:checked) .mini-strip { outline: 2px solid #1c2433; outline-offset: 0; }
body.kiosk .tile:has(input:checked) .ico::after,
body.kiosk .tile:has(input:checked) .mini-strip::after {
    content: "✓"; position: absolute; left: 10px; bottom: 28px; width: 18px; height: 18px;
    border-radius: 50%; background: #1c2433; color: #fff; font-size: 11px; display: grid; place-items: center;
}
body.kiosk .tile .ico.ico-strip4,
body.kiosk .tile .ico.ico-strip3,
body.kiosk .tile .ico.ico-grid,
body.kiosk .tile .ico.ico-single { background-color: #fff; }
body.kiosk .tile .ico.ico-strip4 { background:
    linear-gradient(#1c2433,#1c2433) 28px 18px / 16px 10px no-repeat,
    linear-gradient(#1c2433,#1c2433) 38px 30px / 16px 10px no-repeat,
    linear-gradient(#1c2433,#1c2433) 48px 42px / 16px 10px no-repeat,
    linear-gradient(#1c2433,#1c2433) 58px 54px / 16px 10px no-repeat, #fff; }
body.kiosk .tile .ico.ico-strip3 { background:
    linear-gradient(#1c2433,#1c2433) 30px 22px / 28px 10px no-repeat,
    linear-gradient(#1c2433,#1c2433) 34px 38px / 28px 10px no-repeat,
    linear-gradient(#1c2433,#1c2433) 38px 54px / 28px 10px no-repeat, #fff; }
body.kiosk .tile .ico.ico-grid { background:
    linear-gradient(#1c2433,#1c2433) 26px 28px / 16px 12px no-repeat,
    linear-gradient(#1c2433,#1c2433) 48px 28px / 16px 12px no-repeat,
    linear-gradient(#1c2433,#1c2433) 26px 48px / 16px 12px no-repeat,
    linear-gradient(#1c2433,#1c2433) 48px 48px / 16px 12px no-repeat, #fff; }
body.kiosk .tile .ico.ico-single { background: linear-gradient(#1c2433,#1c2433) 30px 34px / 32px 22px no-repeat, #fff; }
body.kiosk .mini-strip { display: grid !important; grid-template-rows: repeat(4, 1fr); padding: 10px; gap: 3px; place-items: stretch; }
body.kiosk .mini-strip i { display: grid; place-items: center; border-radius: 3px; background: #49b6e8; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; }
body.kiosk .tone-black { background: #2a2e36; }
body.kiosk .tone-black i { background: #111; }
body.kiosk .tone-pink { background: #f6ddd8; }
body.kiosk .tone-pink i { background: #f08aa8; }
body.kiosk .tone-blue { background: #d7eef8; }
body.kiosk .tone-floral { background: linear-gradient(160deg, #f7c9d8, #c9e7f6 55%, #d7f3cf); }
body.kiosk .filter-picks { gap: 22px; }
body.kiosk .filter-picks label { background: transparent; border: 0; box-shadow: none; padding: 0; width: 108px; font-size: 14px; color: #3c4553; }
body.kiosk .filter-picks .person { width: 96px; height: 112px; border-radius: 18px; border: 1px solid #ece8e2; background: #f7f2ec; }
body.kiosk .filter-picks label:has(input:checked) { box-shadow: none; }
body.kiosk .filter-picks label:has(input:checked) .person { outline: 2px solid #1c2433; }
body.kiosk .filter-picks label.is-on::after, body.kiosk .filter-picks label:has(input:checked)::after { left: 8px; bottom: 22px; }
body.kiosk .kiosk-actions { display: flex; justify-content: center; align-items: center; gap: 28px; }
body.kiosk .kiosk-actions .btn:not(.btn-dark) { background: #fff; border: 1px solid #ece8e2; box-shadow: 0 8px 18px rgba(40,32,20,.06); min-width: 112px; }
body.kiosk .camera-screen { padding: 22px 22px 8px; align-items: stretch; }
body.kiosk .viewfinder { border-radius: 28px; min-height: 72vh; background: #e4ddd6; }
body.kiosk .viewfinder .corners, body.kiosk .shoot-live .corners {
    border: 0; background:
        linear-gradient(#fff,#fff) left 18px top 18px / 34px 3px no-repeat,
        linear-gradient(#fff,#fff) left 18px top 18px / 3px 34px no-repeat,
        linear-gradient(#fff,#fff) right 18px top 18px / 34px 3px no-repeat,
        linear-gradient(#fff,#fff) right 18px top 18px / 3px 34px no-repeat,
        linear-gradient(#fff,#fff) left 18px bottom 18px / 34px 3px no-repeat,
        linear-gradient(#fff,#fff) left 18px bottom 18px / 3px 34px no-repeat,
        linear-gradient(#fff,#fff) right 18px bottom 18px / 34px 3px no-repeat,
        linear-gradient(#fff,#fff) right 18px bottom 18px / 3px 34px no-repeat;
}
body.kiosk .shoot-live .corners::before, body.kiosk .shoot-live .corners::after { display: none; }
body.kiosk .camera-screen aside { padding: 28px 18px 12px 8px; display: flex; flex-direction: column; }
body.kiosk .camera-screen h1 { font-size: 42px; margin: 10px 0 8px; }
body.kiosk .live-pill { align-self: flex-start; margin: 16px 0; box-shadow: 0 6px 16px rgba(40,32,20,.05); }
body.kiosk .camera-screen .btn.xl { margin-top: auto; }
body.kiosk .count-bubble { width: 132px; height: 132px; background: rgba(255,255,255,.78); }
body.kiosk .lens-pill { background: rgba(92, 99, 112, .78); font-weight: 650; }
body.kiosk .shot-thumbs figure { margin: 0; }
body.kiosk .shot-thumbs img { width: 64px; height: 64px; border-radius: 10px; border: 2px solid #fff; }
body.kiosk .shot-thumbs figcaption { color: #fff; font-size: 11px; text-align: center; margin-top: 4px; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
body.kiosk .review-screen h1, body.kiosk .deliver-screen h1, body.kiosk .qr-screen h1, body.kiosk .share-screen h1 { font-size: 44px; line-height: .95; margin: 0 0 10px; }
body.kiosk .strip-card { background: rgba(255,255,255,.45); border-radius: 36px; }
body.kiosk .route { grid-template-columns: auto 1fr auto; align-items: center; border-radius: 22px; padding: 16px 18px; }
body.kiosk .route b { grid-column: 2; }
body.kiosk .route span { grid-column: 2; }
body.kiosk .route em { grid-column: 3; grid-row: 1 / span 2; font-weight: 800; }
body.kiosk .route-ico { width: 36px; height: 36px; border-radius: 50%; background: #f4f1ec; display: grid; place-items: center; font-style: normal; }
body.kiosk .phone, body.kiosk .phone-pack { justify-self: center; }
body.kiosk .phone-body { width: 260px; border-radius: 36px; padding: 22px 14px 16px; box-shadow: 0 24px 50px rgba(20,16,12,.18); }
body.kiosk .pay-card { border-radius: 28px; box-shadow: 0 24px 60px rgba(40,32,20,.08); }
body.kiosk .pay-card h1 { font-size: 72px; }
body.kiosk .print-pill::before, body.kiosk .wait-pill::before, body.kiosk .looking::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1c2433; }
body.kiosk .qr-screen {
    width: min(1120px, calc(100% - 56px));
    margin: 18px auto 0;
    padding: 8px 0 0;
    grid-template-columns: 1fr .92fr;
    gap: 48px;
    align-items: center;
}
body.kiosk .qr-card {
    border-radius: 32px;
    min-height: 560px;
    padding: 36px 32px 28px;
    box-shadow: 0 18px 50px rgba(40, 32, 20, .05);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.kiosk .qr-card > small { letter-spacing: .2em; font-size: 11px; color: #8d8680; line-height: 1.5; }
body.kiosk .qr-frame {
    width: 300px;
    height: 300px;
    margin: 22px auto 18px;
    background: none;
    position: relative;
    display: grid;
    place-items: center;
}
body.kiosk .qr-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(#1a3a4a, #1a3a4a) left 0 top 0 / 26px 3px no-repeat,
        linear-gradient(#1a3a4a, #1a3a4a) left 0 top 0 / 3px 26px no-repeat,
        linear-gradient(#1a3a4a, #1a3a4a) right 0 top 0 / 26px 3px no-repeat,
        linear-gradient(#1a3a4a, #1a3a4a) right 0 top 0 / 3px 26px no-repeat,
        linear-gradient(#1a3a4a, #1a3a4a) left 0 bottom 0 / 26px 3px no-repeat,
        linear-gradient(#1a3a4a, #1a3a4a) left 0 bottom 0 / 3px 26px no-repeat,
        linear-gradient(#1a3a4a, #1a3a4a) right 0 bottom 0 / 26px 3px no-repeat,
        linear-gradient(#1a3a4a, #1a3a4a) right 0 bottom 0 / 3px 26px no-repeat;
}
body.kiosk .qr-mark {
    width: 210px;
    height: 210px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 14px 36px rgba(20, 16, 12, .08);
    display: grid;
    place-items: center;
    position: relative;
}
body.kiosk .qr-mark svg { width: 200px; height: 200px; display: block; stroke: none; stroke-width: 0; }
body.kiosk .qr-mark svg rect { fill: #fff; stroke: none; }
body.kiosk .qr-mark svg path { fill: #111; stroke: none; }
body.kiosk .qr-link { display: block; margin-top: 10px; color: #5c6778; font-size: 12px; word-break: break-all; }
body.kiosk .qr-card b { font-size: 16px; }
body.kiosk .qr-card span { display: block; margin-top: 6px; color: #98a0aa; font-size: 13px; }
body.kiosk .qr-copy { max-width: 440px; display: flex; flex-direction: column; align-items: stretch; }
body.kiosk .qr-copy .paid {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 0;
    color: #1c9a57;
    font-size: 15px;
    font-weight: 650;
}
body.kiosk .qr-copy .paid i {
    width: 22px; height: 22px; border-radius: 50%; background: #e5f6ec; color: #1c9a57;
    display: grid; place-items: center; font-style: normal; font-size: 12px;
}
body.kiosk .qr-copy .paid i::before { content: "✓"; }
body.kiosk .qr-copy .ref { display: block; margin: 10px 0 14px; color: #98a0aa; letter-spacing: .12em; font-size: 12px; font-weight: 700; }
body.kiosk .qr-copy .looking {
    align-self: flex-start;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ece8e2;
    padding: 8px 14px;
    margin: 0 0 16px;
    font-weight: 650;
}
body.kiosk .qr-copy h1 { font-size: 56px; margin: 0 0 12px; }
body.kiosk .qr-copy > p { margin: 0 0 16px; color: #8d97a8; font-size: 16px; line-height: 1.45; }
body.kiosk .qr-copy .keep-note {
    background: rgba(255,255,255,.62);
    border-radius: 16px;
    color: #8d97a8;
    text-align: center;
    padding: 16px 18px;
    margin: 0 0 14px;
}
body.kiosk .qr-copy .btn { width: 100%; min-height: 56px; margin-top: 10px; border-radius: 999px; }
body.kiosk .qr-copy .btn-line { background: #fff; border: 1px solid #ece8e2; }
body.kiosk .email-screen {
    width: min(1080px, calc(100% - 72px));
    max-width: none;
    margin: 36px auto 0;
    padding: 8px 0 0;
}
body.kiosk .email-screen .paid {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #1c9a57;
    font-size: 15px;
    font-weight: 650;
}
body.kiosk .email-screen .paid i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e5f6ec;
    color: #1c9a57;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}
body.kiosk .email-screen .paid i::before { content: "✓"; }
body.kiosk .email-screen h1 {
    text-align: left;
    font-size: 42px;
    margin: 14px 0 8px;
    color: #1a2030;
}
body.kiosk .email-screen > p {
    text-align: left;
    margin: 0 0 18px;
    color: #8d97a8;
    font-size: 16px;
}
body.kiosk .email-screen form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    margin: 0;
}
body.kiosk .email-screen input {
    height: 76px;
    border-radius: 18px;
    border: 1.5px solid #d5dbe3;
    background: #fff;
    padding: 0 22px;
    font-size: 22px;
    font-weight: 550;
}
body.kiosk .email-screen input::placeholder { color: #1c2433; font-weight: 550; }
body.kiosk .email-screen .btn-dark {
    height: 76px;
    min-width: 168px;
    padding: 0 40px;
    border-radius: 999px;
    font-size: 18px;
}
body.kiosk .email-screen .back {
    display: block;
    text-align: left;
    margin: 12px 0 22px;
    color: #98a2b0;
    font-size: 14px;
}
body.kiosk .email-screen .keypad { width: 100%; gap: 10px; margin-top: 0; }
body.kiosk .email-screen .keypad div { display: flex; justify-content: center; gap: 10px; }
body.kiosk .email-screen .keypad button {
    width: calc((100% - 90px) / 10);
    min-width: 0;
    flex: none;
    height: 68px;
    border-radius: 16px;
    border: 1px solid #eef1f5;
    background: #fff;
    box-shadow: 0 1px 0 #e6e9ee;
    color: #1c2433;
    font-size: 22px;
    font-weight: 550;
}
body.kiosk .email-screen .keypad .space { width: auto; flex: 1; }
body.kiosk .email-screen .keypad .go {
    background: #17191f;
    color: #fff;
    border: 0;
    box-shadow: none;
}
body.kiosk.is-legal { background: #2c3038; }
body.kiosk .legal-card { border-radius: 28px; }
body.kiosk .legal-card .btn { border-radius: 999px; min-width: 160px; }
body.kiosk > main.attract {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 10vw 2vh;
}
body.kiosk .attract h1 { font-size: clamp(64px, 6.8vw, 96px); line-height: .92; color: #1b2440; font-weight: 800; margin: 0; }
body.kiosk .attract p { color: #8d97a8; font-size: 22px; font-weight: 500; margin: 18px 0 0; }
body.kiosk .start {
    margin-top: 28px;
    min-height: 58px;
    padding: 0 22px;
    font-size: 17px;
    font-weight: 750;
    background: #fff;
    color: #1a2030;
    border-radius: 999px;
    box-shadow: 0 12px 28px rgba(40, 32, 20, .12);
}
body.kiosk .start svg { width: 18px; height: 18px; }
body.kiosk .kiosk-card { width: min(1180px, calc(100% - 72px)); border-radius: 32px; min-height: 640px; }
body.kiosk .layout-screen h1, body.kiosk .filter-screen h1 { font-size: 40px; margin: 0 0 18px; }
body.kiosk .filter-screen { display: flex; flex-direction: column; min-height: 560px; }
body.kiosk .filter-screen form { display: flex; flex-direction: column; flex: 1; }
body.kiosk .filter-screen .kiosk-actions { margin-top: auto; }
body.kiosk .tile .ico { background: #fff; }
body.kiosk .tile .ico svg { width: 54px; height: 54px; display: block; }
body.kiosk .tile .mini-strip {
    width: 92px; height: 92px; padding: 12px 28px; place-items: stretch;
    display: grid; grid-template-rows: repeat(4, 1fr); gap: 3px;
}
body.kiosk .tile .mini-strip i {
    display: grid; place-items: center; width: 100%; min-height: 0;
    border-radius: 3px; background: #3db7e8; color: #fff;
    font-style: normal; font-size: 9px; font-weight: 800;
}
body.kiosk .tile .mini-strip.tone-white { background: #fff; }
body.kiosk .tile .mini-strip.tone-black { background: #3c4250; }
body.kiosk .tile .mini-strip.tone-pink { background: #e7cfc8; }
body.kiosk .tile .mini-strip.tone-blue { background: #c9e6f4; }
body.kiosk .tile .mini-strip.tone-floral {
    background:
        radial-gradient(circle at 30% 30%, #fff 0 8%, transparent 9%),
        linear-gradient(160deg, #f7c9d8, #b7dff3 55%, #d7f3cf);
}
body.kiosk .tile .mini-strip.tone-black i,
body.kiosk .tile .mini-strip.tone-pink i,
body.kiosk .tile .mini-strip.tone-blue i,
body.kiosk .tile .mini-strip.tone-floral i { background: #3db7e8; color: #fff; }
body.kiosk .border-row { flex-wrap: nowrap; overflow: auto; padding-bottom: 4px; }
body.kiosk .live-preview { background: rgba(255,255,255,.55); border-radius: 28px; padding: 22px 18px 16px; }
body.kiosk .preview-sheet {
    background: #fff; border-radius: 8px; padding: 10px; display: grid; gap: 8px;
    box-shadow: 0 8px 24px rgba(40,32,20,.05);
}
body.kiosk .preview-sheet.is-grid { grid-template-columns: 1fr 1fr; }
body.kiosk .preview-sheet.is-grid .sheet-logo { grid-column: 1 / -1; }
body.kiosk .preview-sheet .frame {
    background: #fff; border: 1px solid #ece8e2; border-radius: 6px; min-height: 72px;
    display: grid; place-items: center; text-align: center; letter-spacing: .16em; font-size: 11px; color: #b0aaa4;
}
body.kiosk .preview-sheet .frame small { display: block; letter-spacing: .22em; font-size: 7px; }
body.kiosk .sheet-logo { font-style: normal; text-align: center; letter-spacing: .18em; font-size: 11px; color: #8d8680; padding: 6px 0 2px; }
body.kiosk .sheet-logo small { display: block; letter-spacing: .14em; font-size: 7px; }
body.kiosk .preview-cap { text-align: center; color: #6d7786; font-size: 13px; margin: 12px 0 0; }
body.kiosk .live-preview.border-black .frame { background: #17191f; color: #fff; border-color: #17191f; }
body.kiosk .live-preview.border-pink .frame { background: #f8d5df; border-color: #f8d5df; }
body.kiosk .live-preview.border-blue .frame { background: #d7ecf8; border-color: #d7ecf8; }
body.kiosk .live-preview.border-floral .frame { background: linear-gradient(160deg, #f7c6d8, #d9ecfb); border-color: transparent; }
body.kiosk .kiosk-card { min-height: 0; }

.config-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 14px; color: #8b919c; font-size: 13px; flex-wrap: wrap; }
.config-picks { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cfg { border: 1px solid #eceff3; background: #fff; border-radius: 999px; padding: 8px 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.cfg.is-on { box-shadow: inset 0 0 0 1px #17191f; }
.cfg .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.quiet-cfg { color: #98a0aa; }
.brand-tabs { display: flex; gap: 18px; margin: 16px 0; border-bottom: 1px solid var(--line); }
.brand-tabs button { border: 0; background: transparent; padding: 8px 0 10px; font-weight: 700; color: #98a0aa; }
.brand-tabs button.is-on { color: var(--ink); box-shadow: inset 0 -2px 0 #17191f; }
.welcome-split { align-items: stretch; }
.stage-art { position: relative; border-radius: 18px; overflow: hidden; min-height: 280px; background: #fff5f7; }
.stage-art img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 280px; }
.stage-copy { position: absolute; left: 22px; top: 28px; right: 22px; color: #fff; text-shadow: 0 8px 18px rgba(120,40,60,.25); }
.stage-copy strong, .stage-copy small { display: block; }
.stage-copy strong { font-size: 28px; letter-spacing: -.03em; }
.stage-copy em { display: inline-block; margin-top: 14px; color: #4a2430; text-shadow: none; font-style: normal; border-radius: 999px; padding: 8px 14px; font-weight: 750; }
.spec-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.live-tag { color: #1c9a57; font-size: 12px; font-weight: 700; }
.upload-row { display: flex; gap: 12px; align-items: center; margin: 12px 0; }
.upload-row .thumb { width: 72px; height: 48px; border-radius: 10px; background: #f6e4ea center/cover no-repeat; background-image: url("../img/welcome-art.png"); }
.upload input { border: 0; background: transparent; padding: 0; font-weight: 700; width: 100%; }
.upload b { display: none; }
input[type="range"] { accent-color: #17191f; width: 100%; }
.upload-row small, .stage-brand { display: block; color: var(--muted); }
.style-preview { text-align: center; min-height: 240px; }
.style-actions { display: flex; justify-content: center; gap: 16px; align-items: center; margin-top: 18px; }
.filter-row { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.tab-panel[hidden] { display: none; }
.savebar .save-note { color: #c4841d; }
.savebar .save-note.is-saved { color: #1c9a57; }

body.kiosk main.review-screen:not(.plain-print) {
    width: min(1180px, calc(100% - 72px));
    margin: 0 auto;
    min-height: calc(100vh - 108px);
    padding: 18px 0 0;
    grid-template-columns: 380px minmax(460px, 540px);
    justify-content: space-between;
    align-items: center;
    gap: 48px;
}
body.kiosk main.review-screen:not(.plain-print) .strip-card {
    background: rgba(255,255,255,.42);
    border-radius: 36px;
    min-height: 640px;
    height: min(720px, calc(100vh - 150px));
    padding: 28px 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.kiosk main.review-screen:not(.plain-print) .strip-card > small {
    letter-spacing: .34em;
    font-size: 12px;
    font-weight: 500;
    color: #b9b4ae;
}
body.kiosk main.review-screen:not(.plain-print) .strip-sheet {
    width: 188px;
    margin: 22px auto 0;
    padding: 8px 8px 6px;
    border-radius: 2px;
    gap: 6px;
    box-shadow: 0 8px 22px rgba(40,32,20,.05);
}
body.kiosk main.review-screen:not(.plain-print) .strip-sheet img {
    height: 118px;
    border-radius: 1px;
    object-fit: cover;
    background: #ddd4cc;
}
body.kiosk main.review-screen:not(.plain-print) .strip-sheet em {
    font-family: Inter, sans-serif;
    font-style: normal;
    font-weight: 750;
    letter-spacing: .18em;
    font-size: 11px;
    color: #1a2030;
    padding: 10px 0 4px;
}
body.kiosk main.review-screen:not(.plain-print) .strip-sheet em small {
    display: block;
    margin-top: 3px;
    letter-spacing: .08em;
    font-size: 8px;
    font-weight: 650;
    color: #8d97a8;
}
body.kiosk .review-copy { max-width: 540px; }
body.kiosk .review-copy h1 { font-size: 52px; line-height: 1.02; margin: 0 0 12px; }
body.kiosk .review-copy > p { margin: 0 0 28px; color: #8d97a8; font-size: 18px; }
body.kiosk .review-copy .kicker { margin: 0 0 12px; letter-spacing: .16em; font-size: 12px; font-weight: 700; color: #8d97a8; }
body.kiosk .review-copy .copies {
    max-width: none;
    width: 100%;
    height: 78px;
    padding: 10px 12px;
    border: 1px solid #ece7e1;
    background: #fff;
    box-shadow: 0 10px 28px rgba(40,32,20,.04);
}
body.kiosk .review-copy .copies button {
    width: 54px;
    height: 54px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(40,32,20,.08);
    color: #1a2030;
    font-size: 28px;
    line-height: 1;
}
body.kiosk .review-copy .copies b { font-size: 22px; letter-spacing: -.02em; }
body.kiosk .review-copy .copies small { color: #8d97a8; font-size: 13px; font-weight: 500; margin-top: 2px; }
body.kiosk .review-copy .review-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 22px;
    flex-wrap: nowrap;
}
body.kiosk .review-copy .review-actions .btn {
    min-width: 0;
    min-height: 68px;
    flex-direction: column;
    gap: 2px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 750;
}
body.kiosk .review-copy .review-actions .btn-dark { background: #17191f; }
body.kiosk .review-copy .review-actions .btn-line { background: #fff; border: 1px solid #e7e2dc; box-shadow: 0 8px 20px rgba(40,32,20,.04); }
body.kiosk .review-copy .review-actions small { font-size: 12px; font-weight: 500; color: #9aa3b0; }
body.kiosk .review-copy .back {
    display: block;
    text-align: center;
    margin: 22px 0 0;
    color: #8d97a8;
    font-size: 16px;
}

body.kiosk.is-camera {
    background: #f4f1ec;
    height: 100vh;
    overflow: hidden;
}
body.kiosk.is-camera .kiosk-foot { display: none; }
body.kiosk.is-camera .camera-screen {
    height: 100vh;
    padding: 20px 40px 18px 20px;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
    align-items: stretch;
}
body.kiosk.is-camera .viewfinder {
    min-height: 0;
    height: auto;
    border-radius: 26px;
    background: #d5d0cb;
    position: relative;
}
body.kiosk.is-camera .viewfinder img,
body.kiosk.is-camera .viewfinder video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
body.kiosk.is-camera .viewfinder video { opacity: 0; }
body.kiosk.is-camera .viewfinder video.is-on { opacity: 1; }
body.kiosk.is-camera .viewfinder.is-bw img,
body.kiosk.is-camera .viewfinder.is-bw video.is-on { filter: grayscale(1); }
body.kiosk.is-camera .viewfinder .corners { pointer-events: none; }
body.kiosk.is-camera .camera-screen aside {
    padding: 22px 4px 0 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.kiosk.is-camera .camera-screen .brand { padding: 6px 0 0; }
body.kiosk.is-camera .camera-screen .brand-mark {
    font-size: 16px;
    letter-spacing: .28em;
    color: #9a9188;
    font-weight: 600;
}
body.kiosk.is-camera .camera-screen .brand-sub {
    display: block;
    letter-spacing: .46em;
    font-size: 8px;
    color: #b7b0a8;
    margin-top: 3px;
}
body.kiosk.is-camera .camera-screen h1 {
    font-size: 46px;
    line-height: 1.05;
    margin: 26px 0 12px;
}
body.kiosk.is-camera .camera-screen aside > p {
    margin: 0;
    max-width: 320px;
    color: #4e5968;
    font-size: 16px;
    line-height: 1.45;
}
body.kiosk.is-camera .live-pill {
    align-self: flex-start;
    margin: 26px 0 6px;
    padding: 9px 16px 9px 14px;
    letter-spacing: .14em;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    color: #1a2030;
    background: #fff;
    border: 1px solid #f3efe9;
    box-shadow: 0 8px 18px rgba(40,32,20,.06);
}
body.kiosk.is-camera .live-pill::before {
    width: 8px;
    height: 8px;
    margin-right: 8px;
    background: #e10600;
}
body.kiosk.is-camera .camera-screen ul {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
}
body.kiosk.is-camera .camera-screen li {
    position: relative;
    padding-left: 18px;
    margin: 18px 0;
}
body.kiosk.is-camera .camera-screen li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #1a2030;
}
body.kiosk.is-camera .camera-screen li b {
    display: block;
    color: #1a2030;
    font-size: 15px;
    font-weight: 750;
}
body.kiosk.is-camera .camera-screen li span {
    display: block;
    margin-top: 2px;
    color: #8d97a8;
    font-size: 14px;
    font-weight: 500;
}
body.kiosk.is-camera .camera-screen .btn.xl {
    margin-top: auto;
    width: 100%;
    min-height: 58px;
    border-radius: 999px;
    background: #17191f;
    font-size: 17px;
}
body.kiosk.is-camera .camera-screen .back {
    margin: 16px 0 0;
    text-align: center;
    color: #3c4553;
    font-size: 15px;
}
body.kiosk.is-camera .cam-legal {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
    color: #b0a89f;
    font-size: 13px;
}
body.kiosk.is-camera .cam-legal a { color: #b0a89f; }

body.kiosk .done-copy { max-width: 520px; }
body.kiosk .done-copy h1 { font-size: 48px; line-height: 1.05; margin: 0 0 22px; }
body.kiosk .done-screen .done-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    background: #fff;
    border-radius: 18px;
    padding: 16px 18px;
    margin: 12px 0 0;
    box-shadow: 0 10px 28px rgba(40, 32, 20, .04);
}
body.kiosk .done-row .ok {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e5f6ec;
    color: #1c9a57;
    display: grid;
    place-items: center;
    font-style: normal;
}
body.kiosk .done-row .ok::before { content: "✓"; font-size: 14px; font-weight: 800; }
body.kiosk .done-row b { grid-column: 2; font-size: 16px; }
body.kiosk .done-row span { grid-column: 2; color: #8d97a8; font-size: 14px; }
body.kiosk .done-row em {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-style: normal;
    color: #98a0aa;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .04em;
}
body.kiosk .done-screen .reset-note {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 14px;
    align-items: center;
    background: #fff;
    border-radius: 18px;
    padding: 16px 16px 14px;
    margin-top: 12px;
    box-shadow: 0 10px 28px rgba(40, 32, 20, .04);
}
body.kiosk .done-screen .reset-note p { margin: 0; color: #5c6778; font-size: 15px; line-height: 1.45; }
body.kiosk .done-screen .reset-note b {
    border: 1px solid #e4e0da;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 750;
    background: #fff;
    white-space: nowrap;
}
body.kiosk .done-screen .reset-note i {
    grid-column: 1 / -1;
    height: 3px;
    margin: 2px 0 0;
    background: #17191f;
    border-radius: 99px;
}

body.kiosk .deliver-screen {
    width: min(1120px, calc(100% - 72px));
    margin: 8px auto 0;
    min-height: calc(100vh - 96px);
    padding: 8px 0 0;
    grid-template-columns: 360px minmax(440px, 520px);
    justify-content: space-between;
    align-items: center;
    gap: 36px;
}
body.kiosk .phone-pack { text-align: center; }
body.kiosk .phone-pack > small {
    display: block;
    letter-spacing: .18em;
    color: #b0aaa4;
    font-size: 11px;
    font-weight: 650;
    margin-bottom: 12px;
}
body.kiosk .handset {
    width: 292px;
    margin: 0 auto;
    background: #1b1e26;
    border-radius: 38px;
    padding: 10px;
    box-shadow: 0 22px 48px rgba(20, 16, 12, .16);
}
body.kiosk .deliver-screen .phone-body.light {
    width: 100%;
    border-radius: 30px;
    padding: 8px 12px 12px;
    background: #fff;
    color: #1a2030;
    text-align: left;
    box-shadow: none;
}
body.kiosk .phone-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 750;
    padding: 4px 4px 8px;
}
body.kiosk .phone-status i {
    width: 18px;
    height: 9px;
    border: 1.5px solid #1a2030;
    border-radius: 2px;
    display: block;
}
body.kiosk .deliver-screen .phone-body b { display: block; font-size: 15px; }
body.kiosk .phone-sub { display: block; color: #98a0aa; font-size: 11px; margin: 2px 0 8px; }
body.kiosk .deliver-screen .phone-grid { gap: 6px; }
body.kiosk .deliver-screen .phone-grid img { height: 78px; border-radius: 6px; object-fit: cover; }
body.kiosk .deliver-screen .gif-row {
    height: 86px;
    margin-top: 6px;
    border-radius: 8px;
    background-color: #111;
    background-size: cover;
    background-position: center 20%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8px 10px;
    text-align: left;
}
body.kiosk .deliver-screen .gif-row b { font-size: 13px; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
body.kiosk .deliver-screen .gif-row small { color: rgba(255,255,255,.86); font-size: 11px; letter-spacing: 0; }
body.kiosk .deliver-screen .waiting-choice {
    margin-top: 8px;
    background: #f3f5f7;
    border-radius: 14px;
    text-align: center;
    padding: 10px 12px 12px;
}
body.kiosk .deliver-screen .waiting-choice i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1a2030;
    margin-right: 6px;
}
body.kiosk .deliver-screen .waiting-choice b { display: inline; font-size: 13px; }
body.kiosk .deliver-screen .waiting-choice small { display: block; color: #98a0aa; font-size: 11px; margin-top: 2px; letter-spacing: 0; }
body.kiosk .home-bar { width: 96px; height: 4px; border-radius: 99px; background: #e4e7ec; margin: 12px auto 2px; }
body.kiosk .deliver-screen .print-progress { width: 320px; margin: 16px auto 0; text-align: left; }
body.kiosk .print-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
body.kiosk .print-meta b { font-weight: 750; color: #1a2030; }
body.kiosk .print-meta em { font-style: normal; color: #8d97a8; font-size: 14px; }
body.kiosk .deliver-screen .print-progress i {
    display: block;
    height: 5px;
    margin: 7px 0 6px;
    background: #e4eef8;
    border-radius: 99px;
    overflow: hidden;
}
body.kiosk .deliver-screen .print-progress i span { display: block; height: 100%; width: 72%; background: #17191f; border-radius: 99px; transition: width 1s linear; }
body.kiosk .deliver-screen .print-progress small { display: block; color: #9aa3b0; font-size: 13px; white-space: nowrap; }
body.kiosk .deliver-copy h1 { font-size: 52px; line-height: 1.02; margin: 0 0 14px; }
body.kiosk .deliver-copy > p { margin: 0 0 18px; color: #5c6778; font-size: 16px; line-height: 1.45; max-width: 460px; }
body.kiosk .deliver-screen .route {
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 2px 14px;
    background: #fff;
    border: 0;
    border-radius: 22px;
    padding: 16px 18px;
    margin-top: 12px;
    box-shadow: 0 10px 28px rgba(40, 32, 20, .05);
    color: inherit;
    text-decoration: none;
}
body.kiosk .deliver-screen .route-ico {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f3f1ee;
}
body.kiosk .deliver-screen .route-ico svg { width: 18px; height: 18px; stroke: #1a2030; fill: none; stroke-width: 1.8; }
body.kiosk .deliver-screen .route-ico svg circle,
body.kiosk .deliver-screen .route-ico svg rect { fill: #1a2030; stroke: none; }
body.kiosk .deliver-screen .route b { font-size: 16px; }
body.kiosk .deliver-screen .route span { color: #8d97a8; font-size: 13px; line-height: 1.35; }
body.kiosk .deliver-screen .route em { font-weight: 750; font-size: 15px; color: #1a2030; white-space: nowrap; }
body.kiosk .deliver-screen .route u { text-underline-offset: 3px; }
body.kiosk .deliver-screen .route-links { margin-top: 18px; color: #8d97a8; font-size: 15px; }
body.kiosk .deliver-screen .route-links a { color: #6d7786; }

.drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    padding: 14px 16px;
    border: 1px dashed #d5dae3;
    border-radius: 16px;
    background: #fbfcfd;
    cursor: pointer;
}
.drop:hover { border-color: #17191f; }
.drop input[type="file"],
.upload-row input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.drop-mark {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 12px;
    border: 1px solid #eceff3;
    background: #fff;
    object-fit: contain;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #8b919c;
}
.drop-copy b, .drop-copy small, .upload-row b, .upload-row small { display: block; }
.drop-copy b, .upload-row b { color: #17191f; font-size: 14px; }
.drop-copy small, .upload-row small { margin-top: 2px; font-weight: 550; }
.swatches .swatch-pick {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    gap: 8px;
}
.swatch-pick input[type="color"] {
    width: 64px;
    height: 64px;
    padding: 0;
    border: 1px solid #eceff3;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
}
.swatch-pick input[type="color"]::-webkit-color-swatch-wrapper { padding: 4px; }
.swatch-pick input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 12px; }
.swatch-pick small { color: #8b919c; font-weight: 650; }
.hex {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    color: #98a0aa;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .14em;
}
.hex-box {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    min-width: 168px;
    padding: 0 14px 0 10px;
    border: 1px solid #e4e7ee;
    border-radius: 14px;
    background: #fff;
    letter-spacing: 0;
}
.hex-box i {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: block;
    box-shadow: inset 0 0 0 1px rgba(23, 25, 31, .08);
}
body:not(.kiosk) .hex-box input {
    width: 92px;
    height: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    font-family: ui-monospace, Consolas, monospace;
    font-weight: 700;
    letter-spacing: .02em;
}
.hex-box:focus-within {
    border-color: #17191f;
    box-shadow: 0 0 0 4px rgba(23, 25, 31, .06);
}
.upload-row {
    position: relative;
    cursor: pointer;
    border: 1px dashed #d5dae3;
    border-radius: 16px;
    padding: 12px;
    background: #fbfcfd;
}
body:not(.kiosk) .toggle {
    background: #f7f8fa;
    border-radius: 14px;
    padding: 12px 14px;
}
body:not(.kiosk) .toggle input[type="checkbox"] {
    appearance: none;
    width: 44px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d7dbe2;
    position: relative;
    cursor: pointer;
    flex: none;
}
body:not(.kiosk) .toggle input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}
body:not(.kiosk) .toggle input[type="checkbox"]:checked { background: #17191f; }
body:not(.kiosk) .toggle input[type="checkbox"]:checked::after { transform: translateX(18px); }
.form-card .check:has(input:checked),
.check:has(input:checked) {
    background: #17191f;
    color: #fff;
    border-color: #17191f;
}
.settings-layout .card.stack { max-width: 640px; }
.form-grid > label, .field-pair > label { display: grid; gap: 8px; }
.form-actions { margin-top: 18px; }
.stack > label { font-weight: 700; }

.settings-layout > div { display: grid; gap: 16px; align-content: start; }
.settings-layout .steps { margin: 0; gap: 8px 20px; }
.subnav { gap: 6px; }
.subnav a { padding: 9px 14px; }
.brand-form { display: grid; gap: 16px; }
.brand-form .config-bar { margin: 0; }
.brand-form .card > h2,
.card > h2 { margin: 0 0 6px; }
.brand-form .lede,
.card > .lede { margin: 0 0 16px; line-height: 1.45; }
.card > p { margin: 0 0 12px; color: #66707c; line-height: 1.45; }
.card > form + h2 { margin-top: 8px; }
.identity { gap: 28px; margin-top: 18px; align-items: start; }
.welcome-split .spec,
.split > .spec {
    background: #f7f8fa;
    border-radius: 18px;
    padding: 18px 18px 16px;
}
.brand-tabs { margin: 22px 0 10px; padding-top: 4px; }
.tab-panel { padding-top: 8px; }
.choice-grid, .mode-row { gap: 10px; margin-top: 14px; }
.choice, .mode { position: relative; min-height: 46px; padding: 12px 18px; }
.choice input, .mode input { inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.overlay-row { margin-top: 16px; align-items: center; }
.savebar {
    margin: 0;
    padding: 14px 16px;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow);
}
.form-card { display: grid; gap: 18px; }
.form-card h3 { margin: 4px 0 0; }
.form-card .form-grid,
.form-grid { gap: 16px 18px; }
.check-grid { margin-top: 4px; gap: 10px; }
.check { padding: 10px 14px; display: inline-flex; align-items: center; gap: 8px; }
.cfg-pop { position: relative; }
.cfg-pop summary { list-style: none; cursor: pointer; }
.cfg-pop summary::-webkit-details-marker { display: none; }
.cfg-list {
    position: absolute;
    right: 0;
    top: 46px;
    z-index: 4;
    width: 320px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(23, 25, 31, .12);
    padding: 8px;
}
.cfg-list p { margin: 0; padding: 10px 12px; border-radius: 10px; color: #3c414b; font-size: 13px; font-weight: 650; letter-spacing: 0; }
.cfg-list p:hover { background: #f6f7f9; }
.strip-desk { display: flex; justify-content: center; padding: 8px 0 18px; }
.strip-desk-sheet {
    width: 168px;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    display: grid;
    gap: 6px;
    box-shadow: 0 10px 28px rgba(23, 25, 31, .06);
}
.strip-desk-sheet i { display: block; height: 48px; border-radius: 4px; background: #f3efe9; }
.strip-desk-sheet em { font-style: normal; text-align: center; letter-spacing: .16em; font-size: 11px; color: #8d8680; }
.strip-desk-sheet[data-layout="grid"] { grid-template-columns: 1fr 1fr; }
.strip-desk-sheet[data-layout="grid"] em { grid-column: 1 / -1; }
.strip-desk-sheet[data-layout="strip3"] i:nth-child(4),
.strip-desk-sheet[data-layout="single"] i:nth-child(n+2) { display: none; }
.strip-desk-sheet[data-border="Black"] i { background: #17191f; }
.strip-desk-sheet[data-border="Pink"] i { background: #f8d5df; }
.strip-desk-sheet[data-border="Blue"] i { background: #d7ecf8; }
.strip-desk-sheet[data-border="Floral"] i { background: linear-gradient(160deg, #f7c6d8, #d9ecfb); }
.card.stack > form.stack { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
    .btn,
    .btn-white,
    .btn-oauth,
    .start,
    .nav-link,
    .subnav a,
    .status-tabs a,
    .seg-switch a,
    .booth-filters a,
    .tabs a,
    .cfg,
    .choice,
    .mode,
    .check,
    .stat,
    .bell summary,
    .userchip summary,
    .icon-btn,
    .swatch-pick input[type="color"],
    body.kiosk .tile .ico,
    body.kiosk .tile .mini-strip,
    body.kiosk .route,
    body.kiosk .copies button,
    body.kiosk .filter-picks label,
    table.grid tbody tr {
        transition: transform .18s cubic-bezier(.2, .7, .2, 1), background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .btn:hover,
    .btn-white:hover,
    .btn-oauth:hover,
    .start:hover,
    body.kiosk .route:hover {
        transform: translateY(-2px);
    }
    .btn:active,
    .btn-white:active,
    .btn-oauth:active,
    .start:active,
    body.kiosk .copies button:active {
        transform: translateY(0) scale(.98);
    }
    .btn-dark:hover,
    body.kiosk .btn-dark:hover { background: #2a2f38; }
    .btn-line:hover,
    .btn-ghost:hover,
    body.kiosk .btn-line:hover { background: #fafbfc; border-color: #d9dee6; }
    .btn-pink:hover,
    body.kiosk .btn-pink:hover { background: #f7c4d0; }
    .nav-link:hover { background: #f7f4ef; }
    .subnav a:hover,
    .status-tabs a:hover,
    .tabs a:hover,
    .booth-filters a:hover,
    .seg-switch a:hover { background: #f4f1ea; color: #17191f; }
    .status-tabs a.is-on:hover,
    .subnav a.is-on:hover,
    .booth-filters a.is-on:hover,
    .seg-switch a.is-on:hover { background: #2a2f38; color: #fff; }
    .stat:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(23, 25, 31, .08); }
    table.grid tbody tr:hover { background: #fafbfc; }
    .cfg:hover,
    .choice:hover,
    .mode:hover,
    .check:hover { background: #fafbfc; border-color: #d7dce3; }
    .choice:has(input:checked):hover,
    .mode.is-on:hover { background: #fff; }
    .bell summary:hover,
    .userchip summary:hover,
    .icon-btn:hover { transform: translateY(-1px); }
    .swatch-pick input[type="color"]:hover { transform: translateY(-2px) scale(1.04); }
    body.kiosk .tile:hover .ico,
    body.kiosk .tile:hover .mini-strip { transform: translateY(-4px); }
    body.kiosk .copies button:hover { transform: scale(1.06); }
    body.kiosk .filter-picks label:hover { transform: translateY(-3px); }
    body.kiosk .start {
        transition: transform .18s cubic-bezier(.2, .7, .2, 1);
        animation: start-glow 2.8s ease-in-out infinite;
    }
    .drop:hover,
    .upload-row:hover { transform: translateY(-1px); }
}

@keyframes start-glow {
    0%, 100% { box-shadow: 0 10px 30px rgba(40, 32, 20, .08); }
    50% { box-shadow: 0 16px 36px rgba(40, 32, 20, .16); }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .start, .nav-link, .stat, body.kiosk .route, body.kiosk .tile .ico { transition: none; animation: none; }
}

@media (prefers-reduced-motion: no-preference) {
    body.kiosk > main,
    body:not(.kiosk) .dash-grid > .card,
    body:not(.kiosk) .page-toolbar {
        animation: screen-in .42s cubic-bezier(.2, .7, .2, 1) both;
    }
    body:not(.kiosk) .stat {
        animation: screen-in .42s cubic-bezier(.2, .7, .2, 1) backwards;
    }
    body:not(.kiosk) .stat:nth-child(2) { animation-delay: .05s; }
    body:not(.kiosk) .stat:nth-child(3) { animation-delay: .1s; }
    body:not(.kiosk) .stat:nth-child(4) { animation-delay: .15s; }
    .paper-cell i span,
    .paper-block i span,
    .rank i em,
    .bars b {
        transform-origin: left center;
        animation: bar-in .7s cubic-bezier(.2, .7, .2, 1) both;
    }
    .chart i { transform-origin: center bottom; animation: bar-up .7s cubic-bezier(.2, .7, .2, 1) both; }
    body.kiosk .live-pill::before { animation: live-pulse 1.4s ease-in-out infinite; }
    body.kiosk .count-bubble b.is-tick { animation: count-pop .42s cubic-bezier(.2, .8, .2, 1); }
    body.kiosk .shot-thumbs figure { animation: screen-in .35s cubic-bezier(.2, .7, .2, 1) both; }
    body.kiosk .keypad button { transition: transform .12s ease, background-color .12s ease; }
    body.kiosk .keypad button:hover { transform: translateY(-2px); }
    body.kiosk .keypad button:active { transform: scale(.94); }
    body.kiosk .done-screen #resetBar {
        display: block;
        transform-origin: left center;
        animation: drain 20s linear forwards;
    }
}

@keyframes screen-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes bar-in {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
@keyframes bar-up {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.7); }
}
@keyframes count-pop {
    0% { transform: scale(1.28); opacity: .35; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes drain {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

body.kiosk .share-screen {
    width: min(1120px, calc(100% - 72px));
    margin: 8px auto 0;
    min-height: calc(100vh - 96px);
    padding: 10px 0 0;
    grid-template-columns: 360px minmax(440px, 520px);
    justify-content: space-between;
    align-items: center;
    gap: 28px;
}
body.kiosk .share-screen .phone-pack > small { letter-spacing: .2em; }
body.kiosk .share-screen .phone-body.light {
    width: 100%;
    min-height: 540px;
    border-radius: 30px;
    background: #f4f5f7;
    color: #1a2030;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    padding: 8px 12px 12px;
}
body.kiosk .share-screen .phone-grid { margin-top: 4px; gap: 6px; }
body.kiosk .share-screen .phone-grid img { height: 132px; border-radius: 8px; object-fit: cover; object-position: center 22%; }
body.kiosk .share-screen .airdrop-card {
    margin-top: -28px;
    background: #fff;
    border-radius: 22px;
    padding: 14px 14px 12px;
    box-shadow: 0 16px 36px rgba(20, 24, 32, .16);
    position: relative;
    z-index: 1;
}
body.kiosk .share-screen .air-head { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; }
body.kiosk .share-screen .air-ico {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eef3fb;
    color: #2f6fed;
    display: grid;
    place-items: center;
}
body.kiosk .share-screen .air-ico svg { width: 16px; height: 16px; stroke: #2f6fed; fill: none; stroke-width: 1.8; }
body.kiosk .share-screen .air-ico svg circle { fill: #2f6fed; stroke: none; }
body.kiosk .share-screen .air-head b { display: block; font-size: 14px; }
body.kiosk .share-screen .air-head span { display: block; color: #8b93a0; font-size: 12px; }
body.kiosk .share-screen .air-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
body.kiosk .share-screen .air-thumbs img { width: 100%; height: 42px; object-fit: cover; border-radius: 6px; }
body.kiosk .share-screen .air-accept,
body.kiosk .share-screen .air-decline {
    display: grid;
    place-items: center;
    height: 42px;
    border-radius: 999px;
    font-weight: 750;
    margin-top: 8px;
}
body.kiosk .share-screen .air-accept { background: #2f6fed; color: #fff; border: 0; width: 100%; cursor: pointer; font: inherit; font-weight: 750; }
body.kiosk .share-screen .air-decline { background: #eef0f3; color: #5c6572; }
body.kiosk .share-screen .home-bar { margin-top: 12px; }
body.kiosk .share-copy { max-width: 480px; }
body.kiosk .share-copy .paid {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1c9a57;
    font-weight: 750;
    margin: 0;
}
body.kiosk .share-copy .paid i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e5f6ec;
    display: grid;
    place-items: center;
    font-style: normal;
}
body.kiosk .share-copy .paid i::before { content: "✓"; font-size: 12px; font-weight: 800; }
body.kiosk .share-copy .ref { display: block; margin: 8px 0 14px; color: #9aa3b0; letter-spacing: .08em; font-size: 12px; font-weight: 700; }
body.kiosk .share-copy .looking {
    width: fit-content;
    border-radius: 999px;
    padding: 7px 14px;
    margin: 0 0 18px;
    font-size: 13px;
    color: #1a2030;
}
body.kiosk .share-copy h1 { font-size: 52px; line-height: 1.02; margin: 0 0 12px; }
body.kiosk .share-copy > p { margin: 0 0 18px; color: #8d97a8; font-size: 16px; line-height: 1.45; max-width: 420px; }
body.kiosk .share-copy .sender {
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    column-gap: 12px;
    border-radius: 18px;
    padding: 14px 16px;
    margin: 0 0 22px;
}
body.kiosk .share-copy .sender-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f4f1ec;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
}
body.kiosk .share-copy .sender-ico svg { width: 16px; height: 16px; stroke: none; fill: #1a2030; }
body.kiosk .share-copy .sender b { grid-column: 2; font-size: 16px; }
body.kiosk .share-copy .sender span { grid-column: 2; color: #8d97a8; font-size: 12px; letter-spacing: .06em; }
body.kiosk .share-copy .sender em { grid-column: 3; grid-row: 1 / span 2; letter-spacing: .12em; font-size: 11px; }
body.kiosk .share-copy .air-help { margin: 0 0 8px; color: #8d97a8; font-size: 14px; }
body.kiosk .share-copy ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: air;
    color: #5c6778;
    font-size: 14px;
    line-height: 1.7;
}
body.kiosk .share-copy ol li { display: grid; grid-template-columns: 16px 1fr; gap: 6px; }
body.kiosk .share-copy ol li::before { counter-increment: air; content: counter(air) "."; color: #9aa3b0; }
body.kiosk .email-error { color: #a14b55; font-weight: 650; margin: 0 0 10px; }
body.kiosk .pack-open { display: inline-block; margin-top: 14px; color: #2f6fed; font-weight: 700; }
body.kiosk .pack-screen { width: min(520px, calc(100% - 32px)); margin: 28px auto 40px; }
body.kiosk .pack-screen h1 { font-size: 40px; margin: 8px 0; }
body.kiosk .pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
body.kiosk .pack-grid img { width: 100%; height: 220px; object-fit: cover; border-radius: 12px; }
body.kiosk .pack-screen .btn { width: 100%; min-height: 52px; border-radius: 999px; }
body.kiosk .share-copy .qr-instead {
    display: block;
    text-align: center;
    margin-top: 28px;
    color: #8d97a8;
    font-size: 16px;
}

.wizard-steps { display: flex; align-items: center; gap: 8px; margin: 4px 0 16px; flex-wrap: wrap; }
.wizard-steps .step { color: #98a0aa; font-weight: 700; }
.wizard-steps .step.is-done { color: #17191f; }
.wizard-steps .step.is-done i, .wizard-steps .step.is-on i { background: #17191f; color: #fff; }
.step-line { flex: 1; min-width: 24px; height: 2px; background: #e6e8ee; }
.step-line.is-done { background: #17191f; }
.live-now { display: inline-flex; margin-left: 8px; background: #e7f6ee; color: #1c9a57; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.wizard-split, .strip-layout, .create-top, .location-grid, .invoice-layout { display: grid; gap: 16px; }
.wizard-split, .strip-layout { grid-template-columns: 1.15fr .85fr; align-items: start; }
.strip-layout { grid-template-columns: 280px 1fr; }
.create-top { grid-template-columns: 1.4fr .7fr; align-items: start; }
.location-grid { grid-template-columns: .85fr 1.15fr; }
.invoice-layout { grid-template-columns: 1.35fr .72fr; align-items: start; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid #eef0f4; }
.setting-row b, .setting-row span { display: block; }
.setting-row span { color: #8d97a8; font-size: 13px; font-weight: 500; }
.setting-row select, .setting-row input[type="number"] { width: auto; min-width: 140px; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button { width: 32px; height: 32px; border-radius: 999px; border: 1px solid #e4e7ee; background: #fff; }
.stepper input { width: 72px; text-align: center; }
.pick-row { display: flex; gap: 10px; overflow: auto; padding-bottom: 4px; }
.pick { position: relative; min-width: 108px; border: 1px solid #e6e8ee; border-radius: 16px; padding: 10px; background: #fff; display: grid; gap: 4px; }
.pick input { position: absolute; inset: 0; opacity: 0; }
.pick.is-on, .pick:has(input:checked) { border-color: #17191f; box-shadow: inset 0 0 0 1px #17191f; }
.pick i { display: block; height: 42px; border-radius: 8px; border: 1px solid #eceff3; }
.pick-add { border-style: dashed; color: #8d97a8; }
.pack-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pack-stats div { background: #f7f8fa; border-radius: 14px; padding: 12px; }
.pack-stats b { display: block; font-size: 28px; }
.pack-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; color: #3d4654; }
.consent-note { background: #fff6e8; border-radius: 12px; padding: 12px; color: #8a5a20; }
.wizard-bar { align-items: center; }
.wizard-bar .save-note { display: grid; }
.wizard-bar small { color: #8d97a8; font-weight: 500; }
.map-card { position: relative; min-height: 280px; border-radius: 18px; overflow: hidden; background: #e7eef3; }
.map-canvas { position: absolute; inset: -20%; background:
    linear-gradient(#d5e4c4, #d5e4c4) 22% 18% / 26% 16% no-repeat,
    linear-gradient(#c5d7ee, #c5d7ee) 0 82% / 100% 22% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.75) 54px 56px),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(255,255,255,.55) 42px 44px),
    linear-gradient(165deg, #eef3f7, #d7e4d2 58%, #d5e2f0);
    transform-origin: 40% 40%; transition: transform .2s ease; }
.map-pin { position: absolute; left: 16%; top: 28%; background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 10px 24px rgba(20,24,32,.12); max-width: 210px; }
.map-pin::before { content: ""; position: absolute; left: 18px; bottom: -8px; width: 12px; height: 12px; background: #17191f; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.map-pin b, .map-pin span { display: block; }
.map-pin span { color: #8b919c; font-size: 12px; font-weight: 600; margin-top: 2px; }
.map-zoom { position: absolute; right: 12px; top: 38%; display: grid; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 18px rgba(20,24,32,.08); }
.map-zoom button { width: 36px; height: 36px; border: 0; background: #fff; font-size: 18px; }
.map-zoom button + button { border-top: 1px solid #eef0f3; }
.map-card .btn { position: absolute; left: 12px; bottom: 12px; background: #fff; }
.booth-picks { display: grid; gap: 8px; max-height: 640px; overflow: auto; padding-right: 4px; }
.booth-pick { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 1px solid #e6e8ee; border-radius: 16px; padding: 12px; background: #fff; }
.booth-pick b, .booth-pick small { display: block; }
.booth-pick small { color: #8b919c; font-size: 12px; font-weight: 600; margin-top: 2px; }
.booth-pick.is-off { opacity: .72; }
.booth-pick em { font-style: normal; color: #1c9a57; background: #e8f7ee; border-radius: 999px; padding: 4px 8px; font-size: 12px; font-weight: 700; }
.booth-pick.is-off em { color: #8b919c; background: #f3f4f6; }
.defaults-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 14px; }
.defaults-row p, .defaults-row small { display: block; }
.defaults-row small { color: #8b919c; font-weight: 500; margin-top: 2px; }
.span-2 { grid-column: span 2; }
.sheet-dialog { width: min(560px, calc(100% - 32px)); border: 0; border-radius: 24px; padding: 22px; }
.sheet-dialog::backdrop { background: rgba(18, 20, 26, .45); }
.dialog-head, .dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dialog-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e6e8ee; background: #fff; }
.invoice-lines { margin: 14px 0; padding: 16px; background: #f7f8fa; border-radius: 16px; }
.rate-head, .rate-facts, .invoice-side .feed li { display: flex; justify-content: space-between; gap: 12px; }
.rate-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 12px 0; }
.rate-facts span, .invoice-lines p { display: block; color: #8b919c; font-size: 13px; }
.rate-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rate-chips span { background: #fff; border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 650; }
.invoice-side .feed { list-style: none; margin: 0; padding: 0; }
.invoice-side .feed li { padding: 8px 0; border-top: 1px solid #eef0f3; }
.invoice-side .feed .is-total { font-size: 18px; }
.paper-preview { margin-top: 12px; border: 1px solid #eceff3; border-radius: 12px; min-height: 140px; padding: 16px; display: grid; align-content: center; gap: 6px; background: #fff; }
.paper-preview strong { font-size: 22px; }
.switch-line { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 650; }
#registeredInvoice[hidden], #customInvoice[hidden] { display: none !important; }
@media (max-width: 1100px) {
    .wizard-split, .strip-layout, .create-top, .location-grid, .invoice-layout { grid-template-columns: 1fr; }
}

.fleet-tabs { background: #fff; border: 1px solid #eef0f3; border-radius: 999px; padding: 4px; gap: 2px; }
.fleet-table .booth-face { width: 42px; height: 42px; border-radius: 12px; font-size: 12px; }
.event-look b, .event-look small { display: block; }
.event-look small { color: #8b919c; font-size: 12px; font-weight: 600; margin-top: 2px; }
.look-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.row-menu { position: relative; }
.row-menu summary { list-style: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu div { position: absolute; right: 0; top: 36px; z-index: 5; background: #fff; border: 1px solid #e6e8ee; border-radius: 14px; min-width: 160px; padding: 6px; box-shadow: 0 12px 30px rgba(20, 24, 32, .08); }
.row-menu a { display: block; padding: 8px 10px; border-radius: 10px; font-weight: 650; }
.row-menu a:hover { background: #f6f7f9; }
.booth-back { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: #8b919c; font-weight: 650; }
.booth-back a { color: #5c6572; }
.booth-back em { font-style: normal; font-size: 13px; }
.booth-banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: 18px; padding: 16px 18px; margin-bottom: 16px; }
.booth-banner b, .booth-banner p { display: block; }
.booth-banner p { color: #5c6572; margin: 4px 0 0; }
.booth-banner.is-online { background: #f3fbf6; }
.booth-banner.is-offline { background: #fff1f0; }
.booth-banner.is-paper { background: #fff7ea; }
.booth-banner.is-maintain { background: #f4f5f7; }
.booth-split { display: grid; grid-template-columns: 1.25fr .85fr; gap: 16px; align-items: start; }
.booth-col { display: grid; gap: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card-head h2 { margin: 0; }
.card-head a, .card-head small { color: #8b919c; font-weight: 650; font-size: 13px; }
.tele-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid #eef0f4; }
.card h2 + .tele-row, .assign-card + .tele-row, .config-row + .tele-row { border-top: 0; }
.tele-row span { color: #8b919c; }
.event-log { list-style: none; margin: 0; padding: 0; }
.event-log li { display: grid; grid-template-columns: 52px 12px 1fr; gap: 8px; align-items: start; padding: 12px 0; border-top: 1px solid #eef0f4; }
.event-log time { color: #8b919c; font-size: 13px; }
.event-log span { display: block; color: #8b919c; font-size: 13px; }
.log-dot.is-bad { background: #e15a4a; }
.log-dot.is-good { background: #1f9a5c; }
.log-dot.is-info { background: #17191f; }
.control-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid #eef0f4; }
.control-row b, .control-row small { display: block; }
.control-row small { color: #8b919c; font-weight: 500; margin-top: 3px; }
.control-row select { width: auto; min-width: 140px; }
.switch { position: relative; width: 46px; height: 28px; flex: 0 0 auto; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: #e4e7ee; }
.switch i::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: left .16s ease; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.switch input:checked + i { background: #17191f; }
.switch input:checked + i::after { left: 21px; }
.bright { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.bright input { width: 120px; }
.bright b { min-width: 42px; }
.screen-stage { position: relative; min-height: 210px; border-radius: 16px; overflow: hidden; background: linear-gradient(145deg, #f8d5e4, #d7ebff 55%, #ffe6c4); padding: 48px 16px 16px; }
.screen-stage.is-frozen { padding-top: 16px; }
.screen-stage.is-frozen { filter: saturate(.7); }
.screen-attract { display: grid; gap: 4px; max-width: 220px; }
.screen-attract small { letter-spacing: .08em; font-size: 10px; color: #7c4d5d; font-weight: 700; }
.screen-attract b { font-family: var(--heading); font-size: 22px; line-height: 1.05; }
.screen-attract span { color: #6d5a62; font-size: 12px; }
.screen-attract strong { justify-self: start; margin-top: 8px; background: #f3b6c0; color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12px; }
.screen-live-tag, .screen-freeze, .screen-play { position: absolute; border-radius: 999px; background: rgba(255,255,255,.92); font-style: normal; font-size: 12px; font-weight: 700; padding: 6px 10px; }
.screen-live-tag { top: 12px; left: 12px; color: #1f9a5c; }
.screen-freeze { left: 16px; bottom: 48px; }
.screen-play { left: 12px; bottom: 12px; background: rgba(23,25,31,.78); color: #fff; }
.assign-card, .config-row { display: flex; align-items: center; gap: 10px; border: 1px solid #eef0f4; border-radius: 16px; padding: 12px; margin: 8px 0; }
.assign-card small, .config-row small { display: block; color: #8b919c; font-weight: 500; }
.assign-mark { width: 36px; height: 36px; border-radius: 12px; background: #f4f6f9; display: grid; place-items: center; }
.assign-card .pill { margin-left: auto; }
.config-row .btn { margin-left: auto; }
.act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.act-grid .btn, .act-grid form .btn { width: 100%; }
.btn-pink { background: #fde8e6; color: #e15a4a; border: 0; border-radius: 999px; }
.btn-pink:disabled, .act-grid .btn:disabled { opacity: .45; }
.pair-card { max-width: 760px; display: grid; gap: 8px; }
.code-boxes { display: flex; gap: 10px; margin: 12px 0; }
body:not(.kiosk) .code-boxes input { width: 64px; height: 72px; text-align: center; font-family: var(--heading); font-size: 28px; padding: 0; }
.pair-status p { margin: 6px 0; }
.pair-status .is-ok { color: #1f9a5c; }
.pair-status .is-bad, .pair-error { color: #e15a4a; }
.pair-wait { color: #8b919c; }
.pair-assign { display: grid; gap: 6px; max-width: 280px; margin-top: 16px; color: #8b919c; font-size: 13px; font-weight: 700; }
.pair-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
.look-choice { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
body.kiosk .pair-code { margin-top: 22px; color: #8d97a8; letter-spacing: .18em; font-size: 14px; font-weight: 700; }
body.kiosk .back-soon { color: #8d97a8; font-size: 18px; }
body.kiosk .start.is-off { display: inline-flex; align-items: center; gap: 8px; opacity: .55; }
.gal-filters { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.gal-filter-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body:not(.kiosk) .gal-filter-form select { width: auto; min-width: 160px; height: 42px; border-radius: 999px; }
.gal-pack { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #3d4654; }
.gal-count { color: #5c6572; margin: 8px 0 0; }
.gal-hint { color: #8d97a8; font-size: 13px; margin: 0 0 14px; }
.gal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.g-card { position: relative; background: #fff; border-radius: 18px; padding: 8px; }
.g-card a { display: block; color: inherit; }
.g-check { position: absolute; top: 16px; left: 16px; z-index: 2; }
.g-check input { width: 18px; height: 18px; }
.g-photo { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: hsl(var(--hue), 42%, 72%); }
.g-photo img, .g-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-photo em { position: absolute; top: 10px; right: 10px; background: #17191f; color: #fff; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; padding: 4px 8px; }
.g-card b, .g-card span, .g-card small { display: block; }
.g-card b { margin-top: 8px; }
.g-card span, .g-card small { color: #8b919c; font-size: 12px; }
.gal-more { text-align: center; margin: 16px 0; }
.gal-bar { position: sticky; bottom: 12px; margin-top: 16px; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(20, 24, 32, .08); }
.gal-bar b { margin-right: auto; }
.session-split { display: grid; grid-template-columns: 1.35fr .75fr; gap: 16px; align-items: start; }
.frame-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.frame-grid.is-single { grid-template-columns: 1fr; }
.g-frame { position: relative; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; background: hsl(var(--hue), 42%, 72%); }
.g-frame b { position: absolute; top: 10px; left: 10px; background: #fff; border-radius: 8px; padding: 3px 8px; font-size: 12px; }
.printed-row, .delete-session { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.printed-row span, .delete-session span { display: block; color: #8b919c; font-size: 13px; }
.pack-price { font-family: var(--heading); font-size: 28px; margin: 8px 0; }
.share-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tele-row em { font-style: normal; color: #8b919c; font-weight: 700; }
.tele-row em.is-ok { color: #1f9a5c; }
.tele-row small { display: block; color: #8b919c; font-weight: 500; }
@media (max-width: 1100px) {
    .gal-grid { grid-template-columns: repeat(2, 1fr); }
    .session-split { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
    .booth-split, .booth-banner { grid-template-columns: 1fr; display: grid; }
}

.cal-toolbar .cal-new { margin-left: auto; }
.cal-arrows { display: flex; gap: 6px; }
.cal-arrows a { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid #eef0f3; display: grid; place-items: center; font-size: 18px; }
.cal-jump { position: relative; }
.cal-jump summary { list-style: none; background: #fff; border: 1px solid #eef0f3; border-radius: 999px; height: 40px; padding: 0 16px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.cal-jump summary::-webkit-details-marker { display: none; }
.cal-jump div { position: absolute; z-index: 6; top: 46px; left: 0; background: #fff; border-radius: 16px; padding: 8px; min-width: 180px; box-shadow: 0 12px 30px rgba(20, 24, 32, .08); }
.cal-jump a { display: block; padding: 8px 10px; border-radius: 10px; font-weight: 650; }
.cal-jump a:hover { background: #f6f7f9; }
.cal-sync em { font-style: normal; color: #8b919c; font-weight: 700; }
.cal-sync em.is-synced { color: #1f9a5c; }
.g-mark { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: conic-gradient(#ea4335, #fbbc05, #34a853, #4285f4, #ea4335); }
.a-mark { width: 14px; height: 14px; border-radius: 4px; background: #17191f; display: inline-block; }
.cal-booths { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.cal-booths > span { color: #8b919c; font-size: 13px; font-weight: 700; }
.cal-booths a { border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; background: #f4f5f7; color: #5c6572; }
.cal-booths a.is-on:not([style]) { background: #17191f; color: #fff; }
.cal-booths a.is-on { box-shadow: inset 0 0 0 1.5px #17191f; }
.cal-side h3 { margin: 14px 0 4px; }
.cal-side .side-bookings { max-height: 420px; overflow: auto; }
.cal-side .side-bookings li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: start; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.cal-side .chip { margin-left: 6px; }
.cal-side .pill-confirmed { background: #f3f4f6; color: #6b7280; }
.cal-side .pill-option { background: #fff; color: #e15a4a; box-shadow: inset 0 0 0 1px #f3c7c2; }
.booked-month { border-top: 1px solid #eef0f4; margin-top: 8px; padding-top: 12px; }
.booked-month > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.booked-month span { color: #8b919c; font-size: 13px; }
.booked-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.month .day { min-height: 118px; }
.month .block { padding: 4px 6px; }
.month .block small, .month .block em { display: block; font-style: normal; font-weight: 700; }
.month .block em { font-size: 12px; }
.cal-dots { display: flex; gap: 3px; margin: 2px 0; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; }
.block.is-dim, .lane-block.is-dim { opacity: .28; }
.cal-side mark, .month mark, .lane-block mark { background: transparent; color: #e15a4a; font-weight: 800; }
.agenda-head strong { color: #a0a6b0; font-weight: 650; }
.agenda-head strong.is-today { color: #17191f; }
.hours span { height: 56px; line-height: 56px; }
.lane { min-height: 616px; background-image: repeating-linear-gradient(to bottom, transparent, transparent 55px, #eef0f4 55px, #eef0f4 56px); }
.lane-block { right: auto; border-radius: 14px; padding: 8px 10px; }
.lane-block small, .lane-block b, .lane-block > span { display: block; }
.lane-block .chip-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
@media (max-width: 1100px) {
    .cal-layout { grid-template-columns: 1fr; }
    .cal-new { margin-left: 0; }
}

.pill-sent { background: #e8eefc; color: #3d62c4; }
.pill-draft { background: #f3f4f6; color: #6b7280; }
.fin-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fin-toolbar .status-tabs { margin: 0; }
.fin-toolbar .btn { margin-left: auto; }
body:not(.kiosk) .fin-toolbar select { width: auto; min-width: 128px; height: 40px; border-radius: 999px; padding: 0 36px 0 14px; background-color: #fff; }
.fin-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 14px; color: #8b919c; font-weight: 650; }
.fin-crumb a { color: #5c6572; }
.fin-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.fin-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.fin-tools .tool-search { flex: 1; }
.fin-table tbody tr { cursor: pointer; }
.fin-table tbody tr:hover { background: #fafbfc; }
.fin-table tbody tr.is-open { background: #f4f6f8; }
.row-menu { position: relative; }
.row-menu summary { list-style: none; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu div { position: absolute; right: 0; top: 34px; background: #fff; border-radius: 12px; min-width: 160px; z-index: 6; padding: 6px; box-shadow: 0 12px 30px rgba(20, 24, 32, .12); }
.row-menu a { display: block; padding: 8px 10px; border-radius: 8px; font-weight: 650; }
.row-menu a:hover { background: #f6f7f9; }
.fin-side { position: sticky; top: 12px; background: #14161c; color: #fff; border-radius: 22px; padding: 18px; }
.fin-side-top { display: flex; justify-content: space-between; align-items: center; color: #9aa1ad; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fin-side h2 { margin: 10px 0 4px; font-size: 28px; }
.fin-side h2 a { color: #fff; }
.fin-side p { color: #c5cad3; margin: 0 0 14px; }
.fin-side .who { margin-bottom: 8px; }
.fin-side .who span { display: block; color: #9aa1ad; font-size: 12px; font-weight: 500; }
.fin-lines { list-style: none; margin: 12px 0; padding: 0; }
.fin-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); }
.fin-lines span { display: block; color: #9aa1ad; font-size: 12px; font-weight: 500; }
.fin-total { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 14px; }
.fin-total strong { font-size: 28px; }
.fin-side-actions { display: flex; gap: 8px; }
.fin-side-actions .btn { flex: 1; }
.fin-side .btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.2); }
.fin-side .btn-light { background: #fff; color: #17191f; }
.fin-side-links { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; font-weight: 700; }
.fin-side-links a { color: #d5d8de; }
.fin-detail { display: grid; grid-template-columns: 1.35fr .75fr; gap: 16px; align-items: start; }
.fin-paper { background: #fff; border-radius: 22px; padding: 28px; box-shadow: var(--shadow); }
.paper-top, .paper-who, .paper-foot { display: flex; justify-content: space-between; gap: 16px; }
.paper-top strong, .sheet-head strong { display: block; letter-spacing: .14em; font-size: 13px; }
.paper-top span, .paper-who span, .paper-lines span { display: block; color: #8b919c; font-size: 13px; }
.paper-badge { font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.paper-badge.is-due { color: #d4922a; }
.paper-badge.is-paid { color: #1f9a5c; }
.paper-who { margin-top: 22px; }
.paper-who small, .sheet-meta small { display: block; color: #a0a6b0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.paper-event { margin: 18px 0 0; font-weight: 700; }
.paper-lines > div, .paper-total { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #eef0f3; }
.paper-total strong { font-size: 28px; }
.sheet-bank { color: #8b919c; font-size: 13px; }
.paper-foot { align-items: flex-end; margin-top: 18px; }
.paper-foot-links { display: flex; gap: 8px; align-items: center; }
.chan-row, .chan { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chan-row button, .chan label { border: 1px solid #e6e8ee; background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor: pointer; }
.chan label { position: relative; }
.chan input { position: absolute; opacity: 0; }
.chan label:has(input:checked), .chan-row button:hover { background: #17191f; color: #fff; border-color: #17191f; }
.pay-card { background: #fff; border-radius: 22px; padding: 20px; box-shadow: var(--shadow); margin-bottom: 14px; }
.pay-card.is-paid { background: #e7f6ee; }
.pay-card span { color: #6b7280; font-size: 13px; font-weight: 650; }
.pay-card strong { display: block; font-size: 36px; margin: 6px 0; }
.pay-card p { margin: 6px 0; }
.pay-card .stack { margin-top: 12px; }
.fin-time { list-style: none; margin: 0; padding: 0; }
.fin-time li { position: relative; padding: 0 0 16px 18px; border-left: 2px solid #e6e8ee; }
.fin-time li.is-done { border-left-color: #1f9a5c; }
.fin-time b, .fin-time span { display: block; }
.fin-time span { color: #8b919c; font-size: 13px; }
.fin-time li:not(.is-done) { color: #a0a6b0; }
.send-dialog { width: min(880px, calc(100% - 32px)); }
.send-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; margin-top: 12px; }
.send-preview { margin-top: 12px; background: #f6f7f9; border-radius: 16px; padding: 14px; white-space: pre-wrap; min-height: 140px; }
.check-line { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-weight: 650; }
body:not(.kiosk) .check-line input { width: auto; }
.edit-line { display: grid; grid-template-columns: 1.2fr 1fr 70px 90px; gap: 8px; }
.sheet-body { background: #14161c; margin: 0; min-height: 100vh; }
.sheet-bar { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; }
.sheet-bar a, .sheet-bar button { background: #fff; color: #17191f; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700; cursor: pointer; }
.sheet-page { width: min(820px, calc(100% - 32px)); margin: 0 auto 32px; background: #fff; color: #17191f; border-radius: 8px; padding: 42px 46px; }
.sheet-head, .sheet-meta, .sheet-sum, .sheet-sign { display: flex; justify-content: space-between; gap: 24px; }
.sheet-head span, .sheet-meta span, .sheet-page td span { display: block; color: #6b7280; }
.sheet-head b, .sheet-meta b { display: block; font-size: 20px; margin: 4px 0; }
.sheet-meta { margin: 28px 0; }
.sheet-page table { width: 100%; border-collapse: collapse; }
.sheet-page th { text-align: left; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #8b919c; padding: 8px 0; border-bottom: 1px solid #eceff3; }
.sheet-page td { padding: 12px 0; border-bottom: 1px solid #f2f3f6; vertical-align: top; }
.sheet-page td:not(:first-child), .sheet-page th:not(:first-child) { text-align: right; }
.sheet-sum { flex-direction: column; align-items: flex-end; margin-top: 16px; }
.sheet-sum div { display: flex; justify-content: space-between; gap: 32px; min-width: 280px; }
.sheet-sign { margin-top: 36px; align-items: flex-end; }
.sheet-sign i { display: block; width: 180px; border-top: 1px solid #17191f; margin-bottom: 8px; height: 36px; }
.sheet-sign b, .sheet-sign span { display: block; }
.sheet-sign em { font-style: normal; color: #8b919c; }
@media print {
    .sheet-bar { display: none; }
    .sheet-body { background: #fff; }
    .sheet-page { width: auto; margin: 0; border-radius: 0; }
}
@media (max-width: 1100px) {
    .fin-split, .fin-detail, .send-grid { grid-template-columns: 1fr; }
    .fin-side { position: static; }
}

.an-toolbar .btn { margin-left: auto; }
body:not(.kiosk) .an-toolbar select,
body:not(.kiosk) .an-chart-tools select { width: auto; min-width: 140px; height: 40px; border-radius: 999px; padding: 0 36px 0 14px; background-color: #fff; }
.an-mid { display: grid; grid-template-columns: 1.45fr .8fr; gap: 14px; margin-bottom: 14px; }
.an-ranks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.an-chart-tools { display: flex; align-items: center; gap: 8px; }
.an-peak { background: #e8f1ff; color: #2f6fed; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.an-chart { display: grid; grid-template-columns: 36px 1fr; gap: 8px; min-height: 240px; margin-top: 18px; padding-top: 52px; }
.an-axis { display: flex; flex-direction: column; justify-content: space-between; color: #a0a6b0; font-size: 12px; padding-bottom: 22px; }
.an-bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; border-bottom: 1px solid #eef0f3; }
.an-bars > div { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.an-bars b { font-size: 13px; color: #8b919c; }
.an-bars i { display: block; width: 28px; border-radius: 10px 10px 6px 6px; background: #eceff3; }
.an-bars .is-peak i { background: #17191f; }
.an-bars .is-peak b { color: #17191f; }
.an-bars span { color: #8b919c; font-size: 12px; }
.an-tip { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-20%); background: #17191f; color: #fff; border-radius: 12px; padding: 8px 10px; font-style: normal; font-size: 12px; font-weight: 700; width: 148px; text-align: left; z-index: 2; }
.an-foot, .an-gauge-copy, .an-empty, .an-note { color: #8b919c; font-size: 13px; }
.an-gauge-card { text-align: center; }
.gauge { position: relative; height: 148px; margin: 12px auto 0; width: 240px; }
.gauge i { position: absolute; left: 50%; bottom: 36px; width: 8px; height: 96px; margin-left: -4px; border-radius: 0; background: linear-gradient(#eceff3, #eceff3) top center / 8px 24px no-repeat; transform-origin: center bottom; }
.gauge i.is-on { background: linear-gradient(#17191f, #17191f) top center / 8px 24px no-repeat; }
.gauge strong { position: absolute; left: 0; right: 0; bottom: 42px; font-size: 32px; }
.gauge span { position: absolute; left: 20px; right: 20px; bottom: 22px; color: #8b919c; font-size: 12px; }
.an-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: left; margin-top: 16px; }
.an-mini span { display: block; color: #8b919c; font-size: 12px; }
.an-mini b { font-size: 16px; }
.an-states { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.an-states[hidden], #anLive[hidden] { display: none; }
.an-state { display: grid; justify-items: start; gap: 8px; min-height: 180px; }
.an-state .stat-ico { font-weight: 800; }
.an-state .stat-ico.is-bad { background: #fde8e6; color: #e15a4a; }
.an-state .stat-ico.is-warn { background: #fff3dc; color: #d4922a; }
.an-state p { color: #6b7280; margin: 0 0 8px; }
.an-note { margin-top: 14px; }
@media (max-width: 1100px) {
    .an-mid, .an-ranks, .an-states { grid-template-columns: 1fr; }
}

.set-split { display: grid; grid-template-columns: 1.2fr .9fr; gap: 14px; margin-bottom: 14px; }
.set-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.set-pair article { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.set-pair article > div { display: grid; gap: 2px; }
.team-list { list-style: none; margin: 0; padding: 0; }
.team-list li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #eef0f3; }
.team-list b, .team-list span, .integ-row span { display: block; }
.team-list span, .integ-row span { color: #8b919c; font-size: 13px; font-weight: 500; }
.team-list em { font-style: normal; color: #8b919c; font-size: 13px; }
body:not(.kiosk) .team-list select,
body:not(.kiosk) .integ-row select { width: auto; min-width: 120px; height: 40px; border-radius: 999px; }
.role-grid td:not(:first-child), .role-grid th:not(:first-child) { text-align: center; width: 88px; }
.role-grid .mark { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; }
.role-grid .mark.is-yes { background: #e7f6ee; color: #1c9a57; }
.role-grid .mark.is-yes::before { content: "✓"; }
.role-grid .mark.is-no { background: #f3f4f6; color: #b0b6c0; }
.role-grid .mark.is-no::before { content: "×"; }
.venue-defaults h2 { margin-bottom: 8px; }
.venue-defaults .set-pair { margin: 0; }
.venue-defaults article { padding: 8px 0; }
.team-list em { min-width: 84px; text-align: right; }
.integ-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid #eef0f3; }
.reli { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; }
.reli i { grid-column: 1 / -1; height: 6px; background: #eef0f3; border-radius: 99px; display: block; }
.reli i em { display: block; height: 6px; background: #1f9a5c; border-radius: 99px; }
.reli strong.is-over + i em, .reli .is-over { color: #d4922a; }
.legal-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.legal-top form { margin-left: auto; display: flex; gap: 8px; }
.legal-split { display: grid; grid-template-columns: 1.4fr .7fr; gap: 14px; }
.legal-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.law-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.law-row span { background: #f4f6f8; border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 650; }
.legal-tools { display: flex; gap: 6px; margin-bottom: 8px; }
.legal-tools button { border: 1px solid #e6e8ee; background: #fff; border-radius: 8px; min-width: 36px; height: 32px; font-weight: 800; }
.legal-sheet { min-height: 420px; border: 1px solid #e6e8ee; border-radius: 16px; padding: 18px; white-space: pre-wrap; }
.ver { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #eef0f3; }
.ver span, .ver small { display: block; color: #8b919c; font-size: 13px; }
.doc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.doc-grid article { border: 1px solid #eef0f3; border-radius: 16px; padding: 14px; display: grid; gap: 6px; }
.doc-grid strong { font-size: 28px; }
.kiosk-head { display: flex; justify-content: flex-end; gap: 8px; margin: -8px 0 14px; }
.screen-pair, .setup-grid, .photo-row { display: grid; gap: 12px; }
.screen-pair { grid-template-columns: 1.1fr .9fr; }
.screen-pair img, .screen-fallback { width: 100%; border-radius: 16px; background: #f6f1ea; min-height: 180px; object-fit: cover; }
.screen-fallback { display: grid; place-items: center; }
.setup-grid { grid-template-columns: repeat(4, 1fr); }
.setup-grid article, .photo-row form { border: 1px solid #eef0f3; border-radius: 16px; padding: 14px; }
.setup-grid i { width: 28px; height: 28px; border-radius: 50%; background: #17191f; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; }
.photo-row { grid-template-columns: repeat(4, 1fr); }
.photo-row form { display: grid; gap: 8px; justify-items: start; }
.photo-row img, .photo-row span { width: 100%; height: 140px; object-fit: cover; border-radius: 12px; background: #f6f7f9; display: grid; place-items: center; color: #8b919c; letter-spacing: .12em; }
.photo-row input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg label { position: relative; border: 1px solid #e6e8ee; border-radius: 999px; padding: 8px 12px; font-weight: 700; cursor: pointer; }
.seg label.is-on, .seg label:has(input:checked) { background: #17191f; color: #fff; }
.seg input { position: absolute; opacity: 0; }
@media (max-width: 1100px) {
    .set-split, .set-pair, .legal-split, .screen-pair, .setup-grid, .photo-row, .doc-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Dashboard polish (Oct 2026): brand type, flat surfaces, consistent
   buttons, brand placeholder screens, and a real mobile layout.
   ===================================================================== */
body:not(.kiosk) {
    --font: "TikTok Sans", "Inter", "Segoe UI", sans-serif;
    --heading: "TikTok Sans", "Inter", sans-serif;
    --serif: "TikTok Sans", "Inter", sans-serif;
    --shadow: none;
    --gold: #c9a46a;
    --gold-soft: #ead9bd;
    --gold-ink: #8a6a3b;
}
body:not(.kiosk) h1, body:not(.kiosk) h2, body:not(.kiosk) h3 { letter-spacing: -0.025em; }

/* Flat: no drop shadows anywhere in the dashboard */
body:not(.kiosk) *, body:not(.kiosk) *::before, body:not(.kiosk) *::after { box-shadow: none !important; }
/* keep functional rings (selected states, focus) */
body:not(.kiosk) .mode.is-on, body:not(.kiosk) .choice:has(input:checked), body:not(.kiosk) .filter-picks label:has(input:checked),
body:not(.kiosk) .cfg.is-on, body:not(.kiosk) .pick.is-on, body:not(.kiosk) .pick:has(input:checked) { box-shadow: inset 0 0 0 1px #17191f !important; }
body:not(.kiosk) .brand-tabs button.is-on { box-shadow: inset 0 -2px 0 #17191f !important; }
body:not(.kiosk) .cal-booths a.is-on { box-shadow: inset 0 0 0 1.5px #17191f !important; }
body:not(.kiosk) :is(input, select, textarea):focus { box-shadow: 0 0 0 4px rgba(201, 164, 106, .22) !important; }
body:not(.kiosk) :is(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* popovers lose their shadow, so give them an edge */
body:not(.kiosk) :is(.row-menu div, .cal-jump div, .map-zoom, .map-pin, .gal-bar, .search-pop) { border: 1px solid #e6e2da; }
body:not(.kiosk) .switch i::after { border: 1px solid rgba(0, 0, 0, .08); }
body:not(.kiosk) .stat:hover { transform: none; }

/* Buttons: one height, never wrap, consistent row actions */
body:not(.kiosk) .btn { white-space: nowrap; min-height: 40px; line-height: 1.1; }
body:not(.kiosk) .btn-line:hover, body:not(.kiosk) .btn-ghost:hover { border-color: #17191f; }
body:not(.kiosk) .btn-dark:hover { background: #000; }
table.grid td > .btn, table.grid td > a.btn { min-width: 116px; padding: 10px 16px; }
table.grid td { white-space: nowrap; }
table.grid td .who span, table.grid td .who small { white-space: nowrap; }

/* Dashboard: upcoming pills were stretched into blobs */
.upcoming li { align-items: flex-start; }
.upcoming li > .pill { flex: none; align-self: flex-start; height: auto; }
.upcoming small { color: var(--gold-ink); }
.headline { align-items: stretch; }

/* Brand placeholder for the booth welcome screen (replaces the kids art) */
.lg-screen {
    position: relative; overflow: hidden; border-radius: 18px; min-height: 188px; height: 100%;
    padding: 22px 22px 34px; display: flex; flex-direction: column; justify-content: center; gap: 8px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(201, 164, 106, .55), transparent 60%),
        radial-gradient(90% 80% at 0% 100%, rgba(234, 217, 189, .9), transparent 65%),
        #f4ece0;
    color: #15130f;
}
.lg-screen small { font-size: 9px; letter-spacing: .28em; color: #8a6a3b; font-weight: 600; }
.lg-screen strong { font-size: 26px; line-height: 1.02; font-weight: 800; letter-spacing: -.04em; }
.lg-screen .lg-sub { font-size: 12px; color: #6f6557; }
.lg-screen .lg-sub:empty { display: none; }
.lg-screen .lg-tap { align-self: flex-start; margin-top: 4px; padding: 8px 14px; border-radius: 999px; background: #15130f; color: #f4ece0; font-size: 11px; font-weight: 700; }
.lg-screen .lg-tap::before { content: "●"; margin-right: 6px; color: var(--gold); }
.lg-screen em { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-style: normal; font-size: 8px; letter-spacing: .4em; color: rgba(21, 19, 15, .45); font-weight: 600; }
.lg-screen-lg { min-height: 280px; padding: 34px 34px 46px; }
.lg-screen-lg strong { font-size: clamp(30px, 3.4vw, 44px); }
.stage-art { background: #f4ece0; }
.screen-pair .lg-screen { min-height: 180px; }

/* Settings: role select was clipped */
body:not(.kiosk) .card li form select, body:not(.kiosk) select[name="role"] { min-height: 38px; padding: 6px 34px 6px 14px; line-height: 1.2; height: auto; }

/* Invoices list: keep amounts and dates on one line */
.panel table.grid td { vertical-align: middle; }

/* ---------- Tablet & phone ---------- */
@media (max-width: 1100px) {
    .main { padding: 16px 16px 40px; }
    .main :is(section, div, article, aside, form) { min-width: 0; }
    .card:has(table.grid), .panel:has(table.grid), section.card:has(.role-grid) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-tools { flex-wrap: wrap; }
    .table-tools > :first-child { flex: 1 1 100%; }
    .page-toolbar { align-items: stretch; }
    .status-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    .status-tabs::-webkit-scrollbar { display: none; }
    .status-tabs a { flex: none; }

    /* sidebar becomes a slim top bar with a scrollable menu */
    .sidebar { position: sticky; top: 0; z-index: 20; padding: 12px 12px 10px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #ece7df; overflow: hidden; }
    .sidebar .brand { padding: 0 6px 0 4px; flex: none; }
    .sidebar .nav-label { display: none; }
    .sidebar .nav-split { margin: 0; padding: 0 0 0 10px; border-top: 0; border-left: 1px solid #ece7df; }
    .sidebar .nav { flex-direction: row; gap: 2px; flex: none; }
    .sidebar > :is(.nav, .nav-split) { flex: none; }
    .sidebar { overflow-x: auto; scrollbar-width: none; }
    .sidebar::-webkit-scrollbar { display: none; }
    .sidebar .nav-link { white-space: nowrap; padding: 9px 12px; }

    .topbar { grid-template-columns: 1fr auto; gap: 10px 12px; }
    .topbar > :first-child { grid-column: 1 / -1; }
    .gallery-bar, .gal-bar { flex-wrap: wrap; }
    .gal-bar .btn { flex: 1 1 auto; }
    .settings-layout .subnav { overflow-x: auto; flex-wrap: nowrap; }
}
@media (max-width: 1100px) {
    .main :is(div, form, section, header, footer, aside):has(> .btn) { flex-wrap: wrap; }
    .main select { max-width: 100%; }
    .an-toolbar, .fin-toolbar, .an-chart-tools, .card-head, .an-mid .card > div:first-child { flex-wrap: wrap; }
    .main .btn { max-width: 100%; }
    .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
}
@media (max-width: 600px) {
    .stat { padding: 14px; }
    .stat strong, .stat b { font-size: 22px !important; }
    .sidebar .nav-link svg { display: none; }
    .headline h3 { font-size: 24px; }
    .stat strong, .stat b { font-size: 26px; }
    .topbar { grid-template-columns: 1fr; }
    .topbar > * { justify-self: stretch; }
    .lg-screen { min-height: 170px; }
}