/* SANORA clinic app — front-desk console. Light + dark. */
:root{
  --bg:#f3f5f7; --surface:#ffffff; --ink:#14202b; --muted:#5d6b78; --line:#dde3e9; --soft:#eaeef2;
  --accent:#0a4a3f; --accent-ink:#ffffff; --mint:#0fbd9a; --brand:#0a4a3f;
  --implant:#2f5fa8; --ortho:#7a4bb3; --removable:#0f8a6a; --crown:#b5761a; --endo:#b4532a; --general:#5d6b78;
  --bad:#c23b33; --bad-bg:#fbe9e7; --warn:#a96a00; --warn-bg:#fdf1dc; --ok:#2f7d4f; --ok-bg:#e4f3ea;
  --f-display:"Montserrat","IBM Plex Sans",system-ui,sans-serif; --f-serif:"Cormorant Garamond",Georgia,serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:12px; --side:228px; color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f151b; --surface:#172029; --ink:#e6edf3; --muted:#93a2b0; --line:#2a3743; --soft:#1e2933;
  --accent:#2fd3b0; --accent-ink:#04201a; --mint:#2fd3b0; --brand:#9be6d2;
  --implant:#7aa7ef; --ortho:#b893ea; --removable:#4fd1a8; --crown:#e3a84d; --endo:#f08c5c; --general:#93a2b0;
  --bad:#ff7b72; --bad-bg:#3a1f1d; --warn:#f0b85a; --warn-bg:#3a2d14; --ok:#6fcf97; --ok-bg:#16301f; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f151b; --surface:#172029; --ink:#e6edf3; --muted:#93a2b0; --line:#2a3743; --soft:#1e2933;
  --accent:#2fd3b0; --accent-ink:#04201a; --mint:#2fd3b0; --brand:#9be6d2;
  --implant:#7aa7ef; --ortho:#b893ea; --removable:#4fd1a8; --crown:#e3a84d; --endo:#f08c5c; --general:#93a2b0;
  --bad:#ff7b72; --bad-bg:#3a1f1d; --warn:#f0b85a; --warn-bg:#3a2d14; --ok:#6fcf97; --ok-bg:#16301f; color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.45;-webkit-text-size-adjust:100%}
html.lock{overflow:hidden}
a{color:inherit} button{font:inherit;color:inherit;cursor:pointer} button:disabled{opacity:.5;cursor:default}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 11px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
input[type=checkbox]{width:auto}
textarea{resize:vertical}
h1,h2,h3,h4{margin:0;font-weight:600}
h1{font-family:var(--f-display);font-size:22px;font-weight:600;letter-spacing:-.01em}
h3{font-size:15px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.sub{color:var(--muted);font-size:12.5px}
.bad{color:var(--bad)} .ok{color:var(--ok)} .warn{color:var(--warn)}
.pre{white-space:pre-wrap;margin:0}
.t-ortho{--tc:var(--ortho)} .t-removable{--tc:var(--removable)} .t-implant{--tc:var(--implant)} .t-crown{--tc:var(--crown)} .t-endo{--tc:var(--endo)} .t-general{--tc:var(--general)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;background:var(--tc,var(--muted))}

/* ---------- shell ---------- */
.shell{min-height:100vh}
.side{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px;gap:14px;z-index:20}
.brand{padding:0 10px}.brand small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.brand b{display:block;font-size:0;height:40px;background:url(../assets/logo-h.png) left center/contain no-repeat}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand b{background-image:url(../assets/logo-h-white.png)}}
:root[data-theme="dark"] .brand b{background-image:url(../assets/logo-h-white.png)}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:500}
.side nav a:hover{background:var(--soft);color:var(--ink)}
.side nav a.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.me{border-top:1px solid var(--line);padding:12px 10px 0;display:flex;flex-direction:column;gap:2px}.me small{color:var(--muted)}
.main{margin-left:var(--side);min-width:0}
.page{max-width:1240px;margin:0 auto;padding:22px 24px 40px;display:flex;flex-direction:column;gap:14px}
.phd{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.demo-bar{background:var(--warn-bg);color:var(--warn);font-size:12.5px;padding:7px 24px;text-align:center}
.tabbar,.more-ovl{display:none}
.back{color:var(--muted);text-decoration:none;font-size:13px}
@media (max-width:900px){
  .side{display:none}.main{margin-left:0;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .page{padding:14px 14px 30px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 7px;font-size:11px;color:var(--muted);text-decoration:none;background:none;border:0}
  .tabbar .on{color:var(--accent)}
  .more-ovl{display:block;position:fixed;inset:0;z-index:40;background:rgba(10,18,26,.35)}
  .more{position:absolute;left:10px;right:10px;bottom:calc(70px + env(safe-area-inset-bottom,0px));background:var(--surface);border-radius:14px;padding:8px;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,.25)}
  .more a,.more button{display:flex;gap:12px;align-items:center;padding:12px;border-radius:8px;text-decoration:none;background:none;border:0;font-size:15px;text-align:left}
  .more a:active,.more button:active{background:var(--soft)}
  h1{font-size:19px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 13px;font-weight:500;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.btn.solid{background:var(--bad);color:#fff;border-color:transparent}
.btn.sm{padding:4px 9px;font-size:12.5px}
.btn.wide{width:100%}
.linkbtn{border:0;background:none;color:var(--accent);padding:0;font-size:13px;text-decoration:underline;cursor:pointer}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qb{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 11px;font-size:13px;font-weight:600;white-space:nowrap}
.qb.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}.qb.ok:hover{background:var(--ok);color:#fff}
.qb.no{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}.qb.no:hover{background:var(--bad);color:#fff}
.qb.pay{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}.qb.pay:hover{background:var(--bad);color:#fff}

.savebtn{border:0;border-radius:10px;padding:13px;font-size:15px;font-weight:700;color:#fff;background:var(--tc,var(--accent));width:100%}
.savebtn:hover{filter:brightness(1.08)}
.confirm{display:inline-flex;gap:6px;align-items:center;font-size:13px;flex-wrap:wrap}

/* ---------- cards, stats ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card-h{display:flex;justify-content:space-between;align-items:center}

.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.cols3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.cols,.cols3{grid-template-columns:minmax(0,1fr)}}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:2px;text-align:left;text-decoration:none;min-width:0}
button.stat:hover,a.stat:hover{border-color:var(--muted)}
.stat.on{box-shadow:0 0 0 2px var(--accent) inset}
.stat-l{font-size:12.5px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:6px}
.stat b{font-family:var(--f-display);font-size:22px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat small{color:var(--muted);font-size:12px}
.stat.tone-bad b{color:var(--bad)}.stat.tone-ok b{color:var(--ok)}.stat.tone-warn b{color:var(--warn)}
.stat.cat{border-left:4px solid var(--tc)}.stat.cat b{color:var(--tc)}.stat.cat.on{background:color-mix(in srgb,var(--tc) 9%,var(--surface));box-shadow:0 0 0 2px var(--tc) inset}
.empty{padding:28px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted)}
.empty h3{color:var(--ink)} .empty p{margin:0;max-width:46ch}
.alert{border-radius:10px;padding:10px 12px;font-size:13px;display:flex;flex-direction:column;gap:3px;background:var(--soft)}
.alert.warn{background:var(--warn-bg);color:var(--warn)}.alert.bad{background:var(--bad-bg);color:var(--bad)}.alert.ok{background:var(--ok-bg);color:var(--ok)}
.alert.soft{background:var(--bad-bg);color:var(--bad)}
.big-alert{background:var(--bad);color:#fff}.big-alert b{font-family:var(--f-display);font-size:24px}.big-alert .btn{align-self:flex-start;margin-top:6px;background:#fff;color:var(--bad)}
.pill{display:inline-block;border:1px solid currentColor;border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.pill.type{color:var(--tc,var(--accent))}
.pill.t-ortho,.pill.t-removable,.pill.t-implant,.pill.t-crown,.pill.t-endo{color:var(--tc)}
.owe-tag{display:inline-block;background:var(--bad-bg);color:var(--bad);border-radius:6px;padding:1px 7px;font-size:11.5px;font-weight:600}

.tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}

/* ---------- toolbar, seg, chips ---------- */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toolbar input[type=date],.toolbar select{width:auto}
.toolbar .search{flex:1;min-width:160px}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--soft);border-radius:9px;padding:3px;gap:2px;align-self:flex-start;max-width:100%}
.seg button{border:0;background:transparent;border-radius:7px;padding:6px 11px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.seg small{background:var(--line);border-radius:999px;padding:0 6px;font-size:11px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px}
.chips button:hover{border-color:var(--tc,var(--accent))}
.chips button[aria-pressed="true"]{background:var(--tc,var(--accent));border-color:var(--tc,var(--accent));color:#fff}
.chips button.ok{color:var(--ok);border-color:var(--ok);font-weight:600}
.chips.sm button{padding:3px 9px;font-size:12px}
.search{border-radius:10px;padding:10px 14px}
.search.big{font-size:16px;padding:13px 16px;border-width:1.5px}

/* ---------- forms ---------- */
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f.full{grid-column:1/-1}
.lbl{font-size:12.5px;color:var(--muted);font-weight:500}.lbl.big{font-size:15px;color:var(--ink);font-weight:600}
.lbl .req{color:var(--bad)}
.hint{font-size:11.5px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:560px){.grid2{grid-template-columns:minmax(0,1fr)}.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.money-in{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding-right:10px}
.money-in input{border:0;box-shadow:none;font-family:var(--f-mono);text-align:right}
.money-in span{color:var(--muted)}
.money-in.big{border:2px solid var(--accent);border-radius:12px}.money-in.big input{font-size:28px;padding:12px 14px}
.money-in:focus-within{border-color:var(--accent)}
.row-in{display:flex;gap:8px;align-items:center}
.chk{display:inline-flex;gap:5px;align-items:center;font-size:12.5px}
details summary{cursor:pointer;color:var(--accent);font-size:13px}
.tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
@media (max-width:620px){.tcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tcard{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:10px;text-align:left;display:flex;flex-direction:column;gap:3px}
.tcard b{display:flex;align-items:center;gap:6px}.tcard small{color:var(--muted);font-size:11.5px}
.tcard[aria-pressed="true"]{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 9%,var(--surface))}.tcard[aria-pressed="true"] b{color:var(--tc)}
.fdi-wrap{overflow-x:auto}
.fdi{display:grid;grid-template-columns:repeat(16,minmax(24px,1fr));gap:2px;min-width:420px}
.fdi button{border:1px solid var(--line);background:var(--surface);border-radius:5px;padding:5px 0;font-size:11.5px;font-family:var(--f-mono)}
.fdi button.mid{margin-left:6px}
.fdi button[aria-pressed="true"]{background:var(--tc,var(--accent));color:#fff;border-color:transparent}
.fdi button.sys-O[aria-pressed="true"]{background:#2f6fb5}.fdi button.sys-R[aria-pressed="true"]{background:#2f9a5e}.fdi button.sys-A[aria-pressed="true"]{background:#c98a12}
.fdi-cap{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);min-width:420px}
.sysrows{display:flex;flex-direction:column;gap:6px}.sysrow{display:flex;gap:10px;align-items:center}
.pp{position:relative}
.pp-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);z-index:5;max-height:300px;overflow:auto;display:flex;flex-direction:column}
.pp-list button{border:0;background:none;text-align:left;padding:9px 12px;display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.pp-list button:hover{background:var(--soft)}
.pp-new{color:var(--accent);font-weight:600}
.pp-empty{padding:10px 12px;color:var(--muted)}
.picked{display:flex;justify-content:space-between;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--soft)}
.picked div{display:flex;flex-direction:column}

/* ---------- panels ---------- */
.ovl{position:fixed;inset:0;background:rgba(10,18,26,.45);display:flex;animation:fade .15s ease}
.ovl-bg{position:fixed;inset:0;background:rgba(10,18,26,.45)}
.ovl.ovl-tall{position:absolute;left:0;right:0;bottom:auto;background:transparent;animation:none;padding:0 8px}
.ovl-tall .panel.sheet,.ovl-tall .panel.lsheet{height:auto;overflow:visible;margin-left:auto}
.ovl-tall .phead,.ovl-tall .pfoot{position:static}
.ovl-center{align-items:flex-start;justify-content:center;padding:4vh 12px;overflow-y:auto}
.ovl-right{justify-content:flex-end}.ovl-left{justify-content:flex-start}
.panel{background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(var(--w,600px),100%);display:flex;flex-direction:column}
.panel.modal{border-radius:14px;max-height:none;margin:auto 0}
.panel.sheet,.panel.lsheet{height:100%;overflow-y:auto;overscroll-behavior:contain}
.panel.sheet{animation:inR .22s cubic-bezier(.2,.8,.2,1)}.panel.lsheet{animation:inL .22s cubic-bezier(.2,.8,.2,1)}
@keyframes inR{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes inL{from{transform:translateX(-40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.pform{display:flex;flex-direction:column;min-height:100%}
.phead{display:flex;justify-content:space-between;gap:10px;padding:16px 20px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2}
.phead.t-ortho,.phead.t-removable,.phead.t-implant,.phead.t-crown,.phead.t-endo{background:color-mix(in srgb,var(--tc) 8%,var(--surface));border-top:4px solid var(--tc)}
.ph-t{display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.phead h2{font-size:18px}.phead h2 a{text-decoration:none}.phead h2 a:hover{text-decoration:underline}
.x{border:0;background:var(--soft);border-radius:9px;width:36px;height:36px;font-size:20px;flex:none}
.pbody{padding:16px 20px;display:flex;flex-direction:column;gap:14px;flex:1}
.pfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface)}
@media (max-width:640px){.ovl-center{padding:0}.panel.modal{border-radius:0;min-height:100%}.panel{width:100%}}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.kv>div{display:flex;flex-direction:column;gap:2px;min-width:0}.kv span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sec{display:flex;flex-direction:column;gap:8px}.sec h4{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.vcard{border:1px solid color-mix(in srgb,var(--tc) 35%,var(--line));border-top:4px solid var(--tc);border-radius:12px;padding:14px 16px;background:color-mix(in srgb,var(--tc) 4%,var(--surface))}
.vcard h4{margin:0 0 12px;font-size:15px;color:var(--tc)}
.vform{display:flex;flex-direction:column;gap:14px}
.vtoday{background:var(--ok-bg);color:var(--ok);border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600}
.vinfo{background:var(--soft);border-radius:8px;padding:8px 12px;font-size:13px}
.psum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.psum>div{background:var(--soft);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.psum span{font-size:12px;color:var(--muted)}.psum b{font-family:var(--f-mono);font-size:15px}
.psum .bad{background:var(--bad-bg)}.psum .bad b{color:var(--bad)}.psum .ok b{color:var(--ok)}

.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.plist li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}

.timeline{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:10px}
.timeline li{position:relative}.timeline li::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--muted)}
.timeline li.pay::before{border-color:var(--ok);background:var(--ok)}.timeline li.tighten::before{border-color:var(--ortho)}.timeline li.install::before{background:var(--ink);border-color:var(--ink)}
.timeline p{margin:2px 0 0}
.chainbox{overflow-x:auto;padding-bottom:4px}
.chain{display:flex;gap:4px;min-width:max-content}
.link{border:1px solid var(--line);border-radius:8px;padding:5px 9px;display:flex;flex-direction:column;align-items:center;font-size:12px;min-width:58px}
.link small{color:var(--muted)}.link small.bad{color:var(--bad);font-weight:600}
table.sched{width:100%;border-collapse:collapse;font-size:12.5px}.sched td,.sched th{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left}
.sched tr.paid td{color:var(--ok)}.sched tr.late td{color:var(--bad);font-weight:600}

/* ---------- lists ---------- */
.clist,.alist,.prow-list,.mini,.staff{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.crow,.lrow{display:grid;grid-template-columns:5px minmax(0,1fr) minmax(0,auto) auto;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:8px 0;min-height:60px}
.lrow{grid-template-columns:minmax(0,1fr) auto auto}
.crow:last-child,.lrow:last-child{border-bottom:0}
.crow .stripe{align-self:stretch;border-radius:3px;background:var(--tc)}
.crow.ph-plan{--ph:#7a6cc4}.crow.ph-heal{--ph:#2f78c4}.crow.ph-ready{--ph:#e0701f}.crow.ph-lab{--ph:#0e8f8f}.crow.ph-done{--ph:#2f9a5e}
.crow[class*="ph-"] .stripe{background:var(--ph)}
.crow.red{background:color-mix(in srgb,var(--bad) 5%,transparent)}
.crow-n{border:0;background:none;text-align:left;padding:0;display:flex;flex-direction:column;gap:1px;min-width:0}
.crow-n>b{font-size:15px}.crow-n>.ph{align-self:flex-start;margin:1px 0}.crow-n small{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.crow-a{display:flex;gap:6px;justify-content:flex-end}
.due{display:flex;flex-direction:column;text-align:right;min-width:110px}.due b{font-family:var(--f-mono);font-size:14px}.due small{font-size:11.5px;color:var(--muted)}
.due.bad b,.due.bad small{color:var(--bad)}.due.warn b,.due.warn small{color:var(--warn)}
@media (max-width:640px){.crow{grid-template-columns:5px minmax(0,1fr) auto;grid-template-areas:"s n a" "s d a"}.crow .stripe{grid-area:s}.crow-n{grid-area:n}.crow .due{grid-area:d;text-align:left}.crow-a{grid-area:a;flex-direction:column}}
.ph{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:700;color:var(--ph);background:color-mix(in srgb,var(--ph) 14%,transparent);margin-left:6px;vertical-align:1px;white-space:nowrap}
.ph::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ph)}
.ph-plan{--ph:#7a6cc4}.ph-heal{--ph:#2f78c4}.ph-ready{--ph:#e0701f}.ph-lab{--ph:#0e8f8f}.ph-done{--ph:#2f9a5e}





.arow{display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding:6px 0;flex-wrap:wrap}
.arow:last-child{border-bottom:0}
.arow-main{flex:1;min-width:200px;border:0;background:none;display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:4px 0;border-left:3px solid var(--sc);padding-left:9px}
.arow-t{font-weight:600}.arow-n{display:flex;flex-direction:column;min-width:0}.arow-n small{color:var(--muted);font-size:12px}.arow-n a{text-decoration:none}.arow-n a:hover{text-decoration:underline}
.arow-act{display:flex;gap:6px}
.st-done .arow-main,.st-noshow .arow-main{opacity:.7}












.case-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.ccard{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--tc);border-radius:var(--r);display:flex;flex-direction:column}
.ccard.red{border-color:color-mix(in srgb,var(--bad) 50%,var(--line));border-top-color:var(--bad)}
.ccard.done{opacity:.75}
.ccard-main{border:0;background:none;text-align:left;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.ccard-type{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--tc)}
.ccard-main>b{font-size:15px}.ccard-main .due{text-align:left;min-width:0}
.ccard-money{font-size:12.5px;font-family:var(--f-mono);color:var(--muted)}
.ccard-act{display:flex;gap:6px;padding:0 14px 12px}

/* ---------- calendar ---------- */
.dgrid-wrap{overflow:auto;max-height:calc(100vh - 220px);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.dgrid{display:grid;grid-template-columns:52px repeat(var(--cols),minmax(160px,1fr));position:relative;min-width:max-content}
.dg-times{position:relative;margin-top:42px;border-right:1px solid var(--line)}
.dg-times span{position:absolute;right:6px;transform:translateY(-50%);font-size:11px;color:var(--muted);font-family:var(--f-mono)}
.dg-col{border-right:1px solid var(--line);min-width:160px}
.dg-h{position:sticky;top:0;z-index:3;background:var(--surface);height:42px;padding:6px 10px;border-bottom:1px solid var(--line);font-weight:600;font-size:13px;display:flex;flex-direction:column;justify-content:center}
.dg-h small{font-weight:400;color:var(--muted);font-size:11px}
.dg-body{position:relative}
.dg-slot{position:absolute;left:0;right:0;border:0;border-top:1px dashed var(--line);background:none;padding:0}
.dg-slot:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.dg-now{position:absolute;left:0;right:0;height:2px;background:var(--bad);z-index:2}
.dg-appt{position:absolute;left:4px;right:4px;z-index:1;border:0;border-left:4px solid var(--sc,var(--accent));background:color-mix(in srgb,var(--sc,var(--accent)) 14%,var(--surface));border-radius:6px;text-align:left;padding:3px 7px;overflow:hidden;display:flex;flex-direction:column;font-size:12px}
.dg-appt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dg-appt small{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-appt.st-noshow{text-decoration:line-through;opacity:.7}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
@media (max-width:900px){.week{grid-template-columns:minmax(0,1fr)}}
.wday{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-height:120px}
.wday.is-today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.wday-h{border:0;background:none;display:flex;gap:6px;align-items:baseline;padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}.wday-h span{font-family:var(--f-display);font-size:18px}.wday-h small{color:var(--muted);margin-left:auto}
.wday ul{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:4px;flex:1}
.wa button{width:100%;border:0;border-left:3px solid var(--sc);background:var(--soft);border-radius:6px;text-align:left;padding:4px 7px;font-size:12px;display:flex;flex-direction:column}
.wa small{color:var(--muted)}
.wday-add{border:0;background:none;color:var(--accent);padding:6px;font-size:16px}

/* ---------- lab board ---------- */
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.board.b4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1200px){.board.b4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lcard.todo{border-style:dashed;border-left-style:solid}.lcard.wait{opacity:.7}
@media (max-width:900px){.board,.board.b4{grid-template-columns:minmax(0,1fr)}}
.bcol{background:var(--soft);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px}
.bcol h3{display:flex;align-items:center;gap:8px;font-size:14px}.bcol h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--sc)}
.bcol h3 small{color:var(--muted);font-weight:400}
.lcard{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--sc);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}
.lcard.late{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 5%,var(--surface))}
.lcard-main{border:0;background:none;text-align:left;padding:0;display:flex;flex-direction:column;gap:2px}.lcard-main small{color:var(--muted);font-size:12px}
.lcard-act{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- finance / referral ---------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}.tbl th{text-align:left;font-size:12px;color:var(--muted);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}.tbl tr:hover td{background:var(--soft);cursor:pointer}
.tbl .r{text-align:right}








.src-tag{align-self:flex-start;margin:0 0 8px 17px;border:1px dashed var(--bad);background:var(--bad-bg);color:var(--bad);border-radius:6px;padding:2px 9px;font-size:12px;font-weight:600}
.src-tag.ok{border-style:solid;border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.settle-box{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 8px 17px;font-size:12.5px}.settle-box input[type=month]{width:auto}.settle-box .money-in{width:150px}

/* ---------- charts ---------- */
.bars{position:relative;margin:16px 0 22px}
.bar{position:absolute;bottom:0;top:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 3px}



.hbars{display:flex;flex-direction:column;gap:8px}
.hb{display:grid;grid-template-columns:minmax(80px,40%) minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12.5px}
.hb-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hb-t{height:10px;background:var(--soft);border-radius:5px;overflow:hidden}.hb-f{display:block;height:100%;border-radius:5px}
.hb b{font-family:var(--f-mono);font-size:12px}

/* ---------- misc ---------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:13.5px;z-index:500;display:flex;gap:14px;align-items:center;box-shadow:0 8px 30px rgba(0,0,0,.25);max-width:calc(100vw - 24px)}
.toast button{border:0;background:none;color:inherit;font-weight:700;text-decoration:underline}
@media (max-width:900px){.toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
.boot,.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center}
.logo{font-size:0;width:min(220px,70vw);aspect-ratio:900/219;background:url(../assets/logo-h.png) center/contain no-repeat;margin:0 auto}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo{background-image:url(../assets/logo-h-white.png)}}
:root[data-theme="dark"] .logo{background-image:url(../assets/logo-h-white.png)}
.login form{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px 24px;width:min(380px,100%);display:flex;flex-direction:column;gap:12px;text-align:left}
.login .logo{text-align:center}.login .sub{text-align:center;margin:-6px 0 6px}
.staff li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}.staff li>span{flex:1;display:flex;flex-direction:column}.staff select{width:auto}
.help ol{padding-left:18px;font-size:13px}
.mini li{padding:4px 0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.badge{display:inline-block;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 8px;font-size:12px;vertical-align:2px}

.req{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.req:last-child{border-bottom:0}

/* website content */
.site-list{list-style:none;margin:12px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-item{display:flex;align-items:stretch;padding:0;overflow:hidden}
.site-item.hid{opacity:.62}
.site-main{flex:1;min-width:0;display:flex;gap:14px;align-items:flex-start;text-align:left;background:none;border:0;padding:14px;color:inherit}
.site-thumb{flex:none;width:64px;height:64px;border-radius:10px;background:var(--soft) center/cover no-repeat;display:grid;place-items:center;font-size:24px;font-weight:600;color:var(--muted)}
.site-thumb.round{border-radius:50%}
.site-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.site-txt small{color:var(--muted)}
.site-desc{color:var(--muted);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.site-ord{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8px;border-left:1px solid var(--line)}
.pill.ok{color:var(--ok)}
.btn.ghost{border-color:transparent;background:none;color:var(--muted)}
fieldset.plain{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:12px}
.doc-edit{display:flex;gap:16px;align-items:flex-start}.doc-edit .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.photo-in{display:flex;gap:12px;align-items:center}
.photo-in.round{flex-direction:column;flex:none}
.photo-pv{width:120px;height:120px;border-radius:12px;background:var(--soft) center/cover no-repeat;display:grid;place-items:center;color:var(--muted);font-size:12px;border:1px dashed var(--line);flex:none}
.photo-in.round .photo-pv{border-radius:50%}
.photo-in.wide .photo-pv{width:180px;height:110px}
.photo-btns{display:flex;gap:6px;flex-wrap:wrap}.photo-btns label{cursor:pointer}
@media (max-width:560px){.doc-edit{flex-direction:column;align-items:stretch}.photo-in.round{flex-direction:row}.site-thumb{width:48px;height:48px}}
.color-in{display:flex;align-items:center;gap:10px}.color-in input[type=color]{width:52px;height:38px;padding:3px;border-radius:10px;cursor:pointer}.color-in code{font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.design-pv{margin-top:6px;border-radius:16px;padding:22px;background:var(--brand);color:#fff;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.design-pv small{color:var(--mint);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.design-pv b{font-family:var(--f-serif);font-size:26px;line-height:1.1;font-weight:600}
.pv-btn{background:var(--mint);color:#04241d;border-radius:999px;padding:8px 16px;font-weight:600;font-size:13px}

/* ======================= v2: clinic workspace ======================= */
:root{--tooth:#fffbf2;--tooth-shade:#f1e4c6;--tooth-root:#faf0da;--tooth-root2:#ecdcb8;--tooth-line:#2b2620;--side:236px;--side-bg:#073b33;--side-ink:rgba(255,255,255,.72)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tooth:#f6efe0;--tooth-shade:#dccdaf;--tooth-root:#e3d4b6;--tooth-root2:#c9b897;--tooth-line:#2a241d;--side-bg:#06221e}}
:root[data-theme="dark"]{--tooth:#f6efe0;--tooth-shade:#dccdaf;--tooth-root:#e3d4b6;--tooth-root2:#c9b897;--tooth-line:#2a241d;--side-bg:#06221e}
/* sidebar */
.side{background:linear-gradient(180deg,var(--side-bg),#052b25);border-right:0;color:var(--side-ink);overflow-y:auto;padding:16px 10px}
.side .brand b{background-image:url(../assets/logo-h-white.png)!important;height:38px}
.side nav a{color:var(--side-ink);font-weight:500;font-size:13.5px;padding:9px 11px}
.side nav a svg{opacity:.85}
.side nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side nav a.on{background:var(--mint);color:#032a23;font-weight:600}
.side nav a.on svg{opacity:1}
.side-sub{display:flex;flex-direction:column;margin:2px 0 6px 20px;padding-left:12px;border-left:1px solid rgba(255,255,255,.14)}
.side-pt{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mint);padding:6px 6px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .side-sub a{padding:6px 8px;font-size:13px;border-radius:7px}
.side .side-sub a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.side .me{border-top-color:rgba(255,255,255,.12);color:#fff}.side .me small{color:var(--side-ink)}.side .me .linkbtn{color:var(--mint);text-align:left}
/* top bar */
.topbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:10px;padding:10px 24px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tb-search{position:relative;flex:0 1 380px;display:flex;align-items:center}
.tb-search>svg{position:absolute;left:11px;color:var(--muted);pointer-events:none}
.tb-search input{padding-left:36px;border-radius:10px;background:var(--surface)}
.tb-res{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:320px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -12px rgba(0,0,0,.25);padding:6px;display:flex;flex-direction:column;z-index:30}
.tb-res button{display:grid;grid-template-columns:56px 1fr;grid-template-areas:"c n" "c s";text-align:left;border:0;background:none;border-radius:8px;padding:7px 9px;gap:0 8px}
.tb-res button .mono{grid-area:c;color:var(--muted);font-size:12px;align-self:center}.tb-res button b{grid-area:n}.tb-res button small{grid-area:s;color:var(--muted);font-size:12px}
.tb-res button.hi,.tb-res button:hover{background:var(--soft)}
.tb-res .tb-new{display:block;color:var(--accent);font-weight:600;border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px}
.tb-empty{padding:10px;color:var(--muted);font-size:13px}
.tb-add{flex:none;width:38px;height:38px;border-radius:10px;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.tb-cur{display:flex;align-items:center;gap:2px;margin-left:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:3px 4px 3px 3px;min-width:0}
.tb-cur-n{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;padding:2px 8px 2px 2px;min-width:0}
.tb-cur-n span:last-child{display:flex;flex-direction:column;min-width:0}.tb-cur-n b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}.tb-cur-n small{font-size:11.5px;color:var(--muted)}
.tb-av,.ws-av{flex:none;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--mint) 22%,var(--surface));color:var(--accent);display:grid;place-items:center;font-weight:700}
.tb-cur>button,.tb-cur>a:not(.tb-cur-n){width:32px;height:32px;border-radius:8px;border:0;background:none;color:var(--muted);display:grid;place-items:center}
.tb-cur>button:hover,.tb-cur>a:not(.tb-cur-n):hover{background:var(--soft);color:var(--ink)}
@media (max-width:900px){.topbar{padding:8px 12px;flex-wrap:wrap}.tb-search{flex:1 1 200px}.tb-cur{margin-left:0;width:100%}.tb-cur-n{flex:1}}
/* sub navigation (Касс, Тохиргоо) */
.subtabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.subtabs>*{flex:none;border:0;background:none;padding:9px 12px;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;text-decoration:none;font-weight:500;cursor:pointer}
.subtabs>[aria-pressed="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
/* patient workspace */
.ws{max-width:1400px}
.ws-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px}
.ws-av{width:52px;height:52px;font-size:22px}
.ws-id h1{font-size:21px;margin:0}
.ws-meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:13px;margin-top:3px}.ws-meta a{color:inherit}
.ws-note{margin-top:6px;font-size:12.5px;color:var(--warn);background:var(--warn-bg);border-radius:8px;padding:4px 9px;display:inline-block}
.ws-bal{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.ws-bal span{font-size:12px;color:var(--muted)}.ws-bal b{font-family:var(--f-display);font-size:21px}
.ws-tabs{display:flex;gap:2px;overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;scrollbar-width:none;position:sticky;top:59px;z-index:9}
.ws-tabs a{flex:none;padding:8px 14px;border-radius:9px;text-decoration:none;color:var(--muted);font-weight:500;font-size:13.5px;display:flex;gap:6px;align-items:center}
.ws-tabs a:hover{background:var(--soft);color:var(--ink)}
.ws-tabs a.on{background:var(--accent);color:var(--accent-ink)}
.ws-tabs small{font-size:11px;background:color-mix(in srgb,currentColor 18%,transparent);border-radius:999px;padding:0 6px}
.ws-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:14px;align-items:start}
.ws-side{display:flex;flex-direction:column;gap:14px}
.ws-wide{grid-column:1/-1}
.ws-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:14px;align-items:start}
.ws-split.pay{grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr)}
.ws-tool{position:sticky;top:120px}
@media (max-width:1100px){.ws-grid,.ws-split,.ws-split.pay{grid-template-columns:minmax(0,1fr)}.ws-tool{position:static}}
@media (max-width:640px){.ws-head{grid-template-columns:auto minmax(0,1fr)}.ws-bal{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}.ws-tabs{top:104px}}
.big-line{margin:0;font-size:16px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px}.kv span{color:var(--muted);font-size:13px}.kv b{text-align:right;font-family:var(--f-mono)}
.mini-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.mini-list li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}.mini-list li:last-child{border:0}
.act{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.act li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;padding:8px 0 8px 14px;border-bottom:1px solid var(--line);position:relative;font-size:13.5px}
.act li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--muted)}

.act p{margin:0}
/* visit bar */
.vbar{flex-direction:row;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;padding:10px 14px}
.vbar label{display:flex;flex-direction:column;gap:3px;min-width:150px;flex:1}.vbar label span{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.vbar label.need select{border-color:var(--warn);background:var(--warn-bg)}
/* tooth chart */
.tchart{display:flex;flex-direction:column;gap:8px}

.tc-quick{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 11px;font-size:12.5px;color:var(--ink)}
.chip:hover{border-color:var(--accent)}.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.chip.ghost{color:var(--muted)}
.tc-scroll{overflow-x:auto;padding-bottom:4px}
.tc-jaw{width:100%;min-width:340px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:2px}
.tc-q{display:flex;justify-content:space-between;width:100%;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:0 6px}
.tc-row{display:flex;align-items:flex-end;gap:1px;width:100%;justify-content:center}
.tc-row+.tc-sep+.tc-row{align-items:flex-start}
.tc-mid{width:10px;align-self:stretch;border-left:1px dashed var(--line);margin-left:9px}
.tc-sep{width:100%;border-top:1px dashed var(--line);margin:4px 0}
.tooth{flex:var(--tk) 1 0;min-width:0;max-width:calc(var(--tw) * var(--tk) / 40 + 6px);display:flex;flex-direction:column;align-items:center;gap:1px;border:0;background:none;padding:3px 1px;border-radius:8px;cursor:pointer;transition:background .12s}
.tooth svg{display:block;overflow:visible;width:100%;height:auto}
.tooth:hover{background:var(--soft)}
.tooth.sel{background:color-mix(in srgb,var(--mint) 26%,transparent);box-shadow:inset 0 0 0 2px var(--mint)}
.tooth.missing svg{opacity:.55}
.tn{font-size:11px;font-family:var(--f-mono);color:var(--muted);line-height:1}
.tooth.sel .tn{color:var(--accent);font-weight:700}
.tchart.compact .tooth{pointer-events:none}
.tc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}.tc-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.cond-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.cond{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 10px;font-size:13px;font-weight:500}
.cond i{flex:none;width:12px;height:12px;border-radius:4px;background:var(--cc)}
.cond:hover{border-color:var(--cc);background:color-mix(in srgb,var(--cc) 8%,var(--surface))}
.cond:active{transform:scale(.98)}
.cdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:0}
.teeth{font-family:var(--f-mono);font-size:12px;background:var(--soft);border-radius:6px;padding:1px 6px;white-space:nowrap}
/* catalog picker */
.catpick{display:flex;flex-direction:column;gap:8px}
.cp-cols{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(0,1.6fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;max-height:330px}
.cp-cols.flat{grid-template-columns:minmax(0,1fr)}
.cp-cats,.cp-items{list-style:none;margin:0;padding:4px;overflow-y:auto;max-height:330px;min-height:0;overscroll-behavior:contain}
.cp-cats{background:var(--soft);border-right:1px solid var(--line)}
.cp-cats button{width:100%;display:flex;justify-content:space-between;gap:6px;text-align:left;border:0;background:none;border-radius:7px;padding:7px 9px;font-size:13px;color:var(--muted)}
.cp-cats button small{font-size:11px;opacity:.7}
.cp-cats button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.cp-items button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;border:0;background:none;border-radius:7px;padding:7px 9px;font-size:13px}
.cp-items button span{display:flex;flex-direction:column;min-width:0}.cp-items button small{color:var(--muted);font-size:11.5px}
.cp-items button em{font-style:normal;font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.cp-items button:hover{background:var(--soft)}
.cp-items button[aria-pressed="true"]{background:color-mix(in srgb,var(--mint) 18%,var(--surface));box-shadow:inset 0 0 0 1.5px var(--mint)}
.pick-sum{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--soft);border-radius:9px;padding:8px 11px;font-size:13.5px}
.tx-form{display:flex;flex-direction:column;gap:10px}
.plan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.plan-list li{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.plan-list li>span{flex:1;display:flex;flex-direction:column;min-width:0}.plan-list li small{color:var(--muted);font-size:12px}.plan-list li em{font-style:normal;font-family:var(--f-mono);font-size:12.5px}
.plan-list li.done{opacity:.55}
.plan-total{text-align:right;font-size:13px;color:var(--muted)}
/* tables */
.tbl tfoot td{font-weight:600;border-top:2px solid var(--line);border-bottom:0}
.tbl .c{text-align:center}.tbl td.ell{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl.sel tr.on td{background:color-mix(in srgb,var(--mint) 10%,transparent)}
.tbl.edit tr:hover td{cursor:default}
.tbl.edit input,.tbl.edit select{padding:5px 7px;font-size:13px}
.tbl.edit tr.off td{opacity:.5}
.pill.bad{color:var(--bad)}.pill.warn{color:var(--warn)}
.search.sm{max-width:220px;padding:6px 10px;font-size:13px}




.pd-split{display:flex;flex-direction:column;gap:6px}.pd-split select{width:130px}


.hint.warn{color:var(--warn)}







.stepper{display:flex;align-items:center;gap:8px}.stepper button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:16px}.stepper b{min-width:18px;text-align:center}
/* photos */
.ph-up{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.ph-up label{cursor:pointer}
.ph-day{margin:10px 0 4px;font-size:12.5px;color:var(--muted);font-family:var(--f-mono)}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ph-cell{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--soft);padding:0;display:grid;place-items:center}
.ph-cell img{width:100%;height:100%;object-fit:cover}
.ph-cell small{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.55);color:#fff;border-radius:6px;padding:1px 7px;font-size:11px}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(5,10,10,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px}
.lightbox img{max-width:100%;max-height:calc(100vh - 110px);border-radius:8px}
.lb-bar{display:flex;gap:8px;align-items:center;color:#fff;font-size:13px;flex-wrap:wrap;justify-content:center}
/* info */
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px 18px;margin:0}
.info-grid dt{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.info-grid dd{margin:2px 0 0;font-weight:500}




.card.wide{grid-column:1/-1}

/* calendar v2 */
.cal-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
.cal-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.cal-legend i.hatch{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bc) 35%,transparent) 0 4px,transparent 4px 8px);border:1px solid var(--bc)}
.dg-col{min-width:190px}
.dg-h{border-top:3px solid var(--dc,var(--line));display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:center;align-content:center}
.dg-h small{grid-column:2}
.dg-block{position:absolute;left:0;right:0;z-index:0;text-align:center;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bc) 16%,transparent) 0 6px,color-mix(in srgb,var(--bc) 6%,transparent) 6px 12px);border-top:1px solid color-mix(in srgb,var(--bc) 40%,transparent);pointer-events:none;padding-top:6px}
.dg-block span{position:sticky;top:50px;display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bc);background:var(--surface);border-radius:999px;padding:1px 8px;height:max-content}
.dg-now span{position:absolute;left:2px;top:-9px;background:var(--bad);color:#fff;font-size:10px;font-family:var(--f-mono);border-radius:4px;padding:1px 4px}
.dg-appt{border-left-color:var(--dc);background:color-mix(in srgb,var(--dc) 13%,var(--surface));display:flex;flex-direction:column;gap:1px;text-align:left;padding:4px 7px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.dg-appt.st-arrived{border-left-color:var(--sc);background:color-mix(in srgb,var(--sc) 16%,var(--surface))}
.dg-appt.st-done{border-left-color:var(--sc);background:color-mix(in srgb,var(--sc) 10%,var(--surface));opacity:.8}
.dg-appt.st-noshow{border-left-color:var(--sc);background:var(--bad-bg)}
.dg-l1{display:flex;justify-content:space-between;gap:4px;min-width:0}.dg-l1 b{font-size:12px;color:var(--dc)}
.dg-appt.st-arrived .dg-l1 b{color:var(--ink)}
.dg-ic{display:flex;gap:3px;flex:none}.dg-ic i{font-style:normal;font-size:10px;font-weight:700;background:var(--ok);color:#fff;border-radius:4px;padding:0 4px}
.dg-note{color:var(--warn)!important}
.dg-col:not(:nth-child(2)) .dg-now span{display:none}


.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:13px}
.legend li{display:flex;justify-content:space-between;gap:10px;align-items:center}.legend li i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.legend li>:first-child{flex:1}
/* appointment quick menu (right-click / long-press) */
.ctx{position:fixed;z-index:120;width:268px;background:#1d2b4f;color:#e8eefc;border-radius:14px;box-shadow:0 24px 60px -12px rgba(0,0,0,.5);padding:6px;display:flex;flex-direction:column;font-size:14px;animation:ctxin .12s ease-out}
@keyframes ctxin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.ctx-h{padding:10px 12px 10px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:4px}.ctx-h b{display:block;font-size:13.5px;line-height:1.3;text-transform:uppercase}.ctx-h small{color:rgba(232,238,252,.65);font-size:12px}
.ctx>button,.ctx>a{display:flex;align-items:center;gap:12px;border:0;background:none;color:#cfe0ff;text-align:left;padding:10px 12px;border-radius:9px;text-decoration:none;font-weight:500;cursor:pointer}
.ctx>button:hover,.ctx>a:hover{background:rgba(255,255,255,.08)}
.ctx .ci{width:18px;text-align:center;font-size:15px}
.ctx .ok{color:#6ee7a8}.ctx .warn{color:#fdba74}.ctx .info{color:#7dd3fc}.ctx .msg{color:#c4b5fd}.ctx .bad{color:#fca5a5}
.ctx-sep{height:1px;background:rgba(255,255,255,.12);margin:4px 6px}
.ctx-colors{padding:8px 12px;display:flex;flex-direction:column;gap:8px}.ctx-colors>span{font-size:12px;color:rgba(232,238,252,.7);font-weight:600}
.ctx-colors>div{display:grid;grid-template-columns:repeat(6,26px);gap:9px;align-items:center}
.ctx-colors>div>button{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.2);padding:0;cursor:pointer}
.ctx-colors>div>button.on{border-color:#fff;box-shadow:0 0 0 2px #1d2b4f inset}
.ctx-custom{grid-column:span 3;display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(232,238,252,.75);cursor:pointer}
.ctx-custom input{width:44px;height:26px;padding:1px;border-radius:6px;border:1px solid rgba(255,255,255,.25);background:none}
.ctx-reset{grid-column:span 3;border:0;background:rgba(255,255,255,.08);color:#cfe0ff;border-radius:8px;font-size:12px;padding:5px 8px;cursor:pointer}
.dg-appt.st-cancelled{opacity:.45;text-decoration:line-through;background:var(--soft);border-left-color:var(--muted)}
/* quick appointment card */
.adet{display:flex;flex-direction:column}
.adet-h{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.adet-h img{width:34px;height:34px;object-fit:contain}.adet-h h2{font-size:15px;text-transform:uppercase;letter-spacing:.02em;margin:0;flex:1}
.adet-h .pill{background:color-mix(in srgb,var(--sc) 14%,transparent);color:var(--sc);font-size:12px;padding:3px 10px;border-radius:99px;font-weight:600}
.adet-h .x{border:0;background:none;font-size:24px;color:var(--muted);cursor:pointer;line-height:1}
.adet-b{padding:18px 22px;display:flex;flex-direction:column;gap:10px}
.adet-l{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:6px}
.adet-l.s{color:#2f78c4}.adet-l.e{color:#e0534f}
.adet-who{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--accent) 22%,transparent);background:color-mix(in srgb,var(--accent) 6%,var(--surface));text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.adet-who:disabled{cursor:default}.adet-who b{flex:1;font-size:14px;color:var(--accent)}.adet-who .go{font-size:22px;color:var(--muted)}
.adet-who .av{width:42px;height:42px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:17px;flex:none}
.adet-reason{font-size:13px;color:var(--muted);margin-top:-4px;padding-left:4px}
.adet-sel{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:6px 8px 6px 10px;margin-top:6px}
.adet-sel span{font-size:11px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:5px 9px;border-radius:8px}
.adet-sel select{flex:1;width:auto;border:0;background:none;font-weight:600;font-size:14px;padding:8px 4px}
.adet-time{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.adet-dt small{display:none}.adet-dt .dpk-f{padding:0 8px;gap:6px}
.adet-dt{display:flex;align-items:center;background:var(--soft);border-radius:12px;padding:3px 6px;margin-top:6px}
.adet-dt .dpk{flex:1;min-width:0}.adet-dt .tpk{flex:none;border-left:1px solid var(--line)}.adet-dt .dpk-f{border:0;background:none;height:40px}
.adet-len{font-size:12px;color:var(--muted);text-align:right;margin-top:-4px}
.adet-opt{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:12px;padding:12px 14px;font-size:14px;cursor:pointer}
.adet-opt input{width:18px;height:18px;accent-color:var(--accent);margin:0}
.adet textarea{background:var(--soft);border:0;border-radius:12px;padding:12px 14px;font:inherit;resize:vertical;min-height:80px}
.adet-f{padding:16px 22px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.adet-f .btn.primary{width:100%;justify-content:center;padding:14px;border-radius:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.adet-del{border:0;background:#fdeeee;color:#d33;border-radius:12px;padding:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;font-size:13px}
.adet-more{border:0;background:none;color:var(--muted);font-size:12.5px;cursor:pointer;padding:2px}
.adet-more:hover{color:var(--accent)}
@media (max-width:640px){.adet-time{grid-template-columns:1fr}}

/* ---------- Apple-style motion & pickers ---------- */
:root{--spring:cubic-bezier(.32,.72,0,1);--ease-out:cubic-bezier(.22,1,.36,1);--glass:rgba(255,255,255,.82);--today:#ff3b30}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--glass:rgba(32,40,48,.82);--today:#ff6961}}
:root[data-theme="dark"]{--glass:rgba(32,40,48,.82);--today:#ff6961}
html{-webkit-font-smoothing:antialiased}
/* overlays: blurred backdrop, spring-in panels, bottom sheet on phones */
.ovl{background:rgba(10,18,26,.32);-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);animation:fade .24s var(--ease-out)}
.panel.modal{border-radius:20px;animation:popIn .38s var(--spring);box-shadow:0 30px 80px -20px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.04)}
.panel.sheet{animation:inR .38s var(--spring)}.panel.lsheet{animation:inL .38s var(--spring)}
@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:640px){.ovl-center{align-items:flex-end;padding:0}.ovl-center .panel.modal{border-radius:22px 22px 0 0;min-height:0;max-height:94vh;overflow-y:auto;animation:sheetUp .42s var(--spring)}
  .ovl-center .panel.modal::before{content:"";display:block;width:38px;height:5px;border-radius:3px;background:var(--line);margin:8px auto -4px;flex:none}}
/* tactile buttons */
.btn,.adet-del,.adet-who,.adet-opt,.dpk-f,.dpop button,.ctx>button,.chips button,.seg button,.dg-appt{transition:transform .18s var(--ease-out),background-color .18s,box-shadow .2s,border-color .18s,color .18s}
.btn:active,.adet-del:active,.adet-who:active:not(:disabled),.adet-opt:active,.dpk-f:active,.dpop button:active,.ctx>button:active,.chips button:active,.seg button:active{transform:scale(.97)}
.dg-appt:hover{box-shadow:0 6px 18px -6px rgba(0,0,0,.25);z-index:3}
.toast{animation:toastIn .4s var(--spring);border-radius:14px}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
.ctx{animation:ctxin .22s var(--spring);transform-origin:top left;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:rgba(29,43,79,.94)}
@keyframes ctxin{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.adet-opt input{transition:transform .2s var(--spring)}.adet-opt input:checked{transform:scale(1.08)}
/* date / time field */
.dpk{position:relative;display:inline-flex;width:100%}
.dpk-f{display:flex;align-items:center;gap:8px;width:100%;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
.dpk-f svg{color:var(--muted);flex:none}.dpk-f>span{flex:1;overflow:hidden;text-overflow:ellipsis}.dpk-f small{color:var(--muted);font-weight:500;font-size:12px}
.dpk-f.nov>span{color:var(--muted);font-weight:500}
.dpk-f:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.dpk-f.on{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.tpk{width:auto}.tpk .dpk-f{gap:6px;padding:0 12px}
.toolbar .dpk{width:auto}.toolbar .dpk-f{min-width:178px}
.dpk-req{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;bottom:0;left:20px}
/* popover */
.dpop{position:fixed;z-index:400;width:300px;padding:12px;border-radius:18px;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 24px 60px -16px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.12);color:var(--ink);transform-origin:top left;animation:dpIn .3s var(--spring)}
.dpop.up{transform-origin:bottom left}
@keyframes dpIn{from{opacity:0;transform:scale(.92) translateY(-4px)}to{opacity:1;transform:none}}
.dpop-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}


.dpop-nav{border:0;background:none;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;color:var(--accent);cursor:pointer}
.dpop-nav:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.dpop-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;animation:fade .25s var(--ease-out)}
.dpop-w{text-align:center;font-size:11px;font-weight:600;color:var(--muted);padding:4px 0 6px;text-transform:uppercase}
.dpop-d{aspect-ratio:1;border:0;background:none;border-radius:50%;font:inherit;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.dpop-d.we{color:var(--muted)}
.dpop-d:hover:not(:disabled):not(.sel){background:color-mix(in srgb,var(--ink) 7%,transparent)}
.dpop-d.tod{color:var(--today);font-weight:700}
.dpop-d.sel{background:var(--accent);color:var(--accent-ink);font-weight:700;box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent) 70%,transparent)}
.dpop-d.sel.tod{background:var(--today);color:#fff}
.dpop-d:disabled{opacity:.25;cursor:default}
.dpop-f{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:.5px solid var(--line)}
.dpop-f button{flex:1;border:0;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent);font:inherit;font-size:13px;font-weight:600;padding:8px;border-radius:10px;cursor:pointer}
.dpop-f button.clr{background:none;color:var(--muted);flex:none}





.tpop{width:136px;padding:6px}
.tpop-l{max-height:252px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth;overscroll-behavior:contain;position:relative}
.tpop-l button{border:0;background:none;font:inherit;font-size:15px;font-weight:500;color:var(--ink);padding:8px 12px;border-radius:9px;text-align:center;cursor:pointer;font-variant-numeric:tabular-nums}
.tpop-l button.hr{font-weight:700}
.tpop-l button:hover:not(.sel){background:color-mix(in srgb,var(--ink) 7%,transparent)}
.tpop-l button.sel{background:var(--accent);color:var(--accent-ink);font-weight:700}
@media (max-width:640px){.dpop{width:min(330px,calc(100vw - 16px))}.dpop-d{font-size:16px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.dpop-sels{display:flex;gap:6px}
.dpop-sels label{position:relative;display:block}
.dpop-sels label::after{content:"";position:absolute;right:10px;top:50%;width:6px;height:6px;border:solid var(--muted);border-width:0 1.6px 1.6px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.dpop-sels select{appearance:none;-webkit-appearance:none;width:auto;height:34px;padding:0 26px 0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .18s,box-shadow .18s}
.dpop-sels select:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.dpop-sels select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.dpop-d{border-radius:10px}
.dpop-d.out{color:var(--muted);opacity:.45}
.dpop-d.sel{border-radius:10px}
.dpop-d.tod:not(.sel){box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--today) 45%,transparent)}

.tooth{transition:background .18s,box-shadow .18s,transform .25s var(--spring)}.tooth:active{transform:scale(.94)}.tooth.sel svg{filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--mint) 45%,transparent))}
/* teeth picker with small tooth drawings + drag select */
.fdi.pic{gap:3px 2px;touch-action:none;user-select:none;-webkit-user-select:none}
.fdi.pic button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 0 2px;font-size:11px;line-height:1.1;cursor:pointer}
.fdi.pic button b{font-weight:600}
.fdi.pic .mt-ic{height:30px;width:auto;display:block;pointer-events:none}
.fdi.pic .mt-c,.fdi.pic .mt-r{fill:var(--tooth,#fbf8f1);stroke:var(--tooth-line,#b9ae9a);stroke-width:3}
.fdi.pic .mt-r{fill:var(--tooth-root,#f1e6d2)}
.fdi.pic .mt-l{fill:none;stroke:var(--tooth-line,#b9ae9a);stroke-width:2}
.fdi.pic button[aria-pressed="true"] .mt-c,.fdi.pic button[aria-pressed="true"] .mt-r{fill:rgba(255,255,255,.92);stroke:rgba(255,255,255,.6)}
.fdi.pic button[aria-pressed="true"] .mt-l{stroke:var(--tc,var(--accent))}
.fdi.pic button b{pointer-events:none}

.fdi-wrap:has(.fdi.pic) .fdi-cap,.fdi.pic{min-width:0}
.fdi.pic{grid-template-columns:repeat(16,minmax(0,1fr))}
@media (max-width:560px){.fdi.pic{gap:2px 1px}.fdi.pic button{font-size:9.5px;border-radius:4px;padding:2px 0}.fdi.pic button.mid{margin-left:3px}.fdi.pic .mt-ic{height:22px}}
/* VITA shade picker */
.shd{display:flex;flex-direction:column;gap:6px}
.shd-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shd-cur{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.shd-row{display:flex;flex-wrap:wrap;gap:4px;align-items:stretch}
.shd-g{display:flex;flex-direction:column;justify-content:center;width:74px;line-height:1.15}
.shd-g b{font-size:13px}.shd-g small{font-size:10.5px;color:var(--muted)}
.shd-b{display:flex;flex-direction:column;align-items:center;gap:2px;width:44px;padding:5px 0 3px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer}
.shd-b svg{width:20px;height:26px;display:block}
.shd-b svg path{stroke:rgba(90,70,40,.35);stroke-width:.8}
.shd-b b{font-size:11px;font-weight:600;font-family:var(--f-mono)}
.shd-b[aria-pressed="true"]{border:2px solid var(--accent);padding:4px 0 2px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}

.shd-dot{display:inline-block;width:var(--sz);height:calc(var(--sz)*1.2);background:var(--shd);border:1px solid rgba(90,70,40,.35);border-radius:45% 45% 40% 40%/35% 35% 60% 60%;vertical-align:-2px;margin-right:3px}
.fdi.pic button.shaded[aria-pressed="true"]{background:var(--surface);color:var(--accent);border:2px solid var(--accent)}
.fdi.pic button.shaded[aria-pressed="true"] .mt-c{fill:var(--shd);stroke:#8a7650}
.fdi.pic button.shaded[aria-pressed="true"] .mt-r{fill:var(--tooth-root,#f1e6d2);stroke:var(--tooth-line,#b9ae9a)}
.fdi.pic button.shaded[aria-pressed="true"] .mt-l{stroke:#8a7650}
@media (max-width:560px){.shd-g{width:100%;flex-direction:row;justify-content:flex-start;gap:6px;align-items:baseline;margin-top:4px}.shd-b{width:40px}}

/* loading: only the SANORA mark, with a band of light sweeping across it and a sparkle (all pages) */
.boot.load{gap:0}
.ld{--mk-t:2.2s;position:relative;display:inline-block;width:92px;aspect-ratio:256/245;animation:ldIn .4s ease-out both}
.ld.sm{width:44px}
.ld-in{display:flex;justify-content:center;padding:40px 0}
.ld-mark,.ld .mk-run{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.mk-wrap{position:absolute;inset:0}
.mk-run path{fill:none;stroke:#fff;stroke-width:38;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:6 200;stroke-dashoffset:6;opacity:var(--o,1);filter:blur(1.2px);
  animation:mkRun var(--mk-t,2.2s) cubic-bezier(.5,.02,.5,1) infinite;animation-delay:calc(var(--mk-t,2.2s) * var(--k,0) * .0075)}
.mk-run path.g{stroke-width:38;stroke-dasharray:16 200;stroke-dashoffset:16;stroke-linecap:round;opacity:.5;filter:blur(6px);animation-name:mkRunG}
.mk-run path.c{stroke-dasharray:18 200;stroke-dashoffset:18;animation-name:mkRunC;animation-timing-function:ease-in}
.mk-run path.g.c{stroke-dasharray:40 200;stroke-dashoffset:40;animation-name:mkRunCG}
.mk-flash{position:absolute;inset:0;background:#fff;opacity:0;-webkit-mask:var(--art,url(../assets/mark.png)) center/contain no-repeat;mask:var(--art,url(../assets/mark.png)) center/contain no-repeat;
  animation:mkFlash var(--mk-t,2.2s) ease-out infinite;pointer-events:none}
.ld .mk-flash{-webkit-mask-image:url(../assets/mark.png);mask-image:url(../assets/mark.png)}
@keyframes mkRun{0%,6%{stroke-dashoffset:6}64%,100%{stroke-dashoffset:-100}}
@keyframes mkRunG{0%,6%{stroke-dashoffset:16}64%,100%{stroke-dashoffset:-100}}
@keyframes mkRunC{0%,52%{stroke-dashoffset:18}66%,100%{stroke-dashoffset:-100}}
@keyframes mkRunCG{0%,52%{stroke-dashoffset:40}66%,100%{stroke-dashoffset:-100}}
@keyframes mkFlash{0%,63%{opacity:0}69%{opacity:.7}92%,100%{opacity:0}}
.ld::after{content:"";position:absolute;right:12%;bottom:-10%;width:30%;aspect-ratio:1;background:#2fd3ae;filter:drop-shadow(0 0 5px rgba(47,211,174,.8));
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:ldTing 2.2s ease-in-out infinite}
@keyframes ldShine{0%,15%{background-position:100% 0,0 0}70%,100%{background-position:0% 0,0 0}}
@keyframes ldTing{0%,62%{opacity:0;transform:scale(.2) rotate(-45deg)}72%{opacity:1;transform:scale(1) rotate(0)}90%,100%{opacity:0;transform:scale(.2) rotate(45deg)}}
@keyframes ldIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ld,.ld-mark,.ld::after,.mk-run path,.mk-flash{animation:none}.mk-run,.mk-flash{display:none}}

/* settings: VITA shade codes */
.scd-tbl{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.scd-g{display:flex;flex-direction:column;gap:6px}.scd-g>b{font-size:13px;color:var(--muted)}
.scd-r{display:grid;grid-template-columns:22px 44px repeat(3,minmax(0,1fr)) 70px;gap:6px;align-items:center}
.scd-r i{width:22px;height:30px;border-radius:7px 7px 10px 10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.scd-r label{display:flex!important;flex-direction:column;gap:1px;margin:0;font-weight:400}.scd-r small{font-size:10px;color:var(--muted)}.scd-r input{padding:4px 6px!important;font-size:13px;min-width:0;width:100%;height:30px}
.scd-r .sub{font-size:11px}

/* treatment sheet: implant details */
.impl-f{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:var(--soft)}
.impl-h{font-size:13px}.impl-r{display:flex;flex-direction:column;gap:4px}.impl-r small{color:var(--muted);font-size:11.5px}
.impl-r .chips{display:flex;flex-wrap:wrap;gap:5px}.impl-sum{margin:0;font-size:12.5px}
/* tooth picker: a little space between the sectors (posterior | anterior | posterior) and between the jaws */
.fdi.pic{row-gap:10px}
.fdi.pic button.mid{margin-left:9px}
.fdi.pic button[data-pt="13"],.fdi.pic button[data-pt="43"],.fdi.pic button[data-pt="24"],.fdi.pic button[data-pt="34"]{margin-left:6px}
.cp-items button.hi{background:var(--soft);box-shadow:inset 3px 0 0 var(--mint)}
.orth-h{display:flex;flex-direction:column;gap:3px}.orth-h small{color:var(--muted);font-size:11.5px}.orth-h ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:120px;overflow:auto}
.orth-h li{display:flex;gap:8px;align-items:baseline;font-size:12.5px}.orth-h li .mono{color:var(--muted);min-width:44px}.orth-h li em{font-style:normal;color:var(--muted);font-size:11.5px;margin-left:auto}

/* online request note inside the booking form */
.nf-req{margin:10px 0 4px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--mint,#2bd4b0) 10%,transparent);border:1px solid color-mix(in srgb,var(--mint,#2bd4b0) 35%,transparent)}
.nf-req-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.nf-req-h b{font-size:13px}.nf-req-h small{color:var(--muted);font-size:12px}
.nf-req-z{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.nf-req-z span{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;color:inherit;background:color-mix(in srgb,var(--mint,#2bd4b0) 22%,transparent)}
.nf-req-t{margin:8px 0 0;font-size:14px;line-height:1.45;white-space:pre-wrap}
.nf-req-t.none{color:var(--muted);font-size:13px}











































/* booking form: the doctor's mini day beside it */
.nf-split{display:grid;grid-template-columns:minmax(0,1fr) 330px;align-items:start}
.nf-split>.adet-b{min-width:0}
.nf-mini{position:sticky;top:0;margin:18px 22px 18px 0;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.nfm-h{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;padding-left:8px;border-left:3px solid var(--dc)}
.nfm-h b{font-size:14px}.nfm-h small{font-size:12px;color:var(--muted)}
.nfm-off{margin:0;color:var(--muted);font-size:13px}
.nfm-g{position:relative;margin:14px 0 6px 42px;user-select:none}.nfm-g.drag,.nfm-g.drag *{cursor:grabbing!important}
.nfm-l{position:absolute;left:0;right:0;border-top:1px dashed color-mix(in srgb,var(--line) 70%,transparent)}
.nfm-l.hr{border-top:1px solid var(--line)}
.nfm-l span{position:absolute;left:-42px;top:-7px;width:36px;text-align:right;font-size:10.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.nfm-a,.nfm-new,.nfm-b{position:absolute;left:2px;right:2px;border-radius:7px;font-size:11.5px;line-height:1.25;padding:2px 7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default}
.nfm-a{background:color-mix(in srgb,var(--rc) 16%,var(--surface));border-left:3px solid var(--rc);color:var(--ink)}
.nfm-a b{font-variant-numeric:tabular-nums}.nfm-a small{display:block;color:var(--muted);font-size:10.5px}
.nfm-a.st-done,.nfm-a.st-noshow{opacity:.55}
.nfm-b{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bc) 22%,transparent) 0 6px,transparent 6px 12px);border:1px solid color-mix(in srgb,var(--bc) 45%,transparent);color:var(--bc);font-weight:700;font-size:11px}
.nfm-new{border:2px dashed var(--mint);background:color-mix(in srgb,var(--mint) 14%,transparent);color:var(--ink);z-index:2;cursor:grab;touch-action:none;transition:top .12s ease,opacity .15s,transform .15s}
.nfm-new:hover{background:color-mix(in srgb,var(--mint) 24%,transparent);box-shadow:0 3px 10px rgba(0,0,0,.12)}
.nfm-new::after{content:"⋮⋮";position:absolute;right:7px;top:50%;transform:translateY(-50%);font-size:10px;letter-spacing:-2px;opacity:.5}
.nfm-new.lift{opacity:.35}
.nfm-new.bad{border-color:var(--bad,#dc2626);background:color-mix(in srgb,var(--bad,#dc2626) 12%,transparent)}
@media (max-width:900px){.nf-split{grid-template-columns:1fr}.nf-mini{position:static;margin:0 22px 18px}}

.nfm-sel{position:relative;display:flex;align-items:center;gap:8px;padding:5px 30px 5px 5px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
.nfm-sel:hover{border-color:var(--dc)}.nfm-sel:focus-within{border-color:var(--dc);box-shadow:0 0 0 3px color-mix(in srgb,var(--dc) 20%,transparent)}
.nfm-sel i{font-style:normal;flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--dc);color:#fff;font-size:12px;font-weight:700}
.nfm-sel select{all:unset;flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer}
.nfm-sel select option{color:#111;background:#fff;font-weight:500}
.nfm-sel::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.nfm-h:has(.nfm-sel){border-left:0;padding-left:0}

.nfm-ghost{position:absolute;left:0;right:0;border-radius:8px;font-size:11.5px;line-height:1.25;padding:2px 7px;white-space:nowrap;overflow:hidden;z-index:3;pointer-events:none;
  border:2px solid var(--mint);background:color-mix(in srgb,var(--mint) 22%,var(--surface));color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.18);transform:scale(1.03)}
.nfm-ghost.bad{border-color:var(--bad,#dc2626);background:color-mix(in srgb,var(--bad,#dc2626) 16%,var(--surface))}

.nfm-offs{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.nfm-offs span{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;color:var(--bc);background:color-mix(in srgb,var(--bc) 14%,transparent)}
.nfm-b span{display:block;background:color-mix(in srgb,var(--surface) 80%,transparent);border-radius:5px;padding:1px 5px;width:max-content;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* outside working hours in the mini day: shaded, with a firm line where the day ends */
.nfm-out{position:absolute;left:0;right:0;pointer-events:none;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 14%,transparent) 0 5px,transparent 5px 11px);z-index:0}
.nfm-out span{position:absolute;left:4px;top:4px;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;background:var(--soft);padding:0 5px;border-radius:4px}
.nfm-out.after{border-top:2px solid var(--bad,#dc2626)}
.nfm-out.after span{color:var(--bad,#dc2626);top:3px}
.nfm-out.all span{top:auto;bottom:6px}
.nfm-a,.nfm-b{z-index:1}

/* day grid: time outside working hours (only shown when something is booked there) */
.dg-out{position:absolute;left:0;right:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 13%,transparent) 0 6px,transparent 6px 13px)}
.dg-out span{position:absolute;left:8px;top:4px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.dg-out.after{border-top:2px solid var(--bad,#dc2626)}.dg-out.after span{color:var(--bad,#dc2626)}
.dg-out.all span{top:8px}

.rq-emb{display:flex;flex-direction:column;gap:14px}
.cal-tools .seg button small{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:var(--bad,#dc2626);color:#fff;font-size:11px;font-weight:700}


/* requests: one card per request — date tile, time beside it, note under the name */
.rqv{cursor:default}.rqv:active{transform:none}
.rqv-time{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.rqv-doc{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);font-weight:600}
.rqv-doc i{width:8px;height:8px;border-radius:50%;background:var(--dc)}
.rqv .rq-reason{font-size:12px}
.rqv .vd-what a{color:inherit;text-decoration:none}.rqv .vd-what a:hover{text-decoration:underline}.rqv-ph{color:var(--muted);font-weight:400;font-size:13px}.rqv-ph a{color:inherit}
.rqv-note{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rqv-note.bad{color:var(--bad)}
.rqv-act{display:flex;align-items:center;gap:6px;flex:none}
.rqv-act .rq-decl{display:flex;gap:6px;align-items:center}.rqv-act .rq-decl input{width:220px}
@media (max-width:760px){.rqv{flex-wrap:wrap}.rqv-act{width:100%;justify-content:flex-end}.rqv-act .rq-decl input{width:100%}}

/* staff details form (same look as the client card) + short CV */
.pf2-sec.s-em{--sc:#d14343}.pf2-sec.s-bk{--sc:#0f766e}.pf2-sec.s-ed{--sc:#6d4ed1}.pf2-sec.s-lc{--sc:#c98a12}.pf2-sec.s-wk{--sc:#2f78c4}
.pf2-sec.s-ce{--sc:#b45309}.pf2-sec.s-lg{--sc:#0e7490}.pf2-sec.s-sk{--sc:#a16207}
.sf .pf2-sec select{background:var(--surface)}
.sf-chips{display:flex;flex-wrap:wrap;gap:6px}
.sf-chips button{all:unset;cursor:pointer;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--ink)}
.sf-chips button.on{background:color-mix(in srgb,var(--sc,var(--mint)) 16%,var(--surface));border-color:var(--sc,var(--mint));font-weight:600}
.sf-chips button:focus-visible{outline:2px solid var(--mint)}
.sf-rows{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
.sf-row{position:relative;padding:10px 36px 10px 10px;border-radius:12px;background:var(--surface);border:1px solid color-mix(in srgb,var(--sc) 18%,var(--line))}
.sf-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:center}
.sf-g>*{min-width:0}.sf-g .sf-w2{grid-column:span 2}.sf-g .sf-full{grid-column:1/-1}
.sf-g input,.sf-g select,.sf-g textarea{width:100%;box-sizing:border-box}
.sf-yrs{display:flex;align-items:center;gap:6px}.sf-yrs i{font-style:normal;color:var(--muted)}.sf-yrs .sf-yr{flex:1;min-width:0}
.sf-yr{text-align:center}
.sf-g.sf-lang{grid-template-columns:minmax(0,1fr) auto}
.sf-del{all:unset;cursor:pointer;position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:16px}
.sf-del:hover{background:var(--bad-bg,#fee2e2);color:var(--bad,#dc2626)}
.sf-add{all:unset;cursor:pointer;align-self:flex-start;padding:7px 12px;border-radius:10px;font-size:13px;font-weight:600;color:color-mix(in srgb,var(--sc) 85%,#000);background:color-mix(in srgb,var(--sc) 10%,transparent)}
.sf-add:hover{background:color-mix(in srgb,var(--sc) 18%,transparent)}
.sf-empty{margin:2px 0;font-size:13px;color:var(--muted)}
.sf-h{border-bottom:1px solid var(--line)}.sf-note{margin:12px 20px 0}
/* first-login page */
.sf-ob .sf{background:var(--surface);border-radius:20px;box-shadow:var(--sh-card);overflow:hidden}
.sf-ob .sf section{box-shadow:none;padding:12px 14px 6px;border-radius:14px;gap:0}
.sf-ob .pfoot{position:sticky;bottom:0}
.sf-ob-foot{display:flex;align-items:center;gap:14px}.sf-ob-foot .ob-ok{margin:0;font-size:13px}
.sf-priv{text-align:center;margin:0}
@media (max-width:640px){.sf-g{grid-template-columns:1fr 1fr}.sf-g .sf-w2{grid-column:1/-1}}
.sf-ob .pf2-sec{background:color-mix(in srgb,var(--sc) 6%,var(--surface));border:1px solid color-mix(in srgb,var(--sc) 16%,transparent)}
.sf-ob .pform{min-height:0;height:auto}
.sf-row{background:color-mix(in srgb,var(--sc) 3%,var(--surface))}
.sf-g input,.sf-g select,.sf-g textarea{border:1px solid var(--line)!important;border-radius:9px}

/* ---------- Цалин, ашиг (js/views/payroll.js) ---------- */
.hr .sp{flex:1}
.hr-mnav{display:flex;align-items:center;gap:8px}.hr-mnav b{min-width:150px;text-align:center;font-size:15px}
.hr-note{background:var(--warn-bg);color:var(--ink);border-radius:12px;padding:10px 14px;font-size:13.5px;line-height:1.5}
.hr-note.soft{background:var(--soft);color:var(--muted)}.hr-note b{color:var(--ink)}
.hr-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:14px;align-items:start}
.hr-side{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (max-width:980px){.hr-cols{grid-template-columns:minmax(0,1fr)}}
.hr-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.hr-h h3{margin:0}
.hr-h4{margin:14px 0 6px;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.hr-h4 small{text-transform:none;letter-spacing:0;font-weight:400}
.pls{display:flex;flex-direction:column}
.pl{display:grid;grid-template-columns:minmax(0,1fr) 90px auto 52px;gap:10px;align-items:center;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14px}
.pl i{height:6px;border-radius:3px;background:var(--soft);position:relative;overflow:hidden}
.pl i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:color-mix(in srgb,var(--bad) 55%,transparent);border-radius:3px}
.pl.inc i::after{background:color-mix(in srgb,var(--accent) 70%,transparent)}
.pl b{font-family:var(--f-mono);font-weight:500;text-align:right}.pl small{color:var(--muted);font-size:12px;text-align:right}
.pl.tot{border-bottom:2px solid var(--ink);font-weight:600}.pl.tot b{font-weight:700}.pl.tot i::after{background:var(--muted)}
.pl.net{border:0;font-size:16px;padding-top:12px}.pl.net.ok b{color:var(--ok)}.pl.net.bad b{color:var(--bad)}.pl.net.ok i::after{background:var(--ok)}.pl.net.bad i::after{background:var(--bad)}
.pl-sub{display:flex;flex-direction:column;padding:2px 0 6px 14px;border-bottom:1px solid var(--line)}
.pl-sub>div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);padding:3px 64px 3px 0}.pl-sub b{font-family:var(--f-mono);font-weight:400}
.hkv{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.hkv>span:first-child{color:var(--muted)}.hkv b{font-family:var(--f-mono);font-weight:500}.hkv.tot{border-bottom:0;font-weight:600}.hkv.tot b{font-weight:700}.hkv.sm{padding:4px 0;font-size:13px}
.hr-fine{font-size:12.5px;line-height:1.5;margin:4px 0 0}
.hr-trend{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;height:140px;align-items:end}
.ht{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}.ht small{color:var(--muted);font-size:11.5px}
.ht-b{flex:1;width:100%;display:flex;gap:3px;align-items:flex-end;justify-content:center}
.ht-b i,.hr-leg i{display:block;width:14px;border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--accent) 45%,transparent);min-height:2px}
.ht-b i.n,.hr-leg i.n{background:var(--ok)}.ht-b i.neg,.hr-leg i.neg{background:var(--bad)}
.hr-leg{display:flex;gap:14px;font-size:12px;color:var(--muted)}.hr-leg span{display:flex;align-items:center;gap:5px}.hr-leg i{width:10px;height:10px;border-radius:3px;min-height:0}
.hr-tbl td.r,.hr-tbl th.r{text-align:right;white-space:nowrap}.hr-tbl td{vertical-align:middle}
.hr-tbl.det{font-size:12.5px}.hr-tbl.det td,.hr-tbl.det th{padding:7px 6px}
.hr-tbl tr.hr-grp td{background:var(--soft);font-weight:600;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;cursor:default}
.hr-tbl tr.hr-grp small{font-weight:400}
.hr-tbl tr.hr-sub td{color:var(--muted);font-size:12.5px;cursor:default}.hr-tbl tr.hr-tot td{border-top:2px solid var(--ink);font-weight:600;cursor:default;background:none}
.hr-tbl tr.hr-grp2 td{font-weight:600}.hr-tbl tr.hr-it td:first-child{padding-left:22px;color:var(--muted)}
.hr-tbl tr.nohover:hover td,.hr-tbl tr.hr-grp:hover td,.hr-tbl tr.hr-tot:hover td,.hr-tbl tr.hr-sub:hover td{cursor:default}
.hr-tbl tr.nohover:hover td{background:none}
.hr-tbl b.ok,.hr b.ok{color:var(--ok)}.hr-tbl b.bad{color:var(--bad)}.hr-tbl .warn{color:var(--warn)}
.hr-amt{width:120px;text-align:right;font-family:var(--f-mono);padding:6px 9px;font-size:13px}
.hr-cost .hr-amt{background:var(--soft);border-color:transparent}.hr-cost .hr-amt:focus{background:var(--surface)}
.mg{display:inline-block;min-width:48px;text-align:center;font-size:12px;font-weight:600;border-radius:999px;padding:2px 7px}
.mg.ok{background:var(--ok-bg);color:var(--ok)}.mg.warn{background:var(--warn-bg);color:var(--warn)}.mg.bad{background:var(--bad-bg);color:var(--bad)}
.hr-pct{display:inline-flex;align-items:center;gap:4px}.hr-pct input{width:64px;text-align:right;padding:6px 8px}.hr-pct i{font-style:normal;color:var(--muted)}
.hr-pct.big input{width:100px;font-size:18px;font-weight:600}
.hr-x{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}.hr-x input{width:52px;text-align:right;padding:6px 8px}
.hr-q{width:220px}.hr-sel{width:auto}
.hr-pre{display:flex;gap:8px;margin-bottom:4px}
.hr-staff h4{margin:12px 0 4px;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.hr-staff h4 small{font-weight:400}
.hs{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 8px;border:0;border-bottom:1px solid var(--line);background:none;color:inherit;font:inherit;cursor:pointer;border-radius:8px}
.hs:hover{background:var(--soft)}.hs.off{opacity:.55}
.hs-av{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--muted);color:#fff;font-weight:600}
.hs-t{flex:1;min-width:0;display:flex;flex-direction:column}.hs-t small{color:var(--muted);font-size:12.5px}
.hs-n{display:flex;flex-direction:column;align-items:flex-end;font-size:12.5px}.hs-n small{color:var(--muted);font-size:11px}
.hs .sr-chev{color:var(--muted);font-size:20px}
.hr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}.hr-grid .full{grid-column:1/-1}
@media (max-width:560px){.hr-grid{grid-template-columns:1fr}}
.hr-days{display:flex;align-items:center;gap:6px}.hr-days input{width:80px}.hr-days i{font-style:normal;color:var(--muted)}
.hr-chk{display:flex;align-items:center;gap:8px;font-size:13.5px}
.sls{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;padding:4px 14px}
.sl{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}.sl:last-child{border:0}
.sl>span{display:flex;flex-direction:column;min-width:0}.sl small{color:var(--muted);font-size:12px}.sl b{font-family:var(--f-mono);font-weight:500;white-space:nowrap}
.sl.tot{font-weight:600;border-bottom:2px solid var(--ink)}.sl.tot b{font-weight:700}.sl.net b{color:var(--ok);font-size:17px}.sl.muted{color:var(--muted);font-size:13px}
.sl-kpi{display:flex;flex-direction:column;gap:6px;padding:4px 0 10px;border-bottom:1px solid var(--line)}
.sl-kpi>div{display:grid;grid-template-columns:minmax(0,1fr) auto 70px 40px;gap:8px;align-items:center;font-size:12.5px}
.sl-kpi small{color:var(--muted)}.sl-kpi i{height:6px;border-radius:3px;background:var(--soft);position:relative;overflow:hidden}
.sl-kpi i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--accent)}.sl-kpi b{text-align:right}
.hr-warn{color:var(--warn);background:var(--warn-bg);border-radius:9px;padding:7px 10px;font-size:13px;margin:6px 0 0}
.hr-sch{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-bottom:10px}
.sch{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:inherit;font:inherit;cursor:pointer}
.sch b{font-size:13.5px}.sch small{color:var(--muted);font-size:12px;line-height:1.35}
.sch.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent) inset;background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.hr-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}.hr-row select{flex:1.3}.hr-row .money-in{flex:1}
.hr-row.kpi{display:grid;grid-template-columns:1.4fr 1.2fr .9fr auto auto}
@media (max-width:560px){.hr-row.kpi{grid-template-columns:1fr 1fr}}
.hr .x.sm,.hr-ed .x.sm,.hr-ox .x.sm{width:30px;height:30px;flex:none;border:0;border-radius:8px;background:none;color:var(--muted);font-size:18px;cursor:pointer}.x.sm:hover{background:var(--bad-bg);color:var(--bad)}
.hr-prev{display:grid;grid-template-columns:auto repeat(4,1fr);gap:10px;align-items:center;margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--soft);font-size:12.5px}
.hr-prev>span{color:var(--muted)}.hr-prev div{display:flex;flex-direction:column;align-items:flex-end}.hr-prev small{color:var(--muted)}.hr-prev b{font-family:var(--f-mono)}
@media (max-width:560px){.hr-prev{grid-template-columns:1fr 1fr}.hr-prev>span{grid-column:1/-1}}
.hr-ox{display:flex;flex-direction:column}
.ox{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.ox-n{display:flex;flex-direction:column;min-width:0}.ox-n small{color:var(--muted);font-size:12px}
.ox.add{border:0;padding-top:12px}.ox.add .ox-n{flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center}.ox.add .ox-n input{flex:1;min-width:180px}.ox.add select{width:auto}.ox.add .money-in{width:150px}
@media (max-width:640px){.ox.add{grid-template-columns:1fr auto}.ox.add>span:nth-child(2){display:none}.ox.add .ox-n{grid-column:1/-1}}
.hr-tbl td:first-child{min-width:190px}.hr-tbl td:first-child .sub{white-space:nowrap;font-size:12px}.hr-tbl td:first-child b{white-space:nowrap}
.hr-tbl.det td:first-child{position:sticky;left:0;background:var(--surface);z-index:1}.hr-tbl.det tr.hr-grp td{position:static}
.hr-oh{display:flex;flex-direction:column;gap:6px}.hr-oh .hr-pct input{width:70px;padding:3px 6px}.hr-oh b.bad{color:var(--bad);font-weight:500}
.ox.add .ox-n input[type=checkbox]{flex:none;min-width:0}
@media (max-width:640px){.pl{grid-template-columns:minmax(0,1fr) auto 46px}.pl i{display:none}.pl-sub>div{padding-right:56px}.hr-mnav b{min-width:0}}
.hr{display:flex;flex-direction:column;gap:14px}
.hr-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}.hr-top .subtabs{border:0}
.kass-views .seg{flex-wrap:wrap}

/* ---------- Ажлын ширээ (js/views/desk.js) ---------- */
.desk{gap:16px}



























































/* ---------- Миний мэдээлэл, эрх, код ---------- */
.my-page .my-wrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:14px;width:100%}
.my-page .sf{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.perm-list{display:flex;flex-direction:column}
.perm-i{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line);font-size:14.5px;cursor:pointer}
.perm-i small{color:var(--accent);font-size:11.5px;margin-left:4px}.perm-i:not(.on) span{color:var(--muted)}
.pin-set{display:flex;gap:6px;align-items:center}.pin-set input{width:90px;letter-spacing:.4em;text-align:center}
.pin{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 22px 18px;text-align:center}
.pin h3{margin:0;font-size:18px}.pin p{margin:0;color:var(--muted);font-size:13.5px}
.pin-dots{position:relative;display:flex;gap:14px;margin:14px 0 2px;cursor:text}
.pin-dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);transition:.15s}.pin-dots i.on{background:var(--ink);border-color:var(--ink)}
.pin-dots input{position:absolute;inset:0;opacity:0;width:100%;font-size:16px}
.pin-dots.err i{border-color:var(--bad);animation:pinshake .3s}.pin-err{color:var(--bad);font-size:13px;min-height:18px}
@keyframes pinshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* цагийн баруун товчны цэс — шугаман дүрстэй */
.ctx svg.ci{flex:none;width:18px;height:18px}
.ctx .pay{color:#fde047}.ctx>button.sel{background:rgba(255,255,255,.1);font-weight:600}.ctx>button.sel::after{content:"✓";margin-left:auto;font-size:13px}
.ctx-colors>span{display:flex;align-items:center;gap:8px}.ctx-colors>span svg{width:16px;height:16px}
.ctx-h b{text-transform:none}
.dg-call{background:var(--cc)!important;color:#fff!important}