:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#f1f4fb; --bgA:hsl(262 90% 94%); --bgB:hsl(190 90% 92%); --surface:#ffffff; --surface2:#eaeffa; --ink:#131d35; --muted:#566280; --line:#d5ddf0;
  --accent:#4f46e5; --accent-ink:#ffffff;
  --hi:#0b8f87; --hi-soft:#d3f3f0; --mid:#4f46e5; --mid-soft:#e4e2fd; --lo:#a21caf; --lo-soft:#f6dcf8; --na-soft:#e4e9f5;
  --lsc:46%; --lst:94%; --lsd:32%; --sci:#ffffff;
  --shadow:0 1px 2px rgba(25,35,80,.06),0 10px 26px rgba(25,35,80,.09);
  --head:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif; --body:'Figtree','Segoe UI',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b1020; --bgA:hsl(262 50% 16%); --bgB:hsl(195 55% 13%); --surface:#151c33; --surface2:#1e2744; --ink:#e8edfb; --muted:#9aa8c9; --line:#2b3760;
    --accent:#8b83ff; --accent-ink:#0b0b2a;
    --hi:#4fd1c5; --hi-soft:#0f3b38; --mid:#a5a0ff; --mid-soft:#2a2766; --lo:#e879f9; --lo-soft:#47184f; --na-soft:#232d4d;
    --lsc:64%; --lst:20%; --lsd:50%; --sci:#080c1c;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.32);
  }
}
:root[data-theme="dark"]{
  --bg:#0b1020; --bgA:hsl(262 50% 16%); --bgB:hsl(195 55% 13%); --surface:#151c33; --surface2:#1e2744; --ink:#e8edfb; --muted:#9aa8c9; --line:#2b3760;
  --accent:#8b83ff; --accent-ink:#0b0b2a;
  --hi:#4fd1c5; --hi-soft:#0f3b38; --mid:#a5a0ff; --mid-soft:#2a2766; --lo:#e879f9; --lo-soft:#47184f; --na-soft:#232d4d;
  --lsc:64%; --lst:20%; --lsd:50%; --sci:#080c1c;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.32);
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 70px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;color:var(--ink);font:15px/1.5 var(--body);background:radial-gradient(1100px 520px at 88% -8%,var(--bgA),transparent 70%),radial-gradient(900px 460px at -8% 6%,var(--bgB),transparent 70%),var(--bg);background-attachment:fixed}
button,input,select,textarea{font:inherit;color:inherit;box-sizing:border-box}
h1,h2,h3,h4{font-family:var(--head);margin:0;font-weight:700;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--sc,var(--accent));outline-offset:2px}
.sc{--sc:hsl(var(--h,250) 78% var(--lsc));--sct:hsl(var(--h,250) 85% var(--lst));--scd:hsl(var(--h,250) 70% var(--lsd));--scg:linear-gradient(135deg,hsl(var(--h,250) 82% 52%),hsl(calc(var(--h,250) + 22) 78% 44%))}
.ic{display:inline-grid;place-items:center;flex:none}
.ic svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.app{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:env(safe-area-inset-top,0px);align-self:start;height:100vh;max-height:100vh;overflow-y:auto;background:linear-gradient(180deg,#171a45 0%,#0f1d44 55%,#0b2c45 100%);color:#e9edff;padding:18px 12px 28px}
.brand{display:flex;gap:12px;align-items:center;padding:2px 8px 16px}
.mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#22d3ee,#6366f1 55%,#a855f7);color:#fff;display:grid;place-items:center;font:800 20px var(--head);box-shadow:0 6px 16px rgba(99,102,241,.45)}
.brand b{display:block;font:800 16px/1.15 var(--head)}
.brand span{font-size:12px;color:#a9b4e6}
.nav{position:relative;display:flex;width:100%;align-items:center;gap:11px;text-align:left;border:0;background:transparent;border-radius:12px;padding:8px 10px 12px;cursor:pointer;color:#e9edff;font-weight:600;font-size:14px}
.nav .tile{width:32px;height:32px;border-radius:10px;background:var(--scg);color:#fff;font-size:17px;flex:none;box-shadow:0 4px 10px rgba(0,0,0,.28)}
.nav .t{flex:1;min-width:0;line-height:1.25}
.nav:hover{background:rgba(255,255,255,.08)}
.nav.on{background:rgba(255,255,255,.15);box-shadow:inset 3px 0 0 hsl(var(--h) 90% 66%)}
.nav .bd{font-size:12px;font-weight:800;border-radius:99px;padding:0 9px;background:hsl(var(--h) 90% 62%);color:#0b1230;min-width:28px;text-align:center}
.nav .pg{position:absolute;left:53px;right:10px;bottom:5px;height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.nav .pg i{display:block;height:100%;background:hsl(var(--h) 90% 66%);border-radius:3px}
.gh{font:700 12px var(--body);color:#9fb0ee;margin:18px 10px 4px}
.cswitch{margin:12px 0 2px;padding:10px;border:1px solid rgba(255,255,255,.18);border-radius:13px;background:rgba(255,255,255,.07)}
.cswitch label{font-size:12px;color:#b9c4f2;display:block;margin-bottom:5px}
.cswitch select{background:#fff;color:#131d35;border-color:transparent}
.main{min-width:0;padding:0 clamp(14px,3vw,36px) 70px}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:10px;padding:12px 0;margin-bottom:18px;background:linear-gradient(var(--bg) 70%,transparent)}
.top .crumb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:13px}
.top .crumb b{color:var(--ink)}
.status{font-size:12px;color:var(--muted)}
.btn.burger{display:none}
.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.menu .pop{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:grid;gap:2px;z-index:30}
.menu .pop button{border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer}
.menu .pop button:hover{background:var(--surface2)}

.btn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);padding:7px 14px;border-radius:11px;cursor:pointer;font-weight:700;white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--sc,var(--accent));transform:translateY(-1px)}
.btn.pri{background:var(--scg,linear-gradient(135deg,#4f46e5,#7c3aed));border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(60,60,160,.28)}
.btn.ghost{background:transparent}
.btn.sm{padding:3px 11px;font-size:13px;border-radius:9px}
.btn.danger{background:var(--lo);border-color:var(--lo);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.hero{position:relative;overflow:hidden;background:linear-gradient(115deg,#0891b2 0%,#4f46e5 55%,#9333ea 100%);color:#fff;border-radius:22px;padding:26px 30px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:18px;box-shadow:0 14px 34px rgba(80,60,200,.3)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.hero::before{width:260px;height:260px;right:-60px;top:-110px}
.hero::after{width:170px;height:170px;right:150px;bottom:-100px;background:rgba(255,255,255,.09)}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:clamp(26px,3.6vw,38px);line-height:1.05;font-weight:800}
.hero .sub1{font:700 clamp(17px,2.2vw,24px) var(--head);margin-top:4px;opacity:.95}
.hero p{margin:8px 0 0;opacity:.92;max-width:62ch}
.hero .acts{display:flex;gap:10px;flex-wrap:wrap}
.hero .btn{background:#fff;color:#1d2a63;border-color:#fff}
.hero .btn.line{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:14px;margin-bottom:18px}
.kpi{position:relative;overflow:hidden;background:var(--scg);color:#fff;border-radius:18px;padding:14px 16px;box-shadow:0 8px 20px rgba(30,40,100,.22);display:grid;gap:2px}
.kpi::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.14);right:-26px;top:-30px}
.kpi .ic{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.22);font-size:19px;margin-bottom:6px}
.kpi b{font:800 30px/1.1 var(--head)}
.kpi span{font-size:13px;opacity:.93}
.ins{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:18px}
.panel{background:var(--surface);border:2px solid var(--sc,var(--line));border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.panel>h3{font-size:16px;color:#fff;background:var(--scg);padding:9px 16px}
.panel>div{padding:12px 16px 14px}
.brow{display:grid;grid-template-columns:132px 1fr 28px;gap:8px;align-items:center;font-size:13px;margin:8px 0}
.brow .tr{height:12px;background:var(--surface2);border-radius:9px;overflow:hidden}
.brow .tr i{display:block;height:100%;border-radius:9px;background:var(--scg)}
.brow b{text-align:right}
.donutw{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:6px 0}
.donut{width:118px;height:118px;border-radius:50%;position:relative;flex:none}
.donut::before{content:"";position:absolute;inset:22px;border-radius:50%;background:var(--surface)}
.donut b{position:absolute;inset:0;display:grid;place-items:center;font:800 24px var(--head)}
.leg{display:grid;gap:6px;font-size:13px}
.leg i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:7px;vertical-align:-1px}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:16px}
.bar .fld{flex:1 1 170px;min-width:150px}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:11px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:7px 14px;cursor:pointer;font-weight:700}
.seg button.on{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}

.tw{overflow-x:auto;background:var(--surface);border:2px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:860px}
th{font-size:12px;color:#fff;text-align:left;font-weight:700;padding:11px 12px;background:linear-gradient(135deg,#4f46e5,#7c3aed);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface2)}
td .nm{font-weight:700}
td .sub{font-size:12px;color:var(--muted)}
td img.tn{width:60px;height:46px;object-fit:cover;border-radius:9px;display:block;cursor:zoom-in}
.noimg{width:60px;height:46px;border-radius:9px;background:var(--na-soft);display:grid;place-items:center;font-size:11px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font-weight:700;border-radius:99px;padding:2px 11px;font-size:13px;background:var(--na-soft);color:var(--muted)}
.pill[data-b="hi"]{background:var(--hi-soft);color:var(--hi)}
.pill[data-b="mid"]{background:var(--mid-soft);color:var(--mid)}
.pill[data-b="lo"]{background:var(--lo-soft);color:var(--lo)}
.pill.sc{background:var(--sct);color:var(--scd)}
.chipr{display:flex;flex-wrap:wrap;gap:5px}
.chipr .pill{font-size:12px;padding:1px 9px;font-weight:600}
.empty{padding:40px 16px;text-align:center;color:var(--muted);background:var(--surface);border:2px dashed var(--line);border-radius:16px}
.empty .btn{margin:6px 4px 0}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.cc{background:var(--surface);border:2px solid var(--sc);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);display:grid;grid-template-rows:auto auto 1fr auto}
.cc-top{display:flex;gap:14px;align-items:center;padding:14px 16px;background:var(--scg);color:#fff}
.cc-top .nm{font:800 18px/1.2 var(--head)}
.cc-top .sub{font-size:12px;opacity:.9;overflow-wrap:anywhere}
.cc-img{height:158px;background:var(--na-soft);display:grid;place-items:center;color:var(--muted);font-size:13px;position:relative;overflow:hidden}
.cc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.cc-img .lab{position:absolute;left:10px;bottom:8px;background:rgba(10,18,40,.75);color:#fff;border-radius:9px;padding:2px 10px;font-size:12px;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-b{padding:12px 16px;display:grid;gap:9px;align-content:start}
.cc-f{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:10px 16px;border-top:2px solid var(--sct);background:var(--sct)}
.cc-f select{width:auto;min-height:32px;padding:3px 8px;font-size:13px;flex:1;min-width:0;border-color:var(--sc)}
.ring{width:64px;height:64px;border-radius:50%;position:relative;display:grid;place-items:center;flex:none;background:conic-gradient(var(--sc) calc(var(--p,0)*1%),var(--surface2) 0)}
.ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
.ring b{position:relative;font:800 19px var(--head);color:var(--scd)}
.cc-top .ring{background:conic-gradient(#fff calc(var(--p,0)*1%),rgba(255,255,255,.28) 0)}
.cc-top .ring::before{background:hsl(var(--h) 60% 30%)}
.cc-top .ring b{color:#fff}
.ring.lg{width:88px;height:88px}.ring.lg::before{inset:9px}.ring.lg b{font-size:26px}

.chead{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:16px 20px;margin-bottom:16px;border-radius:22px;color:#fff;background:linear-gradient(115deg,#4338ca,#7c3aed 58%,#a21caf);box-shadow:0 14px 34px rgba(80,60,200,.28);position:relative;overflow:hidden}
.chead::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.1);right:-60px;top:-100px;pointer-events:none}
.chead>*{position:relative;z-index:1}
.chead .chl{display:flex;gap:14px;align-items:center;min-width:0;flex:1 1 320px}
.chead .ring{background:conic-gradient(#fff calc(var(--p,0)*1%),rgba(255,255,255,.28) 0)}
.chead .ring::before{background:#4a3bb8}
.chead .ring b{color:#fff}
.chead input.nameinp[type=text]{width:100%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.4);color:#fff;border-radius:12px;padding:6px 12px;font:800 clamp(20px,2.6vw,28px)/1.2 var(--head)}
.chead input.nameinp::placeholder{color:rgba(255,255,255,.72)}
.chead input.nameinp:focus{outline:none;border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.chead .hint{color:rgba(255,255,255,.88);margin-top:4px}
.chead .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chead .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55);color:#fff}
.chead .btn.on{background:#fff;color:#2c2a85;border-color:#fff}
.chead .pill{background:#fff;color:#2c2a85}
.sechead{display:flex;gap:14px;align-items:center;margin:0 0 14px;background:var(--sct);border:2px solid var(--sc);border-radius:18px;padding:12px 18px}
.sechead .tile{width:48px;height:48px;border-radius:15px;background:var(--scg);color:#fff;font-size:26px;flex:none;box-shadow:0 6px 14px rgba(0,0,0,.2)}
.sechead h2{font-size:23px;color:var(--scd)}
.sechead p{margin:3px 0 0;color:var(--muted);max-width:74ch}
.sechead .pct{margin-left:auto;text-align:center;flex:none}
.sechead .pct b{display:block;font:800 22px var(--head);color:var(--scd)}
.sechead .pct span{font-size:12px;color:var(--muted)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.tab{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);background:var(--surface);border-radius:13px;padding:7px 15px;font-weight:700;cursor:pointer}
.tab:hover{border-color:var(--sc)}
.tab.on{background:var(--scg);color:#fff;border-color:transparent;box-shadow:0 6px 14px rgba(0,0,0,.2)}
.tab .n{font-size:12px;background:var(--sct);color:var(--scd);border-radius:99px;padding:0 8px;min-width:22px;text-align:center}
.tab.on .n{background:rgba(255,255,255,.28);color:#fff}
.body{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;border:0;margin:0;padding:0;min-width:0}
.vo{display:none;font-size:13px;background:var(--mid-soft);color:var(--mid);border-radius:11px;padding:7px 13px;font-weight:700}
.body:disabled>.vo{display:block}
.blocks{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.blk{min-width:0;border:2px solid var(--sc);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.blk-h{background:var(--scg);color:#fff;padding:9px 18px;font:700 16px var(--head)}
.blk>.grid{padding:16px 18px}
.blocks.nested{gap:12px}
.blocks.nested .blk{border-width:1.5px;border-color:var(--line);border-radius:14px;box-shadow:none}
.blocks.nested .blk-h{background:var(--sct);color:var(--scd);padding:6px 14px;font-size:14px}
.blocks.nested .blk>.grid{padding:12px 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:13px 16px;align-items:start}
.wide{grid-column:1/-1}
.fld{display:grid;gap:4px;min-width:0}
.lbl{font-size:13px;font-weight:700;color:var(--muted)}
.hint{font-size:12px;color:var(--muted)}
input[type=text],input[type=number],select,textarea{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:11px;padding:8px 11px;min-height:40px}
textarea{resize:vertical;min-height:80px}
input:hover,select:hover,textarea:hover{border-color:var(--sc,var(--accent))}
input:focus,select:focus,textarea:focus{border-color:var(--sc,var(--accent));outline:none;box-shadow:0 0 0 4px var(--sct,rgba(79,70,229,.15))}
:disabled{cursor:not-allowed}
input:disabled,select:disabled,textarea:disabled{background:var(--surface2);opacity:1;color:var(--ink)}
select[data-v]{border-left-width:7px}
select[data-v="5"],select[data-v="4"]{border-left-color:var(--hi)}
select[data-v="3"]{border-left-color:var(--mid)}
select[data-v="2"],select[data-v="1"]{border-left-color:var(--lo)}
.note{margin:0;color:var(--ink);font-size:13px;background:var(--sct);border-radius:12px;padding:9px 14px;border-left:5px solid var(--sc)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:99px;padding:4px 13px;cursor:pointer;background:var(--surface);font-size:14px}
.chip:hover{border-color:var(--sc)}
.chip input{accent-color:var(--sc);margin:0}
.chip:has(input:checked){background:var(--scg);border-color:transparent;color:#fff;font-weight:700}
.stats{display:flex;flex-wrap:wrap;gap:8px}
.stat{background:var(--sct);border:1.5px solid var(--sc);border-radius:12px;padding:5px 13px;font-size:13px;color:var(--muted)}
.stat b{color:var(--scd);font-size:17px;margin-right:3px}
.list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.list-h{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.list-h h4{font-size:15px;color:var(--scd)}
.cnt{font-size:12px;font-weight:800;background:var(--scg);color:#fff;border-radius:99px;padding:0 10px}
.cntsel{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-weight:700}
.cntsel select{width:auto;min-height:34px;padding:3px 8px;border-color:var(--sc)}
.item{background:var(--bg);border:1.5px solid var(--sc);border-left-width:7px;border-radius:14px}
.item>summary{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;list-style:none;font-weight:700}
.item>summary::-webkit-details-marker{display:none}
.item>summary::before{content:"";width:8px;height:8px;border-right:2.5px solid var(--sc);border-bottom:2.5px solid var(--sc);transform:rotate(-45deg);transition:transform .15s;flex:none}
.item[open]>summary::before{transform:rotate(45deg)}
.item>summary .ttl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item>summary .idx{font-size:12px;color:#fff;background:var(--scg);border-radius:99px;padding:0 9px;font-weight:800}
.item-b{padding:4px 12px 14px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.item .item{background:var(--surface)}
.nolist{font-size:13px;color:var(--muted);padding:2px 0;margin:0}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.thumb{position:relative}
.thumb img{width:118px;height:92px;object-fit:cover;border-radius:12px;border:2px solid var(--sc);display:block;cursor:zoom-in}
.thumb button{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;border:0;background:var(--lo);color:#fff;cursor:pointer;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.up{display:inline-flex;align-items:center;gap:6px;border:2px dashed var(--sc);color:var(--scd);border-radius:12px;padding:11px 15px;cursor:pointer;font-weight:700;font-size:14px;background:var(--sct)}
.up input{display:none}
.imgc{font-weight:800;color:var(--scd);margin-left:6px}
.pager{display:flex;justify-content:space-between;margin-top:22px;gap:10px;flex-wrap:wrap}

.big{display:flex;flex-wrap:wrap;gap:24px;align-items:center;padding:20px 22px;background:var(--surface);border:2px solid var(--sc);border-radius:20px;box-shadow:var(--shadow)}
.bignum{font:800 58px/1 var(--head);color:var(--scd)}
.bignum small{font-size:20px;color:var(--muted);font-weight:500}
.cats{flex:1 1 320px;display:grid;gap:8px}
.cat{display:grid;grid-template-columns:150px 1fr 36px;gap:10px;align-items:center;font-size:13px}
.cat .tr{height:12px;background:var(--surface2);border-radius:9px;overflow:hidden}
.cat .tr i{display:block;height:100%;background:var(--scg);border-radius:9px}
.cat b{text-align:right}
.review{display:grid;gap:16px}
.team{background:var(--surface);border:2px solid var(--sc);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.team-h{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 18px;background:var(--scg);color:#fff}
.team-h h3{font-size:17px}
.team-h .fld{min-width:210px}
.team-h .lbl{color:rgba(255,255,255,.9)}
.team-h select{color:var(--ink)}
.team-b{padding:14px 18px}
.tag{font-size:12px;background:rgba(255,255,255,.25);border-radius:99px;padding:1px 9px;margin-left:8px;font-weight:600}
.cm{border-left:5px solid var(--sc);background:var(--bg);border-radius:0 12px 12px 0;padding:8px 10px;display:grid;gap:6px;margin-bottom:8px}
.cm .who{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.cm .who b{color:var(--ink);font-size:13px}
.cm .who .btn{margin-left:auto}
.newc{display:grid;grid-template-columns:minmax(120px,160px) 1fr auto;gap:8px;align-items:start;margin-top:10px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.gc{background:var(--surface);border:2px solid var(--sc);border-radius:18px;overflow:hidden;cursor:pointer;display:grid;text-align:left;padding:0;box-shadow:var(--shadow)}
.gc:hover{transform:translateY(-2px)}
.gc img,.gc .gi{width:100%;height:158px;object-fit:cover;background:var(--na-soft);display:grid;place-items:center;color:var(--muted);font-size:13px}
.gc .gb{padding:10px 13px;display:grid;gap:3px}
.gc .gb b{font-size:15px}
.gc .gb span{font-size:12px;color:var(--muted)}
.lb{position:fixed;inset:0;z-index:80;background:rgba(5,10,24,.88);display:grid;place-items:center;padding:20px;cursor:zoom-out}
.lb img{max-width:100%;max-height:100%;border-radius:12px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:12px;z-index:90;font-weight:700;font-size:14px;max-width:90vw;text-align:center}
.scrim{display:none}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;height:auto;width:min(86vw,320px);z-index:50;transform:translateX(-102%);transition:transform .2s;padding-top:calc(18px + env(safe-area-inset-top,0px));padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .side.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .scrim.open{display:block;position:fixed;inset:0;background:rgba(5,10,24,.55);z-index:40}
  .btn.burger{display:inline-flex}
  .newc{grid-template-columns:1fr}
  .cat{grid-template-columns:104px 1fr 32px}
  .cntsel{margin-left:0}
  .sechead{flex-wrap:wrap}
  .sechead .pct{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.btn:hover:not(:disabled),.gc:hover{transform:none}}

/* ---------- added for the hosted app ---------- */
input[type=date],input[type=password]{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:11px;padding:8px 11px;min-height:40px}
.instance{background:var(--lo-soft);color:var(--lo);font-weight:700;font-size:13px;border-radius:11px;padding:6px 13px;margin-bottom:14px;text-align:center}
.side .me{margin:22px 8px 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);display:grid;gap:2px;font-size:13px}
.side .me b{font:700 14px var(--head)}
.side .me span{color:#a9b4e6;font-size:12px}
.side .me div{display:flex;gap:14px;margin-top:6px}
.side .me a{color:#c9d3ff;font-weight:700;text-decoration:none}
.side .me a:hover{color:#fff;text-decoration:underline}
.menu .pop a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none}
.menu .pop a:hover{background:var(--surface2)}
.menu .pop .sep{font-size:12px;font-weight:700;color:var(--muted);padding:8px 10px 2px;border-top:1px solid var(--line);margin-top:4px}
.pill.st{white-space:nowrap}
.chead .pill.st[data-b="hi"]{background:#d3f3f0;color:#0b6f69}
.chead .pill.st[data-b="mid"]{background:#fff;color:#2c2a85}
.chead .pill.st[data-b="na"]{background:rgba(255,255,255,.75);color:#3a3f63}
.cc-top .pill.st{align-self:flex-start;flex:0 0 auto}
.facts{margin:-6px 4px 14px;font-size:13px;color:var(--muted)}
.note.bad{background:var(--lo-soft);border-left-color:var(--lo)}
.note.good{background:var(--hi-soft);border-left-color:var(--hi)}
.note .btn{margin-left:6px}
.dlg{border:0;border-radius:20px;padding:22px;width:min(520px,92vw);background:var(--surface);color:var(--ink);box-shadow:0 30px 80px rgba(10,15,45,.45)}
.dlg::backdrop{background:rgba(8,12,30,.55)}
.dlg h3{font-size:20px;margin-bottom:14px}
.dlg-b{display:grid;gap:12px}
.dlg-f{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.dupes:empty{display:none}
.h3{margin:22px 4px 10px;font-size:17px}
.fld.chk{flex:0 0 auto!important;min-width:0!important}
.fld.chk input{width:22px;height:22px;margin:9px 0}
.cmt{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.cmt.gone{color:var(--muted);font-style:italic}
tr.catrow td{background:var(--surface2);font-weight:700}
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(400px,100%);background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow);display:grid;gap:16px}
.login-card .brand{padding:0}
.login-card .brand span{color:var(--muted)}
.login-card form{display:grid;gap:12px}
.login-card .btn.pri{justify-content:center;padding:10px 14px}
.login-card .demo{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line);padding-top:14px}
.login-card .demo .lbl{flex:1 0 100%}
.login-card .demo a{text-decoration:none}
@media (max-width:900px){.newc{grid-template-columns:1fr}}
td .nm{min-width:150px}