/* =========================================================
   SalonPilot CMS — plain, fast, practical. Light UI, clear tables,
   big touch targets for the reception tablet. No animation beyond hover.
   ========================================================= */
:root{
  --bg:#f6f3f1; --panel:#ffffff; --panel-2:#fbf9f8; --ink:#261827; --ink-2:#4f4050; --muted:#837585;
  --line:#e7dfe1; --line-2:#d9cfd2;
  --plum:#5a2a5b; --plum-2:#74407a; --plum-soft:#f3eaf3; --brass:#9c7433; --brass-soft:#f7efe1;
  --ok:#22804f; --ok-soft:#e5f4eb; --warn:#b26b0e; --warn-soft:#fdf1df; --bad:#b8352b; --bad-soft:#fbe8e6;
  --info:#2c6694; --info-soft:#e6f0f8;
  --r:10px; --r-lg:14px;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:ui-monospace, "Cascadia Mono", "Consolas", monospace;
  --side:228px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans); font-size:14.5px; color:var(--ink); background:var(--bg); line-height:1.45; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:var(--plum)}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.2}
.mono{font-family:var(--mono); font-size:.92em}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.nowrap{white-space:nowrap}
.right{text-align:right}
.hide{display:none !important}
:focus-visible{outline:2px solid var(--plum-2); outline-offset:2px}

