@font-face{font-family:"Unbounded";src:url("vendor/fonts/unbounded-latin-wght-normal.woff2") format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Geist";src:url("vendor/fonts/geist-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* ---------- themes ---------- */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#050816; --dim-base:#050816;
  --g-a:rgba(30,40,96,.30); --g-b:rgba(8,12,38,.46);
  --glass:rgba(255,255,255,.07); --glass2:rgba(255,255,255,.13); --edge:rgba(255,255,255,.18); --edge-hi:rgba(255,255,255,.34);
  --spec:rgba(255,255,255,.55); --spec-lo:rgba(255,255,255,.10); --glow-top:rgba(255,255,255,.16); --glow-bot:rgba(0,0,0,.34);
  --rim-a:rgba(255,255,255,.85); --rim-b:rgba(255,255,255,.16); --rim-c:rgba(255,255,255,.05); --rim-d:rgba(255,255,255,.45);
  --glint:rgba(255,255,255,.20); --sat:1.9; --bri:.92;
  --line:rgba(190,205,255,.15); --border:var(--line); --field:rgba(0,0,0,.30); --modal:rgba(10,14,42,.60); --opt:#10152e;
  --shadow:0 34px 60px -26px rgba(0,0,0,.65),0 12px 24px -12px rgba(0,0,0,.4);
  --text:#f1f3ff; --muted:#aab3da;
  --accent:#27d6f2; --accent-ink:#031219; --accent-soft:rgba(39,214,242,.18); --accent-glow:rgba(39,214,242,.38);
  --ok:#43e3b5; --ok-soft:rgba(67,227,181,.16); --low:#ffc83d; --low-soft:rgba(255,200,61,.17); --out:#ff6785; --out-soft:rgba(255,103,133,.18);
  --ink-c:#1fd3f5; --ink-m:#ff43a8; --ink-y:#ffd93d; --ink-k:#dfe3ff; --ink-d:#8b9bdc; --ink-r:#a98bff;
  --rail-bg:rgba(8,11,34,.40);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#e8ecfb; --dim-base:#f4f6ff;
  --g-a:rgba(255,255,255,.66); --g-b:rgba(255,255,255,.38);
  --glass:rgba(255,255,255,.5); --glass2:rgba(255,255,255,.78); --edge:rgba(255,255,255,.9); --edge-hi:rgba(80,95,190,.34);
  --spec:rgba(255,255,255,1); --spec-lo:rgba(70,85,170,.14); --glow-top:rgba(255,255,255,.7); --glow-bot:rgba(80,95,190,.14);
  --rim-a:rgba(255,255,255,1); --rim-b:rgba(255,255,255,.5); --rim-c:rgba(90,105,200,.12); --rim-d:rgba(255,255,255,.85);
  --glint:rgba(255,255,255,.75); --sat:1.7; --bri:1.08;
  --line:rgba(70,85,170,.17); --border:var(--line); --field:rgba(255,255,255,.72); --modal:rgba(250,251,255,.72); --opt:#fff;
  --shadow:0 30px 56px -28px rgba(50,65,150,.5),0 10px 22px -12px rgba(50,65,150,.3);
  --text:#121940; --muted:#505a8f;
  --accent:#0b6fd8; --accent-ink:#fff; --accent-soft:rgba(11,111,216,.13); --accent-glow:rgba(11,111,216,.3);
  --ok:#0b8f6a; --ok-soft:rgba(11,143,106,.14); --low:#a96d00; --low-soft:rgba(224,160,0,.2); --out:#cf2350; --out-soft:rgba(207,35,80,.13);
  --ink-c:#0fb7dc; --ink-m:#ea3794; --ink-y:#f4b800; --ink-k:#5a6ac4; --ink-d:#7686bd; --ink-r:#7f5ce8;
  --rail-bg:rgba(255,255,255,.46);
}
:root{--display:"Unbounded","Geist",system-ui,sans-serif;--body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--ease:cubic-bezier(.2,.8,.2,1);--ts:1;--blur:28px;--dim:.22}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:calc(14px*var(--ts))/1.55 var(--body);font-feature-settings:"tnum" 1;transition:background-color .5s,color .4s;min-height:100vh}
h1{font:500 calc(24px*var(--ts))/1.2 var(--display);margin:0;letter-spacing:-.01em}
h2{font:600 calc(15px*var(--ts))/1.3 var(--body);margin:0}
.muted{color:var(--muted)} .small{font-size:calc(12px*var(--ts))} .right{text-align:right} .nowrap{white-space:nowrap}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
a{color:var(--accent)}

