:root{--bg:#f3f4f5;--card:#fff;--soft:#f6f7f8;--ink:#111418;--mut:#6b7280;--line:#eceef1;--dark:#111418;--g:#1f9d3a;--g2:#dcf5e3;--o:#f5a55a;--o2:#fdeedd;--bad:#e5484d;--bad2:#fde7e8;--info:#2f7dd3;--r:18px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 Outfit,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-weight:400}
a{color:inherit;text-decoration:none}h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.01em}h2{font-size:21px}h3{font-size:17px;margin-bottom:12px;font-weight:500}
b,strong{font-weight:500}
.ic{width:19px;height:19px;flex:none}.muted{color:var(--mut)}.small{font-size:13px}.d{display:block;color:var(--mut);font-size:12.5px}
.mt{margin-top:14px}.row{display:flex;align-items:center}.gap{gap:10px}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.right{text-align:right}.self-end{align-self:flex-end}.hidden{display:none!important}
/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh;padding:14px;gap:14px}
.side{width:250px;flex:none;background:var(--card);border-radius:var(--r);position:sticky;top:14px;height:calc(100vh - 28px);display:flex;flex-direction:column;padding:26px 16px 18px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:21px;padding:0 8px 34px;letter-spacing:-.02em}.brand img{width:34px;height:34px;border-radius:10px}
.brand.big{justify-content:center;font-size:24px;padding:0}.brand.big img{width:44px;height:44px;border-radius:12px}
.side nav{display:flex;flex-direction:column;gap:4px}
.side nav a,.side-foot a{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:14px;color:#3b4048;font-size:15px}
.side nav a:hover,.side-foot a:hover{background:var(--soft)}
.side nav a.on{background:var(--dark);color:#fff}
.side-foot{margin-top:auto}
main{flex:1;min-width:0;background:var(--card);border-radius:var(--r);padding:22px 28px 60px}
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.m-brand{display:none}
.search{display:flex;align-items:center;gap:8px;border:1px solid #d9dce1;border-radius:99px;padding:0 16px;width:min(300px,40%);color:var(--mut)}
.search input{border:0;background:none;padding:10px 0;box-shadow:none!important}
.top-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.bell{position:relative;width:40px;height:40px;border-radius:50%;background:var(--soft);display:grid;place-items:center;color:var(--ink)}
.bell i{position:absolute;top:-2px;right:-2px;background:var(--bad);color:#fff;font:600 10px Outfit;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;font-style:normal;padding:0 4px}
.me-chip{position:relative}.me-chip summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer}.me-chip summary::-webkit-details-marker{display:none}
.me-txt b{display:block;font-size:14px;font-weight:500;line-height:1.2}.me-txt small{color:var(--mut);font-size:12px}
.me-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px;min-width:160px;box-shadow:0 12px 30px #0000001a;z-index:20}
.me-menu a{display:block;padding:9px 12px;border-radius:10px}.me-menu a:hover{background:var(--soft)}
.page-title{margin-bottom:22px}.page-title h1{font-size:32px;line-height:1.15}.page-title p{margin:6px 0 0;color:var(--mut);font-size:14px}
.bottom{display:none}
/* ---------- base components ---------- */
.card,.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px}
.card-h,.p-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.card-h h3{margin:0}
.p-h p{margin:4px 0 0;color:var(--mut);font-size:14px}
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--dark);color:#fff;font:500 14px Outfit,sans-serif;padding:11px 18px;border-radius:12px;cursor:pointer;white-space:nowrap}
.btn:active{transform:scale(.98)}.btn.ghost{background:#fff;color:var(--ink);border:1px solid #dfe2e6}.btn.sm{padding:7px 13px;font-size:13.5px;border-radius:10px}.btn.block{width:100%}
.btn.good{background:var(--g)}.btn.bad{background:var(--bad)}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid #dfe2e6;border-radius:12px;padding:10px 13px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px #11141812}
input[type=checkbox]{width:auto;accent-color:var(--g)}
.form{display:flex;flex-direction:column;gap:14px}.form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:500}
.form.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form .full{grid-column:1/-1}
label.check{flex-direction:row!important;align-items:center;gap:8px;font-weight:400!important}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:8px}
.perm-grid .check{background:var(--soft);padding:10px 12px;border-radius:12px;display:flex;font-size:14px}
.flash{padding:12px 16px;border-radius:14px;margin-bottom:16px}.flash.ok{background:var(--g2);color:#12692a}.flash.err{background:var(--bad2);color:#a3262a}.flash.info{background:#e6f0fb;color:#1d4f86}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}.toolbar input,.toolbar select{width:auto}.toolbar .grow input{width:100%}
.seg,.seg2{display:inline-flex;background:var(--soft);border-radius:14px;padding:4px;gap:2px}
.seg a,.seg button,.seg2 button{padding:8px 18px;border-radius:11px;color:var(--mut);font:400 14px Outfit,sans-serif;border:0;background:none;cursor:pointer}
.seg .on,.seg2 .on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #0000001a}
.seg.wide{margin-bottom:18px;display:flex;overflow-x:auto}.seg.wide a{flex:1;text-align:center;white-space:nowrap}
.seg2{display:flex;margin-bottom:10px}.seg2 button{flex:1}
/* KPI */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}.kpis.sm{grid-template-columns:repeat(3,1fr)}
.kpi{background:var(--soft);border-radius:14px;padding:14px 16px;position:relative}
.kpi small{color:var(--mut);font-size:13px}.kpi b{display:block;font-size:24px;font-weight:400;letter-spacing:-.02em;margin-top:2px}
.kpis.sm .kpi{padding:11px 14px}.kpis.sm .kpi b{font-size:20px}
.kpi::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:transparent}
.kpi.good::before{background:var(--g)}.kpi.warn::before{background:var(--o)}.kpi.bad::before{background:var(--bad)}.kpi.info::before{background:var(--info)}
.kstrip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-bottom:26px}
.kstrip .k{padding:0 22px;border-left:1px solid var(--line)}.kstrip .k:first-child{border:0;padding-left:14px}
.k-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:15px}.kstrip b{display:block;font-size:40px;font-weight:400;letter-spacing:-.03em;margin:16px 0 10px;line-height:1}
.kstrip small{color:var(--mut);font-size:12.5px}.warn-t{color:#c2410c!important}
.tpill{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;padding:3px 8px;border-radius:99px;white-space:nowrap}.tpill .ic{width:13px;height:13px}
.tpill.up{background:var(--g2);color:var(--g)}.tpill.down{background:var(--bad2);color:var(--bad)}.tpill.down .ic{transform:scaleY(-1)}.tpill.flat{background:var(--soft);color:var(--mut)}
/* dashboard */
.dash-a{display:grid;grid-template-columns:1.55fr 1fr;gap:0;margin-bottom:26px}
.dash-a>.panel{border:0;border-radius:0;margin:0;padding:6px 26px 6px 0}.dash-a>.panel+.panel{border-left:1px solid var(--line);padding:6px 0 6px 26px}
.legend2{display:flex;gap:14px;align-items:center;font-size:13px;color:#3b4048;flex-wrap:wrap}.legend2 i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
i.g{background:var(--g)}i.o{background:var(--o)}
.tchart{display:flex;gap:10px;height:230px;margin-top:10px}
.tchart .y{display:flex;flex-direction:column;justify-content:space-between;font-size:12px;color:var(--mut);padding-bottom:22px;text-align:right;min-width:22px}
.cols{flex:1;display:flex;align-items:stretch;gap:4px;border-bottom:1px solid var(--line);position:relative;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(25% - 1px),#f0f1f3 calc(25% - 1px),#f0f1f3 25%);margin-bottom:22px}
.cols .c{flex:1;display:flex;flex-direction:column-reverse;align-items:center;position:relative;gap:2px}
.cols .c i{display:block;width:4px;border-radius:3px;min-height:0}.cols .c i.g{background:linear-gradient(to top,#b6e8c3,var(--g))}.cols .c i.o{background:linear-gradient(to top,#fbe0c4,var(--o))}
.cols .c:hover i{width:7px}
.cols .c em{position:absolute;bottom:-22px;font-style:normal;font-size:11.5px;color:var(--mut);white-space:nowrap}
.avgline{font-size:13.5px;color:var(--mut)}.avgline b{color:var(--ink)}
.ring-wrap{display:flex;align-items:center;justify-content:space-between;gap:10px}
.big-amt{font-size:34px;letter-spacing:-.03em;margin-top:4px}
.dots{list-style:none;padding:0;margin:22px 0;font-size:14px;color:#3b4048}.dots li{margin:4px 0}.dots i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.ring{width:210px;height:210px;flex:none}.ring circle{fill:none;stroke-width:16;transform:rotate(-90deg);transform-origin:50% 50%}
.ring .bg{stroke:#f3f4f5}.ring .pend{stroke:var(--o);stroke-opacity:.55}.ring .done{stroke:var(--g);stroke-linecap:round}
.ring text{text-anchor:middle;font-family:Outfit,sans-serif;fill:var(--ink)}.ring .rv{font-size:36px}.ring .rl{font-size:15px}
.more{display:inline-flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap}.more .ic{width:16px;height:16px}.more.g{color:var(--g)}
.dash-b{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.dash-b>.panel{border:0;border-radius:0;margin:0;padding:4px 24px}.dash-b>.panel:first-child{padding-left:0}.dash-b>.panel+.panel{border-left:1px solid var(--line)}.dash-b>.panel:last-child{padding-right:0}
.cnt{display:inline-grid;place-items:center;background:var(--bad2);color:var(--bad);border-radius:50%;width:20px;height:20px;font-size:11px;margin-right:4px}
.plist{list-style:none;margin:0;padding:0;max-height:360px;overflow:auto}
.plist li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.plist li:last-child{border:0}
.plist b{display:block;font-size:14.5px;font-weight:400}.plist small{color:var(--mut);font-size:12.5px}
.acts{display:flex;gap:4px}.acts button{border:0;background:none;cursor:pointer;padding:6px;border-radius:8px}.acts .ic{width:20px;height:20px}
.acts .ok{color:var(--g)}.acts .no{color:var(--bad)}.acts .ok:hover{background:var(--g2)}.acts .no:hover{background:var(--bad2)}
.empty-l{justify-content:center;padding:30px 0!important}
.orb-panel{text-align:center}.orb{width:74px;height:74px;border-radius:50%;margin:8px auto 18px;background:radial-gradient(circle at 35% 30%,#ffb38a,#f5c26b 45%,#9be3a8 80%);box-shadow:0 10px 40px #9be3a880}
.orb-panel h3{font-size:22px;font-weight:400;margin-bottom:6px}.orb-panel .btn{margin-top:16px}
.hols{margin-top:20px;text-align:left;background:var(--soft);border-radius:14px;padding:12px 14px}.hols small{color:var(--mut)}
.hols div{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;border-bottom:1px solid var(--line)}.hols div:last-child{border:0}.hols em{font-style:normal;color:var(--mut);font-size:13px}
/* tables & tags */
.table-wrap{overflow-x:auto;margin:0 -20px;padding:0 20px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}.tbl th{text-align:left;font-size:12.5px;color:var(--mut);font-weight:400;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--line);white-space:nowrap}.tbl tr:last-child td{border:0}
.tbl.reg th,.tbl.reg td{padding:7px 4px;text-align:center;font-size:12px}.tbl.reg th small{display:block}.tbl.reg th.wo{color:var(--bad)}
.tbl .stick{position:sticky;left:0;background:var(--card);text-align:left!important;z-index:1;padding-right:12px!important}
.st{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;white-space:nowrap;font-weight:500}
.st-P{background:var(--g2);color:#16762f}.st-L{background:var(--o2);color:#b45309}.st-H{background:#ffe9d6;color:#c2410c}.st-A{background:var(--bad2);color:#b4232a}.st-A_{background:var(--soft);color:var(--mut)}
.st-LV{background:#e6f0fb;color:#1d4f86}.st-HO{background:#f3e8ff;color:#7e22ce}.st-WO{background:var(--soft);color:#555}
.tbl.reg .st{padding:2px 5px;font-size:10.5px;border-radius:6px}
.legend{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;align-items:center;margin-bottom:12px;color:var(--mut)}
.pill{display:inline-block;background:var(--soft);border-radius:99px;padding:3px 11px;font-size:12.5px}.pill.brand{background:var(--dark);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:3px 4px 3px 10px;border-radius:99px;margin:0}
.chip.in{background:var(--g2);color:#16762f}.chip.out{background:var(--bad2);color:#b4232a}.chip button{border:0;background:none;color:inherit;cursor:pointer;font-size:14px;opacity:.6;padding:0 4px}
.av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#d7f0dd,#fde3c8);color:var(--ink);display:grid;place-items:center;font-weight:500;overflow:hidden;flex:none}
.av img{width:100%;height:100%;object-fit:cover}.av.lg{width:52px;height:52px;font-size:20px}.av.xl{width:88px;height:88px;font-size:32px;margin:16px auto 8px}
.cards-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}.cards-list .card{margin:0}
.grid2 .cards-list{grid-template-columns:1fr}
.emp-card{display:flex;align-items:center;gap:14px;transition:.15s}.emp-card:hover{border-color:#cfd3d8;box-shadow:0 6px 20px #0000000d}
.leave{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dl{display:grid;grid-template-columns:120px 1fr;gap:9px 12px;margin:0;font-size:14px}.dl dt{color:var(--mut)}.dl dd{margin:0}
.id-card{text-align:center;overflow:hidden;padding-top:0}.id-top{background:var(--dark);color:#fff;margin:0 -20px;padding:13px;font-weight:500;letter-spacing:.3px}
.id-card h2{font-size:22px;margin-top:6px}.qr{background:#fff;padding:12px;border-radius:14px;display:block;width:max-content;margin:14px auto 6px}.qr canvas,.qr img{width:210px!important;height:210px!important;display:block}
.code{letter-spacing:3px;font-size:16px;font-weight:500}
.mini-link{display:block}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--g);margin-right:6px}.dot.live{animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #1f9d3a80}100%{box-shadow:0 0 0 8px #1f9d3a00}}
/* scanner */
.scanner{position:relative;aspect-ratio:1;background:#111418;border-radius:16px;overflow:hidden}
.scanner video{width:100%;height:100%;object-fit:cover}
.frame{position:absolute;inset:18%;border:3px solid #ffffffb0;border-radius:20px;box-shadow:0 0 0 999px #0007}
.scan-hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#fff;font-size:13px;padding:0 12px}
.result{text-align:center;border-width:2px}.result.in{border-color:var(--g);background:linear-gradient(var(--g2),#fff 60%)}.result.out{border-color:var(--info);background:linear-gradient(#e6f0fb,#fff 60%)}.result.err{border-color:var(--bad);background:var(--bad2);color:#a3262a}
.big-tag{font-weight:600;letter-spacing:1px;font-size:13px}.result.in .big-tag{color:var(--g)}.result.out .big-tag{color:var(--info)}
.res-name{font-size:26px;margin-top:6px}.res-time{font-size:38px;letter-spacing:-.03em;margin:4px 0}
.feed{list-style:none;margin:0;padding:0}.feed li{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}.feed li:last-child{border:0}
.feed b{font-weight:400}.feed small{color:var(--mut);flex:1}.feed time{color:var(--mut);font-size:13px}
.tag{font-size:11px;font-weight:600;padding:3px 8px;border-radius:99px}.tag.in{background:var(--g2);color:#16762f}.tag.out{background:#e6f0fb;color:#1d4f86}
/* employee */
.today{background:var(--dark);color:#fff;border:0}.today .muted{color:#ffffffa8}
.today-status{font-size:24px;margin:4px 0 16px}
.today-times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.today-times div{background:#ffffff14;border-radius:14px;padding:11px}.today-times small{opacity:.7;font-size:12px}.today-times b{display:block;font-size:18px;font-weight:400}
.today .btn{background:#fff;color:var(--ink)}.today .st{background:#ffffff22;color:#fff}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}.cal b{font-size:12px;color:var(--mut);font-weight:400}
.cal span{aspect-ratio:1;display:grid;place-items:center;border-radius:12px;font-size:13.5px;background:var(--soft)}
.cal .c-P{background:var(--g2);color:#16762f}.cal .c-L{background:var(--o2);color:#b45309}.cal .c-H{background:#ffe9d6;color:#c2410c}.cal .c-A{background:var(--bad2);color:#b4232a}
.cal .c-LV{background:#e6f0fb;color:#1d4f86}.cal .c-HO{background:#f3e8ff;color:#7e22ce}.cal .c-WO{color:var(--mut)}.cal .today{outline:2px solid var(--ink)}
.daylog{list-style:none;margin:0;padding:0;max-height:520px;overflow:auto}.daylog li{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}.daylog li:last-child{border:0}
.dd{width:46px;text-align:center;background:var(--soft);border-radius:12px;padding:5px}.dd b{display:block;font-size:18px;line-height:1.1;font-weight:400}.dd small{font-size:11px;color:var(--mut)}
.pay-h{display:flex;justify-content:space-between;gap:10px}.net{font-size:22px;display:block;font-weight:400}
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px;font-size:12.5px;color:var(--mut)}.pay-grid span{background:var(--soft);border-radius:10px;padding:7px 9px}.pay-grid b{display:block;color:var(--ink);font-size:14px;font-weight:400}
.adj{margin-top:10px}.adj label{display:flex;flex-direction:column;font-size:12px;color:var(--mut);flex:1;min-width:90px}.adj input{padding:7px 9px}
.link{font-size:14px;color:var(--g)}
dialog{border:0;border-radius:22px;padding:24px;background:#fff;color:var(--ink);width:min(440px,92vw);box-shadow:0 20px 60px #0004}
dialog::backdrop{background:#11141880;backdrop-filter:blur(3px)}
dialog.center{text-align:center;padding:0;overflow:hidden}dialog .id-card{padding:0 20px 20px}dialog .id-top{margin:0 -20px;border-radius:0}
dialog.sheet{margin:auto 0 0;width:100%;max-width:100%;border-radius:24px 24px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
.sheet-in{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.sheet-in a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:14px;background:var(--soft);font-size:13px}
/* auth */
body.auth{display:grid;place-items:center;min-height:100vh;padding:16px;background:radial-gradient(700px 400px at 15% 0%,#dcf5e3,transparent),radial-gradient(600px 400px at 100% 100%,#fdeedd,transparent),var(--bg)}
.auth-card{width:min(410px,100%);background:#fff;border-radius:26px;padding:32px 28px;box-shadow:0 20px 50px #1114181a;text-align:center}
.auth-card .form{text-align:left;margin-top:18px}.auth-card .seg{display:flex;margin-top:18px}.auth-card .seg button{flex:1}
/* ---------- responsive ---------- */
@media (max-width:1180px){.kpis{grid-template-columns:repeat(3,1fr)}.dash-b{grid-template-columns:1fr 1fr}.dash-b>.panel:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:24px 0 0;margin-top:20px}}
@media (max-width:960px){.dash-a{grid-template-columns:1fr}.dash-a>.panel{padding:0!important}.dash-a>.panel+.panel{border-left:0;border-top:1px solid var(--line);padding-top:24px!important;margin-top:24px}}
@media (max-width:860px){
  .shell{padding:0;gap:0}.side{display:none}
  main{border-radius:0;padding:12px 16px calc(92px + env(safe-area-inset-bottom));min-height:100vh}
  .topbar{position:sticky;top:0;z-index:15;background:#fffffff0;backdrop-filter:blur(8px);margin:-12px -16px 16px;padding:12px 16px;border-bottom:1px solid var(--line)}
  .m-brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:18px}.m-brand img{width:30px;height:30px;border-radius:9px}
  .search,.me-txt,.me-chip summary>.ic{display:none}
  .page-title h1{font-size:25px}
  .grid2,.form.cols,.cards-list,.dash-b{grid-template-columns:1fr}
  .dash-b>.panel{padding:0!important;border:0!important;margin:0 0 26px!important}
  .kstrip{grid-template-columns:1fr 1fr;padding:0;border:0;gap:10px}
  .kstrip .k{border:0!important;background:var(--soft);border-radius:16px;padding:14px!important}.kstrip b{font-size:30px;margin:10px 0 6px}
  .ring{width:150px;height:150px}.big-amt{font-size:26px}.ring-wrap{align-items:flex-start}
  .kpis{grid-template-columns:repeat(3,1fr);gap:8px}.kpi{padding:10px 12px}.kpi b{font-size:19px}
  .cols{gap:2px}.cols .c i{width:3px}.tchart{height:190px}
  .bottom{display:flex;position:fixed;bottom:12px;left:12px;right:12px;background:var(--dark);border-radius:22px;padding:6px;z-index:10;box-shadow:0 10px 30px #11141840;margin-bottom:env(safe-area-inset-bottom)}
  .bottom a,.bottom button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font:400 11px Outfit,sans-serif;color:#ffffff8c;background:none;border:0;padding:7px 0;border-radius:16px}
  .bottom .on{color:#fff;background:#ffffff1a}.bottom .ic{width:21px;height:21px}
  .toolbar>*{flex:1 1 auto}.toolbar .btn{flex:1}
  .dl{grid-template-columns:100px 1fr}
}
@media print{.side,.bottom,.topbar,.toolbar{display:none}main{padding:0}}