@import url("./public-site.css");

:root {
  --bg: #06030b;
  --panel: #100918;
  --panel-2: #190f25;
  --panel-3: #241433;
  --line: rgba(255,255,255,.09);
  --muted: #b8a8c8;
  --text: #fbf7ff;
  --amber: #fb923c;
  --amber-2: #f59e0b;
  --green: #22c55e;
  --red: #ef4444;
  --purple: #a855f7;
  --blue: #38bdf8;
  --radius: 14px;
  --shadow: 0 22px 70px rgba(0,0,0,.35);
  --topbar-bg: rgba(6,3,11,.9);
  --topbar-border: rgba(168,85,247,.16);
  --sidebar-bg: linear-gradient(180deg, #09040f, #0f0718);
  --sidebar-border: rgba(168,85,247,.16);
  --card-bg: linear-gradient(135deg, rgba(168,85,247,.08), rgba(255,255,255,.025));
  --card-border: rgba(168,85,247,.15);
  --field-bg: #0a0610;
  --field-border: rgba(168,85,247,.18);
  --field-text: var(--text);
  --nav-text: #cbd5e1;
  --nav-hover: rgba(255,255,255,.04);
  --nav-active-bg: linear-gradient(135deg, rgba(168,85,247,.28), rgba(251,146,60,.13));
  --nav-active-border: rgba(168,85,247,.42);
  --nav-active-text: #fff;
  --badge-bg: rgba(168,85,247,.22);
  --badge-text: #e9d5ff;
  --table-bg: rgba(16,9,24,.72);
  --table-head-bg: rgba(255,255,255,.03);
  --shell-bg: radial-gradient(circle at 78% -8%, rgba(168,85,247,.18), transparent 28%), radial-gradient(circle at 0% 88%, rgba(251,146,60,.08), transparent 32%), var(--bg);
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-theme="mix"] {
  color-scheme: dark;
}
:root[data-theme="dark"] {
  --bg: #06070d;
  --panel: #0d1320;
  --panel-2: #141b2b;
  --panel-3: #1d2637;
  --line: rgba(148,163,184,.16);
  --muted: #94a3b8;
  --text: #f8fafc;
  --topbar-bg: rgba(5,8,16,.94);
  --topbar-border: rgba(59,130,246,.16);
  --sidebar-bg: linear-gradient(180deg, #08111f, #0b1526);
  --sidebar-border: rgba(59,130,246,.12);
  --card-bg: linear-gradient(180deg, rgba(15,23,42,.92), rgba(9,14,24,.92));
  --card-border: rgba(148,163,184,.14);
  --field-bg: #09111d;
  --field-border: rgba(148,163,184,.2);
  --nav-text: #cbd5e1;
  --nav-hover: rgba(148,163,184,.08);
  --nav-active-bg: linear-gradient(135deg, rgba(30,64,175,.32), rgba(15,23,42,.85));
  --nav-active-border: rgba(96,165,250,.32);
  --nav-active-text: #eff6ff;
  --badge-bg: rgba(37,99,235,.18);
  --badge-text: #dbeafe;
  --table-bg: rgba(9,14,24,.84);
  --table-head-bg: rgba(148,163,184,.08);
  --shell-bg: radial-gradient(circle at 78% -8%, rgba(37,99,235,.14), transparent 28%), radial-gradient(circle at 0% 88%, rgba(56,189,248,.08), transparent 32%), var(--bg);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f3f6fb;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --panel-3: #eef2ff;
  --line: rgba(15,23,42,.12);
  --muted: #64748b;
  --text: #0f172a;
  --topbar-bg: rgba(255,255,255,.94);
  --topbar-border: rgba(15,23,42,.08);
  --sidebar-bg: linear-gradient(180deg, #f8fafc, #eef2ff);
  --sidebar-border: rgba(15,23,42,.08);
  --card-bg: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.98));
  --card-border: rgba(148,163,184,.18);
  --field-bg: #ffffff;
  --field-border: rgba(148,163,184,.35);
  --nav-text: #334155;
  --nav-hover: rgba(15,23,42,.05);
  --nav-active-bg: linear-gradient(135deg, rgba(251,191,36,.18), rgba(245,158,11,.08));
  --nav-active-border: rgba(245,158,11,.32);
  --nav-active-text: #111827;
  --badge-bg: rgba(245,158,11,.16);
  --badge-text: #92400e;
  --table-bg: rgba(255,255,255,.96);
  --table-head-bg: rgba(15,23,42,.04);
  --shell-bg: radial-gradient(circle at 84% -8%, rgba(251,191,36,.16), transparent 28%), radial-gradient(circle at 0% 88%, rgba(59,130,246,.08), transparent 32%), var(--bg);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; background: var(--shell-bg); color: var(--text); }
body { overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
.hidden { display: none !important; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(360px, 520px); padding-bottom: env(safe-area-inset-bottom, 0px); background:
  radial-gradient(circle at 18% 20%, rgba(168,85,247,.48), transparent 28%),
  radial-gradient(circle at 62% 12%, rgba(251,146,60,.24), transparent 23%),
  linear-gradient(135deg, #030108, #13071f 55%, #06030b); }
.login-hero { display: flex; flex-direction: column; justify-content: flex-end; padding: 64px; position: relative; overflow: hidden; }
.login-hero:before { content: ""; position: absolute; inset: 9% 14%; border: 1px solid rgba(255,255,255,.08); border-radius: 36px; transform: rotate(-7deg); background: linear-gradient(135deg, rgba(255,255,255,.07), transparent); }
.brand-mark { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--purple), var(--amber)); color: #08020d; font-weight: 900; letter-spacing: 0; }
.brand-logo { border-radius: 999px; overflow: hidden; padding: 2px; background: radial-gradient(circle at 35% 22%, rgba(125,211,252,.28), rgba(2,6,23,.98) 68%); border: 1px solid rgba(125,211,252,.42); box-shadow: 0 14px 36px rgba(14,165,233,.14); }
.brand-logo img, .logo-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.login-brand-logo { width: 76px; height: 76px; border-radius: 999px; }
.login-hero h1 { font-size: clamp(42px, 6vw, 82px); margin: 24px 0 12px; letter-spacing: 0; line-height: .95; max-width: 760px; }
.login-hero p { color: #d1d5db; font-size: 18px; max-width: 620px; }
.login-panel { display: flex; align-items: center; padding: 36px; background: color-mix(in srgb, var(--panel), transparent 12%); backdrop-filter: blur(18px); border-left: 1px solid var(--line); }
.login-card { width: 100%; background: color-mix(in srgb, var(--panel), transparent 2%); border: 1px solid var(--card-border); border-radius: 24px; box-shadow: var(--shadow); padding: 28px; }
.login-card h2 { margin: 0 0 8px; font-size: 28px; }
.muted { color: var(--muted); }
.user-grid { display: grid; gap: 12px; margin: 22px 0; }
.user-grid.compact-users { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 9px; margin: 18px 0; }
.user-tile { position: relative; text-align: left; color: var(--text); padding: 16px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); transition: .2s; }
.compact-users .user-tile { min-height: 44px; padding: 9px 11px; text-align: center; border-radius: 999px; background: linear-gradient(135deg, color-mix(in srgb, var(--panel-2), #020617 16%), color-mix(in srgb, var(--panel-3), #020617 10%)); }
.compact-users .user-tile strong { font-size: 14px; line-height: 1; }
.user-tile:hover { border-color: rgba(168,85,247,.62); transform: translateY(-1px); }
.user-select-check { position: absolute; top: -8px; right: -6px; display: none; min-width: 30px; min-height: 22px; padding: 0 7px; border-radius: 999px; place-items: center; color: #160b03; background: linear-gradient(135deg, #facc15, #fb923c); border: 2px solid color-mix(in srgb, var(--panel), white 8%); font-size: 10px; font-weight: 950; letter-spacing: .08em; box-shadow: 0 10px 22px rgba(251,146,60,.32); }
.user-tile.active { color: #0f172a; border-color: #f59e0b; background: linear-gradient(135deg, #fde68a, #f97316); box-shadow: 0 0 0 4px rgba(245,158,11,.22), 0 16px 38px rgba(245,158,11,.24); transform: translateY(-2px) scale(1.04); }
.user-tile.active .user-select-check { display: grid; }
.selected-login-user { margin: -6px 0 14px; padding: 10px 12px; border-radius: 14px; color: var(--text); background: linear-gradient(135deg, rgba(251,191,36,.2), rgba(34,211,238,.12)); border: 1px solid rgba(251,191,36,.36); font-weight: 850; text-align: center; }
:root[data-theme="light"] .compact-users .user-tile { background: #ffffff; border-color: rgba(15,23,42,.14); color: #0f172a; box-shadow: 0 8px 18px rgba(15,23,42,.06); }
:root[data-theme="light"] .user-tile.active { color: #111827; border-color: #b45309; background: linear-gradient(135deg, #fff7ed, #fbbf24); box-shadow: 0 0 0 4px rgba(180,83,9,.18), 0 18px 34px rgba(180,83,9,.18); }
:root[data-theme="dark"] .user-tile.active,
:root[data-theme="mix"] .user-tile.active { color: #09090b; }
.pin-display { display: flex; gap: 8px; margin: 18px 0; }
.pin-dot { height: 46px; flex: 1; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); display: grid; place-items: center; font-size: 22px; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pad button, .btn { min-height: 42px; border-radius: 12px; background: var(--panel-3); color: var(--text); border: 1px solid var(--line); transition: .18s; padding: 0 14px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; text-decoration: none; }
.btn:hover, .pad button:hover { transform: translateY(-1px); border-color: rgba(168,85,247,.5); }
.btn.primary { background: linear-gradient(135deg, var(--amber), var(--amber-2)); color: #160b03; border-color: transparent; font-weight: 800; }
.btn.success { background: rgba(34,197,94,.16); color: #86efac; border-color: rgba(34,197,94,.35); }
.btn.danger { background: rgba(239,68,68,.13); color: #fca5a5; border-color: rgba(239,68,68,.38); }
.btn.ghost { background: transparent; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field span, label { color: color-mix(in srgb, var(--text), white 14%); font-size: 13px; }
input, select, textarea { width: 100%; min-height: 42px; border-radius: 11px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--field-text); padding: 10px 12px; outline: none; overflow: hidden; }
textarea { min-height: 110px; resize: vertical; }
input[type="color"] { padding: 4px; overflow: hidden; }
input:focus, select:focus, textarea:focus { border-color: rgba(168,85,247,.7); box-shadow: 0 0 0 3px rgba(168,85,247,.15); }
.app-shell { min-height: 100vh; padding-top: calc(66px + env(safe-area-inset-top, 0px)); padding-left: 276px; }
.topbar { position: fixed; inset: 0 0 auto 0; height: calc(66px + env(safe-area-inset-top, 0px)); z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: env(safe-area-inset-top, 0px) calc(22px + env(safe-area-inset-right, 0px)) 0 calc(22px + env(safe-area-inset-left, 0px)); background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); backdrop-filter: blur(16px); }
.topbar-left { display: flex; gap: 12px; align-items: center; font-weight: 900; }
.topbar-right { display: flex; align-items: center; gap: 12px; min-width: 560px; }
.quick-clock { min-height: 42px; display: inline-flex; align-items: center; gap: 9px; padding: 4px 5px 4px 12px; border-radius: 999px; border: 1px solid rgba(168,85,247,.2); background: linear-gradient(135deg, rgba(168,85,247,.18), rgba(8,3,14,.82)); box-shadow: 0 10px 34px rgba(0,0,0,.26); color: #f3e8ff; white-space: nowrap; }
.quick-clock-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--red); box-shadow: 0 0 18px rgba(239,68,68,.72); }
.quick-clock.live .quick-clock-dot { background: var(--green); box-shadow: 0 0 18px rgba(34,197,94,.72); }
.quick-clock.break .quick-clock-dot { background: var(--amber); box-shadow: 0 0 18px rgba(251,146,60,.72); }
.quick-clock-btn { min-height: 32px; padding: 0 12px; border-radius: 999px; background: linear-gradient(135deg, var(--amber), var(--amber-2)); color: #160b03; font-weight: 850; border: 1px solid transparent; }
.quick-clock-btn:hover { transform: translateY(-1px); }
.quick-clock-btn.danger { background: rgba(239,68,68,.14); color: #fecaca; border-color: rgba(239,68,68,.35); }
.search { position: relative; flex: 1; }
.search input { padding-left: 36px; }
.search:before { content: "⌕"; position: absolute; left: 13px; top: 9px; color: var(--muted); }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--purple), var(--amber)); color: #08020d; font-weight: 900; }
.logo-avatar { padding: 2px; overflow: hidden; background: #020617; border: 1px solid rgba(125,211,252,.38); }
.sidebar { position: fixed; top: 66px; bottom: 0; left: 0; width: 276px; overflow-y: auto; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); padding: 14px; scroll-behavior: auto; z-index: 10; }
.section-head { width: 100%; display: flex; justify-content: space-between; align-items: center; color: color-mix(in srgb, var(--text), white 10%); background: transparent; padding: 12px 8px 8px; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
.section-arrow { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; color: var(--badge-text); background: color-mix(in srgb, var(--badge-bg), transparent 10%); font-size: 15px; line-height: 1; }
.nav-items { display: grid; gap: 4px; margin-bottom: 8px; }
.nav-item { width: 100%; min-height: 40px; justify-content: flex-start; border-radius: 10px; background: transparent; color: var(--nav-text); border: 1px solid transparent; padding: 0 10px; }
.nav-item:hover { background: var(--nav-hover); }
.nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-text); border-color: var(--nav-active-border); }
.badge { margin-left: auto; min-width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--badge-bg); color: var(--badge-text); font-size: 12px; }
.page { max-width: 1260px; margin: 0 auto; padding: 24px 24px calc(24px + env(safe-area-inset-bottom, 0px)); animation: fade .16s ease; }
@keyframes fade { from { opacity: .45; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-title h1 { margin: 0; font-size: 28px; letter-spacing: 0; }
.page-title p { margin: 6px 0 0; color: var(--muted); }
.hero-card, .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: 0 16px 48px rgba(0,0,0,.28); }
.hero-card { padding: 24px; display: grid; grid-template-columns: 1.4fr .8fr; gap: 20px; align-items: center; overflow: hidden; }
.hero-card h2 { margin: 0 0 8px; font-size: 30px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.dashboard-clock { margin-bottom: 16px; min-height: 116px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 20px; border: 1px solid rgba(168,85,247,.22); background: radial-gradient(circle at 16% 0%, rgba(168,85,247,.24), transparent 34%), linear-gradient(135deg, rgba(25,15,37,.94), rgba(8,3,14,.9)); box-shadow: 0 20px 58px rgba(0,0,0,.32); overflow: hidden; }
.dashboard-clock-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dashboard-clock-main .quick-clock-dot { width: 13px; height: 13px; flex: 0 0 auto; }
.dashboard-clock-main p { margin: 0 0 4px; }
.dashboard-clock-main h2 { margin: 0; font-size: 30px; }
.dashboard-clock-time { display: grid; justify-items: end; gap: 2px; padding: 0 16px; border-left: 1px solid rgba(255,255,255,.08); border-right: 1px solid rgba(255,255,255,.08); }
.dashboard-clock-time strong { font-size: 30px; line-height: 1; }
.dashboard-clock-time span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.dashboard-clock-actions { justify-content: flex-end; }
.dashboard-clock.live { border-color: rgba(34,197,94,.22); }
.dashboard-clock.break { border-color: rgba(251,146,60,.24); }
.card { padding: 18px; min-width: 0; }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric { display: grid; gap: 6px; }
.metric strong { font-size: 28px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 14px 0; }
.toolbar-left, .toolbar-right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.table-wrap { overflow-x: auto; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--table-bg); }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; background: var(--table-head-bg); }
td { color: color-mix(in srgb, var(--text), white 10%); }
tr:last-child td { border-bottom: 0; }
.status { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); }
.status.green { color: #86efac; background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.26); }
.status.red { color: #fca5a5; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.26); }
.status.amber { color: #fcd34d; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.26); }
.swatch { width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(255,255,255,.2); display: inline-block; vertical-align: middle; }
.breadcrumb { display: flex; gap: 8px; color: var(--muted); margin-bottom: 14px; font-size: 13px; }
.breadcrumb button { color: #fcd34d; background: transparent; padding: 0; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.tab { min-height: 38px; padding: 0 14px; border-radius: 10px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.tab.active { background: rgba(168,85,247,.22); border-color: rgba(168,85,247,.5); color: #f3e8ff; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.till { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 18px; align-items: start; }
.pos-shell { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom, 0px); background: linear-gradient(180deg, #eef2ff 0, #f8fafc 18%, #f8fafc 100%); color: #111827; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.pos-topbar { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: calc(10px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 10px calc(16px + env(safe-area-inset-left, 0px)); background: linear-gradient(135deg, #0f172a, #1e1b4b 58%, #111827); color: #fff; box-shadow: 0 18px 36px rgba(15,23,42,.2); }
.pos-brand { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.pos-brand .brand-mark { width: 32px; height: 32px; border-radius: 999px; font-size: 18px; }
.pos-brand strong { font-size: 18px; letter-spacing: 0; }
.pos-top-actions { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pos-chip, .pos-tab { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); color: #f8fafc; font-weight: 850; text-transform: uppercase; backdrop-filter: blur(12px); transition: transform .16s, border-color .16s, background .16s, box-shadow .16s; }
.pos-chip:hover, .pos-tab:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.28); box-shadow: 0 12px 22px rgba(15,23,42,.18); }
.pos-till-tab { min-width: 220px; min-height: 44px; position: relative; display: grid; justify-items: start; gap: 2px; padding: 9px 16px; border-radius: 18px; border: 1px solid rgba(147,197,253,.35); background: linear-gradient(135deg, rgba(37,99,235,.32), rgba(76,29,149,.42)); color: #fff; text-align: left; overflow: hidden; box-shadow: 0 14px 30px rgba(37,99,235,.18); transition: transform .16s, box-shadow .16s, border-color .16s, background .16s; }
.pos-till-tab:hover { transform: translateY(-1px); border-color: rgba(191,219,254,.7); box-shadow: 0 18px 38px rgba(37,99,235,.24); }
.pos-till-tab:before { content: ""; position: absolute; inset: -40% auto auto 68%; width: 118px; height: 118px; border-radius: 999px; background: rgba(255,255,255,.14); filter: blur(4px); }
.pos-till-tab span, .pos-till-tab strong, .pos-till-tab small { position: relative; }
.pos-till-tab span { font-size: 10px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; color: #bfdbfe; }
.pos-till-tab strong { font-size: 15px; line-height: 1.1; }
.pos-till-tab small { color: rgba(226,232,240,.92); font-size: 11px; line-height: 1.25; }
.pos-till-tab.is-fullscreen { border-color: rgba(125,211,252,.68); background: linear-gradient(135deg, rgba(14,165,233,.62), rgba(79,70,229,.72)); box-shadow: 0 18px 40px rgba(56,189,248,.24); }
.pos-till-tab.is-fullscreen span { color: #e0f2fe; }
.pos-chip.exit { background: rgba(239,68,68,.22); border-color: rgba(248,113,113,.28); }
.pos-chip.online { background: rgba(34,197,94,.22); border-color: rgba(134,239,172,.24); }
.pos-chip.online span { width: 8px; height: 8px; border-radius: 999px; background: #dcfce7; }
.pos-chip.offline { background: rgba(239,68,68,.22); border-color: rgba(252,165,165,.34); }
.pos-chip.offline span { width: 8px; height: 8px; border-radius: 999px; background: #fecaca; }
.pos-chip.queued { background: rgba(245,158,11,.22); border-color: rgba(253,186,116,.34); }
.pos-chip.queued span { width: 8px; height: 8px; border-radius: 999px; background: #fde68a; }
.pos-chip.syncing { background: rgba(59,130,246,.24); border-color: rgba(147,197,253,.34); }
.pos-chip.syncing span { width: 8px; height: 8px; border-radius: 999px; background: #dbeafe; animation: tillSyncPulse 1.1s ease-in-out infinite; }
.pos-chip.cached { background: rgba(148,163,184,.24); border-color: rgba(203,213,225,.26); }
.pos-chip.cached span { width: 8px; height: 8px; border-radius: 999px; background: #e2e8f0; }
.pos-chip.user { text-transform: none; font-weight: 700; }
.pos-chip.special { color: #fff7ed; background: linear-gradient(135deg, #6d28d9, #9f1239); border-color: rgba(251,146,60,.28); box-shadow: 0 0 0 1px rgba(251,146,60,.08), 0 10px 28px rgba(109,40,217,.18); }
.pos-chip.special.active { color: #160b03; background: linear-gradient(135deg, #f59e0b, #fb923c); border-color: transparent; box-shadow: 0 10px 28px rgba(251,146,60,.28); }
.pos-chip.special.muted { color: #cbd5e1; background: #334155; box-shadow: none; }
.pos-chip.special.locked { opacity: .82; }
.pos-tab { min-width: 74px; background: rgba(30,41,59,.82); }
.pos-tab.active { background: linear-gradient(135deg, #2563eb, #3b82f6); border-color: rgba(147,197,253,.55); box-shadow: 0 14px 30px rgba(37,99,235,.22); }
.pos-main { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.pos-workspace { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 16px; gap: 16px; background: linear-gradient(180deg, #f8fafc, #f8fafc 72%, #fefbf3); }
.pos-special-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; color: #111827; background: linear-gradient(135deg, #fbbf24, #fb923c); box-shadow: 0 14px 28px rgba(251,146,60,.24); }
.pos-special-banner strong { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.pos-special-banner span { font-weight: 750; }
.pos-workspace .pos-content:first-child { grid-row: 1 / -1; }
.pos-search-row input { min-height: 42px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; color: #111827; }
.pos-content { min-height: 0; overflow: auto; padding-right: 2px; }
.pos-category-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; align-content: start; }
.pos-category-tile { min-height: 82px; border-radius: 8px; padding: 12px; display: grid; place-items: center; gap: 4px; color: #fff; text-align: center; border: 0; background: linear-gradient(135deg, var(--tile), color-mix(in srgb, var(--tile), #111827 18%)); box-shadow: 0 8px 20px rgba(15,23,42,.12); transition: transform .16s, filter .16s; }
.pos-category-tile:hover { transform: translateY(-2px); filter: brightness(1.05); }
.pos-category-tile strong { text-transform: uppercase; font-size: 14px; }
.pos-category-tile span { color: rgba(255,255,255,.78); font-size: 12px; }
.pos-category-tile.deals strong { font-size: 16px; }
.pos-breadcrumb { min-height: 44px; margin: -2px -2px 16px; display: flex; align-items: center; gap: 9px; padding: 0 6px 14px; color: #111827; font-size: 14px; text-transform: uppercase; border-bottom: 1px solid #e2e8f0; }
.pos-breadcrumb button { color: #2563eb; background: transparent; font-weight: 850; padding: 0; min-height: auto; }
.pos-breadcrumb span { color: #94a3b8; }
.pos-breadcrumb strong { color: #111827; font-weight: 900; }
.pos-search-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 16px; padding: 0 4px; color: #475569; }
.pos-search-results-head strong { color: #111827; font-size: 18px; }
.pos-search-results-head span { font-size: 13px; font-weight: 800; }
.pos-product-grid { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 12px; align-content: start; }
.product-btn.pos-product-btn { min-height: 82px; align-items: center; justify-content: center; text-align: center; gap: 8px; color: #020617; background: #fff; border: 1px solid #dfe3e8; border-radius: 8px; box-shadow: 0 1px 3px rgba(15,23,42,.14); transition: border-color .15s, box-shadow .15s, background .15s, transform .15s; }
.product-btn.pos-product-btn:hover { border-color: #3b82f6; background: #eff6ff; box-shadow: 0 2px 8px rgba(59,130,246,.16); transform: translateY(-1px); }
.product-btn.pos-product-btn small { color: #475569; }
.product-btn.pos-deal-btn { min-height: 140px; align-items: flex-start; justify-content: space-between; text-align: left; color: #fff; background: linear-gradient(135deg, #7c3aed, #a100d8); border-color: rgba(124,58,237,.42); box-shadow: 0 8px 20px rgba(124,58,237,.22); }
.product-btn.pos-deal-btn:hover { background: linear-gradient(135deg, #7c3aed, #a100d8); border-color: rgba(168,85,247,.75); }
.product-btn.pos-deal-btn small { color: rgba(255,255,255,.86); }
.pos-missing { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid #fb923c; background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #9a3412; font-weight: 900; box-shadow: 0 10px 22px rgba(251,146,60,.14); }
.pos-bill { min-width: 0; display: grid; grid-template-rows: 40px minmax(0, 1fr) auto auto; background: #f1f5f9; border-left: 1px solid #cbd5e1; }
.pos-bill-head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: #1f2937; color: #fff; text-transform: uppercase; }
.pos-bill-head small { color: #cbd5e1; text-transform: none; }
.pos-bill-body { min-height: 0; overflow: auto; padding: 12px; }
.pos-empty-bill { height: 100%; min-height: 340px; display: grid; place-items: center; align-content: center; gap: 8px; color: #64748b; text-align: center; }
.pos-empty-bill div { color: #cbd5e1; font-size: 52px; line-height: 1; }
.pos-empty-bill strong { color: #475569; }
.pos-empty-bill span { font-size: 13px; }
.pos-bill-row { display: grid; grid-template-columns: 1fr auto 30px; gap: 8px; align-items: center; padding: 10px; margin-bottom: 8px; border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; }
.pos-bill-row small { display: block; color: #64748b; margin-top: 3px; }
.pos-bill-row button { width: 28px; height: 28px; border-radius: 6px; background: #fee2e2; color: #b91c1c; font-weight: 900; }
.bill-table-head { display: grid; grid-template-columns: 1fr 62px 62px; gap: 8px; padding: 0 4px 8px; color: #94a3b8; font-size: 12px; font-weight: 800; }
.pos-bill-row.rich { grid-template-columns: minmax(0, 1fr) 58px 66px; align-items: start; }
.pos-bill-row.rich strong { color: #0f172a; }
.bill-row-tools { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.bill-row-tools button { background: #e2e8f0; color: #0f172a; }
.bill-row-tools .danger-mini { background: #fee2e2; color: #dc2626; }
.till-sync-banner { margin: 0 12px; padding: 12px 14px; border-radius: 16px; font-size: 13px; font-weight: 800; line-height: 1.45; border: 1px solid transparent; }
.till-sync-banner.info { color: #1d4ed8; background: #dbeafe; border-color: #93c5fd; }
.till-sync-banner.success { color: #166534; background: #dcfce7; border-color: #86efac; }
.till-sync-banner.error { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }
.till-sync-banner.muted { color: #475569; background: #e2e8f0; border-color: #cbd5e1; }
.pos-bill-controls { display: grid; gap: 8px; padding: 12px; border-top: 1px solid #e2e8f0; background: #fff; }
.pos-bill-controls select, .pos-bill-controls input { background: #fff; color: #111827; border-color: #cbd5e1; }
textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--text); padding: 12px; font: inherit; }
.pos-bill-controls .total-row { color: #334155; margin: 0; }
.pos-bill-controls .total-row.big { color: #111827; }
.bill-summary { display: grid; gap: 5px; color: #334155; }
.bill-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bill-summary strong { color: #0f172a; text-align: right; }
.bill-note { display: block !important; }
.bill-note strong { display: block; margin-top: 4px; text-align: left; font-size: 12px; color: #64748b; }
.bill-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pos-paybar { display: grid; grid-template-columns: minmax(140px, .85fr) minmax(0, 1.25fr); gap: 10px; padding: 10px; border-top: 1px solid #dbe3ee; background: linear-gradient(180deg, #f8fafc, #eef2f7); }
.pos-delete, .pos-pay { position: relative; min-height: 86px; padding: 14px 16px; display: grid; align-content: center; justify-items: start; gap: 4px; color: #fff; text-align: left; font-weight: 950; border-radius: 20px; overflow: hidden; transition: transform .18s, box-shadow .18s, filter .18s; }
.pos-delete:hover, .pos-pay:hover { transform: translateY(-1px); filter: brightness(1.01); }
.pos-delete span, .pos-pay span { position: relative; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.pos-delete small, .pos-pay small { position: relative; font-size: 12px; line-height: 1.35; text-transform: none; }
.pos-pay strong { position: relative; font-size: 28px; line-height: 1; }
.pos-delete { background: linear-gradient(135deg, #991b1b, #ef4444); box-shadow: 0 18px 36px rgba(239,68,68,.18); }
.pos-delete small { color: rgba(254,226,226,.88); }
.pos-pay { background: linear-gradient(135deg, #0f172a, #1d4ed8 45%, #38bdf8 100%); box-shadow: 0 20px 40px rgba(37,99,235,.24); }
.pos-pay:before { content: ""; position: absolute; inset: -30% auto auto 58%; width: 150px; height: 150px; border-radius: 999px; background: rgba(255,255,255,.22); filter: blur(10px); }
.pos-pay small { color: rgba(219,234,254,.94); }
.pos-pay.ready { animation: payPulse 2.8s ease-in-out infinite; }
.pos-pay:disabled { background: linear-gradient(135deg, #475569, #64748b); box-shadow: none; }
.pos-pay:disabled:before { display: none; }
@keyframes payPulse {
  0%, 100% { box-shadow: 0 18px 36px rgba(37,99,235,.2); }
  50% { box-shadow: 0 24px 54px rgba(37,99,235,.32), 0 0 0 5px rgba(96,165,250,.12); }
}
@keyframes tillSyncPulse {
  0%, 100% { opacity: .65; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
.missing-note-dock { display: grid; gap: 14px; padding: 16px; border-radius: 24px; border: 1px solid #fde68a; background: radial-gradient(circle at 100% 0, rgba(251,191,36,.14), transparent 28%), linear-gradient(135deg, #fffdf5, #fff7ed 45%, #fff); box-shadow: 0 18px 42px rgba(245,158,11,.08); }
.missing-note-dock.open { border-color: #fb923c; box-shadow: 0 24px 50px rgba(251,146,60,.12); }
.missing-note-bar, .missing-note-trigger { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; }
.missing-note-trigger { width: 100%; padding: 16px; border-radius: 20px; border: 1px solid #fed7aa; background: rgba(255,255,255,.86); text-align: left; box-shadow: 0 12px 28px rgba(15,23,42,.06); transition: transform .16s, box-shadow .16s, border-color .16s, background .16s; }
.missing-note-trigger:hover { transform: translateY(-1px); border-color: #fb923c; background: #fffaf4; box-shadow: 0 18px 34px rgba(251,146,60,.14); }
.missing-note-bar.open { padding: 4px 2px 0; }
.missing-note-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, #fb923c, #f59e0b); color: #fff; font-size: 24px; font-weight: 1000; box-shadow: 0 12px 24px rgba(245,158,11,.2); }
.missing-note-copy { display: grid; gap: 4px; min-width: 0; }
.missing-note-kicker { display: inline-flex; align-items: center; width: fit-content; min-height: 24px; padding: 0 9px; border-radius: 999px; color: #9a3412; background: rgba(251,146,60,.14); border: 1px solid rgba(251,146,60,.25); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.missing-note-copy strong { color: #111827; font-size: 19px; line-height: 1.1; }
.missing-note-copy small { color: #64748b; line-height: 1.45; }
.missing-note-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.missing-note-meta span { min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid #fed7aa; background: rgba(255,255,255,.88); color: #9a3412; font-size: 12px; font-weight: 900; }
.missing-note-actions { display: flex; justify-content: flex-end; }
.missing-note-cta { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border-radius: 999px; color: #9a3412; background: linear-gradient(135deg, #fff7ed, #ffedd5); border: 1px solid #fb923c; font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 10px 22px rgba(251,146,60,.12); }
.missing-note-flash { padding: 13px 14px; border-radius: 16px; font-size: 13px; font-weight: 850; line-height: 1.4; }
.missing-note-flash.success { color: #166534; background: #dcfce7; border: 1px solid #86efac; }
.missing-note-flash.error { color: #991b1b; background: #fee2e2; border: 1px solid #fca5a5; }
.missing-note-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .95fr); gap: 14px; align-items: start; }
.missing-note-form .field span { color: #6b7280; font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .05em; }
.missing-note-form input, .missing-note-form textarea { background: #fff; color: #111827; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.missing-note-guidance { display: grid; gap: 10px; padding: 16px; border-radius: 18px; border: 1px solid #e2e8f0; background: rgba(255,255,255,.9); box-shadow: 0 12px 28px rgba(15,23,42,.05); }
.missing-note-guidance strong { color: #111827; font-size: 14px; }
.missing-note-tip { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
.missing-note-tip:first-of-type { padding-top: 0; border-top: 0; }
.missing-note-tip span { color: #334155; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.missing-note-tip small { color: #64748b; line-height: 1.35; }
.missing-note-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; }
.missing-note-feed { display: grid; gap: 12px; }
.missing-note-feed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.missing-note-feed-head strong { color: #111827; font-size: 14px; }
.missing-note-feed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.missing-note-card { display: grid; gap: 8px; padding: 14px; border-radius: 18px; border: 1px solid #e2e8f0; background: rgba(255,255,255,.92); box-shadow: 0 12px 26px rgba(15,23,42,.05); }
.missing-note-card strong { color: #111827; font-size: 15px; line-height: 1.2; }
.missing-note-card p { margin: 0; color: #475569; font-size: 13px; line-height: 1.45; }
.missing-note-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #94a3b8; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.missing-note-empty { padding: 14px 16px; border-radius: 18px; border: 1px dashed #fdba74; background: rgba(255,255,255,.72); color: #64748b; text-align: center; }
.modal.modal-till-flow { width: min(560px, calc(100vw - 28px)); padding: 0; overflow: hidden; background: #fff; color: #0f172a; border: 1px solid rgba(15,23,42,.12); border-radius: 22px; box-shadow: 0 28px 90px rgba(2,6,23,.42); }
.till-flow { background: linear-gradient(180deg, #fff7ed 0, #fff 148px, #f8fafc 100%); color: #0f172a; }
.flow-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 24px 18px; border-bottom: 1px solid #fed7aa; }
.flow-header h2 { margin: 3px 0 5px; color: #0f172a; font-size: 24px; line-height: 1.1; letter-spacing: 0; }
.flow-header p { margin: 0; color: #64748b; line-height: 1.4; }
.flow-kicker { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; color: #9a3412; background: rgba(251,146,60,.14); border: 1px solid rgba(251,146,60,.24); font-size: 11px; font-weight: 950; text-transform: uppercase; }
.flow-count { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: #1f2937; background: #fff; border: 1px solid #fed7aa; box-shadow: 0 6px 18px rgba(251,146,60,.13); font-size: 12px; font-weight: 900; }
.flow-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 18px; background: rgba(255,255,255,.82); border-bottom: 1px solid #e2e8f0; }
.flow-steps span { min-height: 34px; display: grid; place-items: center; border-radius: 999px; color: #64748b; background: #f1f5f9; border: 1px solid transparent; font-size: 13px; font-weight: 950; }
.flow-steps span.active { color: #9a3412; background: #ffedd5; border-color: #fdba74; box-shadow: inset 0 0 0 1px rgba(251,146,60,.12); }
.flow-steps span.done { color: #166534; background: #dcfce7; border-color: #86efac; }
.flow-body { display: grid; gap: 14px; padding: 20px 24px 8px; }
.flow-hint { margin: 0; color: #64748b; font-size: 14px; }
.flow-options { display: grid; gap: 12px; }
.flow-option { width: 100%; min-height: 66px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-radius: 15px; border: 1px solid #dbe3ee; background: #fff; color: #172033; font-weight: 850; box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: transform .16s, border-color .16s, box-shadow .16s, background .16s; }
.flow-option:hover { transform: translateY(-1px); border-color: #fb923c; background: #fffaf4; box-shadow: 0 12px 28px rgba(251,146,60,.14); }
.flow-option.selected, .flow-option:has(input:checked) { border-color: #f97316; background: linear-gradient(135deg, #fff7ed, #fff); box-shadow: 0 0 0 3px rgba(251,146,60,.16), 0 12px 28px rgba(251,146,60,.13); }
.flow-option-copy { min-width: 0; display: grid; gap: 3px; text-align: left; }
.flow-option-copy strong { color: #0f172a; font-size: 16px; }
.flow-option-copy small { color: #64748b; font-size: 12px; font-weight: 750; }
.flow-option-price { flex: 0 0 auto; min-width: 86px; text-align: right; color: #7c2d12; font-size: 18px; font-weight: 950; }
.checkbox-option { justify-content: flex-start; }
.checkbox-option input { flex: 0 0 20px; width: 20px; min-width: 20px; height: 20px; min-height: 20px; margin: 0; padding: 0; appearance: none; border-radius: 999px; border: 2px solid #cbd5e1; background: #fff; box-shadow: inset 0 0 0 4px #fff; }
.checkbox-option input:checked { border-color: #f97316; background: #f97316; }
.checkbox-option .flow-option-price { margin-left: auto; }
.flow-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 10px; padding: 16px 24px 22px; border-top: 1px solid #e2e8f0; background: #fff; }
.modal-till-flow .btn { min-height: 50px; border-radius: 14px; background: #fff; color: #334155; border-color: #cbd5e1; font-weight: 950; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.modal-till-flow .btn:hover { border-color: #fb923c; box-shadow: 0 10px 24px rgba(15,23,42,.11); }
.modal-till-flow .btn.primary { color: #160b03; background: linear-gradient(135deg, #fb923c, #f59e0b); border-color: transparent; box-shadow: 0 14px 30px rgba(245,158,11,.28); }
.pos-subtabs { display: grid; grid-template-columns: 1fr 1fr; margin: -16px -2px 20px; border-bottom: 1px solid #e2e8f0; }
.pos-subtabs button { min-height: 44px; background: transparent; color: #64748b; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 900; text-transform: uppercase; }
.pos-subtabs button.active { color: #2563eb; border-bottom-color: #2563eb; }
.pos-large-empty { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 8px; color: #94a3b8; }
.pos-order-list, .pos-tabs-list { display: grid; gap: 14px; }
.pos-order-card, .pos-tab-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #0f172a; box-shadow: 0 1px 4px rgba(15,23,42,.08); }
.pos-order-card span, .pos-tab-card span { display: block; margin-top: 4px; color: #64748b; font-size: 12px; }
.pos-tab-card { grid-template-columns: 1fr; }
.pos-tab-card-head { display: flex; justify-content: space-between; gap: 12px; }
.pos-tab-items { display: grid; gap: 5px; padding: 10px; border-radius: 8px; background: #f8fafc; }
.receipt-preview { display: grid; gap: 8px; color: #0f172a; }
.receipt-line { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e2e8f0; padding: 6px 0; }
.receipt-line.total { font-size: 20px; font-weight: 900; }
.hidden { display: none !important; }
.till-register-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px; border-radius: 999px; border: 1px solid rgba(168,85,247,.25); background: rgba(168,85,247,.13); }
.till-register-pill span { font-weight: 900; }
.till-register-pill small { color: var(--muted); }
.till-register-pill .btn { min-height: 30px; border-radius: 999px; }
.register-select-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px; background: radial-gradient(circle at top, rgba(168,85,247,.18), transparent 32%), radial-gradient(circle at bottom right, rgba(251,146,60,.14), transparent 28%), linear-gradient(180deg, #09090f 0%, #0b1020 100%); }
.register-select-stage { width: min(1120px, 100%); display: grid; gap: 28px; padding: clamp(28px, 4vw, 44px); border-radius: 32px; border: 1px solid rgba(168,85,247,.16); background: linear-gradient(180deg, rgba(12,16,30,.92), rgba(8,11,21,.96)); box-shadow: 0 28px 90px rgba(0,0,0,.34); }
.register-select-hero { text-align: center; max-width: 680px; margin: 0 auto; }
.register-select-hero h1 { margin: 12px 0 10px; font-size: clamp(34px, 5vw, 56px); letter-spacing: 0; }
.register-select-hero p { margin: 0 auto 8px; color: var(--muted); line-height: 1.5; }
.register-select-mark { margin: 0 auto 16px; box-shadow: 0 0 38px rgba(168,85,247,.42); }
.register-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.register-card { min-height: 176px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 20px; border-radius: 20px; color: var(--text); background: radial-gradient(circle at 50% 0%, rgba(168,85,247,.18), transparent 58%), linear-gradient(135deg, rgba(25,15,37,.96), rgba(10,6,16,.96)); border: 1px solid rgba(168,85,247,.22); box-shadow: 0 18px 50px rgba(0,0,0,.26); transition: transform .18s, border-color .18s, background .18s; }
.register-card:hover { transform: translateY(-3px); border-color: rgba(251,146,60,.55); background: radial-gradient(circle at 50% 0%, rgba(251,146,60,.16), transparent 58%), linear-gradient(135deg, rgba(36,20,51,.98), rgba(10,6,16,.98)); }
.register-card strong { font-size: 22px; }
.register-card span:not(.register-icon), .register-card small { color: var(--muted); }
.register-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: #f3e8ff; background: rgba(168,85,247,.18); border: 1px solid rgba(168,85,247,.28); font-size: 22px; }
.register-select-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.register-select-actions .btn { min-width: 180px; min-height: 48px; border-radius: 16px; }
.register-select-empty { min-height: 200px; }
.till-auth-shell { background: radial-gradient(circle at top, rgba(37,99,235,.18), transparent 30%), radial-gradient(circle at bottom right, rgba(251,146,60,.14), transparent 28%), linear-gradient(180deg, #070b16 0%, #0b1020 100%); }
.till-auth-stage { max-width: 920px; }
.till-auth-card { width: 100%; padding: 24px; border-radius: 24px; background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(9,14,24,.94)); border: 1px solid rgba(148,163,184,.18); box-shadow: 0 18px 46px rgba(2,6,23,.24); }
.till-auth-card.pending { border-color: rgba(251,146,60,.26); }
.till-auth-card.rejected { border-color: rgba(239,68,68,.26); }
.device-hero-grid { display: grid; gap: 16px; margin-bottom: 18px; }
.device-hero-card { padding: 24px; display: grid; gap: 18px; }
.device-hero-copy { display: grid; gap: 8px; max-width: 760px; }
.device-hero-copy h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.06; letter-spacing: -.03em; }
.device-hero-copy p { margin: 0; color: var(--muted); line-height: 1.5; }
.device-section { display: grid; gap: 14px; margin-top: 18px; }
.device-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.device-section-head h3 { margin: 0; font-size: 18px; }
.device-section-head span { min-width: 34px; min-height: 34px; display: inline-grid; place-items: center; border-radius: 999px; color: var(--badge-text); background: var(--badge-bg); font-weight: 900; }
.device-approval-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.device-card { padding: 18px; display: grid; gap: 14px; border-radius: 22px; border: 1px solid rgba(148,163,184,.18); background: linear-gradient(180deg, color-mix(in srgb, var(--panel), transparent 0%), color-mix(in srgb, var(--panel-2), transparent 10%)); box-shadow: 0 16px 38px rgba(2,6,23,.1); }
.device-card.pending { border-color: rgba(251,146,60,.26); }
.device-card.approved { border-color: rgba(34,197,94,.24); }
.device-card.rejected { border-color: rgba(239,68,68,.24); }
.device-card.legacy { border-color: rgba(148,163,184,.18); }
.device-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.device-card-kicker { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; color: var(--badge-text); background: var(--badge-bg); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.device-card-head h3 { margin: 8px 0 0; font-size: 20px; line-height: 1.2; }
.device-status-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 900; border: 1px solid rgba(148,163,184,.2); }
.device-status-pill.pending { color: #fbbf24; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.3); }
.device-status-pill.approved { color: #86efac; background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.3); }
.device-status-pill.rejected { color: #fca5a5; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.3); }
.device-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.device-card-meta div { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--panel-2), transparent 4%); border: 1px solid color-mix(in srgb, var(--line), transparent 10%); }
.device-card-meta span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.device-card-meta strong { font-size: 14px; line-height: 1.35; }
.device-card-note { margin: 0; color: var(--muted); line-height: 1.45; font-size: 13px; word-break: break-word; }
.modal.modal-device-alert { width: min(640px, calc(100vw - 28px)); border-radius: 24px; padding: 24px; }
.device-alert-list { display: grid; gap: 10px; margin: 18px 0 22px; }
.device-alert-item { padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--panel-2), transparent 4%); border: 1px solid color-mix(in srgb, var(--line), transparent 8%); display: grid; gap: 4px; }
.device-alert-item strong { font-size: 15px; }
.device-alert-item span { color: var(--muted); line-height: 1.4; }
.category-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cat-chip { min-height: 38px; border-radius: 999px; padding: 0 14px; color: #fff; border: 1px solid rgba(255,255,255,.14); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.product-btn { min-height: 98px; border-radius: 13px; color: white; text-align: left; padding: 13px; border: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; justify-content: space-between; }
.product-btn small { color: rgba(255,255,255,.8); }
.basket { position: sticky; top: 84px; }
.basket-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.total-row { display: flex; justify-content: space-between; margin: 10px 0; color: #e5e7eb; }
.total-row.big { font-size: 24px; font-weight: 900; }
.empty { min-height: 150px; display: grid; place-items: center; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); padding: 18px; }
.chart { height: 220px; display: flex; align-items: end; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(5,1,10,.34); }
.bar { flex: 1; min-width: 18px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--amber), var(--purple)); position: relative; }
.bar span { position: absolute; bottom: -24px; left: 0; right: 0; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.68); display: grid; place-items: center; padding: 20px; }
.modal { width: min(620px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 20px; }
.modal h2 { margin: 0 0 12px; }
.modal.modal-checklist-assign { width: min(760px, calc(100vw - 28px)); padding: 0; overflow: hidden; border-radius: 24px; border-color: color-mix(in srgb, var(--card-border), transparent 8%); background: radial-gradient(circle at top right, rgba(251,146,60,.14), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--panel), transparent 0%), color-mix(in srgb, var(--panel-2), transparent 8%)); box-shadow: 0 28px 90px rgba(2,6,23,.34); }
.modal-checklist-assign h2 { margin: 0; padding: 24px 24px 0; font-size: 28px; line-height: 1.08; letter-spacing: -.03em; }
.modal-checklist-assign .checklist-assign-form { width: 100%; min-width: 0; padding: 20px 24px 24px; gap: 18px; }
.modal-checklist-assign .field,
.modal-checklist-assign .field.full,
.modal-checklist-assign .checklist-helper-note,
.modal-checklist-assign .actions { min-width: 0; }
.modal-checklist-assign input,
.modal-checklist-assign select,
.modal-checklist-assign textarea { max-width: 100%; min-width: 0; }
.modal-checklist-assign textarea { min-height: 124px; }
.modal-checklist-assign .checklist-helper-note { padding: 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(251,146,60,.1), rgba(59,130,246,.08)); }
.modal-checklist-assign .checklist-assign-list { max-height: min(46vh, 420px); overflow: auto; padding-right: 4px; }
.modal-checklist-assign .actions { padding-top: 2px; justify-content: flex-start; }
.modal.modal-discount { width: min(940px, calc(100vw - 36px)); padding: 0; overflow: hidden; border: 0; border-radius: 22px; background: #fff; color: #172033; box-shadow: 0 34px 110px rgba(0,0,0,.5); }
.discount-modal { min-height: 520px; display: grid; grid-template-rows: auto 1fr auto; background: radial-gradient(circle at 74% 0%, rgba(251,146,60,.18), transparent 34%), linear-gradient(135deg, #fff7ed 0, #fff 38%, #f8fafc 100%); }
.discount-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 26px 20px; border-bottom: 1px solid #fed7aa; }
.discount-head h2 { margin: 7px 0 6px; color: #111827; font-size: 28px; line-height: 1.05; letter-spacing: 0; }
.discount-head p { max-width: 600px; margin: 0; color: #64748b; line-height: 1.45; font-weight: 650; }
.icon-btn { width: 42px; min-width: 42px; height: 42px; min-height: 42px; display: grid; place-items: center; border-radius: 999px; border: 1px solid #e2e8f0; background: rgba(255,255,255,.8); color: #64748b; font-size: 18px; font-weight: 950; box-shadow: 0 8px 22px rgba(15,23,42,.08); }
.icon-btn:hover { border-color: #fb923c; color: #9a3412; background: #fff7ed; }
.discount-layout { display: grid; grid-template-columns: 270px 1fr; gap: 0; min-height: 360px; }
.discount-summary { display: grid; align-content: start; gap: 18px; padding: 26px 24px; color: #d1d5db; background: linear-gradient(180deg, #111827, #0b1220); }
.discount-summary span { color: #9ca3af; font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.discount-summary > strong { color: #fff; font-size: 36px; line-height: 1; }
.discount-summary div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.discount-summary small { color: #9ca3af; font-size: 13px; font-weight: 800; }
.discount-summary b { color: #fed7aa; font-size: 18px; }
.discount-summary p { margin: 4px 0 0; padding: 12px; border-radius: 14px; color: #f8fafc; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); line-height: 1.4; }
.discount-summary.slim { min-height: 220px; border-radius: 18px; }
.discount-content { min-width: 0; display: grid; align-content: start; gap: 18px; padding: 24px 26px; }
.discount-content h3 { margin: 0; color: #1f2937; font-size: 15px; letter-spacing: 0; }
.discount-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.discount-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.discount-choice { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px; border-radius: 18px; border: 1px solid #dbe3ee; background: #fff; color: #1f2937; box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: transform .16s, border-color .16s, box-shadow .16s, background .16s; text-align: left; }
.discount-choice:hover { transform: translateY(-2px); border-color: #fb923c; background: #fffaf4; box-shadow: 0 16px 34px rgba(251,146,60,.16); }
.discount-choice.selected { border-color: #f97316; background: linear-gradient(135deg, #fff7ed, #fff); box-shadow: 0 0 0 3px rgba(251,146,60,.18), 0 14px 32px rgba(251,146,60,.16); }
.discount-choice span { min-width: 0; display: grid; gap: 5px; }
.discount-choice strong { color: #0f172a; font-size: 16px; line-height: 1.2; }
.discount-choice small { color: #64748b; font-size: 12px; font-weight: 750; }
.discount-choice b { flex: 0 0 auto; min-width: 94px; padding: 8px 10px; border-radius: 999px; color: #9a3412; background: #ffedd5; border: 1px solid #fed7aa; text-align: center; font-size: 13px; line-height: 1.2; }
.discount-choice.compact { min-height: 74px; }
.discount-choice.compact b { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }
.discount-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 26px 22px; border-top: 1px solid #e2e8f0; background: rgba(255,255,255,.9); }
.modal-discount .btn { min-height: 48px; padding: 0 18px; border-radius: 14px; border-color: #cbd5e1; background: #fff; color: #334155; font-weight: 950; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.modal-discount .btn:hover { border-color: #fb923c; box-shadow: 0 10px 24px rgba(15,23,42,.11); }
.modal-discount .btn.primary { color: #160b03; background: linear-gradient(135deg, #fb923c, #f59e0b); border-color: transparent; box-shadow: 0 14px 30px rgba(245,158,11,.3); }
.discount-entry { min-height: 430px; }
.discount-entry-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; padding: 24px 26px; align-items: stretch; }
.amount-entry { align-self: center; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 12px 35px rgba(15,23,42,.08); }
.amount-entry > span { color: #475569; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.money-input { margin-top: 12px; min-height: 74px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-radius: 16px; border: 2px solid #fed7aa; background: #fff7ed; color: #111827; font-size: 34px; font-weight: 950; }
.money-input input { min-height: 68px; padding: 0; border: 0; background: transparent; color: #111827; font-size: 34px; font-weight: 950; text-align: center; box-shadow: none; }
.money-input input:focus { outline: none; box-shadow: none; }
.modal.modal-discount { width: min(1060px, calc(100vw - 36px)); border-radius: 24px; }
.discount-modal { min-height: 560px; background: radial-gradient(circle at 78% -8%, rgba(245,158,11,.24), transparent 30%), linear-gradient(135deg, #fffaf4 0, #ffffff 40%, #f3f6fb 100%); }
.discount-head { padding: 26px 30px 22px; border-bottom-color: #fde2bf; }
.discount-head h2 { font-size: 30px; }
.discount-layout { grid-template-columns: 310px minmax(0, 1fr); }
.discount-summary { padding: 30px 26px; background: radial-gradient(circle at 0 0, rgba(251,146,60,.18), transparent 40%), linear-gradient(180deg, #111827, #080f1f); }
.discount-summary > strong { font-size: 42px; letter-spacing: 0; }
.discount-summary p { font-weight: 850; }
.discount-warning { padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(251,146,60,.32); background: rgba(251,146,60,.12); color: #fed7aa; font-weight: 850; line-height: 1.35; }
.discount-content { gap: 16px; padding: 24px 30px 26px; }
.discount-control-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #f8fafc; border: 1px solid #e2e8f0; color: #64748b; font-weight: 900; }
.discount-control-strip b { color: #0f172a; }
.discount-section-title { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 2px; }
.discount-section-title h3 { margin: 0; color: #111827; font-size: 15px; }
.discount-section-title span { color: #94a3b8; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.discount-grid { gap: 14px; }
.discount-choice { min-height: 104px; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(118px, auto); align-items: center; padding: 16px; border-radius: 20px; border-color: #d8e2ef; background: linear-gradient(180deg, #fff, #fbfdff); box-shadow: 0 8px 20px rgba(15,23,42,.07); }
.discount-choice:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(15,23,42,.12), 0 12px 30px rgba(251,146,60,.14); }
.discount-choice.selected { border-color: #f59e0b; background: linear-gradient(135deg, #fff7ed, #fff); box-shadow: 0 0 0 4px rgba(245,158,11,.18), 0 18px 38px rgba(15,23,42,.1); }
.discount-choice:disabled { opacity: .56; cursor: not-allowed; transform: none; box-shadow: none; }
.discount-choice:disabled:hover { transform: none; border-color: #d8e2ef; background: linear-gradient(180deg, #fff, #fbfdff); }
.discount-choice .discount-icon { width: 44px; height: 44px; min-width: 44px; display: grid; place-items: center; border-radius: 16px; color: #7c2d12; background: linear-gradient(135deg, #fed7aa, #fdba74); border: 1px solid #fb923c; font-size: 14px; font-weight: 1000; box-shadow: inset 0 1px rgba(255,255,255,.55); }
.discount-choice.compact .discount-icon { color: #334155; background: linear-gradient(135deg, #e2e8f0, #f8fafc); border-color: #cbd5e1; }
.discount-choice .discount-copy { min-width: 0; display: grid; gap: 5px; }
.discount-choice .discount-copy strong { color: #111827; font-size: 16px; line-height: 1.15; }
.discount-choice .discount-copy small { color: #64748b; font-size: 12px; font-weight: 850; }
.discount-choice .discount-copy em { color: #475569; font-style: normal; font-size: 12px; line-height: 1.25; font-weight: 700; }
.discount-choice .discount-value { min-width: 118px; display: grid; justify-items: end; gap: 6px; }
.discount-choice .discount-value b { min-width: auto; padding: 8px 11px; color: #9a3412; background: #ffedd5; border-color: #fed7aa; font-size: 13px; }
.discount-choice .discount-value small { color: #0f172a; font-size: 12px; font-weight: 950; }
.discount-choice.compact { min-height: 90px; }
.discount-choice.compact .discount-value b { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }
.discount-actions { padding: 18px 30px 24px; background: linear-gradient(180deg, rgba(255,255,255,.88), #fff); }
.modal-discount .btn:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.modal-discount .btn:disabled:hover { border-color: #cbd5e1; box-shadow: none; }
.discount-entry-body { grid-template-columns: 310px minmax(0, 1fr); gap: 24px; }
.amount-entry { align-self: stretch; display: grid; align-content: center; gap: 18px; padding: 24px; border-radius: 22px; }
.amount-entry .field { margin: 0; }
.discount-entry-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 16px; background: #f8fafc; border: 1px solid #e2e8f0; }
.discount-entry-note strong { color: #111827; }
.discount-entry-note span { color: #64748b; font-size: 12px; font-weight: 850; }
.modal.modal-payment { width: min(1024px, calc(100vw - 38px)); padding: 0; overflow: hidden; border: 0; background: #fff; color: #111827; border-radius: 14px; box-shadow: 0 34px 110px rgba(0,0,0,.48); }
.payment-flow { min-height: 500px; display: grid; grid-template-columns: 280px minmax(360px, 1fr) 224px; background: #fff; }
.payment-summary { display: grid; align-content: start; gap: 22px; padding: 28px 24px; color: #d1d5db; background: #111827; }
.payment-summary h2 { margin: 0 0 24px; color: #fff; font-size: 22px; }
.payment-due, .payment-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #9ca3af; text-transform: uppercase; }
.payment-due { padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.14); }
.payment-due strong { color: #fff; font-size: 24px; }
.payment-line { text-transform: none; }
.payment-line strong { color: #dbeafe; }
.payment-line.tendered { margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.payment-line.change strong { color: #22c55e; font-size: 22px; }
.payment-cancel { align-self: end; justify-self: center; margin-top: auto; color: #cbd5e1; background: transparent; }
.payment-center { display: grid; align-content: start; gap: 16px; padding: 28px; background: linear-gradient(180deg, #fff, #f8fafc); }
.payment-label { color: #697386; font-size: 13px; font-weight: 850; }
.payment-amount { min-height: 76px; display: grid; place-items: center; border-radius: 12px; border: 1px solid #d8dee8; background: #fff; color: #172033; font-size: 42px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(15,23,42,.025); }
.quick-cash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick-cash button, .number-pad button, .coupon-entry button { min-height: 40px; border-radius: 8px; border: 2px solid #bfdbfe; background: #fff; color: #0057ff; font-weight: 900; }
.number-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.number-pad button { min-height: 62px; border-color: #dce3ed; color: #1f2937; font-size: 22px; background: #fff; }
.number-pad button:hover, .quick-cash button:hover { border-color: #fb923c; background: #fff7ed; }
.coupon-entry { display: grid; grid-template-columns: 1fr 98px; gap: 8px; }
.coupon-entry input { min-height: 56px; background: #fff; color: #111827; border-color: #f59e0b; text-align: center; font-weight: 900; letter-spacing: .08em; }
.coupon-entry button { min-height: 56px; border-color: transparent; background: linear-gradient(135deg, #fed7aa, #f59e0b); color: #fff; }
.payment-footnote { align-self: end; justify-self: center; margin-top: 220px; font-size: 12px; }
.payment-methods { display: grid; align-content: start; gap: 14px; padding: 28px 24px; background: #f7f7f8; border-left: 1px solid #e5e7eb; }
.method-stack { display: grid; gap: 12px; }
.method-btn { min-height: 52px; border-radius: 11px; background: #eceef2; color: #334155; font-weight: 900; border: 2px solid transparent; }
.method-btn.active.cash { background: #08a947; color: #fff; border-color: #34d399; }
.method-btn.active.cardpos { background: #2563eb; color: #fff; border-color: #60a5fa; }
.method-btn.active.tab { background: #a21caf; color: #fff; border-color: #e879f9; }
.method-btn.active.coupon { background: #f59e0b; color: #fff; border-color: #fbbf24; }
.method-btn.active.complimentary { background: #7c3aed; color: #fff; border-color: #c084fc; }
.tab-picker { max-height: 178px; overflow: auto; display: grid; gap: 6px; padding-right: 4px; }
.tab-picker > span { color: #64748b; font-size: 12px; font-weight: 850; }
.tab-pick { min-height: 50px; display: grid; justify-items: start; gap: 2px; padding: 8px 10px; border-radius: 8px; background: #fff; color: #1f2937; border: 1px solid #e5e7eb; text-align: left; }
.tab-pick small { color: #059669; }
.tab-pick.active { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168,85,247,.13); }
.complete-payment { align-self: end; margin-top: auto; min-height: 60px; border-radius: 10px; background: #2563eb; color: #fff; font-size: 18px; font-weight: 950; text-transform: uppercase; }
.complete-payment:disabled, button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.special-event-card { overflow: hidden; }
.special-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(251,146,60,.22); background: linear-gradient(135deg, rgba(251,146,60,.14), rgba(168,85,247,.08)); }
.special-status span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.special-status strong { color: #fed7aa; }
.special-status.live { border-color: rgba(34,197,94,.38); background: linear-gradient(135deg, rgba(34,197,94,.14), rgba(168,85,247,.08)); }
.special-status.live strong { color: #86efac; }
.special-pricing-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; border-color: rgba(125,211,252,.2); background: radial-gradient(circle at 12% 0%, rgba(14,165,233,.14), transparent 32%), var(--card-bg); }
.special-pricing-card h2 { margin: 4px 0 6px; }
.special-pricing-control { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.order-sheet-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; background: radial-gradient(circle at 12% 0%, rgba(251,191,36,.16), transparent 36%), var(--card-bg); }
.order-sheet-hero h2 { margin: 6px 0; font-size: 24px; }
.order-sheet-hero input { max-width: 360px; }
.order-sheet-stack { display: grid; gap: 16px; }
.order-sheet-card { padding: 0; overflow: hidden; }
.order-sheet-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.order-sheet-card-head h3 { margin: 0 0 4px; }
.order-sheet-table { border: 0; border-radius: 0; background: transparent; }
.order-sheet-table table { min-width: 760px; }
.order-stock { display: inline-flex; min-width: 34px; justify-content: center; padding: 4px 8px; border-radius: 999px; }
.order-stock.red { color: #fecaca; background: rgba(239,68,68,.14); }
.order-stock.amber { color: #fde68a; background: rgba(245,158,11,.14); }
.order-stock.green { color: #bbf7d0; background: rgba(34,197,94,.12); }
.btn.compact { min-height: 32px; padding: 0 10px; border-radius: 10px; font-size: 12px; }
.full { grid-column: 1 / -1; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.clock-face { text-align: center; padding: 28px; background: radial-gradient(circle at 50% 0%, rgba(168,85,247,.2), transparent 45%), var(--panel); }
.clock-time { font-size: clamp(42px, 7vw, 76px); font-weight: 900; letter-spacing: 0; }
.event-table-card { padding: 0; overflow: hidden; }
.event-table-card .toolbar { padding: 10px 22px; margin: 0; background: rgba(255,255,255,.025); }
.event-table-card .table-wrap { border: 0; border-radius: 0; }
.event-form { display: grid; gap: 22px; }
.event-form .form-grid { grid-template-columns: minmax(300px, 1fr) minmax(260px, 1fr); align-items: start; }
.event-tag-field { align-self: end; }
.joined-control { display: grid; grid-template-columns: minmax(0, 1fr) 56px; }
.joined-control select { border-radius: 11px 0 0 11px; }
.joined-control .btn { min-height: 42px; border-radius: 0 11px 11px 0; font-size: 22px; }
.ops-record-card { padding: 0; overflow: hidden; }
.ops-record-toolbar { padding: 14px 22px; margin: 0; background: rgba(255,255,255,.025); border-bottom: 1px solid rgba(168,85,247,.12); }
.ops-record-summary { display: grid; gap: 4px; }
.ops-record-summary strong { font-size: 15px; color: #f8fafc; }
.ops-record-card .table-wrap { border: 0; border-radius: 0; background: transparent; }
.ops-record-form { display: grid; gap: 22px; }
.ops-record-form-grid { display: grid; grid-template-columns: minmax(240px, .6fr) minmax(220px, .4fr); gap: 16px; align-items: start; }
.ops-record-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(168,85,247,.16); }
.ops-record-meta span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.ops-record-meta strong { color: #fff; font-size: 15px; }
.ops-record-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 18px; border-top: 1px solid rgba(168,85,247,.12); }
.ops-action-group { gap: 8px; flex-wrap: wrap; }
.severity-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 850; border: 1px solid transparent; }
.severity-pill.low { color: #86efac; background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.28); }
.severity-pill.medium { color: #fcd34d; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.28); }
.severity-pill.high { color: #fca5a5; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.28); }
.severity-pill.muted { color: #cbd5e1; background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.22); }
.ops-view-grid { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); gap: 20px; align-items: start; }
.ops-view-card { min-height: 100%; }
.ops-view-card h3 { margin-top: 0; }
.ops-view-body { margin: 0; color: #dbe4ef; line-height: 1.65; white-space: pre-wrap; }
.tag-pill { display: inline-flex; align-items: center; min-height: 24px; max-width: 100%; padding: 0 8px; border-radius: 7px; color: #fff; border: 1px solid color-mix(in srgb, var(--tag), white 35%); background: color-mix(in srgb, var(--tag), transparent 78%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 800; }
.event-view-grid { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(520px, 1.35fr); gap: 20px; align-items: start; }
.event-orders-card { grid-column: 1 / -1; padding: 0; overflow: hidden; }
.event-orders-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px; border-bottom: 1px solid rgba(168,85,247,.14); }
.event-orders-head h3 { margin: 0 0 6px; }
.event-orders-head p { margin: 0; max-width: 760px; }
.smart-report-card { overflow: hidden; }
.smart-event-summary { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.smart-event-summary p { margin: 4px 0 0; }
.insight { margin: 14px 0 16px; padding: 12px 14px; border-radius: 12px; color: #bfdbfe; background: rgba(37,99,235,.16); border: 1px solid rgba(59,130,246,.45); font-size: 13px; line-height: 1.4; }
.smart-table table { min-width: 980px; }
.smart-number { color: #60a5fa; font-weight: 800; }
.danger-text { color: #ff5b5b; font-weight: 800; }
.profile-shell { position: relative; }
.avatar-btn { box-shadow: 0 12px 26px rgba(15,23,42,.18); }
.avatar-btn.open { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(15,23,42,.24); }
.profile-menu { position: absolute; top: calc(100% + 12px); right: 0; width: 320px; padding: 16px; display: grid; gap: 14px; border-radius: 20px; background: color-mix(in srgb, var(--panel), transparent 2%); border: 1px solid var(--card-border); box-shadow: 0 24px 60px rgba(2,6,23,.32); z-index: 40; }
.profile-menu-head { display: grid; gap: 3px; }
.profile-menu-head strong { font-size: 16px; }
.profile-menu-head span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.profile-menu-section { display: grid; gap: 10px; }
.profile-menu-section p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.profile-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-theme-option { min-height: 84px; padding: 12px; display: grid; gap: 6px; align-content: start; border-radius: 16px; background: color-mix(in srgb, var(--panel-2), transparent 8%); border: 1px solid var(--line); color: var(--text); text-align: left; }
.profile-theme-option strong { font-size: 14px; }
.profile-theme-option small { color: var(--muted); line-height: 1.35; }
.profile-theme-option.active { border-color: rgba(251,146,60,.42); background: linear-gradient(135deg, rgba(251,146,60,.16), rgba(168,85,247,.12)); box-shadow: 0 0 0 2px rgba(251,146,60,.12); }
.profile-menu-actions { display: flex; justify-content: flex-end; }
.profile-signout { width: 100%; }
.checklist-hero-grid { display: grid; gap: 18px; margin-bottom: 18px; }
.checklist-hero-panel, .checklist-showcase, .checklist-form-banner, .checklist-run-banner { position: relative; overflow: hidden; padding: 24px; display: grid; gap: 20px; border-radius: 28px; border: 1px solid color-mix(in srgb, var(--card-border), transparent 8%); background: radial-gradient(circle at top right, rgba(251,146,60,.16), transparent 35%), radial-gradient(circle at left bottom, rgba(59,130,246,.14), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--panel), transparent 0%), color-mix(in srgb, var(--panel-2), transparent 10%)); box-shadow: 0 24px 70px rgba(2,6,23,.16); }
.checklist-hero-panel.shift { background: radial-gradient(circle at top right, rgba(59,130,246,.18), transparent 33%), radial-gradient(circle at left bottom, rgba(34,197,94,.14), transparent 36%), linear-gradient(145deg, color-mix(in srgb, var(--panel), transparent 0%), color-mix(in srgb, var(--panel-2), transparent 8%)); }
.checklist-showcase.opening, .checklist-form-banner.opening, .checklist-run-banner.opening { background: radial-gradient(circle at top right, rgba(34,197,94,.16), transparent 32%), radial-gradient(circle at left bottom, rgba(251,146,60,.18), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--panel), transparent 0%), color-mix(in srgb, var(--panel-2), transparent 8%)); }
.checklist-showcase.closing, .checklist-form-banner.closing, .checklist-run-banner.closing { background: radial-gradient(circle at top right, rgba(79,70,229,.2), transparent 32%), radial-gradient(circle at left bottom, rgba(245,158,11,.16), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--panel), transparent 0%), color-mix(in srgb, var(--panel-2), transparent 8%)); }
.checklist-hero-panel > *, .checklist-showcase > *, .checklist-form-banner > *, .checklist-run-banner > * { position: relative; z-index: 1; }
.checklist-hero-copy, .checklist-showcase-copy { display: grid; gap: 10px; max-width: 760px; }
.checklist-hero-kicker { color: color-mix(in srgb, var(--text), white 18%); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; }
.checklist-hero-copy h2, .checklist-showcase h2, .checklist-form-banner h2, .checklist-run-banner h2 { margin: 0; font-size: clamp(28px, 4vw, 38px); line-height: 1.06; letter-spacing: -.03em; }
.checklist-hero-copy p, .checklist-showcase p, .checklist-form-banner p, .checklist-run-banner p { margin: 0; max-width: 720px; color: color-mix(in srgb, var(--text), transparent 28%); line-height: 1.6; }
.checklist-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.checklist-metric-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checklist-metric-card { min-height: 108px; padding: 16px 18px; display: grid; gap: 8px; align-content: start; border-radius: 20px; border: 1px solid rgba(148,163,184,.18); background: color-mix(in srgb, var(--panel-2), transparent 2%); backdrop-filter: blur(18px); }
.checklist-metric-card span { color: color-mix(in srgb, var(--text), transparent 38%); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.checklist-metric-card strong { font-size: clamp(22px, 3vw, 30px); line-height: 1; letter-spacing: -.03em; }
.checklist-metric-card small { color: var(--muted); line-height: 1.45; }
.checklist-metric-card.opening { border-color: rgba(34,197,94,.22); background: linear-gradient(180deg, rgba(34,197,94,.14), rgba(15,23,42,.02)); }
.checklist-metric-card.closing { border-color: rgba(245,158,11,.22); background: linear-gradient(180deg, rgba(245,158,11,.14), rgba(15,23,42,.02)); }
.checklist-metric-card.accent { border-color: rgba(59,130,246,.22); background: linear-gradient(180deg, rgba(59,130,246,.14), rgba(15,23,42,.02)); }
.checklist-gallery, .checklist-history-grid { padding: 20px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.checklist-gallery-card, .checklist-history-card { position: relative; min-height: 100%; padding: 20px; display: grid; gap: 16px; align-content: start; overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2), transparent 2%), color-mix(in srgb, var(--panel), transparent 0%)); box-shadow: 0 18px 46px rgba(2,6,23,.12); }
.checklist-gallery-card.opening, .checklist-history-card.opening { border-color: rgba(34,197,94,.24); }
.checklist-gallery-card.closing, .checklist-history-card.closing { border-color: rgba(245,158,11,.24); }
.checklist-gallery-card h3, .checklist-history-card h3 { margin: 0; font-size: 24px; line-height: 1.1; letter-spacing: -.03em; }
.checklist-gallery-card p, .checklist-history-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.checklist-card-kicker-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.checklist-card-preview { display: grid; gap: 10px; }
.checklist-card-preview span { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 11px 12px; border-radius: 16px; border: 1px solid rgba(148,163,184,.14); background: color-mix(in srgb, var(--panel-2), transparent 14%); line-height: 1.45; }
.checklist-card-preview b { min-width: 22px; color: color-mix(in srgb, var(--text), white 16%); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.checklist-card-preview small { color: var(--muted); }
.checklist-card-footer { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.checklist-card-footer .btn { flex: 1 1 140px; justify-content: center; }
.checklist-progress { display: grid; gap: 10px; }
.checklist-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.checklist-progress-copy strong { font-size: 15px; }
.checklist-progress-copy span { color: var(--muted); font-size: 13px; }
.checklist-progress-track { height: 12px; overflow: hidden; border-radius: 999px; background: rgba(148,163,184,.18); }
.checklist-progress-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fb923c, #f59e0b, #facc15); box-shadow: 0 0 24px rgba(251,146,60,.28); }
.checklist-history-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 850; }
.checklist-toolbar { margin: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.checklist-summary { display: grid; gap: 4px; }
.checklist-summary strong { font-size: 15px; }
.checklist-list-card { padding: 0; overflow: hidden; border-radius: 28px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel), transparent 0%), color-mix(in srgb, var(--panel-2), transparent 8%)); box-shadow: 0 24px 70px rgba(2,6,23,.12); }
.checklist-type-pill, .checklist-count-pill, .checklist-flag-pill, .checklist-neutral-pill, .checklist-required-mark, .checklist-optional-mark, .checklist-status-pill { min-height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 850; border: 1px solid transparent; }
.checklist-type-pill.opening { color: #86efac; background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.26); }
.checklist-type-pill.closing { color: #fcd34d; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.26); }
.checklist-count-pill { color: #9a3412; background: rgba(251,146,60,.14); border-color: rgba(251,146,60,.24); }
.checklist-flag-pill { color: #991b1b; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.28); }
.checklist-neutral-pill { color: var(--muted); background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.2); }
.checklist-required-mark { color: #111827; background: linear-gradient(135deg, #fde68a, #f59e0b); border-color: transparent; }
.checklist-optional-mark { color: var(--muted); background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.2); }
.checklist-status-pill.pending { color: var(--muted); background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.18); }
.checklist-status-pill.done { color: #166534; background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.3); }
.checklist-status-pill.flagged, .checklist-status-pill.open { color: #9a3412; background: rgba(251,146,60,.16); border-color: rgba(251,146,60,.3); }
.checklist-template-grid { align-items: start; }
.checklist-detail-card, .checklist-builder-card, .checklist-preview-card { display: grid; gap: 16px; align-content: start; }
.checklist-detail-card h3, .checklist-builder-card h3, .checklist-preview-card h3 { margin: 0; }
.checklist-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.checklist-detail-grid span { display: block; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.checklist-detail-grid strong { display: block; color: var(--text); }
.checklist-helper-note { display: grid; gap: 4px; padding: 14px; border-radius: 16px; border: 1px solid rgba(251,146,60,.22); background: rgba(251,146,60,.08); }
.checklist-helper-note strong { color: var(--text); }
.checklist-helper-note span { color: var(--muted); line-height: 1.4; }
.checklist-builder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.checklist-builder-head h3 { margin: 0 0 4px; }
.checklist-builder-head p { margin: 0; }
.checklist-item-stack, .checklist-preview-list, .checklist-run-stack, .checklist-mini-task-list, .task-grid, .checklist-assign-list { display: grid; gap: 12px; }
.checklist-item-card, .checklist-preview-item, .checklist-run-item, .task-card, .checklist-assign-item, .checklist-mini-task { border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--panel-2), transparent 6%); }
.checklist-item-card { padding: 14px; display: grid; gap: 14px; }
.checklist-item-card.collapsed .checklist-item-body { display: none; }
.checklist-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.checklist-item-title { display: flex; gap: 12px; min-width: 0; }
.checklist-item-title div { min-width: 0; display: grid; gap: 4px; }
.checklist-item-title strong { font-size: 15px; line-height: 1.3; word-break: break-word; }
.checklist-item-title small { color: var(--muted); }
.checklist-item-handle { color: var(--muted); font-size: 22px; line-height: 1; }
.checklist-item-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.checklist-item-head-actions .btn { min-height: 34px; }
.checklist-item-body { display: grid; gap: 14px; }
.checklist-item-meta { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr); gap: 14px; align-items: end; }
.switch-field { display: grid; gap: 8px; min-width: 0; }
.switch-field > span { color: color-mix(in srgb, var(--text), white 14%); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.toggle-switch { min-height: 74px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--field-border), transparent 8%); background: linear-gradient(180deg, color-mix(in srgb, var(--field-bg), white 2%), color-mix(in srgb, var(--field-bg), transparent 0%)); color: var(--text); cursor: pointer; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 26px rgba(2,6,23,.08); }
.toggle-switch input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-switch:hover { transform: translateY(-1px); border-color: rgba(251,146,60,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 32px rgba(2,6,23,.12); }
.toggle-switch-ui { width: 56px; height: 32px; position: relative; border-radius: 999px; background: linear-gradient(180deg, rgba(148,163,184,.42), rgba(100,116,139,.34)); border: 1px solid rgba(148,163,184,.28); transition: .18s ease; box-shadow: inset 0 1px 3px rgba(15,23,42,.18); }
.toggle-switch-ui:before { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px; background: linear-gradient(180deg, #fff, #e2e8f0); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; box-shadow: 0 6px 14px rgba(15,23,42,.22); }
.toggle-switch-copy { min-width: 0; display: grid; gap: 4px; }
.toggle-switch-copy strong { font-size: 14px; line-height: 1.25; letter-spacing: -.01em; }
.toggle-switch-copy em { color: var(--muted); font-style: normal; line-height: 1.4; }
.toggle-switch-state { min-width: 92px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(148,163,184,.2); background: rgba(148,163,184,.12); color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; transition: .18s ease; }
.toggle-switch-state:before { content: "Optional"; }
.toggle-switch input:checked ~ .toggle-switch-ui { background: linear-gradient(135deg, #fb923c, #f59e0b); border-color: rgba(251,146,60,.4); box-shadow: inset 0 1px 2px rgba(255,255,255,.18), 0 0 0 6px rgba(251,146,60,.12); }
.toggle-switch input:checked ~ .toggle-switch-ui:before { transform: translateX(24px); background: linear-gradient(180deg, #fff7ed, #fff); box-shadow: 0 8px 18px rgba(154,52,18,.28); }
.toggle-switch input:checked ~ .toggle-switch-state { color: #111827; background: linear-gradient(135deg, #fde68a, #fb923c); border-color: transparent; box-shadow: 0 10px 24px rgba(251,146,60,.18); }
.toggle-switch input:checked ~ .toggle-switch-state:before { content: "Required"; }
.toggle-switch input:focus-visible ~ .toggle-switch-ui,
.toggle-switch input:focus-visible ~ .toggle-switch-state { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.checklist-builder-actions { justify-content: flex-start; }
.checklist-preview-item, .checklist-mini-task { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checklist-preview-item strong, .checklist-mini-task strong { display: block; margin-bottom: 4px; }
.checklist-preview-item small, .checklist-mini-task span { color: var(--muted); line-height: 1.4; }
.checklist-landing { align-content: start; }
.checklist-task-summary, .checklist-shift-card { display: grid; gap: 12px; }
.checklist-task-summary h3 { margin: 0; }
.checklist-start-grid { align-items: stretch; }
.checklist-start-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.checklist-start-card.opening { background: linear-gradient(135deg, rgba(251,146,60,.12), rgba(245,158,11,.08)); }
.checklist-start-card.closing { background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(79,70,229,.1)); }
.checklist-start-icon { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 20px; color: #fff; font-size: 15px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(135deg, #fb923c, #f59e0b); }
.checklist-start-card.closing .checklist-start-icon { background: linear-gradient(135deg, #4338ca, #6366f1); }
.checklist-start-copy { display: grid; gap: 8px; }
.checklist-start-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checklist-start-head h3 { margin: 0; }
.checklist-start-copy p { margin: 0; color: var(--muted); line-height: 1.45; }
.checklist-run-form { display: grid; gap: 16px; }
.checklist-shift-fields, .checklist-run-fields { display: grid; gap: 12px; }
.checklist-run-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr); gap: 16px; align-items: end; }
.checklist-run-summary-copy { display: grid; gap: 4px; }
.checklist-run-summary-copy strong { font-size: 18px; }
.checklist-run-summary-copy span { color: var(--muted); }
.checklist-run-item { padding: 16px; display: grid; gap: 14px; }
.checklist-run-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.checklist-run-head strong { display: block; margin-bottom: 4px; line-height: 1.4; }
.checklist-run-head span { color: var(--muted); font-size: 13px; }
.checklist-run-controls { display: grid; grid-template-columns: minmax(220px, .4fr) minmax(0, .6fr); gap: 14px; align-items: start; }
.checklist-assign-form { width: 100%; min-width: 0; }
.checklist-assign-item { padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.checklist-assign-item input { width: 18px; min-width: 18px; height: 18px; min-height: 18px; }
.checklist-assign-item strong { display: block; margin-bottom: 4px; }
.checklist-assign-item small { color: var(--muted); line-height: 1.35; }
.checklist-assign-item.assigned { opacity: .7; }
.task-empty-state { min-height: 280px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; }
.task-empty-icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 22px; background: rgba(148,163,184,.12); color: var(--muted); font-size: 28px; font-weight: 950; }
.task-empty-state strong { font-size: 18px; }
.task-empty-state span { color: var(--muted); max-width: 420px; line-height: 1.45; }
.task-card { padding: 16px; display: grid; gap: 12px; }
.task-card.compact { gap: 10px; }
.task-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-card-head strong { font-size: 15px; line-height: 1.35; }
.task-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.task-card-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 800; }
.checklist-detail-card, .checklist-builder-card, .checklist-preview-card, .checklist-task-summary, .checklist-shift-card, .checklist-run-summary { padding: 22px; border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel), transparent 0%), color-mix(in srgb, var(--panel-2), transparent 8%)); border: 1px solid color-mix(in srgb, var(--line), transparent 10%); box-shadow: 0 18px 46px rgba(2,6,23,.12); }
.checklist-toolbar { background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.checklist-builder-head { align-items: center; }
.checklist-helper-note { border-radius: 18px; }
.checklist-item-card { border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2), transparent 4%), color-mix(in srgb, var(--panel), transparent 2%)); box-shadow: 0 14px 36px rgba(2,6,23,.1); }
.checklist-preview-item, .checklist-mini-task, .task-card { border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2), transparent 4%), color-mix(in srgb, var(--panel), transparent 2%)); box-shadow: 0 14px 34px rgba(2,6,23,.08); }
.checklist-task-summary, .checklist-shift-card { min-height: 100%; }
.checklist-task-summary h3, .checklist-shift-card h3 { font-size: 22px; letter-spacing: -.02em; }
.checklist-start-card { padding: 22px; border-radius: 24px; border: 1px solid rgba(148,163,184,.16); box-shadow: 0 18px 42px rgba(2,6,23,.12); }
.checklist-start-copy small { color: color-mix(in srgb, var(--text), transparent 34%); font-weight: 800; letter-spacing: .02em; }
.checklist-run-summary { grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr); }
.checklist-run-summary-copy strong { font-size: 24px; letter-spacing: -.03em; }
.checklist-run-item { border-radius: 24px; border: 1px solid rgba(148,163,184,.16); background: linear-gradient(180deg, color-mix(in srgb, var(--panel), transparent 0%), color-mix(in srgb, var(--panel-2), transparent 10%)); box-shadow: 0 18px 42px rgba(2,6,23,.1); }
.checklist-run-item.required { border-color: rgba(245,158,11,.22); }
.checklist-run-item.optional { border-color: rgba(148,163,184,.18); }
.checklist-run-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.checklist-run-copy { min-width: 0; display: grid; gap: 8px; }
.checklist-run-copy strong { display: block; font-size: 17px; line-height: 1.45; }
.checklist-run-copy span { color: var(--muted); font-size: 13px; }
.checklist-run-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.checklist-run-head-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.checklist-run-assign-btn { min-width: 112px; justify-content: center; box-shadow: 0 12px 24px rgba(2,6,23,.1); }
.checklist-item-index { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px; color: #111827; font-size: 13px; font-weight: 950; letter-spacing: .1em; background: linear-gradient(135deg, #fde68a, #fb923c); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.checklist-run-item.optional .checklist-item-index { color: var(--text); background: linear-gradient(135deg, rgba(148,163,184,.28), rgba(148,163,184,.14)); }
.checklist-assign-form { width: 100%; min-width: 0; }
.checklist-assign-item { border-radius: 18px; background: color-mix(in srgb, var(--panel-2), transparent 6%); }
.task-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.task-empty-state { border-radius: 28px; background: radial-gradient(circle at top, rgba(59,130,246,.12), transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--panel), transparent 0%), color-mix(in srgb, var(--panel-2), transparent 10%)); box-shadow: 0 24px 70px rgba(2,6,23,.12); }
.task-empty-icon { width: 78px; height: 78px; border-radius: 26px; background: linear-gradient(135deg, rgba(251,146,60,.18), rgba(59,130,246,.18)); color: color-mix(in srgb, var(--text), white 10%); font-size: 18px; letter-spacing: .12em; }
@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-hero { min-height: 360px; padding: 36px; }
  .app-shell { padding-left: 0; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none; }
  .topbar-right { min-width: 0; gap: 8px; }
  .profile-menu { width: min(320px, calc(100vw - 32px)); right: -6px; }
  .special-pricing-card, .order-sheet-hero, .order-sheet-card-head { flex-direction: column; align-items: stretch; }
  .order-sheet-hero input { max-width: none; }
  .profile-theme-grid, .checklist-detail-grid, .checklist-item-meta, .checklist-run-summary, .checklist-run-controls, .device-card-meta { grid-template-columns: 1fr; }
  .checklist-start-card, .checklist-preview-item, .checklist-mini-task, .task-card-head, .checklist-assign-item, .checklist-item-header, .checklist-builder-head, .checklist-start-head { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }
  .checklist-item-head-actions, .profile-menu-actions { justify-content: stretch; }
  .checklist-item-head-actions .btn, .profile-signout { width: 100%; }
  .quick-clock span:not(.quick-clock-dot) { display: none; }
  .quick-clock { padding-left: 8px; }
  .quick-clock-btn { padding: 0 10px; }
  .pos-shell { overflow: auto; grid-template-rows: auto minmax(0, 1fr); }
  .pos-topbar { height: auto; min-height: 50px; flex-wrap: wrap; padding: 10px; }
  .pos-brand { min-width: 0; }
  .pos-brand strong { font-size: 16px; }
  .pos-top-actions { flex-wrap: wrap; justify-content: stretch; }
  .pos-till-tab { width: 100%; min-width: 0; }
  .pos-main { grid-template-columns: 1fr; }
  .pos-category-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .pos-product-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .missing-note-bar, .missing-note-trigger, .missing-note-form { grid-template-columns: 1fr; }
  .missing-note-actions, .missing-note-form-actions { justify-content: stretch; }
  .missing-note-actions .btn, .missing-note-actions .pos-missing, .missing-note-form-actions .btn, .missing-note-cta { width: 100%; }
  .pos-paybar { grid-template-columns: 1fr; }
  .modal.modal-discount { width: min(560px, calc(100vw - 24px)); }
  .discount-layout, .discount-entry-body { grid-template-columns: 1fr; }
  .discount-summary.slim { min-height: auto; }
  .discount-grid, .discount-grid-compact { grid-template-columns: 1fr; }
  .discount-choice { grid-template-columns: 40px minmax(0, 1fr); }
  .discount-choice .discount-value { grid-column: 1 / -1; justify-items: start; min-width: 0; }
  .discount-section-title, .discount-control-strip { align-items: start; flex-direction: column; }
  .discount-modal { min-height: auto; }
  .payment-flow { grid-template-columns: 1fr; max-height: calc(100vh - 38px); overflow: auto; }
  .payment-summary, .payment-center, .payment-methods { padding: 20px; }
  .payment-footnote { margin-top: 12px; }
  .pos-bill { min-height: 420px; border-left: 0; border-top: 1px solid #cbd5e1; }
  .hero-card, .till, .grid.cols-2, .grid.cols-3, .grid.cols-4, .form-grid { grid-template-columns: 1fr; }
  .register-select-shell { min-height: 100vh; padding: 18px; }
  .register-select-stage { padding: 22px 18px; border-radius: 24px; }
  .register-select-actions { flex-direction: column; }
  .register-select-actions .btn { width: 100%; }
  .device-card-head, .device-section-head { flex-direction: column; align-items: stretch; }
  .till-register-pill { width: 100%; justify-content: space-between; }
  .dashboard-clock { grid-template-columns: 1fr; align-items: start; }
  .dashboard-clock-time { justify-items: start; padding: 12px 0; border-left: 0; border-right: 0; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
  .dashboard-clock-actions { justify-content: flex-start; }
  .event-form .form-grid, .event-view-grid, .ops-view-grid, .ops-record-form-grid { grid-template-columns: 1fr; }
  .event-orders-head, .smart-event-summary { flex-direction: column; align-items: stretch; }
  .ops-record-toolbar, .ops-record-footer, .ops-record-meta { flex-direction: column; align-items: stretch; }
  .page { padding: 18px; }
}

@media (max-width: 980px) {
  .checklist-metric-grid, .checklist-metric-grid.compact, .checklist-gallery, .checklist-history-grid { grid-template-columns: 1fr; }
  .checklist-hero-panel, .checklist-showcase, .checklist-form-banner, .checklist-run-banner, .checklist-detail-card, .checklist-builder-card, .checklist-preview-card, .checklist-task-summary, .checklist-shift-card, .checklist-run-summary { padding: 20px; }
  .checklist-hero-copy h2, .checklist-showcase h2, .checklist-form-banner h2, .checklist-run-banner h2 { font-size: 28px; }
  .checklist-progress-copy, .checklist-card-kicker-row, .checklist-card-footer { align-items: stretch; }
  .checklist-card-footer .btn { flex-basis: 100%; }
  .checklist-run-head { grid-template-columns: 1fr; }
  .checklist-run-head-tools { justify-content: stretch; }
  .checklist-run-assign-btn { width: 100%; }
  .checklist-item-index { width: 42px; height: 42px; }
  .toggle-switch { grid-template-columns: auto minmax(0, 1fr); }
  .toggle-switch-state { grid-column: 2; justify-self: start; }
}

/* Refined TPOS discount flow */
.modal.modal-discount { width: min(1120px, calc(100vw - 32px)); border-radius: 26px; overflow: hidden; }
.discount-modal.refined { min-height: min(680px, calc(100vh - 40px)); background: linear-gradient(135deg, #fffaf4 0%, #fff 42%, #eef2ff 100%); }
.discount-head.refined { align-items: center; padding: 24px 28px 20px; border-bottom-color: #f1d7b5; }
.discount-head.refined h2 { font-size: 30px; }
.discount-head.refined p { max-width: 620px; }
.discount-layout.refined, .discount-entry-shell { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: 0; }
.discount-summary.refined { background: radial-gradient(circle at 16% 0%, rgba(245,158,11,.24), transparent 38%), linear-gradient(180deg, #111827, #070a12); }
.discount-summary.refined p { display: grid; gap: 4px; }
.discount-summary.refined p small { text-transform: uppercase; letter-spacing: .06em; }
.discount-summary.refined p strong { color: #fff; }
.discount-summary.refined p span { color: #fed7aa; font-weight: 900; }
.discount-content.refined { overflow: auto; max-height: calc(100vh - 190px); }
.discount-grid.refined { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
.discount-choice.refined { min-height: 96px; border-radius: 18px; grid-template-columns: 48px minmax(0, 1fr) auto; }
.discount-choice.refined .discount-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 14px; }
.discount-choice.refined .discount-copy em { display: block; max-width: 360px; }
.discount-choice.refined .discount-value { min-width: 104px; }
.discount-choice.refined .discount-value b { white-space: nowrap; }
.discount-entry.refined { min-height: min(680px, calc(100vh - 40px)); }
.discount-entry-shell { min-height: 0; }
.discount-entry-main { min-width: 0; display: grid; grid-template-columns: minmax(280px, 1fr) 250px; gap: 18px; padding: 24px 28px; align-content: start; overflow: auto; max-height: calc(100vh - 190px); }
.discount-value-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(220px, 280px); gap: 16px; padding: 18px; border: 1px solid #e2e8f0; border-radius: 22px; background: rgba(255,255,255,.9); box-shadow: 0 14px 34px rgba(15,23,42,.08); }
.discount-value-card .field { margin: 0; }
.discount-money-input { min-height: 76px; margin-top: 8px; border-color: #fb923c; background: #fff7ed; }
.discount-live-preview { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-content: center; padding: 16px; border-radius: 18px; color: #334155; background: #f8fafc; border: 1px solid #e2e8f0; }
.discount-live-preview span { font-size: 12px; font-weight: 900; text-transform: uppercase; color: #64748b; }
.discount-live-preview strong { color: #0f172a; font-size: 20px; }
.discount-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.discount-quick-grid button, .discount-keypad button { min-height: 58px; border-radius: 14px; border: 1px solid #cbd5e1; background: #fff; color: #172033; font-size: 17px; font-weight: 950; box-shadow: 0 8px 18px rgba(15,23,42,.06); }
.discount-quick-grid button { color: #9a3412; background: linear-gradient(180deg, #fff7ed, #fff); border-color: #fed7aa; }
.discount-quick-grid button:hover, .discount-keypad button:hover { border-color: #fb923c; transform: translateY(-1px); }
.discount-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.discount-keypad .wide { grid-column: span 1; font-size: 14px; color: #475569; background: #f1f5f9; }
.discount-entry-main .discount-entry-note { grid-column: 1 / -1; margin-top: 2px; }
@media (max-width: 980px) {
  .modal.modal-discount { width: min(560px, calc(100vw - 24px)); }
  .discount-layout.refined, .discount-entry-shell { grid-template-columns: 1fr; }
  .discount-content.refined, .discount-entry-main { max-height: none; overflow: visible; }
  .discount-grid.refined { grid-template-columns: 1fr; }
  .discount-choice.refined { grid-template-columns: 44px minmax(0, 1fr); }
  .discount-entry-main { grid-template-columns: 1fr; padding: 18px; }
  .discount-value-card { grid-template-columns: 1fr; }
}

/* Platform polish pass */
.brand-logo { overflow: hidden; border-radius: 999px; padding: 2px; background: radial-gradient(circle at 35% 20%, rgba(125, 211, 252, .55), rgba(15, 23, 42, .98) 62%); border: 1px solid rgba(125, 211, 252, .5); box-shadow: 0 0 0 4px rgba(125, 211, 252, .08), 0 14px 34px rgba(2, 6, 23, .28); }
.brand-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.topbar-logo { width: 42px; height: 42px; min-width: 42px; }
.pos-logo { width: 36px; height: 36px; min-width: 36px; }
.register-select-mark { width: 82px; height: 82px; margin: 0 auto 16px; }
.avatar { background: radial-gradient(circle at 35% 25%, #7dd3fc, #0b1120 70%); color: #ecfeff; border: 1px solid rgba(125, 211, 252, .42); }
.pos-profile-shell .profile-menu { color: var(--text); text-transform: none; }
.pos-chip.user { background: rgba(8, 13, 26, .82); color: #ffffff; border-color: rgba(191, 219, 254, .45); text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(2,6,23,.24); }
:root[data-theme="light"] .pos-chip.user { color: #ffffff; background: #0f172a; border-color: rgba(37, 99, 235, .42); }
.pos-till-tab strong { color: #ffffff; text-shadow: 0 1px 2px rgba(15,23,42,.58); }
:root[data-theme="light"] .pos-till-tab { background: linear-gradient(135deg, #1d4ed8, #312e81); border-color: rgba(30,64,175,.58); box-shadow: 0 14px 30px rgba(30,64,175,.22); }
:root[data-theme="light"] .pos-till-tab span,
:root[data-theme="light"] .pos-till-tab small { color: #dbeafe; }
.register-select-shell { color: #f8fafc; }
.register-select-stage > .register-grid,
.register-select-stage > .empty.register-select-empty { display: none; }
.register-layout-guide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 18px; align-items: stretch; }
.single-register-guide { grid-template-columns: 1fr; }
.register-plan { position: relative; min-height: 360px; padding: 20px; overflow: hidden; border-radius: 28px; border: 1px solid rgba(125, 211, 252, .18); background: radial-gradient(circle at 22% 10%, rgba(125, 211, 252, .18), transparent 26%), linear-gradient(145deg, rgba(15, 23, 42, .96), rgba(3, 7, 18, .96)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 22px 60px rgba(2,6,23,.26); }
.register-plan-bar { height: 74px; display: grid; place-items: center; border-radius: 22px; color: #0f172a; background: linear-gradient(135deg, #67e8f9, #fde68a); font-size: 12px; font-weight: 950; text-transform: uppercase; letter-spacing: .18em; }
.register-plan-floor { min-height: 210px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; align-content: center; padding: 24px 8px; }
.register-plan-till { min-height: 112px; display: grid; gap: 6px; align-content: center; justify-items: start; padding: 16px; border-radius: 20px; text-align: left; color: #ecfeff; background: linear-gradient(180deg, rgba(125,211,252,.16), rgba(255,255,255,.04)); border: 1px solid rgba(125,211,252,.24); box-shadow: 0 16px 34px rgba(2,6,23,.22); }
.register-plan-till:hover { transform: translateY(-3px); border-color: rgba(251,191,36,.7); background: linear-gradient(180deg, rgba(251,191,36,.18), rgba(125,211,252,.08)); }
.register-plan-till span { color: #fde68a; font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .12em; }
.register-plan-till strong { font-size: 18px; }
.register-plan-till small { color: #bae6fd; line-height: 1.35; }
.register-plan-door { display: grid; place-items: center; min-height: 44px; border-radius: 999px; color: #c4b5fd; border: 1px dashed rgba(196,181,253,.35); background: rgba(255,255,255,.03); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.register-card-list { align-self: stretch; grid-template-columns: 1fr; max-height: 360px; overflow: auto; padding-right: 4px; }
.register-card-list .register-card { min-height: 116px; justify-items: start; text-align: left; }
.register-card-list .register-icon { border-radius: 999px; font-size: 18px; font-weight: 950; }
.missing-note-dock:not(.open) { padding: 8px; border-radius: 18px; }
.missing-note-dock:not(.open) .missing-note-trigger { min-height: 54px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 8px 10px; border-radius: 14px; }
.missing-note-dock:not(.open) .missing-note-icon { width: 34px; height: 34px; border-radius: 12px; font-size: 16px; }
.missing-note-dock:not(.open) .missing-note-copy { gap: 1px; }
.missing-note-dock:not(.open) .missing-note-copy strong { font-size: 14px; }
.missing-note-dock:not(.open) .missing-note-copy small { display: none; }
.missing-note-dock:not(.open) .missing-note-kicker { min-height: auto; padding: 0; border: 0; background: transparent; color: #b45309; font-size: 9px; }
.missing-note-dock:not(.open) .missing-note-meta,
.missing-note-dock:not(.open) .missing-note-feed,
.missing-note-dock:not(.open) .missing-note-empty { display: none; }
.missing-note-dock:not(.open) .missing-note-cta { min-height: 34px; padding: 0 12px; font-size: 10px; }
.missing-note-form textarea { min-height: 82px; }
.date-time-field { min-width: min(100%, 320px); }
.date-time-control { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(112px, .75fr); gap: 8px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--field-bg), var(--panel-2) 18%); border: 1px solid var(--field-border); }
.date-time-control input { min-height: 38px; border: 0; box-shadow: none; background: color-mix(in srgb, var(--field-bg), transparent 0%); }
.data-table table { min-width: 920px; }
.table-sort { width: 100%; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0; color: inherit; background: transparent; text-align: left; font-size: inherit; font-weight: 950; text-transform: inherit; letter-spacing: inherit; }
.table-sort span { min-height: 22px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--panel-2), transparent 22%); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.table-sort.active span { color: #111827; background: linear-gradient(135deg, #fde68a, #fb923c); }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--card-border); background: color-mix(in srgb, var(--panel), transparent 4%); }
.table-footer-controls, .pager, .per-page-control { display: flex; align-items: center; gap: 8px; }
.per-page-control { min-width: 0; }
.per-page-control span { color: var(--muted); font-size: 12px; font-weight: 850; white-space: nowrap; }
.per-page-control select { min-height: 36px; width: 78px; }
.pager .btn { min-height: 34px; padding: 0 11px; border-radius: 10px; }
.pager-gap { color: var(--muted); padding: 0 4px; }
.user-overview-grid, .tabs-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.bundle-form-grid { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(420px, 1.15fr); gap: 18px; align-items: start; }
.bundle-details-card, .bundle-builder-card { padding: 22px; border-radius: 24px; display: grid; gap: 18px; background: radial-gradient(circle at top left, rgba(245,158,11,.10), transparent 36%), color-mix(in srgb, var(--panel), transparent 0%); }
.bundle-details-card h3, .bundle-builder-card h3 { margin: 0; }
.bundle-live-summary { display: grid; gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid rgba(245,158,11,.22); background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(124,58,237,.08)); }
.bundle-live-summary div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bundle-live-summary span, .deal-row-preview span { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.bundle-live-summary strong { color: var(--text); }
.bundle-builder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.bundle-builder-head p { margin: 4px 0 0; }
.deal-row-stack { display: grid; gap: 12px; }
.bundle-builder-row { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--panel-2), transparent 5%); box-shadow: 0 14px 34px rgba(2,6,23,.08); }
.deal-row-main { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(92px, .35fr) auto; gap: 12px; align-items: end; }
.deal-row-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(148,163,184,.10); color: var(--muted); }
.deal-row-preview strong { color: var(--text); }
.deal-row-preview em { color: #fbbf24; font-style: normal; font-weight: 900; }
.bundle-form-actions { grid-column: 1 / -1; }
.pos-deal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.pos-deal-card { min-height: 240px; display: grid; align-content: space-between; gap: 16px; padding: 18px; border-radius: 24px; border: 1px solid rgba(245,158,11,.26); background: radial-gradient(circle at top left, rgba(245,158,11,.28), transparent 36%), linear-gradient(135deg, #17111e, #080a12); box-shadow: 0 18px 46px rgba(124,58,237,.22); color: #fff; }
.pos-deal-card-head { display: grid; gap: 8px; }
.pos-deal-card-head span { color: #fcd34d; font-size: 12px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.pos-deal-card-head strong { font-size: 22px; line-height: 1.05; }
.pos-deal-card-head small { color: rgba(255,255,255,.72); line-height: 1.45; }
.pos-deal-price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pos-deal-price-row div { padding: 12px; border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.pos-deal-price-row span { display: block; color: rgba(255,255,255,.64); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.pos-deal-price-row strong { display: block; margin-top: 4px; font-size: 20px; color: #fff7ed; }
.bundle-applied-list { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 9px 0; border-top: 1px dashed rgba(148,163,184,.35); border-bottom: 1px dashed rgba(148,163,184,.35); color: #166534; }
.bundle-applied-list span { font-size: 12px; line-height: 1.35; }
.bundle-applied-list strong { color: #166534; }
.payment-bundle-stack { display: grid; gap: 5px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.10); }
.payment-line.bundle strong { color: #86efac; }
.movement-filter-card { margin-bottom: 14px; padding: 18px; border-radius: 22px; }
.movement-positive, .movement-negative, .movement-neutral { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font-weight: 950; }
.movement-positive { color: #166534; background: rgba(34,197,94,.16); border: 1px solid rgba(34,197,94,.28); }
.movement-negative { color: #991b1b; background: rgba(239,68,68,.16); border: 1px solid rgba(239,68,68,.28); }
.movement-neutral { color: #92400e; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.24); }
.movement-note { display: inline-block; max-width: 260px; white-space: normal; line-height: 1.35; color: var(--muted); }
.link-btn { border: 0; background: transparent; color: #f59e0b; font-weight: 900; cursor: pointer; padding: 0; }
@media (max-width: 980px) {
  .register-layout-guide { grid-template-columns: 1fr; }
  .register-plan { min-height: auto; }
  .register-plan-floor { grid-template-columns: 1fr; }
  .table-footer { align-items: stretch; flex-direction: column; }
  .table-footer-controls { justify-content: space-between; flex-wrap: wrap; }
  .pager { overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
  .user-overview-grid, .tabs-overview-grid { grid-template-columns: 1fr; }
  .date-time-control { grid-template-columns: 1fr; }
  .bundle-form-grid, .deal-row-main, .bundle-builder-head, .deal-row-preview { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }
  .pos-deal-grid { grid-template-columns: 1fr; }
}