/* ---------- shell ---------- */
.side{position:fixed; inset:0 auto 0 0; width:var(--side); background:#2a1a2c; color:#eadfe8; display:flex; flex-direction:column; z-index:40; overflow-y:auto}
.side .logo{padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.08)}
.side .logo a{color:#fff; text-decoration:none; font-weight:700; font-size:18px; letter-spacing:.01em; display:flex; align-items:center; gap:9px}
.side .logo a i{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; border:1.5px solid #c9a35b; color:#e6c88a; font-style:normal; font-size:14px}
.side .logo small{display:block; color:#b8a6b6; font-size:12px; margin-top:4px}
.side nav{padding:8px 8px 4px; display:flex; flex-direction:column; gap:2px}
.side .nav-sec{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#998597; padding:12px 12px 4px}
.side nav a{display:flex; align-items:center; gap:10px; min-height:40px; padding:8px 12px; border-radius:8px; color:#eadfe8; text-decoration:none; font-weight:500}
.side nav a:hover{background:rgba(255,255,255,.06)}
.side nav a.on{background:#fff; color:var(--plum); font-weight:600}
.side nav a .bi{font-size:16px; width:18px; text-align:center; opacity:.9}
.side nav a .cnt{margin-left:auto; background:#c9a35b; color:#2a1a2c; font-size:11.5px; font-weight:700; border-radius:99px; padding:1px 7px; min-width:20px; text-align:center}
.side nav a.on .cnt{background:var(--plum); color:#fff}
.side .foot{margin-top:auto; padding:14px 16px 18px; font-size:12px; color:#a998a8; border-top:1px solid rgba(255,255,255,.08)}
.side .foot a{color:#e6c88a}
.side .foot button{margin-top:8px; background:transparent; border:1px solid rgba(255,255,255,.2); color:#eadfe8; border-radius:7px; padding:6px 10px; cursor:pointer; font-size:12px}

.wrap{margin-left:var(--side); min-height:100vh; display:flex; flex-direction:column; min-width:0}
.top{position:sticky; top:0; z-index:30; background:rgba(246,243,241,.95); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; padding:10px 24px; min-height:62px}
.top h1{font-size:19px; font-weight:700; white-space:nowrap}
.top .sub{color:var(--muted); font-size:12.5px; white-space:nowrap}
.top .grow{flex:1}
.top .burger{display:none}
.gsearch{position:relative; width:280px; max-width:34vw}
.gsearch input{width:100%; height:40px; border:1px solid var(--line-2); border-radius:9px; padding:0 30px 0 34px; background:#fff}
.gsearch .bi{position:absolute; left:11px; top:11px; color:var(--muted)}
.gsearch kbd{position:absolute; right:9px; top:10px}
.gs-res{position:absolute; top:44px; left:0; right:0; background:#fff; border:1px solid var(--line-2); border-radius:10px; box-shadow:0 12px 30px rgba(40,20,40,.14); overflow:hidden; z-index:50}
.gs-res a{display:flex; justify-content:space-between; gap:8px; padding:9px 12px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line)}
.gs-res a:hover,.gs-res a.sel{background:var(--plum-soft)}
.clock{font-family:var(--mono); font-size:14px; color:var(--ink-2); background:#fff; border:1px solid var(--line); border-radius:8px; padding:7px 10px; white-space:nowrap}
kbd{font-family:var(--mono); font-size:11px; border:1px solid var(--line-2); border-bottom-width:2px; border-radius:5px; padding:0 5px; background:#fff; color:var(--ink-2)}
main{padding:20px 24px 40px; flex:1; min-width:0}

/* ---------- buttons & inputs ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:7px 14px; border-radius:9px; border:1px solid var(--line-2); background:#fff; color:var(--ink); cursor:pointer; font-weight:600; text-decoration:none; white-space:nowrap; font-size:14px}
.btn:hover{border-color:var(--plum-2); color:var(--plum)}
.btn.pri{background:var(--plum); border-color:var(--plum); color:#fff}
.btn.pri:hover{background:var(--plum-2); color:#fff}
.btn.ok{background:var(--ok); border-color:var(--ok); color:#fff}
.btn.ok:hover{filter:brightness(1.08); color:#fff}
.btn.bad{color:var(--bad); border-color:#ecc3be}
.btn.bad:hover{background:var(--bad-soft)}
.btn.ghost{border-color:transparent; background:transparent}
.btn.ghost:hover{background:var(--plum-soft)}
.btn.sm{min-height:32px; padding:4px 10px; font-size:13px; border-radius:7px}
.btn.lg{min-height:50px; padding:10px 20px; font-size:15.5px}
.btn.wa{color:#1d7f4e; border-color:#bfe2cd}
.btn.wa:hover{background:#e9f7ef}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field > span{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.inp, select.inp, textarea.inp{width:100%; min-height:40px; border:1px solid var(--line-2); border-radius:8px; padding:8px 10px; background:#fff}
textarea.inp{min-height:72px; resize:vertical}
.inp:focus{border-color:var(--plum-2); outline:none; box-shadow:0 0 0 3px rgba(116,64,122,.14)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px}
.seg{display:inline-flex; border:1px solid var(--line-2); border-radius:9px; overflow:hidden; background:#fff}
.seg button{border:0; background:transparent; min-height:38px; padding:6px 13px; cursor:pointer; font-weight:600; color:var(--ink-2); border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--plum); color:#fff}

/* ---------- cards, tiles ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; min-width:0}
.card > h3, .card-h{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:15px; font-weight:700; margin:0 0 12px; flex-wrap:wrap}
.card > h3 small, .card-h small{font-weight:500; color:var(--muted); font-size:12.5px}
.tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:16px}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 14px; min-width:0}
.tile .k{font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.tile .v{font-size:23px; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums}
.tile .s{font-size:12.5px; color:var(--muted)}
.cols{display:grid; grid-template-columns:repeat(12, 1fr); gap:16px; align-items:start}
.c4{grid-column:span 4} .c5{grid-column:span 5} .c6{grid-column:span 6} .c7{grid-column:span 7} .c8{grid-column:span 8} .c12{grid-column:span 12}
.stack{display:flex; flex-direction:column; gap:16px; min-width:0}
.empty{color:var(--muted); padding:14px 4px; font-size:13.5px}
.note{background:var(--panel-2); border:1px dashed var(--line-2); border-radius:9px; padding:9px 12px; color:var(--ink-2); font-size:13px}
.warnbox{background:var(--warn-soft); border:1px solid #f0d3a6; color:#7a4a08; border-radius:9px; padding:10px 12px; font-size:13.5px}
.badbox{background:var(--bad-soft); border:1px solid #efc6c1; color:#8a251c; border-radius:9px; padding:10px 12px; font-size:13.5px}
.okbox{background:var(--ok-soft); border:1px solid #bfe2cd; color:#185f3a; border-radius:9px; padding:10px 12px; font-size:13.5px}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px}
table.t{width:100%; border-collapse:collapse; font-size:14px}
.t th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--panel)}
.t td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tbody tr.click{cursor:pointer}
.t tbody tr.click:hover td{background:var(--panel-2)}
.t td.num, .t th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.t tfoot td{font-weight:700; border-top:2px solid var(--line); border-bottom:0}

/* ---------- chips & status ---------- */
.chip{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:2px 9px; border-radius:99px; border:1px solid var(--line-2); background:#fff; color:var(--ink-2); white-space:nowrap}
.chip.live{background:#eef6fd; border-color:#c5dcf0; color:#245c88}
.chip.mem{background:var(--brass-soft); border-color:#e8d3ad; color:#7a5717}
.chip.ok{background:var(--ok-soft); border-color:#bfe2cd; color:var(--ok)}
.chip.warn{background:var(--warn-soft); border-color:#f0d3a6; color:var(--warn)}
.chip.bad{background:var(--bad-soft); border-color:#efc6c1; color:var(--bad)}
.chip.plum{background:var(--plum-soft); border-color:#e1cbe2; color:var(--plum)}
.st{display:inline-block; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:6px; white-space:nowrap; letter-spacing:.02em}
.st-booked{background:#eef0f3; color:#4a5563}
.st-confirmed{background:var(--info-soft); color:var(--info)}
.st-arrived{background:var(--warn-soft); color:var(--warn)}
.st-inservice{background:var(--plum); color:#fff}
.st-done{background:var(--ok-soft); color:var(--ok)}
.st-noshow{background:var(--bad-soft); color:var(--bad)}
.st-cancelled{background:#f1eeee; color:#8b8283; text-decoration:line-through}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; flex:none}
.av{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#fff; font-weight:700; font-size:12.5px; flex:none}

/* ---------- lists ---------- */
.list{display:flex; flex-direction:column}
.li{display:flex; align-items:center; gap:8px 10px; padding:9px 2px; border-bottom:1px solid var(--line); min-width:0; flex-wrap:wrap}
.li:last-child{border-bottom:0}
.li .main{flex:1 1 170px; min-width:0}
.li .main b{font-weight:600}
.li .main .muted{font-size:12.5px}
.li .acts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.trunc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- Today: floor ---------- */
.floor{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px}
.chair{border:1px solid var(--line); border-radius:12px; padding:11px 12px; background:#fff; min-width:0; border-top:4px solid var(--c, var(--line-2)); cursor:default}
.chair.busy{background:#fcf8fc}
.chair.off, .chair.closed{background:#f5f2f2; color:var(--muted)}
.chair .nm{display:flex; align-items:center; justify-content:space-between; gap:6px; font-weight:700}
.chair .rl{font-size:12px; color:var(--muted)}
.chair .stt{margin-top:8px; font-size:13px}
.chair .bar{height:6px; border-radius:6px; background:#eee5ec; overflow:hidden; margin-top:6px}
.chair .bar i{display:block; height:100%; background:var(--plum-2)}
.chair button.lnk{border:0; background:none; padding:0; color:var(--plum); cursor:pointer; text-align:left; font-weight:600}
.timeline{position:relative; overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:#fff}
.tl-in{position:relative; min-width:700px}
.tl-row{display:flex; align-items:stretch; border-bottom:1px solid var(--line); height:34px}
.tl-row:last-child{border-bottom:0}
.tl-lab{width:118px; flex:none; font-size:12.5px; font-weight:600; padding:0 8px; display:flex; align-items:center; gap:6px; border-right:1px solid var(--line); background:var(--panel-2); position:sticky; left:0; z-index:2}
.tl-track{position:relative; flex:1}
.tl-b{position:absolute; top:4px; bottom:4px; border-radius:6px; font-size:11.5px; padding:2px 6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; border:1px solid rgba(0,0,0,.06)}
.tl-hours{display:flex; height:22px; border-bottom:1px solid var(--line); font-size:11px; color:var(--muted)}
.tl-now{position:absolute; top:0; bottom:0; width:2px; background:#d23a5a; z-index:3; pointer-events:none}

/* ---------- Calendar ---------- */
.cal-bar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.cal-bar .date{font-weight:700; font-size:16px; min-width:190px}
.cal{position:relative; border:1px solid var(--line); border-radius:12px; background:#fff; overflow:auto; max-height:calc(100vh - 190px); min-height:420px}
.cal-grid{display:grid; position:relative; min-width:max-content}
.cal-head{position:sticky; top:0; z-index:6; background:#fff; border-bottom:1px solid var(--line-2); padding:8px 8px; font-weight:700; font-size:13px; min-height:52px; display:flex; flex-direction:column; justify-content:center; border-left:1px solid var(--line)}
.cal-head small{font-weight:500; color:var(--muted); font-size:11.5px}
.cal-head.off{background:#f3efef; color:var(--muted)}
.cal-corner{position:sticky; top:0; left:0; z-index:8; background:#fff; border-bottom:1px solid var(--line-2)}
.cal-times{position:sticky; left:0; z-index:5; background:#fff; border-right:1px solid var(--line)}
.cal-times div{font-size:11px; color:var(--muted); text-align:right; padding:0 6px; font-family:var(--mono); box-sizing:border-box}
.cal-col{position:relative; border-left:1px solid var(--line)}
.cal-col.off{background:repeating-linear-gradient(135deg, #f4f0f0 0 8px, #ece6e7 8px 9px)}
.cal-slot{border-bottom:1px solid #f2ecee; cursor:pointer; box-sizing:border-box}
.cal-slot.hr{border-bottom-color:#e4dadd}
.cal-slot:hover{background:var(--plum-soft)}
.cal-col.off .cal-slot{cursor:not-allowed}
.cal-col.off .cal-slot:hover{background:transparent}
.cal-slot.past{background:rgba(0,0,0,.018)}
.blk{position:absolute; left:3px; right:3px; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; border-radius:7px; padding:3px 7px; font-size:12px; line-height:1.25; overflow:hidden; cursor:pointer; border:1px solid rgba(0,0,0,.07); border-left:4px solid var(--c); background:var(--bgc); color:var(--ink); z-index:2; text-align:left}
.blk:hover{box-shadow:0 4px 14px rgba(40,20,40,.18); z-index:4}
.blk b{display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.blk .ln{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-2)}
.blk .tg{position:absolute; right:4px; top:3px; font-size:11px}
.blk.BOOKED{border-style:dashed; border-left-style:solid}
.blk.ARRIVED{box-shadow:inset 0 0 0 2px #e8a33a}
.blk.IN_SERVICE{box-shadow:inset 0 0 0 2px var(--plum-2); font-weight:500}
.blk.DONE{opacity:.62}
.cal-now{position:absolute; left:0; right:0; height:2px; background:#d23a5a; z-index:5; pointer-events:none}
.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-top:10px}
.legend span{display:inline-flex; align-items:center; gap:5px}

/* ---------- modal & drawer ---------- */
.ovl{position:fixed; inset:0; background:rgba(30,15,30,.42); z-index:80; display:flex; align-items:flex-start; justify-content:center; padding:4vh 16px; overflow-y:auto}
.modal{background:#fff; border-radius:16px; width:100%; max-width:620px; box-shadow:0 24px 60px rgba(30,10,30,.3); position:relative}
.modal.wide{max-width:900px}
.modal.narrow{max-width:440px}
.modal-h{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line)}
.modal-h h2{font-size:17px}
.modal-b{padding:16px 18px; display:flex; flex-direction:column; gap:14px}
.modal-f{display:flex; justify-content:flex-end; gap:8px; padding:12px 18px 16px; border-top:1px solid var(--line); flex-wrap:wrap}
.x{border:0; background:transparent; width:38px; height:38px; border-radius:8px; cursor:pointer; font-size:20px; color:var(--muted)}
.x:hover{background:var(--plum-soft); color:var(--plum)}
.drawer-ovl{position:fixed; inset:0; background:rgba(30,15,30,.28); z-index:70}
.drawer{position:fixed; top:0; right:0; bottom:0; width:440px; max-width:100%; background:#fff; z-index:71; box-shadow:-12px 0 40px rgba(30,10,30,.2); display:flex; flex-direction:column}
.drawer .modal-b{overflow-y:auto; flex:1}
.flow{display:flex; gap:4px; flex-wrap:wrap}
.flow span{font-size:11.5px; font-weight:600; padding:4px 8px; border-radius:6px; background:#f2eef0; color:var(--muted)}
.flow span.done{background:var(--ok-soft); color:var(--ok)}
.flow span.cur{background:var(--plum); color:#fff}
.kv{display:grid; grid-template-columns:110px 1fr; gap:6px 10px; font-size:14px}
.kv dt{color:var(--muted); font-size:12.5px; padding-top:1px}
.kv dd{margin:0; min-width:0}

/* client picker & service picker */
.pick-res{border:1px solid var(--line); border-radius:9px; max-height:200px; overflow-y:auto; margin-top:6px}
.pick-res button{display:flex; width:100%; justify-content:space-between; gap:8px; border:0; border-bottom:1px solid var(--line); background:#fff; padding:9px 11px; cursor:pointer; text-align:left; min-height:40px}
.pick-res button:hover{background:var(--plum-soft)}
.picked{display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid #e1cbe2; background:var(--plum-soft); border-radius:9px; padding:8px 12px}
.svc-pick{border:1px solid var(--line); border-radius:10px; max-height:260px; overflow-y:auto; padding:6px 10px}
.svc-pick h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:10px 0 4px}
.svc-pick label{display:flex; align-items:center; gap:9px; padding:6px 4px; border-radius:7px; cursor:pointer; min-height:38px}
.svc-pick label:hover{background:var(--panel-2)}
.svc-pick label input{width:18px; height:18px; accent-color:var(--plum)}
.svc-pick label .p{margin-left:auto; font-family:var(--mono); font-size:12.5px; color:var(--ink-2); white-space:nowrap}
.svc-pick label.na{opacity:.5}
.sumline{display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:14px}
.sumline.tot{font-size:18px; font-weight:700; border-top:1px solid var(--line); padding-top:8px; margin-top:4px}

/* ---------- POS ---------- */
.pos{display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(320px, 1fr); gap:16px; align-items:start}
.pos-add .tabs{margin-bottom:10px}
.item-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px; max-height:300px; overflow-y:auto; padding:2px}
.item-grid button{border:1px solid var(--line); background:#fff; border-radius:9px; padding:9px 10px; text-align:left; cursor:pointer; min-height:56px; display:flex; flex-direction:column; gap:2px}
.item-grid button:hover{border-color:var(--plum-2); background:var(--plum-soft)}
.item-grid button b{font-size:13px; font-weight:600}
.item-grid button span{font-size:12px; color:var(--muted); font-family:var(--mono)}
.pay-row{display:grid; grid-template-columns:1fr 120px 38px; gap:6px; align-items:center; margin-bottom:6px}
.qr{display:flex; gap:12px; align-items:center; border:1px solid var(--line); border-radius:10px; padding:10px; background:var(--panel-2)}
.qr .box{width:120px; height:120px; flex:none; background:#fff; display:grid; place-items:center; border-radius:6px}
.qr .box img, .qr .box svg{width:112px; height:112px}

/* receipt */
.receipt{font-family:var(--mono); font-size:12.5px; width:100%; max-width:340px; margin:0 auto; color:#111; background:#fff; padding:6px 4px}
.receipt h3{font-family:var(--sans); font-size:16px; text-align:center}
.receipt .c{text-align:center}
.receipt hr{border:0; border-top:1px dashed #999; margin:8px 0}
.receipt table{width:100%; border-collapse:collapse}
.receipt td{padding:2px 0; vertical-align:top}
.receipt td.r{text-align:right; white-space:nowrap; padding-left:8px}
.receipt .big td{font-size:14.5px; font-weight:700}

/* tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:14px; overflow-x:auto}
.tabs button{border:0; background:transparent; padding:10px 14px; min-height:42px; cursor:pointer; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap}
.tabs button.on{color:var(--plum); border-bottom-color:var(--plum)}

/* kanban */
.kan{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; align-items:start}
.kan-col{background:#efe9ea; border-radius:12px; padding:10px; min-width:0}
.kan-col h3{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin:2px 4px 10px; display:flex; justify-content:space-between}
.kcard{background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 12px; margin-bottom:8px}
.kcard .nm{font-weight:700; display:flex; justify-content:space-between; gap:8px}
.kcard p{margin:6px 0; font-size:13px; color:var(--ink-2)}

/* clients page */
.cl-split{display:grid; grid-template-columns:330px minmax(0, 1fr); gap:16px; align-items:start}
.cl-list{max-height:calc(100vh - 200px); overflow-y:auto}
.cl-list button{display:flex; width:100%; gap:10px; align-items:center; border:0; border-bottom:1px solid var(--line); background:#fff; padding:9px 8px; cursor:pointer; text-align:left; min-height:52px}
.cl-list button:hover{background:var(--panel-2)}
.cl-list button.on{background:var(--plum-soft)}
.cl-list .nm{font-weight:600; display:block}
.prof-h{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.prof-h .av{width:52px; height:52px; font-size:18px}
.prof-h h2{font-size:21px}
.formula{border:1px solid var(--line); border-left:4px solid #8a4cb5; border-radius:9px; padding:10px 12px; margin-bottom:8px}
.formula .f{font-family:var(--mono); font-size:13px; margin:4px 0}

/* charts */
.ch{width:100%; height:auto; display:block}
.ch text{font-family:var(--sans); font-size:11px; fill:var(--muted)}
.ch .val{fill:var(--ink-2); font-weight:600}
.hb{display:flex; flex-direction:column; gap:7px}
.hb-r{display:grid; grid-template-columns:minmax(90px, 160px) 1fr 80px; gap:8px; align-items:center; font-size:13px}
.hb-r .lab{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hb-r .trk{height:14px; background:#f1ecee; border-radius:5px; overflow:hidden}
.hb-r .trk i{display:block; height:100%; border-radius:5px}
.hb-r .n{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}

/* toast */
#toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); background:#2a1a2c; color:#fff; padding:11px 18px; border-radius:10px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:120; max-width:calc(100vw - 32px)}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

.switch{position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer}
.switch input{width:44px; height:24px; appearance:none; -webkit-appearance:none; background:#d8cfd3; border-radius:99px; position:relative; cursor:pointer; transition:background .15s; margin:0}
.switch input::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s}
.switch input:checked{background:var(--ok)}
.switch input:checked::after{left:23px}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .gsearch{width:220px}
  .top .qa .lbl{display:none}
}
@media (max-width:1180px){
  .c4,.c5,.c6,.c7,.c8{grid-column:span 12}
  .cols.keep .c6{grid-column:span 6}
  .pos{grid-template-columns:minmax(0, 1.4fr) minmax(300px, 1fr)}
}
@media (max-width:900px){ .pos{grid-template-columns:minmax(0, 1fr)} }
@media (min-width:961px) and (max-width:1180px){ .cols.t84 > .c8{grid-column:span 7} .cols.t84 > .c4{grid-column:span 5} }
@media (max-width:1080px){
  :root{--side:0px}
  .side{transform:translateX(-100%); width:250px; transition:transform .2s}
  body.nav-open .side{transform:none; box-shadow:0 0 60px rgba(0,0,0,.35)}
  body.nav-open::after{content:""; position:fixed; inset:0; background:rgba(20,10,20,.35); z-index:35}
  .top .burger{display:inline-flex}
  .cl-split{grid-template-columns:280px minmax(0, 1fr)}
}
@media (max-width:820px){
  .cl-split{grid-template-columns:minmax(0, 1fr)}
  .cl-list{max-height:300px}
  .kan{grid-template-columns:minmax(0, 1fr)}
  .cols.keep .c6{grid-column:span 12}
  .gsearch{display:none}
  .top .sub{display:none}
}
@media (max-width:640px){
  main{padding:14px 14px 32px}
  .top{padding:8px 14px; gap:8px}
  .top h1{font-size:17px}
  .clock{display:none}
  .grid2,.grid3{grid-template-columns:minmax(0, 1fr)}
  .tiles{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .drawer{width:100%}
  .hb-r{grid-template-columns:90px 1fr 70px}
  .kv{grid-template-columns:90px 1fr}
  .pay-row{grid-template-columns:1fr 96px 38px}
}

/* ---------- print: receipt only ---------- */
@media print{
  body *{visibility:hidden !important}
  .print-me, .print-me *{visibility:visible !important}
  .print-me{position:absolute; left:0; top:0; width:80mm; max-width:80mm}
  .ovl{position:static; background:none; padding:0}
  @page{size:80mm auto; margin:4mm}
}