/* wallpaper (UHD) + dim */
.wall{position:fixed;inset:-3%;z-index:-3;background:center/cover no-repeat;transition:opacity .5s;animation:kb 90s ease-in-out infinite alternate;will-change:transform}
.wall.swap{opacity:0}
.wall-dim{position:fixed;inset:0;z-index:-2;background:var(--dim-base);opacity:var(--dim);transition:opacity .3s,background-color .5s;pointer-events:none}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.4%,.9%)}}

/* ---------- real glass ---------- */
.card,.fleet-card,.login-card,.side,.modal,.pcard,.iconbtn{
  position:relative;isolation:isolate;
  background:linear-gradient(135deg,var(--g-a),var(--g-b));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat)) brightness(var(--bri));
  backdrop-filter:blur(var(--blur)) saturate(var(--sat)) brightness(var(--bri));
  box-shadow:var(--shadow),
    inset 0 1.5px 1px -.5px var(--spec),
    inset 0 -1px 1px -.5px var(--spec-lo),
    inset 1.5px 0 1px -1px var(--spec-lo),
    inset -1.5px 0 1px -1px var(--spec-lo),
    inset 0 22px 30px -22px var(--glow-top),
    inset 0 -26px 34px -26px var(--glow-bot);
}
.card::before,.fleet-card::before,.login-card::before,.side::before,.modal::before,.pcard::before,.iconbtn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.3px;pointer-events:none;z-index:3;
  background:linear-gradient(142deg,var(--rim-a) 0%,var(--rim-b) 20%,var(--rim-c) 52%,var(--rim-b) 82%,var(--rim-d) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude}
.card::after,.fleet-card::after,.login-card::after,.side::after,.modal::after,.pcard::after,.iconbtn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:
    radial-gradient(340px circle at var(--mx,18%) var(--my,-6%),var(--glint),transparent 62%),
    radial-gradient(120% 60% at 6% -12%,rgba(255,255,255,.26),rgba(255,255,255,0) 58%),
    linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.08) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.16'/></svg>")}
.card{border-radius:28px;margin-bottom:20px;overflow:hidden}
.fleet-card{border-radius:36px;padding:28px 22px 16px;margin-bottom:22px}
.stockinfo,.demo-banner{border-radius:16px;padding:11px 14px;margin-bottom:15px;background:var(--glass);border:1px solid var(--edge)}
.demo-banner{background:var(--low-soft);color:var(--low);border-color:var(--low-soft);padding:6px 14px;font-size:calc(12px*var(--ts));margin-bottom:18px;border-radius:16px}
.stockinfo{border-style:dashed;border-color:var(--edge-hi)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:16px;position:relative}
.login-card{width:100%;max-width:400px;border-radius:34px;padding:34px;animation:rise .9s var(--ease) both}
.login-card .logo{width:48px;height:48px;border-radius:15px;background:var(--accent);display:grid;place-items:center;margin-bottom:18px;box-shadow:0 0 30px var(--accent-glow)}
.login-card .logo svg{width:24px;height:24px;stroke:var(--accent-ink)}
.login-card h1{font-size:calc(22px*var(--ts))}
.login-card p{margin:6px 0 20px}
.login-theme{position:absolute;top:18px;right:18px}

