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

:root{
  /* Mint theme: white · gray · mint (single theme) */
  --bg:#f3f5f5; --bg2:#e9eeed; --ink:#1c2326; --mute:#566165; --fg:28,35,38; --bgc:255,255,255; --sf:255,255,255; --dlg:#ffffff; --cs:light;
  --accent:#0f9a77; --accent2:#0b7f62; --accent-ink:#0b7f62; --on-accent:#ffffff; --ac:15,154,119; --accent-soft:rgba(15,154,119,.12);
  --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(15,154,119,.3);
  --r-pill:26px; --r-card:36px 36px 36px 36px / 32px 32px 40px 40px;
  --logo-w:clamp(130px,40vw,190px);
  --font:'Comfortaa','Tajawal','Segoe UI',system-ui,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); 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{backdrop-filter:none!important; -webkit-backdrop-filter:none!important; text-shadow:none!important}
  .brand{animation:none!important}
  .card,.panel,.tile,.sheet-wrap,dialog{box-shadow: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}