:root {
--bg: #f5f7fa; --panel: #ffffff; --panel-2: #f9fafb; --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --line: #e5e9f0; --line-2: #eef1f5;
--brand: #0d8f86; --brand-600: #0b7a73; --brand-700: #0a5f5a; --brand-50: #ecfdf9; --brand-100: #ccf5ee;
--accent: #6d5ae6; --accent-50: #f1efff;
--good: #15803d; --good-50: #ecfdf3; --warn: #b45309; --warn-50: #fff7e6; --bad: #c2312f; --bad-50: #fef1f1; --info: #2563eb; --info-50: #eff5ff;
--side: #0c1f2b; --side-ink: #b7c7d1; --side-hover: rgba(255,255,255,.06);
--r-sm: 8px; --r: 12px; --r-lg: 16px;
--sh-1: 0 1px 2px rgba(15,23,42,.05); --sh-2: 0 1px 3px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.05); --sh-3: 0 12px 40px rgba(15,23,42,.18);
--font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-600); text-decoration: none; }
h1 { font-size: 22px; line-height: 1.25; margin: 0; letter-spacing: -.01em; font-weight: 700; }
h2 { font-size: 15px; margin: 0 0 12px; font-weight: 650; letter-spacing: -.005em; }
h3 { font-size: 13px; margin: 0 0 8px; font-weight: 650; color: var(--ink-2); }
.muted { color: var(--muted); } .small { font-size: 12px; } .right { text-align: right; } .nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.ic { flex: none; display: inline-block; vertical-align: middle; }
::selection { background: var(--brand-100); }
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--side); color: var(--side-ink); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid #0a1922; }
.logo { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; color: #fff; }
.logo b { display: block; font-size: 15px; letter-spacing: -.01em; } .logo small { display: block; font-size: 11px; color: #7f97a5; }
.navscroll { flex: 1; overflow: auto; padding: 4px 10px 12px; }
.side .grp { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: #5f7887; margin: 16px 10px 6px; font-weight: 600; }
.side a { display: flex; align-items: center; gap: 11px; color: var(--side-ink); padding: 8px 10px; border-radius: 9px; margin: 1px 0; font-weight: 500; transition: background .15s, color .15s; }
.side a .ic { opacity: .8; } .side a:hover { background: var(--side-hover); color: #fff; }
.side a.on { background: linear-gradient(90deg, rgba(20,184,166,.22), rgba(20,184,166,.08)); color: #fff; box-shadow: inset 2px 0 0 #2dd4bf; }
.side a.on .ic { opacity: 1; color: #5eead4; }
.side a .lock { margin-left: auto; opacity: .55; }
.me { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.07); }
.me .who { flex: 1; min-width: 0; } .me b { display: block; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .me small { color: #7f97a5; font-size: 11.5px; }
.av { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; background: linear-gradient(135deg, #14b8a6, #6d5ae6); flex: none; }
.av.sm { width: 32px; height: 32px; font-size: 11px; }
.iconbtn { border: 0; background: transparent; color: inherit; width: 34px; height: 34px; border-radius: 8px; display: inline-grid; place-items: center; cursor: pointer; }
.iconbtn:hover { background: var(--side-hover); color: #fff; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; gap: 14px; align-items: center; padding: 12px 24px; 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: 20; flex-wrap: wrap; min-height: 60px; }
.top .iconbtn:hover { background: var(--panel-2); color: var(--ink); }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .crumb .biz { color: var(--ink); font-weight: 650; } .crumb .sep { opacity: .5; }
.shopsel { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 0 4px 0 10px; background: var(--panel); color: var(--brand-600); box-shadow: var(--sh-1); }
.shopsel select { border: 0; background: transparent; padding: 6px 4px; color: var(--ink); font-weight: 550; outline: none; max-width: 240px; }
.top .sp { flex: 1; }
.content { padding: 24px; width: 100%; max-width: 1440px; margin: 0 auto; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.skeleton { height: 220px; border-radius: var(--r); background: linear-gradient(90deg, #eef1f5 25%, #f6f8fa 50%, #eef1f5 75%); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.menu-btn { display: none !important; }
.scrim { display: none; }
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ph .sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--sh-1); }
.card > h2:first-child { display: flex; align-items: center; gap: 8px; }
.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)); }
.kpi { position: relative; overflow: hidden; padding: 16px 18px; }
.kpi .l { color: var(--muted); font-size: 12.5px; font-weight: 550; display: flex; align-items: center; gap: 8px; }
.kpi .v { font-size: 25px; font-weight: 750; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .small { margin-top: 2px; }
.kpi .ki { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--brand-50); color: var(--brand-600); }
.kpi.t-accent .ki { background: var(--accent-50); color: var(--accent); } .kpi.t-warn .ki { background: var(--warn-50); color: var(--warn); } .kpi.t-info .ki { background: var(--info-50); color: var(--info); } .kpi.t-bad .ki { background: var(--bad-50); color: var(--bad); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); padding: 7px 13px; border-radius: 9px; cursor: pointer; white-space: nowrap; font-weight: 550; color: var(--ink-2); box-shadow: var(--sh-1); transition: background .12s, border-color .12s, box-shadow .12s, transform .05s; }
.btn:hover { border-color: #cbd3dd; background: var(--panel-2); } .btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.pri { background: linear-gradient(180deg, #11a297, var(--brand-600)); border-color: var(--brand-600); color: #fff; box-shadow: 0 1px 2px rgba(13,143,134,.35), inset 0 1px 0 rgba(255,255,255,.15); }
.btn.pri:hover { background: var(--brand-700); }
.btn.ghost { background: transparent; box-shadow: none; border-color: transparent; } .btn.ghost:hover { background: var(--panel-2); }
.btn.bad { color: var(--bad); } .btn.bad:hover { background: var(--bad-50); border-color: #f3c7c6; }
.btn.sm { padding: 4px 9px; font-size: 12.5px; border-radius: 7px; } .btn.big { padding: 11px 18px; font-size: 15px; font-weight: 650; border-radius: 10px; }
input, select, textarea { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: #fff; min-width: 0; transition: border-color .12s, box-shadow .12s; }
input:hover, select:hover, textarea:hover { border-color: #cfd6df; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13,143,134,.15); }
input:disabled { background: var(--panel-2); color: var(--muted); }
textarea { resize: vertical; min-height: 70px; }
label.f { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-2); font-weight: 550; } label.f > * { font-weight: 400; font-size: 14px; color: var(--ink); }
.form { display: grid; gap: 12px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .form .full { grid-column: 1 / -1; }
.search { position: relative; display: flex; align-items: center; } .search .ic { position: absolute; left: 10px; color: var(--muted); pointer-events: none; } .search input { padding-left: 34px; width: 100%; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: middle; }
th { font-size: 11.5px; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; background: var(--panel-2); position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.click { cursor: pointer; } tbody tr:hover td { background: #f8fafc; }
.tbl { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: var(--sh-1); }
.card .tbl { box-shadow: none; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #f1f4f7; color: var(--ink-2); white-space: nowrap; line-height: 1.6; }
.pill .dot, .pill i.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.pill.good { background: var(--good-50); color: var(--good); } .pill.warn { background: var(--warn-50); color: var(--warn); } .pill.bad { background: var(--bad-50); color: var(--bad); }
.pill.svc { background: var(--accent-50); color: var(--accent); } .pill.brand { background: var(--brand-50); color: var(--brand-700); } .pill.info { background: var(--info-50); color: var(--info); }
.alert { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 10px; background: var(--info-50); color: #134e4a; margin-bottom: 10px; border: 1px solid #dbe7ff; flex-wrap: wrap; }
.alert.warn { background: var(--warn-50); color: #7c2d12; border-color: #fde3b5; } .alert.bad { background: var(--bad-50); color: #7f1d1d; border-color: #f8d0cf; }
.tabs { display: flex; gap: 2px; margin-bottom: 16px; flex-wrap: wrap; background: #eef1f5; padding: 4px; border-radius: 11px; width: fit-content; max-width: 100%; }
.tabs button { border: 0; background: none; padding: 7px 14px; cursor: pointer; border-radius: 8px; color: var(--muted); font-weight: 550; }
.tabs button:hover { color: var(--ink); } .tabs button.on { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.net { font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.net::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.net.on { background: var(--good-50); color: var(--good); } .net.off { background: var(--bad-50); color: var(--bad); }
.empty { padding: 34px; text-align: center; color: var(--muted); }
.empty-state { text-align: center; padding: 56px 20px; color: var(--muted); background: var(--panel); border: 1px dashed #d5dce4; border-radius: var(--r-lg); }
.empty-state .ic { color: #9aa8b6; } .empty-state h2 { color: var(--ink); margin: 12px 0 6px; } .empty-state p { margin: 4px 0; }
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pick-card { text-align: left; display: grid; gap: 4px; padding: 18px; border-radius: var(--r); border: 1px solid var(--line); background: #fff; cursor: pointer; box-shadow: var(--sh-1); transition: border-color .15s, box-shadow .15s, transform .15s; }
.pick-card .ic { color: var(--brand); margin-bottom: 6px; } .pick-card small { color: var(--muted); }
.pick-card:hover { border-color: var(--brand); box-shadow: var(--sh-2); transform: translateY(-1px); }
.stat-row { display: flex; gap: 6px; flex-wrap: wrap; }
.meter { height: 8px; background: #edf1f5; border-radius: 9px; overflow: hidden; } .meter > i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #14b8a6, var(--brand-600)); }
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 14px; z-index: 50; overflow: auto; animation: fade .15s ease; }
.modal-box { background: #fff; border-radius: var(--r-lg); padding: 22px; width: min(640px, 100%); box-shadow: var(--sh-3); border: 1px solid var(--line); }
.modal-box.wide { width: min(1040px, 100%); }
.modal-box > h2:first-child, .modal-box .mh h2 { font-size: 17px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; padding: 11px 18px; border-radius: 10px; z-index: 60; max-width: 90vw; box-shadow: var(--sh-3); font-weight: 500; animation: fade .2s ease; }
.toast.err { background: var(--bad); }
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items: start; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; max-height: calc(100vh - 250px); overflow: auto; padding: 2px; }
.tile { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; cursor: pointer; text-align: left; display: grid; gap: 4px; box-shadow: var(--sh-1); position: relative; transition: border-color .12s, box-shadow .12s, transform .08s; }
.tile::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); opacity: .7; }
.tile:hover { border-color: var(--brand); box-shadow: var(--sh-2); } .tile:active { transform: scale(.98); }
.tile > span:first-child { font-weight: 550; line-height: 1.3; } .tile .p { font-weight: 750; font-size: 15px; } .tile .s { font-size: 11.5px; color: var(--muted); }
.tile.svc::before { background: var(--accent); } .tile.pkg::before { background: #f59e0b; }
.cart { position: sticky; top: 78px; padding: 18px; } .cart .lines { max-height: 36vh; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.cline { border-bottom: 1px dashed var(--line); padding: 10px 0; display: grid; gap: 6px; }
.cline .a { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.qty { display: inline-flex; align-items: center; gap: 6px; }
.qty button { width: 28px; height: 28px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-weight: 700; }
.qty button:hover { border-color: var(--brand); color: var(--brand); }
.tot { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 12px 14px; margin: 10px 0; font-variant-numeric: tabular-nums; background: var(--panel-2); border-radius: 10px; border: 1px solid var(--line-2); }
.tot .g { font-size: 22px; font-weight: 800; letter-spacing: -.02em; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }
.pays { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pays .btn { padding: 8px 4px; }
.cal { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: var(--sh-1); }
.cal-grid { position: relative; display: grid; min-width: 900px; }
.cal-h { position: sticky; top: 0; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); padding: 8px 6px; z-index: 2; font-weight: 600; }
.cal-staff { padding: 12px 10px; border-bottom: 1px solid var(--line-2); font-weight: 600; background: #fff; position: sticky; left: 0; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cal-slot { border-bottom: 1px solid var(--line-2); border-left: 1px solid #f1f4f7; min-height: 60px; cursor: pointer; }
.cal-slot:hover { background: var(--brand-50); }
.appt { position: absolute; border-radius: 9px; padding: 4px 8px; font-size: 11.5px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; background: var(--brand-50); border: 1px solid #9ee3d9; border-left: 3px solid var(--brand); z-index: 3; box-shadow: var(--sh-1); }
.appt:hover { box-shadow: var(--sh-2); }
.appt.checked_in { background: var(--info-50); border-color: #bcd3fb; border-left-color: var(--info); } .appt.completed { background: var(--good-50); border-color: #b5e8c8; border-left-color: var(--good); }
.appt.cancelled, .appt.no_show { background: #f4f5f7; border-color: #dde1e6; border-left-color: #9aa5b1; color: var(--muted); text-decoration: line-through; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding: 8px 0 0; border-bottom: 1px solid var(--line); }
.bars .b { flex: 1; display: flex; flex-direction: column-reverse; min-width: 6px; position: relative; cursor: default; }
.bars .b span { display: block; } .bars .b .p { background: var(--brand); border-radius: 0 0 4px 4px; } .bars .b .s { background: var(--accent); border-radius: 4px 4px 0 0; opacity: .9; }
.bars .b:hover span { filter: brightness(1.1); }
.bars .b:hover::after { content: attr(data-t); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 4; }
.xlab { display: flex; gap: 6px; font-size: 10.5px; color: var(--muted); margin-top: 6px; } .xlab span { flex: 1; text-align: center; min-width: 6px; overflow: hidden; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: #fff; }
.login .hero { background: radial-gradient(1200px 600px at -10% -20%, #14b8a6 0%, transparent 55%), radial-gradient(900px 500px at 120% 120%, #6d5ae6 0%, transparent 55%), #0c1f2b; color: #d7e4ea; padding: 56px 64px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.login .hero h1 { font-size: 38px; color: #fff; max-width: 520px; letter-spacing: -.02em; }
.login .hero p { font-size: 16px; max-width: 520px; margin: 0; color: #b6c8d1; }
.logo.big { padding: 0; } .logo.big b { font-size: 18px; }
.feat { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 540px; }
.feat li { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }
.feat .ic { color: #5eead4; }
.login .panel { display: grid; place-items: center; padding: 32px 20px; }
.lcard { width: min(440px, 100%); } .lcard h2 { font-size: 24px; margin-bottom: 4px; } .lcard > p { margin: 0 0 20px; }
.divider { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; color: var(--muted); font-size: 12px; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-btn { display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.demo-btn:hover { border-color: var(--brand); background: var(--brand-50); }
.demo-btn b { display: block; font-size: 13px; } .demo-btn small { display: block; color: var(--muted); font-size: 11.5px; }
.receipt { width: 300px; margin: 0 auto; font: 12px/1.35 ui-monospace, Menlo, Consolas, monospace; color: #000; }
.receipt .c { text-align: center; } .receipt hr { border: 0; border-top: 1px dashed #000; margin: 6px 0; }
.receipt table td, .receipt table th { border: 0; padding: 1px 0; font-size: 11px; background: none; text-transform: none; letter-spacing: 0; position: static; }
.doc { background: #fff; color: #111827; padding: 36px 40px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
.doc .dh { display: flex; justify-content: space-between; gap: 20px; border-bottom: 3px solid var(--brand); padding-bottom: 16px; margin-bottom: 18px; }
.doc .dh h1 { font-size: 26px; color: var(--brand-700); letter-spacing: .04em; }
.doc .meta { display: grid; grid-template-columns: auto auto; gap: 2px 14px; font-size: 12.5px; text-align: right; }
.doc .meta span:nth-child(odd) { color: var(--muted); }
.doc .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
.doc .parties .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; margin-bottom: 4px; }
.doc table th { background: #f3f6f9; position: static; } .doc table td, .doc table th { padding: 8px 10px; }
.doc .totals { margin-left: auto; width: min(320px, 100%); margin-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-variant-numeric: tabular-nums; }
.doc .totals .g { font-size: 18px; font-weight: 800; border-top: 2px solid #111827; padding-top: 6px; margin-top: 4px; }
.doc .foot { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: 12px; color: #374151; }
.doc .sign { margin-top: 40px; text-align: right; font-size: 12px; } .doc .sign i { display: block; border-top: 1px solid #9ca3af; width: 200px; margin: 0 0 4px auto; }
@media print {
body * { visibility: hidden; } .receipt, .receipt *, .doc, .doc * { visibility: visible; }
.receipt, .doc { position: absolute; top: 0; left: 0; width: 100%; border: 0; } .modal { background: none; padding: 0; } .modal-box { box-shadow: none; border: 0; }
}
@media (max-width: 1180px) { .pos { grid-template-columns: 1fr; } .cart { position: static; } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .login { grid-template-columns: 1fr; } .login .hero { padding: 36px 24px; } .login .hero h1 { font-size: 28px; } .feat { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
.shell { grid-template-columns: 1fr; }
.side { position: fixed; left: 0; top: 0; width: 264px; z-index: 45; transform: translateX(-100%); transition: transform .2s ease; }
body.nav-open .side { transform: none; } body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 44; }
.menu-btn { display: inline-grid !important; } .crumb .sep, .crumb span:last-child { display: none; }
.top { padding: 10px 14px; gap: 10px; } .content { padding: 16px 14px; }
.g2, .g3 { grid-template-columns: 1fr; } .form { grid-template-columns: 1fr; } .pays { grid-template-columns: repeat(3, 1fr); }
.doc { padding: 20px; } .doc .parties, .doc .foot { grid-template-columns: 1fr; } .demo { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .g4 { grid-template-columns: 1fr 1fr; } .kpi .v { font-size: 20px; } .shopsel select { max-width: 150px; } }
.content > h1:first-child { margin-bottom: 18px; }
.content > .row:first-child { margin-bottom: 20px !important; align-items: center; }
.content > p.muted:nth-child(2) { margin-top: -10px; }
.content > h2 { margin-top: 26px; }
.tile .tt { display: flex; gap: 7px; align-items: flex-start; font-weight: 550; line-height: 1.3; } .tile .tt .ic { color: var(--accent); margin-top: 1px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.chip .ic { color: var(--accent); } .chip:hover { border-color: var(--accent); } .chip.on { background: var(--accent-50); border-color: var(--accent); color: var(--accent); }
div.f.full > span { font-size: 12.5px; color: var(--ink-2); font-weight: 550; }
.stypes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 4px; }
.stype input { position: absolute; opacity: 0; pointer-events: none; }
.stype span { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; cursor: pointer; font-size: 12.5px; transition: border-color .12s, background .12s; }
.stype span .ic { color: var(--accent); flex: none; } .stype b { font-weight: 550; }
.stype span:hover { border-color: #c9c2f5; } .stype input:checked + span { border-color: var(--accent); background: var(--accent-50); box-shadow: 0 0 0 3px rgba(109,90,230,.12); }
.stype input:focus-visible + span { outline: 2px solid var(--accent); }
:root {
--navy-950: #032b25; --navy-900: #053b33; --navy-800: #064e3b; --navy-700: #0b5d4b;
--bg: #f1f8f5; --panel: #ffffff; --panel-2: #f7f9fc; --ink: #053b33; --ink-2: #33415c; --muted: #66748b;
--line: #e1e6ee; --line-2: #edf1f6;
--brand: #0f766e; --brand-600: #115e59; --brand-700: #134e4a; --brand-50: #ecfdf7; --brand-100: #ccf3e6;
--gold: #d97706; --gold-600: #b45309; --gold-50: #fffbeb; --gold-100: #fef3c7;
--accent: #d97706; --accent-50: #fffbeb;
--good: #047857; --good-50: #e8f6f0; --warn: #b45309; --warn-50: #fdf3e3; --bad: #b91c1c; --bad-50: #fdeeee; --info: #0e7490; --info-50: #e7f5f8;
--sh-1: 0 1px 2px rgba(5,59,51,.06); --sh-2: 0 1px 2px rgba(5,59,51,.05), 0 6px 18px rgba(5,59,51,.07);
}
body { background: var(--bg); }
::selection { background: var(--gold-100); }
.side { background: var(--navy-900); border-right: 1px solid var(--navy-950); color: #b5dccf; }
.logo { border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 6px; }
.logo small { color: #7fc4ae; }
.side .grp { color: #6fc7ad; letter-spacing: .1em; }
.side a { color: #cdeee4; border-radius: 8px; }
.side a .ic { opacity: .7; }
.side a:hover { background: rgba(255,255,255,.05); color: #fff; }
.side a.on { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 3px 0 0 var(--gold); }
.side a.on .ic { color: #fbbf24; opacity: 1; }
.me { background: var(--navy-950); border-top: 1px solid rgba(255,255,255,.06); }
.me small { color: #7fc4ae; }
.av { background: var(--navy-700); color: #fef3c7; box-shadow: inset 0 0 0 1.5px #f59e0b; }
.top { background: #fff; border-bottom: 1px solid var(--line); backdrop-filter: none; }
.crumb .biz { color: var(--navy-900); font-weight: 700; }
.shopsel { color: var(--brand-600); background: #fff; border-color: var(--line); border-radius: 8px; }
h1, .ph h1 { color: var(--navy-900); }
.ph { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.btn { border-radius: 8px; }
.btn.pri { background: var(--brand-600); border-color: var(--brand-600); color: #fff; box-shadow: 0 1px 2px rgba(17,94,89,.3); }
.btn.pri:hover { background: var(--brand-700); border-color: var(--brand-700); }
.btn.pri:disabled { background: #9fb2d9; border-color: #9fb2d9; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,118,110,.14); }
.tabs { background: #e8edf4; border-radius: 9px; }
.tabs button { border-radius: 7px; }
.tabs button.on { background: var(--navy-900); color: #fff; box-shadow: 0 1px 3px rgba(5,59,51,.25); }
.tabs button.on .muted { color: #c9d4e3; }
.card { border-color: var(--line); box-shadow: var(--sh-1); border-radius: 10px; }
.kpi { --tone: var(--brand-600); --tone-bg: var(--brand-50); border-left: 4px solid var(--tone); padding-left: 16px; }
.kpi .ki { width: 32px; height: 32px; border-radius: 8px; background: var(--tone-bg); color: var(--tone); }
.kpi .v { color: var(--navy-900); font-weight: 750; }
.kpi .l { color: var(--muted); text-transform: uppercase; font-size: 11.5px; letter-spacing: .05em; font-weight: 650; }
.kpi.t-info { --tone: #0e7490; --tone-bg: #e7f5f8; }
.kpi.t-accent { --tone: var(--gold); --tone-bg: var(--gold-50); }
.kpi.t-good { --tone: #047857; --tone-bg: #e8f6f0; }
.kpi.t-pink { --tone: #9f1239; --tone-bg: #fcecf1; }
.kpi.t-warn { --tone: #b45309; --tone-bg: #fdf3e3; }
.kpi.t-bad { --tone: #b91c1c; --tone-bg: #fdeeee; }
.banner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px !important;
padding: 22px 26px; border-radius: 12px; color: #fff; background: var(--navy-900); border-bottom: 3px solid var(--gold); box-shadow: var(--sh-2); }
.banner h1 { color: #fff; font-size: 23px; } .banner .sub { color: #b5dccf !important; }
.banner select { background: var(--navy-800); color: #fff; border-color: #0b5d4b; }
.banner select option { color: var(--ink); }
th { background: var(--panel-2); color: #52607a; border-bottom: 1px solid var(--line); }
tbody tr:hover td { background: #f3fbf8; }
.tbl { border-color: var(--line); border-radius: 10px; }
td b { color: var(--navy-900); }
.pill { background: #eef2f7; color: #3a4a64; }
.pill.brand { background: var(--brand-50); color: var(--brand-700); }
.pill.svc { background: var(--gold-50); color: var(--gold-600); }
.pill.info { background: var(--info-50); color: var(--info); }
.alert { background: #eefaf5; border: 1px solid #cdeadf; border-left: 4px solid var(--brand); color: var(--navy-800); }
.alert .ic { color: var(--brand); }
.alert.warn { background: #fffaf0; border-color: #f1e2c2; border-left-color: var(--gold); color: #5c4310; } .alert.warn .ic { color: var(--gold); }
.alert.bad { background: #fdf4f4; border-color: #f1d3d3; border-left-color: var(--bad); color: #7f1d1d; }
.bars .b .p { background: var(--brand-600); border-radius: 0 0 3px 3px; }
.bars .b .s { background: #f59e0b; border-radius: 3px 3px 0 0; opacity: 1; }
.tile { border-color: var(--line); border-radius: 10px; }
.tile::before { background: var(--brand-600); width: 3px; top: 10px; bottom: 10px; left: 0; right: auto; height: auto; border-radius: 0 3px 3px 0; opacity: 1; }
.tile.svc::before { background: var(--gold); } .tile.pkg::before { background: #047857; }
.tile:hover { border-color: #a7dcc9; box-shadow: var(--sh-2); }
.tile .p { color: var(--navy-900); }
.tile .tt .ic, .chip .ic { color: var(--gold); }
.cart { border-top: 3px solid var(--navy-900); }
.tot { background: var(--panel-2); border-color: var(--line); }
.tot .g { color: var(--navy-900); }
.chip.on { background: var(--navy-900); color: #fff; border-color: var(--navy-900); } .chip.on .ic { color: #fbbf24; }
.chip:hover { border-color: var(--navy-700); }
.appt { background: var(--brand-50); border-color: #b3e5d4; border-left: 3px solid var(--brand-600); }
.appt.checked_in { background: var(--gold-50); border-color: #ecd9a8; border-left-color: var(--gold); }
.appt.completed { background: var(--good-50); border-color: #bfe3d3; border-left-color: var(--good); }
.cal-slot:hover { background: #eefaf5; }
.login .hero { background: var(--navy-900); border-right: 3px solid var(--gold); }
.login .hero h1 { color: #fff; } .login .hero p { color: #b5dccf; }
.feat li { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); } .feat .ic { color: #fbbf24; }
.login .panel { background: #fff; }
.lcard h2 { color: var(--navy-900); }
.demo-btn:hover { border-color: var(--brand); background: #f3fbf8; }
.av.sm { background: var(--navy-800); color: #fef3c7; box-shadow: inset 0 0 0 1.5px #f59e0b; }
.doc .dh { border-bottom: 3px solid var(--navy-900); }
.doc .dh h1 { color: var(--navy-900); letter-spacing: .08em; }
.doc table th { background: #f1f4f9; color: var(--navy-800); }
.doc .totals .g { border-top-color: var(--navy-900); color: var(--navy-900); }
.stype input:checked + span { border-color: var(--navy-900); background: #eefaf5; box-shadow: 0 0 0 3px rgba(5,59,51,.08); }
.stype span .ic { color: var(--gold); }
.pick-card .ic { color: var(--gold); } .pick-card:hover { border-color: var(--brand); }
.meter > i { background: var(--brand-600); }
.toast { background: var(--navy-900); border-left: 4px solid var(--gold); }
.skeleton { background: linear-gradient(90deg, #e9eef5 25%, #f4f7fb 50%, #e9eef5 75%); background-size: 200% 100%; }
.logo.big { border-bottom: 0; margin-bottom: 0; }
.login .hero { background:
radial-gradient(700px 380px at 15% 10%, rgba(15,118,110,.28), transparent 65%),
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 32px 32px,
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 32px 32px,
var(--navy-900); }
.login .hero h1 { position: relative; } .login .hero h1::after { content: ""; display: block; width: 64px; height: 3px; background: var(--gold); margin-top: 16px; border-radius: 2px; }
.banner { background: radial-gradient(600px 200px at 100% 0%, rgba(15,118,110,.35), transparent 70%), var(--navy-900); }
.brandmark { width: 40px; height: 40px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.logo.big .brandmark { width: 64px; height: 64px; }
.doc .brandmark { width: 46px; height: 46px; filter: none; }
.logo b { font-size: 16px; letter-spacing: -.01em; }
.biz-mono { width: 44px; height: 44px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--navy-900); color: #fef3c7; font-weight: 750; font-size: 15px; letter-spacing: .02em; box-shadow: inset 0 0 0 1.5px #f59e0b; }
.doc .powered { margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: #8a94a6; }
.qpage { display: grid; gap: 16px; padding-bottom: 80px; }
.form.q3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg { display: inline-flex; background: #e8edf4; border-radius: 8px; padding: 3px; margin-top: 5px; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; color: var(--muted); font-size: 13px; }
.seg button.on { background: var(--navy-900); color: #fff; }
.sugg { position: relative; z-index: 5; display: grid; gap: 2px; margin-top: 4px; }
.sugg:empty { display: none; }
.sugg-i { display: flex; align-items: center; gap: 8px; text-align: left; width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.sugg-i:hover { border-color: var(--brand); background: #f3fbf8; } .sugg-i .sp { flex: 1; }
.qtbl input { padding: 5px 7px; }
.qtbl td { vertical-align: top; }
.qdesc { display: block; width: 100%; margin-top: 5px; font-size: 12.5px; border-style: dashed !important; }
.qsum { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin-top: 14px; align-items: start; }
.qsum .words, .doc .words { font-size: 12px; color: var(--ink-2); font-style: italic; }
table.hsn { font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
table.hsn th, table.hsn td { padding: 6px 10px; }
.qbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; box-shadow: 0 -4px 18px rgba(5,59,51,.08); z-index: 6; }
.qbar .sp { flex: 1; }
.chip input { margin: 0 4px 0 0; }
.pharma-box { background: #fdf4f4; border: 1px solid #f1d3d3; border-radius: 10px; padding: 10px 12px; }
.doc.in { font-size: 12.5px; padding: 28px 30px; }
.doc.in .dname { font-size: 20px; font-weight: 800; color: var(--navy-900); letter-spacing: -.01em; }
.doc.in .dh { align-items: flex-start; }
.doc.in .parties { margin-bottom: 12px; } .doc.in .parties .box { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.doc.in .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin: 6px 0 2px; }
.doc.in table.items { border: 1px solid #cfd6e1; }
.doc.in table.items th, .doc.in table.items td { border: 1px solid #dfe4ec; padding: 6px 7px; font-size: 12px; }
.doc.in table.items th { background: var(--navy-900); color: #fff; font-size: 10.5px; }
.doc.in .tr-tot td { background: #f3f6fa; }
.doc.in .qfoot { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; margin-top: 12px; align-items: start; }
.doc.in .qfoot .totals { margin: 0; width: auto; }
.doc.in .words { margin-top: 10px; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; font-style: normal; }
.doc.in ol.terms { margin: 4px 0 0; padding-left: 18px; } .doc.in ol.terms li { margin: 2px 0; }
.doc.in .sign { display: flex; justify-content: space-between; align-items: flex-end; text-align: right; margin-top: 26px; }
.doc.in .sign i { display: block; border-top: 1px solid #9ca3af; width: 210px; margin: 38px 0 4px auto; }
.doc.in .biz-mono { width: 52px; height: 52px; font-size: 17px; }
.bad { color: var(--bad); }
@media (max-width: 1000px) { .form.q3, .qsum, .doc.in .qfoot { grid-template-columns: 1fr; } }
@media print { .doc.in table.items th { background: #053b33 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.tlogo { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); padding: 2px; flex: none; }
.tlogo.lg { width: 52px; height: 52px; }
.crumb .tlogo { width: 28px; height: 28px; }
.biz-mono.sm { width: 34px; height: 34px; font-size: 12px; border-radius: 8px; }
.doc-logo { width: 64px; height: 64px; object-fit: contain; flex: none; }
.logo-pick { display: flex; gap: 14px; align-items: center; margin-top: 6px; }
.lp-prev { width: 76px; height: 76px; border-radius: 12px; border: 1.5px dashed #c5cfdc; background: var(--panel-2); display: grid; place-items: center; overflow: hidden; color: #9aa8b6; }
.lp-prev img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pwrow { display: flex; gap: 6px; } .pwrow input { flex: 1; }
.ob { display: grid; gap: 16px; max-width: 860px; }
.cred { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.cred code { font-size: 15px; font-weight: 700; color: var(--navy-900); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.ok-card { border-left: 4px solid var(--good); }
.pwrow { align-items: center; } .pwrow .btn { flex: none; }
.modal .pwrow input { min-width: 0; }
.upi { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-top: 10px; background: #fff; }
.upi .qr { image-rendering: pixelated; flex: none; border-radius: 6px; } .upi-amt { font-size: 16px; color: var(--navy-900); }
.receipt .upi { border-style: dashed; padding: 6px; gap: 8px; } .receipt .upi .qr { width: 108px; height: 108px; }
.qin { width: 64px; text-align: center; padding: 4px 6px; font-weight: 700; }
.receipt th { font-size: 10px; text-transform: none; letter-spacing: 0; background: none; padding: 1px 0; position: static; color: #000; border: 0; }
.dash-hero { position: relative; overflow: hidden; border-radius: 16px; padding: 22px 24px 18px; margin-bottom: 18px; color: #fff;
background: radial-gradient(700px 260px at 100% 0%, rgba(37,99,235,.38), transparent 70%), radial-gradient(500px 220px at 0% 120%, rgba(183,121,31,.22), transparent 70%), var(--navy-900);
box-shadow: 0 10px 30px rgba(5,59,51,.22); border-bottom: 3px solid var(--gold); }
.dash-hero h1 { color: #fff !important; background: none !important; -webkit-text-fill-color: #fff; font-size: 26px; margin: 2px 0 2px; }
.dh-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.dh-date { color: #fbbf24; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.dh-sub { color: #b5dccf; font-size: 13.5px; }
.seg.dark { background: rgba(255,255,255,.08); } .seg.dark button { color: #cdeee4; } .seg.dark button.on { background: #fff; color: var(--navy-900); }
.dh-today { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.dt { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; }
.dt span { color: #b5dccf; font-size: 12px; } .dt b { font-size: 22px; letter-spacing: -.02em; } .dt small { color: #93a4bb; font-size: 12px; } .dt em { color: #fbbf77; font-style: normal; }
.dt .dl { justify-self: start; }
.dh-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.qa { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #fff; font-weight: 600; font-size: 13.5px; transition: background .15s, transform .15s; }
.qa:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); } .qa .ic { color: #fbbf24; }
.qa::before { content: "+"; font-weight: 800; color: #fbbf24; margin-right: -2px; }
.dl { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.dl.up { background: #e6f6ef; color: #047857; } .dl.down { background: #fdeeee; color: #b91c1c; } .dl.flat { background: #eef2f7; color: #52607a; }
.dash-hero .dl.up { background: rgba(16,185,129,.18); color: #6ee7b7; } .dash-hero .dl.down { background: rgba(248,113,113,.18); color: #fca5a5; } .dash-hero .dl.flat { background: rgba(255,255,255,.1); color: #cbd5e1; }
.attn { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 16px; display: grid; gap: 6px; box-shadow: var(--sh-1); }
.attn-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 2px 4px; }
.attn-i { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: #eefaf5; color: var(--navy-800); border-left: 3px solid var(--brand); }
.attn-i.warn { background: #fffaf0; border-left-color: var(--gold); color: #5c4310; } .attn-i .ic { flex: none; }
.attn-i span { flex: 1; } .attn-i em { font-style: normal; font-weight: 650; color: var(--brand-600); font-size: 12.5px; white-space: nowrap; }
a.attn-i:hover { filter: brightness(.98); box-shadow: inset 0 0 0 1px var(--line); }
.kgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.kpi.k2 { display: grid; gap: 6px; } .kpi.k2 .kv { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .kpi.k2 .v { margin: 0; }
.kpi.k2 .kf { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; } .spark { flex: none; }
.mini-k { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mk { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; color: var(--ink); box-shadow: var(--sh-1); transition: border-color .15s, transform .15s; }
.mk:hover { border-color: #a7dcc9; transform: translateY(-1px); } .mk > .ic { color: var(--brand-600); background: var(--brand-50); border-radius: 8px; padding: 6px; width: 30px; height: 30px; flex: none; }
.mk.warn > .ic { color: #b91c1c; background: #fdeeee; } .mk div { flex: 1; min-width: 0; } .mk b { display: block; font-size: 16px; color: var(--navy-900); } .mk span { font-size: 12px; color: var(--muted); }
.dgrid { display: grid; gap: 14px; margin-bottom: 14px; } .g-main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ch { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .ch h2 { margin: 0 0 2px; }
.seg { display: inline-flex; background: #eef2f7; border-radius: 8px; padding: 3px; } .seg button { border: 0; background: none; padding: 5px 11px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--muted); } .seg button.on { background: #fff; color: var(--navy-900); box-shadow: var(--sh-1); }
.chart { position: relative; width: 100%; }
.chart svg { display: block; overflow: visible; } .chart .grid { stroke: #e8edf4; stroke-width: 1; } .chart .base { stroke: #c9d3e0; } .chart .ax { fill: #7b889c; font-size: 11px; font-family: var(--font); }
.chart .col.hov path, .chart .col.hov rect:not(.hit) { filter: brightness(1.12); } .chart .col.hov .hit { fill: rgba(17,94,89,.05); }
.chart .tip { position: absolute; z-index: 5; min-width: 170px; background: #053b33; color: #fff; border-radius: 10px; padding: 9px 11px; font-size: 12.5px; box-shadow: 0 8px 24px rgba(5,59,51,.3); pointer-events: none; }
.chart .tip b { display: block; margin-bottom: 4px; } .chart .tip div { display: flex; align-items: center; gap: 6px; } .chart .tip div span { margin-left: auto; font-weight: 700; padding-left: 12px; } .chart .tip i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.chart .tip .tt { border-top: 1px solid rgba(255,255,255,.15); margin-top: 4px; padding-top: 4px; } .chart .tip .muted { color: #b5dccf; }
.peak { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; background: var(--gold-50); color: #6b4e12; border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }
.donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; } .dn-v { font-size: 17px; font-weight: 800; fill: var(--navy-900); font-family: var(--font); } .dn-l { font-size: 11px; fill: #7b889c; font-family: var(--font); }
.dn-leg { display: grid; gap: 8px; flex: 1; min-width: 170px; } .dn-leg div { display: grid; grid-template-columns: 10px 1fr auto 38px; gap: 8px; align-items: center; font-size: 13px; } .dn-leg i { width: 10px; height: 10px; border-radius: 3px; } .dn-leg em { font-style: normal; color: var(--muted); text-align: right; font-size: 12px; } .dn-leg .muted b { color: var(--muted); font-weight: 500; }
.barlist, .shoplist { display: grid; gap: 12px; } .bl { display: flex; gap: 10px; align-items: flex-start; } .rk { width: 24px; height: 24px; border-radius: 7px; background: #eef2f7; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); flex: none; }
.bl:first-child .rk { background: var(--gold-50); color: #8a6414; } .bl-m { flex: 1; min-width: 0; } .bl-t { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; } .bl-t b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-b { height: 7px; background: #eef2f7; border-radius: 99px; margin: 5px 0 2px; overflow: hidden; } .bl-b i { display: block; height: 100%; border-radius: 99px; background: var(--brand-600); }
.tl { display: grid; gap: 4px; } .tl-i { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; padding: 8px 6px; border-bottom: 1px dashed var(--line); } .tl-i:last-child { border: 0; } .tl-i > b { color: var(--navy-900); font-variant-numeric: tabular-nums; }
.rb { display: grid; gap: 2px; } .rb-i { display: flex; justify-content: space-between; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 8px 6px; border-radius: 8px; cursor: pointer; border-bottom: 1px dashed var(--line); }
.rb-i:hover { background: #f3fbf8; } .rb-i small { display: block; } .rb-r { text-align: right; } .rb-r small { display: flex; gap: 4px; justify-content: flex-end; margin-top: 2px; }
.pm { font-size: 10.5px; font-weight: 650; padding: 1px 6px; border-radius: 4px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, white); }
.mlist { display: grid; } .ml { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed var(--line); } .ml:last-child { border: 0; } .ml small { display: block; }
.okstate { display: flex; align-items: center; gap: 10px; padding: 18px; border-radius: 10px; background: #f1f9f5; color: #047857; font-weight: 600; } .okstate .ic { flex: none; }
@media (max-width: 1100px) { .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mini-k { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-main, .g-2 { grid-template-columns: 1fr; } .dh-today { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kgrid, .dh-today { grid-template-columns: 1fr 1fr; } .mini-k { grid-template-columns: 1fr 1fr; } .dash-hero { padding: 18px 16px; } .dash-hero h1 { font-size: 21px; } .dt b { font-size: 18px; } .kpi.k2 .spark { display: none; } }
.cav { display: inline-grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, white); color: var(--c); font-weight: 750; flex: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 30%, white); }
.tg { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 650; padding: 1px 7px; border-radius: 6px; background: #eef2f7; color: #3a4a64; white-space: nowrap; }
.tg.good { background: #e6f6ef; color: #047857; } .tg.bad { background: #fdeeee; color: #b91c1c; } .tg.warn { background: #fdf3e3; color: #a35a06; } .tg.info { background: #eaf1fe; color: #115e59; } .tg.svc { background: var(--gold-50); color: #8a6414; }
.good { color: #047857; } .bad { color: #b91c1c; }
kbd { font: 600 10.5px/1 ui-monospace, Menlo, monospace; padding: 3px 5px; border-radius: 5px; background: #eef2f7; color: #52607a; border: 1px solid #dde3ec; border-bottom-width: 2px; }
.iconbtn.sm { width: 28px; height: 28px; border-radius: 7px; color: var(--muted); } .iconbtn.sm:hover { background: #f1f4f8; color: var(--ink); }
.filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; } .filterbar .sp { flex: 1; } .filterbar .search input { width: 240px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: #a7dcc9; } .chip.on { background: var(--navy-900); color: #fff; border-color: var(--navy-900); } .chip.on .muted { color: #b5dccf; } .chip:disabled { opacity: .5; cursor: not-allowed; }
.pos2 { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items: start; }
.pos-top { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.search.big { flex: 1; } .search.big input { padding: 12px 52px 12px 40px; font-size: 15px; border-radius: 12px; box-shadow: var(--sh-1); } .search.big .ic { left: 13px; } .search.big kbd { position: absolute; right: 12px; }
.badge-n { background: var(--navy-900); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; margin-left: 2px; }
.pos-tabs { display: flex; gap: 6px; margin-bottom: 10px; } .pos-tabs button { border: 0; background: #e8edf4; padding: 8px 14px; border-radius: 10px; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.pos-tabs button span { font-size: 11px; background: rgba(255,255,255,.7); border-radius: 99px; padding: 0 6px; margin-left: 4px; color: var(--muted); } .pos-tabs button.on { background: var(--navy-900); color: #fff; } .pos-tabs button.on span { background: rgba(255,255,255,.15); color: #fbbf24; }
.pos-l .chips { margin-bottom: 10px; }
.tiles2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: calc(100vh - 300px); overflow: auto; padding: 2px 2px 8px; }
.t2 { position: relative; display: grid; gap: 8px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; box-shadow: var(--sh-1); transition: transform .08s, box-shadow .15s, border-color .15s; min-height: 128px; align-content: start; }
.t2:hover { border-color: #a7dcc9; box-shadow: var(--sh-2); transform: translateY(-1px); } .t2:active { transform: scale(.97); }
.t2-av { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, white); }
.t2-n { font-weight: 600; font-size: 13.5px; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 35px; }
.t2-f { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: auto; } .t2-f b { font-size: 15px; color: var(--navy-900); }
.stk { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; white-space: nowrap; } .stk.ok { background: #eef2f7; color: #52607a; } .stk.low { background: #fdf3e3; color: #a35a06; } .stk.out { background: #fdeeee; color: #b91c1c; }
.t2.dim { opacity: .62; } .incart { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; border-radius: 99px; background: var(--brand-600); color: #fff; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; padding: 0 6px; box-shadow: 0 2px 6px rgba(15,118,110,.35); }
.kb-hint { margin-top: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cart2 { position: sticky; top: 76px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 96px); border-top: 3px solid var(--navy-900); }
.cart2 > * { padding-left: 16px; padding-right: 16px; }
.cart-h { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 14px; } .cart-h h2 { margin: 0; }
.cust { display: flex; gap: 6px; align-items: center; margin: 12px 0 4px; } .cust .search { flex: 1; }
.cust-card { flex: 1; display: flex; gap: 10px; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.cc-m { flex: 1; min-width: 0; display: grid; } .cc-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.lines2 { flex: 1; overflow: auto; min-height: 110px; margin-top: 6px; border-top: 1px solid var(--line-2); }
.ln { padding: 10px 0; border-bottom: 1px dashed var(--line); display: grid; gap: 6px; }
.ln-a { display: flex; justify-content: space-between; gap: 8px; } .ln-n { display: flex; gap: 6px; align-items: center; min-width: 0; } .ln-n b { font-weight: 600; font-size: 13.5px; } .ln-amt { white-space: nowrap; color: var(--navy-900); }
.ln-b { display: flex; align-items: center; gap: 8px; } .ln-b .rm { margin-left: auto; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; } .stepper button { width: 30px; height: 30px; border: 0; background: #f4f6fa; font-weight: 800; cursor: pointer; font-size: 15px; } .stepper button:hover { background: var(--brand-50); color: var(--brand-600); }
.stepper .qin { width: 52px; border: 0; border-radius: 0; text-align: center; padding: 4px; font-weight: 700; }
.ln-c { display: flex; gap: 6px; } .ln-c select { flex: 1; padding: 6px 8px; font-size: 13px; }
.cart-empty { display: grid; place-items: center; gap: 4px; padding: 26px 0; color: var(--muted); text-align: center; } .cart-empty .ic { color: #b5dccf; } .cart-empty b { color: var(--ink-2); }
.disc-row { display: flex; align-items: center; gap: 6px; padding-top: 10px; flex-wrap: wrap; } .disc-row .chip { padding: 4px 10px; } .disc-row input { width: 60px; padding: 5px 6px; text-align: right; }
.tot2 { margin: 10px 16px; padding: 10px 12px !important; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 3px; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.tot2 > div { display: flex; justify-content: space-between; color: var(--ink-2); } .tot2 .g { font-size: 24px; font-weight: 800; color: var(--navy-900); border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 4px; }
.pay-h { margin-bottom: 6px; } .pays2 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pb { display: grid; place-items: center; gap: 2px; padding: 8px 2px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 650; color: var(--ink-2); }
.pb span { font-size: 18px; } .pb:hover:not(:disabled) { border-color: var(--brand); } .pb.on { border-color: var(--navy-900); background: #eefaf5; box-shadow: inset 0 0 0 1px var(--navy-900); } .pb:disabled { opacity: .4; cursor: not-allowed; }
.prow { display: grid; grid-template-columns: 1fr 120px 28px; gap: 6px; align-items: center; margin-top: 8px; font-size: 13.5px; } .prow input { text-align: right; padding: 6px 8px; }
.tender { margin-top: 10px; background: #f6fbf8; border: 1px solid #cdeadb; border-radius: 10px; padding: 10px 12px !important; margin-left: 16px; margin-right: 16px; display: grid; gap: 6px; }
.tender label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; } .tender input { width: 120px; text-align: right; font-weight: 700; } .tender .chip { padding: 3px 10px; }
.change { font-size: 15px; color: #047857; } .change b { font-size: 20px; }
.remain { margin-top: 8px; font-size: 13px; color: #a35a06; } .remain.bad { color: #b91c1c; }
.charge { margin: 12px 16px 16px; width: calc(100% - 32px); display: flex; justify-content: center; gap: 10px; font-size: 17px; padding: 14px; }
.charge kbd { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.25); }
.wk { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.wd { display: grid; justify-items: center; gap: 1px; min-width: 76px; padding: 8px 6px; border: 1px solid var(--line); background: #fff; border-radius: 12px; cursor: pointer; box-shadow: var(--sh-1); }
.wd span { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 650; } .wd b { font-size: 20px; color: var(--navy-900); line-height: 1.1; } .wd em { font-style: normal; font-size: 11px; color: var(--muted); }
.wd.td { border-color: var(--gold); } .wd.on { background: var(--navy-900); border-color: var(--navy-900); } .wd.on span, .wd.on em { color: #b5dccf; } .wd.on b { color: #fff; }
.wk input[type=date] { margin-left: 6px; }
.ap-stats { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.as { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand-600); border-radius: 10px; padding: 8px 14px; display: grid; min-width: 110px; box-shadow: var(--sh-1); }
.as b { font-size: 19px; color: var(--navy-900); } .as span { font-size: 11.5px; color: var(--muted); } .as.c-in { border-left-color: var(--gold); } .as.c-done { border-left-color: #047857; } .as.c-ns { border-left-color: #b91c1c; } .as.c-rev { border-left-color: #0e7490; }
.ap-leg { margin-left: auto; } .ap-leg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -2px; }
.lg-confirmed { background: #ccf3e6; border-left: 3px solid #115e59; } .lg-checked_in { background: #fbf0d7; border-left: 3px solid #b7791f; } .lg-completed { background: #dcf3e8; border-left: 3px solid #047857; } .lg-no_show { background: #eef0f3; border-left: 3px solid #94a3b8; }
.cal2 { overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--sh-1); }
.cal2 .cal-grid { position: relative; display: grid; min-width: 1000px; }
.cal2 .cal-h { position: sticky; top: 0; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--ink-2); padding: 10px 6px; z-index: 2; } .cal2 .cal-h.half { border-left: 0; } .cal2 .cal-h.corner { left: 0; z-index: 3; }
.cal2 .cal-staff { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line-2); background: #fff; position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--line); }
.cal2 .cal-staff b { font-size: 13px; } .cal2 .cal-staff small { font-size: 11px; }
.busy { height: 5px; background: #eef2f7; border-radius: 99px; margin: 4px 0 2px; width: 110px; overflow: hidden; } .busy i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.cal2 .cal-slot { border-bottom: 1px solid var(--line-2); border-left: 1px solid #edf1f6; min-height: 70px; cursor: pointer; display: grid; place-items: center; } .cal2 .cal-slot.half { border-left: 1px dashed #f0f3f7; }
.cal2 .cal-slot span { opacity: 0; color: var(--brand-600); font-weight: 800; font-size: 18px; } .cal2 .cal-slot:hover { background: #eefaf5; } .cal2 .cal-slot:hover span { opacity: 1; }
.appt2 { position: absolute; z-index: 3; border-radius: 9px; padding: 6px 8px; font-size: 11.5px; line-height: 1.35; overflow: hidden; cursor: pointer; background: #ccf3e6; border-left: 3px solid #115e59; color: #064e3b; box-shadow: 0 1px 3px rgba(5,59,51,.12); transition: transform .1s, box-shadow .15s; }
.appt2:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(5,59,51,.18); z-index: 4; } .appt2 .a-t, .appt2 .a-c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appt2 .a-c { color: #3a4a64; }
.appt2.st-checked_in, .appt2.st-in_service { background: #fbf0d7; border-left-color: #b7791f; } .appt2.st-completed { background: #dcf3e8; border-left-color: #047857; }
.appt2.st-cancelled, .appt2.st-no_show { background: #eef0f3; border-left-color: #94a3b8; color: #7b889c; text-decoration: line-through; }
.nowline { position: absolute; top: 34px; bottom: 0; width: 2px; background: #dc2626; z-index: 5; pointer-events: none; } .nowline span { position: absolute; top: -4px; left: 50%; transform: translate(-50%, -100%); background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.agenda { display: grid; gap: 10px; }
.ag-i { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-left: 4px solid #115e59; border-radius: 12px; padding: 12px 16px; cursor: pointer; box-shadow: var(--sh-1); }
.ag-i:hover { box-shadow: var(--sh-2); } .ag-i.st-checked_in, .ag-i.st-in_service { border-left-color: #b7791f; } .ag-i.st-completed { border-left-color: #047857; } .ag-i.st-cancelled, .ag-i.st-no_show { border-left-color: #94a3b8; opacity: .7; }
.ag-t { display: grid; } .ag-t b { font-size: 18px; color: var(--navy-900); } .ag-t span { font-size: 12px; color: var(--muted); } .ag-r { display: grid; justify-items: end; gap: 4px; }
.stp { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #ccf3e6; color: #115e59; } .stp.st-checked_in, .stp.st-in_service { background: #fbf0d7; color: #8a6414; } .stp.st-completed { background: #dcf3e8; color: #047857; } .stp.st-cancelled, .stp.st-no_show { background: #eef0f3; color: #64748b; }
.mixbar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; margin: 8px 0 6px; } .mixbar i { display: block; }
.mixleg { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2); } .mixleg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; }
.c360-h { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; } .c360-n { flex: 1; min-width: 220px; } .c360-n h2 { margin: 0 0 2px; font-size: 19px; display: flex; gap: 8px; align-items: center; }
.c360-a { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.c360-s { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 16px 0 12px; } .c360-s > div { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; display: grid; }
.c360-s b { font-size: 16px; color: var(--navy-900); } .c360-s span { font-size: 11.5px; color: var(--muted); } .c360-s .bad b { color: #b91c1c; } .c360-s .good b { color: #047857; }
.paybox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #fff7f7; border: 1px solid #f3d0d0; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; } .paybox input { width: 120px; }
.pkgcard { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; display: grid; gap: 8px; } .pk-b { display: grid; grid-template-columns: 1fr 160px auto; gap: 10px; align-items: center; font-size: 13px; } .pk-b .bl-b { margin: 0; }
@media (max-width: 1180px) { .pos2 { grid-template-columns: 1fr; } .cart2 { position: static; max-height: none; } .tiles2 { max-height: none; } .c360-s { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .pays2 { grid-template-columns: repeat(3, 1fr); } .ag-i { grid-template-columns: 64px 1fr; } .ag-r { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; } .wd { min-width: 58px; } .ap-leg { margin-left: 0; } .filterbar .search input { width: 100%; } .kb-hint { display: none; } }
.reg-closed{display:flex;gap:20px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-2);max-width:760px}
.rc-ic{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--brand-50);color:var(--brand-700);flex:none}
.reg-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
@media(max-width:960px){.reg-grid{grid-template-columns:1fr}}
.drawer{background:linear-gradient(135deg,var(--side),#1b3a6b);color:#fff;border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-2)}
.dr-v{font-size:32px;font-weight:750;letter-spacing:-.02em;margin:4px 0 14px}
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.flow>div{background:rgba(255,255,255,.08);border-radius:10px;padding:10px 12px;font-size:12px}
.flow b{display:block;font-size:15px}.flow .gd b{color:#86efac}.flow .bd b{color:#fca5a5}
.entries{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto}
.en{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel-2)}
.closebox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1)}
.denoms{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:10px 0}
.dn{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:6px 8px;background:var(--panel-2)}
.dn span{min-width:44px;font-weight:650}.dn input{width:100%;border:0;background:transparent;text-align:right;outline:0}
.variance{margin-top:10px;padding:12px 14px;border-radius:10px;font-weight:650;background:var(--good-50);color:var(--good)}
.variance.bad{background:var(--bad-50);color:var(--bad)}.variance.warn{background:var(--warn-50);color:var(--warn)}
.staff-grid,.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.sc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-1);transition:.15s}
.sc:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.sc-n{display:flex;gap:10px;align-items:center;font-weight:650}
.sc-shops{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0}.sc-shops span,.sc-sk span{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--brand-50);color:var(--brand-700)}
.sc-st{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-top:1px solid var(--line-2);padding-top:10px;margin-top:6px;font-size:11px;color:var(--muted)}
.sc-st b{display:block;font-size:14px;color:var(--ink)}.sc-sk{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.res-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.res{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:var(--panel-2);font-size:12px}
.res-add{display:flex;gap:6px;margin-top:10px}.res-add input,.res-add select{flex:1;min-width:0}
.rep-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:16px}
.rt{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;text-align:left;transition:.15s}
.rt:hover{border-color:var(--brand)}.rt.on{border-color:var(--brand);background:var(--brand-50);box-shadow:0 0 0 3px var(--brand-100)}
.rt small{display:block;color:var(--muted);font-size:11px}
.inbar{height:6px;border-radius:99px;background:var(--line-2);overflow:hidden;min-width:60px}.inbar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#d4a63a)}
.sub-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;background:linear-gradient(135deg,var(--side),#1b3a6b);color:#fff;border-radius:var(--r-lg);padding:24px;margin-bottom:18px;box-shadow:var(--sh-2)}
@media(max-width:860px){.sub-hero{grid-template-columns:1fr}}
.sh-k{font-size:12px;opacity:.7;text-transform:uppercase;letter-spacing:.06em}.sh-p{font-size:26px;font-weight:750}.sh-price{font-size:18px;color:#f3d27a}.sh-d{font-size:12px;opacity:.8;margin-top:6px}
.sh-m{display:flex;flex-direction:column;gap:12px}
.um-h{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.um .bar,.um>div:last-child{height:8px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}.um i{display:block;height:100%;background:#f3d27a;border-radius:99px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.plan{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-1)}
.plan.cur{border:2px solid #d4a63a;box-shadow:0 8px 24px rgba(212,166,58,.18)}
.pl-badge{position:absolute;top:-10px;right:14px;background:#d4a63a;color:#1b1300;font-size:11px;font-weight:700;padding:2px 10px;border-radius:99px}
.pl-price{font-size:24px;font-weight:750;margin:6px 0}.pl-lim{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.tl-day{margin-bottom:16px}.tl-d{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}
.au{display:flex;gap:12px;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);margin-bottom:6px}
.au-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--info-50);color:var(--info);flex:none}
.au-m{flex:1;min-width:0}.au-d{font-size:12px;color:var(--muted)}
.df{display:inline-block;font-size:11px;padding:1px 7px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);margin:3px 4px 0 0}
.msgs{display:flex;flex-direction:column;gap:10px}.msg{max-width:560px}.msg-h{font-size:11px;color:var(--muted);margin-bottom:3px}
.bubble{background:#dcf8c6;color:#14361a;padding:10px 12px;border-radius:12px 12px 12px 2px;white-space:pre-wrap;font-size:13px;box-shadow:var(--sh-1)}
.g2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media(max-width:1100px){.g2-1{grid-template-columns:1fr}}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.card-h h2{margin:0}
.sel-sm{height:36px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:var(--panel)}
.sa-hero{display:grid;grid-template-columns:1fr auto;gap:16px;background:radial-gradient(120% 140% at 100% 0,#1e4fa8 0,#053b33 55%);color:#fff;border-radius:18px;padding:24px 26px;margin-bottom:14px;box-shadow:var(--sh-2)}
.sa-hero h1{color:#fff;font-size:24px;margin:2px 0}.sa-hero p{margin:0;opacity:.8}.sa-hero .sh-k{font-size:12px;opacity:.7}
.sa-hero-a{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.btn.gold{background:linear-gradient(180deg,#f3d27a,#d4a63a);color:#1b1300;border:0;font-weight:650}.btn.ghost-w{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25)}
.sa-hk{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sa-hk>div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 14px}
.sa-hk span{font-size:12px;opacity:.75;display:block}.sa-hk b{font-size:22px;letter-spacing:-.01em}.sa-hk b em{font-style:normal;font-size:14px;opacity:.6}.sa-hk small{display:block;font-size:11.5px;opacity:.7}
@media(max-width:900px){.sa-hero{grid-template-columns:1fr}.sa-hk{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sa-status{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px}
.ss{display:flex;align-items:baseline;gap:8px;padding:12px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-left-width:4px}
.ss b{font-size:22px}.ss span{color:var(--muted);font-size:12.5px}.ss:hover{box-shadow:var(--sh-2)}
.ss.t-good{border-left-color:var(--good)}.ss.t-brand{border-left-color:#0f766e}.ss.t-warn{border-left-color:var(--warn)}.ss.t-bad{border-left-color:var(--bad)}
@media(max-width:760px){.sa-status{grid-template-columns:repeat(2,1fr)}}
.act-list{display:flex;flex-direction:column;gap:6px}.act{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line-2);border-radius:10px}
.ell{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.empty-state.sm{padding:18px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted)}
.stack-bar{display:flex;height:12px;border-radius:99px;overflow:hidden;gap:2px;margin:6px 0 12px}
.leg-list{display:flex;flex-direction:column;gap:7px}.leg-list>div{display:flex;align-items:center;gap:8px;font-size:13px}.leg-list i{width:10px;height:10px;border-radius:3px;flex:none}.leg-list span:not(.tg):not(.st-dot){flex:1}.leg-list em{font-style:normal;color:var(--muted);font-size:12px;min-width:34px;text-align:right}
.st-dot{color:var(--muted);display:inline-flex}
.audit-ok{margin-top:14px;padding:9px 12px;border-radius:10px;background:var(--good-50);color:var(--good);font-size:12.5px;font-weight:600}.audit-ok.bad{background:var(--bad-50);color:var(--bad)}
.hl{display:inline-flex;align-items:center;gap:6px}.hl i{display:block;width:54px;height:6px;border-radius:99px;background:var(--line-2);position:relative;overflow:hidden}.hl i::after{content:"";position:absolute;inset:0;width:inherit}
.hl{--c:var(--good)}.hl.warn{--c:var(--warn)}.hl.bad{--c:var(--bad)}.hl b{color:var(--c);font-size:12.5px}
.hl i{background:linear-gradient(90deg,var(--c) 0 0) no-repeat,var(--line-2);background-size:0 100%}
.hl i[style]{background:var(--line-2)}.hl{position:relative}
.mini-um{display:grid;grid-template-columns:38px 60px auto;align-items:center;gap:6px;font-size:11px;color:var(--muted);line-height:1.6}.mini-um i{height:5px;border-radius:99px;background:var(--line-2);overflow:hidden;display:block}.mini-um i b{display:block;height:100%;background:#0f766e}.mini-um i b.full{background:var(--warn)}.mini-um em{font-style:normal;color:var(--ink-2)}
.tp-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.tp-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}.tp-k>div{background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;padding:10px}.tp-k span{display:block;font-size:11px;color:var(--muted)}.tp-k b{font-size:15px}
@media(max-width:700px){.tp-k{grid-template-columns:repeat(2,1fr)}}
.pay-sum{background:var(--panel-2);border:1px dashed var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.pay-sum>div{display:flex;justify-content:space-between;font-size:13px}.pay-sum .tt{border-top:1px solid var(--line);padding-top:6px;margin-top:4px;font-size:15px}.good-t{color:var(--good)}
.vinv{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;color:#111}
.vi-h{display:flex;justify-content:space-between;gap:16px;border-bottom:2px solid #053b33;padding-bottom:12px}.vi-h .logo-svg,.vi-h svg{width:44px;height:44px}
.vi-t{font-weight:800;color:#053b33;font-size:18px;text-align:right}.vi-t small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.vi-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.vi-meta span,.vi-bill span{display:block;font-size:11px;color:var(--muted)}
.vi-bill{border:1px solid var(--line-2);border-radius:8px;padding:10px;margin-bottom:12px}
.vi-tbl{width:100%;border-collapse:collapse;font-size:13px}.vi-tbl th{background:#053b33;color:#fff;padding:8px;text-align:left;font-weight:600}.vi-tbl td{padding:8px;border-bottom:1px solid var(--line-2);vertical-align:top}.vi-tbl tfoot td{font-size:14px;border:0}.vi-tbl .num{text-align:right}
.vi-words{margin:10px 0;font-size:12.5px}.vi-f{display:flex;justify-content:space-between;gap:16px;margin-top:16px}.vi-sign{text-align:right;font-size:12.5px}
@media print{.noprint{display:none!important}.vi-tbl th{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.pl-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2);font-size:12px;color:var(--muted)}.pl-foot b{color:var(--ink)}
.plan-mx tr.sec td{background:var(--panel-2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.sw{position:relative;display:inline-block;width:36px;height:20px}.sw input{opacity:0;width:0;height:0}.sw i{position:absolute;inset:0;border-radius:99px;background:#cbd5e1;transition:.15s;cursor:pointer}.sw i::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}.sw input:checked+i{background:#0f766e}.sw input:checked+i::after{left:18px}
.stepn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#053b33;color:#f3d27a;font-size:12px;margin-right:6px}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.tpl input,.plans.pick .plan input{position:absolute;opacity:0}.tpl span{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-weight:550;background:var(--panel)}.tpl em{font-style:normal;font-size:20px}
.tpl input:checked+span{border-color:#0f766e;background:#eff5ff;box-shadow:0 0 0 3px #dbe7ff}
.plans.pick .plan{cursor:pointer}.plans.pick .plan:has(input:checked){border:2px solid #d4a63a;box-shadow:0 8px 24px rgba(212,166,58,.18)}
.pwrow .pre{display:grid;place-items:center;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--muted)}
.hl i{background:var(--line-2)!important}.hl i::after{display:none}.hl u{display:block;height:100%;background:var(--c);border-radius:99px}
.cart-fab{display:none}
body.pos-mode .content{max-width:none;padding:16px 20px;height:calc(100vh - 60px);overflow:hidden}
body.pos-mode .pos2{grid-template-columns:minmax(0,1fr) clamp(340px,30vw,460px);gap:16px;height:100%;align-items:stretch}
body.pos-mode .pos-l{display:flex;flex-direction:column;min-height:0;min-width:0}
body.pos-mode .pos-l .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:none}.pos-l .chips::-webkit-scrollbar{display:none}
body.pos-mode .tiles2{flex:1;max-height:none;min-height:0;grid-template-columns:repeat(auto-fill,minmax(clamp(132px,11vw,176px),1fr));align-content:start}
body.pos-mode .kb-hint{flex:none}
body.pos-mode .cart2{position:static;height:100%;max-height:none;min-height:0}
body.pos-mode .lines2{min-height:60px}
body.pos-mode .cart2 .charge{flex:none;margin-top:auto}
@media (min-width:821px) and (max-width:1599px){
body.pos-mode .shell{grid-template-columns:72px minmax(0,1fr)}
body.pos-mode .side .logo>div,body.pos-mode .side .grp,body.pos-mode .side a span,body.pos-mode .side .me .who{display:none}
body.pos-mode .side a{justify-content:center;padding:11px 0}body.pos-mode .side .logo{justify-content:center;padding-left:0;padding-right:0}
body.pos-mode .side .me{flex-direction:column;gap:8px;padding:12px 0;align-items:center}
body.pos-mode .side a .lock{display:none}
}
@media (max-height:820px){
body.pos-mode .cart-h{padding-top:10px}body.pos-mode .cust{margin:8px 0 2px}
body.pos-mode .tot2{margin:8px 16px;padding:8px 12px!important;font-size:12.5px;gap:1px}body.pos-mode .tot2 .g{font-size:20px;padding-top:4px}
body.pos-mode .pb{padding:6px 2px;font-size:11.5px}body.pos-mode .pb span{font-size:15px}
body.pos-mode .charge{margin:8px 16px 12px;padding:11px;font-size:16px}
body.pos-mode .t2{min-height:112px;padding:10px;gap:6px}body.pos-mode .t2-av{width:32px;height:32px;font-size:12px}
body.pos-mode .kb-hint{display:none}body.pos-mode .pos-top{margin-bottom:8px}body.pos-mode .search.big input{padding-top:10px;padding-bottom:10px}
}
@media (max-width:900px){
body.pos-mode .content{height:auto;overflow:visible;padding:12px}
body.pos-mode .pos2{grid-template-columns:1fr;height:auto}
body.pos-mode .tiles2{max-height:none;overflow:visible;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
body.pos-mode .cart2{height:auto;scroll-margin-top:70px}
.cart-fab.show{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;align-items:center;gap:10px;padding:14px 16px;border:0;border-radius:14px;background:var(--navy-900,#053b33);color:#fff;font:inherit;font-weight:650;box-shadow:0 10px 30px rgba(5,59,51,.35);cursor:pointer}
.cart-fab b{margin-left:auto;font-size:17px}.cart-fab em{font-style:normal;color:#f3d27a;font-size:13px}
body.pos-mode .pos-l{padding-bottom:70px}
}
@media (max-width:480px){ body.pos-mode .tiles2{grid-template-columns:repeat(2,minmax(0,1fr))} body.pos-mode .pos-tabs button{padding:7px 10px;font-size:13px} }
.cart2{border-top:0;border-radius:16px}
.cart2 .cart-h{margin:0;padding:14px 16px;background:linear-gradient(135deg,#053b33,#1b3a6b);color:#fff;align-items:center}
.ch-t{display:flex;gap:10px;align-items:center;min-width:0}.ch-t h2{color:#fff;margin:0;font-size:16px}.ch-t .small{color:#b5dccf}
.ch-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(243,210,122,.15);color:#f3d27a;flex:none}
.ch-n{font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.12);color:#f3d27a;white-space:nowrap}
.cart-h .iconbtn.sm{color:#fff;background:rgba(255,255,255,.1)}.cart-h .row{gap:6px;align-items:center}
.cart2 .cust{margin:12px 0 2px}.cart2 .cust .search input{height:40px;border-radius:10px;background:var(--panel-2)}.cart2 .cust .search input:focus{background:#fff}
.cart2 #cnew{height:40px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.walkin{font-size:11.5px;color:var(--muted);margin:4px 0 2px}
.cart2 .lines2{border-top:1px solid var(--line-2);margin-top:8px}
.cart-empty{align-content:center;height:100%;min-height:180px;gap:6px}
.ce-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#eff4fb;color:#1b3a6b;margin-bottom:4px;box-shadow:inset 0 0 0 6px #f7f9fd}
.cart-empty b{font-size:15px;color:var(--ink)}.cart-empty span{font-size:13px}
.ce-k{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px}.ce-k span{font-size:11.5px;color:var(--muted);display:inline-flex;gap:4px;align-items:center}
.tot2.empty{margin-bottom:0}.tot2.empty .g{border:0;margin:0;padding:0;color:#94a3b8}
.cart2 .charge:disabled{background:#e6ebf3;color:#94a3b8;box-shadow:none;opacity:1}.cart2 .charge:disabled kbd{background:#fff;color:#94a3b8;border-color:#dde3ec}
.ch-t>div{min-width:0}.ch-t .small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-ed{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}.dc-ed th{background:var(--panel-2);text-align:left;padding:7px 8px;font-size:11.5px;color:var(--muted);font-weight:650}.dc-ed td{padding:6px 8px;border-bottom:1px solid var(--line-2)}.dc-ed .num{text-align:right}.dc-ed input{padding:5px 7px;text-align:right}
.dc-sign{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;font-size:12.5px}.dc-sign>div{border-top:1px dashed var(--line);padding-top:8px}
.dcdoc h1{letter-spacing:.02em}
.item-foot{border-top:1px solid var(--line-2);padding-top:12px;margin-top:4px}.btn.good-b{background:var(--good-50);color:var(--good);border-color:#bfe5cf}
.dcx{padding:28px;color:#0f172a;font-size:12.5px;line-height:1.45}
.dcx .lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b;margin-bottom:4px}
.dcx-top{display:flex;justify-content:space-between;gap:18px;padding-bottom:14px;border-bottom:3px solid #053b33}
.dcx-brand{display:flex;gap:12px;align-items:flex-start}.dcx-brand img{width:60px;height:60px;object-fit:contain;border-radius:10px;border:1px solid var(--line);background:#fff}.dcx-brand .biz-mono{width:56px;height:56px;font-size:18px}
.dcx-name{font-size:20px;font-weight:800;color:#053b33;letter-spacing:-.01em}
.dcx-title{text-align:right;min-width:230px}.dcx-title h1{font-size:22px;letter-spacing:.08em;color:#053b33;margin:2px 0 0}
.dcx-copy{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#8a6414;background:#fbf0d7;border:1px solid #ecd59a;padding:2px 8px;border-radius:4px}
.dcx-no{display:inline-block;margin-top:8px;font-size:15px;font-weight:800;background:#053b33;color:#fff;padding:5px 12px;border-radius:6px;letter-spacing:.02em}
.dcx-meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0;border:1px solid #d6dde8;border-radius:8px;margin:14px 0;overflow:hidden}
.dcx-meta>div{padding:7px 10px;border-right:1px solid #e6ebf2;border-bottom:1px solid #e6ebf2}.dcx-meta span{display:block;font-size:10.5px;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.dcx-meta b{font-size:12.5px}
.dcx-parties{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}.dcx-parties>div{border:1px solid #d6dde8;border-radius:8px;padding:10px 12px;background:#fafbfd}.dcx-parties b{font-size:14px}
.dcx-items{width:100%;border-collapse:collapse}.dcx-items th{background:#053b33;color:#fff;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding:8px;text-align:left}.dcx-items td{padding:8px;border-bottom:1px solid #e6ebf2;vertical-align:top}
.dcx-items tbody tr:nth-child(even) td{background:#f8fafc}.dcx-items .num{text-align:right}.dcx-items tfoot td{font-weight:800;background:#eef2f8;border-top:2px solid #053b33}
.dcx-sum{display:grid;grid-template-columns:1fr 290px;gap:16px;margin-top:14px}
.dcx-hsn{width:100%;border-collapse:collapse;margin-top:10px;font-size:11.5px}.dcx-hsn th,.dcx-hsn td{border:1px solid #e1e7ef;padding:4px 7px;text-align:left}.dcx-hsn th{background:#f4f6fa}.dcx-hsn .num{text-align:right}
.dcx-tot{border:1px solid #d6dde8;border-radius:8px;padding:10px 12px;display:grid;gap:5px;align-content:start}.dcx-tot>div{display:flex;justify-content:space-between}.dcx-tot .g{border-top:2px solid #053b33;padding-top:7px;margin-top:3px;font-size:16px;color:#053b33}
.dcx-terms{margin-top:14px;border-top:1px dashed #cbd5e1;padding-top:10px}.dcx-terms ol{margin:0;padding-left:18px;color:#334155}
.dcx-sign{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}.dcx-sign>div{border-top:1px solid #94a3b8;padding-top:6px;display:grid;font-size:11.5px}.dcx-sign span{color:#64748b}.dcx-sign>div:last-child{text-align:right}
.dc-pr{display:inline-flex}.dc-pr .btn:first-child{border-radius:10px 0 0 10px}.dc-pr .btn:last-child{border-radius:0 10px 10px 0;border-left:0}
.dc-printset{display:none}
@media(max-width:760px){.dcx-top,.dcx-sum{grid-template-columns:1fr;flex-direction:column}.dcx-title{text-align:left}.dcx-parties{grid-template-columns:1fr}.dcx-sign{grid-template-columns:1fr 1fr}.dcx{padding:16px}}
@media print{
body.printing-dc>*:not(.dc-printset){display:none!important}
body.printing-dc .dc-printset{display:block!important}body.printing-dc .dc-printset,body.printing-dc .dc-printset *{visibility:visible!important}
body.printing-dc .dc-printset .dcx{position:static!important;border:0;box-shadow:none;page-break-after:always;break-after:page}
body.printing-dc .dc-printset .dcx:last-child{page-break-after:auto;break-after:auto}
.dcx-items th,.dcx-no,.dcx-items tfoot td,.dcx-copy{-webkit-print-color-adjust:exact;print-color-adjust:exact}
@page{size:A4;margin:10mm}
}
@media print{body.printing-dc .dcx{padding:0;font-size:10.5px}body.printing-dc .dcx-items th,body.printing-dc .dcx-items td{padding:5px 4px}body.printing-dc .dcx-items th{font-size:9px}body.printing-dc .dcx-name{font-size:17px}body.printing-dc .dcx-title h1{font-size:18px}body.printing-dc .dcx-sum{grid-template-columns:1fr 240px}body.printing-dc .dcx-meta{grid-template-columns:repeat(5,1fr)}body.printing-dc .dcx-sign{margin-top:26px}}
@media print{body.printing-dc,html{background:#fff!important}}
.dc-bar{display:none}.dc-bar.on{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:#053b33;color:#fff;border-radius:12px;padding:10px 14px;margin:0 0 12px;position:sticky;top:70px;z-index:5;box-shadow:var(--sh-2)}
.dc-bar .btn.sm{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}.dc-bar .btn.pri{background:linear-gradient(180deg,#f3d27a,#d4a63a);color:#1b1300;border:0}
.dc-ck{width:18px;height:18px;accent-color:#0f766e;cursor:pointer}
.dc-ref{display:inline-flex;gap:6px;align-items:center;margin-top:6px;padding:4px 10px;border-radius:8px;background:#eff5ff;color:#134e4a;font-size:12.5px}
.dcx-sign .sgb{display:grid;align-content:end;gap:1px;border-top:0!important;padding-top:0!important}.dcx-sign .sgb.r{text-align:right;justify-items:end}
.sgb .sg-img{height:54px;max-width:100%;object-fit:contain;object-position:left bottom;border-bottom:1px solid #94a3b8;margin:4px 0 4px}.sgb.r .sg-img{object-position:right bottom}
.sgb .sg-empty{height:54px;border-bottom:1px solid #94a3b8;margin:4px 0 4px;width:100%}.sgb small{font-size:10px;color:#64748b}
.dcx-sign>div:not(.sgb){align-content:end}
.sgpad{position:relative;height:220px;border:2px dashed #a7dcc9;border-radius:12px;background:repeating-linear-gradient(0deg,#fff 0 27px,#f6f8fc 27px 28px);touch-action:none;overflow:hidden}
.sgpad canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
.sg-hint{position:absolute;inset:0;display:grid;place-items:center;color:#94a3b8;font-size:14px;pointer-events:none}
.sg-line{position:absolute;left:24px;right:24px;bottom:46px;border-bottom:1.5px solid #cbd5e1;pointer-events:none}.sg-line::before{content:"✕";position:absolute;left:-16px;bottom:-4px;color:#94a3b8;font-size:12px}
.dcx-sign{align-items:end}.dcx-sign .sgb{border-top:0!important;padding-top:0!important;align-content:start}.dcx-sign .sgb>span{min-height:16px;color:#64748b}
.sgb .sg-img,.sgb .sg-empty{height:58px;width:100%;margin:2px 0 4px;border-bottom:1px solid #94a3b8}
.dcx-sign{align-items:start!important}.sgb small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sg-mob{font-weight:500;color:#64748b;font-size:11px}
.dcx-sign{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start!important;margin-top:30px}
.dcx-sign .sgb{display:flex;flex-direction:column;gap:2px;text-align:left!important;align-items:stretch!important}
.dcx-sign .sg-top{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.04em}
.dcx-sign .sg-area{height:60px;display:flex;align-items:flex-end;border-bottom:1.5px solid #64748b;margin:2px 0 5px;padding:0 2px 3px}
.dcx-sign .sg-area img{max-height:56px;max-width:100%;object-fit:contain;object-position:left bottom}
.dcx-sign .sg-name{font-family:"Segoe Script","Brush Script MT","Lucida Handwriting",cursive;font-size:19px;color:#053b33;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcx-sign .sgb b{font-size:12.5px}.dcx-sign .sgb small{font-size:10.5px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcx-sign .sg-img,.dcx-sign .sg-empty{display:none}
@media(max-width:760px){.dcx-sign{grid-template-columns:1fr 1fr}}
.auth-sg{width:230px;text-align:center;font-size:12px}.auth-sg .as-top{text-align:right}
.auth-sg .as-area{position:relative;height:74px;margin-top:4px}
.as-area .as-stamp{position:absolute;left:8px;bottom:-6px;height:78px;max-width:110px;object-fit:contain;opacity:.88;transform:rotate(-8deg);mix-blend-mode:multiply}
.as-area .as-sign{position:absolute;right:4px;bottom:2px;height:56px;max-width:170px;object-fit:contain;object-position:right bottom}
.auth-sg .as-line{border-top:1px solid #9ca3af;margin:2px 0 3px}.auth-sg .as-name{font-weight:700;min-height:14px}.auth-sg .as-lbl{color:#475569}
.dcx-sign .sg-area.as-area{position:relative;justify-content:flex-end}.dcx-sign .sg-area.as-area .as-stamp{left:0;bottom:-4px;height:70px}
.sigset{border:1px dashed var(--line);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;background:var(--panel-2)}
.sigset-h{grid-column:1/-1;display:grid;gap:2px}.sig-prev{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:10px 14px}
.sigset .lp-prev img{background:repeating-conic-gradient(#f1f4f8 0 25%,#fff 0 50%) 0 0/12px 12px}
@media print{.as-area .as-stamp{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media(max-width:700px){.sigset{grid-template-columns:1fr}}
.dcx .dcx-sign{display:grid!important;grid-template-columns:repeat(4,1fr);gap:0!important;margin-top:26px;border:1px solid #cfd8e3;border-radius:8px;overflow:hidden;align-items:stretch!important}
.dcx-sign .sgc{display:flex;flex-direction:column;border-right:1px solid #e3e8ef;padding:0}.dcx-sign .sgc:last-child{border-right:0}
.dcx-sign .sgc-h{background:#f3f6fa;border-bottom:1px solid #e3e8ef;padding:6px 10px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcx-sign .sgc-a{position:relative;height:70px;margin:0 12px;border-bottom:1px solid #94a3b8;display:flex;align-items:flex-end;justify-content:flex-start;padding-bottom:4px;overflow:visible}
.dcx-sign .sgc-a img{max-height:60px;max-width:100%;object-fit:contain;object-position:left bottom}
.dcx-sign .sgc-a .as-stamp{position:absolute;right:0;bottom:-8px;height:72px;max-width:45%;opacity:.88;transform:rotate(-8deg);mix-blend-mode:multiply}
.dcx-sign .sgc-a .as-sig{position:relative;max-width:65%}
.dcx-sign .sg-script{font-family:"Segoe Script","Brush Script MT","Lucida Handwriting",cursive;font-size:18px;color:#053b33;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.dcx-sign .sgc-n{padding:6px 12px 0;font-weight:700;font-size:12px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcx-sign .sgc-m{padding:1px 12px 8px;font-size:10.5px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcx-sign .sgc-blank{color:#cbd5e1;font-weight:500}.dcx-sign .sg-mob{color:#64748b;font-weight:500}
.dcx-sign .sgb{display:none}
@media(max-width:760px){.dcx .dcx-sign{grid-template-columns:1fr 1fr}.dcx-sign .sgc:nth-child(2){border-right:0}.dcx-sign .sgc:nth-child(-n+2){border-bottom:1px solid #e3e8ef}}
@media print{.dcx-sign .sgc-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.dcx .dcx-sign>.sgc{text-align:left!important;border-top:0!important;padding-top:0!important;display:flex!important}
.me-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit;border-radius:10px;padding:4px;margin:-4px}.me-link:hover{background:rgba(255,255,255,.07)}
.acc-hero{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,#053b33,#1b3a6b);color:#fff;border-radius:16px;padding:22px 24px;margin-bottom:16px}.acc-hero h1{color:#fff}.acc-hero .muted{color:#b5dccf}.acc-hero .tg{background:rgba(255,255,255,.12);color:#fff}.acc-hero .tg.good{background:#dcf3e8;color:#047857}.acc-hero .tg.warn{background:#fdf3e3;color:#a35a06}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.acc-grid .acc-2fa{grid-column:1/-1}.acc-grid h2{display:flex;gap:8px;align-items:center}
@media(max-width:900px){.acc-grid{grid-template-columns:1fr}}
.tfa-st{padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:10px}.tfa-st.off{background:#fdf3e3;color:#7c4a03}.tfa-st.on{background:#dcf3e8;color:#065f46}
.tfa-steps{margin:6px 0;padding-left:20px;font-size:13.5px}.tfa-qr{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:10px 0 12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}.tfa-qr img{background:#fff;padding:6px;border-radius:8px}
.tfa-key{display:inline-block;margin:6px 0;font-size:16px;letter-spacing:.08em;background:#fff;border:1px solid var(--line);padding:6px 10px;border-radius:8px;user-select:all}
.tfa-rc{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:520px}.tfa-rc code{background:var(--panel-2);border:1px solid var(--line);padding:6px;border-radius:6px;text-align:center;font-size:14px}
input.otp{font-size:20px;letter-spacing:.3em;text-align:center;font-weight:700}
.tfa-ic{width:56px;height:56px;border-radius:16px;background:#eff5ff;color:#134e4a;display:grid;place-items:center;margin-bottom:10px}
.inv-k{margin-bottom:14px}
.qb{display:inline-block;min-width:34px;text-align:center;padding:2px 8px;border-radius:6px;background:#eef2f7;color:#334155;font-weight:700;font-size:12.5px}.qb.low{background:#fdf3e3;color:#a35a06}.qb.out{background:#fdeeee;color:#b91c1c}
.qt{display:grid;justify-items:end;gap:3px}.qt i{display:block;width:90px;height:5px;border-radius:99px;background:#eef2f7;overflow:hidden}.qt u{display:block;height:100%;background:#0f766e;border-radius:99px}
.qt{white-space:nowrap}.qt>div,.qt b{white-space:nowrap}
.dcx-sign .sgc-m:empty{display:none}.dcx-sign .sgc-n{padding-bottom:8px}
.pos3{display:flex;flex-direction:column;gap:12px;min-height:0}
body.pos-mode .pos3{height:100%}body.pos-mode .pos3>.pos2{flex:1;min-height:0;height:auto}
.pos-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px 10px;box-shadow:var(--sh-1)}
.pb-shop{display:flex;align-items:center;gap:8px;color:var(--navy-900,#053b33)}.pb-shop .tg{font-size:11px}
.pb-reg{font-size:12px;font-weight:650;padding:4px 10px;border-radius:99px}.pb-reg.ok{background:#dcf3e8;color:#047857}.pb-reg.off{background:#fdeeee;color:#b91c1c}
.pb-today{font-size:12.5px;color:var(--muted);padding-left:8px;border-left:1px solid var(--line)}.pb-today b{color:var(--ink)}
.pos-bar .sp{flex:1}.pos-bar .btn.sm{height:32px}
#vw{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;padding:0;margin:0}#vw button{border:0;background:#fff;padding:5px 10px;cursor:pointer;color:var(--muted);font-size:14px;border-radius:0}#vw button.on{background:#053b33;color:#fff}
.tiles2.as-list{grid-template-columns:1fr!important;gap:4px}
.tiles2.as-list .t2{grid-template-columns:34px 1fr auto;display:grid;align-items:center;min-height:0;padding:7px 10px;gap:10px}
.tiles2.as-list .t2-av{width:32px;height:32px}.tiles2.as-list .t2-n{min-height:0;-webkit-line-clamp:1}.tiles2.as-list .t2-n small{display:block;color:var(--muted);font-weight:500;font-size:11px}
.tiles2.as-list .t2-f{margin:0;gap:12px}.tiles2.as-list .incart{position:static;order:-1}
.t2-f b small{font-size:10.5px;color:var(--muted);font-weight:600;margin-left:1px}
.ln-i{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:5px;background:#eef2f7;color:#64748b;font-size:10.5px;font-weight:700}
.ln.flash{animation:lnflash .9s ease}@keyframes lnflash{0%{background:#fff7dc}100%{background:transparent}}
.btn.wq{font-weight:700}
.qp-quick{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.qp-f{display:flex;align-items:center;gap:10px}.qp-f input{font-size:26px;font-weight:800;width:170px;text-align:right}.qp-f span{color:var(--muted)}.qp-f b{margin-left:auto;font-size:20px;color:#053b33}
.modal-box.paymodal{width:min(1040px,100%);padding:14px}
.pay3{display:grid;grid-template-columns:300px 1fr;gap:0;min-height:520px}
.pay-l{position:relative;overflow:hidden;background:radial-gradient(120% 70% at 0% 0%,#0f766e 0%,transparent 55%),linear-gradient(165deg,#053b33,#12305a);color:#fff;border-radius:16px;padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.pl-k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#a9bbd3;font-weight:600}
.pl-v{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.pl-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}.pl-bar i{display:block;height:100%;background:linear-gradient(90deg,#f3d68a,#d4a743);border-radius:99px;transition:width .25s}
.pl-s{font-size:12.5px;color:#c4d1e3}
.pl-c{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 12px}.pl-c b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pl-c .small{color:#b9c8dc;font-size:11.5px}
.pl-wi{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);flex:none}
.pl-p{border-top:1px solid rgba(255,255,255,.14);padding-top:12px;display:grid;gap:8px}
.pl-row{display:flex;align-items:center;gap:10px;font-size:13.5px}.pl-row span:nth-child(2){flex:1}.pl-row small{color:#a9bbd3}.pl-row b{font-variant-numeric:tabular-nums}
.pl-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#f3d68a}
.pl-row .iconbtn{color:#cbd6e6;width:26px;height:26px}.pl-row .iconbtn:hover{background:rgba(255,255,255,.12);color:#fff}
.pl-tax{margin-top:auto;display:grid;gap:4px;font-size:12px;color:#a9bbd3;border-top:1px solid rgba(255,255,255,.12);padding-top:10px}.pl-tax div{display:flex;justify-content:space-between}.pl-tax span:last-child{color:#dfe7f2;font-variant-numeric:tabular-nums}
.pl-chg{background:linear-gradient(90deg,#f3d68a,#e6be62);color:#1b1300;border-radius:12px;padding:12px 14px;font-weight:700;display:flex;justify-content:space-between;align-items:center;box-shadow:0 10px 24px rgba(212,167,67,.3)}.pl-chg b{font-size:24px;font-variant-numeric:tabular-nums}
.pay-r{padding:6px 6px 6px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pr-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.pr-h b{font-size:15px;color:var(--navy-900)}
.pt-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.pt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px 10px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;color:var(--ink-2);transition:border-color .12s,background .12s,box-shadow .12s,transform .08s}
.pt svg{color:#475569}.pt b{font-size:13px;font-weight:650;white-space:nowrap}.pt small{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pt:hover:not(:disabled){border-color:#9db4dd;background:#f8fbff}.pt:active:not(:disabled){transform:scale(.98)}
.pt.on{border-color:var(--navy-900);background:#f1f5fc;box-shadow:inset 0 0 0 1px var(--navy-900),0 6px 16px rgba(5,59,51,.08);color:var(--navy-900)}.pt.on svg{color:#0f766e}
.pt:disabled{opacity:.42;cursor:not-allowed}
.pm-body{flex:1;display:flex;flex-direction:column;gap:12px}
.pm-row{display:flex;justify-content:space-between;align-items:baseline}.pm-lbl{font-weight:650;color:var(--ink-2)}.pm-due{font-size:13px;color:var(--muted)}.pm-due b{color:var(--navy-900);font-size:15px}
.pm-amt{display:flex;align-items:center;gap:8px;border:2px solid var(--navy-900);border-radius:14px;padding:4px 16px;background:#fff;box-shadow:0 0 0 4px rgba(15,118,110,.08)}
.pm-amt span{font-size:28px;color:var(--muted);font-weight:600}
.pm-amt input{border:0!important;outline:0;box-shadow:none!important;font-size:38px;font-weight:800;width:100%;padding:8px 0;background:transparent;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--navy-900)}
.pm-amt input::placeholder{color:#c3ccd9}
.cash-stat{min-height:40px;display:flex;align-items:center;font-size:14px}
.cash-stat span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px}
.cs-n{color:var(--muted);padding-left:0!important}.cs-g{background:var(--good-50);color:#14532d;font-weight:600}.cs-g b{font-size:16px}.cs-w{background:#fdf3e3;color:#7c4a03}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.qk{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font-weight:800;font-size:20px;color:var(--navy-900);font-variant-numeric:tabular-nums;text-align:left}
.qk small{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.qk:hover{border-color:#0f766e;background:#f5f8ff}.qk.ex{background:#eef4ff;border-color:#bcd0f5}.qk.ex small{color:#0f766e}
.notes{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.notes>.small{margin-right:4px}
.nt{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:650;font-size:13px;cursor:pointer;color:var(--ink-2)}.nt:hover{border-color:#0f766e;color:#0f766e}.nt.cl{color:var(--muted)}.nt.on{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.reasons{display:flex;flex-wrap:wrap;gap:6px}
.pm-info{font-size:12.5px;background:#eff5ff;color:#134e4a;border-radius:10px;padding:9px 12px}.pm-info.warn{background:#fdf3e3;color:#7c4a03}
.pm-upi{display:flex;gap:20px;align-items:center}.pm-upi img{border:1px solid var(--line);border-radius:14px;padding:8px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.pm-big{font-size:34px;font-weight:800;color:var(--navy-900);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:2px 0}
.upi-apps{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.upi-apps span{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2)}
.pm-card{display:flex;gap:18px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fff,#f8fafd)}.pm-card>svg{color:#0f766e;flex:none}
.pm-ref{width:100%}
.pm-act{display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid var(--line-2);padding-top:14px}
.pm-act .btn.pri{flex:1;max-width:400px;justify-content:center;height:54px;font-size:16px;border-radius:12px}
.pm-act kbd{background:rgba(255,255,255,.18);color:inherit;border-color:rgba(255,255,255,.3)}
@media(max-width:820px){.modal-box.paymodal{padding:10px}.pay3{grid-template-columns:1fr;min-height:0}.pay-l{padding:16px}.pl-v{font-size:34px}.pl-tax{display:none}.pay-r{padding:14px 0 0}.pt-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.quick{grid-template-columns:repeat(2,minmax(0,1fr))}.pm-upi{flex-direction:column;align-items:flex-start}.pm-act .btn.pri{max-width:none}.pm-act .btn:not(.pri) kbd{display:none}}
.chg-banner{background:#f3d27a;color:#1b1300;font-weight:700;border-radius:12px;padding:10px 14px;margin:0 auto 10px;max-width:320px;display:flex;justify-content:space-between}.chg-banner b{font-size:20px}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}.keys div{display:flex;gap:10px;align-items:center}.keys kbd{min-width:62px;text-align:center}
@media(max-width:900px){.pb-today{display:none}}
.paused-box{display:flex;gap:12px;align-items:flex-start;background:#fff7e6;border:1px solid #f3d27a;border-left:4px solid #b7791f;border-radius:12px;padding:12px 14px;margin:0 0 14px}.paused-box p{margin:2px 0 0;font-size:13px;color:#7c4a03}.pz-ic{width:34px;height:34px;border-radius:50%;background:#fdf3e3;display:grid;place-items:center;font-size:16px;flex:none}
.tg.paused,.pill.paused{background:#fff1d6;color:#a35a06}
.devs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dev{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 10px;font-size:12.5px;cursor:pointer;color:var(--ink-2)}.dev b{color:#134e4a;font-size:11px}.dev:hover:not(:disabled){border-color:#0f766e;background:#eefaf5}.dev:disabled{cursor:default}
.dev.off{opacity:.55;text-decoration:line-through}
.ctr-pick{max-width:760px;margin:40px auto;text-align:center}.ctr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:20px}
.ctr{display:grid;gap:4px;justify-items:center;padding:22px 12px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;box-shadow:var(--sh-1)}.ctr span{font-size:30px}.ctr em{font-style:normal;font-size:12px;color:var(--muted)}.ctr:hover{border-color:#0f766e;box-shadow:var(--sh-2)}
.ctr-ch{border:0;cursor:pointer}.ctr-ch:disabled{cursor:default}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}.st-card{display:flex;gap:12px;align-items:center;padding:14px 16px}.st-ic{width:48px;height:48px;border-radius:12px;background:#fbf0d7;color:#8a6414;display:grid;place-items:center;flex:none}.st-m{flex:1;min-width:0}
.ipick{display:flex;flex-wrap:wrap;gap:8px}.ipick input{position:absolute;opacity:0}.ipick span{display:grid;place-items:center;width:46px;height:46px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;color:var(--ink-2);background:#fff}.ipick input:checked+span{border-color:#b7791f;background:#fbf0d7;color:#8a6414;box-shadow:0 0 0 3px #f6e6bf}
.fysel{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:10px;padding:0 4px 0 10px;background:#fff;height:36px}.fysel select{border:0;outline:0;background:transparent;font-weight:650;color:var(--ink);padding-right:4px}
.fysel.past{border-color:#e7b54a;background:#fff7e6}
.fy-banner{margin:12px 24px 0;padding:9px 14px;border-radius:10px;background:#fff7e6;border:1px solid #f3d27a;color:#7c4a03;font-size:13px}.fy-banner a{font-weight:700;margin-left:6px}
@media(max-width:820px){.fy-banner{margin:10px 12px 0}}
.pwfield { position: relative; display: block; }
.pwfield input { width: 100%; padding-right: 46px; }
.pweye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: transparent; color: var(--muted); border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.pweye:hover { color: var(--navy-900); background: var(--panel-2); }
.pweye .pweye-x { display: none; } .pweye.on .pweye-x { display: inline; } .pweye.on { color: var(--brand-600); }
.lcard-brand { display: none; }
.lsecure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; font-size: 12px; color: var(--muted); }
.lsecure .ic { color: var(--good); }
.login .panel { position: relative; }
.lfoot { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 11.5px; color: #94a3b8; }
@media (max-width: 900px) {
.login { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--navy-900); }
.login .hero { display: none; }
.login .panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: calc(28px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
background: radial-gradient(520px 320px at 50% -60px, rgba(15,118,110,.40), transparent 70%), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 28px 28px, var(--navy-900); }
.lcard-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #fff; margin: 0 0 22px; }
.lcard-brand .brandmark { width: 64px; height: 64px; }
.lcard-brand b { display: block; font-size: 20px; letter-spacing: -.01em; } .lcard-brand small { display: block; font-size: 12px; color: #b5dccf; letter-spacing: .02em; }
.lcard { width: 100%; max-width: 420px; display: flex; flex-direction: column; }
.lcard > h2, .lcard > p, .lcard > #lmsg, .lcard > form, .lcard > .lsecure, .lcard > .tfa-ic { background: #fff; margin: 0; padding-left: 22px; padding-right: 22px; }
.lcard > h2 { border-radius: 18px 18px 0 0; padding-top: 26px; font-size: 22px; margin-bottom: 0; padding-bottom: 4px; box-shadow: 0 -1px 0 var(--line); }
.lcard > .tfa-ic { display: block; width: auto; height: auto; color: #134e4a; border-radius: 18px 18px 0 0; padding-top: 24px; padding-bottom: 12px; }
.lcard > .tfa-ic .ic { box-sizing: content-box; padding: 15px; border-radius: 16px; background: #eff5ff; }
.lcard > .tfa-ic + h2 { border-radius: 0; padding-top: 0; box-shadow: none; }
.lcard > p { padding-bottom: 18px; font-size: 13.5px; }
.lcard > form { gap: 16px; }
.lcard > .lsecure { border-radius: 0 0 18px 18px; padding-top: 16px; padding-bottom: 20px; margin-top: 0; }
.lcard > form:last-child { border-radius: 0 0 18px 18px; padding-bottom: 22px; }
.lcard { filter: drop-shadow(0 10px 30px rgba(5,59,51,.18)); }
.lcard input { height: 48px; font-size: 16px; border-radius: 10px; padding: 10px 14px; }
.lcard .pwfield input { padding-right: 48px; }
.lcard label.f { font-size: 13px; }
.lcard .btn.big { height: 50px; font-size: 16px; border-radius: 12px; margin-top: 4px; }
.lfoot { position: static; margin-top: auto; padding-top: 24px; color: #7f8fa8; }
}
@media (max-width: 360px) { .lcard > h2, .lcard > p, .lcard > #lmsg, .lcard > form, .lcard > .lsecure, .lcard > .tfa-ic { padding-left: 16px; padding-right: 16px; } }
.me-go, .lo-t { display: none; }
@media (max-width: 820px) {
.side { height: 100vh; height: 100dvh; width: min(300px, 86vw); padding-top: env(safe-area-inset-top); box-shadow: 8px 0 32px rgba(0,0,0,.35); }
.navscroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.me { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--navy-950); border-top: 1px solid rgba(255,255,255,.08); }
.me-link { margin: 0; padding: 10px 12px; gap: 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.me-link .av { width: 40px; height: 40px; font-size: 13px; }
.me b { font-size: 14.5px; } .me small { font-size: 12px; }
.me-go { display: block; flex: none; font-size: 24px; line-height: 1; font-weight: 400; color: #fbbf24; padding-left: 4px; }
.me #logout { width: 100%; height: 44px; gap: 8px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(248,113,113,.35); background: rgba(239,68,68,.08); color: #fca5a5; font-weight: 600; font-size: 14px; }
.me #logout:hover, .me #logout:active { background: rgba(239,68,68,.16); color: #fecaca; }
.me .lo-t { display: inline; }
}
.content.still { animation: none; }
.sc { display: flex; flex-direction: column; }
.sc-off { opacity: .72; background: var(--panel-2); }
.sc-perm { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 8px; }
.pc { font-size: 11px; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; }
.pc.on { background: var(--good-50); border-color: #bfe3d3; color: #14532d; }
.pc.off { background: var(--panel-2); color: var(--muted); text-decoration: line-through; }
.sc-login { font-size: 12px; color: var(--ink-2); background: var(--panel-2); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-act { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-2); }
.sc-sk { margin-bottom: 10px; }
.sf-sec { border-top: 1px solid var(--line-2); padding: 14px 0 6px; }
.sf-sec:first-child { border-top: 0; padding-top: 6px; }
.sf-sec h3 { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--navy-900); margin: 0 0 10px; }
.sf-sec h3 .sp { flex: 1; }
.chip.dis { opacity: .5; }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; }
.sw-row b { display: block; font-size: 13.5px; } .sw-row small { color: var(--muted); font-size: 12px; }
.sw { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; border-radius: 99px; background: #cbd5e1; position: relative; cursor: pointer; transition: background .15s; border: 0; padding: 0; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.sw:checked { background: var(--good); } .sw:checked::after { transform: translateX(18px); }
.sw:focus-visible { box-shadow: 0 0 0 3px rgba(21,128,61,.25); }
.sf-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line-2); padding-top: 14px; margin-top: 8px; }
.sf-foot .sp { flex: 1; }
.res-list { display: grid; gap: 6px; margin: 10px 0; }
.res-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.res-row > i { font-style: normal; font-size: 18px; } .res-row > span { flex: 1; min-width: 0; }
.res-row b { display: block; font-size: 13px; } .res-row small { color: var(--muted); font-size: 11.5px; text-transform: capitalize; }
.res-row.off { opacity: .6; }
.iconbtn.sm { width: 30px; height: 30px; color: var(--muted); } .iconbtn.sm:hover { background: var(--line-2); color: var(--ink); } .iconbtn.bad:hover { color: var(--bad); }
.res-add input { flex: 1; min-width: 0; }
@media (max-width: 820px) { .sc-act .btn { flex: 1; justify-content: center; } .sf-foot .btn { flex: 1; } .sf-foot .sp { display: none; } }
.sc-shops span.nm { background: var(--panel-2); color: var(--muted); }
.res-row .sw { margin: 0 4px; }
@media (max-width: 820px) { .filterbar .search { width: 100%; flex: 1 1 100%; } .filterbar .search input { width: 100%; } }
.rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rl-card { display: flex; flex-direction: column; gap: 10px; }
.rl-card.locked { background: var(--panel-2); }
.rl-h b { font-size: 15px; color: var(--navy-900); }
.rl-m { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); } .rl-m b { color: var(--ink); font-size: 14px; }
.rl-a { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-2); }
.rm-wrap { padding: 0; overflow: auto; }
@media (max-width: 820px) { .rm-wrap { max-height: 75vh; } }
.rm { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.rm th, .rm td { padding: 9px 12px; border-bottom: 1px solid var(--line-2); text-align: center; white-space: nowrap; background: var(--panel); }
.rm th { position: sticky; top: 0; z-index: 2; font-size: 12px; color: var(--navy-900); background: #f1f4f9; }
.rm th:first-child, .rm td:first-child { text-align: left; position: sticky; left: 0; z-index: 1; min-width: 210px; white-space: normal; }
.rm th:first-child { z-index: 3; }
.rm tr.rm-g td { background: var(--panel-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); text-align: left; }
.rm-c { width: 18px; height: 18px; accent-color: var(--brand-600); cursor: pointer; } .rm-c:disabled { cursor: not-allowed; opacity: .6; }
.rm tbody tr:not(.rm-g):hover td { background: #f6f9fd; }
.rl-perms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.rl-pgh { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; } .rl-pgh b { flex: 1; font-size: 13px; color: var(--navy-900); }
.rl-pg .sw-row { padding: 8px 10px; margin-bottom: 6px; } .rl-pg .sw-row b { font-size: 13px; font-weight: 550; }
.vo-banner { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: #eef4ff; border: 1px solid #cfdcf5; color: #134e4a; font-size: 13px; }
.rl-presets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.rl-pgh .btn.sm { padding: 3px 8px; }
.sw-row.is-view { background: #f6f9ff; border-color: #dbe5f5; }
.sw-row.is-view small { display: block; }
.rm tr.rm-v td:first-child { color: #134e4a; }
.vtag { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 99px; background: #eef4ff; color: #134e4a; margin-right: 4px; }
.idle-ov { position: fixed; inset: 0; z-index: 90; background: rgba(3,43,37,.55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; animation: fade .2s ease; }
.idle-card { width: min(420px, 100%); background: #fff; border-radius: 18px; padding: 28px 26px 22px; text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.idle-ic { font-size: 34px; } .idle-card h2 { font-size: 20px; margin: 8px 0 6px; color: var(--navy-900); } .idle-card p { color: var(--muted); margin: 0 0 18px; }
.idle-card #idleS { color: var(--bad); font-size: 18px; }
.idle-bt { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .idle-bt .btn { flex: 1; justify-content: center; min-width: 140px; height: 44px; }
.idle-box { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #eef4ff; border: 1px solid #cfdcf5; color: #134e4a; font-size: 13px; }
.idle-box p { margin: 2px 0 0; color: #334155; }
.modal-box.paymodal{background:#fff}
.pay3{width:100%}
.quick{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pm-upi>div{flex:1;min-width:0}.pm-upi .pm-ref{margin-top:10px}
.pm-upi>div{flex:1 1 auto;width:100%}.pm-upi .pm-ref{display:block;width:100%;max-width:360px;height:42px}
.adv-bar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:linear-gradient(90deg,#ecfdf3,#f3fbf6);border:1px solid #bfe3d3;color:#14532d}
.adv-bar>svg{flex:none;color:#15803d}.adv-bar>div{flex:1;min-width:0}.adv-bar b{display:block;font-size:13.5px}.adv-bar span{font-size:12px;color:#3f6b52}
.adv-bar .btn{background:#15803d;border-color:#15803d}
#pf.paybox{flex-wrap:wrap}.pf-hint{flex-basis:100%;font-size:12.5px;color:var(--ink-2);padding-top:4px}.pf-hint .good{color:#15803d}
.reg-bar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#fef2f2;border:1px solid #f5c2c0;color:#7f1d1d}
.reg-bar>svg{flex:none;color:#b91c1c}.reg-bar>div{flex:1;min-width:0}.reg-bar b{display:block;font-size:13.5px}.reg-bar span{font-size:12px;color:#8a3b3b}
.pt.locked{position:relative}.pt.locked::after{content:"🔒";position:absolute;top:6px;right:8px;font-size:11px}
.login.glogin { position: relative; display: grid; grid-template-columns: 1fr; place-items: center; min-height: 100vh; min-height: 100dvh; overflow: hidden; color: #f1f5f9; background: var(--navy-900); }
.glogin .panel { position: relative; z-index: 1; background: transparent !important; display: grid; place-items: center; width: 100%; padding: 32px 16px 64px; }
.glogin .lcard { --mx: 50%; --my: 0%; position: relative; width: min(420px, 100%); padding: 40px 38px 30px; border-radius: 24px; display: block; filter: none; overflow: hidden;
background: linear-gradient(160deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.04) 100%);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 40px 90px -25px rgba(2,6,23,.75), 0 12px 30px -12px rgba(15,23,42,.5), inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.04);
transition: transform .25s ease-out; animation: gIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes gIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.glogin .lcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; pointer-events: none; background: linear-gradient(90deg, var(--brand), var(--gold)); }
.glogin .lcard::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%); }
.glogin .gglare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.06), transparent 50%); }
.glogin .lcard > *:not(.gglare) { position: relative; z-index: 1; background: transparent !important; padding-left: 0 !important; padding-right: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.glogin .lcard-brand { display: flex !important; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: 0 0 6px; color: #fff; }
.glogin .lcard-brand .brandmark { width: 68px; height: 68px; padding: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.glogin .lcard-brand b { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #fbbf24; font-weight: 700; }
.glogin .lcard-brand small { display: none; }
.glogin .lcard h2 { text-align: center; font-size: 28px; font-weight: 750; letter-spacing: -.02em; margin: 6px 0 6px; padding: 0 !important; color: #fff; }
.glogin .lcard > p { text-align: center; color: rgba(226,232,240,.82) !important; font-size: 14px; margin: 0 0 26px; padding: 0 !important; }
.glogin .lcard > p b { color: #fff; }
.glogin #lf, .glogin #tf { gap: 16px; padding: 0 !important; }
.gf { position: relative; display: block; }
.gf .pwfield { display: block; position: relative; }
.gf input { width: 100%; height: 56px; color: #fff; font-size: 15px; outline: none; border-radius: 12px !important; padding: 21px 46px 6px 48px !important;
background: rgba(3,43,37,.55) !important; border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; transition: border-color .2s, background .2s, box-shadow .2s; }
.gf input:hover { border-color: rgba(255,255,255,.36); }
.gf input:focus { border-color: #5eead4; background: rgba(3,43,37,.7) !important; box-shadow: 0 0 0 3px rgba(15,118,110,.35) !important; }
.gf input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; caret-color: #fff; }
.gf input + span { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); font-size: 15px; color: rgba(226,232,240,.72); pointer-events: none; transition: all .18s ease; }
.gf input:focus + span, .gf input:not(:placeholder-shown) + span { top: 15px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #99f6e4; font-weight: 650; }
.gf .gic { position: absolute; top: 50%; transform: translateY(-50%); color: rgba(226,232,240,.7); display: grid; pointer-events: none; transition: color .2s; }
.gf .gic-l { left: 17px; }
.gf:focus-within .gic { color: #99f6e4; }
.glogin .pweye { right: 8px; top: 50%; width: 38px; height: 38px; color: rgba(226,232,240,.75); border-radius: 10px; }
.glogin .pweye:hover { background: rgba(255,255,255,.12); color: #fff; }
.glogin .pweye.on { color: #99f6e4; }
.glogin .lcard .btn.big { position: relative; overflow: hidden; width: 100%; height: 54px; border-radius: 12px; border: 0; margin-top: 10px; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .02em;
background: var(--brand);
box-shadow: 0 12px 26px -10px rgba(15,118,110,.9), inset 0 1px 0 rgba(255,255,255,.22); transition: background .2s, transform .15s, box-shadow .2s; }
.glogin .lcard .btn.big:hover { background: #0d9488; transform: translateY(-1px); box-shadow: 0 16px 32px -10px rgba(15,118,110,.95), inset 0 1px 0 rgba(255,255,255,.22); }
.glogin .lcard .btn.big:active { transform: translateY(1px); }
.glogin .lcard .btn.big:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.glogin .lcard .btn.big:disabled { opacity: .7; }
.glogin .lsecure { color: rgba(226,232,240,.72); margin-top: 22px; padding: 16px 0 0 !important; font-size: 12.5px; border-top: 1px solid rgba(255,255,255,.12); }
.glogin .lsecure .ic { color: #fbbf24; }
.glogin .lfoot { position: absolute; bottom: 16px; color: rgba(226,232,240,.55); }
.glogin label.f { color: rgba(226,232,240,.85); font-weight: 600; }
.glogin .lcard label.f input { height: 56px; border-radius: 12px; color: #fff; text-align: center; font-size: 20px; letter-spacing: .3em; background: rgba(3,43,37,.55); border: 1px solid rgba(255,255,255,.16); }
.glogin .lcard label.f input:focus { border-color: #5eead4; box-shadow: 0 0 0 3px rgba(15,118,110,.35); outline: none; }
.glogin .tfa-ic { color: #fbbf24; text-align: center; }
.glogin .tfa-ic .ic { box-sizing: content-box; padding: 14px; border-radius: 16px; background: rgba(3,43,37,.55); border: 1px solid rgba(255,255,255,.14); }
.glogin .lcard .small.muted, .glogin .lcard .muted { color: rgba(226,232,240,.75) !important; }
.glogin .btn.ghost { color: #f1f5f9; background: rgba(15,23,42,.3); border: 1px solid rgba(255,255,255,.2); }
.glogin .btn.ghost:hover { background: rgba(15,23,42,.45); }
.glogin .idle-box, .glogin .paused-box { border-radius: 12px !important; margin-bottom: 14px; }
@media (max-width: 900px) {
.glogin .panel { justify-content: center; padding: 24px 14px 60px; }
.glogin .lcard { padding: 34px 22px 24px; }
}
@media (prefers-reduced-motion: reduce) { .glogin .lcard { animation: none; } }
.tx-bar { display: flex; flex-direction: column; gap: 12px; }
.tx-pick { gap: 14px; align-items: flex-end; }
.tx-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-chip { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.tx-chip.good { background: var(--good-50); color: var(--good); border-color: #bfe6cd; }
.tx-chip.bad { background: var(--bad-50); color: var(--bad); border-color: #f3c7c6; }
.tx-chip.info { background: var(--info-50); color: var(--info); }
.tx-chip.on { box-shadow: 0 0 0 2px var(--brand); border-color: var(--brand); }
.tx-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line-2); }
.tx-status .sp { flex: 1; }
.tx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tx-tabs button { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.tx-tabs button.on { color: var(--ink); border-bottom-color: var(--brand); }
.tx-sec { margin-bottom: 14px; }
.tx-h { margin: 18px 0 8px; font-size: 14px; }
.tx-notes { display: flex; flex-direction: column; gap: 10px; }
.tx-note { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.tx-note.good { border-left-color: var(--good); } .tx-note.bad { border-left-color: var(--bad); } .tx-note.info { border-left-color: var(--info); }
.tx-note p { margin: 8px 0 6px; white-space: normal; }
.tx-note .sp { flex: 1; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .02em; }
.bad-t { color: var(--bad); }
.ca-card { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: linear-gradient(135deg, var(--brand-50), #fff); border: 1px solid var(--brand-100); border-radius: 12px; padding: 14px 16px; margin: 16px 0 6px; }
.ca-card p { margin: 2px 0 0; }
.ph h1 .ic { vertical-align: -3px; color: var(--gold); }
.ai-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ai-shop { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 3px 4px 3px 9px; color: var(--muted); }
.ai-shop select { border: 0; background: none; font: inherit; font-weight: 600; color: var(--navy-900); padding: 4px; max-width: 220px; }
.ai-dates { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); } .ai-dates input { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; font: inherit; }
.ai-nav { position: sticky; top: 0; z-index: 6; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin: -6px 0 10px; background: var(--bg); scrollbar-width: none; }
.ai-nav::-webkit-scrollbar { display: none; }
.ai-nav a { flex: none; padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; font-weight: 650; text-decoration: none; }
.ai-nav a:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-50); }
.ai-anchor, .ai-card[id], .ai-hero { scroll-margin-top: 64px; }
.ai-card { margin-bottom: 14px; } .dgrid > .ai-card { margin-bottom: 0; }
.ai-card .ch h2 .ic { color: var(--gold); vertical-align: -3px; }
.ai-hero { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr); gap: 22px; align-items: center; padding: 20px 24px; border-radius: 14px; margin-bottom: 14px; color: #ecfdf5;
background: radial-gradient(120% 140% at 0% 0%, #0f766e 0%, #064e3b 45%, #053b33 100%); border-bottom: 3px solid #f59e0b; box-shadow: 0 14px 30px -18px rgba(5,59,51,.6); }
.ai-hero-l { display: flex; align-items: center; gap: 18px; }
.ai-ring { position: relative; width: 128px; height: 128px; flex: none; }
.ai-ring svg { transform: rotate(-90deg); } .ai-ring .rg-bg { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 11; } .ai-ring .rg-fg { fill: none; stroke-width: 11; stroke-linecap: round; }
.ai-ring .rg-t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .ai-ring .rg-t b { font-size: 34px; line-height: 1; color: #fff; } .ai-ring .rg-t span { font-size: 11px; color: #a7f3d0; margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }
.ai-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #fcd34d; font-weight: 700; }
.ai-hero-t h2 { color: #fff; margin: 2px 0 6px; font-size: 22px; } .ai-hero-t p { margin: 0; color: #c7eadf; font-size: 13.5px; line-height: 1.45; } .ai-hero-t b { color: #fff; }
.ai-hp { display: grid; gap: 9px; }
.ai-hp .hp { display: grid; grid-template-columns: 120px minmax(60px, 1fr) 52px; grid-template-areas: "n m s" ". e e"; column-gap: 10px; align-items: center; font-size: 13px; }
.ai-hp .hp > span { grid-area: n; color: #d1fae5; font-weight: 600; } .ai-hp .hp .meter { grid-area: m; background: rgba(255,255,255,.14); }
.ai-hp .hp .meter > i { background: linear-gradient(90deg, #34d399, #fbbf24); } .ai-hp .hp b { grid-area: s; text-align: right; color: #fff; } .ai-hp .hp b small { color: #a7f3d0; font-weight: 500; }
.ai-hp .hp em { grid-area: e; font-style: normal; font-size: 11.5px; color: #9fd8c6; }
.ai-k { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ai-k .kpi .small { line-height: 1.55; } .ai-k .kpi .small b.bad { color: var(--bad); }
.ai-ins { border-top: 3px solid var(--gold); }
.ai-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ai-i { display: grid; grid-template-columns: 22px 18px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 10px; background: #f3faf7; border-left: 3px solid var(--brand); }
.ai-i.bad { background: #fdf3f3; border-left-color: var(--bad); } .ai-i.warn { background: #fffaf0; border-left-color: var(--gold); } .ai-i.good { background: #eef8f3; border-left-color: var(--good); }
.ai-n { width: 22px; height: 22px; border-radius: 50%; background: var(--navy-900); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.ai-ic { color: var(--brand-600); display: grid; } .ai-i.bad .ai-ic { color: var(--bad); } .ai-i.warn .ai-ic { color: var(--gold-600); } .ai-i.good .ai-ic { color: var(--good); }
.ai-t { min-width: 0; display: grid; gap: 2px; } .ai-t b { color: var(--navy-900); } .ai-t span { font-size: 13px; color: var(--ink-2); }
.ai-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .ai-imp { font-weight: 750; color: var(--navy-900); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-act .btn { white-space: nowrap; }
.btn.ai-wa { background: #16a34a; border-color: #16a34a; color: #fff; } .btn.ai-wa:hover { background: #15803d; }
.chart .hist-line { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart .hist-area { fill: rgba(15,118,110,.08); }
.chart .fc-line { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-dasharray: 6 5; stroke-linecap: round; }
.chart .fc-band { fill: rgba(217,119,6,.16); stroke: none; } .chart .fc-zone { fill: rgba(217,119,6,.04); }
.chart .fc-tag { fill: var(--gold-600); font-weight: 600; } .chart .fc-dot { fill: #fff; stroke: var(--navy-900); stroke-width: 2; } .chart .fc-dot.hidden { display: none; }
.legend .lg-dash { background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 7px) !important; height: 3px !important; vertical-align: 2px !important; width: 16px !important; }
.ai-sep { border-top: 1px solid var(--line); margin: 6px 0; }
.ai-h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 8px; font-weight: 700; } .ai-h3 .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ai-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 90px; align-items: end; }
.ai-wd div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.ai-wd i { width: 100%; max-width: 26px; background: var(--brand); border-radius: 4px 4px 0 0; opacity: .85; } .ai-wd span { font-size: 11px; color: var(--muted); font-weight: 600; }
.ai-heat { display: grid; grid-template-columns: 34px repeat(var(--cols), minmax(0, 1fr)); gap: 3px; align-items: center; }
.ai-heat i { display: block; aspect-ratio: 1.3; min-height: 12px; border-radius: 3px; background: #eef4f2; background-image: linear-gradient(rgba(15,118,110,var(--a)), rgba(15,118,110,var(--a))); }
.ai-heat .hh { font-size: 10.5px; color: var(--muted); white-space: nowrap; } .ai-heat .hd { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ai-heat-k { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 10px; } .ai-heat-k i { width: 90px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(15,118,110,.12), rgba(15,118,110,1)); }
.ai-peaks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ai-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.ai-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; } .ai-stats.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ai-stats div { background: #f3f8f6; border-radius: 9px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; } .ai-stats b { font-size: 18px; color: var(--navy-900); font-variant-numeric: tabular-nums; } .ai-stats span { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.ai-stats div.warn { background: #fffaf0; } .ai-stats div.warn b { color: var(--gold-600); } .ai-stats div.bad { background: #fdf3f3; } .ai-stats div.bad b { color: var(--bad); }
.ai-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ai-split div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; } .ai-split span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .ai-split b { font-size: 19px; color: var(--navy-900); } .ai-split small { color: var(--muted); }
.ai-mcell { display: flex; align-items: center; gap: 8px; min-width: 120px; } .ai-mcell .meter { flex: 1; height: 6px; } .ai-mcell span { font-size: 12px; font-weight: 650; min-width: 42px; text-align: right; color: var(--ink-2); }
.meter.low > i { background: linear-gradient(90deg, #f87171, #b91c1c); }
.ai-age { height: 16px; }
.ai-seg { display: grid; gap: 7px; } .ai-seg .sg { display: grid; grid-template-columns: 120px 1fr 30px 70px; gap: 8px; align-items: center; font-size: 13px; } .ai-seg .sg b { text-align: right; } .ai-seg .sg small { text-align: right; }
button.ai-row { background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; display: grid; gap: 1px; min-width: 0; }
button.ai-row:hover b { color: var(--brand-700); text-decoration: underline; } button.ai-row.row { display: flex; }
.ai-ask form { gap: 8px; } .ai-ask input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-answer { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #f3f8f6; border-left: 3px solid var(--gold); } .ai-answer p { margin: 6px 0 0; }
.ai-how { margin-bottom: 14px; } .ai-how summary { cursor: pointer; } .ai-how ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-2); }
@media (max-width: 1100px) { .ai-hero { grid-template-columns: 1fr; } .ai-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
.ai-ctl { justify-content: flex-start; } .ai-shop { display: none; } .ai-hero { padding: 16px; } .ai-hero-l { gap: 12px; } .ai-ring { width: 104px; height: 104px; } .ai-ring svg { width: 104px; height: 104px; } .ai-ring .rg-t b { font-size: 28px; }
.ai-hp .hp { grid-template-columns: 100px 1fr 46px; } .ai-k { grid-template-columns: 1fr 1fr; } .ai-k .kpi .v { font-size: 20px; }
.ai-i { grid-template-columns: 22px minmax(0, 1fr) auto; } .ai-i .ai-ic { display: none; } .ai-i .ai-act { grid-column: 2 / -1; } .ai-i .ai-act:empty { display: none; }
.ai-stats.c4 { grid-template-columns: 1fr 1fr; } .ai-seg .sg { grid-template-columns: 100px 1fr 26px; } .ai-seg .sg small { display: none; }
}
@media print {
body.printing-ai * { visibility: visible !important; }
body.printing-ai .side, body.printing-ai .top, body.printing-ai .fy-banner, body.printing-ai .ai-noprint, body.printing-ai .scrim, body.printing-ai #net { display: none !important; }
body.printing-ai .shell { display: block; } body.printing-ai .main, body.printing-ai #page { margin: 0; padding: 0; overflow: visible; }
body.printing-ai { background: #fff; } body.printing-ai .card { box-shadow: none; break-inside: avoid; } body.printing-ai .tbl { max-height: none; overflow: visible; box-shadow: none; }
body.printing-ai .ai-hero, body.printing-ai .ai-i, body.printing-ai .ai-stats div, body.printing-ai .meter, body.printing-ai .mixbar, body.printing-ai .ai-heat i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.printing-ai .dgrid.g-main, body.printing-ai .dgrid.g-2, body.printing-ai .dgrid.g-3 { grid-template-columns: 1fr; }
}
.side { background: #053b33; border-right-color: #032b25; }
.side .grp { color: #6fc7ad; }
.side a { color: #cdeee4; }
.side a.on { background: #0f766e; color: #fff; box-shadow: inset 3px 0 0 #fbbf24; }
.side a.on .ic { color: #fff; }
.logo small, .me small { color: #7fc4ae; }
.av { background: #0b5d4b; color: #fef3c7; box-shadow: inset 0 0 0 1.5px #f59e0b; }
.btn, .card, .tile, .mk, .qa, .pick-card { transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .15s, border-color .15s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.card.kpi:hover, .mk:hover, .pick-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(5,59,51,.28); }
.kgrid .kpi.k2 { --kb: #047857; --kt: #fff; background: var(--kb); color: var(--kt); border: 0; border-left: 0; padding-left: 18px; box-shadow: 0 10px 24px -14px var(--kb); }
.kgrid .kpi.k2.t-info { --kb: #0e7490; }
.kgrid .kpi.k2.t-accent { --kb: #f59e0b; --kt: #3b2300; }
.kgrid .kpi.k2.t-good { --kb: #065f46; }
.kgrid .kpi.k2 .v, .kgrid .kpi.k2 .l, .kgrid .kpi.k2 .small, .kgrid .kpi.k2 .muted { color: var(--kt) !important; }
.kgrid .kpi.k2 .l, .kgrid .kpi.k2 .small { opacity: .88; }
.kgrid .kpi.k2 .ki { background: rgba(255,255,255,.2); color: var(--kt); }
.kgrid .kpi.k2 .dl { background: rgba(255,255,255,.2) !important; color: var(--kt) !important; }
.kgrid .kpi.k2 .spark polyline { stroke: var(--kt); } .kgrid .kpi.k2 .spark polygon { fill: var(--kt); opacity: .15; } .kgrid .kpi.k2 .spark circle { fill: var(--kt); }
.doc .dh { border-bottom-color: #111827; } .doc .dh h1, .doc .totals .g { color: #111827; } .doc .totals .g { border-top-color: #111827; } .doc table th { background: #f3f4f6; color: #111827; }
.fx .content { animation: none; }
@media (prefers-reduced-motion: reduce) { .btn:active:not(:disabled) { transform: none; } .card.kpi:hover, .mk:hover, .pick-card:hover { transform: none; } }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/jakarta.woff2") format("woff2"); }
:root { --font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --font-display: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif; }
html, body { font-family: var(--font); font-feature-settings: "cv11", "ss01", "ss03"; text-rendering: optimizeLegibility; }
h1, h2, .ph h1, .lcard h2, .dash-hero h1, .banner h1, .logo b, .ch h2, .card > h2 { font-family: var(--font-display); letter-spacing: -.015em; }
h1 { font-weight: 750; letter-spacing: -.025em; } h2 { font-weight: 700; }
.kpi .v, .dt b, .mk b, .tot .g, td, .v, .amt { font-variant-numeric: tabular-nums; }
.kpi .v, .dt b, .mk b { font-family: var(--font-display); letter-spacing: -.025em; }
.dash-hero { border-radius: 20px; padding: 28px 30px 24px; border-bottom: 0; isolation: isolate;
background: radial-gradient(520px 260px at 100% 0%, rgba(251,191,36,.20), transparent 70%), radial-gradient(620px 300px at 0% 110%, rgba(45,212,191,.22), transparent 70%), linear-gradient(135deg, #065f46 0%, #053b33 55%, #032b25 100%);
box-shadow: 0 24px 50px -24px rgba(3,43,37,.65), inset 0 1px 0 rgba(255,255,255,.08); }
.dash-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px) 0 0 / 18px 18px;
-webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 85%); mask-image: linear-gradient(90deg, transparent 30%, #000 85%); }
.dash-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #2dd4bf, #fbbf24); }
.dash-hero h1 { font-size: 32px; font-weight: 750; letter-spacing: -.03em; margin: 6px 0 4px; }
.dh-date { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; letter-spacing: .12em; padding: 4px 10px; border-radius: 999px; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.25); }
.dh-date::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.25); }
.dh-sub { font-size: 14px; color: #a7e3d2; }
.seg.dark { background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.1); padding: 4px; border-radius: 10px; } .seg.dark button { border-radius: 7px; padding: 6px 12px; }
.dh-today { gap: 14px; margin-top: 22px; }
.dt { position: relative; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); transition: background .2s, transform .2s; }
.dt:hover { background: rgba(255,255,255,.11); transform: translateY(-2px); }
.dt span { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: #a7e3d2; }
.dt b { font-size: 28px; font-weight: 750; margin: 4px 0 2px; } .dt small { color: #8fcab9; }
.dh-actions { gap: 10px; margin-top: 18px; }
.qa { padding: 10px 16px; border-radius: 12px; background: #fff; border: 0; color: #053b33; font-weight: 650; box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); }
.qa::before { content: none; } .qa .ic { color: #0f766e; }
.qa:hover { background: #ecfdf7; transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(0,0,0,.5); }
.dh-actions .qa:first-child { background: #fbbf24; color: #3b2300; } .dh-actions .qa:first-child .ic { color: #3b2300; } .dh-actions .qa:first-child:hover { background: #fcd34d; }
.attn { border-radius: 16px; padding: 14px 16px; gap: 8px; border: 1px solid var(--line); box-shadow: 0 8px 24px -18px rgba(5,59,51,.35); }
.attn-h { font-size: 11px; letter-spacing: .1em; color: #0f766e; }
.attn-i { border-left: 0; border-radius: 12px; padding: 10px 12px; background: #f3fbf8; border: 1px solid #dcefe8; }
.attn-i > .ic { box-sizing: content-box; padding: 7px; border-radius: 9px; background: #d1fae5; color: #047857; }
.attn-i.warn { background: #fffbeb; border-color: #fde9b8; } .attn-i.warn > .ic { background: #fef3c7; color: #b45309; }
.attn-i.bad { background: #fef2f2; border-color: #fbd5d5; } .attn-i.bad > .ic { background: #fee2e2; color: #b91c1c; }
.attn-i em { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.kgrid { gap: 16px; } .kgrid .kpi.k2 { border-radius: 16px; padding: 18px 20px; }
.kgrid .kpi.k2 .v { font-size: 30px; font-weight: 750; }
.kgrid .kpi.k2 .l { font-size: 11.5px; letter-spacing: .08em; }
.mini-k { gap: 12px; } .mk { border-radius: 14px; padding: 13px 15px; }
.mk > .ic { width: 36px; height: 36px; padding: 8px; border-radius: 10px; }
.mini-k .mk:nth-child(5n+2) > .ic { background: #e0f2fe; color: #0369a1; } .mini-k .mk:nth-child(5n+3) > .ic { background: #fef3c7; color: #b45309; }
.mini-k .mk:nth-child(5n+5) > .ic { background: #ede9fe; color: #6d28d9; }
.mk b { font-size: 18px; }
.dgrid { gap: 16px; } .dgrid > .card { border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(5,59,51,.04), 0 10px 30px -22px rgba(5,59,51,.35); }
.dgrid .ch { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.dgrid .ch h2 { font-size: 16px; }
.peak { background: #fffbeb; color: #92400e; border: 1px solid #fde9b8; }
.bl:first-child .rk { background: #fbbf24; color: #3b2300; }
.okstate { border-radius: 12px; background: #ecfdf5; border: 1px dashed #a7f3d0; }
@media (max-width: 560px) { .dash-hero { padding: 20px 18px 18px; border-radius: 16px; } .dash-hero h1 { font-size: 24px; } .dt b { font-size: 21px; } .kgrid .kpi.k2 .v { font-size: 22px; } }
.main { background: var(--bg); position: relative; z-index: 0; }
.side { background: radial-gradient(260px 220px at 0% 0%, rgba(45,212,191,.16), transparent 70%), radial-gradient(240px 260px at 100% 100%, rgba(251,191,36,.10), transparent 70%), linear-gradient(180deg, #064e3b 0%, #053b33 45%, #022620 100%);
border-right: 1px solid rgba(255,255,255,.06); box-shadow: inset -1px 0 0 rgba(255,255,255,.05), 8px 0 30px -20px rgba(0,0,0,.6); color: #cdeee4; }
.side::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent); }
.side .logo { position: relative; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 4px; }
.side .logo .brandmark { filter: drop-shadow(0 4px 12px rgba(45,212,191,.35)); }
.side .grp { color: #5eead4; letter-spacing: .12em; opacity: .85; }
.side a { position: relative; color: #cdeee4; border-radius: 11px; }
.side a .ic { opacity: .8; }
.side a:hover { background: rgba(255,255,255,.07); color: #fff; }
.side a.on { color: #fff; background: linear-gradient(90deg, #14b8a6, #047857); box-shadow: 0 8px 20px -8px rgba(20,184,166,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.side a.on .ic { color: #fff; opacity: 1; }
.side .me { background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.08); }
.side .me .av { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #3b2300; box-shadow: 0 4px 12px -4px rgba(251,191,36,.7); }
.side .me small { color: #6fc7ad; }
.side .iconbtn:hover { background: rgba(255,255,255,.08); }
.navscroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.navscroll::-webkit-scrollbar { width: 6px; } .navscroll::-webkit-scrollbar-track { background: transparent; }
.navscroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 99px; } .navscroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); }
.navscroll::-webkit-scrollbar-button { display: none; height: 0; }
.tx-due { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-prof { align-self: end; padding-bottom: 8px; }
.tx-fy { align-self: center; }
.tx-recon { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.tx-reply { margin: 6px 0 0 14px; padding: 6px 10px; border-left: 2px solid var(--line); background: var(--panel-2); border-radius: 6px; font-size: 13px; }
.tx-rform { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.tx-rform input { flex: 1; min-width: 200px; }
.grid.g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.nw { white-space: nowrap; }
.navscroll { position: relative; }
.nav-ind { position: absolute; z-index: 0; border-radius: 11px; pointer-events: none; background: linear-gradient(90deg, #14b8a6, #047857); box-shadow: 0 8px 20px -8px rgba(20,184,166,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.navscroll a, .navscroll .grp { position: relative; z-index: 1; }
.fx-nav .side a.on { background: transparent; box-shadow: none; }
.fx-fly { position: fixed; left: 0; top: 0; z-index: 70; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; pointer-events: none;
background: #fbbf24; color: #3b2300; box-shadow: 0 8px 20px -6px rgba(245,158,11,.8); }
.fx-fly svg { width: 16px; height: 16px; }
.toast:not(.err):not(.hidden)::before { content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: #34d399; color: #053b33; font-size: 11px; font-weight: 800; vertical-align: -3px; }
.ai-list .ai-i { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.ai-list .ai-i:hover { transform: translateX(3px); box-shadow: 0 8px 22px -14px rgba(5,59,51,.4); }
@media (prefers-reduced-motion: reduce) { .ai-list .ai-i:hover { transform: none; } }
.fx-fly .t2-av { width: auto; height: auto; background: none !important; color: inherit; font-size: 12px; font-weight: 800; box-shadow: none; }
:root {
--ink: #0f2e24; --ink-2: #355a4d; --muted: #62807a; --line: #dcefe7; --line-2: #e9f5f0;
--bg: #f7fbf9; --panel: #ffffff; --panel-2: #f3faf7;
--brand: #059669; --brand-600: #047857; --brand-700: #065f46; --brand-50: #ecfdf5; --brand-100: #d1fae5;
--navy-950: #0a241c; --navy-900: #0f2e24; --navy-800: #1d4237; --navy-700: #355a4d;
--gold: #d97706; --gold-600: #b45309; --gold-50: #fffbeb; --gold-100: #fef3c7; --accent: #d97706; --accent-50: #fffbeb;
--glass: #ffffff; --glass-edge: #dcefe7; --glass-sh: 0 1px 2px rgba(15,46,36,.05);
--holo: #d1fae5; --holo-ink: #065f46;
--sh-1: 0 1px 2px rgba(15,46,36,.05); --sh-2: 0 1px 2px rgba(15,46,36,.05), 0 8px 20px -12px rgba(15,46,36,.18);
}
html, body { background: #f7fbf9 !important; color: var(--ink); }
.card, .tbl, .mk, .attn, .pick-card, .t2, .tile, .modal-box, .cart2, .top, .side, .dash-hero, .banner, .ai-i, .ai-hero, .seg, .tabs, .glogin .lcard {
backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.card, .tbl, .mk, .attn, .pick-card, .t2, .tile, .cart2, .ai-i, .ai-hero, .modal-box { background: #fff !important; border: 1px solid var(--line) !important; box-shadow: var(--sh-1) !important; }
.card, .tbl, .attn, .pick-card, .cart2, .ai-hero { border-radius: 14px !important; } .modal-box { border-radius: 16px !important; }
.mk, .t2, .tile, .ai-i { border-radius: 12px !important; }
.card.kpi:hover, .mk:hover, .pick-card:hover, .t2:hover { transform: translateY(-2px); box-shadow: var(--sh-2) !important; border-color: #b7e4d2 !important; }
th { background: #f3faf7 !important; color: var(--muted) !important; }
tbody tr:hover td { background: #f3faf7 !important; }
.seg, .tabs { background: #e9f5f0 !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
.tabs button.on, .chip.on, .seg button.on, .seg.dark button.on { background: #059669 !important; color: #fff !important; border-color: #059669 !important; }
input, select, textarea { background: #fff; border-color: var(--line); }
input:focus, select:focus, textarea:focus { border-color: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.25); background: #fff; }
.btn { background: #fff; border-color: var(--line); border-radius: 10px; } .btn:hover { background: #f3faf7; }
.btn.pri, .cart2 .charge, .glogin .lcard .btn.big { background: #059669 !important; border-color: #059669 !important; color: #fff !important; box-shadow: 0 1px 2px rgba(5,150,105,.3) !important; }
.btn.pri:hover, .cart2 .charge:hover:not(:disabled), .glogin .lcard .btn.big:hover { background: #047857 !important; border-color: #047857 !important; color: #fff !important; }
.cart2 .charge:disabled { background: #e9f5f0 !important; color: #8aa79e !important; border-color: #e9f5f0 !important; }
.pill { background: #e9f5f0; color: var(--ink-2); } .pill.brand { background: #d1fae5; color: #047857; }
.alert { background: #f3faf7; border-color: var(--line); color: var(--ink); border-radius: 12px; }
.toast { background: #0f2e24; border-radius: 12px; box-shadow: 0 10px 24px -12px rgba(15,46,36,.5); }
.modal { background: rgba(15,46,36,.28); backdrop-filter: none; }
.modal-box.paymodal { background: #fff !important; }
.chart .tip { background: #0f2e24; } .chart .grid { stroke: #e9f5f0; }
.top { background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; }
.shopsel, .fysel { background: #fff; border-color: var(--line); color: #059669; }
.side { background: #f0faf6 !important; border-right: 1px solid var(--line) !important; box-shadow: none !important; color: var(--ink-2) !important; }
.side .logo { border-bottom: 1px solid var(--line) !important; } .side .logo b { color: var(--ink); } .side .logo small, .logo small { color: var(--muted) !important; }
.side .grp { color: #059669 !important; }
.side a { color: var(--ink-2) !important; } .side a .ic { opacity: .8; }
.side a:hover { background: #e3f6ee !important; color: var(--ink) !important; }
.side a.on { background: #d1fae5 !important; color: #047857 !important; box-shadow: none !important; font-weight: 650; }
.side a.on .ic { color: #047857 !important; }
.fx-nav .side a.on { background: transparent !important; }
.nav-ind { background: #d1fae5 !important; box-shadow: none !important; }
.side .me { background: #fff !important; border-top: 1px solid var(--line) !important; } .side .me b { color: var(--ink); } .side .me small { color: var(--muted) !important; }
.side .me .av, .av { background: #d1fae5 !important; color: #047857 !important; box-shadow: none !important; }
.side .iconbtn { color: var(--ink-2); } .side .iconbtn:hover { background: #e3f6ee; }
.navscroll { scrollbar-color: #cde8dd transparent; } .navscroll::-webkit-scrollbar-thumb { background: #cde8dd; }
.dash-hero { background: #e6f7f0 !important; border: 1px solid #ccede0 !important; box-shadow: none !important; color: var(--ink) !important; }
.dash-hero::before, .dash-hero::after { display: none !important; }
.dh-date { color: #047857; background: #fff; border-color: #ccede0; } .dh-date::before { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.dh-sub { color: var(--muted); }
.seg.dark { background: #fff !important; } .seg.dark button { color: var(--ink-2); }
.dt { background: #fff; border: 1px solid #ccede0; backdrop-filter: none; } .dt:hover { background: #fff; border-color: #a7dfc8; }
.dt span { color: var(--muted); } .dt b { color: var(--ink); } .dt small { color: var(--muted); } .dt em { color: #b45309; }
.qa { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line) !important; box-shadow: none !important; } .qa .ic { color: #059669 !important; } .qa:hover { background: #f3faf7 !important; }
.dh-actions .qa:first-child { background: #059669 !important; color: #fff !important; border-color: #059669 !important; } .dh-actions .qa:first-child .ic { color: #fff !important; }
.dh-actions .qa:first-child:hover { background: #047857 !important; }
.attn-h { color: #047857; }
.attn-i { background: #f3faf7 !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.attn-i > .ic { background: #d1fae5; color: #047857; } .attn-i.warn { background: #fffbeb !important; border-color: #fde9b8 !important; } .attn-i.warn > .ic { background: #fef3c7; color: #b45309; }
.attn-i.bad { background: #fff5f6 !important; border-color: #fbd5db !important; } .attn-i.bad > .ic { background: #ffe4e6; color: #be123c; }
.attn-i em { background: #fff; color: #047857; border-color: var(--line); }
.kgrid .kpi.k2 { --kb: #d1fae5; --kt: #065f46; background: var(--kb) !important; color: var(--kt) !important; border: 1px solid transparent !important; box-shadow: none !important; }
.kgrid .kpi.k2:nth-child(1) { --kb: #d1fae5; --kt: #065f46 !important; }
.kgrid .kpi.k2:nth-child(2) { --kb: #ccfbf1; --kt: #115e59; }
.kgrid .kpi.k2:nth-child(3) { --kb: #fef9c3; --kt: #854d0e; }
.kgrid .kpi.k2:nth-child(4) { --kb: #ffe4e6; --kt: #9f1239; }
.kgrid .kpi.k2 .v, .kgrid .kpi.k2 .l, .kgrid .kpi.k2 .small, .kgrid .kpi.k2 .muted { color: var(--kt) !important; }
.kgrid .kpi.k2 .ki, .kgrid .kpi.k2:first-child .ki { background: rgba(255,255,255,.7) !important; color: var(--kt) !important; }
.kgrid .kpi.k2 .dl, .kgrid .kpi.k2:first-child .dl { background: rgba(255,255,255,.7) !important; color: var(--kt) !important; }
.kgrid .kpi.k2 .spark polyline, .kgrid .kpi.k2:first-child .spark polyline { stroke: var(--kt) !important; }
.kgrid .kpi.k2 .spark polygon, .kgrid .kpi.k2:first-child .spark polygon { fill: var(--kt) !important; opacity: .12; }
.kgrid .kpi.k2 .spark circle, .kgrid .kpi.k2:first-child .spark circle { fill: var(--kt) !important; }
.kgrid .kpi.k2:hover { border-color: rgba(15,46,36,.1) !important; }
.mk > .ic { background: #d1fae5; color: #047857; }
.mini-k .mk:nth-child(5n+2) > .ic { background: #ccfbf1; color: #115e59; } .mini-k .mk:nth-child(5n+3) > .ic { background: #fef9c3; color: #854d0e; }
.mini-k .mk:nth-child(5n+4) > .ic { background: #ffe4e6; color: #9f1239; } .mini-k .mk:nth-child(5n+5) > .ic { background: #e0f2fe; color: #075985; }
.dgrid .ch { border-bottom-color: var(--line); }
.peak { background: #fef9c3; color: #854d0e; border-color: #fdeb9b; }
.bl-b { background: #e9f5f0; } .bl-b i, .ai-hp .hp .meter > i { background: #10b981 !important; }
.bl:first-child .rk { background: #d1fae5 !important; color: #047857 !important; }
.okstate { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.cart2 .cart-h { background: #d1fae5 !important; border-bottom: 1px solid #b7e4d2; border-radius: 14px 14px 0 0; }
.cart2 .cart-h, .cart2 .cart-h * { color: #065f46 !important; }
.cart-fab { background: #059669; }
.fx-fly { background: #059669; color: #fff; box-shadow: 0 6px 14px -6px rgba(5,150,105,.7); }
.ai-hero { border-bottom: 1px solid var(--line) !important; } .ai-hero::after { display: none !important; }
.ai-eyebrow { color: #047857; } .ai-hero-t h2, .ai-hero-t b, .ai-ring .rg-t b { color: var(--ink); } .ai-hero-t p, .ai-ring .rg-t span { color: var(--muted); }
.ai-ring .rg-bg { stroke: #e9f5f0; } .ai-hp .hp .meter { background: #e9f5f0; }
.login.glogin { background: #f7fbf9 !important; }
.glogin .lcard { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: 0 10px 30px -18px rgba(15,46,36,.3) !important; }
.glogin .lcard::before { background: #059669 !important; height: 4px; } .glogin .lcard::after { display: none; } .glogin .gglare { display: none; }
.glogin .lcard h2 { color: var(--ink) !important; } .glogin .lcard-brand b { color: #059669; }
.gf input { background: #f7fbf9 !important; border-color: var(--line) !important; color: var(--ink) !important; box-shadow: none !important; }
.gf input:focus { background: #fff !important; border-color: #34d399 !important; box-shadow: 0 0 0 3px rgba(52,211,153,.25) !important; }
.gf input:focus + span, .gf input:not(:placeholder-shown) + span, .gf:focus-within .gic, .glogin .pweye.on, .glogin .lsecure .ic, .glogin .tfa-ic { color: #059669 !important; }
.glogin .tfa-ic .ic { background: #d1fae5; border-color: #b7e4d2; }
@media (max-width: 820px) { .side { background: #f0faf6 !important; } }
.kgrid .kpi.k2:first-child { box-shadow: none !important; border-color: transparent !important; }
.side::before { display: none; }
.dash-hero h1 { color: var(--ink) !important; -webkit-text-fill-color: var(--ink); }
.dash-hero .dl.up { background: #d1fae5; color: #047857; } .dash-hero .dl.down { background: #ffe4e6; color: #be123c; } .dash-hero .dl.flat { background: #eef2f1; color: #475569; }
.ai-hero { color: var(--ink); }
.ai-hp .hp > span { color: var(--ink-2); } .ai-hp .hp b { color: var(--ink); } .ai-hp .hp b small, .ai-hp .hp em { color: var(--muted); }
.login.glogin { color: var(--ink); }
.glogin .lcard > p, .glogin .lcard .muted, .glogin .lcard .small.muted { color: var(--muted) !important; }
.gf input + span, .gf .gic, .glogin .pweye, .glogin .lsecure, .glogin .lfoot { color: var(--muted); }
.glogin .pweye:hover { background: #f3faf7; color: var(--ink); }
.glogin .lsecure { border-top-color: var(--line) !important; }
.gf input:-webkit-autofill { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }
.glogin label.f { color: var(--ink-2); }
.glogin .lcard label.f input { color: var(--ink); background: #f7fbf9; border-color: var(--line); }
.glogin .btn.ghost { color: var(--ink); background: #fff; border-color: var(--line); }