/* ===== Mint UI — shared theme: white · gray · mint ===== */

:root{
  /* Mint theme: white · gray · mint (single theme) */
  --bg:#f1f3f2; --bg2:#e7ebe9; --ink:#1c2326; --mute:#566165; --fg:28,35,38; --bgc:255,255,255; --sf:255,255,255; --dlg:#ffffff; --cs:light;
  --accent:#2f8c78; --accent2:#26745f; --accent-ink:#26745f; --on-accent:#ffffff; --ac:47,140,120; --accent-soft:rgba(47,140,120,.11);
  --g0:#e7ecec; --g1:#f2f5f5; --g2:#ffffff; --g3:#edf1f1; --g4:#dbe2e2; --g5:#c5cfcf; --gline:rgba(28,35,38,.09);
  --line:rgba(28,35,38,.17); --fill:#ffffff; --glow:rgba(47,140,120,.2);
  --r-pill:26px; --r-card:36px 36px 36px 36px / 32px 32px 40px 40px;
  --logo-w:clamp(130px,40vw,190px);
  --font:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,'Roboto','Tajawal',sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%}
body{
  margin:0; min-height:100%; font-family:var(--font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-weight:400; font-size:15px; line-height:1.5; color:var(--ink);
  background:radial-gradient(120% 90% at 50% 0%,var(--bg2),var(--bg) 75%) fixed;
  display:flex; flex-direction:column; align-items:center; overflow-x:hidden;
}
body.no-scroll{height:100%; overflow:hidden}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ----- animated background (injected by app.js) ----- */
.orb{position:fixed; border-radius:50%; filter:blur(80px); background:var(--accent); opacity:.07; animation:drift 18s ease-in-out infinite alternate; pointer-events:none; z-index:0}
.o1{width:380px;height:380px;left:-100px;top:-80px}
.o2{width:320px;height:320px;right:-90px;top:35%;animation-duration:23s;animation-delay:-6s;opacity:.07}
.o3{width:260px;height:260px;left:30%;bottom:-120px;animation-duration:27s;animation-delay:-12s;opacity:.08}
@keyframes drift{to{transform:translate(70px,50px) scale(1.25)}}
.waves{position:fixed; left:0; right:0; bottom:0; height:38vh; pointer-events:none; z-index:0}
.waves svg{position:absolute; bottom:0; width:200%; height:100%; animation:wave 16s linear infinite}
.waves svg:nth-child(2){animation-duration:24s; animation-direction:reverse}
.waves svg:nth-child(3){animation-duration:34s}
.waves path{fill:none; stroke:var(--ink); stroke-width:1}
.waves svg:nth-child(1) path{opacity:.4} .waves svg:nth-child(2) path{opacity:.25} .waves svg:nth-child(3) path{opacity:.15}
@keyframes wave{to{transform:translateX(-50%)}}

/* ----- layout ----- */
main{flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 20px 8px; position:relative; z-index:2; gap:34px}
@keyframes rise{from{opacity:0; transform:translateY(24px) scale(.96)}}
.rise{animation:rise 1.2s cubic-bezier(.2,.8,.2,1) both}

/* ----- logo: standalone image, no container ----- */
.brand{display:block; width:var(--logo-w); height:auto; max-width:100%; object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(var(--fg),.18)); animation:float 7s ease-in-out infinite}
.brand.invert{filter:invert(1) drop-shadow(0 0 22px rgba(var(--fg),.18))} /* للوجو الغامق */
.brand-text{font-size:22px; letter-spacing:.14em}
@keyframes float{50%{transform:translateY(-8px)}}

/* ----- card ----- */
.card{
  width:100%; max-width:380px; padding:34px 30px 30px; border-radius:var(--r-card);
  background:linear-gradient(160deg,rgba(var(--sf),.75),rgba(var(--sf),.75)); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 80px -30px rgba(28,35,38,.4), 0 0 60px -25px var(--glow);
}
.card.wide{max-width:960px}
.card h1,.card h2{margin:0 0 24px; text-align:center; font-weight:400; font-size:20px; letter-spacing:.04em}
.card.shake{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}

/* ----- fields (input + label, use placeholder=" ") ----- */
.field{position:relative; margin-bottom:16px}
.field input,.field select,.field textarea{
  width:100%; height:52px; padding:18px 22px 0; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--fill); color:var(--ink); font:inherit; font-size:15px; outline:none;
  transition:border-color .35s, box-shadow .35s, background .35s;
}
.field label{position:absolute; left:22px; top:17px; font-size:15px; color:var(--mute); pointer-events:none; transition:all .3s}
.field input:focus + label,.field input:not(:placeholder-shown) + label{top:8px; font-size:12px; color:var(--ink)}
.field input:focus{border-color:var(--accent); background:rgba(var(--fg),.07); box-shadow:0 0 0 4px rgba(var(--ac),.2), 0 0 28px -6px var(--glow)}

/* لاحقة ثابتة جوه الخانة (e.g. @domain) */
.field.has-suffix input{padding-right:150px}
.field .suffix{position:absolute; right:22px; top:25px; font-size:14.5px; color:var(--mute); pointer-events:none; opacity:0; transition:opacity .3s}
.field .suffix{opacity:1!important}.field input:focus ~ .suffix,.field input:not(:placeholder-shown) ~ .suffix{opacity:1}

/* ----- buttons ----- */
.btn{
  width:100%; height:52px; border:0; border-radius:var(--r-pill); cursor:pointer;
  font:inherit; font-size:16px; color:var(--on-accent); background:linear-gradient(120deg,var(--accent2),var(--accent) 50%,var(--accent2)); background-size:200% 100%;
  animation:none; transition:transform .25s, box-shadow .25s; box-shadow:0 10px 30px -12px var(--glow);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 16px 36px -12px var(--glow)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line); animation:none; box-shadow:none}
.btn.ghost:hover{border-color:var(--accent)}
@keyframes sheen{to{background-position:-200% 0}}
.msg{min-height:18px; margin:14px 0 0; text-align:center; font-size:14px; color:var(--mute)}

/* ----- footer ----- */
footer{position:relative; z-index:2; width:100%; padding:14px 20px 20px; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:13px; color:var(--mute)}
footer a{color:var(--mute); text-decoration:none; padding:5px 14px; border:1px solid var(--line); border-radius:20px; font-size:12px; transition:all .3s}
footer a:hover{color:var(--ink); border-color:var(--accent); box-shadow:0 0 18px -4px var(--glow)}

@media (max-height:640px){main{gap:20px} :root{--logo-w:110px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}}

/* ================= App shell (sidebar + content) ================= */
body.app{flex-direction:row; align-items:stretch; --side-w:264px}
body.app.collapsed{--side-w:76px}
.side{
  position:fixed; inset:0 auto 0 0; width:var(--side-w); z-index:20; display:flex; flex-direction:column; gap:16px;
  padding:14px 12px; overflow:hidden auto; border-right:1px solid var(--line); border-radius:0 38px 38px 0 / 0 46px 46px 0;
  background:linear-gradient(180deg,rgba(var(--sf),.84),rgba(var(--sf),.9)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:width .5s cubic-bezier(.2,.8,.2,1); scrollbar-width:none;
}
.side-top{display:flex; justify-content:flex-end}
.icon-btn{width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--fill); color:var(--ink); cursor:pointer; transition:all .3s}
.icon-btn:hover{border-color:var(--accent); box-shadow:0 0 18px -4px var(--glow)}
.icon-btn svg,.nav-item svg{width:20px; height:20px}
body.collapsed .side-top{justify-content:center}

.me{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; text-decoration:none; padding:6px 0 2px}
.avatar{position:relative; width:84px; height:84px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-size:26px; border:1px solid var(--line); background:var(--fill); transition:all .5s cubic-bezier(.2,.8,.2,1); box-shadow:0 0 30px -10px var(--glow)}
.avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
body.collapsed .avatar{width:44px; height:44px; font-size:16px}
.me-name{font-size:16px; letter-spacing:.02em}
.me-id{font-size:13px; color:var(--mute)}
body.collapsed .me-name,body.collapsed .me-id,body.collapsed .nav-label,body.collapsed .status select{display:none}

.status{position:relative; width:100%; display:flex; justify-content:center}
.status select{appearance:none; -webkit-appearance:none; width:100%; padding:9px 14px 9px 32px; border-radius:20px; border:1px solid var(--line); background:var(--fill); color:var(--ink); font:inherit; font-size:14px; cursor:pointer; outline:none}
.status select option{background:var(--bg2); color:var(--ink)}
.dot{position:absolute; left:14px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:#6b7280; box-shadow:0 0 10px currentColor; color:#6b7280; pointer-events:none}
body.collapsed .dot{position:static; margin:0; width:10px; height:10px}
.status[data-s="Online"] .dot{background:#4ade80; color:#4ade80}
.status[data-s="Break"] .dot{background:#fbbf24; color:#fbbf24}
.status[data-s="Meeting"] .dot{background:#60a5fa; color:#60a5fa}

.side nav{display:flex; flex-direction:column; gap:6px; margin-top:4px}
.nav-item{display:flex; align-items:center; gap:14px; height:48px; padding:0 14px; border-radius:24px; border:1px solid transparent; color:var(--mute); text-decoration:none; font-size:15px; white-space:nowrap; transition:all .3s}
.nav-item:hover{color:var(--ink); background:var(--fill)}
.nav-item.active{color:var(--ink); border-color:var(--line); background:rgba(var(--fg),.07)}
body.collapsed .nav-item{justify-content:center; padding:0}
.side-foot{margin-top:auto; display:flex; flex-direction:column; gap:6px}
.scrim{position:fixed; inset:0; z-index:15; background:rgba(var(--bgc),.6); opacity:0; pointer-events:none; transition:opacity .4s}

.content{flex:1; min-width:0; margin-left:var(--side-w); position:relative; z-index:2; padding:30px 30px 0; display:flex; flex-direction:column; transition:margin .5s cubic-bezier(.2,.8,.2,1)}
.content > footer{margin-top:auto}
.page-head{margin-bottom:22px}
.page-head h1{margin:0 0 6px; font-weight:300; font-size:26px; letter-spacing:.02em}
.sub{margin:0; color:var(--mute); font-size:14.5px}

.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px}
.tile{display:flex; flex-direction:column; gap:14px; padding:24px; border-radius:30px 30px 30px 30px / 26px 26px 34px 34px; border:1px solid var(--line); background:linear-gradient(160deg,rgba(var(--sf),.6),rgba(var(--sf),.6)); color:var(--ink); text-decoration:none; font-size:16px; transition:all .35s}
.tile svg{width:28px; height:28px}
.tile:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:0 18px 40px -20px var(--glow)}

.btn.sm{width:auto; height:44px; padding:0 24px; font-size:14.5px}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px}
.filters{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px}
.input{height:44px; padding:0 20px; border-radius:22px; border:1px solid var(--line); background:var(--fill); color:var(--ink); font:inherit; font-size:14.5px; outline:none; transition:all .3s; min-width:0}
.input:focus{border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--ac),.2)}
select.input option{background:var(--bg2)}
.filters .grow{flex:1 1 220px}
.count{font-size:14px; color:var(--mute); margin-left:auto}
.table-wrap{overflow:auto; max-height:58vh; border:1px solid var(--line); border-radius:26px; background:rgba(var(--sf),.55); backdrop-filter:blur(10px)}
table{border-collapse:collapse; width:100%; font-size:14px; white-space:nowrap}
th,td{padding:12px 18px; text-align:left; border-bottom:1px solid rgba(var(--fg),.07)}
th{position:sticky; top:0; background:var(--bg); color:var(--mute); font-weight:400; font-size:13px; z-index:1}
tbody tr:hover td{background:rgba(var(--fg),.04)}
.empty{padding:40px; text-align:center; color:var(--mute); font-size:14.5px}
.more{margin:16px auto 0; display:block}

.profile{max-width:760px}
.profile-top{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:26px}
.profile-top .avatar{width:132px; height:132px; font-size:40px}
.profile-top h2{margin:6px 0 0; font-weight:300; font-size:22px}
.info{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.info div{padding:16px 22px; border:1px solid var(--line); border-radius:26px; background:var(--fill)}
.info small{display:block; color:var(--mute); font-size:13px; margin-bottom:6px}
.info span{font-size:15px; word-break:break-word}

.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:50; padding:12px 24px; border-radius:24px; border:1px solid var(--line); background:rgba(var(--sf),.92); font-size:14.5px; opacity:0; transition:all .4s; pointer-events:none}
.toast.show{opacity:1; transform:translate(-50%,0)}

@media (max-width:760px){
  .content{margin-left:76px; padding:20px 14px 0}
  body.app:not(.collapsed) .scrim{opacity:1; pointer-events:auto}
  .count{margin-left:0; width:100%}
}

/* ===== orders table: sort / reorder ===== */
[hidden]{display:none!important}
th.sortable{cursor:pointer; user-select:none}
th[draggable="true"]{cursor:grab}
th.dragover{box-shadow:inset 3px 0 0 var(--ink)}
th .arr{margin-left:6px; color:var(--ink)}
.colpanel{margin-bottom:16px; padding:16px; border:1px solid var(--line); border-radius:26px; background:rgba(var(--sf),.7); backdrop-filter:blur(10px); display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px}
.colpanel .hint{grid-column:1/-1; font-size:13.5px; color:var(--mute); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.col-item{display:flex; align-items:center; gap:8px; padding:6px 8px 6px 14px; border:1px solid var(--line); border-radius:20px; font-size:14px; background:var(--fill)}
.col-item span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.col-item input{accent-color:var(--ink)}
.mini{width:28px; height:28px; flex:none; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ink); cursor:pointer; font:inherit; font-size:14px; transition:all .25s}
.mini:hover{border-color:var(--accent)}

