:root {
  color-scheme: dark;
  --bg: #090d16;
  --surface: #111827;
  --surface-2: #182234;
  --line: #293548;
  --text: #f4f7fb;
  --muted: #94a3b8;
  --brand: #ffb11b;
  --brand-dark: #b86d00;
  --green: #35d49a;
  --red: #ff6b6b;
  --blue: #67a7ff;
  --violet: #b18cff;
  --radius: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 40% -20%, #202b46 0, var(--bg) 38%); color: var(--text); }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(255,177,27,.35); outline-offset: 2px; }
.skip-link { position: fixed; left: 12px; top: -50px; z-index: 100; background: white; color: black; padding: 10px; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.topbar { min-height: 72px; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(9,13,22,.94); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 40; }
.brand, .topbar-actions { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; background: linear-gradient(135deg, #ffd05c, #e37000); color: #201000; border-radius: 12px; font-size: 24px; font-weight: 900; box-shadow: 0 0 24px rgba(255,177,27,.2); }
.brand div { display: grid; }.brand strong { font-size: 18px; }.brand small { color: var(--muted); }
.modulebar { position: fixed; top: 72px; bottom: 0; left: 0; z-index: 25; width: 220px; padding: 18px 12px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; border-right: 1px solid var(--line); background: #0d1421; overflow-y: auto; }
.module-caption { padding: 3px 12px 8px; color: #64748b; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.module-current,.module-button,.system-menu > summary { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid transparent; border-radius: 9px; padding: 9px 12px; color: var(--muted); background: transparent; font-weight: 700; font-size: 14px; text-align: left; }
.module-current { color: #241500; background: linear-gradient(135deg, #ffc447, var(--brand)); }
.module-current > span,.module-button > span,.system-menu > summary > span { width: 19px; text-align: center; font-size: 16px; }
.module-button:hover,.system-menu > summary:hover { color: var(--text); background: var(--surface-2); }
.system-menu { position: relative; margin-top: auto; }
.system-menu > summary { cursor: pointer; list-style: none; }
.system-menu > summary::-webkit-details-marker { display: none; }
.system-menu > summary::after { content: "▾"; margin-left: 7px; color: var(--muted); font-size: 11px; }
.system-menu[open] > summary { color: var(--text); background: var(--surface-2); }
.system-menu-panel { position: absolute; bottom: 0; left: calc(100% + 10px); z-index: 30; width: min(280px, calc(100vw - 24px)); display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 16px 42px rgba(0,0,0,.45); }
.system-menu-panel .connection { padding: 7px 5px 10px; border-bottom: 1px solid var(--line); }
.system-menu-panel .module-button { width: 100%; justify-content: flex-start; color: var(--text); background: var(--surface-2); }
.button { border: 1px solid transparent; border-radius: 10px; padding: 10px 14px; font-weight: 700; color: var(--text); background: var(--surface-2); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button-primary { background: var(--brand); color: #241500; }
.button-primary:hover:not(:disabled) { background: #ffc347; }
.button-ghost { border-color: var(--line); }.button-danger { border-color: #74323a; color: #ff9da4; background: #2a171e; }
.connection { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.connection-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.connection.is-online { color: var(--green); }.connection.is-offline { color: var(--red); }.connection.is-polling,.connection.is-stale { color: var(--brand); }
.connection.is-synced { color: var(--green); }.connection.is-pending { color: var(--brand); }.connection.is-error { color: var(--red); }.connection.is-idle { color: var(--muted); }
.action-ribbon { position: sticky; top: 72px; z-index: 20; min-height: 78px; margin-left: 220px; padding: 10px 22px; display: flex; align-items: stretch; gap: 8px; border-bottom: 1px solid var(--line); background: rgba(17,24,39,.96); box-shadow: 0 8px 24px rgba(0,0,0,.16); overflow-x: auto; }
.selection-summary { min-width: 178px; display: grid; align-content: center; padding-right: 16px; border-right: 1px solid var(--line); }.selection-summary strong,.selection-summary small { display: block; }.selection-summary small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.ribbon-action { min-width: 94px; display: grid; place-items: center; gap: 3px; border: 1px solid transparent; border-radius: 10px; padding: 7px 11px; color: var(--text); background: transparent; font-weight: 700; font-size: 12px; white-space: nowrap; }.ribbon-action span { color: var(--brand); font-size: 18px; }.ribbon-action:hover:not(:disabled) { border-color: var(--line); background: var(--surface-2); }.ribbon-action:disabled { opacity: .38; cursor: not-allowed; }.ribbon-danger span { color: var(--red); }
.shell { width: auto; max-width: 1720px; margin-left: 220px; padding: clamp(16px, 2vw, 30px); }
.summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; }
.summary article { padding: 17px 20px; border: 1px solid var(--line); background: linear-gradient(150deg, rgba(24,34,52,.94), rgba(17,24,39,.9)); border-radius: var(--radius); }
.summary span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 5px; }.summary strong { font-size: 26px; }
.workspace, .command-panel { background: rgba(17,24,39,.88); border: 1px solid var(--line); border-radius: 18px; padding: clamp(14px, 2vw, 24px); }
.toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
h1,h2,h3,p { margin-top: 0; }.toolbar h1 { margin-bottom: 3px; font-size: 24px; }.toolbar p, .panel-title p, .modal header p { color: var(--muted); margin-bottom: 0; font-size: 14px; }.toolbar-heading small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
input, select, textarea { border: 1px solid var(--line); background: #0d1421; color: var(--text); border-radius: 10px; min-height: 42px; padding: 9px 12px; }
.search input { width: min(280px, 40vw); }
.machine-grid { display: grid; gap: 18px; }
.zone-group { min-width: 0; }
.zone-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.zone-group > header h2 { margin: 0; font-size: 15px; }
.zone-group > header span { color: var(--muted); font-size: 12px; }
.zone-machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.machine-card { position: relative; min-height: 142px; color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--state-color, var(--muted)); background: #0d1421; border-radius: 12px; transition: transform .15s, border-color .15s, background .15s; overflow: hidden; }
.machine-card:hover,.machine-card.is-selected { transform: translateY(-2px); border-color: var(--state-color, var(--muted)); background: #131d2d; }.machine-card.is-selected { box-shadow: inset 0 0 0 1px var(--state-color, var(--brand)); }
.machine-open { width: 100%; min-height: 140px; display: flex; flex-direction: column; text-align: left; color: inherit; border: 0; background: transparent; padding: 15px 13px 12px; }.machine-select { position: absolute; top: 11px; right: 10px; z-index: 2; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: #111827; }.machine-select input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--brand); }
.machine-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }.machine-card-top > span:first-child { display: grid; gap: 3px; }.machine-card strong { font-size: 16px; }.machine-card small { color: var(--muted); }
.machine-card .machine-state { margin-top: auto; color: var(--state-color); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }.machine-usage { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; color: var(--muted); font-size: 11px; }.machine-usage strong { color: var(--text); font-size: 11px; }
.context-menu { position: fixed; z-index: 90; width: 238px; display: none; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #111827; box-shadow: 0 20px 48px rgba(0,0,0,.5); }.context-menu.is-open { display: grid; }.context-menu-heading { display: grid; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }.context-menu-heading small { color: var(--muted); }.context-menu button { min-height: 36px; border: 0; border-radius: 7px; padding: 7px 10px; color: var(--text); background: transparent; text-align: left; font-size: 13px; }.context-menu button:hover:not(:disabled),.context-menu button:focus-visible { background: var(--surface-2); }.context-menu button:disabled { color: #5c6677; cursor: not-allowed; }.context-menu .context-danger { color: #ff9da4; }.context-separator { height: 1px; margin: 4px 6px; background: var(--line); }
.machine-stale { display: none; width: max-content; margin-top: 8px; padding: 2px 6px; border: 1px solid var(--brand); border-radius: 99px; color: var(--brand); font-size: 10px; font-weight: 800; text-transform: uppercase; }
body.data-stale .machine-card { background-image: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,177,27,.035) 8px, rgba(255,177,27,.035) 16px); }
body.data-stale .machine-stale { display: block; }
.state-AVAILABLE { --state-color: var(--green); }.state-IN_USE { --state-color: var(--blue); }.state-OFFLINE { --state-color: #667085; }.state-LOCKED { --state-color: var(--red); }.state-MAINTENANCE,.state-DEGRADED { --state-color: var(--brand); }.state-RESERVED,.state-STARTING,.state-ENDING { --state-color: var(--violet); }
.loading-state, .empty-state { min-height: 260px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--muted); }.empty-state[hidden], .loading-state[hidden] { display: none; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.page-message { border: 1px solid #74323a; background: #27141b; color: #ffabb1; padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; }
.stale-banner { display: flex; align-items: baseline; gap: 8px; border: 1px solid #76551a; background: #251c0e; color: #ffd98b; padding: 11px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 13px; }
.stale-banner[hidden] { display: none; }.stale-banner span { color: #d8bd84; }
.command-panel { margin-top: 18px; }.panel-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }.panel-title h2 { margin-bottom: 3px; font-size: 18px; }
.badge { padding: 5px 9px; border-radius: 99px; color: var(--brand); background: rgba(255,177,27,.12); font-size: 12px; font-weight: 800; }
.command-list { display: grid; gap: 8px; margin-top: 15px; }.command-row { display: grid; grid-template-columns: minmax(110px,1fr) minmax(130px,2fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #0d1421; font-size: 13px; }.command-row strong { display: block; }.command-row small,.muted { color: var(--muted); }.command-status { font-weight: 800; }.command-status.SUCCEEDED { color: var(--green); }.command-status.FAILED,.command-status.TIMEOUT { color: var(--red); }.command-status.RUNNING,.command-status.ACKNOWLEDGED,.command-status.SENT,.command-status.PENDING { color: var(--brand); }
.batch-row { border: 1px solid var(--line); border-radius: 10px; background: #0d1421; font-size: 13px; overflow: hidden; }
.batch-row > summary { position: relative; display: grid; grid-template-columns: minmax(130px,1fr) minmax(180px,2fr) auto; gap: 12px; align-items: center; padding: 12px; cursor: pointer; list-style: none; }.batch-row > summary::-webkit-details-marker { display: none; }.batch-row > summary::before { content: "▸"; color: var(--muted); grid-column: 1; position: absolute; transform: translateX(-2px); }.batch-row[open] > summary::before { content: "▾"; }.batch-row > summary > div:first-child { padding-left: 16px; }.batch-row strong { display: block; }.batch-row small { color: var(--muted); }
.batch-progress { min-width: 0; }.batch-detail { border-top: 1px solid var(--line); padding: 12px; background: rgba(9,13,22,.45); }.batch-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }.batch-count { padding: 4px 7px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 11px; }.batch-count.SUCCEEDED { color: var(--green); }.batch-count.FAILED,.batch-count.TIMEOUT { color: var(--red); }.batch-count.PENDING,.batch-count.SENT,.batch-count.ACKNOWLEDGED,.batch-count.RUNNING { color: var(--brand); }
.batch-machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }.batch-machines li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #0d1421; }.batch-machines .command-status { font-size: 11px; }
.command-status.PARTIAL { color: var(--violet); }.command-status.IN_PROGRESS { color: var(--brand); }
.progress { height: 5px; background: var(--line); border-radius: 9px; overflow: hidden; margin-top: 7px; }.progress i { display: block; height: 100%; width: var(--progress); background: var(--brand); transition: width .2s; }
.drawer, .modal { position: fixed; inset: 0; z-index: 50; visibility: hidden; pointer-events: none; }.drawer.is-open,.modal.is-open { visibility: visible; pointer-events: auto; }
.drawer-backdrop,.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); opacity: 0; transition: opacity .2s; }.is-open .drawer-backdrop,.is-open .modal-backdrop { opacity: 1; }
.drawer-sheet { position: absolute; top: 0; bottom: 0; right: 0; width: min(470px, 100%); background: var(--surface); border-left: 1px solid var(--line); padding: 22px; transform: translateX(100%); transition: transform .22s; overflow: auto; }.is-open .drawer-sheet { transform: translateX(0); }
.drawer header,.modal header { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 16px; }.drawer h2 { margin: 8px 0 2px; }.drawer header p { color: var(--muted); margin-bottom: 0; }
.icon-button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 24px; }
.state-pill { color: var(--state-color); border: 1px solid var(--state-color); border-radius: 20px; padding: 4px 8px; font-weight: 800; font-size: 11px; }
.drawer-content { padding-top: 18px; }.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.detail { background: #0d1421; padding: 12px; border-radius: 10px; }.detail span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }.action-section { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }.action-section h3 { font-size: 15px; }.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.quick-actions .button { min-height: 44px; }
.session-box { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: #0d1421; }.session-box p { color: var(--muted); font-size: 13px; }.session-box .button { width: 100%; }
.session-transition { display: grid; gap: 3px; margin-bottom: 12px; padding: 10px; border: 1px solid var(--brand); border-radius: 9px; background: rgba(245, 183, 65, .08); color: var(--brand); }.session-transition small { color: var(--muted); }.session-transition.status-SUCCEEDED { border-color: var(--green); color: var(--green); background: rgba(34, 197, 94, .08); }.session-transition.status-FAILED,.session-transition.status-TIMEOUT,.session-transition.status-MISSING { border-color: var(--red); color: var(--red); background: rgba(239, 68, 68, .08); }
.cashier-message { display: grid; gap: 8px; }.cashier-message textarea { width: 100%; resize: vertical; }.cashier-message .button { justify-self: stretch; }
.modal { display: grid; place-items: center; padding: 18px; }.modal-card { position: relative; width: min(850px, 100%); max-height: 92vh; overflow: auto; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; transform: translateY(12px); transition: transform .2s; }.is-open .modal-card { transform: translateY(0); }
.admin-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 0; }.admin-card { border: 1px solid var(--line); border-radius: 12px; padding: 15px; background: #0d1421; }.admin-card h3 { font-size: 16px; }.admin-card label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; margin-bottom: 12px; }.admin-card .button { width: 100%; }.form-status { min-height: 18px; margin: 9px 0 0; font-size: 12px; color: var(--muted); }
.admin-console { width: min(1320px, 100%); padding: 0; overflow: hidden; }.admin-console > header { padding: 20px 24px 14px; }.admin-tabs { display: flex; gap: 6px; padding: 0 24px 14px; border-bottom: 1px solid var(--line); }.admin-tab { border: 1px solid var(--line); border-radius: 9px; background: #0a111d; color: var(--muted); padding: 10px 15px; font-weight: 800; cursor: pointer; }.admin-tab.is-active { color: #101722; border-color: var(--brand); background: var(--brand); }.admin-panel { max-height: calc(92vh - 126px); overflow: auto; padding: 20px 24px 28px; }.admin-panel[hidden] { display: none; }.admin-sync-line { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: #09111d; color: var(--muted); margin-bottom: 14px; }.dashboard-settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.dashboard-setting-card { min-width: 0; }.dashboard-setting-card.span-all,.dashboard-save-bar.span-all { grid-column: 1 / -1; }.dashboard-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }.dashboard-field-grid .span-all { grid-column: 1 / -1; }.dashboard-check-grid { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 6px; }.dashboard-check-grid label,.inline-check { display: flex !important; grid-template-columns: none; align-items: center; gap: 7px !important; margin: 0 !important; }.dashboard-check-grid input,.inline-check input { width: auto; min-height: auto; }.dashboard-repeat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }.dashboard-repeat-grid.benefits { grid-template-columns: repeat(5,minmax(0,1fr)); }.dashboard-repeat-grid.actions { grid-template-columns: repeat(3,minmax(0,1fr)); }.dashboard-repeat-grid.support { grid-template-columns: repeat(5,minmax(0,1fr)); margin-top: 12px; }.dashboard-editor { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #09111d; }.dashboard-editor label { margin-bottom: 8px; }.dashboard-editor input,.dashboard-editor select,.dashboard-editor textarea { min-width: 0; width: 100%; }.dashboard-editor .inline-check { color: var(--text); }.dashboard-save-bar { position: sticky; bottom: -1px; z-index: 3; display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 12px; border: 1px solid var(--brand); border-radius: 11px; background: #101621; box-shadow: 0 -10px 24px #050a1299; }.dashboard-save-bar .form-status { margin: 0 auto 0 0; }.dashboard-admin-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }.dashboard-event-list { display: grid; gap: 8px; }.dashboard-event-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #09111d; }.dashboard-event-row small { display: block; color: var(--muted); margin-top: 3px; }.dashboard-event-row .button { width: auto; align-self: center; }.dashboard-store-card { display: grid; align-content: start; gap: 12px; }.dashboard-store-card .button { width: auto; justify-self: start; }
.event-type-badge { display: inline-block; margin-top: 6px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 10px; font-weight: 800; }.event-type-badge.DAILY_CHECKIN { border-color: #f5a524; color: #ffc353; background: #f5a52412; }.checkin-admin-settings { margin: 12px 0; padding: 12px; border: 1px solid #76551a; border-radius: 10px; background: #17130b; }.checkin-admin-settings[hidden] { display: none; }.checkin-admin-settings h4 { margin: 0; color: #ffc353; }.checkin-admin-settings .panel-title { align-items: end; }.checkin-admin-settings .panel-title .button { width: auto; }.checkin-streak-editors { display: grid; gap: 8px; margin: 10px 0; }.checkin-streak-editor { display: grid; grid-template-columns: .55fr .9fr .7fr 1.2fr auto; gap: 7px; align-items: end; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #09111d; }.checkin-streak-editor label { margin: 0; }.checkin-streak-editor .button { width: auto; min-height: 42px; }
.membership-mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.membership-mode-picker label { display: grid; grid-template-columns: auto 1fr; gap: 3px 9px; align-items: center; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #09111d; cursor: pointer; }.membership-mode-picker input { grid-row: 1 / 3; width: auto; min-height: auto; accent-color: var(--brand); }.membership-mode-picker span { color: var(--muted); font-size: 12px; }.membership-mode-picker label:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px #f5a52444; background: #171710; }.membership-heading-actions { display: flex; align-items: end; gap: 10px; }.membership-heading-actions label { margin: 0; }.dashboard-repeat-grid.packages { grid-template-columns: repeat(3,minmax(0,1fr)); }.dashboard-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }.dashboard-editor-head .button { width: auto; padding: 6px 9px; }.benefit-picker { display: grid; gap: 5px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #060d17; }.benefit-picker > span { color: var(--muted); font-size: 11px; text-transform: uppercase; font-weight: 800; }.benefit-picker label { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; }.benefit-picker input { width: auto; min-height: auto; }.membership-effect-note { min-height: 30px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.lucky-spin-stats { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 9px; margin-bottom: 14px; }.lucky-spin-stat { min-width: 0; padding: 12px; border: 1px solid #6c4b18; border-radius: 11px; background: linear-gradient(145deg,#17140d,#0a111d); }.lucky-spin-stat span,.lucky-spin-stat small { display: block; color: var(--muted); font-size: 11px; }.lucky-spin-stat strong { display: block; overflow: hidden; margin: 5px 0 2px; color: #ffc353; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }.lucky-spin-admin-form { display: grid; grid-template-columns: 1fr; gap: 14px; }.lucky-spin-admin-form .span-all { grid-column: 1 / -1; }.lucky-event-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.lucky-package-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }.lucky-reward-grid { display: grid; grid-template-columns: repeat(4,minmax(230px,1fr)); gap: 9px; }.lucky-editor { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #09111d; }.lucky-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; }.lucky-editor-head strong { color: #ffc353; }.lucky-editor-head .button { width: auto; padding: 6px 9px; }.lucky-editor label { margin-bottom: 8px; }.lucky-editor input,.lucky-editor select { width: 100%; min-width: 0; }.lucky-editor .inline-check input { width: auto; }.lucky-editor-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 7px; }.lucky-editor-fields .wide { grid-column: 1 / -1; }.lucky-reward-preview { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 8px; background: #07101c; border-left: 4px solid var(--reward-color,#f5a524); margin-bottom: 8px; }.lucky-reward-preview b { color: var(--reward-color,#ffc353); font-size: 19px; }
.member-service-order.is-priority { border-color: #f5a524; box-shadow: inset 3px 0 #f5a524; }.priority-badge { color: #f5a524; font-size: 10px; letter-spacing: .06em; }
.zone-table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; }th,td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--line); }th { color: var(--muted); font-size: 12px; }
.backup-hero { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px; border:1px solid #72501d; border-radius:13px; background:linear-gradient(125deg,#0b1a28,#0a111d 60%,#24180a); }.backup-hero h3 { margin:4px 0; font-size:24px; }.backup-hero p { margin:0; color:var(--muted); }.backup-kicker { color:#ffc353; font-size:10px; font-weight:900; letter-spacing:.14em; }.backup-hero-actions,.backup-actions { display:flex; gap:8px; align-items:center; }.backup-hero-actions .button,.backup-actions .button { width:auto; white-space:nowrap; }.backup-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:14px 0; }.backup-summary article { padding:14px; border:1px solid var(--line); border-radius:11px; background:#091522; }.backup-summary span { display:block; color:var(--muted); font-size:11px; }.backup-summary strong { display:block; margin-top:6px; overflow:hidden; color:var(--text); font-size:18px; text-overflow:ellipsis; white-space:nowrap; }.backup-summary .is-pass { border-color:#28643a; }.backup-summary .is-pass strong { color:var(--green); }.backup-summary .is-cloud { border-color:#176384; }.backup-summary .is-cloud strong { color:#49c8ff; }.backup-policy-card,.backup-list-card { margin-top:14px; }.backup-policy-grid { display:grid; grid-template-columns:.65fr .65fr 1.7fr 1fr; gap:9px; }.backup-policy-grid div { min-width:0; padding:11px; border:1px solid var(--line); border-radius:9px; background:#07101b; }.backup-policy-grid span,.backup-policy-grid strong { display:block; }.backup-policy-grid span { color:var(--muted); font-size:11px; }.backup-policy-grid strong { overflow:hidden; margin-top:5px; text-overflow:ellipsis; white-space:nowrap; }.backup-table td small { display:block; color:var(--muted); margin-top:3px; }.backup-table code { color:#8bd8ff; }.backup-ok { color:var(--green); font-weight:800; }.backup-fail { color:var(--red); font-weight:800; }.backup-actions .danger { color:#ff8a90; border-color:#743840; }.restore-warning { display:flex; gap:12px; align-items:flex-start; margin-top:14px; padding:12px; border:1px solid #72501d; border-radius:10px; background:#241b0d; color:#e4c890; }.restore-warning strong { color:#ffc353; white-space:nowrap; }.restore-warning span { color:#d1bd97; font-size:12px; line-height:1.5; }
.billing-card { width: min(1120px, 100%); }.billing-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(480px, 1.7fr); gap: 14px; padding: 18px 0; }.member-directory { min-width: 0; }.member-directory label { margin-bottom: 10px; }.member-directory input { width: 100%; }.member-state { display: inline-block; padding: 3px 7px; border: 1px solid currentColor; border-radius: 99px; font-size: 10px; font-weight: 800; }.member-state.ACTIVE { color: var(--green); }.member-state.INACTIVE { color: var(--muted); }.member-action { min-width: 88px; padding: 6px 8px; font-size: 11px; }.member-code { display: block; color: var(--brand); font-size: 11px; }.ledger-section { border-top: 1px solid var(--line); padding-top: 18px; }.ledger-section h3 { margin-bottom: 3px; }.ledger-amount { color: var(--green); font-weight: 800; white-space: nowrap; }.session-member-select { display: grid; gap: 6px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }.session-member-select select { width: 100%; }
.member-password-form { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(180px, 1fr) auto; gap: 9px; align-items: end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }.member-password-form h4,.member-password-form .form-status { grid-column: 1 / -1; margin: 0; }.member-password-form label { display: grid; gap: 5px; margin: 0; }.member-password-form select,.member-password-form input { width: 100%; }
.pos-card { width: min(1240px, 100%); }.shift-console { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, .55fr) minmax(150px, .55fr) auto; gap: 12px; align-items: end; padding: 18px 0; border-bottom: 1px solid var(--line); }.shift-console h3 { margin-bottom: 4px; }.shift-console p { margin-bottom: 0; }.shift-console label,.inline-fields label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }.shift-console .form-status { grid-column: 1 / -1; margin: 0; min-height: 0; }.pos-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 18px; }.pos-column { display: grid; gap: 14px; align-content: start; }.compact-form .button { width: auto; }.inline-fields { display: grid; grid-template-columns: .65fr 1.35fr .8fr; gap: 8px; }.product-inactive { opacity: .62; }.order-total { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); margin-top: 8px; }.order-total span { color: var(--muted); }.order-total strong { color: var(--green); }.quantity-input { width: 84px; min-height: 36px; }.pos-order-list { display: grid; gap: 8px; }.pos-order-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 11px; background: #0a111d; }.pos-order-row strong,.pos-order-row small { display: block; }.pos-order-row small { color: var(--muted); margin-top: 3px; }.pos-order-row .button { grid-row: 1 / span 2; grid-column: 2; }.pos-order-state { color: var(--brand); font-size: 11px; font-weight: 800; }.pos-order-state.COMPLETED { color: var(--green); }
.updates-card { width: min(1080px, 100%); }.update-create-form { display: grid; grid-template-columns: 1fr 1fr .8fr auto; gap: 10px; align-items: end; padding: 18px 0; }.update-create-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }.update-create-form .form-status { grid-column: 1 / -1; }.update-boundary { display: flex; gap: 9px; align-items: baseline; border: 1px solid #76551a; background: #251c0e; color: #ffd98b; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }.update-boundary span { color: #d8bd84; font-size: 12px; }.update-rollout-list { display: grid; gap: 10px; }.update-rollout-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 11px; background: #0d1421; padding: 13px; }.update-rollout-row.status-COMPLETED,.update-rollout-row.status-ROLLED_BACK { border-left-color: var(--green); }.update-rollout-row.status-PAUSED { border-left-color: var(--red); }.update-rollout-row strong,.update-rollout-row small { display: block; }.update-rollout-row small { color: var(--muted); margin-top: 4px; }.update-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.pilot-card { width: min(1180px, 100%); }.pilot-preflight { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: #0d1421; }.pilot-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }.pilot-check { padding: 4px 7px; border: 1px solid currentColor; border-radius: 99px; color: var(--muted); font-size: 10px; }.pilot-check.PASS { color: var(--green); }.pilot-check.FAIL { color: var(--red); }.pilot-create-form { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 10px; align-items: end; padding: 16px 0; }.pilot-create-form label,.pilot-action-inputs label,.pilot-incident-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }.pilot-create-form .form-status { grid-column: 1 / -1; }.pilot-run { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 12px; padding: 14px; background: #0d1421; }.pilot-run.status-COMPLETED { border-left-color: var(--green); }.pilot-run.status-ABORTED { border-left-color: var(--red); }.pilot-run h3 { margin: 3px 0; }.pilot-run p,.pilot-run small { display: block; color: var(--muted); margin: 3px 0; }.pilot-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }.pilot-action-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 0; }.pilot-incident-form { display: grid; grid-template-columns: .5fr .7fr .6fr 1.4fr auto; gap: 9px; align-items: end; padding: 16px 0; border-top: 1px solid var(--line); }.pilot-checkbox { display: flex !important; align-items: center; min-height: 42px; flex-direction: row; }.pilot-checkbox input { min-height: auto; }.pilot-incident-details,.pilot-incident-form .form-status { grid-column: 1 / -1; }.pilot-incident-list { display: grid; gap: 8px; }.pilot-incident { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; background: #0a111d; }.pilot-incident.severity-P0,.pilot-incident.severity-P1 { border-left-color: var(--red); }.pilot-incident strong,.pilot-incident span,.pilot-incident small { display: block; }.pilot-incident small { color: var(--muted); margin-top: 3px; }
.security-card { width: min(620px, 100%); }.security-login-form { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: end; padding: 18px 0; }.security-login-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }.security-login-form .form-status { grid-column: 1 / -1; }.security-readonly { opacity: .7; }
.security-expiry-warning { color: var(--danger); font-weight: 700; }
.member-service-orders { margin-top: 18px; }.member-service-order-list { display: grid; gap: 10px; margin-top: 12px; }.member-service-order { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #0a111d; }.member-service-order strong,.member-service-order small { display: block; }.member-service-order small { color: var(--muted); margin-top: 3px; }.member-service-order-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }.member-service-order.status-PENDING { border-left: 4px solid var(--brand); }.member-service-order.status-ACCEPTED { border-left: 4px solid var(--yellow); }.member-service-order.status-DELIVERED { border-left: 4px solid var(--green); }.member-service-order.status-CANCELLED { opacity: .68; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 8px; }.toast { width: min(360px, calc(100vw - 36px)); padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; background: #182234; box-shadow: 0 10px 30px rgba(0,0,0,.35); }.toast.error { border-left-color: var(--red); }.toast.success { border-left-color: var(--green); }
@media (max-width: 1180px) { .summary { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .modulebar { position: sticky; top: 72px; width: auto; height: 58px; padding: 7px 12px; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }.module-caption { display: none; }.module-current,.module-button,.system-menu > summary { flex: 0 0 auto; white-space: nowrap; }.system-menu { margin: 0; }.system-menu-panel { position: fixed; top: 132px; right: 12px; bottom: auto; left: auto; }.action-ribbon { top: 130px; margin-left: 0; }.shell { margin-left: 0; }.summary { grid-template-columns: 1fr 1fr; }.toolbar { align-items: stretch; flex-direction: column; }.filters { justify-content: stretch; }.filters label,.filters input,.filters select { width: 100%; }.admin-layout,.billing-layout,.pos-layout,.update-create-form,.pilot-create-form,.pilot-action-inputs,.pilot-incident-form,.security-login-form,.member-password-form { grid-template-columns: 1fr; }.member-password-form h4,.member-password-form .form-status { grid-column: auto; }.shift-console { grid-template-columns: 1fr 1fr; }.shift-console > div { grid-column: 1 / -1; }.command-row,.batch-row > summary,.update-rollout-row,.pilot-run,.pilot-incident { grid-template-columns: 1fr auto; }.command-progress,.batch-progress { grid-column: 1 / -1; }.batch-row > summary::before { display: none; }.batch-row > summary > div:first-child { padding-left: 0; }.update-create-form .form-status,.pilot-create-form .form-status,.pilot-incident-details,.pilot-incident-form .form-status,.security-login-form .form-status { grid-column: auto; } }
@media (max-width: 1000px) { .dashboard-settings-form,.dashboard-admin-split { grid-template-columns: 1fr; }.dashboard-setting-card.span-all,.dashboard-save-bar.span-all { grid-column: auto; }.dashboard-repeat-grid,.dashboard-repeat-grid.benefits,.dashboard-repeat-grid.actions,.dashboard-repeat-grid.support,.dashboard-repeat-grid.packages { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 1000px) { .backup-summary,.backup-policy-grid { grid-template-columns:1fr 1fr; }.backup-hero { align-items:stretch; flex-direction:column; } }
@media (max-width: 1180px) { .lucky-spin-stats { grid-template-columns: repeat(4,1fr); }.lucky-package-grid,.lucky-reward-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .admin-console > header,.admin-tabs,.admin-panel { padding-left: 14px; padding-right: 14px; }.dashboard-field-grid,.dashboard-repeat-grid,.dashboard-repeat-grid.benefits,.dashboard-repeat-grid.actions,.dashboard-repeat-grid.support,.dashboard-repeat-grid.packages,.membership-mode-picker { grid-template-columns: 1fr; }.dashboard-save-bar { align-items: stretch; flex-direction: column; }.dashboard-save-bar .button { width: 100%; }.membership-heading-actions { align-items: stretch; flex-direction: column; } }
@media (max-width: 620px) { .backup-summary,.backup-policy-grid { grid-template-columns:1fr; }.backup-hero-actions,.restore-warning { flex-direction:column; }.backup-hero-actions .button { width:100%; } }
@media (max-width: 620px) { .lucky-spin-stats,.lucky-event-grid,.lucky-package-grid,.lucky-reward-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .topbar { align-items: flex-start; }.topbar-actions { flex-wrap: wrap; justify-content: flex-end; }.topbar-actions .connection { width: 100%; justify-content: flex-end; }.brand small { display: none; }.selection-summary { min-width: 145px; }.button { padding: 9px 10px; }.shell { padding: 12px; }.zone-machines { grid-template-columns: repeat(2, minmax(0, 1fr)); }.machine-card,.machine-open { min-height: 125px; }.quick-actions { grid-template-columns: 1fr; }.stale-banner { align-items: flex-start; flex-direction: column; } }
@media (max-width: 800px) { .checkin-streak-editor { grid-template-columns: 1fr 1fr; }.checkin-streak-editor .button { grid-column: 1 / -1; } }
@media (max-width: 520px) { .checkin-streak-editor { grid-template-columns: 1fr; }.checkin-streak-editor .button { grid-column: auto; } }
.cashier-chat-card { width: min(1420px, calc(100vw - 36px)); height: min(860px, calc(100vh - 36px)); padding: 0; overflow: hidden; background: #061226; border-color: #1b4f83; display: grid; grid-template-rows: auto minmax(0,1fr); }
.cashier-chat-card > header { padding: 18px 22px; border-bottom: 1px solid #17395e; }
.cashier-chat-layout { display: grid; grid-template-columns: 300px minmax(480px, 1fr) 260px; height: auto; min-height: 0; }
.cashier-chat-conversations,.cashier-chat-online { padding: 14px; background: #081a34; min-height: 0; overflow: hidden; }.cashier-chat-conversations { border-right: 1px solid #17395e; }.cashier-chat-online { border-left: 1px solid #17395e; overflow-y: auto; }
.chat-scope-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 12px 0; }.chat-scope-tabs button { border: 1px solid #285682; background: #0c2342; color: #bcd2ef; border-radius: 7px; padding: 8px 4px; cursor: pointer; }.chat-scope-tabs button.is-active { color: #ffd05a; border-color: #ff8f0c; background: #5a2f0d; }
.cashier-chat-list { height: calc(100% - 102px); overflow-y: auto; display: grid; align-content: start; gap: 7px; }.cashier-chat-conversation { width: 100%; text-align: left; border: 1px solid #21466d; background: #0b2547; color: #fff; border-radius: 9px; padding: 11px; cursor: pointer; display: grid; gap: 5px; }.cashier-chat-conversation.is-active { border-color: #ff8f0c; background: #43270f; }.cashier-chat-conversation strong { display: flex; justify-content: space-between; gap: 8px; }.cashier-chat-conversation small { color: #9eb7d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.cashier-chat-conversation .chat-unread { background: #dc321e; border-radius: 999px; padding: 1px 7px; color: #fff; }
.cashier-chat-thread { display: grid; grid-template-rows: 64px minmax(0,1fr) 62px 36px 28px; min-height: 0; background: #030f20; }.cashier-chat-thread-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid #17395e; background: #081a34; }.cashier-chat-thread-header div { display: grid; gap: 3px; }.cashier-chat-thread-header small { color: #1ad2bb; }
.cashier-chat-messages { overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }.cashier-chat-message { max-width: 72%; border: 1px solid #294b77; background: #102544; border-radius: 15px; padding: 10px 13px; display: grid; gap: 5px; align-self: flex-start; }.cashier-chat-message.is-operator { align-self: flex-end; background: #123c82; border-color: #2863cd; }.cashier-chat-message small { color: #a9bfda; text-align: right; }.cashier-chat-message.is-deleted { color: #9aa9bb; font-style: italic; }
.cashier-chat-compose { display: grid; grid-template-columns: 1fr 92px; gap: 9px; padding: 10px 16px; border-top: 1px solid #17395e; background: #081a34; }.cashier-chat-compose input { background: #06162c; color: #fff; border: 1px solid #285682; border-radius: 8px; padding: 0 13px; }.cashier-chat-thread .form-status { margin: 0; padding: 2px 18px; }.cashier-chat-online h3 { color: #ffcc48; margin-top: 0; }#cashier-chat-online-list { display: grid; gap: 7px; }.cashier-chat-online-row { background: #0b2547; border: 1px solid #21466d; border-radius: 8px; padding: 9px; display: grid; gap: 3px; }.cashier-chat-online-row span { color: #1ad2bb; }.cashier-chat-system { margin-top: 18px; border: 1px solid #285682; border-radius: 10px; padding: 12px; display: grid; gap: 6px; color: #b7cae3; }.cashier-chat-system span:first-of-type { color: #1ad2bb; }
.cashier-chat-quick-replies { display:flex; gap:7px; align-items:center; overflow-x:auto; padding:4px 16px; background:#081a34; }.cashier-chat-quick-replies button { white-space:nowrap; border:1px solid #285682; border-radius:7px; background:#071d38; color:#cfe0f5; padding:5px 9px; cursor:pointer; }.cashier-chat-quick-replies button:hover { border-color:#ff8f0c; color:#ffd05a; }.cashier-chat-online-row[data-chat-member] { cursor:pointer; width:100%; text-align:left; color:#fff; }.cashier-chat-message.is-system { align-self:center; background:#56350e; border-color:#a86d18; }.cashier-chat-message small .is-read { color:#41a4ff; }
@media (max-width:1050px) { .cashier-chat-layout { grid-template-columns:250px minmax(400px,1fr); }.cashier-chat-online { display:none; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .001ms !important; } }