/* Atithi Cloud design system — indigo night + marigold, warm neutral canvas */
:root {
  /* Rich brand: royal indigo -> violet, marigold accent, emerald / rose status. */
  --indigo: #172f6e; --indigo-2: #1e3a8a; --indigo-3: #2f4fa8; --indigo-soft: #eef0ff; --indigo-ink: #1e1b4b;
  --violet: #b8901f; --violet-soft: #f3edff; --fuchsia: #c026d3; --fuchsia-soft: #fdf0ff;
  --marigold: #f59e0b; --marigold-2: #fbbf24; --marigold-soft: #fff7e6; --marigold-ink: #8a5200;
  --teal: #059669; --teal-soft: #e7f8f1; --rose: #e11d48; --sky: #0284c7; --sky-soft: #e7f5fd;
  --bg: #f4f5fb; --surface: #ffffff; --surface-2: #f9fafe; --text: #1b1d3a; --muted: #6a6f8e; --line: #e5e7f2; --line-2: #d4d7e8;
  --ok: #047857; --ok-soft: #e3f7ee; --warn: #b45309; --warn-soft: #fff4e0; --bad: #be123c; --bad-soft: #ffe9ef;
  --side-1: #15123a; --side-2: #2b2380; --side-text: #cfd0f5; --side-muted: #9294d0;
  --radius: 14px; --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(30, 27, 75, .05), 0 1px 3px rgba(30, 27, 75, .05);
  --shadow-2: 0 10px 28px -10px rgba(23, 47, 110, .25), 0 2px 6px rgba(30, 27, 75, .06);
  --shadow-3: 0 28px 64px -16px rgba(21, 18, 58, .45);
  --serif: 'Fraunces', Georgia, 'Noto Serif', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans Devanagari', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.5 var(--sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 650; margin: 0 0 12px; color: var(--indigo-ink); letter-spacing: -.01em; }
h1 { font-family: var(--serif); font-size: 26px; font-weight: 600; } h2 { font-size: 18px; } h3 { font-size: 15px; }
a { color: var(--indigo-2); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid rgba(30, 58, 138, .45); outline-offset: 2px; }
::selection { background: #fde68a; color: var(--indigo-ink); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
code { background: var(--indigo-soft); padding: 1px 6px; border-radius: 6px; font-size: 12px; color: var(--indigo); }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
details summary { cursor: pointer; color: var(--indigo-2); font-weight: 500; }

/* ---------- buttons & inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text);
  padding: 8px 14px; border-radius: 10px; cursor: pointer; font-weight: 550; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; box-shadow: var(--shadow-1); }
.btn:hover { border-color: var(--indigo-3); color: var(--indigo); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, #1e3a8a, #0b1a3f); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -6px rgba(30, 58, 138, .6); }
.btn.primary:hover { background: linear-gradient(135deg, var(--indigo-3), #c9a227); color: #fff; }
.btn.accent { background: linear-gradient(135deg, var(--marigold-2), var(--marigold)); border-color: transparent; color: #3b2300; box-shadow: 0 6px 16px -6px rgba(245, 158, 11, .6); }
.btn.accent:hover { filter: brightness(1.05); color: #2a1900; }
.btn.danger { color: var(--bad); border-color: #f5c2cf; background: var(--surface); } .btn.danger:hover { background: var(--bad-soft); color: var(--bad); }
.btn.small { padding: 5px 11px; font-size: 13px; border-radius: 8px; }
.btn.big { padding: 13px 18px; font-size: 15.5px; min-height: 50px; border-radius: 12px; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
input, select, textarea { border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; background: var(--surface); color: var(--text); width: 100%; transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: #b6bad3; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--indigo-3); box-shadow: 0 0 0 4px rgba(30, 58, 138, .16); }
input[type=checkbox], input[type=radio] { accent-color: var(--indigo-2); width: 16px; height: 16px; }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; font-weight: 600; letter-spacing: .01em; }
.field { margin-bottom: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .row > .grow, .grow { flex: 1; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .right { text-align: right; } .mt { margin-top: 16px; } .mb { margin-bottom: 16px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; }
.side { background: radial-gradient(420px 320px at 0 0, rgba(184,144,31,.45), transparent 70%), linear-gradient(180deg, var(--side-2) 0%, #1f1a60 45%, var(--side-1) 100%); color: var(--side-text); padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3b358f transparent; }
.brand { display: flex; gap: 11px; align-items: center; padding: 4px 10px 20px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 10px; }
.brand b { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.brand small { display: block; color: var(--marigold-2); font-size: 11.5px; font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a { display: flex; align-items: center; gap: 11px; color: var(--side-text); padding: 9px 12px; border-radius: 10px; margin-bottom: 2px; font-weight: 500; font-size: 13.5px; transition: background .15s, color .15s; }
.nav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav a.on { background: linear-gradient(90deg, rgba(251,191,36,.24), rgba(251,191,36,.04)); color: #fff; box-shadow: inset 3px 0 0 var(--marigold-2); }
.nav a.on svg { color: var(--marigold-2); opacity: 1; }
.nav a.locked { opacity: .55; } .nav .lock { margin-left: auto; display: flex; } .nav .lock svg { width: 14px; height: 14px; }
.nav .sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--side-muted); margin: 18px 12px 6px; font-weight: 600; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: rgba(255,255,255,.85); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.top .who { margin-left: auto; display: flex; align-items: center; gap: 10px; text-align: right; font-size: 13px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--indigo-2), var(--fuchsia)); flex: none; }
.content { padding: 26px 28px 64px; max-width: 1440px; width: 100%; }
.menu-toggle { display: none; }
#net { display: inline-flex; align-items: center; background: var(--surface-2); border: 1px solid var(--line); padding: 3px 10px; border-radius: 99px; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 30; width: 264px; transform: translateX(-100%); transition: transform .22s; box-shadow: var(--shadow-3); }
  .side.open { transform: none; }
  .menu-toggle { display: inline-flex; }
  .content { padding: 18px 16px 48px; }
  .top { padding: 10px 16px; } .top .who > div { display: none; } #net { display: none; }
}

/* ---------- cards, KPIs, tables ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-1); }
.card h3 { display: flex; align-items: center; gap: 8px; }
.kpi { position: relative; overflow: hidden; padding: 18px 18px 16px 20px; transition: box-shadow .2s, transform .2s; }
.kpi:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.kpi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--kpi, var(--indigo)); }

.grid > .kpi:nth-child(4n+1) { --kpi: var(--indigo); } .grid > .kpi:nth-child(4n+2) { --kpi: var(--marigold); }
.grid > .kpi:nth-child(4n+3) { --kpi: var(--teal); } .grid > .kpi:nth-child(4n+4) { --kpi: var(--fuchsia); }
.kpi .v { font-size: 26px; font-weight: 700; color: var(--indigo-ink); letter-spacing: -.02em; margin-top: 4px; }
.kpi .l { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th { font-size: 11.5px; color: var(--muted); font-weight: 650; background: var(--surface-2); text-transform: uppercase; letter-spacing: .05em; position: sticky; top: 0; }
tbody tr:nth-child(even) td { background: #fbfbff; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--indigo-soft); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.card table th { background: transparent; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--indigo-soft); color: var(--indigo); white-space: nowrap; text-transform: capitalize; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.gold { background: var(--marigold-soft); color: var(--marigold-ink); }
.meter { height: 8px; background: #eceef8; border-radius: 99px; overflow: hidden; } .meter i { display: block; height: 100%; background: linear-gradient(90deg, #1e3a8a, #c9a227); border-radius: 99px; }
.meter.hi i { background: var(--warn); } .meter.full i { background: var(--bad); }
.bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .bar span:first-child { width: 110px; font-size: 12.5px; color: var(--muted); text-transform: capitalize; }
.bar .track { flex: 1; height: 12px; background: #eceef8; border-radius: 99px; overflow: hidden; } .bar .track i { display: block; height: 100%; background: linear-gradient(90deg, #1e3a8a, #c9a227); border-radius: 99px; }
.banner { padding: 10px 28px; font-size: 13px; display: flex; gap: 12px; align-items: center; font-weight: 500; }
.banner a { font-weight: 650; text-decoration: underline; }
.banner.warn { background: var(--warn-soft); color: #6a4204; border-bottom: 1px solid #f1e2b8; } .banner.bad { background: var(--bad-soft); color: #7a1a12; border-bottom: 1px solid #f6cdc8; }
.banner.info { background: linear-gradient(90deg, #172f6e, #b8901f); color: #fff; font-weight: 600; }
.empty { padding: 36px 20px; text-align: center; color: var(--muted); }
.tabs { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; background: #eceef8; padding: 4px; border-radius: 12px; width: fit-content; max-width: 100%; }
.tabs button { border: 0; background: transparent; padding: 7px 15px; border-radius: 9px; cursor: pointer; font-weight: 550; color: var(--muted); }
.tabs button:hover { color: var(--indigo); }
.tabs button.on { background: var(--surface); color: var(--indigo); box-shadow: var(--shadow-1); }
.feat { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.feat:last-child { border-bottom: 0; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--surface); }
.login .hero { position: relative; overflow: hidden; color: #dfe0f7; padding: 56px; display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(900px 500px at 110% -10%, rgba(192,38,211,.35), transparent 60%), radial-gradient(900px 500px at -20% 120%, rgba(245,158,11,.30), transparent 60%), linear-gradient(160deg, #3a2fb0, #15123a); }
.login .hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); pointer-events: none; }
.login .hero > * { position: relative; z-index: 1; max-width: 560px; }
.login .hero .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; color: #fff; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.login .hero h1 { color: #fff; font-size: 42px; line-height: 1.12; margin-bottom: 16px; } .login .hero em { color: var(--marigold-2); font-style: italic; }
.login .hero p { font-size: 16px; line-height: 1.6; color: #cdcff2; }
.login .points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.login .points li { display: flex; gap: 12px; align-items: center; font-size: 14.5px; color: #ecedfc; }
.login .points svg { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: rgba(255,255,255,.1); color: var(--marigold-2); flex: none; }
.login .form { padding: 56px; display: flex; flex-direction: column; justify-content: center; max-width: 560px; width: 100%; margin: 0 auto; }
.login .form h1 { font-size: 30px; margin-bottom: 4px; }
.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo button { text-align: left; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 8px 12px; cursor: pointer; font-size: 12px; color: var(--muted); transition: all .15s; }
.demo button:hover { border-color: var(--indigo-3); background: var(--indigo-soft); color: var(--indigo); }
.demo button b { display: block; font-size: 13px; color: var(--text); font-weight: 600; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 24px 0 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .login { grid-template-columns: 1fr; } .login .hero { padding: 32px 18px; } .login .hero h1 { font-size: 30px; } .login .hero .logo { margin-bottom: 20px; } .login .points { display: none; } .login .form { padding: 28px 18px; } }

/* ---------- modal & toast ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(21, 18, 58, .55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; animation: fade .15s ease-out; }
.modal { background: var(--surface); border-radius: 18px; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; padding: 24px; box-shadow: var(--shadow-3); animation: pop .18s ease-out; }
.modal h2 { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.modal.wide { width: min(880px, 100%); }
@keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; align-items: center; }
#toast div { background: var(--indigo-ink); color: #fff; padding: 11px 18px; border-radius: 12px; margin-top: 8px; box-shadow: var(--shadow-3); font-weight: 500; animation: pop .2s ease-out; border-left: 4px solid var(--marigold); }
#toast div.err { background: #4c0519; border-left-color: #fb7185; }

/* ---------- POS ---------- */
.pos { display: grid; grid-template-columns: 236px 1fr 360px; gap: 16px; height: calc(100vh - 150px); }
.pos > div { min-height: 0; overflow-y: auto; }
.tables { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tbl { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 6px; text-align: center; background: var(--surface); cursor: pointer; min-height: 70px; box-shadow: var(--shadow-1); transition: all .15s; color: var(--text); }
.tbl:hover { border-color: var(--indigo-3); transform: translateY(-1px); }
.tbl b { display: block; font-size: 17px; color: var(--indigo-ink); }
.tbl.busy { border-color: var(--marigold-2); background: var(--marigold-soft); }
.tbl.billed { border-color: var(--indigo-3); background: var(--indigo-soft); }
.tbl.sel { outline: 3px solid var(--indigo-2); outline-offset: 1px; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.item { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px; cursor: pointer; text-align: left; min-height: 80px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; justify-content: space-between; transition: all .15s; color: var(--text); font-weight: 550; }
.item:hover:not(:disabled) { border-color: var(--indigo-3); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.item:disabled { opacity: .55; cursor: not-allowed; }
.item .p { color: var(--indigo); font-size: 14px; font-weight: 700; }
.veg { display: inline-block; width: 12px; height: 12px; border: 1.5px solid #15803d; border-radius: 3px; position: relative; margin-right: 6px; vertical-align: -1px; } .veg::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: #15803d; }
.veg.non { border-color: #b91c1c; } .veg.non::after { background: #b91c1c; }
.cart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; box-shadow: var(--shadow-2); overflow: hidden; }
.cart > div:first-child { background: linear-gradient(90deg, var(--indigo-soft), var(--violet-soft)); border-bottom: 1px solid var(--line); }
.cart .lines { flex: 1; overflow-y: auto; padding: 8px 14px; }
.cart .line { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.cart .line.sent { color: var(--muted); }
.qty { display: flex; align-items: center; gap: 6px; } .qty button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-size: 17px; font-weight: 600; color: var(--indigo); }
.qty button:hover { background: var(--indigo-soft); }
.cart .foot { padding: 14px; border-top: 1px solid var(--line); background: var(--surface-2); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22a06b; margin-right: 7px; box-shadow: 0 0 0 3px rgba(34,160,107,.18); } .status-dot.off { background: var(--rose); box-shadow: 0 0 0 3px rgba(180,35,24,.18); }
@media (max-width: 1150px) { .pos { grid-template-columns: 1fr; height: auto; } }

/* ---------- KDS ---------- */
.kds { background: radial-gradient(900px 400px at 100% 0, #2b2380, transparent), #100e2b; margin: -26px -28px -64px; padding: 22px; min-height: calc(100vh - 60px); color: #e6e8ff; }
.kds h1 { color: #fff; }
.kds .tabs { background: #1d1a4a; } .kds .tabs button { color: #aeb0e0; } .kds .tabs button.on { background: var(--marigold-2); color: #2a1a00; }
.tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ticket { background: #1b1844; border: 1px solid #2c2868; border-radius: 14px; border-top: 6px solid #22a06b; padding: 14px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.ticket.slow { border-top-color: var(--marigold); } .ticket.late { border-top-color: #e5484d; animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(229,72,77,.25); } }
.ticket h3 { color: #fff; font-family: var(--sans); font-size: 18px; display: flex; justify-content: space-between; margin-bottom: 4px; }
.ticket ul { list-style: none; padding: 0; margin: 12px 0; font-size: 17px; } .ticket li { padding: 6px 0; border-bottom: 1px solid #2c2868; } .ticket li i { display: block; font-size: 13px; color: var(--marigold-2); font-style: normal; }
.ticket .btn { width: 100%; }

/* ---------- rooms ---------- */
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.room { border-radius: 14px; padding: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; min-height: 96px; box-shadow: var(--shadow-1); transition: all .15s; position: relative; }
.room:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.room b { font-size: 22px; color: var(--indigo-ink); } .room .t { font-size: 12px; color: var(--muted); }
.room::before { content: ''; position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--rc, #10b981); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rc, #10b981) 20%, transparent); }
.room.vacant_clean { --rc: #10b981; } .room.vacant_dirty { --rc: #f59e0b; background: linear-gradient(180deg, var(--surface), #fff7e6); }
.room.occupied { --rc: var(--indigo-2); background: linear-gradient(180deg, var(--surface), var(--indigo-soft)); } .room.out_of_order { --rc: var(--bad); background: repeating-linear-gradient(135deg, #fff, #fff 10px, #f8f3f2 10px, #f8f3f2 20px); }
.hk-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 10px; } .hk-btns .btn { padding: 12px 4px; font-size: 13px; }

/* ---------- misc ---------- */
.matrix td, .matrix th { text-align: center; padding: 8px; } .matrix td:first-child, .matrix th:first-child { text-align: left; }
.steps { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.steps span { padding: 7px 14px; border-radius: 99px; background: #eceef8; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.steps span.on { background: var(--indigo-2); color: #fff;  } .steps span.done { background: var(--ok-soft); color: var(--ok); }
.plan-card { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--surface); box-shadow: var(--shadow-1); transition: box-shadow .2s; }
.plan-card:hover { box-shadow: var(--shadow-2); }
.plan-card.current { border: 2px solid var(--indigo-3); background: linear-gradient(180deg, var(--indigo-soft), var(--surface) 45%); }
.lockview { max-width: 580px; margin: 48px auto; text-align: center; padding: 36px; }
.lockview .ico { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 18px; display: grid; place-items: center; background: var(--marigold-soft); color: var(--marigold); }
.receipt { font-family: 'Courier New', monospace; }
@media print { .side, .top, .banner, #toast, .no-print, form.row { display: none !important; } .shell { display: block; } .card { box-shadow: none; break-inside: avoid; } }


/* =================== layer 3: advanced UI =================== */
.page-sub { color: var(--muted); font-size: 13px; padding-left: 12px; border-left: 1px solid var(--line); }
.search-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-width: 240px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); color: var(--muted); cursor: pointer; font-size: 13px; }
.search-btn:hover { border-color: var(--indigo-3); color: var(--text); } .search-btn span { flex: 1; text-align: left; }
kbd { font: 600 11px var(--sans); color: var(--muted); background: var(--surface); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--muted); cursor: pointer; }
.icon-btn:hover { color: var(--indigo); border-color: var(--indigo-3); }
.top .who { margin-left: 0; }
@media (max-width: 1100px) { .search-btn span, .search-btn kbd, .page-sub { display: none; } .search-btn { min-width: 0; } }
/* collapsible sidebar */
.brand { position: relative; }
.collapse-btn { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: var(--side-text); display: grid; place-items: center; cursor: pointer; transition: transform .2s; }
.collapse-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
.shell { transition: grid-template-columns .2s; }
.shell.collapsed { grid-template-columns: 76px 1fr; }
.shell.collapsed .brand > div, .shell.collapsed .nav a span, .shell.collapsed .nav .sec, .shell.collapsed .nav .lock { display: none; }
.shell.collapsed .brand { flex-direction: column; padding: 4px 0 16px; } .shell.collapsed .collapse-btn { margin: 6px auto 0; transform: rotate(180deg); }
.shell.collapsed .nav a { justify-content: center; padding: 11px 0; } .shell.collapsed .nav a svg { width: 20px; height: 20px; }
@media (max-width: 860px) { .collapse-btn { display: none; } .shell.collapsed { grid-template-columns: 1fr; } }
/* skeleton */
.sk-card { display: grid; gap: 12px; } .sk { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--line) 25%, var(--surface-2) 50%, var(--line) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.sk.tall { height: 26px; } .w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; }
@keyframes shimmer { to { background-position: -200% 0; } }
/* palette */
.palette-modal { padding: 0; width: min(620px, 100%); align-self: flex-start; margin-top: 12vh; overflow: hidden; }
.palette-in { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--muted); }
.palette-in input { border: 0; box-shadow: none; padding: 6px 0; font-size: 16px; background: transparent; } .palette-in input:focus { box-shadow: none; }
.palette-list { max-height: 50vh; overflow-y: auto; padding: 8px; }
.palette-item { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 10px 12px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; color: var(--text); font-size: 14px; text-align: left; }
.palette-item small { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.palette-item.on, .palette-item:hover { background: var(--indigo-soft); color: var(--indigo); }
/* dashboard */
.hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.hello h1 { font-size: 30px; margin-bottom: 4px; } .hello p { margin: 0; }
.quick { display: flex; gap: 10px; flex-wrap: wrap; }
.quick-a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--text); box-shadow: var(--shadow-1); transition: all .15s; }
.quick-a:hover { text-decoration: none; border-color: var(--indigo-3); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.quick-a b { display: block; font-size: 13.5px; } .quick-a small { color: var(--muted); font-size: 12px; }
.kpi-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--indigo-soft); color: var(--indigo); flex: none; }
.kpi-ico.lg { width: 48px; height: 48px; border-radius: 14px; }
.kpi2 .kpi-top { display: flex; align-items: center; gap: 10px; } .kpi2 .kpi-top .l { flex: 1; }
.kpi2 .v { font-size: 28px; margin: 12px 0 6px; } .kpi2 .kpi-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-height: 36px; }
.grid > .kpi2:nth-child(4n+2) .kpi-ico { background: var(--marigold-soft); color: var(--marigold); }
.grid > .kpi2:nth-child(4n+3) .kpi-ico { background: var(--teal-soft); color: var(--teal); } .grid > .kpi2:nth-child(4n+4) .kpi-ico { background: var(--fuchsia-soft); color: var(--fuchsia); }
.trend { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; } .trend.up { background: var(--ok-soft); color: var(--ok); } .trend.down { background: var(--bad-soft); color: var(--bad); }
.spark { flex: none; } .spark-line { fill: none; stroke: var(--kpi, var(--indigo)); stroke-width: 2; stroke-linejoin: round; } .spark-fill { fill: var(--kpi, var(--indigo)); opacity: .08; } .spark-dot { fill: var(--kpi, var(--indigo)); }
.dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-grid .span2 { grid-column: span 2; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .dash-grid { grid-template-columns: 1fr; } .dash-grid .span2 { grid-column: auto; } }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .card-head h3 { margin: 0; } .card-head p { margin: 2px 0 0; }
.chart { width: 100%; height: auto; display: block; } .grid-line { stroke: var(--line); stroke-dasharray: 3 4; } .axis { fill: var(--muted); font: 500 11px var(--sans); }
.bar-past { fill: var(--indigo-3); opacity: .3; transition: opacity .15s; } .bar-today { fill: url(#barGrad); } .bar-g:hover .bar-past { opacity: .6; }
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .donut-track { stroke: var(--line); } .donut-v { fill: var(--text); font: 700 22px var(--sans); }
.legend { display: grid; gap: 8px; flex: 1; min-width: 140px; } .legend div { display: flex; align-items: center; gap: 8px; font-size: 13px; } .legend i { width: 10px; height: 10px; border-radius: 3px; } .legend span { flex: 1; color: var(--muted); }
.rank { display: flex; align-items: center; gap: 12px; padding: 7px 0; } .rank-n { width: 24px; height: 24px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.meter.thin { height: 5px; margin-top: 5px; }
.person { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); } .person:last-child { border: 0; } .person small { display: block; color: var(--muted); font-size: 12px; }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; } .avatar.alt { background: linear-gradient(135deg, var(--marigold-2), #ea580c); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 10px; } .empty-state b { margin-top: 6px; }

/* =================== dark mode =================== */
[data-theme="dark"] {
  --bg: #0e0d24; --surface: #17153a; --surface-2: #1c1a45; --text: #e8e9ff; --muted: #9a9cc8; --line: #2a2760; --line-2: #36338a;
  --indigo: #d4af37; --indigo-2: #2f4fa8; --indigo-3: #e6d39a; --indigo-soft: #24215a; --indigo-ink: #eef0ff;
  --violet-soft: #2a1f5c; --fuchsia-soft: #3a1846; --teal-soft: #0f2e27; --marigold-soft: #33260c; --marigold-ink: #fcd34d;
  --ok: #34d399; --ok-soft: #0f2e27; --warn: #fbbf24; --warn-soft: #33260c; --bad: #fb7185; --bad-soft: #3a1424;
  --side-1: #0a0920; --side-2: #1d1863;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 10px 28px -10px rgba(0,0,0,.7);
  color-scheme: dark;
}
[data-theme="dark"] .top { background: rgba(23, 21, 58, .85); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] tbody tr:nth-child(even) td { background: #1a1840; }
[data-theme="dark"] .tabs { background: #1f1c4c; } [data-theme="dark"] .tabs button.on { background: var(--surface); }

[data-theme="dark"] .btn.accent { background: var(--marigold); border-color: var(--marigold); color: #1d1608; }
[data-theme="dark"] .room.vacant_dirty { background: #2a2312; } [data-theme="dark"] .room.out_of_order { background: repeating-linear-gradient(135deg, #17153a, #17153a 10px, #24142e 10px, #24142e 20px); }


[data-theme="dark"] .meter, [data-theme="dark"] .bar .track { background: #2a2760; } [data-theme="dark"] .tbl.busy { background: #2a2312; } [data-theme="dark"] .tbl.billed { background: #24215a; }
[data-theme="dark"] .login { background: var(--surface); }

.page-sub, .top .who > div { white-space: nowrap; }
@media (max-width: 1440px) { .top .who > div .small { display: none; } }
@media (max-width: 1280px) { .page-sub { display: none; } .search-btn { min-width: 0; } .search-btn span { display: none; } }

/* ---------- housekeeping board ---------- */
.hk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 1.2fr; gap: 14px; margin-bottom: 18px; }
@media (max-width: 1150px) { .hk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hk-ready { grid-column: span 2; } }
.hk-stat { --c: var(--indigo); --cs: var(--indigo-soft); display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); cursor: pointer; text-align: left; color: var(--text); transition: all .15s; position: relative; overflow: hidden; }
.hk-stat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); opacity: .9; }
.hk-stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.hk-stat.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.hk-stat b { display: block; font-size: 26px; line-height: 1.1; color: var(--text); } .hk-stat small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.hk-stat-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--cs); color: var(--c); flex: none; }
.clean { --c: #059669; --cs: #e3f7ee; } .dirty { --c: #d97706; --cs: #fff3dc; } .occ { --c: #1e3a8a; --cs: #eef0ff; } .ooo { --c: #e11d48; --cs: #ffe9ef; }
[data-theme="dark"] .clean { --c: #34d399; --cs: #0f2e27; } [data-theme="dark"] .dirty { --c: #fbbf24; --cs: #33260c; } [data-theme="dark"] .occ { --c: #e6d39a; --cs: #24215a; } [data-theme="dark"] .ooo { --c: #fb7185; --cs: #3a1424; }
.hk-ready { display: grid; gap: 6px; align-content: center; } .hk-ready-v { font-size: 26px; font-weight: 700; color: var(--text); }
.hk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tab-n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: var(--line); color: var(--muted); font-size: 11.5px; font-weight: 700; }
.tabs button.on .tab-n { background: var(--indigo-soft); color: var(--indigo); }
.hk-bulk { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 6px 8px 6px 14px; border-radius: 12px; background: var(--indigo-soft); color: var(--indigo); }
.hk-floor { margin-bottom: 22px; } .hk-floor-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-weight: 700; color: var(--text); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.hk-floor-h small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.hk-grid { align-items: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.hk-card { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 6px; transition: box-shadow .15s, transform .15s; }
.hk-card:hover { box-shadow: var(--shadow-2); }
.hk-card.sel { box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo-3) 35%, transparent); }
.hk-card.ooo { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 12px, color-mix(in srgb, var(--cs) 60%, var(--surface)) 12px, color-mix(in srgb, var(--cs) 60%, var(--surface)) 24px); }
.hk-top { display: flex; align-items: center; gap: 8px; } .hk-cb, .hk-cb-sp { width: 16px; height: 16px; flex: none; }
.hk-no { font-size: 24px; font-weight: 750; color: var(--text); letter-spacing: -.02em; flex: 1; }
.hk-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--cs); color: var(--c); }
.hk-type { font-size: 13px; color: var(--muted); } .hk-type b { color: var(--text); }
.hk-note { font-size: 12.5px; color: var(--c); background: var(--cs); border-radius: 8px; padding: 5px 8px; }
.hk-meta { font-size: 11.5px; color: var(--muted); }
.hk-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.hk-seg button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 12px var(--sans); cursor: pointer; transition: all .15s; min-height: 48px; }
.hk-seg button:hover { background: var(--cs); color: var(--c); }
.hk-seg button.on { background: var(--c); color: #fff; box-shadow: 0 4px 10px -4px var(--c); }
[data-theme="dark"] .hk-seg button.on { color: #0e0d24; }

/* ---------- front desk ---------- */
.fd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 14px; margin-bottom: 18px; }
@media (max-width: 1200px) { .fd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fd-actions { grid-column: span 2; } }
.fd-stat { --c: var(--indigo); --cs: var(--indigo-soft); display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.fd-stat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); }
.fd-stat b { display: block; font-size: 26px; line-height: 1.1; color: var(--text); } .fd-stat small { display: block; color: var(--muted); font-weight: 600; font-size: 12.5px; } .fd-stat em { font-style: normal; font-size: 11.5px; color: var(--c); font-weight: 600; }
.fd-stat.arr, .fd-col.arr { --c: #059669; --cs: #e3f7ee; } .fd-stat.dep, .fd-col.dep { --c: #d97706; --cs: #fff3dc; } .fd-stat.inh, .fd-col.inh { --c: #1e3a8a; --cs: #eef0ff; } .fd-stat.free { --c: #c026d3; --cs: #fdf0ff; }
[data-theme="dark"] .fd-stat.arr, [data-theme="dark"] .fd-col.arr { --c: #34d399; --cs: #0f2e27; } [data-theme="dark"] .fd-stat.dep, [data-theme="dark"] .fd-col.dep { --c: #fbbf24; --cs: #33260c; } [data-theme="dark"] .fd-stat.inh, [data-theme="dark"] .fd-col.inh { --c: #e6d39a; --cs: #24215a; } [data-theme="dark"] .fd-stat.free { --c: #e879f9; --cs: #3a1846; }
.fd-actions { display: flex; gap: 10px; align-items: stretch; } .fd-actions .btn { flex-direction: column; gap: 0; } .fd-actions .btn small { font-size: 11px; color: var(--muted); font-weight: 500; }
.fd-col { border-top: 4px solid var(--c); } .fd-col h3 { display: flex; align-items: center; gap: 8px; } .fd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--cs); }
.fd-guest { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); } .fd-guest:last-child { border: 0; }
.fd-guest small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.fd-upcoming { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.fd-up { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); } .fd-up small { display: block; color: var(--muted); font-size: 12px; }
.fd-date { width: 44px; height: 48px; border-radius: 10px; background: linear-gradient(135deg, #1e3a8a, #0b1a3f); color: #fff; display: grid; place-items: center; align-content: center; font-size: 10.5px; text-transform: uppercase; line-height: 1.1; } .fd-date b { font-size: 18px; }
/* tape chart */
.tape { padding: 14px; } .tape-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.tape-row { display: flex; border-bottom: 1px solid var(--line); min-width: max-content; } .tape-row:last-child { border-bottom: 0; }
.tape-room { width: 120px; flex: none; padding: 8px 12px; position: sticky; left: 0; background: var(--surface); z-index: 2; border-right: 1px solid var(--line); border-left: 4px solid var(--rc, transparent); }
.tape-room b { display: block; color: var(--text); } .tape-room small { color: var(--muted); font-size: 11.5px; }
.tape-room.vacant_clean { --rc: #10b981; } .tape-room.vacant_dirty { --rc: #f59e0b; } .tape-room.occupied { --rc: #2f4fa8; } .tape-room.out_of_order { --rc: #e11d48; }
.tape-cells { position: relative; display: flex; }
.tape-cell { height: 52px; border-right: 1px solid var(--line); cursor: pointer; } .tape-cell:hover { background: var(--indigo-soft); }
.tape-cell.wk { background: var(--surface-2); } .tape-cell.today, .tape-day.today { background: color-mix(in srgb, var(--marigold-2) 14%, transparent); }
.tape-head { position: sticky; top: 0; z-index: 3; background: var(--surface); } .tape-head .tape-room { height: 50px; }
.tape-day { display: grid; place-items: center; align-content: center; padding: 6px 0; border-right: 1px solid var(--line); line-height: 1.1; } .tape-day small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; } .tape-day b { font-size: 15px; color: var(--text); }
.tape-bar { position: absolute; top: 9px; height: 34px; border-radius: 9px; border: 0; color: #fff; font: 600 12px var(--sans); text-align: left; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; z-index: 1; box-shadow: 0 4px 10px -4px rgba(0,0,0,.3); }
.tape-bar.inh { background: linear-gradient(135deg, #1e3a8a, #0b1a3f); } .tape-bar.bkd { background: linear-gradient(135deg, #10b981, #059669); }
.tape-bar:hover { filter: brightness(1.08); }
.lg-item { display: inline-flex; align-items: center; gap: 6px; } .lg-item i { width: 14px; height: 10px; border-radius: 3px; } .lg-item i.inh { background: var(--indigo-2); } .lg-item i.bkd { background: #10b981; }
/* room grid */
.fd-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.fd-room { --c: #10b981; text-align: left; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: var(--radius); padding: 14px; background: var(--surface); box-shadow: var(--shadow-1); cursor: pointer; color: var(--text); display: grid; gap: 6px; transition: all .15s; }
.fd-room:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.fd-room b { font-size: 22px; } .fd-room small { color: var(--muted); }
.fd-room-st { font-size: 11px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); padding: 3px 8px; border-radius: 99px; }
.fd-room-g { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; min-height: 32px; }
.fd-room.vacant_dirty { --c: #f59e0b; } .fd-room.occupied { --c: #2f4fa8; background: linear-gradient(180deg, var(--surface), var(--indigo-soft)); } .fd-room.out_of_order { --c: #e11d48; }
/* booking modal */
.bk-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; max-height: 210px; overflow-y: auto; padding: 2px; }
.bk-room { display: grid; gap: 1px; text-align: left; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; color: var(--text); }
.bk-room b { font-size: 17px; } .bk-room small { color: var(--muted); font-size: 11.5px; } .bk-room span { font-size: 12.5px; font-weight: 700; color: var(--indigo); } .bk-room em { font-style: normal; font-size: 10.5px; color: var(--warn); font-weight: 600; }
.bk-room:hover { border-color: var(--indigo-3); } .bk-room.on { border-color: var(--indigo-2); background: var(--indigo-soft); box-shadow: 0 0 0 3px rgba(30,58,138,.18); }
.bk-sum { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin-top: 6px; }
.bk-sum > div { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); } .bk-sum small { display: block; color: var(--muted); font-size: 11.5px; } .bk-sum b { font-size: 16px; color: var(--text); }
.bk-sum .tot { background: linear-gradient(135deg, #1e3a8a, #0b1a3f); border: 0; } .bk-sum .tot small, .bk-sum .tot b { color: #fff; }
@media (max-width: 640px) { .bk-sum { grid-template-columns: 1fr; } }

/* ---------- QR codes ---------- */
.qr-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; padding: 26px; margin-bottom: 18px; overflow: hidden;
  background: radial-gradient(600px 300px at 100% 0, var(--violet-soft), transparent 70%), radial-gradient(500px 300px at 0 100%, var(--marigold-soft), transparent 70%), var(--surface); }
.qr-hero h2 { font-family: var(--serif); font-size: 26px; margin: 10px 0 8px; } .qr-hero p { margin: 0 0 16px; max-width: 560px; }
.qr-steps { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.qr-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.qr-steps b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #1e3a8a, #0b1a3f); color: #fff; font-size: 12px; }
.qr-hero-prev { display: flex; justify-content: center; } .qr-hero-prev { height: 300px; align-items: center; } .qr-hero-prev .tent { transform: rotate(2deg) scale(.66); transform-origin: center; }
@media (max-width: 900px) { .qr-hero { grid-template-columns: 1fr; } .qr-hero-prev { display: none; } }
.qr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tent { width: 300px; background: #fff; color: #1b1d3a; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-3); text-align: center; border: 1px solid #e5e7f2; }
.tent-top { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: linear-gradient(135deg, #13285e, #0b1a3f); color: #fff; font-weight: 700; font-size: 14px; }
.tent-logo svg { display: block; }
.tent-title { font-family: var(--serif); font-size: 26px; font-weight: 600; margin-top: 16px; color: #1e1b4b; } .tent-sub { font-size: 12.5px; color: #6a6f8e; margin-top: 2px; }
.tent-qr { margin: 14px auto 8px; padding: 10px; width: fit-content; border-radius: 14px; border: 2px solid #eef0ff; } .tent-qr svg { display: block; }
.tent-table { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 18px; border-radius: 99px; background: #fff7e6; color: #8a5200; margin: 4px 0 12px; }
.tent-table small { font-size: 11px; font-weight: 700; letter-spacing: .12em; } .tent-table b { font-size: 24px; }
.tent-foot { font-size: 11px; color: #6a6f8e; padding: 10px; border-top: 1px dashed #e5e7f2; background: #f9fafe; }
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.qr-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-1); display: grid; gap: 10px; transition: box-shadow .15s, transform .15s; }
.qr-card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); } .qr-card.sel { box-shadow: 0 0 0 3px rgba(30,58,138,.3); border-color: var(--indigo-3); }
.qr-card-h { display: flex; align-items: center; gap: 10px; } .qr-card-h b { display: block; font-size: 16px; } .qr-card-h small { color: var(--muted); font-size: 12px; }
.qr-code { display: flex; justify-content: center; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); } .qr-code svg { display: block; }
.qr-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; } .qr-meta span:first-child { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--indigo); }
.qr-link { display: flex; align-items: center; gap: 6px; } .qr-link code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 14px; }
.qr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .qr-actions .btn { width: 100%; }

/* ---------- kitchen display v2 ---------- */
.kds2 { --k-bg: #0f0d26; --k-card: #1a1840; --k-line: #2c2868; --k-text: #eef0ff; --k-muted: #9a9cc8;
  background: radial-gradient(900px 420px at 100% -10%, rgba(184,144,31,.35), transparent 60%), radial-gradient(700px 400px at -10% 110%, rgba(30,58,138,.25), transparent 60%), var(--k-bg);
  margin: -26px -28px -64px; padding: 20px 24px 40px; min-height: calc(100vh - 60px); color: var(--k-text); }
.kds2:fullscreen { margin: 0; overflow-y: auto; }
.kds-top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.kds-title { display: flex; align-items: baseline; gap: 14px; } .kds-title h1 { color: #fff; margin: 0; font-size: 28px; } .kds-clock { font: 600 18px var(--sans); color: var(--marigold-2); font-variant-numeric: tabular-nums; }
.kds-kpis { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.kds-kpis > div { background: rgba(255,255,255,.06); border: 1px solid var(--k-line); border-radius: 12px; padding: 8px 16px; min-width: 104px; }
.kds-kpis b { display: block; font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; } .kds-kpis small { color: var(--k-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.kds-kpis .bad { border-color: #e11d48; background: rgba(225,29,72,.15); } .kds-kpis .bad b { color: #fb7185; }
.kds-tools { display: flex; gap: 8px; } .kds-ib { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--k-line); background: rgba(255,255,255,.06); color: #fff; font-size: 18px; cursor: pointer; } .kds-ib:hover { background: rgba(255,255,255,.12); }
.kds-stations { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.kds-stations button { padding: 9px 16px; border-radius: 99px; border: 1px solid var(--k-line); background: rgba(255,255,255,.04); color: var(--k-muted); font: 600 13px var(--sans); text-transform: capitalize; cursor: pointer; }
.kds-stations button span { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 99px; background: rgba(255,255,255,.12); color: #fff; font-size: 11.5px; }
.kds-stations button.on { background: linear-gradient(135deg, var(--marigold-2), var(--marigold)); color: #2a1a00; border-color: transparent; } .kds-stations button.on span { background: rgba(0,0,0,.15); color: #2a1a00; }
.kds-legend { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--k-muted); } .kds-legend i { width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.kds-legend .fresh, .kt.fresh { --age: #10b981; } .kds-legend .slow, .kt.slow { --age: #f59e0b; } .kds-legend .late, .kt.late { --age: #f43f5e; } .kds-legend i { background: var(--age); }
.kds-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .kds-board { grid-template-columns: 1fr; } }
.kcol { background: rgba(255,255,255,.03); border: 1px solid var(--k-line); border-radius: 16px; padding: 12px; min-height: 300px; }
.kcol h2 { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: .08em; margin: 4px 4px 12px; }
.kcol h2 em { margin-left: auto; font-style: normal; background: rgba(255,255,255,.1); padding: 2px 10px; border-radius: 99px; font-size: 13px; }
.kdot { width: 10px; height: 10px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc) 25%, transparent); }
.c-new { --cc: #d4af37; } .c-preparing { --cc: #fbbf24; } .c-ready { --cc: #34d399; }
.kcol-list { display: grid; gap: 12px; } .kempty { text-align: center; color: var(--k-muted); padding: 40px 10px; border: 1px dashed var(--k-line); border-radius: 12px; }
.kt { background: var(--k-card); border: 1px solid var(--k-line); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px -16px rgba(0,0,0,.8); border-top: 5px solid var(--age); }
.kt.late { animation: ktpulse 1.6s infinite; } @keyframes ktpulse { 50% { box-shadow: 0 0 0 4px rgba(244,63,94,.35); } }
.kt header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 6px; }
.kt-no { font-size: 20px; color: #fff; margin-right: 10px; } .kt-table { font-size: 15px; font-weight: 700; color: var(--marigold-2); text-transform: capitalize; }
.kt-timer { font: 800 26px var(--sans); color: var(--age); font-variant-numeric: tabular-nums; line-height: 1; } .kt-timer small { font-size: 11px; margin-left: 2px; font-weight: 600; }
.kt-tags { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 8px; }
.kt-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.08); color: var(--k-muted); text-transform: capitalize; }
.kt-tag.st { background: rgba(30,58,138,.2); color: #f3d27a; } .kt-tag.src-qr { background: rgba(192,38,211,.22); color: #f0abfc; } .kt-tag.src-swiggy { background: rgba(249,115,22,.22); color: #fdba74; } .kt-tag.src-zomato { background: rgba(225,29,72,.22); color: #fda4af; }
.kt ul { list-style: none; margin: 0; padding: 0 14px; }
.kt li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--k-line); font-size: 17px; font-weight: 600; cursor: pointer; user-select: none; }
.kt li i { display: block; font-style: normal; font-size: 13px; color: var(--marigold-2); font-weight: 500; margin-top: 2px; }
.kt-q { min-width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; font-weight: 800; }
.kt li.done { opacity: .45; } .kt li.done .grow { text-decoration: line-through; } .kt li.done .kt-q { background: #10b981; }
.kt footer { display: flex; align-items: center; gap: 10px; padding: 10px 14px 14px; } .kt footer small { color: var(--k-muted); flex: 1; }
.kt-btn { border: 0; border-radius: 11px; padding: 12px 18px; font: 700 14px var(--sans); cursor: pointer; color: #fff; min-height: 46px; }
.st-new .kt-btn { background: linear-gradient(135deg, #1e3a8a, #0b1a3f); } .st-preparing .kt-btn { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #2a1a00; } .st-ready .kt-btn { background: linear-gradient(135deg, #34d399, #059669); }
.kt-btn:hover { filter: brightness(1.08); } .kt-btn:disabled { opacity: .5; }
.kds-recent { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding: 12px 14px; border: 1px solid var(--k-line); border-radius: 14px; background: rgba(255,255,255,.03); }
.kds-recent span { color: var(--k-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; }
.kds-recent button { border: 1px solid var(--k-line); background: rgba(255,255,255,.05); color: var(--k-text); padding: 6px 12px; border-radius: 99px; font: 600 12.5px var(--sans); cursor: pointer; text-transform: capitalize; } .kds-recent button:hover { border-color: #34d399; color: #34d399; }

/* ---------- menu manager ---------- */
.menu-layout { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .menu-layout { grid-template-columns: 1fr; } .mcats { display: flex; flex-wrap: wrap; } .mcats hr, .mcats-h { display: none; } }
.mcats { padding: 10px; position: sticky; top: 76px; } .mcats-h { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; padding: 6px 10px; }
.mcats button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; color: var(--text); font: 500 13.5px var(--sans); text-align: left; }
.mcats button:hover { background: var(--surface-2); } .mcats button.on { background: var(--indigo-soft); color: var(--indigo); font-weight: 650; }
.mcats button em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); padding: 0 7px; border-radius: 99px; }
.mcats button.warn em { color: var(--bad); background: var(--bad-soft); border-color: transparent; } .mcats hr { margin: 8px 0; }
.mtool { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .mtool #mq { max-width: 280px; }
.mtool .tabs button { display: inline-flex; align-items: center; gap: 6px; }
.mbulk { margin: 0 0 12px; width: fit-content; }
.mlist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
.mrow { display: grid; grid-template-columns: 22px minmax(220px, 2.4fr) 1.1fr 112px 150px 90px 54px 34px; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mrow:last-child { border-bottom: 0; } .mrow:hover { background: var(--surface-2); } .mrow.sel { background: var(--indigo-soft); }
.mrow.off .mname b { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.mhead { background: var(--surface-2); font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 10px 14px; }
.mgroup { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; background: linear-gradient(90deg, var(--indigo-soft), transparent); border-bottom: 1px solid var(--line); }
.mgroup span { font-weight: 700; color: var(--indigo); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; } .mgroup small { color: var(--muted); font-size: 12px; }
.mname { display: flex; gap: 10px; align-items: flex-start; } .mname .veg { margin-top: 4px; flex: none; } .mname b { font-size: 14px; }
.mname code { margin-left: 8px; font-size: 11px; } .mname small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.veg.egg { border-color: #ca8a04; } .veg.egg::after { background: #ca8a04; }
.spice { font-size: 11px; margin-left: 6px; letter-spacing: -2px; }
.mtags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .mtags:empty { display: none; }
.mtag { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.mtag.t-bestseller { background: var(--marigold-soft); color: var(--marigold-ink); border-color: transparent; } .mtag.t-chef { background: var(--violet-soft); color: var(--violet); border-color: transparent; }
.mtag.t-new { background: var(--teal-soft); color: var(--teal); border-color: transparent; } .mtag.t-spicy { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.mcat span { font-size: 13px; font-weight: 600; } .mcat small { display: block; color: var(--muted); font-size: 11.5px; text-transform: capitalize; }
.mch { display: flex; gap: 3px; } .mch span { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; background: var(--surface-2); color: var(--line-2); border: 1px solid var(--line); }
.mch span.on { background: var(--indigo-soft); color: var(--indigo); border-color: transparent; }
.mprice { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 4px; } .mprice .rs { color: var(--muted); font-weight: 600; }
.mprice input { padding: 6px 8px; font-weight: 700; font-variant-numeric: tabular-nums; } .mprice small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; margin-top: 2px; }
.msold b { display: block; font-size: 15px; } .msold small { color: var(--muted); font-size: 11px; }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; cursor: pointer; } .switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: var(--line-2); transition: background .15s; }
.switch i::after { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + i { background: #10b981; } .switch input:checked + i::after { transform: translateX(18px); } .switch input:disabled + i { opacity: .5; }
.switch input:focus-visible + i { outline: 3px solid rgba(30,58,138,.45); outline-offset: 2px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.mcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-1); display: grid; gap: 4px; cursor: pointer; transition: all .15s; }
.mcard:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); } .mcard.off { opacity: .6; } .mcard.sel { box-shadow: 0 0 0 3px rgba(30,58,138,.3); }
.mcard-top { display: flex; justify-content: space-between; align-items: center; }
.mcard-art { height: 84px; border-radius: 10px; display: grid; place-items: center; font: 800 26px var(--sans); color: #fff; margin: 4px 0 6px;
  background: linear-gradient(135deg, hsl(var(--h) 70% 58%), hsl(calc(var(--h) + 40) 65% 45%)); }
.mcard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; } .mcard-foot b { font-size: 16px; color: var(--indigo); }
.seg { display: flex; gap: 6px; flex-wrap: wrap; } .seg label, .chips label { margin: 0; cursor: pointer; } .seg input, .chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg > label > span, .chips > label > span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13px; }
.seg input:checked + span, .chips input:checked + span { border-color: var(--indigo-2); background: var(--indigo-soft); color: var(--indigo); }
.seg input:focus-visible + span, .chips input:focus-visible + span { outline: 3px solid rgba(30,58,138,.45); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; } .chips > label > span { border-radius: 99px; padding: 6px 12px; }
@media (max-width: 1100px) { .mrow { grid-template-columns: 22px 1fr 110px 54px 34px; } .mrow .mcat, .mrow .mch, .mrow .msold, .mhead > div:nth-child(3), .mhead > div:nth-child(4), .mhead > div:nth-child(6) { display: none; } }

.fd-stat.txt b { font-size: 17px; line-height: 1.25; }

/* ---------- inventory ---------- */
.ivrow { display: grid; grid-template-columns: minmax(200px, 2fr) 110px minmax(140px, 1.3fr) 100px 90px 100px 190px; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ivrow:last-child { border-bottom: 0; } .ivrow:not(.mhead):hover { background: var(--surface-2); }
.iv-name { display: flex; gap: 10px; align-items: center; } .iv-name small { display: block; color: var(--muted); font-size: 12px; } .iv-name .veg { flex: none; }
.iv-dot { width: 10px; height: 10px; border-radius: 50%; background: #10b981; flex: none; box-shadow: 0 0 0 4px rgba(16,185,129,.15); }
.st-low .iv-dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.18); } .st-out .iv-dot { background: #e11d48; box-shadow: 0 0 0 4px rgba(225,29,72,.18); }
.st-out { background: color-mix(in srgb, var(--bad-soft) 45%, transparent); }
.iv-stock b { font-size: 16px; } .iv-stock small { color: var(--muted); } .iv-lvl small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.iv-act { display: flex; gap: 6px; justify-content: flex-end; }
.grn-line { display: grid; grid-template-columns: 2fr 1fr 1fr 90px 30px; gap: 8px; align-items: center; margin-bottom: 8px; } .gl-amt { text-align: right; }
.rc-line { grid-template-columns: 2fr 1fr 90px 30px; }
.rcrow { display: grid; grid-template-columns: minmax(180px, 1.4fr) 2fr 90px 90px 150px 100px; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rcrow:last-child { border-bottom: 0; } .fc { display: flex; align-items: center; gap: 8px; } .fc .meter { flex: 1; }
@media (max-width: 1100px) { .ivrow { grid-template-columns: 1fr 90px 110px; } .ivrow > :nth-child(3), .ivrow > :nth-child(4), .ivrow > :nth-child(5), .ivrow > :nth-child(6) { display: none; }
  .rcrow { grid-template-columns: 1fr 90px 120px 90px; } .rcrow > :nth-child(2), .rcrow > :nth-child(4) { display: none; } }
.iv-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1200px) { .iv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.iv-stats .fd-stat b { font-size: 22px; white-space: nowrap; } .iv-stats .fd-stat { min-width: 0; } .iv-stats .fd-stat > div { min-width: 0; }

/* ---------- POS v2 ---------- */
.pos2 { display: grid; grid-template-columns: 220px minmax(0, 1fr) 350px; grid-template-rows: auto minmax(0, 1fr); gap: 14px; height: calc(100vh - 140px); min-height: 560px; }
.pos-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pos-types { display: flex; gap: 4px; padding: 4px; background: #eceef8; border-radius: 14px; }
.pos-types button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font: 600 14px var(--sans); cursor: pointer; }
.pos-types button em { font-style: normal; font-size: 11px; min-width: 18px; padding: 0 6px; border-radius: 99px; background: var(--indigo-soft); color: var(--indigo); } .pos-types button em:empty { display: none; }
.pos-types button.on { background: var(--surface); color: var(--indigo); box-shadow: var(--shadow-1); }
.pos-search { flex: 1; min-width: 220px; max-width: 520px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--muted); }
.pos-search input { border: 0; box-shadow: none; padding: 11px 0; background: transparent; } .pos-search input:focus { box-shadow: none; } .pos-search:focus-within { border-color: var(--indigo-3); box-shadow: 0 0 0 4px rgba(30,58,138,.14); }
.pos-keys { margin-left: auto; }
.pos-left, .pos-menu, .pcart { min-height: 0; } .pos-left { overflow-y: auto; padding-right: 4px; }
.pos-areas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .pos-areas button { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); font: 600 12.5px var(--sans); color: var(--muted); cursor: pointer; }
.pos-areas button.on { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.pos-legend { display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); margin-bottom: 10px; } .pos-legend span { display: inline-flex; align-items: center; gap: 5px; } .pos-legend i { width: 9px; height: 9px; border-radius: 3px; }
.lg-free { background: #10b981; } .lg-busy { background: #f59e0b; } .lg-billed { background: #2f4fa8; }
.ptables { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ptbl { --c: #10b981; text-align: left; padding: 10px 11px; border-radius: 13px; border: 1px solid var(--line); border-left: 4px solid var(--c); background: var(--surface); cursor: pointer; color: var(--text); box-shadow: var(--shadow-1); display: grid; gap: 2px; min-height: 74px; transition: all .12s; }
.ptbl:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); } .ptbl.busy { --c: #f59e0b; background: linear-gradient(180deg, var(--surface), var(--marigold-soft)); } .ptbl.billed { --c: #2f4fa8; background: linear-gradient(180deg, var(--surface), var(--indigo-soft)); }
.ptbl.sel { outline: 3px solid var(--indigo-2); outline-offset: 1px; }
.ptbl-h { display: flex; justify-content: space-between; align-items: center; } .ptbl-h b { font-size: 17px; } .ptbl-h em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--c); }
.ptbl-amt { font-weight: 800; color: var(--text); font-size: 14px; } .ptbl small { color: var(--muted); font-size: 11.5px; }
.pruns { display: grid; gap: 8px; margin-top: 10px; }
.prun { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid #f59e0b; background: var(--surface); cursor: pointer; color: var(--text); }
.prun.billed { border-left-color: #2f4fa8; } .prun.sel { outline: 3px solid var(--indigo-2); } .prun em { font-style: normal; font-size: 11px; color: var(--muted); } .prun span { font-size: 12.5px; color: var(--muted); text-transform: capitalize; }
.pos-menu { display: grid; grid-template-columns: 136px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
.pos-cats { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; grid-row: 1 / -1; }
.pos-cats button { --ch: 240; display: flex; align-items: center; gap: 8px; padding: 10px 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; text-align: left; cursor: pointer; font: 600 13px var(--sans); color: var(--text); }
.pos-cats button i { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--ch) 65% 55%); flex: none; }
.pos-cats button em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--muted); }
.pos-cats button:hover { background: var(--surface); border-color: var(--line); } .pos-cats button.on { background: var(--surface); border-color: var(--indigo-3); color: var(--indigo); box-shadow: var(--shadow-1); }
.pitems { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; overflow-y: auto; align-content: start; padding: 2px; }
.pitem { --ch: 240; position: relative; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 11px; min-height: 96px; border-radius: 14px; border: 1px solid var(--line); border-top: 4px solid hsl(var(--ch) 65% 58%);
  background: var(--surface); cursor: pointer; color: var(--text); box-shadow: var(--shadow-1); transition: transform .1s, box-shadow .1s; }
.pitem:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-2); } .pitem:active:not(:disabled) { transform: scale(.97); } .pitem:disabled { opacity: .5; cursor: not-allowed; }
.pitem b { font-size: 14px; line-height: 1.25; flex: 1; } .pi-top { display: flex; justify-content: space-between; align-items: center; } .pi-star { color: #f59e0b; font-size: 13px; }
.pi-foot { display: flex; justify-content: space-between; align-items: center; } .pi-foot span { font-weight: 800; color: var(--indigo); font-size: 15px; } .pi-foot code { font-size: 10.5px; }
.pbadge { position: absolute; top: -8px; right: -8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; background: linear-gradient(135deg, #1e3a8a, #0b1a3f); color: #fff; font: 800 12px/24px var(--sans); text-align: center; box-shadow: 0 4px 10px -3px rgba(30,58,138,.6); }
.pos-hint { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--indigo-soft); color: var(--indigo); font-weight: 600; font-size: 13px; }
.pcart { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-2); overflow: hidden; }
.pc-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, #1e3a8a, #0b1a3f); color: #fff; }
.pc-h > div:first-child { flex: 1; } .pc-h small { display: block; font-size: 11px; opacity: .8; text-transform: uppercase; letter-spacing: .08em; } .pc-h b { font-size: 20px; } .pc-h span { display: block; font-size: 12px; opacity: .85; }
.pc-h .btn { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); box-shadow: none; }
.pax small { text-align: center; } .pax .qty button { width: 28px; height: 28px; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff; } .pax .qty b { min-width: 18px; text-align: center; }
.pc-cust { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .pc-cust input { padding: 7px 10px; font-size: 13px; }
.pc-lines { flex: 1; overflow-y: auto; padding: 6px 14px; }
.pc-sec { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 10px 0 4px; } .pc-sec.new { color: var(--indigo); }
.pc-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); } .pc-line b { font-size: 13.5px; }
.pc-line.sent { color: var(--muted); font-size: 13px; } .pc-line i { display: block; font-style: normal; font-size: 11.5px; color: var(--warn); }
.pc-q { min-width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.pc-ok { color: #10b981; font-weight: 800; } .pc-amt { min-width: 64px; text-align: right; font-weight: 700; }
.pc-note { display: block; border: 0; background: none; padding: 0; margin-top: 2px; color: var(--indigo-2); font: 600 11.5px var(--sans); cursor: pointer; }
.pc-line .qty button { width: 30px; height: 30px; }
.pc-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 10px; color: var(--muted); text-align: center; } .pc-empty svg { opacity: .5; } .pc-empty b { color: var(--text); }
.pc-tot { padding: 6px 16px 10px; border-top: 1px solid var(--line); } .pc-tot:empty { display: none; }
.pc-tot > div { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); padding: 3px 0; } .pc-tot .grand { font-size: 19px; font-weight: 800; color: var(--text); padding-top: 8px; border-top: 1px dashed var(--line-2); margin-top: 4px; }
.pc-act { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 0 14px 14px; } .pc-act:empty { display: none; }
.pc-act #kot em { font-style: normal; font-size: 12px; opacity: .85; margin-left: 4px; } .pc-act #bill { grid-column: 1 / 2; } .pc-act #settle { grid-column: 1 / -1; order: -1; } .pc-act #bill + #settle ~ .pc-void, .pc-void { grid-column: 2 / 3; grid-row: 2; }
@media (max-width: 1350px) { .pos2 { grid-template-columns: 200px minmax(0, 1fr) 330px; } .pos-menu { grid-template-columns: 1fr; } .pos-cats { flex-direction: row; overflow-x: auto; grid-row: auto; } .pos-cats button { white-space: nowrap; } }
@media (max-width: 1000px) { .pos2 { grid-template-columns: 1fr; height: auto; } .pcart { min-height: 420px; } .pos-keys { display: none; } }
/* settle */
.settle .st-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 16px 18px; margin: -24px -24px 16px; background: linear-gradient(135deg, #1e3a8a, #0b1a3f); color: #fff; border-radius: 18px 18px 0 0; }
.settle .st-head small { opacity: .8; font-size: 12px; } .settle .st-head b { display: block; font-size: 32px; } .settle .st-head .muted { color: rgba(255,255,255,.85); }
.st-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-bottom: 14px; }
.st-modes button { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 13px; border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; font: 700 13px var(--sans); color: var(--muted); }
.st-modes button.on { border-color: var(--indigo-2); background: var(--indigo-soft); color: var(--indigo); }
.st-notes { display: flex; gap: 6px; flex-wrap: wrap; } .st-notes button { padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); font: 700 14px var(--sans); cursor: pointer; color: var(--text); }
.st-notes button.on { background: var(--marigold-soft); border-color: var(--marigold); color: var(--marigold-ink); }
.st-change { display: grid; align-content: center; padding: 10px 14px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); } .st-change b { font-size: 22px; }
.st-info { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
[data-theme="dark"] .pos-types { background: #1f1c4c; }

/* ---------- POS extras ---------- */
.pi-var { color: var(--muted); font-size: 11px; font-weight: 600; margin-top: -2px; }
.pc-add { display: block; font-size: 11.5px; color: var(--teal); font-weight: 600; }
.pc-bills { display: flex; gap: 6px; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); overflow-x: auto; }
.pc-bills button { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); font: 700 12px var(--sans); cursor: pointer; white-space: nowrap; color: var(--text); }
.pc-bills button.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.pc-more { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; } .pc-more .btn { flex: 1; }
.pc-act #void { grid-column: auto; grid-row: auto; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.opt-grid button { display: grid; gap: 2px; text-align: left; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; color: var(--text); }
.opt-grid button span { color: var(--indigo); font-weight: 700; font-size: 13px; } .opt-grid button.on { border-color: var(--indigo-2); background: var(--indigo-soft); box-shadow: 0 0 0 3px rgba(30,58,138,.15); }
.bill-sum { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin: 8px 0 12px; }
.bill-sum.grand { background: linear-gradient(135deg, #1e3a8a, #0b1a3f); color: #fff; border: 0; } .bill-sum b { font-size: 18px; }
.sp-list { display: grid; gap: 6px; max-height: 45vh; overflow-y: auto; margin-bottom: 10px; }
.sp-item { display: flex !important; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin: 0; color: var(--text); font-weight: 500; font-size: 14px; cursor: pointer; }
.sp-item:has(input:checked) { border-color: var(--indigo-2); background: var(--indigo-soft); }
.eq-rows { display: grid; gap: 8px; margin-top: 12px; } .eq-n { font-weight: 700; min-width: 64px; } .eq-rows .seg > label > span { padding: 5px 10px; font-size: 12px; }
/* front desk */
.fd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px}.fd-head h2{margin:0}
.grc-sec{border:1px solid var(--line,#e4e4ef);border-radius:12px;padding:10px 14px 4px;margin:0 0 12px}.grc-sec legend{font-weight:700;font-size:.85rem;color:var(--primary,#1e3a8a);padding:0 6px}
.grc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 12px}.grc-grid .span2{grid-column:span 2}
.fd-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}.fd-sum.one{grid-template-columns:1fr}.fd-sum>div{border-radius:12px;padding:10px 14px;background:var(--surface-2,#f5f5fb);display:flex;flex-direction:column}
.fd-sum span{font-size:.75rem;color:var(--muted,#667)}.fd-sum b{font-size:1.25rem}.fd-sum .due{background:linear-gradient(135deg,#fff4e0,#ffe6b8);color:#7a4300}.fd-sum .clr{background:#e7f8ee;color:#0b6b3a}.fd-sum .ok{color:#0b6b3a}
.tbl-wrap{max-height:300px;overflow:auto}tr.neg td{color:#0b6b3a}tr.pay td{color:#1e3a8a;background:#f6f5ff}
.fd-tabs{display:flex;gap:6px;margin:12px 0 6px}.fd-tabs button{border:1px solid var(--line,#ddd);background:none;border-radius:999px;padding:5px 12px;cursor:pointer;font:inherit;color:inherit}.fd-tabs button.on{background:var(--primary,#1e3a8a);color:#fff;border-color:transparent}
.fd-f{gap:8px;flex-wrap:wrap}.fd-f input,.fd-f select{flex:1;min-width:100px}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:6px 0}.sp{border:1px solid var(--line,#ddd);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:4px}.sp label{font-size:.75rem;font-weight:700}
.stars button{background:none;border:0;font-size:1.4rem;cursor:pointer;color:#ccc}.stars button.on{color:#f59e0b}
.note{background:#f2f5fb;border-radius:10px;padding:8px 12px;margin-bottom:8px}.warn{color:#b45309}.ok{color:#0b6b3a}
@media(max-width:640px){.fd-sum{grid-template-columns:1fr}.grc-grid .span2{grid-column:auto}}
.fd-f[hidden],#frn[hidden],#payWrap[hidden],#refWrap[hidden],.sp-ref[hidden]{display:none!important}
.chk{display:flex!important;align-items:center;gap:8px;flex-direction:row!important}.chk input{width:auto!important;margin:0}
.sp.short{border-color:#f5b7b1;background:#fff6f5}.sp.short label{color:#b42318}
/* reports */
.rp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px}.rp-bar input[type=date]{max-width:150px}
.seg{display:flex;background:var(--surface-2,#f1f1f8);border-radius:10px;padding:3px;flex-wrap:wrap}.seg button{border:0;background:none;padding:6px 11px;border-radius:8px;cursor:pointer;font:inherit;font-size:.85rem;color:inherit}.seg button.on{background:#fff;color:var(--primary,#1e3a8a);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.rp-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line,#e4e4ef);overflow-x:auto}.rp-tabs button{border:0;background:none;padding:10px 16px;cursor:pointer;font:inherit;font-weight:600;color:var(--muted,#667);border-bottom:3px solid transparent;white-space:nowrap}.rp-tabs button.on{color:var(--primary,#1e3a8a);border-bottom-color:var(--primary,#1e3a8a)}
.rk.hero{background:linear-gradient(135deg,#13285e,#0b1a3f);color:#fff}.rk.hero .l,.rk.hero .muted{color:rgba(255,255,255,.85)!important}.up{color:#16a34a;font-weight:700}.rk.hero .up{color:#bbf7d0}.down{color:#dc2626;font-weight:700}.rk.hero .down{color:#fecaca}
.rb{display:grid;grid-template-columns:minmax(90px,30%) 1fr auto 42px;gap:10px;align-items:center;padding:6px 0;font-size:.88rem}.rb em{font-style:normal;color:var(--muted,#667);font-size:.78rem;text-align:right}
.rt{background:var(--surface-2,#f1f1f8);border-radius:6px;height:10px;overflow:hidden}.rt i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#2f4fa8,#c9a227)}
.cc{display:flex;align-items:flex-end;gap:3px;height:180px;padding-top:8px}.cb{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:3px}.cb i{width:100%;background:linear-gradient(180deg,#c9a227,#1e3a8a);border-radius:4px 4px 0 0;min-height:2px}.cb span{font-size:.65rem;color:var(--muted,#667);height:14px}.cb:hover i{background:#f59e0b}
.hm{display:grid;grid-template-columns:36px repeat(24,1fr);gap:2px;font-size:.68rem}.hc{height:20px;border-radius:3px;background:#1e3a8a}.hd{color:var(--muted,#667);align-self:center}.hh{color:var(--muted,#667);text-align:center}
.num.warn{color:#b45309}tfoot td{border-top:2px solid var(--line,#ddd)}
@media(max-width:700px){.hm{grid-template-columns:28px repeat(24,1fr)}.hh{font-size:0}}
/* guests */
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips button{border:1px solid var(--line,#e2e2ee);background:var(--surface,#fff);border-radius:999px;padding:5px 12px;cursor:pointer;font:inherit;font-size:.82rem;color:inherit}.chips button b{opacity:.6;margin-left:3px}.chips button.on{background:var(--primary,#1e3a8a);color:#fff;border-color:transparent}
.gcell{display:flex;gap:10px;align-items:center}.gav{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.8rem;color:#fff;background:#94a3b8;flex:none}.gav.lg{width:56px;height:56px;font-size:1.1rem}
.gav.vip{background:linear-gradient(135deg,#f59e0b,#d97706)}.gav.plat{background:linear-gradient(135deg,#2f4fa8,#b8901f)}.gav.gold{background:linear-gradient(135deg,#eab308,#ca8a04)}.gav.silv{background:linear-gradient(135deg,#94a3b8,#64748b)}.gav.new{background:linear-gradient(135deg,#22c55e,#16a34a)}
.tier{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:999px;background:#eef2f7;color:#475569;vertical-align:middle}.tier.vip{background:#fff3d6;color:#b45309}.tier.plat{background:#fbf3dc;color:#8a6a12}.tier.gold{background:#fef9c3;color:#a16207}.tier.new{background:#dcfce7;color:#15803d}
.tag{display:inline-block;font-size:.7rem;padding:1px 7px;border-radius:6px;background:#f2f5fb;color:#172f6e;margin-right:3px}
tr.bl td{background:#fff5f5}.pill.bad{background:#fee2e2;color:#b91c1c}.note.bad{background:#fee2e2;color:#991b1b}.gh{display:flex;gap:14px;align-items:flex-start}
/* finance */
.pl-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line,#eee);font-size:.92rem}.pl-row.sub{color:var(--muted,#667);font-size:.85rem}.pl-row.tot{border-top:1px solid var(--line,#ccc);border-bottom:0;font-weight:700;padding-top:8px}
.pl-row.grand{border-top:2px solid var(--text,#222);border-bottom:0;font-weight:800;font-size:1.05rem;padding-top:9px}.pl-row.ok b{color:#15803d}.pl-row.bad b{color:#b91c1c}
.rk.okc{border-top-color:#16a34a}.rk.okc .v{color:#15803d}.rk.badc .v{color:#b91c1c}.rk.warnc .v{color:#b45309}
.den{display:grid;grid-template-columns:80px 1fr 110px;gap:6px 10px;align-items:center}.den label{font-weight:600;font-size:.85rem;margin:0}.den input{max-width:140px}.den span{text-align:right}
.src{font-size:.78rem;font-weight:700;padding:2px 8px;border-radius:6px;background:#f2f5fb;color:#172f6e}.src.hotel{background:#fef3c7;color:#92400e}.src.credit{background:#fee2e2;color:#b91c1c}
tr.voidr td{opacity:.55;text-decoration:line-through}tr.voidr td:last-child,tr.voidr td:nth-last-child(2){text-decoration:none}th.sortable{cursor:pointer;user-select:none}th.sortable:hover{color:var(--primary,#1e3a8a)}
.shx tfoot td{background:var(--surface-2,#f6f6fb)}
/* settings */
.logo-box{border:2px dashed var(--line,#ddd);border-radius:12px;min-height:130px;display:grid;place-items:center;padding:14px;background:repeating-conic-gradient(#f4f4f8 0 25%,#fff 0 50%) 0/16px 16px}.logo-box img{max-width:100%;max-height:120px}
.bill-prev{width:260px;margin:8px auto 0;font:12px/1.4 'Courier New',monospace;text-align:center;border:1px solid #ddd;padding:12px;background:#fff;color:#000;box-shadow:0 2px 8px rgba(0,0,0,.08)}.bill-prev img{max-width:60%;max-height:60px;filter:grayscale(1) contrast(1.4)}.bill-prev hr{border:0;border-top:1px dashed #000}
.brand-logo{width:38px;height:38px;object-fit:contain;border-radius:10px;background:#fff;padding:3px;flex:none}
.bill-prev img{display:block;margin:0 auto 6px}
.app-logo{display:inline-grid;place-items:center;flex:none;background:#fff;border-radius:22%;padding:2px;box-shadow:0 2px 8px rgba(0,0,0,.18)}.app-logo img{width:100%;height:100%;object-fit:contain}
.app-logo{background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important}.app-logo img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.top h2,.topbar h2{white-space:nowrap}
/* integrations */
.ig-h{margin:6px 0 10px;font-size:.95rem;color:var(--muted,#667)}.ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.ig{cursor:pointer;transition:transform .12s,box-shadow .12s;border:1px solid var(--line,#e6e6f0)}.ig:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(30,58,138,.12)}.ig.on{border-color:#e6d39a}
.ig-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.85rem;flex:none}.ig-ico.lg{width:52px;height:52px;font-size:1rem}
.mx-g{background:var(--surface-2,#f3f3f9);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--primary,#1e3a8a)}
.aucat{font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:6px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);white-space:nowrap}
tr.risk td{background:#fffaf0}tr.chg td{background:#fff7e6}
.payopt{flex-direction:row!important;align-items:center;gap:8px;cursor:pointer;font-weight:600}.payopt input{width:auto}
.nbadge{margin-left:auto;background:#ef4444;color:#fff;font-size:.7rem;font-weight:800;border-radius:999px;padding:1px 7px}.paynote{margin:0 0 12px}
.gst-tog{display:flex!important;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line,#e2e2ee);border-radius:10px;background:var(--surface-2,#f7f7fb)}.gst-tog input{margin-top:3px}
.login .demo,.login .divider{min-height:0}
/* ---------- Sign-in (professional) ---------- */
.login.login2{grid-template-columns:minmax(380px,46%) 1fr;background:#f4f6fb}
.login2 .hero{background:linear-gradient(150deg,#0b1437 0%,#1a2366 45%,#0f1d44 100%)!important;padding:56px 64px;justify-content:space-between}
.login2 .hero::before{content:'';position:absolute;width:520px;height:520px;right:-180px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(30,58,138,.35),transparent 65%);pointer-events:none}
.login2 .hero .logo{margin-bottom:0}
.login2 .hero h1{font-size:40px;letter-spacing:-.01em;margin-top:auto}.login2 .hero em{color:#fbbf24}
.login2 .hero p{color:#c7cbef;max-width:460px}
.login2 .points li{color:#e6e8fb}.login2 .points svg{background:rgba(251,191,36,.12);color:#fbbf24}
.login2 .trust{display:flex;gap:12px;margin-top:30px}.login2 .trust div{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;backdrop-filter:blur(4px)}
.login2 .trust b{display:block;color:#fff;font-size:18px}.login2 .trust span{font-size:12px;color:#aab0e6}
.login2 .hero-foot{margin-top:28px;font-size:12px;color:#8f95cc}
.login2 .form{max-width:none;padding:40px 24px;align-items:center}
.login-card{width:100%;max-width:440px;background:#fff;border:1px solid #e4e7f0;border-radius:20px;padding:40px 36px;box-shadow:0 20px 50px -20px rgba(15,23,61,.25),0 2px 6px rgba(15,23,61,.05)}
.login-card .lc-logo{margin-bottom:18px}.login-card .lc-logo .app-logo img{filter:none}
.login-card h1{font-size:28px;color:#0f172a;margin:0 0 6px}.login-card h1+p{color:#64748b!important;margin:0 0 26px!important}
.login-card label{color:#334155;font-weight:600;font-size:13px}
.login-card input[type=email],.login-card input[type=password],.login-card input[type=text]{height:46px;border:1.5px solid #dbe1ea;border-radius:11px;background:#fbfcfe;font-size:15px;transition:border-color .15s,box-shadow .15s}
.login-card input:focus{border-color:#1e3a8a;box-shadow:0 0 0 4px rgba(30,58,138,.12);background:#fff;outline:0}
.login-card .pw-field{position:relative}.login-card .pw-eye{position:absolute;right:8px;bottom:7px;border:0;background:none;cursor:pointer;font-size:17px;padding:6px;border-radius:8px;color:#64748b}.login-card .pw-eye:hover{background:#f2f5fb}
.login-card .lc-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 18px;font-size:13.5px}.login-card .lc-row .chk{font-weight:500;color:#475569}.login-card .lc-row a{color:#1e3a8a;font-weight:600;text-decoration:none}.login-card .lc-row a:hover{text-decoration:underline}
.login-card .btn.primary{height:48px;border-radius:11px;font-size:15.5px;font-weight:700;background:linear-gradient(135deg,#1e3a8a,#172f6e);box-shadow:0 8px 20px -6px rgba(23,47,110,.55)}
.login-card .btn.primary:hover{filter:brightness(1.07)}
.login-card .lc-secure{text-align:center;font-size:12px;color:#94a3b8;margin:22px 0 0}
[data-theme="dark"] .login.login2{background:#0b1020}[data-theme="dark"] .login-card{background:#121a33;border-color:#24305a}[data-theme="dark"] .login-card h1{color:#eef}[data-theme="dark"] .login-card input{background:#0e1630;border-color:#2a3766;color:#e5e7f5}
@media (max-width:860px){.login.login2{grid-template-columns:1fr}.login2 .hero{padding:28px 20px}.login2 .hero h1{font-size:28px;margin-top:16px}.login2 .trust,.login2 .hero-foot{display:none}.login-card{padding:28px 20px;border-radius:16px}}
/* ===== Deep navy "blueprint" theme (solid, rich) ===== */
:root{--navy-0:#0b1630;--navy-1:#0f1d3d;--navy-2:#13254f;--navy-3:#1b3270;--navy-grid:rgba(120,150,220,.07)}
.navy-bg,.side,.login2 .hero,.rk.hero{background-color:var(--navy-1)!important;
  background-image:linear-gradient(var(--navy-grid) 1px,transparent 1px),linear-gradient(90deg,var(--navy-grid) 1px,transparent 1px),radial-gradient(600px 420px at 0 0,rgba(37,72,170,.45),transparent 70%),linear-gradient(160deg,var(--navy-2),var(--navy-1) 55%,var(--navy-0))!important;
  background-size:32px 32px,32px 32px,auto,auto!important}
.side{scrollbar-color:#24396e transparent}
.login2 .hero::after,.login2 .hero::before{display:none}
.rk.hero{border-top-color:#3b5bdb!important;color:#fff}.rk.hero .v{color:#fff}.rk.hero .l{color:#aebee6!important}
.btn.primary,.login-card .btn.primary{background:linear-gradient(180deg,#1e3a8a,#132a63)!important;box-shadow:0 6px 16px -6px rgba(19,42,99,.6)!important;border-color:transparent}
.btn.primary:hover,.login-card .btn.primary:hover{background:linear-gradient(180deg,#24459f,#183274)!important;color:#fff}
.rp-tabs button.on,.fd-tabs button.on{color:#1e3a8a;border-bottom-color:#1e3a8a}.fd-tabs button.on,.chips button.on{background:#1e3a8a!important;border-color:#1e3a8a!important;color:#fff!important}
.seg button.on{color:#1e3a8a}
.login-card input:focus{border-color:#1e3a8a;box-shadow:0 0 0 4px rgba(30,58,138,.14)}.login-card .lc-row a{color:#1e3a8a}
.avatar{background:linear-gradient(135deg,#1e3a8a,#13254f)!important}
.danger-zone{border:1.5px solid #fecaca!important;background:#fff8f8}.danger-zone h3{color:#b91c1c}
/* ===== Sign-in v3: rich & professional ===== */
.login3{grid-template-columns:minmax(420px,52%) 1fr!important;background:#f5f7fb}
.login3 .hero{padding:36px 56px!important;display:flex;flex-direction:column;justify-content:space-between;gap:28px;color:#dbe3ff}
.login3 .hero>*{max-width:600px}
.login3 .h-top{display:flex;align-items:center;justify-content:space-between}.login3 .h-top .logo{margin:0}
.login3 .h-by{font-size:12px;color:#9fb0e0;border:1px solid rgba(160,180,240,.25);padding:4px 10px;border-radius:999px}
.login3 .h-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#c9d6ff;background:rgba(99,130,255,.14);border:1px solid rgba(130,160,255,.28);padding:6px 12px;border-radius:999px;margin-bottom:18px}
.login3 .h-eyebrow i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2)}
.login3 .hero h1{font-size:42px;line-height:1.1;margin:0 0 14px;color:#fff;letter-spacing:-.02em}
.login3 .hero h1 em{background:linear-gradient(90deg,#fbbf24,#fde68a);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.login3 .hero p{font-size:15.5px;line-height:1.6;color:#b9c5ea;max-width:520px;margin:0}
.h-preview{position:relative;margin:30px 0 26px;max-width:500px}
.pv-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:18px 20px;backdrop-filter:blur(10px);box-shadow:0 30px 60px -25px rgba(0,0,0,.6)}
.pv-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:#e6ecff;margin-bottom:14px}
.pv-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#86efac;font-weight:700}.pv-live i{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:pvPulse 1.8s infinite}
.pv-stats{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:12px}
.pv-ring{display:flex;align-items:center;gap:10px}.pv-ring svg{width:52px;height:52px;transform:rotate(-90deg)}.pv-ring .bg{fill:none;stroke:rgba(255,255,255,.12);stroke-width:4}.pv-ring .fg{fill:none;stroke:#fbbf24;stroke-width:4;stroke-linecap:round}
.pv-ring b,.pv-stat b{display:block;color:#fff;font-size:19px;line-height:1.1}.pv-ring span,.pv-stat span{font-size:11px;color:#9fb0e0}
.pv-stat{background:rgba(255,255,255,.05);border-radius:12px;padding:9px 11px}.pv-stat em{font-style:normal;font-size:11px;color:#86efac;font-weight:700}.pv-stat em.n{color:#fcd34d}
.pv-bars{display:flex;align-items:flex-end;gap:6px;height:58px;margin-top:16px}.pv-bars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#60a5fa,#3b5bdb);opacity:.9;animation:pvGrow .8s cubic-bezier(.2,.8,.2,1) both}
.pv-chip{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;color:#0f172a;font-size:12px;font-weight:600;padding:8px 12px;border-radius:12px;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);animation:pvFloat 5s ease-in-out infinite}
.pv-chip .d{width:8px;height:8px;border-radius:50%}.pv-chip .g{background:#22c55e}.pv-chip .b{background:#3b82f6}
.pv-chip.c1{right:-26px;top:-18px}.pv-chip.c2{left:-20px;bottom:-16px;animation-delay:-2.5s}
.h-mods{display:flex;flex-wrap:wrap;gap:8px}.h-mods span{font-size:12px;color:#d6defa;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:5px 11px;border-radius:999px}
.h-foot{display:flex;flex-direction:column;gap:10px}.h-trust{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:#a8b6e2}.h-trust span{display:inline-flex;align-items:center;gap:6px}.h-trust svg{width:15px;height:15px;color:#86efac}
.h-copy{font-size:11.5px;color:#7f8dbd}
.login3 .form{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:28px 24px 40px!important}
.lf-top{position:absolute;top:22px;left:32px;right:32px;display:flex;align-items:center;gap:10px}.lf-top a{color:#1e3a8a;font-weight:600}
.lf-mlogo{display:none;align-items:center;gap:8px;color:#0f1d3d}
.login3 .login-card{max-width:440px;padding:40px 38px;border-radius:22px;border:1px solid #e3e8f2;box-shadow:0 30px 60px -30px rgba(15,29,61,.35),0 2px 8px rgba(15,29,61,.05);animation:lcIn .5s cubic-bezier(.2,.8,.2,1) both}
.login3 .login-card h1{font-size:28px;margin:0 0 6px;color:#0f172a}.login3 .lc-sub{color:#64748b;margin:0 0 26px;font-size:14.5px}
.ic-in{position:relative}.ic-in .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:#94a3b8;pointer-events:none;transition:color .15s}.ic-in .ic svg,.pw-eye svg{width:100%;height:100%;display:block}
.ic-in input{padding-left:44px!important;padding-right:44px!important}.ic-in:focus-within .ic{color:#1e3a8a}
.login3 .pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;padding:7px;bottom:auto;color:#64748b}
.caps{margin-top:6px;font-size:12px;color:#b45309;font-weight:600}
.login3 .login-card input[type=email],.login3 .login-card input[type=password],.login3 .login-card input[type=text]{height:48px}
.lc-btn{position:relative;display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%}
.lc-btn .a{width:18px;height:18px;transition:transform .2s}.lc-btn .a svg{width:100%;height:100%}.lc-btn:hover .a{transform:translateX(3px)}
.lc-btn .spin{display:none;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.lc-btn.loading .t,.lc-btn.loading .a{display:none}.lc-btn.loading .spin{display:block}.lc-btn:disabled{opacity:.85;cursor:wait}
.lc-or{display:flex;align-items:center;gap:12px;margin:24px 0 14px;color:#94a3b8;font-size:12.5px}.lc-or::before,.lc-or::after{content:'';flex:1;height:1px;background:#e5e9f2}
.lc-demo{width:100%;height:46px;border-radius:11px;font-weight:700;color:#1e3a8a;border:1.5px solid #c9d4ee;background:#f8faff}.lc-demo:hover{background:#eef3ff;border-color:#1e3a8a}
.login3 .lc-secure{display:flex;align-items:center;justify-content:center;gap:6px}.login3 .lc-secure svg{width:14px;height:14px;color:#16a34a}
@keyframes pvGrow{from{transform:scaleY(.1);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
@keyframes pvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pvPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}100%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
@keyframes lcIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pv-chip,.pv-bars i,.login3 .login-card,.pv-live i{animation:none}}
@media (max-width:1100px){.pv-chip.c1{right:0}.login3 .hero h1{font-size:34px}}
@media (max-width:860px){.login3{grid-template-columns:1fr!important}.login3 .hero{display:none!important}.lf-top{position:static;margin:0 0 18px;width:100%;max-width:440px}.lf-mlogo{display:inline-flex}.login3 .form{justify-content:flex-start;padding:20px 16px!important}.login3 .login-card{padding:28px 22px}}
[data-theme="dark"] .login3 .lc-demo{background:#0e1630;color:#f3d27a;border-color:#2a3766}
input[type=checkbox],input[type=radio]{accent-color:#1e3a8a}
/* ===== Sign-in v3 — rich colour pass ===== */
.login3 .hero{background-color:#081430!important;
  background-image:linear-gradient(rgba(120,150,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,150,230,.07) 1px,transparent 1px),
  radial-gradient(520px 420px at 8% 4%,rgba(37,99,235,.55),transparent 70%),radial-gradient(520px 460px at 100% 100%,rgba(184,144,31,.42),transparent 70%),
  radial-gradient(300px 260px at 85% 18%,rgba(245,158,11,.16),transparent 70%),linear-gradient(160deg,#0f2257 0%,#0a1840 50%,#070f2a 100%)!important;
  background-size:32px 32px,32px 32px,auto,auto,auto,auto!important}
.login3 .h-eyebrow{background:linear-gradient(90deg,rgba(37,99,235,.28),rgba(184,144,31,.22));border-color:rgba(147,180,255,.35);color:#e0e8ff}
.login3 .hero h1 em{background:linear-gradient(90deg,#fbbf24,#f59e0b 45%,#fde68a);-webkit-background-clip:text;background-clip:text}
.pv-card{background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:rgba(160,190,255,.25)}
.pv-stat{background:linear-gradient(145deg,rgba(37,99,235,.22),rgba(184,144,31,.14));border:1px solid rgba(160,190,255,.15)}
.pv-bars i{background:linear-gradient(180deg,#22d3ee,#3b82f6 55%,#2f4fa8)}
.pv-bars i:nth-child(10){background:linear-gradient(180deg,#fde68a,#f59e0b)}
.h-mods span{background:rgba(37,99,235,.14);border-color:rgba(147,180,255,.25)}
/* right side: soft brand-tinted canvas */
.login3 .form{background:
  radial-gradient(520px 380px at 100% 0%,rgba(37,99,235,.12),transparent 70%),
  radial-gradient(460px 360px at 0% 100%,rgba(245,158,11,.10),transparent 70%),
  radial-gradient(rgba(30,58,138,.08) 1px,transparent 1px) 0 0/22px 22px,#f4f7fd}
.login3 .login-card{position:relative;overflow:hidden;border:1px solid #dde5f3;box-shadow:0 40px 80px -40px rgba(15,34,87,.45),0 4px 14px rgba(15,34,87,.06)}
.login3 .login-card::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#1e3a8a,#2563eb 45%,#b8901f 75%,#f59e0b)}
.login3 .login-card h1{background:linear-gradient(90deg,#0f2257,#1e40af);-webkit-background-clip:text;background-clip:text;color:transparent}
.login3 .login-card h1{-webkit-text-fill-color:transparent}
.login3 .login-card input:focus{border-color:#2563eb!important;box-shadow:0 0 0 4px rgba(37,99,235,.15)!important}
.ic-in:focus-within .ic{color:#2563eb}
.login3 .lc-btn{height:50px!important;background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 60%,#3b82f6 100%)!important;box-shadow:0 14px 28px -10px rgba(37,99,235,.65)!important;letter-spacing:.01em}
.login3 .lc-btn:hover{background:linear-gradient(135deg,#1e40af,#1d4ed8 60%,#2563eb)!important;transform:translateY(-1px)}
.login3 .lc-row a,.lf-top a{color:#1d4ed8}
.login3 .lc-demo{color:#92400e;border-color:#fcd9a0;background:linear-gradient(180deg,#fffbeb,#fff7e0)}
.login3 .lc-demo:hover{border-color:#f59e0b;background:#fff3d1}
.login3 .login-card h1 .wave{-webkit-text-fill-color:initial;color:initial;background:none;display:inline-block;animation:wave 2.4s ease-in-out 1;transform-origin:70% 80%}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-8deg)}}
.login3 .login-card .btn.primary.lc-btn{background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 60%,#3b82f6 100%)!important;box-shadow:0 14px 28px -10px rgba(37,99,235,.65)!important}
.login3 .login-card .btn.primary.lc-btn:hover{background:linear-gradient(135deg,#1e40af,#1d4ed8 60%,#2563eb)!important}
/* ===== Sign-in: Royal navy + gold luxury ===== */
.lux{--gold:#d4af37;--gold-2:#f3d27a;--gold-3:#b8901f;--navy:#0a1430;--navy-2:#0f1d44;--ink:#e9edf8;background:#070f26!important}
.lux .hero{background-color:#081129!important;background-image:
  radial-gradient(600px 460px at 0% 0%,rgba(212,175,55,.16),transparent 65%),radial-gradient(560px 520px at 100% 100%,rgba(37,72,170,.45),transparent 70%),
  linear-gradient(rgba(212,175,55,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.05) 1px,transparent 1px),linear-gradient(160deg,#0f1e4a,#0a1535 55%,#060d24)!important;
  background-size:auto,auto,40px 40px,40px 40px,auto!important;border-right:1px solid rgba(212,175,55,.22)}
.lux .hero .logo span,.lux .hero h1{font-family:'Cormorant Garamond',var(--serif)!important;letter-spacing:.005em}
.lux .hero .logo span{font-size:26px;font-weight:700;color:#fff}
.lux .hero h1{font-size:50px!important;font-weight:700;line-height:1.04!important}
.lux .hero h1 em{background:linear-gradient(90deg,#b8901f,#f3d27a 40%,#d4af37 70%,#f7e2a1)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent}
.lux .h-by{border-color:rgba(212,175,55,.4);color:#e7cf87}
.lux .h-eyebrow{background:rgba(212,175,55,.1)!important;border-color:rgba(212,175,55,.38)!important;color:#f1dc9b!important}.lux .h-eyebrow i{background:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.2)}
.lux .hero p{color:#b7c0dc}
.lux .pv-card{background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02))!important;border-color:rgba(212,175,55,.3)!important}
.lux .pv-stat{background:rgba(212,175,55,.07)!important;border-color:rgba(212,175,55,.2)!important}.lux .pv-stat em{color:#f3d27a}
.lux .pv-ring .fg{stroke:url(#none);stroke:#e2bd52}
.lux .pv-bars i{background:linear-gradient(180deg,#5b7be0,#2a4aa8)!important}.lux .pv-bars i:nth-child(10){background:linear-gradient(180deg,#f7e2a1,#c9a227)!important}
.lux .pv-chip{background:#fffaf0;border:1px solid #ecd9a0}
.lux .h-mods span{background:transparent!important;border-color:rgba(212,175,55,.3)!important;color:#e9dcb5}
.lux .h-trust{color:#c7b583}.lux .h-trust svg{color:var(--gold)}.lux .h-copy{color:#8a8fa8}
/* right side */
.lux .form{background:radial-gradient(520px 420px at 100% 0%,rgba(212,175,55,.12),transparent 65%),radial-gradient(600px 500px at 0% 100%,rgba(37,72,170,.35),transparent 70%),linear-gradient(160deg,#0c173a,#081129)!important}
.lux .lf-top .muted{color:#9aa3c2!important}.lux .lf-top a{color:var(--gold-2)!important}.lux .lf-mlogo{color:#fff}
.lux .login-card{background:linear-gradient(160deg,rgba(20,36,82,.92),rgba(11,22,54,.95))!important;border:1px solid rgba(212,175,55,.45)!important;box-shadow:0 40px 90px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(243,210,122,.18)!important;backdrop-filter:blur(8px)}
.lux .login-card::before{height:3px!important;background:linear-gradient(90deg,transparent,#b8901f 15%,#f3d27a 50%,#b8901f 85%,transparent)!important}
.lux-mark{display:flex;align-items:center;gap:10px;margin-bottom:22px}.lux-mark span{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:700;color:#fff}
.lux-kicker{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:6px}
.lux .login-card h1{font-family:'Cormorant Garamond',var(--serif)!important;font-size:38px!important;font-weight:700;background:linear-gradient(90deg,#fff,#e9edf8)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent;margin-bottom:4px!important}
.lux .lc-sub{color:#a6b0cf!important}
.lux .login-card label{color:#d9deee!important}.lux .login-card .chk{color:#b9c2de!important}
.lux .login-card input[type=email],.lux .login-card input[type=password],.lux .login-card input[type=text]{background:rgba(6,13,36,.7)!important;border:1.5px solid rgba(160,175,215,.22)!important;color:#fff!important}
.lux .login-card input::placeholder{color:#6f7aa0}
.lux .login-card input:focus{border-color:var(--gold)!important;box-shadow:0 0 0 4px rgba(212,175,55,.16)!important}
.lux .ic-in .ic{color:#7d88ad}.lux .ic-in:focus-within .ic{color:var(--gold)}.lux .pw-eye{color:#9aa4c6!important}.lux .pw-eye:hover{background:rgba(212,175,55,.12)!important}
.lux .caps{color:#f3d27a}
.lux .lc-row a{color:var(--gold-2)!important}
.lux input[type=checkbox]{accent-color:#d4af37}
.lux .login-card .btn.primary.lc-btn{background:linear-gradient(135deg,#b8901f 0%,#e2bd52 35%,#f3d27a 55%,#c9a227 100%)!important;color:#0a1430!important;font-weight:800;box-shadow:0 14px 30px -12px rgba(212,175,55,.7)!important;border:0}
.lux .login-card .btn.primary.lc-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.lux .lc-btn .spin{border-color:rgba(10,20,48,.25);border-top-color:#0a1430}
.lux .lc-or{color:#7f89ab}.lux .lc-or::before,.lux .lc-or::after{background:rgba(212,175,55,.22)}
.lux .lc-demo{background:transparent!important;color:var(--gold-2)!important;border:1.5px solid rgba(212,175,55,.55)!important}.lux .lc-demo:hover{background:rgba(212,175,55,.1)!important}
.lux-orn{display:flex;align-items:center;gap:10px;margin:22px 0 0;color:var(--gold)}.lux-orn i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.5),transparent)}.lux-orn span{font-size:12px}
.lux .lc-secure{color:#8d97b8!important;margin-top:10px!important}.lux .lc-secure svg{color:var(--gold)!important}
.lux .hero h1{font-size:46px!important}@media (max-width:1250px){.lux .hero h1{font-size:38px!important}}
@media (max-width:860px){.lux .lf-mlogo{visibility:hidden}}
/* ================= ROYAL NAVY + RICH GOLD — app-wide luxury theme ================= */
:root{
  --indigo:#1e3a8a;--indigo-2:#1e40af;--indigo-3:#2f4fa8;--indigo-soft:#eef2fb;--indigo-ink:#0b1a3f;
  --violet:#b8901f;--violet-soft:#fbf3dc;--fuchsia:#a07a14;--fuchsia-soft:#fbf3dc;
  --marigold:#d4af37;--marigold-2:#e2bd52;--marigold-soft:#fbf5e3;--marigold-ink:#7a5b0c;
  --gold:#d4af37;--gold-2:#f3d27a;--gold-3:#b8901f;--navy:#0b1a3f;
  --bg:#f6f4ee;--surface:#ffffff;--surface-2:#faf8f2;--text:#13203f;--muted:#6b7390;--line:#e8e3d6;--line-2:#dcd4bf;
  --side-1:#070f26;--side-2:#0f1d44;--side-text:#d5dbee;--side-muted:#b8a978;
  --shadow-2:0 12px 30px -12px rgba(11,26,63,.28),0 2px 6px rgba(11,26,63,.06);
  --serif:'Cormorant Garamond','Fraunces',Georgia,serif;
}
body{background:var(--bg)}
h1,h2,h3{color:var(--navy)}
/* sidebar */
.side{background-color:#081129!important;background-image:radial-gradient(420px 320px at 0 0,rgba(212,175,55,.14),transparent 70%),radial-gradient(500px 500px at 100% 100%,rgba(37,72,170,.35),transparent 70%),linear-gradient(rgba(212,175,55,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(212,175,55,.045) 1px,transparent 1px),linear-gradient(180deg,#0f1d44,#081129 60%,#060d24)!important;background-size:auto,auto,32px 32px,32px 32px,auto!important;border-right:1px solid rgba(212,175,55,.25)}
.brand b{font-family:var(--serif);font-size:22px;letter-spacing:.01em}.brand small{color:var(--gold-2)!important}
.nav .sec{color:#b8a978!important;letter-spacing:.18em}
.nav a:hover{background:rgba(212,175,55,.08)}
.nav a.on{background:linear-gradient(90deg,rgba(212,175,55,.26),rgba(212,175,55,.04))!important;color:#fff;box-shadow:inset 3px 0 0 var(--gold)!important}
.nav a.on svg{color:var(--gold-2)!important}
.nbadge{background:var(--gold)!important;color:var(--navy)!important}
/* top bar */
.top{background:rgba(255,255,255,.9)!important;border-bottom:1px solid var(--line)!important;box-shadow:0 1px 0 rgba(212,175,55,.35)}
.top h2{font-family:var(--serif)!important;font-size:27px!important;font-weight:700!important;color:var(--navy)!important}
.page-sub{color:var(--muted)}
.avatar{background:linear-gradient(135deg,#d4af37,#b8901f)!important;color:var(--navy)!important;font-weight:800}
.banner{border-left-color:var(--gold)!important}
/* buttons */
.btn{border-color:var(--line-2)}.btn:hover{border-color:var(--gold);color:var(--navy)}
.btn.primary,.btn.accent{background:linear-gradient(135deg,#b8901f 0%,#e2bd52 40%,#f3d27a 60%,#c9a227 100%)!important;color:var(--navy)!important;font-weight:700;border:0!important;box-shadow:0 8px 20px -10px rgba(184,144,31,.75)!important}
.btn.primary:hover,.btn.accent:hover{filter:brightness(1.05);color:var(--navy)!important}
.btn.primary:disabled{filter:grayscale(.4);opacity:.7}
/* cards & kpis */
.card{border-color:var(--line)!important;box-shadow:0 1px 2px rgba(11,26,63,.04),0 6px 18px -12px rgba(11,26,63,.18)}
.kpi::before{background:linear-gradient(90deg,var(--navy),#2f4fa8)!important}
.kpi:nth-child(2n)::before{background:linear-gradient(90deg,#b8901f,#f3d27a)!important}
.kpi .v{color:var(--navy)!important}
.rk.hero,.rk.hero.card{background-color:#0b1a3f!important;background-image:radial-gradient(260px 160px at 100% 0,rgba(212,175,55,.28),transparent 70%),linear-gradient(135deg,#13285e,#0b1a3f 60%,#081129)!important;background-size:auto!important;border:1px solid rgba(212,175,55,.45)!important;color:#fff}
.rk.hero::before{background:linear-gradient(90deg,#b8901f,#f3d27a,#b8901f)!important}
.rk.hero .v{color:var(--gold-2)!important}.rk.hero .l{color:#d9c58a!important}.rk.hero .muted,.rk.hero .small{color:#c3cbe4!important}
/* tabs, chips, segments */
.rp-tabs button.on,.tabs button.on{color:var(--navy)!important;border-bottom-color:var(--gold)!important}
.tabs button.on{background:var(--navy)!important;color:var(--gold-2)!important}
.chips button.on,.fd-tabs button.on{background:var(--navy)!important;border-color:var(--navy)!important;color:var(--gold-2)!important}
.seg button.on{color:var(--navy)!important;box-shadow:0 1px 3px rgba(11,26,63,.15),inset 0 -2px 0 var(--gold)!important}
/* forms */
input:focus,select:focus,textarea:focus{border-color:var(--gold)!important;box-shadow:0 0 0 4px rgba(212,175,55,.18)!important}
input[type=checkbox],input[type=radio]{accent-color:#b8901f}
/* tables */
th{color:#7a6a3a!important;letter-spacing:.06em}
.tablewrap,.card table{border-color:var(--line)}
tr.click:hover td{background:#fbf7ec!important}
/* modals */
.modal{border-top:4px solid var(--gold);border-radius:18px}.modal h2{font-family:var(--serif);font-size:26px;color:var(--navy)}
.modal-bg{background:rgba(6,13,36,.55)!important;backdrop-filter:blur(3px)}
/* misc accents */
a{color:#1e40af}.tag{background:#fbf3dc!important;color:#7a5b0c!important}
.pill.gold{background:#fbf3dc!important;color:#7a5b0c!important}
.plan-card.current{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(212,175,55,.2)}
.rt i,.cb i{background:linear-gradient(90deg,#1e3a8a,#2f4fa8)!important}.cc .cb i{background:linear-gradient(180deg,#2f4fa8,#0f1d44)!important}.cb:hover i{background:linear-gradient(180deg,#f3d27a,#b8901f)!important}
.toast{border-left-color:var(--gold)!important}
[data-theme="dark"]{--bg:#070f26;--surface:#0e1838;--surface-2:#122045;--text:#e7ecf8;--muted:#9aa4c6;--line:#22305e;--line-2:#2c3b70}
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] .kpi .v,[data-theme="dark"] .top h2{color:#f1e2b0!important}
[data-theme="dark"] .top{background:rgba(10,20,48,.9)!important}
.fd-stat.free{--c:#b8901f!important;--cs:#fbf3dc!important}
.pos-head,.ord-head,.order-head{background:linear-gradient(135deg,#13285e,#0b1a3f)!important;border-bottom:2px solid var(--gold)}
.pc-h{border-bottom:2px solid var(--gold)}.pc-h small{color:var(--gold-2)!important}
/* login: refined feature list (replaces preview card) */
.h-feats{display:grid;gap:14px;margin:34px 0 0;max-width:500px}
.h-feats>div{display:flex;gap:16px;align-items:center;padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,rgba(212,175,55,.09),rgba(255,255,255,.02));border:1px solid rgba(212,175,55,.22)}
.h-feats .fi{width:46px;height:46px;flex:none;display:grid;place-items:center;font-size:21px;border-radius:13px;background:linear-gradient(135deg,rgba(212,175,55,.25),rgba(212,175,55,.06));border:1px solid rgba(212,175,55,.4)}
.h-feats b{display:block;color:#fff;font-size:15.5px;font-family:'Cormorant Garamond',var(--serif);font-size:20px;letter-spacing:.01em}
.h-feats small{color:#b9c2dd;font-size:13px}
.lux .login-card{padding-bottom:30px!important}
.h-feats .fi{color:#f3d27a}.h-feats .fi svg{width:22px;height:22px}
/* ===== Workspace background: layered ivory canvas with navy/gold light ===== */
body{background-color:#f4f2eb!important}
.main{position:relative;isolation:isolate;background-color:#f4f2eb;
  background-image:
    radial-gradient(1000px 520px at 100% -8%,rgba(212,175,55,.16),transparent 62%),
    radial-gradient(900px 640px at -6% 108%,rgba(30,58,138,.10),transparent 60%),
    radial-gradient(600px 400px at 55% 40%,rgba(255,255,255,.7),transparent 70%),
    radial-gradient(rgba(11,26,63,.06) 1px,transparent 1.2px),
    linear-gradient(180deg,#f7f5ef 0%,#f2efe6 100%);
  background-size:auto,auto,auto,22px 22px,auto;background-attachment:fixed}
.main::before{content:'';position:fixed;inset:0 0 auto 252px;height:220px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,26,63,.035),transparent)}
.shell.collapsed .main::before{left:76px}
.top{background:rgba(255,255,255,.72)!important;backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid rgba(212,175,55,.28)!important;box-shadow:0 6px 20px -16px rgba(11,26,63,.35)!important}
/* surfaces */
.card{background:linear-gradient(180deg,#ffffff 0%,#fdfcf9 100%)!important;border:1px solid #ebe5d4!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(11,26,63,.04),0 10px 26px -18px rgba(11,26,63,.28)!important}
.card:hover{border-color:#e2d6b4!important}
.tablewrap{background:#fff;border:1px solid #ebe5d4!important;border-radius:14px;box-shadow:0 10px 26px -20px rgba(11,26,63,.3)}
table th{background:linear-gradient(180deg,#faf7ef,#f5f0e3)!important}
tbody tr:nth-child(even) td{background:rgba(250,247,239,.55)}
.rp-bar.card,.gx-bar.card{background:rgba(255,255,255,.82)!important;backdrop-filter:blur(6px)}
.seg{background:#efeadd!important}.seg button.on{background:#fff!important}
input,select,textarea{background-color:#fffdf9}
/* section titles get a gold tick */
.card h3::before{content:'';width:4px;height:15px;border-radius:2px;background:linear-gradient(180deg,#f3d27a,#b8901f);flex:none}
.rk.hero h3::before,.login-card h3::before{display:none}
@media (max-width:900px){.main::before{left:0}}
/* dark mode canvas */
[data-theme="dark"] body,[data-theme="dark"] .main{background-color:#070f26!important}
[data-theme="dark"] .main{background-image:radial-gradient(900px 520px at 100% -8%,rgba(212,175,55,.12),transparent 60%),radial-gradient(900px 640px at -6% 108%,rgba(37,72,170,.3),transparent 60%),radial-gradient(rgba(212,175,55,.05) 1px,transparent 1.2px),linear-gradient(180deg,#0a1532,#070f26)}
[data-theme="dark"] .card,[data-theme="dark"] .tablewrap{background:linear-gradient(180deg,#0f1b3e,#0c1634)!important;border-color:#22305e!important}
[data-theme="dark"] table th{background:#101d42!important}[data-theme="dark"] tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}
[data-theme="dark"] .top{background:rgba(10,20,48,.75)!important}[data-theme="dark"] .seg{background:#101d42!important}[data-theme="dark"] .seg button.on{background:#1a2a5c!important}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background-color:#0b1530}
.bar-past{fill:url(#barNavy)!important;opacity:.85!important}.bar-g:hover .bar-past{opacity:1!important}

/* ===== Refined backgrounds: jaali lattice + light sheen (replaces square grid) ===== */
:root{--jaali:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23d4af37%22%20stroke-width%3D%22.7%22%20opacity%3D%22.55%22%3E%3Cpath%20d%3D%22M32%204%20L60%2032%20L32%2060%20L4%2032%20Z%22/%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M32%2023%20Q38%2032%2032%2041%20Q26%2032%2032%2023%20Z%20M23%2032%20Q32%2026%2041%2032%20Q32%2038%2023%2032%20Z%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%220%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2264%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%2264%22%20cy%3D%2264%22%20r%3D%223%22/%3E%3C/g%3E%3C/svg%3E")}
.lux .hero,.lux .form{position:relative}
.side{background-color:#081129!important;background-image:
  linear-gradient(115deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,0) 38%),
  radial-gradient(380px 300px at 0% 0%,rgba(212,175,55,.16),transparent 70%),
  radial-gradient(520px 520px at 120% 105%,rgba(47,79,168,.45),transparent 70%),
  linear-gradient(180deg,#0f1d44 0%,#0a1535 55%,#060d24 100%)!important;background-size:auto!important}
.side::before{content:'';position:absolute;inset:0;background-image:var(--jaali);background-size:64px 64px;opacity:.07;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,#000 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,#000 100%)}
.side>*{position:relative}
.side{border-right:0!important;box-shadow:inset -1px 0 0 rgba(212,175,55,.08)}
.side::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(212,175,55,.55) 30%,rgba(243,210,122,.7) 50%,rgba(212,175,55,.55) 70%,transparent);pointer-events:none}
.lux .hero{background-image:
  linear-gradient(120deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,0) 35%),
  radial-gradient(620px 480px at 0% 0%,rgba(212,175,55,.18),transparent 65%),
  radial-gradient(640px 560px at 100% 100%,rgba(47,79,168,.5),transparent 70%),
  linear-gradient(160deg,#10204d 0%,#0a1638 55%,#060d24 100%)!important;background-size:auto!important;border-right:0!important}
.lux .hero::before{content:'';display:block!important;position:absolute;inset:0;background-image:var(--jaali);background-size:72px 72px;opacity:.09;pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 90% at 0% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(120% 90% at 0% 50%,#000 20%,transparent 75%);width:auto;height:auto;border-radius:0;right:0;top:0}
.lux .hero::after{content:'';display:block!important;position:absolute;top:0;right:0;bottom:0;left:auto;width:1px;background:linear-gradient(180deg,transparent,rgba(212,175,55,.6) 30%,rgba(243,210,122,.8) 50%,rgba(212,175,55,.6) 70%,transparent);mask-image:none;-webkit-mask-image:none}
.lux .hero>*{position:relative;z-index:1}
.lux .form{background:
  linear-gradient(240deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,0) 35%),
  radial-gradient(560px 440px at 100% 0%,rgba(212,175,55,.14),transparent 65%),
  radial-gradient(640px 520px at 0% 100%,rgba(47,79,168,.4),transparent 70%),
  linear-gradient(160deg,#0d1a40,#081129)!important}
.lux .form::before{content:'';position:absolute;inset:0;background-image:var(--jaali);background-size:72px 72px;opacity:.05;pointer-events:none;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,transparent 35%,#000 100%);mask-image:radial-gradient(70% 70% at 50% 50%,transparent 35%,#000 100%)}
.lux .form>*{position:relative;z-index:1}
.lux .hero::before{opacity:.13!important}.side::before{opacity:.09}
/* sidebar brand: keep "Atithi Cloud" on one line */
.brand{gap:10px!important;padding:6px 6px 18px 10px!important}
.brand>.app-logo,.brand>img{flex:none}
.brand>div{min-width:0;flex:1;line-height:1.15}
.brand b{display:block;font-size:21px!important;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}
.brand small{max-width:none!important;margin-top:3px;letter-spacing:.02em}
.brand .collapse-btn{flex:none;margin-left:auto}
.shell.collapsed .brand{padding:4px 0 16px!important}.shell.collapsed .brand .collapse-btn{margin:6px auto 0}
/* idle logout warning */
.idle-warn{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(6,13,36,.6);backdrop-filter:blur(4px);animation:lcIn .2s ease-out}
.idle-card{width:min(420px,92vw);background:#fff;border-radius:20px;border-top:4px solid var(--gold,#d4af37);padding:28px 26px 24px;text-align:center;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.idle-card h3{font-family:var(--serif);font-size:26px;margin:14px 0 6px;color:var(--navy,#0b1a3f);justify-content:center}.idle-card h3::before{display:none}
.idle-card p{color:#6b7390;margin:0 0 18px;font-size:14px}
.idle-ring{position:relative;width:86px;height:86px;margin:0 auto}.idle-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.idle-ring .bg{fill:none;stroke:#efe8d4;stroke-width:3.2}.idle-ring .fg{fill:none;stroke:#d4af37;stroke-width:3.2;stroke-linecap:round;transition:stroke-dasharray 1s linear}
.idle-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;color:#0b1a3f}
[data-theme="dark"] .idle-card{background:#0f1b3e}[data-theme="dark"] .idle-card h3,[data-theme="dark"] .idle-ring b{color:#f3d27a}

/* ===== Mobile layer (phones ≤ 640px) ===== */
@media (max-width:640px){
  .top{gap:8px!important;padding:8px 12px!important}
  .top h2{flex:1 1 auto;min-width:0;font-size:19px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top .page-sub,.top #net{display:none!important}
  .top .who{margin-left:0!important;gap:0}
  .top .who>div{display:none!important}
  .top .avatar{width:32px;height:32px;font-size:12px}
  .top .search-btn{padding:0 8px!important;min-width:0!important;height:32px}
  .top .search-btn span,.top .search-btn kbd{display:none!important}
  .top #theme{width:32px;height:32px}
  .top #lang{padding:0 8px!important;height:32px;font-size:12px;min-width:0}
  .top #logout{font-size:0!important;width:34px;height:32px;padding:0!important;display:inline-grid;place-items:center;flex:none}
  .top #logout::before{content:'';width:17px;height:17px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E") center/contain no-repeat}
  .top .menu-toggle{width:36px;height:34px;padding:0;justify-content:center;flex:none}
  .content{padding:14px 12px 40px!important}
}
@media (max-width:860px){
  .grid>*,.dash-grid>*,.menu-layout>*,.pos2>*,.fd-stats>*{min-width:0}
  .g2,.g3,.g4,.menu-layout,.dash-grid{grid-template-columns:minmax(0,1fr)}
  .fd-stats,.qr-stats,.hk-stats,.iv-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .fd-stats .fd-actions,.hk-ready{grid-column:1/-1!important}
  .mscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .mscroll>table{min-width:100%}
  .modal,.modal-card,.dlg{max-width:calc(100vw - 16px)!important}
}
@media (min-width:561px) and (max-width:860px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .kds2{margin:-14px -12px -40px!important;padding:14px 12px 30px!important}
  input,select,textarea{font-size:16px}
}
@media (max-width:860px){
  .side{z-index:40!important;height:100vh;height:100dvh;overflow-y:auto}
  body.side-on::after{content:'';position:fixed;inset:0;background:rgba(6,13,36,.5);backdrop-filter:blur(2px);z-index:35}
  body.side-on{overflow:hidden}
}
@media (max-width:640px){
  .modal-bg{padding:8px!important;align-items:flex-end}
  .modal{padding:18px 16px!important;max-height:92vh;max-height:92dvh;border-radius:18px 18px 12px 12px!important}
  .modal h2{font-size:22px!important}
}
@media (max-width:640px){
  .mrow{grid-template-columns:22px minmax(0,1fr) 96px 46px 32px!important;gap:8px!important;padding:10px!important}
  .mrow input{width:100%;min-width:0}
}
#mcart{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:10px;padding:13px 16px;border:0;border-radius:14px;background:linear-gradient(135deg,#0b1a3f,#1e3a8a);color:#fff;font:600 15px/1 inherit;box-shadow:0 12px 30px -10px rgba(11,26,63,.6),inset 0 0 0 1px rgba(212,175,55,.45);cursor:pointer}
#mcart .mc-n{min-width:26px;height:26px;border-radius:99px;display:grid;place-items:center;background:linear-gradient(135deg,#f3d27a,#d4af37);color:#0b1a3f;font-weight:800;font-size:13px}
#mcart b{margin-left:auto;color:#f3d27a;font-size:16px}
@media (max-width:640px){
  .grid.g3:has(> .kpi),.grid.g4:has(> .kpi){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .grid:has(> .kpi) > .kpi.hero{grid-column:1/-1}
  .grid:has(> .kpi) > .kpi{padding:14px 12px 12px 14px!important}
  .grid:has(> .kpi) > .kpi .v{font-size:21px!important;word-break:break-word}
  .grid:has(> .kpi) > .kpi .l{font-size:10.5px!important}
  .grid:has(> .kpi) > .kpi .small,.grid:has(> .kpi) > .kpi .sub{font-size:11.5px}
  .rp-tabs,.tabs{overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}
  .seg{flex-wrap:wrap}.seg > button{white-space:nowrap}
  .rp-tabs::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
  .rp-tabs > *,.tabs > *{flex:none;white-space:nowrap}
}
@media (max-width:860px){
  .lux.login3,.login3{overflow-x:hidden}
  .login3 .form{min-width:0!important;width:100%!important;max-width:100vw;box-sizing:border-box;align-items:stretch}
  .login3 .lf-top{position:static!important;width:auto!important;max-width:none!important;margin:0 0 14px!important;padding:0 2px;display:flex;justify-content:flex-end;box-sizing:border-box}
  .lux .lf-mlogo,.login3 .lf-top .grow{display:none!important}
  .login3 .login-card{width:100%!important;max-width:460px;margin:0 auto;box-sizing:border-box}
}
@media (max-width:640px){#toast{bottom:auto!important;top:calc(10px + env(safe-area-inset-top))!important}}
@media (max-width:640px){
  .pos-bar{flex-wrap:wrap}
  .pos-types{width:100%;box-sizing:border-box}
  .pos-types button{flex:1 1 0;justify-content:center;padding:9px 4px!important;min-width:0;gap:5px!important;font-size:13.5px!important}
  .pos-search{flex:1 1 0;min-width:0}
  .quick{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  .quick-a{min-width:0;padding:10px!important}
  .quick-a b,.quick-a small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:640px){.kpi2 .spark{flex:0 1 auto;max-width:48%;height:auto}.kpi2 .v{font-size:22px!important}}
/* ===== Room amenities picker / editor ===== */
.am-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.am-pick{display:flex;flex-wrap:wrap;gap:8px}
.am-chip{border:1px solid #e3dcc6;background:#fff;color:#334155;border-radius:999px;padding:7px 14px;font:500 13.5px/1.2 inherit;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
.am-chip:hover{border-color:var(--gold,#d4af37);box-shadow:0 2px 8px -4px rgba(11,26,63,.3)}
.am-chip.on{background:linear-gradient(135deg,#0b1a3f,#1e3a8a);border-color:#0b1a3f;color:#f3d27a;font-weight:600}
.am-add{display:flex;gap:8px;margin-top:12px}.am-add input{flex:1;min-width:0}
.am-mgr{margin-top:12px;border:1px solid #ebe5d4;border-radius:12px;padding:12px;background:#fdfbf5}
.am-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed #ebe5d4}
.am-row:last-child{border-bottom:0}.am-use{white-space:nowrap;min-width:64px;text-align:right}
.am-row .btn[disabled]{opacity:.45;cursor:default}
[data-theme="dark"] .am-chip{background:#101d42;border-color:#22305e;color:#d6dcef}
[data-theme="dark"] .am-chip.on{background:linear-gradient(135deg,#b8901f,#d4af37);color:#0b1a3f;border-color:#d4af37}
[data-theme="dark"] .am-mgr{background:#0c1634;border-color:#22305e}
@media (max-width:640px){.am-row{grid-template-columns:minmax(0,1fr) auto auto}.am-use{grid-column:1/-1;text-align:left;order:3}}
/* ===== Staff attendance register ===== */
.at-bar{align-items:center}.at-date{display:inline-flex;align-items:center;gap:6px}.at-date input{width:auto}
.btn.icon-only{width:36px;padding:0;justify-content:center;font-size:18px}
.at-list{padding:0!important;overflow:hidden}
.at-row{display:grid;grid-template-columns:minmax(220px,1.3fr) auto minmax(260px,1.6fr);gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid #efe9d8;border-left:3px solid transparent;transition:background .15s}
.at-row:last-child{border-bottom:0}.at-row:hover{background:#fdfbf4}
.at-row.dirty{background:#fff8e1;border-left-color:#d4af37}
.at-row.st-p,.at-row.st-od{border-left-color:#16a34a}.at-row.st-a{border-left-color:#dc2626}.at-row.st-l{border-left-color:#7c3aed}.at-row.st-hd{border-left-color:#f59e0b}.at-row.st-wo,.at-row.st-h{border-left-color:#94a3b8}
.at-row.dirty{border-left-color:#d4af37}
.at-emp{display:flex;gap:10px;align-items:flex-start;min-width:0}.at-emp>div{min-width:0}
.at-flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;align-items:center}
.at-st{display:flex;gap:4px;flex-wrap:wrap}
.at-b{min-width:38px;height:34px;border-radius:9px;border:1px solid #e3dcc6;background:#fff;font:700 13px/1 inherit;color:#475569;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 8px;transition:all .12s}
.at-b small{font:500 10px/1 inherit;color:inherit;opacity:.85}
.at-b:hover:not([disabled]){border-color:#b8901f}.at-b[disabled]{opacity:.35;cursor:not-allowed}
.at-b.on.b-p,.at-b.on.b-od{background:#16a34a;border-color:#16a34a;color:#fff}.at-b.on.b-a{background:#dc2626;border-color:#dc2626;color:#fff}
.at-b.on.b-hd{background:#f59e0b;border-color:#f59e0b;color:#fff}.at-b.on.b-l{background:#7c3aed;border-color:#7c3aed;color:#fff}
.at-b.on.b-wo,.at-b.on.b-h{background:#475569;border-color:#475569;color:#fff}
.at-st.big .at-b{min-width:74px;height:50px;font-size:16px}
.at-ex{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.at-ex select{width:auto;max-width:190px}.at-t{display:inline-flex;align-items:center;gap:5px;margin:0}.at-t span{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase}
.at-t input{width:104px;padding:6px 8px}.at-t.ot input{width:62px}.at-rm{flex:1;min-width:120px;padding:6px 10px}
.at-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;align-items:center}.at-legend span{display:inline-flex;gap:5px;align-items:center}
i.at-c{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid rgba(0,0,0,.08)}
.at-c.p,.at-cell.p,.at-cell.od,.at-c.od{background:#dcfce7;color:#166534}.at-c.a,.at-cell.a{background:#fee2e2;color:#991b1b}
.at-c.hd,.at-cell.hd{background:#fef3c7;color:#92400e}.at-c.l,.at-cell.l{background:#ede9fe;color:#5b21b6}.at-c.lwp,.at-cell.lwp{background:#fce7f3;color:#9d174d}
.at-c.wo,.at-cell.wo,.at-c.h,.at-cell.h{background:#e2e8f0;color:#334155}.at-c.un{background:#fff;border:1px dashed #cbd5e1}
.at-reg table{border-collapse:separate;border-spacing:0;font-size:12px}
.at-reg th,.at-reg td{padding:6px 4px!important;text-align:center;white-space:nowrap}
.at-reg .at-sticky{position:sticky;left:0;z-index:2;background:#fff;text-align:left;min-width:170px;max-width:220px;box-shadow:1px 0 0 #ebe5d4;white-space:normal}
.at-reg thead .at-sticky{z-index:3;background:#faf6ea}
.at-dh{min-width:30px;font-weight:700}.at-dh small{display:block;font-size:9.5px;color:var(--muted);font-weight:600}
.at-dh.sun{background:#f1f5f9!important}.at-dh.hol{background:#fdf2c8!important}.at-dh.tdy{box-shadow:inset 0 -3px 0 #d4af37}
.at-cell{cursor:pointer;font-weight:700;font-size:11px;border-right:1px solid #fff;border-bottom:1px solid #fff;min-width:30px}
.at-cell:hover{outline:2px solid #d4af37;outline-offset:-2px}.at-cell.un{color:#cbd5e1;background:#fff}.at-cell.fut{background:#fbfaf6;cursor:pointer}
.at-cell.auto{opacity:.75}.at-cell.late{box-shadow:inset 0 -3px 0 #f59e0b}.at-cell.nj{background:#f8fafc;color:#cbd5e1;cursor:default}
.at-tc{font-weight:600;min-width:38px;background:#fbf8ef}.at-tc.pay{background:#f3ecd2;color:#0b1a3f}.at-tc.bad{color:#b91c1c}.at-tc.warn{color:#b45309}
.at-punch{display:flex;align-items:center;gap:14px;border-left:4px solid #d4af37!important}
.at-pi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#0b1a3f,#1e3a8a);color:#f3d27a;flex:none}
[data-theme="dark"] .at-row:hover{background:#101d42}[data-theme="dark"] .at-row.dirty{background:#2a2410}
[data-theme="dark"] .at-b{background:#101d42;border-color:#22305e;color:#cbd5e1}
[data-theme="dark"] .at-reg .at-sticky{background:#0f1b3e}[data-theme="dark"] .at-tc{background:#0f1b3e}[data-theme="dark"] .at-tc.pay{background:#1a2a5c;color:#f3d27a}
[data-theme="dark"] .at-cell.un{background:#0c1634}[data-theme="dark"] .at-row{border-bottom-color:#22305e}
@media (max-width:1100px){.at-row{grid-template-columns:minmax(0,1fr) auto}.at-ex{grid-column:1/-1}}
@media (max-width:640px){
  .at-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}
  .at-st{gap:5px}.at-b{flex:1 1 0;min-width:0;height:38px}
  .at-ex .at-t{flex:1 1 40%}.at-t input{width:100%}.at-rm{flex:1 1 100%}
  .at-bar>*{flex:1 1 auto}.at-date{width:100%}.at-date input{flex:1}
  .at-reg .at-sticky{min-width:120px;max-width:140px}
  .at-punch{flex-wrap:wrap}.at-punch .btn{width:100%;justify-content:center}
}
/* ===== Booking: room details (eye) ===== */
.bk-rw{position:relative;display:grid}.bk-rw .bk-room{width:100%;padding-right:34px}
.bk-eye{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:8px;border:1px solid #e3dcc6;background:#fff;color:#1e3a8a;display:grid;place-items:center;cursor:pointer;padding:0;transition:all .15s}
.bk-eye:hover,.bk-eye.on{background:#0b1a3f;border-color:#0b1a3f;color:#f3d27a}
.bk-eye.inl{position:static;display:inline-grid;width:24px;height:22px;vertical-align:middle;margin-left:4px}
.rd-panel{margin-top:12px;border:1px solid #e6d9ae;border-radius:14px;padding:14px 16px;background:linear-gradient(180deg,#fffdf6,#fbf6e6);box-shadow:0 10px 24px -18px rgba(11,26,63,.45);animation:pop .16s ease-out}
.rd-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rd-no{min-width:54px;height:46px;padding:0 8px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#0b1a3f,#1e3a8a);color:#f3d27a;font:700 18px/1 var(--serif,serif)}
.rd-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:12px}
.rd-f{background:#fff;border:1px solid #efe7cf;border-radius:10px;padding:8px 10px}.rd-f small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}.rd-f b{font-size:14px;color:#0b1a3f}
.rd-am>small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:6px}
.rd-am>div{display:flex;flex-wrap:wrap;gap:6px}
.rd-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#fff;border:1px solid #e3dcc6;font-size:13px;font-weight:500;color:#1f2937}.rd-chip i{font-style:normal}
.rd-note{margin-top:10px;padding:8px 10px;border-radius:8px;background:#fff7e0;border:1px dashed #e6c76a}
[data-theme="dark"] .rd-panel{background:linear-gradient(180deg,#0f1b3e,#0c1634);border-color:#2b3a6e}
[data-theme="dark"] .rd-f,[data-theme="dark"] .rd-chip,[data-theme="dark"] .bk-eye{background:#101d42;border-color:#22305e;color:#e6e9f5}[data-theme="dark"] .rd-f b{color:#f1e2b0}
@media (max-width:640px){.rd-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.rd-head{flex-wrap:wrap}}
.at-clock{text-align:right;line-height:1.1;padding:0 6px}.at-clock b{display:block;font:700 22px/1 var(--serif,serif);color:#0b1a3f;letter-spacing:.02em}.at-clock small{font-size:10px;color:var(--muted);letter-spacing:.1em}
[data-theme="dark"] .at-clock b{color:#f3d27a}
.at-pill{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border-radius:6px;font-weight:700;font-size:11.5px}
.at-pill.p,.at-pill.od{background:#dcfce7;color:#166534}.at-pill.a{background:#fee2e2;color:#991b1b}.at-pill.hd{background:#fef3c7;color:#92400e}.at-pill.l{background:#ede9fe;color:#5b21b6}.at-pill.lwp{background:#fce7f3;color:#9d174d}.at-pill.wo,.at-pill.h{background:#e2e8f0;color:#334155}
@media (max-width:640px){.at-clock{order:3;text-align:left}.at-punch .grow{flex:1 1 60%}}
@media (max-width:640px){.at-punch .btn,.at-punch>.pill{order:4}.at-clock{order:2;margin-left:auto;text-align:right}.at-punch .grow{order:1;flex:1 1 50%}.at-pi{order:0}}
.at-mine td:first-child{white-space:nowrap}
.at-reg .stk1,.at-reg .stk2{position:sticky;z-index:2}.at-reg .stk1{right:0;width:90px;min-width:90px;max-width:90px}.at-reg .stk2{right:0;min-width:64px;box-shadow:-1px 0 0 #e6d9ae}
.at-reg .stk1 + .stk1{right:0}.at-reg tr > .stk2:has(+ .stk1){right:90px}
.at-reg .at-dh,.at-reg .at-cell{min-width:28px}
/* ===== Roles & permissions ===== */
.rl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.rl-card{display:flex;flex-direction:column;gap:6px}.rl-card.own{border-top:3px solid #d4af37!important}
.rl-bar{height:6px;border-radius:99px;background:#efe9d8;overflow:hidden}.rl-bar i{display:block;height:100%;background:linear-gradient(90deg,#1e3a8a,#d4af37);border-radius:99px}
.rl-mods{display:flex;flex-wrap:wrap;gap:4px}.rl-act{gap:6px;margin-top:auto}
.rl-mx table.matrix{border-collapse:separate;border-spacing:0}
.rl-mx .rl-pc{position:sticky;left:0;z-index:2;background:#fff;min-width:300px;max-width:380px;text-align:left!important;box-shadow:1px 0 0 #ebe5d4}
.rl-mx thead th{position:sticky;top:0;z-index:3;background:#faf6ea}.rl-mx thead .rl-pc{z-index:4;background:#faf6ea}
.rl-rh{min-width:104px;vertical-align:bottom}.rl-rh span{display:block;font-weight:700;color:#0b1a3f;text-transform:none;letter-spacing:0;font-size:12.5px}.rl-rh small{font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
.rl-rh.own span{color:#b8901f}
.rl-pn{font-weight:600;color:#1f2937}
.rl-gr td{background:#f6f1e1!important;padding-top:10px!important;padding-bottom:10px!important}.rl-gr .rl-pc b{color:#0b1a3f;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.rl-gr.off td,.off .rl-pc{opacity:.6}
.rl-all{border:1px solid #e3dcc6;background:#fff;border-radius:99px;padding:3px 10px;font:600 11.5px/1.2 inherit;color:#64748b;cursor:pointer}
.rl-all.some{border-color:#d4af37;color:#8a6d12;background:#fff8e1}.rl-all.on{background:#0b1a3f;border-color:#0b1a3f;color:#f3d27a}.rl-all[disabled]{opacity:.45;cursor:not-allowed}
.rl-cb{display:inline-grid;place-items:center;cursor:pointer;margin:0}.rl-cb input{position:absolute;opacity:0;width:0;height:0}
.rl-cb span{width:22px;height:22px;border-radius:7px;border:1.5px solid #cfc5a5;background:#fff;display:grid;place-items:center;transition:all .12s}
.rl-cb.on span{background:linear-gradient(135deg,#0b1a3f,#1e3a8a);border-color:#0b1a3f}
.rl-cb.on span::after{content:'';width:6px;height:11px;border:solid #f3d27a;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.rl-cb:hover:not(.lk) span{border-color:#b8901f;box-shadow:0 0 0 3px rgba(212,175,55,.2)}
.rl-cb input:focus-visible + span{outline:2px solid #d4af37;outline-offset:2px}
.rl-cb.lk{cursor:not-allowed}.rl-cb.lk span{opacity:.55}.rl-cb.lk.on span{opacity:.7}
.rl-lock{font-size:13px;opacity:.7}
.rl-save{position:sticky;bottom:12px;z-index:6;display:none;align-items:center;gap:10px;margin-top:14px;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,#0b1a3f,#1e3a8a);color:#e8ecf8;box-shadow:0 14px 30px -12px rgba(11,26,63,.6)}
.rl-save.show{display:flex}.rl-save span{flex:1}.rl-save b{color:#f3d27a}.rl-save .btn:not(.primary){background:transparent;color:#e8ecf8;border-color:rgba(255,255,255,.35)}
[data-theme="dark"] .rl-mx .rl-pc{background:#0f1b3e}[data-theme="dark"] .rl-mx thead th,[data-theme="dark"] .rl-mx thead .rl-pc{background:#13214a}
[data-theme="dark"] .rl-gr td{background:#16244f!important}[data-theme="dark"] .rl-pn,[data-theme="dark"] .rl-gr .rl-pc b,[data-theme="dark"] .rl-rh span{color:#f1e2b0}
[data-theme="dark"] .rl-cb span,[data-theme="dark"] .rl-all{background:#101d42;border-color:#2b3a6e}
@media (max-width:640px){.rl-mx .rl-pc{min-width:170px;max-width:190px}.rl-mx .rl-pc .small{display:none}.rl-rh{min-width:78px}.rl-save{flex-wrap:wrap}.rl-save span{flex:1 1 100%}}
@media (max-width:640px){.rl-msel{margin-bottom:10px}.rl-mx .rl-pc{min-width:0;max-width:none;width:72%}.rl-mx .rl-pc .small{display:block}.rl-rh{min-width:0}.rl-grid{grid-template-columns:1fr}}
/* ===== Cash register ===== */
.cb-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.cb-side{position:sticky;top:76px}
.cb-book table{font-size:13px}.cb-book tbody tr{cursor:pointer}.cb-book tbody tr:hover td{background:#fdfaf0}
.cb-book td.cb-in{color:#15803d;font-weight:600}.cb-book td.cb-out{color:#b91c1c;font-weight:600}.cb-book td.cb-bal{font-weight:700;color:#0b1a3f;background:#fbf8ef}
.cb-ob td{background:#f6f1e1!important;cursor:default}.cb-tot td{background:#f3ecd2!important;border-top:2px solid #d4af37}
.cb-late td{background:#fff8e1}
.cb-tag{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap;background:#eef2ff;color:#3730a3}
.cb-tag.t-pos{background:#dcfce7;color:#166534}.cb-tag.t-hotel{background:#e0e7ff;color:#1e3a8a}.cb-tag.t-rcv{background:#cffafe;color:#155e75}.cb-tag.t-exp{background:#fee2e2;color:#991b1b}.cb-tag.t-ref{background:#fce7f3;color:#9d174d}.cb-tag.t-man{background:#fef3c7;color:#92400e}.cb-tag.t-var{background:#e2e8f0;color:#334155}
.cb-chips button.on{background:#0b1a3f;color:#f3d27a;border-color:#0b1a3f}
.cb-den{display:grid;grid-template-columns:110px 16px 1fr 120px;gap:8px 10px;align-items:center;margin:10px 0}
.cb-den label{margin:0;font-weight:700;color:#0b1a3f}.cb-den b{text-align:right}
.cb-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.cb-sum>div{border:1px solid #ebe5d4;border-radius:12px;padding:10px 12px;background:#fffdf6}.cb-sum small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}.cb-sum b{font-size:19px}
.cb-sum .down{border-color:#fecaca;background:#fef2f2}.cb-sum .down b{color:#b91c1c}.cb-sum .up{border-color:#bbf7d0;background:#f0fdf4}.cb-sum .up b{color:#15803d}.cb-sum .ok b{color:#15803d}
#cdnote.need input{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.15)}
.note.ok{border-left:4px solid #16a34a}.note.warn{border-left:4px solid #f59e0b}
[data-theme="dark"] .cb-book tbody tr:hover td{background:#13214a}[data-theme="dark"] .cb-ob td,[data-theme="dark"] .cb-tot td{background:#16244f!important}[data-theme="dark"] .cb-book td.cb-bal{background:#0f1b3e;color:#f1e2b0}
[data-theme="dark"] .cb-sum>div{background:#0f1b3e;border-color:#22305e}[data-theme="dark"] .cb-den label{color:#f1e2b0}
@media (max-width:1150px){.cb-layout{grid-template-columns:1fr}.cb-side{position:static}}
@media (max-width:640px){.cb-den{grid-template-columns:80px 12px 1fr 90px}.cb-sum{grid-template-columns:1fr 1fr}.cb-sum>div:last-child{grid-column:1/-1}.cb-bar>*{flex:1 1 auto}.cb-book .c-hide{display:none}.cb-book td:first-child,.cb-book th:first-child{padding-right:4px!important}}
.cb-dt{width:auto!important;max-width:175px;flex:0 0 auto!important}
.cb-den{max-width:600px;grid-template-columns:90px 14px 160px 1fr!important}
@media (max-width:640px){.cb-den{grid-template-columns:70px 12px 1fr 84px!important}.cb-dt{max-width:none;flex:1 1 40%!important}}
/* top bar never wider than the screen: subtitle and user text shrink first */
.top{min-width:0}.top .page-sub{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .who{min-width:0;flex:0 1 auto}.top .who>div{min-width:0;overflow:hidden}.top .who>div b,.top .who>div .small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.top>button,.top>#net,.top .search-btn,.top .avatar{flex-shrink:0}
.menu-layout>*{min-width:0}.mlist{overflow-x:auto}
@media (min-width:1101px) and (max-width:1400px){.mrow{grid-template-columns:22px minmax(180px,2fr) 1fr 104px 130px 80px 50px 34px}}
/* cash counters */
.cb-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cb-sw{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:14px;border:1.5px solid #e6dcc0;background:#fff;cursor:pointer;transition:all .15s;font:inherit;color:inherit}
.cb-sw:hover{border-color:#d4af37;box-shadow:0 8px 20px -14px rgba(11,26,63,.4)}
.cb-sw.on{border-color:#0b1a3f;background:linear-gradient(135deg,#0b1a3f,#1e3a8a);color:#fff;box-shadow:0 12px 26px -14px rgba(11,26,63,.65)}
.cb-sw-i{font-size:24px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#f6f1e1;flex:none}.cb-sw.on .cb-sw-i{background:rgba(255,255,255,.12)}
.cb-sw-t{display:flex;flex-direction:column;min-width:0}.cb-sw-t small{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.cb-sw.on small{color:#cbd5f5}
.cb-sw-t b{font-size:20px;color:#0b1a3f}.cb-sw.on b{color:#f3d27a}.cb-sw-t em{font-style:normal;font-size:12px;color:var(--muted)}.cb-sw.on em{color:#e2e8f0}
.cb-ctr{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap}.cb-ctr.c-restaurant{background:#fff1e6;color:#9a3412}.cb-ctr.c-hotel{background:#e0e7ff;color:#1e3a8a}
.cb-tag.t-trf{background:#f3e8ff;color:#6b21a8}
.cb-cs{padding:8px 0;border-bottom:1px dashed #ebe5d4}.cb-cs:last-child{border-bottom:0}
.cb-cseg label{flex:1}.cb-cseg label>span{width:100%;justify-content:center}
.cb-lseg{display:inline-flex}
[data-theme="dark"] .cb-sw{background:#0f1b3e;border-color:#22305e}[data-theme="dark"] .cb-sw-t b{color:#f1e2b0}[data-theme="dark"] .cb-sw-i{background:#16244f}
@media (max-width:900px){.cb-switch{grid-template-columns:1fr}}
.cb-layout.all{grid-template-columns:1fr}.cb-layout.all .cb-side{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.cb-layout.all .cb-side>.card{margin:0}
@media (max-width:900px){.cb-layout.all .cb-side{grid-template-columns:1fr}}
.cb-mref{display:none}
@media (max-width:640px){.cb-book .c-m{display:none}.cb-mref{display:block;color:var(--muted)}.cb-book table{font-size:12.5px}.cb-book td,.cb-book th{padding:8px 6px!important}}
/* ===== Super admin: customer roles ===== */
.cr-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
.cr-list{position:sticky;top:76px;padding:12px!important;max-height:calc(100vh - 100px);display:flex;flex-direction:column;gap:10px}
.cr-items{overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.cr-item{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid #ebe5d4;background:#fff;cursor:pointer;font:inherit;color:inherit}
.cr-item:hover{border-color:#d4af37}.cr-item.on{background:linear-gradient(135deg,#0b1a3f,#1e3a8a);border-color:#0b1a3f;color:#fff}
.cr-item b{font-size:14px}.cr-item small{color:var(--muted);font-size:12px}.cr-item span{font-size:11.5px;color:#8a6d12;font-weight:600}.cr-item.on small{color:#cbd5f5}.cr-item.on span{color:#f3d27a}
.cr-main{min-width:0}
[data-theme="dark"] .cr-item{background:#101d42;border-color:#22305e}
@media (max-width:1000px){.cr-layout{grid-template-columns:1fr}.cr-list{position:static;max-height:none}.cr-items{flex-direction:row;overflow-x:auto}.cr-item{min-width:200px}}
.cr-layout>*{min-width:0}.cr-list{min-width:0}
@media (max-width:640px){.cr-head .row{flex-wrap:wrap}.cr-head .row>.grow{flex:1 1 100%}}

#demoArea[hidden]{display:none!important}