/* menu rail */
.app{--rw:252px;min-height:100vh}
.app.collapsed{--rw:76px}
.side{position:fixed;inset:12px auto 12px 12px;width:calc(var(--rw) - 12px);z-index:30;background:linear-gradient(135deg,var(--g-a),var(--g-b)),var(--rail-bg);border-radius:30px;padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow:hidden;transition:width .45s var(--ease),box-shadow .3s}
.app.collapsed .side:hover,.app.collapsed .side:focus-within{width:250px}
.brand{display:flex;gap:12px;align-items:center;padding:2px 6px 14px;white-space:nowrap}
.brand .logo{width:38px;height:38px;border-radius:12px;background:var(--accent);display:grid;place-items:center;flex:none;box-shadow:0 0 24px var(--accent-glow)}
.brand .logo svg{width:20px;height:20px;stroke:var(--accent-ink)}
.brand b{display:block;font:600 calc(14px*var(--ts))/1.2 var(--display)} .brand span{font-size:calc(11px*var(--ts));color:var(--muted)}
.lbl{white-space:nowrap;transition:opacity .25s}
.app.collapsed .lbl{opacity:0}
.app.collapsed .side:hover .lbl,.app.collapsed .side:focus-within .lbl{opacity:1}
.nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;flex:1;min-height:0}
.nav a,.railbtn{display:flex;align-items:center;gap:14px;padding:9px 11px;border-radius:15px;color:var(--muted);text-decoration:none;font-weight:550;white-space:nowrap;position:relative;background:transparent;border:0;cursor:pointer;width:100%;text-align:left;transition:background .2s,color .2s}
.nav a svg,.railbtn svg{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav a:hover,.railbtn:hover{background:var(--glass2);color:var(--text)}
.nav a.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-soft)}
.nav a.active::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.nav .count{margin-left:auto;background:var(--out);color:#fff;border-radius:99px;font-size:calc(11px*var(--ts));padding:0 7px;font-weight:700}
.nav .sep{height:1px;background:var(--line);margin:8px 8px;font-size:0;overflow:hidden;flex:none}
.rail-tools{padding-top:8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
#collapseBtn svg{transition:transform .45s var(--ease)}
.app.collapsed #collapseBtn svg{transform:rotate(180deg)}
.tsrow{cursor:default}
.tsbtns{margin-left:auto;display:flex;gap:4px}
.tsbtns button{width:30px;height:26px;border-radius:9px;border:1px solid var(--edge-hi);background:var(--glass);color:var(--text);cursor:pointer;font-weight:700;font-size:calc(12px*var(--ts))}
.tsbtns button:hover{border-color:var(--accent);background:var(--glass2)}
.side .me{display:flex;gap:12px;align-items:center;padding:10px 6px 0;white-space:nowrap}
.av{width:34px;height:34px;border-radius:50%;background:var(--glass2);border:1px solid var(--edge);display:grid;place-items:center;font:600 calc(13px*var(--ts)) var(--display);flex:none}
.side .me b{display:block;font-size:calc(12px*var(--ts));overflow:hidden;text-overflow:ellipsis;max-width:150px}
.side .me button{background:transparent;border:0;color:var(--muted);padding:0;cursor:pointer;font-size:calc(12px*var(--ts));text-decoration:underline}
.iconbtn{width:44px;height:44px;border-radius:16px;color:var(--text);cursor:pointer;display:grid;place-items:center;border:0}
.iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iconbtn .lbl{display:none}
.main{margin-left:var(--rw);padding:30px 34px 56px 26px;min-width:0;max-width:1560px;transition:margin-left .45s var(--ease)}
.page-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.page-head p{margin:6px 0 0}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* controls */
.btn{border:1px solid var(--edge);background:var(--glass);border-radius:13px;padding:8px 16px;cursor:pointer;font-weight:600;display:inline-flex;gap:6px;align-items:center;text-decoration:none;color:var(--text);transition:border-color .2s,background .2s,transform .2s;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 var(--spec-lo)}
.btn:hover{border-color:var(--accent);background:var(--glass2)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 0 26px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.sm{padding:3px 10px;font-size:calc(12px*var(--ts));border-radius:10px}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.nav a:focus-visible,.railbtn:focus-visible,.iconbtn:focus-visible,.gauge:focus-visible,.pcard:focus-visible,.wtile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
label{display:block;font-weight:600;font-size:calc(12px*var(--ts));margin-bottom:5px;color:var(--muted)}
input,select,textarea{width:100%;background:var(--field);border:1px solid var(--line);border-radius:13px;padding:9px 12px}
input[type=checkbox],input[type=range]{accent-color:var(--accent)}
input[type=range]{padding:0;background:transparent;border:0}
select option,select optgroup{background:var(--opt);color:var(--text)}
.field{margin-bottom:15px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.card>header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line)}
.card>.body{padding:20px}
.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.cols.dash{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.chartbox{position:relative;height:250px}

/* dashboard hero */
.summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end;margin-bottom:20px}
.headline{font:500 calc(clamp(20px,2.4vw,30px)*var(--ts))/1.2 var(--display);margin:0 0 14px;letter-spacing:-.01em;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.seg{display:flex;gap:4px;height:10px;max-width:560px}
.seg i{border-radius:6px;min-width:10px;transform-origin:left;animation:growx 2.2s var(--ease) .4s both}
.seg .out{background:var(--out)} .seg .low{background:var(--low)} .seg .ok{background:var(--ok)}
.summary p{margin:8px 0 0}
.stats{display:flex;gap:30px;margin:0}
.stats dt{font-size:calc(12px*var(--ts));color:var(--muted)}
.stats dd{margin:0;font:600 calc(28px*var(--ts))/1.2 var(--body)}
.fleet{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:22px 4px}
.gauge{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:var(--text);padding:4px 0;border-radius:14px;animation:gaugeIn 1s var(--ease) both;animation-delay:calc(var(--i)*70ms + .2s)}
.gauge:hover .tube{border-color:var(--ink);box-shadow:inset 0 0 14px var(--glow-top),0 0 24px color-mix(in srgb,var(--ink) 50%,transparent)}
.tube{position:relative;width:46px;height:158px;border-radius:23px 23px 15px 15px;border:1.5px solid var(--edge-hi);background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(0,0,0,.18) 60%,rgba(255,255,255,.08));overflow:hidden;box-shadow:inset 0 0 14px var(--glow-top),inset 0 -8px 14px -8px var(--glow-bot);transition:box-shadow .3s,border-color .3s}
.tube::after{content:"";position:absolute;left:6px;top:14px;bottom:14px;width:5px;border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));opacity:.6;pointer-events:none;z-index:3}
.gauge.out .tube{border-style:dashed}
.liq{position:absolute;left:0;right:0;bottom:0;height:var(--lvl);background:linear-gradient(90deg,var(--ink),color-mix(in srgb,var(--ink) 70%,#fff 30%) 40%,var(--ink));box-shadow:0 0 24px var(--ink);animation:fill 3.4s cubic-bezier(.22,.7,.2,1) both;animation-delay:calc(var(--i)*90ms + .35s)}
.liq::before{content:"";position:absolute;left:-35%;width:170%;top:-7px;height:14px;border-radius:50%;background:var(--ink);filter:brightness(1.12);animation:slosh 6s ease-in-out infinite;animation-delay:calc(var(--i)*-.9s)}
.liq::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.6)}
.gauge.out .liq{display:none}
.b{position:absolute;bottom:2px;border-radius:50%;background:rgba(255,255,255,.65);animation:bubble 7s ease-in infinite;opacity:0}
.b1{left:22%;width:5px;height:5px;animation-delay:calc(var(--i)*-1.1s)}
.b2{left:58%;width:3px;height:3px;animation-duration:9s;animation-delay:calc(var(--i)*-1.7s - 2s)}
.b3{left:40%;width:4px;height:4px;animation-duration:8s;animation-delay:calc(var(--i)*-.6s - 4s)}
.tick{position:absolute;left:0;right:0;bottom:var(--rl);border-top:1.5px dashed var(--text);opacity:.7;z-index:2}
@keyframes fill{from{height:0}}
@keyframes slosh{0%,100%{transform:translateX(-9%) scaleY(1)}50%{transform:translateX(9%) scaleY(1.4)}}
@keyframes bubble{0%{bottom:2px;opacity:0}12%{opacity:.85}100%{bottom:calc(100% - 4px);opacity:0}}
@keyframes gaugeIn{from{opacity:0;transform:translateY(26px) scale(.92)}}
@keyframes growx{from{transform:scaleX(0)}}
@keyframes rise{from{opacity:0;transform:translateY(22px);filter:blur(8px)}}
@keyframes rowIn{from{opacity:0;transform:translateX(-14px)}}
.gauge .num{font:650 calc(22px*var(--ts))/1 var(--body)}
.gauge .name{font-size:calc(11px*var(--ts));color:var(--muted);line-height:1.25;text-align:center;min-height:29px}
.gauge .st{font-size:calc(11.5px*var(--ts));font-weight:650;min-height:16px}
.gauge.out .st,.gauge.out .num{color:var(--out)} .gauge.low .st,.gauge.low .num{color:var(--low)}
.legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin:18px 4px 4px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:calc(12px*var(--ts))}
.legend b{color:var(--text);font-weight:600}