/* ===== Google-Sheet style grid ===== */
.note{font-size:14px; color:var(--mute); margin:0 0 12px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.chips:empty{display:none}
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 5px 4px 14px; border:1px solid var(--line); border-radius:16px; font-size:14px; background:var(--fill)}
.chip button{border:0; background:none; color:var(--ink); cursor:pointer; width:20px; height:20px; border-radius:50%; font-size:14px}
.chip button:hover{background:rgba(var(--fg),.15)}
.sheet-wrap{max-height:calc(100vh - 310px); min-height:320px; border-radius:20px}
.sheet{border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font:12.5px/1.2 var(--font)}
.sheet th,.sheet td{height:28px; padding:0 10px; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; border-right:1px solid rgba(var(--fg),.09); border-bottom:1px solid rgba(var(--fg),.09)}
.sheet thead th{position:sticky; top:0; z-index:3; height:32px; background:var(--bg2); color:var(--ink); font-weight:500; font-size:14px}
.sheet th[draggable="true"]{cursor:grab}
.sheet th.dragover{box-shadow:inset 3px 0 0 var(--ink)}
.sheet .rn{position:sticky; left:0; z-index:2; min-width:46px; padding:0 6px; text-align:center; font-size:13px; color:var(--mute); background:var(--bg2)}
.sheet thead th.corner{left:0; z-index:5; background:var(--bg2)}
.sheet tbody tr:hover td{background:rgba(var(--fg),.05)}
.sheet tbody tr:hover td.rn,.sheet tbody tr:hover td.actcell{background:var(--g0)}
.sheet .actcol,.sheet .actcell{position:sticky; right:0; z-index:2; background:var(--bg2); border-left:1px solid var(--line); text-align:center}
.sheet thead th.actcol{z-index:5; background:var(--bg2)}
.fbtn{margin-left:8px; width:20px; height:20px; border:0; border-radius:6px; background:none; color:var(--mute); cursor:pointer; font-size:13px; vertical-align:middle}
.fbtn:hover{color:var(--ink); background:rgba(var(--fg),.1)}
.fbtn.on{color:var(--on-accent); background:var(--accent)}
.arr{margin-left:4px}
.act{height:22px; padding:0 12px; border-radius:11px; border:1px solid var(--line); background:var(--fill); color:var(--ink); font:inherit; font-size:13.5px; cursor:pointer; white-space:nowrap}
button.act:hover{border-color:var(--accent)}
.act.done{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
span.act{display:inline-flex; align-items:center; cursor:default}
.dim{color:var(--mute)}
.pop,.menu{position:fixed; z-index:60; display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--line); border-radius:22px; background:rgba(10,10,10,.98); box-shadow:0 20px 50px -10px rgba(28,35,38,.4)}
.pop{width:280px}
.menu{z-index:61; gap:4px; padding:8px; min-width:130px}
.pbtn{padding:7px 14px; border-radius:14px; border:1px solid var(--line); background:none; color:var(--ink); font:inherit; font-size:14px; cursor:pointer; text-align:left}
.pbtn:hover{border-color:var(--accent)}
.pop-row{display:flex; gap:6px; flex-wrap:wrap}
.pop .input{height:36px; font-size:14px}
.pop-list{max-height:220px; overflow:auto; display:flex; flex-direction:column; gap:2px}
.pop-list label{display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:10px; font-size:14px; cursor:pointer}
.pop-list label:hover{background:rgba(var(--fg),.07)}
.pop-list label span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pop-list input{accent-color:var(--ink)}
.pop-list small{color:var(--mute)}
.pop-foot{display:flex; justify-content:flex-end; gap:8px}
dialog{background:var(--dlg,#fff); color:var(--ink); border:1px solid var(--line); border-radius:28px; padding:26px; max-width:360px; font-family:var(--font); font-weight:400}
dialog::backdrop{background:rgba(var(--bgc),.65)}
dialog p{margin:0; font-size:15px; line-height:1.7}
.dlg-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:20px}

/* ===== columns panel with many columns ===== */
.colpanel{max-height:280px; overflow:auto}
.colpanel > .input{grid-column:1/-1}

/* تنبيه: التقرير اليومي لسه ما اتسلمش */
.nav-item.needs{position:relative}
.nav-item.needs::after{content:'';position:absolute;top:10px;right:12px;width:9px;height:9px;border-radius:50%;background:#ff9a4d;box-shadow:0 0 0 3px rgba(255,154,77,.25)}

/* رسالة النجاح + زرار الريفرش */
.okpop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(var(--bgc),.45);backdrop-filter:blur(4px);animation:okin .25s ease}
.okbox{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 44px;border-radius:30px;border:1px solid rgba(var(--fg),.25);background:#fff;text-align:center;box-shadow:0 30px 80px -24px rgba(28,35,38,.45);animation:okpop .35s cubic-bezier(.2,1.3,.4,1)}
.okbox b{font-weight:400;font-size:18px}.okbox span{font-size:14.5px;opacity:.8}
.okbox svg{width:64px;height:64px;fill:none;stroke:#4cc38a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.okbox svg circle{stroke-dasharray:152;stroke-dashoffset:152;animation:okdraw .5s .05s forwards}
.okbox svg path{stroke-dasharray:40;stroke-dashoffset:40;animation:okdraw .35s .45s forwards}
@keyframes okdraw{to{stroke-dashoffset:0}}@keyframes okin{from{opacity:0}}@keyframes okpop{from{transform:scale(.8);opacity:0}}
.nav-item.spin svg{animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}.tabs .btn.on{background:var(--accent); color:var(--on-accent);border-color:var(--accent)}

/* وقت النشاط + الإشعارات + حالة Busy */
.otime{margin:-6px 0 14px;text-align:center;font-size:13.5px;opacity:.78;letter-spacing:.04em}
.collapsed .otime{display:none}
.status[data-s="Busy"] .dot{background:#ff9a4d; color:#ff9a4d}
.nav-item{position:relative}
.bellN{position:absolute;top:8px;right:10px;min-width:17px;height:17px;line-height:17px;padding:0 4px;border-radius:9px;background:#ff9a4d;color:var(--bg);font-size:12.5px;font-style:normal;text-align:center}


/* ================= Typography & alignment (everything centred) ================= */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{font-feature-settings:"lnum" 1,"tnum" 1; font-variant-numeric:lining-nums tabular-nums; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit; font-weight:inherit; line-height:1.3}
h1,h2,h3,h4{font-weight:400; line-height:1.3; text-wrap:balance; overflow-wrap:anywhere}
p,.sub,.note{text-wrap:balance; overflow-wrap:anywhere}
b,strong{font-weight:500}

/* buttons / pills: text dead-centre */
.btn,.act,.pbtn,.mini,.icon-btn,.pill,.chip,.badge{display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:1}
.btn{width:100%}
.btn.sm{width:auto}
.input,.tbl-in,select.input{text-align:center; text-align-last:center}
textarea.input,textarea.tbl-in{text-align:start; text-align-last:auto}

/* page header: always centred, long titles wrap and stay centred */
body.app .page-head{display:flex; flex-direction:column; align-items:center; text-align:center; max-width:920px; width:100%; margin:0 auto 26px}
body.app .page-head h1{max-width:100%; font-size:clamp(22px,4.2vw,28px); text-wrap:balance}
body.app .page-head .sub{max-width:720px}
body.app .page-head .hd{justify-content:center; text-align:center}
body.app .page-head .back{margin:0 0 8px}
body.app .page-head .back a{text-decoration:none}

/* module cards: equal size, centred whatever the count */
body.app .tiles{display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start; gap:18px; width:100%; max-width:1100px; margin:0 auto 24px}
body.app .tile{flex:0 0 210px; width:210px; min-height:150px; align-items:center; justify-content:center; text-align:center; padding:24px 16px; gap:14px}
body.app .tile span{display:block; max-width:100%; text-align:center; text-wrap:balance; line-height:1.35}
body.app .tile svg{flex:none; margin:0 auto}
@media (max-width:520px){body.app .tiles{gap:12px} body.app .tile{flex:0 0 calc(50% - 6px); width:calc(50% - 6px); min-height:132px; padding:18px 10px}}

/* toolbars, tabs, filters, stats, KPIs */
body.app .actions,body.app .filters,body.app .tabs,body.app .bar2,body.app .stats,body.app .tot3,body.app .eqbar,body.app .dlg-actions,body.app .pop-foot{justify-content:center; text-align:center}
body.app .count{margin-left:0}
body.app .stats>*{text-align:center}
body.app .stats b{margin-right:5px}
body.app .kpis{justify-items:stretch}
body.app .kpi{text-align:center}
body.app .kpi span,body.app .kpi b,body.app .kpi small{display:block; text-align:center}
body.app .cardx{text-align:center}
body.app .cardx h3{text-align:center}
body.app .cardx .grid2{text-align:start}
body.app .cardx p.note,body.app .note{text-align:center}
body.app .chk{justify-content:center; text-align:start}
body.app .empty{text-align:center}
body.app .more{margin-left:auto; margin-right:auto}

/* tables: headers and cells share one alignment */
body.app table th,body.app table td{text-align:center; vertical-align:middle}
body.app table th.num,body.app table td.num{text-align:right}
body.app table th.r,body.app table td.r{text-align:right}
body.app td.wrapc{text-align:center}
body.app .table-wrap{margin-left:auto; margin-right:auto}
body.app .table-wrap table{margin:0 auto}
body.app .sheet th,body.app .sheet td{text-align:center}
body.app tr.ind td:first-child,body.app tr.ind2 td:first-child{padding-left:18px}
body.app .nin{text-align:center}

/* dialogs */
dialog{text-align:center}
dialog h2,dialog h3{text-align:center}
dialog .ohead{position:relative; display:flex; justify-content:center; align-items:center; min-height:44px; padding:0 52px}
dialog .ohead h2{margin:0; text-align:center}
dialog .ohead .icon-btn{position:absolute; right:0; top:50%; transform:translateY(-50%)}
dialog p{text-align:center}
dialog label,dialog label.l,dialog .field label{text-align:start}
dialog .msg,dialog.big .msg{text-align:center}
dialog .dlg-actions{justify-content:center}
.msg{text-align:center}
.drop{text-align:center}
footer{text-align:center; justify-content:center}

/* profile, login */
.profile-top{align-items:center; text-align:center}
.info{text-align:center}
dialog.big .ohead{justify-content:center!important; padding:0 52px; margin-bottom:14px}
dialog.big .msg,dialog .msg{text-align:center!important}
/* wide wrappers must never shrink-to-fit inside the flex column */
body.app .table-wrap{width:100%; max-width:100%; margin-left:0; margin-right:0}

/* optional photo picker */
.pwid{display:flex; align-items:center; gap:18px; grid-column:1/-1; padding:6px 0 10px; justify-content:center; flex-wrap:wrap}
.pwid .avatar{width:84px; height:84px; flex:none}
.pwid .pside{display:flex; flex-direction:column; gap:8px; align-items:center}
.pwid .pbtns{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.pwid .btn.sm{height:38px; padding:0 18px; font-size:14px; cursor:pointer}
.pwid .phint{color:var(--mute); font-size:13px; text-align:center}
.th-av{width:28px; height:28px; border-radius:50%; overflow:hidden; display:inline-grid; place-items:center; vertical-align:middle; margin-right:10px; border:1px solid var(--line); background:var(--fill); font-size:12px; position:relative}
.th-av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

html{color-scheme:var(--cs)}

/* ===== Lite mode for phones / touch screens: no heavy effects ===== */
@media (max-width:900px),(pointer:coarse){
  .orb,.waves{display:none!important}
  body{background:var(--bg)!important}
  *,*::before,*::after{text-shadow:none!important}
  .brand{animation:none!important}
  .rise{animation:none!important}
  .nav-item,.btn,.tile{transition:none!important}
}

/* ===== Dropdown lists: same look as the rest of the system (rounded, themed, with a check on the selected item) ===== */
select{color-scheme:var(--cs)}
select option{background:var(--dlg,#fff); color:var(--ink)}
@supports (appearance:base-select){
  select:not(.status select),select:not(.status select)::picker(select){appearance:base-select}
  select::picker(select){background:var(--dlg,#fff); border:1px solid var(--line); border-radius:18px; padding:6px; margin-top:6px; box-shadow:0 24px 50px -20px rgba(0,0,0,.55); max-height:min(340px,55vh); scrollbar-width:thin}
  select option{padding:9px 14px; border-radius:12px; font:inherit; font-size:15px; color:var(--ink); background:transparent; cursor:pointer; gap:10px}
  select option:hover,select option:focus-visible{background:rgba(var(--fg),.1)}
  select option:checked{background:rgba(var(--fg),.16); font-weight:500}
  select option::checkmark{color:var(--ink); order:1; margin-left:auto}
  select::picker-icon{color:var(--mute); transition:rotate .2s}
  select:open::picker-icon{rotate:180deg}
}
.waves{opacity:.35}

/* ================= v3: centered text everywhere · better dropdowns · new sidebar ================= */
body,body.app{text-align:center}
.field input,.field select,.field textarea,.input,select.input,textarea.input,textarea.tbl-in,.tbl-in{text-align:center; text-align-last:center}
.field label{left:0; right:0; text-align:center}
.pbtn,.cmb-pop,.cpres button,.sheet .rn,.cmb-it,.cmb-no{text-align:center}
.cmb-it.sel::after{position:absolute; right:14px; float:none}
.cmb-it{position:relative}
.kb-search .input{text-align:center; text-align-last:center}
td,th,label,button,summary,legend,small,p,h1,h2,h3,h4,li,dt,dd{text-align:inherit}
body.app table th,body.app table td{text-align:center}
body.app table th.num,body.app table td.num,body.app table th.r,body.app table td.r{text-align:center}

/* ----- dropdowns ----- */
select{cursor:pointer}
select:hover{border-color:rgba(var(--fg),.4)}
select:focus{border-color:var(--accent)}
@supports not (appearance:base-select){
  select:not(.status select){appearance:none; -webkit-appearance:none; padding-right:36px; background-repeat:no-repeat !important; background-position:right 15px center !important; background-size:12px !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23566165' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important}
}
@supports (appearance:base-select){
  select::picker(select){min-width:anchor-size(width); text-align:center; padding:8px; border-radius:20px; transition:opacity .16s, translate .16s, display .16s allow-discrete, overlay .16s allow-discrete; opacity:0; translate:0 -6px}
  select::picker(select):popover-open{opacity:1; translate:0 0}
  @starting-style{select::picker(select):popover-open{opacity:0; translate:0 -6px}}
  select option{position:relative; justify-content:center; text-align:center; min-height:40px; padding:9px 38px; font-size:15px}
  select option::checkmark{position:absolute; right:14px; margin:0; order:0; font-size:14px}
  select option:checked{background:rgba(var(--fg),.14)}
  select selectedcontent{flex:1; text-align:center}
}

/* ----- sidebar v3 ----- */
.side{gap:12px; padding:14px 10px; overflow:hidden; background:linear-gradient(180deg,rgba(var(--sf),.97),rgba(var(--sf),.99)); box-shadow:6px 0 30px -18px rgba(0,0,0,.5)}
.side-top{justify-content:center}
.side-top .icon-btn{width:100%; height:42px; border-radius:21px; gap:10px; font-size:14px; color:var(--mute)}
.side-top .icon-btn:hover{color:var(--ink)}
.side-top .icon-btn .tg-l{display:inline}
body.collapsed .side-top .icon-btn .tg-l{display:none}
.avatar{width:68px; height:68px; font-size:22px}
.me{gap:4px; padding:2px 0}
.me-name{font-size:16px; font-weight:500}
.me-id{font-size:13.5px}
.side nav{flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none; gap:3px; margin-top:0; padding:2px 0}
.side nav::-webkit-scrollbar{display:none}
.nav-grp{margin:12px 0 4px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); opacity:.85; text-align:center; white-space:nowrap; overflow:hidden}
.nav-grp:first-child{margin-top:0}
body.collapsed .nav-grp{height:1px; margin:9px 16px; font-size:0; background:var(--line); opacity:.8}
.nav-item{height:44px; padding:0 14px; border-radius:22px; justify-content:center; font-size:15px; position:relative}
.nav-item svg{flex:none}
.nav-item.active{background:rgba(var(--fg),.1); color:var(--ink); border-color:var(--line); font-weight:500}
.nav-item.active::before{content:''; position:absolute; left:6px; top:50%; width:4px; height:18px; margin-top:-9px; border-radius:3px; background:var(--ink)}
.side-foot{margin-top:0; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:4px; padding-top:10px; border-top:1px solid var(--line)}
.side-foot .nav-item{flex:0 0 auto; width:44px; height:44px; padding:0; border-radius:50%}
.side-foot .nav-item .nav-label{display:none}
.side-foot .nav-item.active::before{display:none}
.side-foot .bellN{top:4px; right:3px}
body.collapsed .side-foot{flex-direction:column; align-items:center}
@media (hover:hover) and (min-width:761px){
  body.collapsed .side:hover{width:264px; box-shadow:18px 0 50px -14px rgba(0,0,0,.55)}
  body.collapsed .side:hover .nav-label,body.collapsed .side:hover .me-name,body.collapsed .side:hover .me-id,body.collapsed .side:hover .tg-l{display:inline}
  body.collapsed .side:hover .me-name,body.collapsed .side:hover .me-id{display:block}
  body.collapsed .side:hover .status select{display:block}
  body.collapsed .side:hover .avatar{width:68px; height:68px; font-size:22px}
  body.collapsed .side:hover .nav-grp{height:auto; margin:12px 0 4px; font-size:12px; background:none}
  body.collapsed .side:hover .side-foot{flex-direction:row}
  body.collapsed .side:hover .dot{position:absolute; left:14px; margin-top:-4px; width:8px; height:8px}
}
.nav-grp,.side nav .nav-item{flex:none}
.nav-item{justify-content:flex-start}
.nav-item .nav-label{flex:1; text-align:center; padding-right:34px}
body.collapsed .nav-item{justify-content:center}
body.collapsed .nav-item .nav-label{flex:none; padding:0}
.side-foot .nav-item{justify-content:center}
@media (hover:hover) and (min-width:761px){
  body.collapsed .side:hover .side-foot .nav-label{display:none}
  body.collapsed .side:hover .nav-item{justify-content:flex-start}
  body.collapsed .side:hover .side-foot .nav-item{justify-content:center}
  body.collapsed .side:hover .nav-item .nav-label{flex:1; padding-right:34px}
}
@supports (appearance:base-select){
  select:not(.field select):not(.status select){display:inline-flex; align-items:center; justify-content:center; gap:8px; padding-top:0; padding-bottom:0}
  select::picker-icon{margin-left:4px; font-size:11px}
}

/* ----- dynamic (floating) labels v3: centered, sit in the middle when empty, float above when focused/filled ----- */
dialog .field label,.field label{left:0; right:0; text-align:center; padding:0 40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:1}
.field label{top:17px; font-size:15px; color:var(--mute)}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label,
.field input[type=date] + label,.field input[type=time] + label,.field select + label{top:7px; font-size:12px; color:var(--mute)}
.field input:focus + label,.field textarea:focus + label{color:var(--ink)}
.field input[type=date],.field input[type=time]{text-align:center}
.field textarea{padding-top:26px}
dialog label.l,dialog.big label.l,dialog label.lbl{display:block; text-align:center; margin:10px 0 6px}
dialog .chk-l{text-align:center}

/* ================= Mint skin: white surfaces, gray structure, mint accents ================= */
html{color-scheme:light}
body{background:var(--bg)}
::selection{background:rgba(var(--ac),.25)}
.waves{opacity:.5}
.waves svg path{stroke:rgba(var(--ac),.35)}
.btn{box-shadow:0 10px 24px -12px rgba(var(--ac),.65)}
.btn:hover{box-shadow:0 16px 30px -12px rgba(var(--ac),.7)}
.btn.ghost{color:var(--ink); background:#fff; border:1px solid var(--line); box-shadow:none}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent-ink)}
.nav-item:hover{color:var(--accent-ink); background:var(--accent-soft)}
.nav-item.active{background:var(--accent-soft); color:var(--accent-ink); border-color:rgba(var(--ac),.35); font-weight:500}
.nav-item.active::before{background:var(--accent)}
.avatar{background:var(--accent-soft); border-color:rgba(var(--ac),.35); color:var(--accent-ink)}
.side{background:#fff; box-shadow:6px 0 30px -20px rgba(28,35,38,.4)}
.me-id{color:var(--mute)}
.nav-grp{color:var(--accent-ink); opacity:.9}
.status select{background:#fff}
.icon-btn:hover{border-color:var(--accent); color:var(--accent-ink)}
.tile,.card,.panel,.cardx,.sheet-wrap,.kb-card{background:#fff; box-shadow:0 10px 30px -22px rgba(28,35,38,.35)}
.tile:hover{border-color:var(--accent); box-shadow:0 18px 36px -22px rgba(var(--ac),.6)}
dialog{background:#fff; box-shadow:0 30px 80px -30px rgba(28,35,38,.45)}
th{background:#f7f9f9}
.sheet th{background:#eef3f2; color:#3d494d}
.field input,.field select,.field textarea,.input,select,textarea{background:#fff}
.field input:focus,.input:focus,select:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--ac),.16); background:#fff}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--accent)}
.tabs .btn.on,.fbtn.on{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.scrim{background:rgba(28,35,38,.35)}
.setup-screen{min-height:100vh; width:100%; display:grid; place-items:center; padding:30px; text-align:center; background:var(--bg)}
.setup-screen .mk{width:64px; height:64px; border-radius:20px; background:var(--accent); color:#fff; font-size:30px; display:grid; place-items:center; margin:0 auto 18px; box-shadow:0 14px 30px -14px rgba(var(--ac),.8)}
.setup-screen h1{font-weight:500; font-size:26px; margin:0 0 10px}
.setup-screen p{color:var(--mute); max-width:460px; margin:0 auto}
.lic-bar{position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:60; width:max-content; max-width:92vw; box-sizing:border-box; border-radius:999px; box-shadow:0 8px 24px -10px rgba(0,0,0,.25); text-align:center; padding:8px 18px; background:#fff4e5; color:#8a5200; font-size:13px; border:1px solid #f1d29b}
.lic-lock{position:fixed; inset:0; z-index:999; display:grid; place-items:center; background:rgba(243,245,245,.97); text-align:center}
.lic-lock h2{font-weight:500; margin:0 0 8px} .lic-lock p{color:var(--mute); margin:6px 0} .lic-lock .s{font-size:13px}
.mint-foot{font-size:13px; color:var(--mute)}

/* ================= Sidebar v4 (floating panel) + field fixes ================= */
:root{--sb-act-bg:var(--ink); --sb-act-fg:var(--bg)}
body.app{--side-w:282px}
body.app.collapsed{--side-w:94px}
.sb{position:fixed; z-index:20; top:12px; bottom:12px; left:12px; width:calc(var(--side-w) - 26px); display:flex; flex-direction:column; gap:12px; padding:14px 12px 12px; border:1px solid var(--line); border-radius:28px; background:rgba(var(--sf),.96); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:0 24px 60px -30px rgba(0,0,0,.6); overflow:hidden; transition:width .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; text-align:left}
.sb.peek{width:256px; box-shadow:0 30px 80px -24px rgba(0,0,0,.7)}
.sb *{text-align:left}
/* top: brand + toggle */
.sb-top{display:flex; align-items:center; gap:8px; min-height:40px; padding:0 4px 0 6px}
.sb-brand{flex:1; min-width:0; display:flex; align-items:center; overflow:hidden}
.sb-brand .brand{height:24px; width:auto; max-width:150px; object-fit:contain; display:block; animation:none}
.sb-brand .brand-text{font-size:16px; font-weight:500; letter-spacing:.14em; white-space:nowrap}
.sb-tg{flex:none; width:38px; height:38px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--mute); display:grid; place-items:center; cursor:pointer; transition:all .25s; padding:0}
.sb-tg:hover{color:var(--ink); background:var(--fill); border-color:var(--ink)}
.sb-tg svg{width:19px; height:19px}
/* user card */
.sb-user{display:grid; grid-template-columns:auto 1fr; column-gap:12px; row-gap:10px; align-items:center; padding:12px; border-radius:20px; border:1px solid var(--line); background:var(--fill)}
.sb-av{position:relative; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-size:16px; font-weight:500; color:var(--ink); background:rgba(var(--fg),.08); border:1px solid var(--line); text-decoration:none; flex:none}
.sb-av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%}
.sb-av .sb-dot{position:absolute; right:-1px; bottom:-1px; width:13px; height:13px; border-radius:50%; background:#8b95a1; border:2.5px solid rgb(var(--sf)); box-sizing:border-box}
.sb-user[data-s="Online"] .sb-dot{background:#3ddc97}
.sb-user[data-s="Break"] .sb-dot{background:#fbbf24}
.sb-user[data-s="Meeting"] .sb-dot{background:#60a5fa}
.sb-user[data-s="Busy"] .sb-dot{background:#ff9a4d}
.sb-ut{min-width:0; display:flex; flex-direction:column; gap:2px}
.sb-name{font-size:15px; font-weight:500; color:var(--ink); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sb-sub{font-size:12.5px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sb-st{grid-column:1/-1; position:relative; display:block}
.sb-st select{appearance:none; -webkit-appearance:none; width:100%; height:34px; padding:0 30px 0 14px; border-radius:12px; border:1px solid var(--line); background:rgba(var(--sf),.9); color:var(--ink); font:inherit; font-size:13.5px; cursor:pointer; outline:none; text-align:left; text-align-last:left; display:block}
.sb-st::after{content:''; position:absolute; right:13px; top:50%; width:6px; height:6px; margin-top:-5px; border-right:1.6px solid var(--mute); border-bottom:1.6px solid var(--mute); transform:rotate(45deg); pointer-events:none}
.sb-st select option{background:var(--dlg,#fff); color:var(--ink)}
/* nav */
.sb-nav{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; display:flex; flex-direction:column; gap:2px; margin:0 -4px; padding:0 4px}
.sb-nav::-webkit-scrollbar{display:none}
.sb-grp{flex:none; margin:14px 0 5px; padding:0 10px; font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); opacity:.9; white-space:nowrap}
.sb-grp:first-child{margin-top:2px}
.sb-item{flex:none; position:relative; display:flex; align-items:center; gap:12px; height:44px; padding:0 8px 0 6px; border-radius:14px; border:0; background:transparent; color:var(--mute); text-decoration:none; font:inherit; font-size:14.5px; cursor:pointer; white-space:nowrap; transition:background .2s, color .2s}
.sb-item .ic{flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; transition:all .2s}
.sb-item .ic svg{width:19px; height:19px}
.sb-item .nav-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.sb-item:hover{color:var(--ink); background:rgba(var(--fg),.06)}
.sb-item:hover .ic{background:rgba(var(--fg),.08)}
.sb-item.active{color:var(--ink); font-weight:500; background:rgba(var(--fg),.09)}
.sb-item.active .ic{background:var(--sb-act-bg); color:var(--sb-act-fg); box-shadow:0 8px 18px -8px var(--glow)}
.sb-item.needs::after{content:''; position:absolute; top:50%; right:12px; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:#ff9a4d; box-shadow:0 0 0 3px rgba(255,154,77,.2)}
.sb-item.spin svg{animation:spin .7s linear infinite}
/* footer */
.sb-foot{flex:none; display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--line)}
.sb-tools{display:flex; gap:6px; justify-content:space-between}
.sb-btn{position:relative; flex:1; height:40px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--mute); display:grid; place-items:center; cursor:pointer; text-decoration:none; transition:all .2s; padding:0}
.sb-btn svg{width:19px; height:19px}
.sb-btn:hover{color:var(--ink); background:var(--fill); border-color:var(--ink)}
.sb-btn.spin svg{animation:spin .7s linear infinite}
.sb-btn .bellN{position:absolute; top:3px; right:6px; min-width:16px; height:16px; line-height:16px; padding:0 4px; border-radius:8px; background:#ff9a4d; color:#1a1a1a; font-size:11px; font-style:normal; text-align:center}
.sb-out{display:flex; align-items:center; justify-content:center; gap:10px; height:42px; border-radius:14px; border:1px solid var(--line); background:transparent; color:var(--mute); text-decoration:none; font:inherit; font-size:14px; cursor:pointer; transition:all .2s}
.sb-out svg{width:18px; height:18px; flex:none}
.sb-out:hover{color:#ff6b6b; border-color:rgba(255,107,107,.55); background:rgba(255,107,107,.08)}
/* collapsed rail (unless the pointer is on it) */
body.collapsed .sb:not(.peek){padding:14px 10px 12px}
body.collapsed .sb:not(.peek) .sb-brand,body.collapsed .sb:not(.peek) .sb-ut,body.collapsed .sb:not(.peek) .sb-st,body.collapsed .sb:not(.peek) .nav-label,body.collapsed .sb:not(.peek) .sb-out span{display:none}
body.collapsed .sb:not(.peek) .sb-top{justify-content:center; padding:0}
body.collapsed .sb:not(.peek) .sb-user{display:flex; justify-content:center; padding:8px 0; background:transparent; border-color:transparent}
body.collapsed .sb:not(.peek) .sb-grp{height:1px; margin:10px 10px; padding:0; font-size:0; background:var(--line)}
body.collapsed .sb:not(.peek) .sb-item{justify-content:center; padding:0; gap:0}
body.collapsed .sb:not(.peek) .sb-item.needs::after{top:6px; right:6px; margin:0}
body.collapsed .sb:not(.peek) .sb-tools{flex-direction:column}
body.collapsed .sb:not(.peek) .sb-out{padding:0}
@media (max-width:760px){
  .content{margin-left:84px}
  .sb{width:68px}
  body.app:not(.collapsed) .sb{width:min(282px,calc(100vw - 24px))}
  body.app:not(.collapsed){--side-w:84px}
}
.scrim{backdrop-filter:blur(2px)}
.theme-fab{display:none!important}

/* ----- field fixes: labels / selects / suffix / buttons inside fields ----- */
@supports (appearance:base-select){
  .field select{display:flex; align-items:flex-end; justify-content:center; padding:0 44px 9px; text-align:center}
  .field select::picker-icon{position:absolute; right:18px; top:50%; translate:0 -50%}
  .field select selectedcontent{flex:none; text-align:center}
}
.field select.empty + label{top:17px; font-size:15px; color:var(--mute)}
.field.has-suffix input,.field.pw input{text-align:left; text-align-last:left; padding-left:22px}
.field.has-suffix label,.field.pw label{text-align:left; padding:0 0 0 22px}
.field.pw input{padding-right:112px}
.field.has-suffix input{padding-right:170px}
.field .suffix{opacity:0!important}
.field.has-suffix input:focus ~ .suffix,.field.has-suffix input:not(:placeholder-shown) ~ .suffix{opacity:1!important}

:root{--sb-act-bg:var(--accent); --sb-act-fg:var(--on-accent)}
.sb{background:#fff; box-shadow:0 24px 60px -32px rgba(28,35,38,.45)}
.sb-item.active{background:var(--accent-soft); color:var(--accent-ink)}
.sb-grp{color:var(--accent-ink)}
.sb-user{background:#f6f9f8}

.sb-st select{appearance:none!important; -webkit-appearance:none!important; display:block}
.sb-st select::picker-icon{display:none}
.sb-nav{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent); padding-bottom:18px}

body.app .sb .nav-label{display:block}
body.app .sb .sb-out span{display:inline}
body.collapsed .sb:not(.peek) .sb-btn{flex:none; width:100%}
body.collapsed .sb:not(.peek) .sb-tools{gap:6px}


/* ===== v2 · "Living pulse" background + round icons ===== */
.orb,.waves{display:none!important}
.bgx{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bgx b{position:absolute; border-radius:50%; will-change:transform}
.bgx .m1{width:62vmax; height:62vmax; left:-22vmax; top:-26vmax; background:radial-gradient(circle at 40% 40%, rgba(var(--ac),.20), transparent 62%); animation:mA 26s ease-in-out infinite alternate}
.bgx .m2{width:56vmax; height:56vmax; right:-24vmax; top:12vh; background:radial-gradient(circle at 50% 50%, rgba(56,152,214,.15), transparent 62%); animation:mB 32s ease-in-out infinite alternate}
.bgx .m3{width:50vmax; height:50vmax; left:18vw; bottom:-30vmax; background:radial-gradient(circle at 50% 50%, rgba(var(--ac),.14), transparent 64%); animation:mC 38s ease-in-out infinite alternate}
@keyframes mA{to{transform:translate(14vmax,10vmax) scale(1.18)}}
@keyframes mB{to{transform:translate(-12vmax,-8vmax) scale(1.22)}}
@keyframes mC{to{transform:translate(10vmax,-9vmax) scale(1.15)}}
.bgx .ecg{position:absolute; left:0; right:0; bottom:9vh; width:100%; height:26vh; opacity:.9}
.bgx .ecg path{fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.bgx .e0{stroke:rgba(var(--ac),.14); stroke-width:1.2}
.bgx .e1{stroke:rgba(var(--ac),.75); stroke-width:2; stroke-dasharray:70 930; stroke-dashoffset:0; animation:beat 7s linear infinite; filter:drop-shadow(0 0 6px rgba(var(--ac),.55))}
@keyframes beat{from{stroke-dashoffset:70}to{stroke-dashoffset:-1000}}
.bgx .fl i{position:absolute; left:var(--x); bottom:-40px; width:var(--s); height:var(--s); opacity:0; animation:flt var(--d) linear var(--t) infinite}
.bgx .fl i.c{border-radius:50%; border:1.5px solid rgba(var(--ac),.45)}
.bgx .fl i.p{background:
  linear-gradient(rgba(var(--ac),.5),rgba(var(--ac),.5)) center/100% 22% no-repeat,
  linear-gradient(rgba(var(--ac),.5),rgba(var(--ac),.5)) center/22% 100% no-repeat; border-radius:3px}
@keyframes flt{0%{transform:translateY(0) rotate(0); opacity:0}10%{opacity:var(--o)}85%{opacity:var(--o)}100%{transform:translateY(-112vh) rotate(160deg); opacity:0}}
@media (max-width:900px),(pointer:coarse){
  .bgx .fl,.bgx .e1{display:none}
  .bgx b{animation:none!important}
  .bgx .e0{stroke:rgba(var(--ac),.2)}
  body{background:var(--bg)!important}
}
@media (prefers-reduced-motion:reduce){.bgx b,.bgx .e1,.bgx .fl i{animation:none!important}.bgx .fl{display:none}}

/* round icons */
.sb-item .ic{border-radius:50%!important}
.sb-item.active .ic{box-shadow:0 6px 16px -8px rgba(var(--ac),.8)}
body.app .tile{border-radius:34px; gap:16px}
body.app .tile svg{width:28px; height:28px; padding:15px; box-sizing:content-box; border-radius:50%; background:rgba(var(--ac),.12); color:var(--accent-ink); transition:transform .35s cubic-bezier(.3,1.5,.5,1), background .3s}
body.app .tile:hover svg{transform:scale(1.1) rotate(-6deg); background:rgba(var(--ac),.22)}
.icon-btn,.sb-btn,.sb-tg{border-radius:50%!important}

/* sidebar: native scrollbar hidden; a slim overlay thumb (app.js) fades in on hover */
.sb-nav{scrollbar-width:none!important}
.sb-nav::-webkit-scrollbar{display:none!important}
.sb-thumb{position:absolute; right:3px; width:3px; border-radius:3px; background:rgba(var(--fg),.28); opacity:0; transition:opacity .25s; pointer-events:none; z-index:5}
.sb:hover .sb-thumb.on,.sb-thumb.live{opacity:1}


/* ===== Mobile (≤760px): drawer menu, full-width content, comfortable touch targets ===== */
.m-menu{display:none}
@media (max-width:760px){
  body.app{--side-w:0px!important}
  .content{margin-left:0!important; padding:68px 14px calc(14px + env(safe-area-inset-bottom))!important}
  .m-menu{display:grid; position:fixed; top:12px; left:12px; z-index:19; width:44px; height:44px; place-items:center; padding:0; border-radius:50%; border:1px solid var(--line); background:rgba(var(--sf),.94); color:var(--ink); box-shadow:0 6px 18px -8px rgba(0,0,0,.28); cursor:pointer}
  .m-menu svg{width:20px; height:20px}
  .sb{transition:transform .38s cubic-bezier(.2,.8,.2,1), width .3s!important}
  body.app.collapsed .sb{transform:translateX(calc(-100% - 24px)); box-shadow:none; pointer-events:none}
  body.app:not(.collapsed) .sb{transform:none; width:min(300px,86vw)!important; box-shadow:18px 0 50px -14px rgba(0,0,0,.45)}
  body.app:not(.collapsed) .m-menu{display:none}
  body.app.collapsed .scrim{opacity:0!important; pointer-events:none!important}
  input,select,textarea{font-size:16px!important}
  dialog{max-width:94vw!important; max-height:90svh; overflow:auto}
  .toast{bottom:calc(18px + env(safe-area-inset-bottom)); max-width:92vw; text-align:center}
  .btn,.icon-btn{min-height:44px}
}


/* ===== Mobile: tables become tidy cards (labels are added by app.js) ===== */
@media (max-width:700px){
  .tbar{display:none!important}
  .table-wrap,.sheet-wrap{overflow:visible!important; max-height:none!important; border:0!important; box-shadow:none!important; background:transparent!important; border-radius:0!important; padding:0!important}
  table.mc{display:block!important; width:100%!important; min-width:0!important; border:0!important}
  table.mc colgroup,table.mc thead{display:none!important}
  table.mc tbody{display:grid; gap:10px}
  table.mc tr{display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 14px; padding:14px 16px; border:1px solid var(--line); border-radius:20px; background:rgba(var(--sf),.9); box-shadow:0 8px 22px -16px rgba(0,0,0,.25)}
  table.mc td{display:flex!important; flex-direction:column; gap:2px; border:0!important; padding:0!important; height:auto!important; min-width:0; width:auto!important; white-space:normal!important; text-align:start!important; background:transparent!important; position:static!important; overflow-wrap:anywhere; font-size:14px; box-shadow:none!important}
  table.mc td::before{content:attr(data-label); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute)}
  table.mc td:first-child{font-weight:500; font-size:15px}
  table.mc td.w,table.mc td[colspan]{grid-column:1/-1}
  table.mc td.e{display:none!important}
  table.mc td.ac{grid-column:1/-1; flex-direction:row!important; flex-wrap:wrap; gap:8px; align-items:center}
  table.mc td.ac::before,table.mc td[colspan]::before{display:none}
  table.mc tr:active{background:rgba(var(--ac),.08)}
}


/* ===== Mobile: bottom tab bar instead of the drawer ===== */
.mtabs,.msheet{display:none}
@media (max-width:760px){
  .sb,.m-menu,.scrim{display:none!important}
  .content{padding:22px 14px calc(96px + env(safe-area-inset-bottom))!important}
  .mtabs{display:flex; position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:30; height:62px; padding:6px; gap:2px; border-radius:26px; border:1px solid var(--line); background:rgba(var(--sf),.88); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 14px 34px -14px rgba(0,0,0,.32)}
  .mt{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:none; color:var(--mute); font:inherit; font-size:10.5px; border-radius:20px; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .2s,color .2s}
  .mt svg{width:21px; height:21px}
  .mt span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .mt.on{color:var(--accent); background:rgba(var(--ac),.12)}
  .lic-bar{bottom:calc(84px + env(safe-area-inset-bottom))!important}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom))!important}
  .msheet{display:block; position:fixed; inset:0; z-index:40; pointer-events:none}
  .ms-back{position:absolute; inset:0; background:rgba(10,20,18,.32); opacity:0; transition:opacity .25s}
  .ms-card{position:absolute; left:0; right:0; bottom:0; max-height:78svh; overflow:auto; padding:10px 16px calc(24px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; background:rgba(var(--sf),.97); box-shadow:0 -20px 50px -20px rgba(0,0,0,.35); transform:translateY(105%); transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  .msheet.open{pointer-events:auto} .msheet.open .ms-back{opacity:1} .msheet.open .ms-card{transform:none}
  .ms-grab{display:block; width:38px; height:4px; border-radius:4px; background:var(--line); margin:2px auto 16px}
  .ms-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
  .ms-it{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px; border-radius:22px; border:1px solid var(--line); background:rgba(var(--sf),.9); color:var(--ink); text-decoration:none; font-size:12.5px; text-align:center}
  .ms-it b{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(var(--ac),.12); color:var(--accent)}
  .ms-it b svg{width:21px; height:21px}
  .ms-it.on{border-color:var(--accent)}
}

@media (max-width:760px){ body.home .content{padding:84px 14px calc(96px + env(safe-area-inset-bottom))!important} }


/* ===== Top bar (all sizes ≥ 761px) — sidebar is retired ===== */
.tbr{display:none}
.sb,.scrim,.m-menu{display:none!important}
body.app{--side-w:0px!important}
.content{margin-left:0!important}
@media (min-width:761px){
  .content{padding-top:88px!important}
  .tbr{display:flex; align-items:center; gap:6px; position:fixed; top:12px; left:14px; right:14px; z-index:30; height:56px; padding:0 10px 0 16px; border-radius:28px; border:1px solid var(--line); background:rgba(var(--sf),.82); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 14px 36px -20px rgba(0,0,0,.3)}
  .tb-brand{display:flex; align-items:center; gap:10px; margin-right:14px; color:var(--ink); text-decoration:none; flex:none}
  .tb-brand img{height:26px; width:auto; display:block}
  .tb-brand b{font-weight:500; font-size:14px; letter-spacing:.06em; white-space:nowrap}
  .tb-nav{display:flex; align-items:center; gap:2px; min-width:0}
  .tb-t{display:flex; align-items:center; gap:7px; height:38px; padding:0 14px; border:0; border-radius:19px; background:none; color:var(--mute); font:inherit; font-size:13.5px; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .2s,color .2s}
  .tb-t svg{width:18px; height:18px; flex:none}
  .tb-t:hover{background:rgba(var(--ac),.08); color:var(--ink)}
  .tb-t.on{background:rgba(var(--ac),.14); color:var(--accent)}
  .tb-sp{flex:1}
  .tb-i{position:relative; display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; background:none; color:var(--mute); cursor:pointer; transition:background .2s,color .2s}
  .tb-i svg{width:19px; height:19px} .tb-i:hover{background:rgba(var(--ac),.08); color:var(--ink)}
  .tb-n{position:absolute; top:4px; right:3px; min-width:15px; height:15px; padding:0 4px; border-radius:8px; background:#e5484d; color:#fff; font:600 9.5px/15px inherit; font-style:normal; text-align:center}
  .tb-me{display:flex; align-items:center; gap:9px; height:42px; padding:0 12px 0 5px; border:0; border-radius:21px; background:none; color:var(--ink); font:inherit; cursor:pointer}
  .tb-me:hover{background:rgba(var(--ac),.08)}
  .tb-av{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:rgba(var(--ac),.16); color:var(--accent); font-size:12px; font-weight:500}
  .tb-nm{display:flex; flex-direction:column; text-align:left; font-size:13px; line-height:1.15} .tb-nm small{color:var(--mute); font-size:11px}
  .tb-pop{position:fixed; top:76px; right:20px; z-index:31; width:250px; padding:14px; border-radius:24px; border:1px solid var(--line); background:rgba(var(--sf),.98); box-shadow:0 24px 60px -24px rgba(0,0,0,.4); display:flex; flex-direction:column; gap:10px}
  .tb-pop{text-align:left} .tb-who{align-items:flex-start} .tb-pop[hidden]{display:none}
  .tb-who{display:flex; flex-direction:column; padding:2px 4px 8px; border-bottom:1px solid var(--line)} .tb-who small{color:var(--mute)}
  .tb-st{display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--mute); letter-spacing:.06em; text-transform:uppercase} .tb-st select{height:38px; font-size:13.5px; text-transform:none; letter-spacing:0}
  .tb-row{display:flex; align-items:center; gap:10px; height:40px; padding:0 10px; border-radius:16px; color:var(--ink); text-decoration:none; font-size:14px} .tb-row:hover{background:rgba(var(--ac),.08)} .tb-row svg{width:18px; height:18px; color:var(--mute)}
  /* modules panel as a popover under the bar */
  .msheet{display:block; position:fixed; inset:0; z-index:40; pointer-events:none}
  .ms-back{position:absolute; inset:0; background:transparent}
  .ms-card{position:absolute; top:76px; left:50%; width:min(760px,calc(100vw - 40px)); max-height:calc(100svh - 100px); overflow:auto; padding:18px; border-radius:28px; border:1px solid var(--line); background:rgba(var(--sf),.98); box-shadow:0 30px 70px -26px rgba(0,0,0,.4); opacity:0; transform:translate(-50%,-8px) scale(.98); transition:opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1)}
  .msheet.open{pointer-events:auto} .msheet.open .ms-card{opacity:1; transform:translate(-50%,0) scale(1)}
  .ms-grab{display:none}
  .ms-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
  .ms-it{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 6px; border-radius:22px; border:1px solid var(--line); background:rgba(var(--sf),.9); color:var(--ink); text-decoration:none; font-size:13px; text-align:center; transition:transform .2s, border-color .2s} .ms-it:hover{transform:translateY(-2px); border-color:var(--accent)}
  .ms-it b{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(var(--ac),.12); color:var(--accent)} .ms-it b svg{width:21px; height:21px}
  .ms-it.on{border-color:var(--accent)}
  body.home .tt,body.home .tl{display:none!important}
}
@media (min-width:761px) and (max-width:1100px){ .tb-t span,.tb-nm{display:none} .tb-t{padding:0 11px} .tb-t#tbAll span{display:none} }


/* ===== Custom dropdown list ===== */
.ddm{position:fixed; z-index:100000; display:flex; flex-direction:column; gap:2px; padding:6px; overflow-y:auto; border-radius:20px; border:1px solid var(--line); background:rgba(var(--sf),.98); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 24px 56px -22px rgba(0,0,0,.42); font-family:var(--font); text-align:left; color:var(--ink); animation:ddIn .16s cubic-bezier(.2,.8,.2,1); scrollbar-width:thin; scrollbar-color:rgba(var(--fg),.22) transparent}
@keyframes ddIn{from{opacity:0; transform:translateY(-4px) scale(.985)}to{opacity:1; transform:none}}
.ddi{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:38px; padding:0 14px; border:0; border-radius:14px; background:none; color:var(--ink); font:inherit; font-size:14.5px; text-align:left; cursor:pointer}
.ddi span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ddi.hl,.ddi:hover{background:rgba(var(--ac),.11)}
.ddi.on{color:var(--accent); font-weight:500}
.ddi:disabled{opacity:.4; cursor:not-allowed}
.dde{padding:12px 14px; color:var(--mute); font-size:14px}
select.dd-open{border-color:var(--accent)!important}

/* ===== Calm clinic background: soft drifting glow + a faint, slow heartbeat line ===== */
.bgx .fl{display:none!important}
.bgx .m1{background:radial-gradient(circle at 40% 40%, rgba(var(--ac),.13), transparent 68%); animation:mA 46s ease-in-out infinite alternate!important}
.bgx .m2{background:radial-gradient(circle at 50% 50%, rgba(120,150,185,.11), transparent 68%); animation:mB 54s ease-in-out infinite alternate!important}
.bgx .m3{background:radial-gradient(circle at 50% 50%, rgba(var(--ac),.09), transparent 70%); animation:mC 62s ease-in-out infinite alternate!important}
.bgx .ecg{display:block!important; opacity:.55; bottom:7vh; height:22vh}
.bgx .e0{stroke:rgba(var(--ac),.10)!important; stroke-width:1.2}
.bgx .e1{display:block!important; stroke:rgba(var(--ac),.38)!important; stroke-width:1.6; filter:none!important; animation:beat 14s linear infinite!important}
@keyframes mA{to{transform:translate(9vmax,6vmax) scale(1.12)}}
@keyframes mB{to{transform:translate(-8vmax,-5vmax) scale(1.14)}}
@keyframes mC{to{transform:translate(6vmax,-6vmax) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.bgx b,.bgx .e1{animation:none!important}}


/* ===== Dark mode (opt-in: html[data-theme="dark"]) ===== */
.tb-dark{width:100%; border:0; background:none; font:inherit; color:inherit; cursor:pointer; text-align:left}
.tb-sw{margin-left:auto; width:34px; height:20px; border-radius:10px; background:rgba(var(--fg),.2); position:relative; transition:background .2s; flex:none}
.tb-sw::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tb-dark[aria-checked="true"] .tb-sw{background:var(--accent)} .tb-dark[aria-checked="true"] .tb-sw::after{transform:translateX(14px)}
html[data-theme="dark"]{
  --bg:#0d1113; --bg2:#151b1e; --ink:#e9efef; --mute:#93a2a5; --fg:233,239,239; --bgc:20,26,29; --sf:29,37,41; --dlg:#1a2226; --cs:dark;
  --accent:#58b9a1; --accent2:#4aa38b; --accent-ink:#7ccbb7; --on-accent:#08231c; --ac:88,185,161; --accent-soft:rgba(88,185,161,.14);
  --g0:#121719; --g1:#182024; --g2:#1d262a; --g3:#222d31; --g4:#2c383c; --g5:#3b494d; --gline:rgba(233,239,239,.08);
  --line:rgba(233,239,239,.14); --fill:#1c2529; --glow:rgba(88,185,161,.2);
  color-scheme:dark;
}
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .status select,
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .input,html[data-theme="dark"] select,html[data-theme="dark"] textarea,
html[data-theme="dark"] .lines input,html[data-theme="dark"] .lines select,
html[data-theme="dark"] .rxrow input,html[data-theme="dark"] .rxrow select{background:var(--fill)}
html[data-theme="dark"] .field input:focus,html[data-theme="dark"] .input:focus,html[data-theme="dark"] select:focus,html[data-theme="dark"] textarea:focus{background:var(--fill)}
html[data-theme="dark"] .side,html[data-theme="dark"] .sb,
html[data-theme="dark"] .tile,html[data-theme="dark"] .card,html[data-theme="dark"] .panel,html[data-theme="dark"] .cardx,
html[data-theme="dark"] .sheet-wrap,html[data-theme="dark"] .kb-card,html[data-theme="dark"] dialog,html[data-theme="dark"] .okbox{background:var(--g2); box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
html[data-theme="dark"] .sb-user{background:var(--g3)}
html[data-theme="dark"] th{background:var(--g3)}
html[data-theme="dark"] .sheet tbody tr:hover td,html[data-theme="dark"] tbody tr:hover td{background:rgba(var(--fg),.04)}
html[data-theme="dark"] .tl li::before{border-color:var(--bg2)}
html[data-theme="dark"] .sw.on{box-shadow:0 0 0 2px #0f1517 inset}
html[data-theme="dark"] .bgx .m1{background:radial-gradient(circle at 40% 40%, rgba(88,185,161,.11), transparent 64%)}
html[data-theme="dark"] .bgx .m2{background:radial-gradient(circle at 50% 50%, rgba(96,120,190,.10), transparent 64%)}
html[data-theme="dark"] .bgx .m3{background:radial-gradient(circle at 50% 50%, rgba(88,185,161,.08), transparent 66%)}
html[data-theme="dark"] .logo,html[data-theme="dark"] img.logo{filter:none}
html[data-theme="dark"] ::selection{background:rgba(88,185,161,.3)}


/* ===== Soft shadows (light & dark) ===== */
:root{
  --sh1:0 1px 2px rgba(22,40,40,.04), 0 6px 16px -10px rgba(22,40,40,.12);
  --sh2:0 2px 4px rgba(22,40,40,.04), 0 14px 30px -18px rgba(22,40,40,.18);
  --sh3:0 4px 10px rgba(22,40,40,.04), 0 28px 60px -30px rgba(22,40,40,.30);
  --sh-btn:0 4px 12px -8px rgba(var(--ac),.4);
}
html[data-theme="dark"]{
  --sh1:0 1px 2px rgba(0,0,0,.25), 0 6px 16px -10px rgba(0,0,0,.5);
  --sh2:0 2px 4px rgba(0,0,0,.25), 0 14px 30px -18px rgba(0,0,0,.6);
  --sh3:0 4px 10px rgba(0,0,0,.3), 0 28px 60px -28px rgba(0,0,0,.7);
  --sh-btn:0 4px 12px -8px rgba(var(--ac),.3);
}
.tile,.card,.panel,.cardx,.sheet-wrap,.kb-card,.kpi,html[data-theme="dark"] .tile,html[data-theme="dark"] .card,html[data-theme="dark"] .panel,html[data-theme="dark"] .cardx,html[data-theme="dark"] .sheet-wrap,html[data-theme="dark"] .kb-card{box-shadow:var(--sh1)}
body.app .tile:hover,.tile:hover{box-shadow:var(--sh2)}
.tbr{box-shadow:var(--sh1)}
.mtabs{box-shadow:var(--sh2)}
dialog,html[data-theme="dark"] dialog,.okbox,html[data-theme="dark"] .okbox,.tb-pop,.ddm,.msheet .ms-card{box-shadow:var(--sh3)}
.btn:not(.ghost){box-shadow:var(--sh-btn)}
.btn.ghost,.sbtn,.act{box-shadow:0 1px 2px rgba(22,40,40,.05)}
html[data-theme="dark"] .btn.ghost,html[data-theme="dark"] .sbtn,html[data-theme="dark"] .act{box-shadow:0 1px 2px rgba(0,0,0,.3)}
html[data-theme="dark"] .rules-warn{background:rgba(224,160,60,.12)!important; border-color:rgba(224,160,60,.35)!important; color:#e8c586!important}


/* ===== Liquid glass ===== */
:root{--ga:.62; --gb:30px; --dim:.05; --gl:255,255,255; --gh:.62; --gs:.45}
html[data-theme="dark"]{--gl:255,255,255; --gh:.15; --gs:.08}
.bgx::after{content:''; position:absolute; inset:0; background:rgba(8,22,20,var(--dim)); transition:background .2s}
html[data-theme="dark"] .bgx::after{background:rgba(0,0,0,calc(var(--dim)*1.1))}
.tile,.card,.panel,.cardx,.sheet-wrap,.kb-card,.kpi,.tbr,.mtabs,.sb,.side,
html[data-theme="dark"] .tile,html[data-theme="dark"] .card,html[data-theme="dark"] .panel,html[data-theme="dark"] .cardx,html[data-theme="dark"] .sheet-wrap,html[data-theme="dark"] .kb-card,html[data-theme="dark"] .sb,html[data-theme="dark"] .side,
body.home.app .tile{
  background:linear-gradient(155deg, rgba(var(--sf),calc(var(--ga) + .10)), rgba(var(--sf),var(--ga)) 55%, rgba(var(--sf),calc(var(--ga) - .06)))!important;
  -webkit-backdrop-filter:blur(var(--gb)) saturate(1.7); backdrop-filter:blur(var(--gb)) saturate(1.7);
  border:1px solid rgba(var(--gl),calc(var(--gh) * .75))!important;
  box-shadow:var(--sh1), inset 0 1px 0 rgba(var(--gl),var(--gh)), inset 0 -1px 0 rgba(var(--gl),calc(var(--gh) * .25))!important;
}
dialog,html[data-theme="dark"] dialog,.okbox,html[data-theme="dark"] .okbox,.tb-pop,.ddm,.ms-card,.pick .list{
  background:linear-gradient(155deg, rgba(var(--sf),calc(var(--ga) * .3 + .76)), rgba(var(--sf),calc(var(--ga) * .3 + .70)))!important;
  -webkit-backdrop-filter:blur(calc(var(--gb) + 8px)) saturate(1.8); backdrop-filter:blur(calc(var(--gb) + 8px)) saturate(1.8);
  border:1px solid rgba(var(--gl),calc(var(--gh) * .8))!important;
  box-shadow:var(--sh3), inset 0 1px 0 rgba(var(--gl),var(--gh))!important;
}
dialog::backdrop{background:rgba(10,22,20,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.btn.ghost,.sbtn,.act,.field input,.field select,.field textarea,.input,select,textarea,.lines input,.lines select,.rxrow input,.rxrow select,
html[data-theme="dark"] .btn.ghost,html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea,html[data-theme="dark"] .input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{
  background:rgba(var(--sf),calc(var(--ga) * .55 + .25))!important; box-shadow:inset 0 1px 0 rgba(var(--gl),calc(var(--gh) * .7));
}
th,html[data-theme="dark"] th{background:rgba(var(--fg),.045)!important}
.tb-look{display:flex; flex-direction:column; gap:10px; padding:10px 10px 8px; margin:2px 0 6px; border-top:1px solid var(--gline); border-bottom:1px solid var(--gline)}
.tb-look label{display:flex; flex-direction:column; gap:6px; font-size:12px; letter-spacing:.04em; color:var(--mute); text-align:left}
.tb-look input[type=range]{width:100%; height:18px; accent-color:var(--accent); background:transparent!important; padding:0; border:0!important; box-shadow:none!important}
.tb-rs{align-self:flex-start; border:0; background:none; color:var(--accent-ink); font:inherit; font-size:12.5px; cursor:pointer; padding:0}
@media (prefers-reduced-transparency:reduce){:root{--ga:.96!important}.tile,.card,.panel,.tbr,.mtabs,dialog,.tb-pop{-webkit-backdrop-filter:none!important; backdrop-filter:none!important}}


/* ===== Liquid glass v2: stronger lensing, sheen, every card; glass lens in the top bar ===== */
.tile,.card,.panel,.cardx,.sheet-wrap,.kb-card,.kpi,.tbr,.mtabs,.sb,.side,.cc,.card2,.table-wrap,.colpanel,.kb-fact,.kb-feed a,.kb-res a,.kb-list li,
html[data-theme="dark"] .tile,html[data-theme="dark"] .card,html[data-theme="dark"] .panel,html[data-theme="dark"] .cardx,html[data-theme="dark"] .sheet-wrap,html[data-theme="dark"] .kb-card,html[data-theme="dark"] .sb,html[data-theme="dark"] .side,
body.home.app .tile{
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(var(--gl),var(--gs)), transparent 46%),
    radial-gradient(90% 70% at 100% 100%, rgba(var(--ac),.10), transparent 60%),
    linear-gradient(155deg, rgba(var(--sf),calc(var(--ga) + .10)), rgba(var(--sf),var(--ga)) 55%, rgba(var(--sf),calc(var(--ga) - .08)))!important;
  -webkit-backdrop-filter:blur(var(--gb)) saturate(1.6) brightness(1.02); backdrop-filter:blur(var(--gb)) saturate(1.6) brightness(1.02);
  border:1px solid rgba(var(--gl),calc(var(--gh) * .7))!important;
  box-shadow:var(--sh1), inset 0 1.5px 0 rgba(var(--gl),var(--gh)), inset 1px 0 0 rgba(var(--gl),calc(var(--gh) * .45)), inset 0 -1px 0 rgba(var(--gl),calc(var(--gh) * .22)), inset 0 0 24px -10px rgba(var(--gl),calc(var(--gh) * .55))!important;
}
.kb-list li,.kb-feed a,.kb-res a,.cc{-webkit-backdrop-filter:blur(14px) saturate(1.6); backdrop-filter:blur(14px) saturate(1.6)}
.tbr{overflow:visible}
.tb-nav{position:relative}
.tb-lens{position:absolute; left:0; top:50%; height:38px; margin-top:-19px; width:0; border-radius:19px; pointer-events:none; z-index:0;
  background:radial-gradient(120% 140% at 20% 0%, rgba(var(--gl),calc(var(--gs) + .15)), transparent 55%), linear-gradient(160deg, rgba(var(--ac),.20), rgba(var(--ac),.10));
  -webkit-backdrop-filter:blur(10px) saturate(2.2) brightness(1.08); backdrop-filter:blur(10px) saturate(2.2) brightness(1.08);
  border:1px solid rgba(var(--gl),calc(var(--gh) * .8));
  box-shadow:0 6px 16px -8px rgba(var(--ac),.5), inset 0 1.5px 0 rgba(var(--gl),var(--gh)), inset 0 -6px 12px -8px rgba(var(--ac),.35), inset 0 0 14px -4px rgba(var(--gl),calc(var(--gh) * .6));
  transition:transform .6s cubic-bezier(.3,1.35,.4,1), width .6s cubic-bezier(.3,1.35,.4,1)}
.tb-lens.squish{animation:lensq .6s ease}
@keyframes lensq{0%{scale:1 1}35%{scale:1.07 .9}70%{scale:.98 1.04}100%{scale:1 1}}
.tb-t{position:relative; z-index:1}
.tb-nav .tb-t.on,.tb-nav .tb-t:hover{background:none}
.tb-nav .tb-t.on{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.tb-lens{transition:none}.tb-lens.squish{animation:none}}
.sheet tbody td,.sheet tbody tr:nth-child(even) td{background:rgba(var(--sf),.28)!important}
.sheet tbody tr:hover td{background:rgba(var(--ac),.10)!important}


/* ===== Mobile: liquid glass bottom bar with sliding lens ===== */
@media (max-width:760px){
  .mtabs{position:fixed; overflow:visible}
  .mt{position:relative; z-index:1}
  .mt.on{background:none!important; color:var(--accent)}
  .mt-lens{position:absolute; left:0; top:0; width:0; height:0; border-radius:20px; pointer-events:none; z-index:0;
    background:radial-gradient(120% 140% at 20% 0%, rgba(var(--gl),calc(var(--gs) + .15)), transparent 55%), linear-gradient(160deg, rgba(var(--ac),.22), rgba(var(--ac),.10));
    -webkit-backdrop-filter:blur(10px) saturate(2.2) brightness(1.08); backdrop-filter:blur(10px) saturate(2.2) brightness(1.08);
    border:1px solid rgba(var(--gl),calc(var(--gh) * .8));
    box-shadow:0 6px 16px -8px rgba(var(--ac),.5), inset 0 1.5px 0 rgba(var(--gl),var(--gh)), inset 0 -6px 12px -8px rgba(var(--ac),.35);
    transition:transform .6s cubic-bezier(.3,1.35,.4,1), width .6s cubic-bezier(.3,1.35,.4,1), height .6s}
  .mt-lens.squish{animation:lensq .6s ease}
  .ms-it{background:linear-gradient(155deg, rgba(var(--sf),calc(var(--ga) + .2)), rgba(var(--sf),calc(var(--ga) + .05)))!important; -webkit-backdrop-filter:blur(12px) saturate(1.8); backdrop-filter:blur(12px) saturate(1.8); border-color:rgba(var(--gl),calc(var(--gh) * .7))!important; box-shadow:inset 0 1.5px 0 rgba(var(--gl),var(--gh)), var(--sh1)}
  .ms-look{margin-top:14px; display:flex; flex-direction:column; gap:2px}
  .ms-look .tb-row{width:100%; background:none; border:0; font:inherit; color:var(--ink); text-align:left}
  .ms-look .tb-look{margin:4px 0}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.mt-lens{transition:none}.mt-lens.squish{animation:none}}
@media (max-width:760px){ .mtabs{background:linear-gradient(155deg, rgba(var(--sf),calc(var(--ga) * .35 + .66)), rgba(var(--sf),calc(var(--ga) * .35 + .58)))!important} }
@media (max-width:760px){
  .ms-card{background:linear-gradient(155deg, rgba(var(--sf),calc(var(--ga) * .2 + .84)), rgba(var(--sf),calc(var(--ga) * .2 + .80)))!important; max-height:86svh}
  .ms-grid{gap:8px} .ms-it{padding:10px 4px; gap:6px; font-size:12px; border-radius:18px} .ms-it b{width:36px; height:36px} .ms-it b svg{width:19px; height:19px}
  .ms-look{border-top:1px solid var(--gline); padding-top:8px}
  .ms-look .tb-dark{display:flex; align-items:center; gap:10px; height:40px; padding:0 10px}
  .ms-look .tb-sw{margin-left:auto; flex:none}
}
.sbtn.pri,html[data-theme="dark"] .sbtn.pri{background:var(--accent)!important; color:var(--on-accent)!important; border-color:var(--accent)!important}
.sbtn.dng{color:#c0392b}


/* ===== v3: calmer, richer glass; dropdown menu; dialogs keep fixed children viewport-relative ===== */
dialog,html[data-theme="dark"] dialog{-webkit-backdrop-filter:none!important; backdrop-filter:none!important}
.tile,.card,.panel,.cardx,.sheet-wrap,.kb-card,.kpi,.tbr,.mtabs,.cc,.card2,.table-wrap,
html[data-theme="dark"] .tile,html[data-theme="dark"] .card,html[data-theme="dark"] .panel,html[data-theme="dark"] .cardx,html[data-theme="dark"] .sheet-wrap,html[data-theme="dark"] .kb-card,body.home.app .tile{
  box-shadow:var(--sh1), inset 0 1.5px 0 rgba(var(--gl),var(--gh)), inset 1.5px 0 0 rgba(var(--gl),calc(var(--gh) * .5)), inset 0 -1.5px 0 rgba(var(--gl),calc(var(--gh) * .3)), inset 0 0 38px -12px rgba(var(--gl),calc(var(--gh) * .7)), 0 0 0 .5px rgba(var(--fg),.06)!important;
}
.ddm{background:linear-gradient(155deg, rgba(var(--sf),.92), rgba(var(--sf),.84))!important; -webkit-backdrop-filter:blur(28px) saturate(2.2); backdrop-filter:blur(28px) saturate(2.2);
  border:1px solid rgba(var(--gl),calc(var(--gh) * .8))!important; border-radius:22px; padding:7px; gap:3px;
  box-shadow:var(--sh3), inset 0 1.5px 0 rgba(var(--gl),var(--gh))!important; animation:ddin .16s cubic-bezier(.2,.9,.3,1.2)}
@keyframes ddin{from{opacity:0; transform:scale(.96) translateY(-4px)}to{opacity:1; transform:none}}
.ddi{min-height:40px; border-radius:15px; padding:0 14px; font-size:14.5px; transition:background .12s}
.ddi.hl,.ddi:hover{background:rgba(var(--ac),.13)}
.ddi.on{background:rgba(var(--ac),.16); color:var(--accent-ink); font-weight:500}
.ddi svg{flex:none; color:var(--accent)}
.ddm::-webkit-scrollbar{width:8px} .ddm::-webkit-scrollbar-thumb{background:rgba(var(--fg),.2); border-radius:8px; border:2px solid transparent; background-clip:padding-box}
select{cursor:pointer}
@media (min-width:761px){ .ms-look{display:none!important} }
@media (prefers-reduced-motion:reduce){.ddm{animation:none}}


/* ===== v4: easy on the eyes — muted palette, softer light, glass kept ===== */
:root{--ink:#222b2e; --mute:#5f6b6f}
.tb-lens,.mt-lens{background:radial-gradient(120% 140% at 20% 0%, rgba(var(--gl),calc(var(--gs) + .1)), transparent 55%), linear-gradient(160deg, rgba(var(--ac),.15), rgba(var(--ac),.07))!important;
  box-shadow:0 4px 12px -8px rgba(var(--ac),.4), inset 0 1.5px 0 rgba(var(--gl),var(--gh)), inset 0 -5px 10px -8px rgba(var(--ac),.25)!important}
.btn:not(.ghost){background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 94%,white), var(--accent))}
.btn:not(.ghost):hover{filter:brightness(1.04)}
.kpi,.tile{border-color:rgba(var(--gl),calc(var(--gh) * .6))!important}
.tile:hover,body.home.app .tile:hover{border-color:rgba(var(--ac),.35)!important}
.pill{filter:saturate(.8)}
.tb-t.on{color:var(--accent-ink)}
.mt.on{color:var(--accent-ink)!important}


/* ===== v5: richer palette — brand #0f9a77 + harmonised companions, one hue per module ===== */
:root{
  --accent:#0f9a77; --accent2:#0b7d61; --accent-ink:#0b7d61; --ac:15,154,119; --accent-soft:rgba(15,154,119,.11); --glow:rgba(15,154,119,.22);
  --hp:72%; --hb:#0a1714;
  --c-green:15,154,119;
  --c-blue:46,129,208;
  --c-indigo:92,104,214;
  --c-violet:140,92,196;
  --c-plum:178,82,164;
  --c-rose:216,84,118;
  --c-coral:226,106,84;
  --c-orange:226,126,46;
  --c-amber:214,154,28;
  --c-lime:110,164,44;
  --c-cyan:18,150,176;
  --c-slate:94,112,134;
  --h:var(--c-green); --pm:var(--c-green);
}
html[data-theme="dark"]{
  --accent:#34c4a0; --accent2:#2aa688; --accent-ink:#6fdcc0; --ac:52,196,160; --accent-soft:rgba(52,196,160,.14); --glow:rgba(52,196,160,.2);
  --hp:90%; --hb:#ffffff;
  --c-green:52,196,160;
  --c-blue:94,160,235;
  --c-indigo:130,138,240;
  --c-violet:172,130,228;
  --c-plum:208,120,196;
  --c-rose:240,118,150;
  --c-coral:244,138,114;
  --c-orange:244,156,84;
  --c-amber:236,184,64;
  --c-lime:150,200,80;
  --c-cyan:70,190,214;
  --c-slate:140,156,176;
}
.tile[href^="patients.html"],.sb-item[href^="patients.html"],.tb-t[href^="patients.html"],.mt[href^="patients.html"],.ms-it[href^="patients.html"]{--h:var(--c-blue)}
.tile[href^="appointments.html"],.sb-item[href^="appointments.html"],.tb-t[href^="appointments.html"],.mt[href^="appointments.html"],.ms-it[href^="appointments.html"]{--h:var(--c-indigo)}
.tile[href^="doctor.html"],.sb-item[href^="doctor.html"],.tb-t[href^="doctor.html"],.mt[href^="doctor.html"],.ms-it[href^="doctor.html"]{--h:var(--c-cyan)}
.tile[href^="visits.html"],.sb-item[href^="visits.html"],.tb-t[href^="visits.html"],.mt[href^="visits.html"],.ms-it[href^="visits.html"]{--h:var(--c-violet)}
.tile[href^="billing.html"],.sb-item[href^="billing.html"],.tb-t[href^="billing.html"],.mt[href^="billing.html"],.ms-it[href^="billing.html"]{--h:var(--c-orange)}
.tile[href^="pharmacy.html"],.sb-item[href^="pharmacy.html"],.tb-t[href^="pharmacy.html"],.mt[href^="pharmacy.html"],.ms-it[href^="pharmacy.html"]{--h:var(--c-rose)}
.tile[href^="supplies.html"],.sb-item[href^="supplies.html"],.tb-t[href^="supplies.html"],.mt[href^="supplies.html"],.ms-it[href^="supplies.html"]{--h:var(--c-coral)}
.tile[href^="reports.html"],.sb-item[href^="reports.html"],.tb-t[href^="reports.html"],.mt[href^="reports.html"],.ms-it[href^="reports.html"]{--h:var(--c-plum)}
.tile[href^="dashboard.html"],.sb-item[href^="dashboard.html"],.tb-t[href^="dashboard.html"],.mt[href^="dashboard.html"],.ms-it[href^="dashboard.html"]{--h:var(--c-green)}
.tile[href^="data.html"],.sb-item[href^="data.html"],.tb-t[href^="data.html"],.mt[href^="data.html"],.ms-it[href^="data.html"]{--h:var(--c-cyan)}
.tile[href^="setup.html"],.sb-item[href^="setup.html"],.tb-t[href^="setup.html"],.mt[href^="setup.html"],.ms-it[href^="setup.html"]{--h:var(--c-slate)}
.tile[href^="roles.html"],.sb-item[href^="roles.html"],.tb-t[href^="roles.html"],.mt[href^="roles.html"],.ms-it[href^="roles.html"]{--h:var(--c-amber)}
.tile[href^="hr.html"],.sb-item[href^="hr.html"],.tb-t[href^="hr.html"],.mt[href^="hr.html"],.ms-it[href^="hr.html"]{--h:var(--c-plum)}
.tile[href^="finance.html"],.sb-item[href^="finance.html"],.tb-t[href^="finance.html"],.mt[href^="finance.html"],.ms-it[href^="finance.html"]{--h:var(--c-lime)}
.tile[href^="audit.html"],.sb-item[href^="audit.html"],.tb-t[href^="audit.html"],.mt[href^="audit.html"],.ms-it[href^="audit.html"]{--h:var(--c-slate)}
html[data-mod="patients"]{--pm:var(--c-blue)}
html[data-mod="appointments"]{--pm:var(--c-indigo)}
html[data-mod="doctor"]{--pm:var(--c-cyan)}
html[data-mod="visits"]{--pm:var(--c-violet)}
html[data-mod="billing"]{--pm:var(--c-orange)}
html[data-mod="pharmacy"]{--pm:var(--c-rose)}
html[data-mod="supplies"]{--pm:var(--c-coral)}
html[data-mod="reports"]{--pm:var(--c-plum)}
html[data-mod="dashboard"]{--pm:var(--c-green)}
html[data-mod="data"]{--pm:var(--c-cyan)}
html[data-mod="setup"]{--pm:var(--c-slate)}
html[data-mod="roles"]{--pm:var(--c-amber)}
html[data-mod="hr"]{--pm:var(--c-plum)}
html[data-mod="finance"]{--pm:var(--c-lime)}
html[data-mod="audit"]{--pm:var(--c-slate)}
html[data-mod="patient"]{--pm:var(--c-blue)}
html[data-mod="visit"]{--pm:var(--c-violet)}

body.app .tile svg{background:rgba(var(--h),.15)!important; color:color-mix(in srgb,rgb(var(--h)) var(--hp),var(--hb))!important}
body.app .tile:hover svg{background:rgba(var(--h),.26)!important}
.tile:hover,body.home.app .tile:hover{border-color:rgba(var(--h),.5)!important}
body.app .tile{background-image:radial-gradient(90% 70% at 50% 0%,rgba(var(--h),.10),transparent 70%)}
.ms-it b{background:rgba(var(--h),.16)!important; color:color-mix(in srgb,rgb(var(--h)) var(--hp),var(--hb))!important}
.sb-item .ic{background:rgba(var(--h),.13); color:color-mix(in srgb,rgb(var(--h)) var(--hp),var(--hb))}
.sb-item:hover .ic{background:rgba(var(--h),.22)}
.sb-item.active{background:rgba(var(--h),.12)!important; color:var(--ink)}
.sb-item.active .ic{background:rgb(var(--h))!important; color:#fff!important; box-shadow:0 6px 16px -8px rgba(var(--h),.8)}
.tb-t svg,.mt svg{color:color-mix(in srgb,rgb(var(--h)) var(--hp),var(--hb))}
.tb-t.on,.mt.on{color:color-mix(in srgb,rgb(var(--h)) var(--hp),var(--hb))!important}
.tb-lens,.mt-lens{background:radial-gradient(120% 140% at 20% 0%, rgba(var(--gl),calc(var(--gs) + .1)), transparent 55%), linear-gradient(160deg, rgba(var(--pm),.22), rgba(var(--pm),.09))!important;
  box-shadow:0 4px 12px -8px rgba(var(--pm),.55), inset 0 1.5px 0 rgba(var(--gl),var(--gh)), inset 0 -5px 10px -8px rgba(var(--pm),.3)!important}
.page-head h1{display:inline-block; position:relative; padding-bottom:10px}
.page-head h1::after{content:''; position:absolute; left:50%; bottom:0; width:42px; height:3px; margin-left:-21px; border-radius:3px; background:linear-gradient(90deg,rgb(var(--pm)),rgba(var(--pm),.35))}
.panel h3::before{content:''; display:inline-block; width:8px; height:8px; margin-right:9px; border-radius:50%; background:rgb(var(--pm)); box-shadow:0 0 0 4px rgba(var(--pm),.16); vertical-align:1px}
.kpis .kpi:nth-child(5n+1){--k:var(--c-green)} .kpis .kpi:nth-child(5n+2){--k:var(--c-blue)} .kpis .kpi:nth-child(5n+3){--k:var(--c-violet)}
.kpis .kpi:nth-child(5n+4){--k:var(--c-amber)} .kpis .kpi:nth-child(5n+5){--k:var(--c-rose)}
.kpis .kpi.warn{--k:var(--c-amber)} .kpis .kpi.bad{--k:185,68,87}
.kpi{position:relative; overflow:hidden}
.kpi::before{content:''; position:absolute; left:50%; top:0; width:38px; height:4px; margin-left:-19px; border-radius:0 0 5px 5px; background:rgb(var(--k,var(--c-green)))}
.kpi::after{content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(90% 90% at 50% 0%,rgba(var(--k,var(--c-green)),.13),transparent 70%)}
.kpi>*{position:relative; z-index:1}
.kpi b{color:color-mix(in srgb,rgb(var(--k,var(--c-green))) var(--hp),var(--hb))}
.kpi.warn,.kpi.bad{border-color:rgba(var(--k),.4)!important}
.bgx .m1{background:radial-gradient(circle at 40% 40%, rgba(15,154,119,.14), transparent 68%)!important}
.bgx .m2{background:radial-gradient(circle at 50% 50%, rgba(70,130,215,.13), transparent 68%)!important}
.bgx .m3{background:radial-gradient(circle at 50% 50%, rgba(150,100,205,.11), transparent 70%)!important}
.bgx::before{content:''; position:absolute; width:46vmax; height:46vmax; right:-14vmax; bottom:-22vmax; border-radius:50%; background:radial-gradient(circle,rgba(230,160,60,.10),transparent 68%)}
html[data-theme="dark"] .bgx .m1{background:radial-gradient(circle at 40% 40%, rgba(52,196,160,.13), transparent 66%)!important}
html[data-theme="dark"] .bgx .m2{background:radial-gradient(circle at 50% 50%, rgba(94,150,235,.12), transparent 66%)!important}
html[data-theme="dark"] .bgx .m3{background:radial-gradient(circle at 50% 50%, rgba(172,130,228,.11), transparent 68%)!important}
html[data-theme="dark"] .bgx::before{background:radial-gradient(circle,rgba(236,184,64,.07),transparent 68%)}
th{background-image:linear-gradient(180deg,rgba(var(--pm),.10),rgba(var(--pm),.04))}
.sheet tbody tr:hover td,tbody tr:hover td{background:rgba(var(--pm),.06)}
.btn:not(.ghost){background:linear-gradient(180deg,#19ad88,#0f9a77)!important; box-shadow:0 8px 18px -10px rgba(15,154,119,.7)}
html[data-theme="dark"] .btn:not(.ghost){background:linear-gradient(180deg,#3ccaa6,#25a98a)!important; color:#06231c}
.sbtn:hover:not(:disabled){border-color:rgb(var(--pm))}
::selection{background:rgba(var(--pm),.25)}


/* ===== v6: premium palette (pearl · emerald · champagne · sapphire · burgundy) + motion ===== */
:root{
  --bg:#f4f2ed; --bg2:#e8e5dd; --ink:#1b2123; --mute:#615f59; --fg:34,32,28; --sf:255,254,251; --fill:#fffefb; --dlg:#fffefb;
  --g0:#ebe8e1; --g1:#f6f4ef; --g2:#fffefb; --g3:#efece5; --g4:#e1ddd3; --g5:#ccc7ba; --gline:rgba(40,34,24,.09); --line:rgba(40,34,24,.15);
  --accent-ink:#0a6e57; --gold:196,156,66;
  --c-green:15,154,119;
  --c-blue:52,92,160;
  --c-indigo:76,88,156;
  --c-violet:110,84,162;
  --c-plum:138,52,82;
  --c-rose:188,112,108;
  --c-coral:174,96,82;
  --c-orange:172,116,58;
  --c-amber:198,156,66;
  --c-lime:98,128,72;
  --c-cyan:20,128,138;
  --c-slate:82,100,124;
}
html[data-theme="dark"]{
  --bg:#0b0f11; --bg2:#10161a; --gold:226,186,100;
  --c-green:52,196,160;
  --c-blue:116,152,228;
  --c-indigo:134,146,224;
  --c-violet:164,142,218;
  --c-plum:210,112,142;
  --c-rose:230,152,146;
  --c-coral:228,142,122;
  --c-orange:228,162,100;
  --c-amber:234,198,112;
  --c-lime:152,188,122;
  --c-cyan:84,192,198;
  --c-slate:152,168,192;
}
.bgx .m1{background:radial-gradient(circle at 40% 40%, rgba(15,154,119,.15), transparent 68%)!important}
.bgx .m2{background:radial-gradient(circle at 50% 50%, rgba(52,92,160,.13), transparent 68%)!important}
.bgx .m3{background:radial-gradient(circle at 50% 50%, rgba(110,84,162,.10), transparent 70%)!important}
.bgx::before{background:radial-gradient(circle,rgba(var(--gold),.16),transparent 68%)!important; animation:mC 40s ease-in-out infinite alternate}
html[data-theme="dark"] .bgx .m1{background:radial-gradient(circle at 40% 40%, rgba(52,196,160,.13), transparent 66%)!important}
html[data-theme="dark"] .bgx .m2{background:radial-gradient(circle at 50% 50%, rgba(116,152,228,.11), transparent 66%)!important}
html[data-theme="dark"] .bgx .m3{background:radial-gradient(circle at 50% 50%, rgba(164,142,218,.10), transparent 68%)!important}
html[data-theme="dark"] .bgx::before{background:radial-gradient(circle,rgba(var(--gold),.09),transparent 68%)!important}
.bgx .m1{animation:mA 34s ease-in-out infinite alternate!important}
.bgx .m2{animation:mB 40s ease-in-out infinite alternate!important}
.bgx .m3{animation:mC 46s ease-in-out infinite alternate!important}
@keyframes mA{to{transform:translate(14vmax,9vmax) scale(1.16)}}
@keyframes mB{to{transform:translate(-12vmax,-7vmax) scale(1.18)}}
@keyframes mC{to{transform:translate(9vmax,-8vmax) scale(1.12)}}
.page-head h1::after{width:56px; margin-left:-28px; background:linear-gradient(90deg,rgb(var(--pm)),rgb(var(--gold)),rgb(var(--pm))); background-size:200% 100%; animation:gshine 5s linear infinite}
@keyframes gshine{to{background-position:-200% 0}}
.kpi::before{width:44px; margin-left:-22px; background:linear-gradient(90deg,rgb(var(--k,var(--c-green))),rgba(var(--gold),.9))}
.glow-gold{box-shadow:0 0 0 1px rgba(var(--gold),.3)}
.tile:hover,body.home.app .tile:hover{border-color:rgba(var(--gold),.55)!important}
.btn:not(.ghost){background:linear-gradient(180deg,#17ab86,#0f9a77 60%,#0c8767)!important}
html[data-theme="dark"] .btn:not(.ghost){background:linear-gradient(180deg,#3ccaa6,#22a083)!important}
/* ---- motion ---- */
@keyframes pop{from{opacity:0; transform:translateY(20px) scale(.97)}}
@keyframes bob{50%{translate:0 -4px}}
@keyframes sweep{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
@keyframes rp{from{transform:scale(0); opacity:.45}to{transform:scale(1); opacity:0}}
.tiles .tile,.kpis .kpi,.panel,.cols2>*,.dr-now,.cardx{animation:pop .65s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:calc(var(--i,0) * 55ms)}
.tile:nth-child(1),.kpi:nth-child(1),.panel:nth-child(1),.cols2>:nth-child(1){--i:1}
.tile:nth-child(2),.kpi:nth-child(2),.panel:nth-child(2),.cols2>:nth-child(2){--i:2}
.tile:nth-child(3),.kpi:nth-child(3),.panel:nth-child(3),.cols2>:nth-child(3){--i:3}
.tile:nth-child(4),.kpi:nth-child(4),.panel:nth-child(4),.cols2>:nth-child(4){--i:4}
.tile:nth-child(5),.kpi:nth-child(5),.panel:nth-child(5),.cols2>:nth-child(5){--i:5}
.tile:nth-child(6),.kpi:nth-child(6),.panel:nth-child(6),.cols2>:nth-child(6){--i:6}
.tile:nth-child(7),.kpi:nth-child(7),.panel:nth-child(7),.cols2>:nth-child(7){--i:7}
.tile:nth-child(8),.kpi:nth-child(8),.panel:nth-child(8),.cols2>:nth-child(8){--i:8}
.tile:nth-child(9),.kpi:nth-child(9),.panel:nth-child(9),.cols2>:nth-child(9){--i:9}
.tile:nth-child(10),.kpi:nth-child(10),.panel:nth-child(10),.cols2>:nth-child(10){--i:10}
.tile:nth-child(11),.kpi:nth-child(11),.panel:nth-child(11),.cols2>:nth-child(11){--i:11}
.tile:nth-child(12),.kpi:nth-child(12),.panel:nth-child(12),.cols2>:nth-child(12){--i:12}
.tile:nth-child(13),.kpi:nth-child(13),.panel:nth-child(13),.cols2>:nth-child(13){--i:13}
.tile:nth-child(14),.kpi:nth-child(14),.panel:nth-child(14),.cols2>:nth-child(14){--i:14}
.tile:nth-child(15),.kpi:nth-child(15),.panel:nth-child(15),.cols2>:nth-child(15){--i:15}
.tile:nth-child(16),.kpi:nth-child(16),.panel:nth-child(16),.cols2>:nth-child(16){--i:16}
body.app .tile svg{animation:bob 6s ease-in-out infinite; animation-delay:calc(var(--i,0) * -.8s)}
body.app .tile{position:relative; transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s ease-out, border-color .3s, box-shadow .3s, background .3s}
body.app .tile:hover{transform:perspective(800px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.panel,.card,.cardx{position:relative}
.tile::after,.panel::after,.card::after,.cardx::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(var(--h,var(--pm)),.14), transparent 62%)}
.tile:hover::after,.panel:hover::after,.card:hover::after,.cardx:hover::after{opacity:1}
.tb-lens,.mt-lens{overflow:hidden}
.tb-lens::after,.mt-lens::after{content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%); animation:sweep 5.5s ease-in-out infinite; animation-delay:1.2s}
.btn,.sbtn,.act{position:relative; overflow:hidden}
.btn:not(.ghost)::after{content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%); transform:translateX(-130%); pointer-events:none}
.btn:not(.ghost):hover::after{animation:sweep .8s ease}
.btn,.sbtn{transition:transform .18s, box-shadow .25s, filter .2s}
.btn:not(:disabled):active,.sbtn:not(:disabled):active{transform:scale(.97)}
.rp{position:absolute; border-radius:50%; width:20px; height:20px; margin:-10px 0 0 -10px; background:rgba(255,255,255,.7); pointer-events:none; animation:rp .6s ease-out forwards; transform:scale(0)}
.sbtn .rp,.btn.ghost .rp{background:rgba(var(--pm),.25)}
.pill.s-Arrived::before,.pill.s-In-consultation::before{content:''; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--c); animation:ring 1.8s ease-out infinite}
.sheet tbody tr{animation:pop .45s ease backwards}
.sheet tbody tr:nth-child(1){animation-delay:.02s}.sheet tbody tr:nth-child(2){animation-delay:.06s}.sheet tbody tr:nth-child(3){animation-delay:.10s}.sheet tbody tr:nth-child(4){animation-delay:.14s}.sheet tbody tr:nth-child(5){animation-delay:.18s}.sheet tbody tr:nth-child(6){animation-delay:.22s}.sheet tbody tr:nth-child(7){animation-delay:.26s}.sheet tbody tr:nth-child(8){animation-delay:.30s}
@media (prefers-reduced-motion:reduce){.tiles .tile,.kpis .kpi,.panel,.cols2>*,.cardx,.sheet tbody tr,body.app .tile svg,.tb-lens::after,.mt-lens::after,.page-head h1::after,.pill::before,.bgx::before{animation:none!important} body.app .tile{transform:none!important}}
html body.app .tile{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
html body.app .tile:hover{transform:perspective(800px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
html body.app .tile:active{transform:perspective(800px) translateY(-2px) scale(.985)}
html body.home.app .tile:hover{border-color:rgba(var(--gold),.55)}
@media (prefers-reduced-motion:reduce){html body.app .tile,html body.app .tile:hover{transform:none!important}}
html body.home.app .tile{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
html body.home.app .tile:hover{transform:perspective(800px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
html body.home.app .tile:active{transform:perspective(800px) translateY(-2px) scale(.985)}
@media (prefers-reduced-motion:reduce){html body.home.app .tile,html body.home.app .tile:hover{transform:none!important}}
/* animations only on first paint — live-updating lists must not flicker */
body.settled .tiles .tile,body.settled .kpis .kpi,body.settled .panel,body.settled .cols2>*,body.settled .dr-now,body.settled .cardx,body.settled .sheet tbody tr{animation:none!important}

/* ===== v8 · branches ===== */
.tb-br{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 10px 0 11px; border-radius:999px; background:rgba(var(--ac),.07); border:1px solid rgba(var(--ac),.16); color:var(--ink); font-size:13px; font-weight:600; max-width:200px; cursor:pointer; transition:background .2s,border-color .2s}
.tb-br:hover{background:rgba(var(--ac),.12)}
.tb-br svg{flex:none; color:rgb(var(--ac))}
.tb-br select{appearance:none; -webkit-appearance:none; border:0; background:transparent; color:inherit; font:inherit; font-weight:600; max-width:140px; text-overflow:ellipsis; cursor:pointer; outline:none; padding:0 14px 0 0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23778' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0 center}
.tb-br select option{color:#222; background:#fff}
.tb-br.one{cursor:default}.tb-br.one b{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media(max-width:760px){.tb-br{max-width:120px; padding:0 8px; gap:5px} .tb-br select,.tb-br.one b{max-width:78px}}
.brtag{display:inline-block; vertical-align:middle; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.2px; white-space:nowrap; color:rgb(var(--bt,15,154,119)); background:rgba(var(--bt,15,154,119),.12); border:1px solid rgba(var(--bt,15,154,119),.22)}
.brtag[data-b=b1]{--bt:15,154,119}.brtag[data-b=b2]{--bt:46,100,180}.brtag[data-b=b3]{--bt:176,134,40}.brtag[data-b=b4]{--bt:128,74,150}.brtag[data-b=b5]{--bt:150,52,84}
html[data-theme="dark"] .brtag[data-b=b2]{--bt:110,160,235}html[data-theme="dark"] .brtag[data-b=b3]{--bt:226,184,86}html[data-theme="dark"] .brtag[data-b=b4]{--bt:190,140,215}html[data-theme="dark"] .brtag[data-b=b5]{--bt:226,120,150}
.brgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}
.brcard{position:relative; padding:18px 18px 16px; border-radius:18px; background:var(--card,#fff); border:1px solid var(--line); box-shadow:0 6px 22px -14px rgba(20,40,60,.25); cursor:pointer; transition:transform .25s,box-shadow .25s}
.brcard:hover{transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(20,40,60,.35)}
.brcard.off{opacity:.55}
.brcard h4{margin:8px 0 4px; font-size:17px}.brcard p{margin:2px 0; font-size:13px; color:var(--mute)}
.brcard .brn{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.brcard.add{display:grid; place-items:center; min-height:150px; border-style:dashed; color:var(--mute); text-align:center}
.brmode{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 18px}
.brmode button{text-align:left; padding:16px 18px; border-radius:16px; border:1.5px solid var(--line); background:var(--card,#fff); cursor:pointer; color:inherit; font:inherit; transition:border-color .2s, box-shadow .2s}
.brmode button b{display:block; font-size:15px; margin-bottom:4px}.brmode button span{font-size:13px; color:var(--mute)}
.brmode button.on{border-color:rgb(var(--ac)); box-shadow:0 0 0 3px rgba(var(--ac),.14)}
@media(max-width:620px){.brmode{grid-template-columns:1fr}}
.chk{display:flex; flex-wrap:wrap; gap:8px}.chk label{display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; font-size:13px; cursor:pointer}
.chk label:has(input:checked){border-color:rgb(var(--ac)); background:rgba(var(--ac),.1)}
/* branch switcher: keep the pill tidy and make room for it */
.tb-br{flex:none; white-space:nowrap; margin-right:2px}
.tb-br select{background-color:transparent!important; box-shadow:none!important; border:0!important; border-radius:0!important; height:auto!important; min-height:0!important; width:auto!important; min-width:0; padding:0 16px 0 0!important; margin:0!important; line-height:1.2; white-space:nowrap}
.tb-br select:focus{box-shadow:none!important; outline:none}
@media (min-width:761px) and (max-width:1420px){ body.brm .tb-t:not(.on) span{display:none} body.brm .tb-t:not(.on){padding:0 11px} body.brm .tb-nm{display:none} }
@media (min-width:1101px) and (max-width:1420px){ body.brm .tb-t.on span{display:inline} }
.brbar{display:none}
@media (max-width:760px){ body.brm .brbar{display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:9px 14px; border-radius:14px; background:rgba(var(--ac),.08); border:1px solid rgba(var(--ac),.18); font-size:13px; color:var(--mute)}
  body.brm .brbar svg{color:rgb(var(--ac)); flex:none} body.brm .brbar b,body.brm .brbar select{margin-left:auto; color:var(--ink); font-weight:700; font-size:14px}
  body.brm .brbar select{appearance:none; -webkit-appearance:none; background-color:transparent!important; border:0!important; box-shadow:none!important; height:auto!important; min-height:0!important; width:auto!important; padding:0 18px 0 0!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23778' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0 center} }
/* the Main page tiles start at opacity:0 and rely on their entrance animation: never let "settled" / reduced-motion leave them invisible */
body.settled.home.app .tile,body.settled .tiles .tile{opacity:1!important}
@media (prefers-reduced-motion:reduce){ body.home.app .tile,.tiles .tile{opacity:1!important} }

/* v9 — Finance */
.fx-trend{display:flex; align-items:flex-end; gap:3px; height:150px; padding:6px 2px 0; overflow-x:auto}
.fx-trend .c{flex:1 0 14px; min-width:14px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:3px}
.fx-trend .p{display:flex; align-items:flex-end; gap:2px; width:100%; height:calc(100% - 18px); justify-content:center}
.fx-trend .p i{display:block; flex:1; max-width:14px; border-radius:4px 4px 0 0; min-height:1px}
.fx-trend .p i.in{background:var(--accent,#0f9a77)} .fx-trend .p i.out{background:#e0a23a}
.fx-trend small{font-size:10.5px; color:var(--mute); white-space:nowrap}
.fx-leg{display:flex; gap:14px; font-size:12.5px; color:var(--mute); margin:0 0 4px}
.fx-leg b{display:inline-block; width:10px; height:10px; border-radius:3px; margin-inline-end:5px; vertical-align:-1px}
.fx-d{font-size:12.5px; margin-top:4px} .fx-d.up{color:#1b8a5a} .fx-d.dn{color:#c0392b} .fx-d.nu{color:var(--mute)}
.fx-prog{height:8px; border-radius:6px; background:rgba(128,128,128,.18); overflow:hidden; min-width:90px}
.fx-prog i{display:block; height:100%; background:var(--accent,#0f9a77)} .fx-prog.over i{background:#c0392b} .fx-prog.near i{background:#e0a23a}
.fx-pl td{padding:7px 10px} .fx-pl tr.h td{font-weight:600; background:rgba(128,128,128,.08)} .fx-pl tr.t td{font-weight:700; border-top:2px solid currentColor}
.fx-pl td:first-child{text-align:start} .fx-pl td.r{text-align:end}
.fx-pl tr:not(.h):not(.t) td:first-child{padding-inline-start:22px}