/* tables */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:calc(12px*var(--ts));font-weight:600;color:var(--muted);white-space:nowrap;background:var(--glass)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .2s}
tbody tr:hover{background:var(--glass)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:26px;text-align:center;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:2px 10px;font-size:calc(12px*var(--ts));font-weight:650;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{background:var(--ok-soft);color:var(--ok)} .badge.low{background:var(--low-soft);color:var(--low)}
.badge.out{background:var(--out-soft);color:var(--out)} .badge.info{background:var(--accent-soft);color:var(--accent)}
.badge.gray{background:var(--glass2);color:var(--muted)}
.bar{height:6px;border-radius:9px;background:var(--line);overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;border-radius:9px;background:var(--ok);transform-origin:left;animation:growx 2s var(--ease) .5s both}
.bar.low i{background:var(--low)} .bar.out i{background:var(--out)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabs a{padding:9px 16px;color:var(--muted);text-decoration:none;font-weight:650;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.active{color:var(--accent);border-color:var(--accent)}
.alertlist{list-style:none;margin:0;padding:0}
.alertlist li{display:flex;gap:12px;align-items:flex-start;padding:11px 20px;border-bottom:1px solid var(--line)}
.alertlist li:last-child{border-bottom:0}
.alertlist .t{flex:1}
.dot{width:9px;height:9px;border-radius:50%;margin-top:7px;flex:none;background:var(--muted)}
.dot.out{background:var(--out);box-shadow:0 0 10px var(--out)} .dot.low{background:var(--low);box-shadow:0 0 10px var(--low)}
.group-title{padding:10px 20px;background:var(--glass);font-weight:650;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}

/* printers */
.viewtoggle{display:inline-flex;border:1px solid var(--edge);border-radius:13px;overflow:hidden;background:var(--glass)}
.viewtoggle button{border:0;background:transparent;padding:8px 16px;cursor:pointer;font-weight:600;color:var(--muted)}
.viewtoggle button.on{background:var(--accent);color:var(--accent-ink)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.pcard{border-radius:30px;cursor:pointer;transition:transform .5s var(--ease);overflow:hidden;animation:rise .9s var(--ease) both;animation-delay:calc(var(--c,0)*60ms + .3s)}
.pcard:hover{transform:translateY(-7px)}
.pimg{height:168px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(60% 62% at 50% 46%,rgba(255,255,255,.28),rgba(255,255,255,0) 72%)}
.pimg svg{width:74%;height:auto;max-height:150px;filter:drop-shadow(0 16px 16px rgba(0,0,0,.32))}
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
.pbody{padding:6px 20px 18px}
.ptitle{font:600 calc(16px*var(--ts))/1.3 var(--body)}
.pchips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.pmini{display:flex;gap:14px;align-items:center;margin-bottom:15px;padding:8px 14px 8px 8px;border-radius:20px;background:var(--glass);border:1px solid var(--edge)}
.pmini .pimg{height:72px;width:100px;flex:none;border-radius:14px}
.pmini .pimg svg{width:90%}
.pbig{height:210px;border-radius:22px;margin-bottom:16px;background-color:var(--glass);border:1px solid var(--edge)}
.pbig .pimg{height:100%}

/* appearance */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.wtile{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:var(--field);display:block;padding:0}
.wtile img{width:100%;height:100%;object-fit:cover;display:block}
.wtile .wcap{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 5px;font-size:calc(11px*var(--ts));font-weight:600;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);text-align:left}
.wtile.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 0 22px var(--accent-glow)}
.wtile.up{display:grid;place-items:center;border:2px dashed var(--edge-hi);color:var(--muted);font-weight:600;font-size:calc(12px*var(--ts));text-align:center;gap:2px}
.wtile.up svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.wtile.up:hover{border-color:var(--accent);color:var(--accent)}
.wdel{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:calc(14px*var(--ts));line-height:1}
.apsec{margin-bottom:22px}
.apsec>h3{font:600 calc(13px*var(--ts))/1 var(--body);margin:0 0 10px;color:var(--muted)}
.seg2{display:inline-flex;border:1px solid var(--edge);border-radius:14px;overflow:hidden}
.seg2 button{border:0;background:var(--glass);padding:9px 18px;cursor:pointer;font-weight:600;color:var(--muted)}
.seg2 button.on{background:var(--accent);color:var(--accent-ink)}
.rng{display:grid;grid-template-columns:130px 1fr 46px;gap:12px;align-items:center;margin-bottom:6px}
.rng label{margin:0}
.rng output{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);font-size:calc(12px*var(--ts))}
.tspreview{margin-top:8px;padding:12px 16px;border-radius:16px;background:var(--glass);border:1px solid var(--edge)}

/* PRF stays paper-white and unscaled */
.prf{--ts:1;background:#fff;color:#111;border:1px solid var(--line);border-radius:6px;padding:34px 40px;max-width:780px;font-family:Georgia,"Times New Roman",serif}
.prf h3{text-align:center;margin:0;font-size:calc(18px*var(--ts));text-transform:uppercase;letter-spacing:.04em;font-family:inherit}
.prf .sub{text-align:center;margin-bottom:18px;font-size:calc(13px*var(--ts))}
.prf table{border:1px solid #111;font-size:calc(13px*var(--ts))}
.prf th,.prf td{border:1px solid #111;padding:6px 8px;background:#fff;color:#111;font-size:calc(13px*var(--ts))}
.prf th{font-weight:700}
.prf tbody tr:hover{background:#fff}
.prf .meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin-bottom:14px;font-size:calc(13px*var(--ts))}
.prf .sign{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px;font-size:calc(12px*var(--ts));text-align:center}
.prf .sign div{border-top:1px solid #111;padding-top:4px}

/* modal + toast */
.overlay{position:fixed;inset:0;background:rgba(3,5,16,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px;z-index:50;animation:fade .3s both}
.modal{background:linear-gradient(135deg,var(--g-a),var(--g-b)),var(--modal);border-radius:34px;width:100%;max-width:660px;max-height:90vh;overflow:auto;animation:rise .6s var(--ease) both}
.modal.wide{max-width:760px}
.modal>header{display:flex;justify-content:space-between;align-items:center;padding:18px 26px;border-bottom:1px solid var(--line)}
.modal>.body{padding:24px 26px}
@keyframes fade{from{opacity:0}}
.toast{position:fixed;right:22px;bottom:22px;background:var(--text);color:var(--bg);padding:11px 18px;border-radius:14px;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.4);font-weight:600;animation:rise .5s var(--ease) both}
.toast.err{background:var(--out);color:#fff}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 12px}
.kv dt{color:var(--muted);font-weight:600} .kv dd{margin:0}

/* module entrance */
#view.enter>*{animation:rise .95s var(--ease) both;animation-delay:calc(var(--s,0)*90ms)}
#view.enter>.cols,#view.enter>.cols2,#view.enter>.summary{animation:none}
#view.enter>.cols>*,#view.enter>.cols2>*,#view.enter>.summary>*{animation:rise .95s var(--ease) both;animation-delay:calc(var(--s,0)*90ms)}
#view.enter tbody tr{animation:rowIn .7s var(--ease) both;animation-delay:calc(var(--r,0)*55ms + .45s)}
.nav a{animation:navIn .7s var(--ease) both;animation-delay:calc(var(--n,0)*45ms + .1s)}
@keyframes navIn{from{opacity:0;transform:translateX(-14px)}}

@media (max-width:980px){
  .app,.app.collapsed{--rw:0px}
  .side,.app.collapsed .side:hover,.app.collapsed .side:focus-within{inset:auto 10px 10px 10px;width:auto;height:70px;flex-direction:row;align-items:center;padding:6px 8px;border-radius:26px;overflow-x:auto}
  .brand,.side .me,.nav .sep,.rail-tools{display:none}
  .nav{flex-direction:row;gap:2px;flex:none}
  .nav a{flex-direction:column;gap:2px;padding:6px 10px;font-size:calc(10.5px*var(--ts));width:auto}
  .nav a.active::before{display:none}
  .app.collapsed .lbl,.nav .lbl{opacity:1}
  .main{margin-left:0;padding:18px 16px 100px}
  .cols,.cols.dash,.cols2,.grid2,.summary{grid-template-columns:1fr}
  .stats{gap:22px}
  .rng{grid-template-columns:1fr 46px}.rng label{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
#prf-print{display:none}
@media print{
  body.printing>*:not(#prf-print){display:none!important}
  body.printing #prf-print{display:block!important}
  body.printing .prf{border:0;max-width:none;padding:0}
  body{background:#fff}
}

.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.fgrid .full{grid-column:1/-1}
.fgrid .field{margin-bottom:12px}
.multi{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 12px;border:1px solid var(--edge);border-radius:14px;max-height:150px;overflow:auto}
.multi label,.chk{display:flex;align-items:center;gap:7px;font-size:calc(13px*var(--ts));font-weight:400;margin:0;cursor:pointer}
.multi input,.chk input{width:auto}
.sig{width:100%;height:auto;aspect-ratio:540/170;background:#fff;border-radius:14px;border:1px solid var(--edge-hi);touch-action:none;cursor:crosshair;display:block}
.prfframe{width:100%;height:68vh;border:1px solid var(--edge);border-radius:12px;background:#fff}
@media (max-width:620px){.fgrid{grid-template-columns:1fr}}
.logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.by{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:calc(12px*var(--ts));color:var(--muted)}
.by img{width:120px;height:auto;border-radius:12px}
.by b{color:var(--text)}
.credit{display:flex;align-items:center;gap:10px;padding:10px 14px 4px;font-size:calc(11px*var(--ts));line-height:1.35;color:var(--muted)}
.credit img{width:28px;height:28px;border-radius:9px;flex:none}
.credit b{color:var(--text)}