:root{
  --dg:#0b5d1e; --g1:#1b7a3d; --g2:#2e9a55; --gl:#e1f0e5; --gp:#f3faf5; --bg:#eef4f0; --card:#fff; --ink:#1d2b22; --muted:#5f6b63;
  --line:#d5e3d9; --gold:#d4a72c; --goldl:#fff2c2; --red:#fbe3e3; --redt:#9c0006; --amb:#fff1c9; --ambt:#6b5000; --grn:#d9f2df; --grnt:#0b5d1e;
  --radius:10px; --shadow:0 2px 10px rgba(11,93,30,.08);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;color:var(--ink);background:var(--bg)}
a{color:var(--g1)}
button,input,select,textarea{font:inherit;color:inherit}
.boot{padding:60px;text-align:center;color:var(--muted)}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;background:var(--dg);color:#fff;padding:8px 16px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.top img{width:34px;height:34px;border-radius:50%;background:#fff}
.top .t1{font-weight:700;font-size:16px;line-height:1.1}.top .t2{font-size:12px;color:#cfe8d6}
.top .sp{flex:1}
.top .who{font-size:13px;text-align:right;line-height:1.2}.top .who small{color:#cfe8d6}
.top button{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.top button:hover{background:rgba(255,255,255,.22)}
.menu-btn{display:none}

/* layout */
.wrap{display:flex;min-height:calc(100vh - 50px)}
nav.side{width:220px;flex:none;background:#fff;border-right:1px solid var(--line);padding:12px 8px}
nav.side a{display:flex;gap:8px;align-items:center;padding:9px 12px;border-radius:8px;color:var(--ink);text-decoration:none;margin-bottom:2px}
nav.side a:hover{background:var(--gp)} nav.side a.on{background:var(--gl);color:var(--dg);font-weight:600}
nav.side .grp{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 12px 6px}
main{flex:1;min-width:0;padding:20px 24px 60px}
h1{font-size:22px;margin:0 0 4px;color:var(--dg)} h2{font-size:17px;margin:22px 0 10px;color:var(--dg)}
.sub{color:var(--muted);margin:0 0 16px}

/* cards & tiles */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tile{display:block;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;text-decoration:none;color:var(--ink);border-top:4px solid var(--g2)}
.tile:hover{box-shadow:0 4px 18px rgba(11,93,30,.16)}
.tile b{display:block;font-size:16px;color:var(--dg);margin-bottom:4px}.tile span{color:var(--muted);font-size:13px}
.tile.gold{border-top-color:var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--g1);color:#fff;border:0;border-radius:8px;padding:8px 14px;cursor:pointer;text-decoration:none;font-weight:600}
.btn:hover{background:var(--dg)} .btn:disabled{opacity:.5;cursor:default}
.btn.light{background:#fff;color:var(--dg);border:1px solid var(--line)} .btn.light:hover{background:var(--gp)}
.btn.gold{background:var(--gold);color:#3a2b00} .btn.red{background:#b3261e}
.btn.sm{padding:5px 10px;font-size:13px}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.bar .sp{flex:1}

/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--line);margin:0 0 16px}
.tabs a{padding:9px 14px;text-decoration:none;color:var(--muted);border-radius:8px 8px 0 0;font-weight:600}
.tabs a.on{background:#fff;color:var(--dg);box-shadow:0 -2px 0 var(--g2) inset}

/* forms */
label.f{display:block;font-weight:600;font-size:13px;margin:10px 0 4px}
input.i,select.i,textarea.i{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
input.i:focus,select.i:focus,textarea.i:focus{outline:2px solid var(--g2);border-color:transparent}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 16px}
.note{font-size:12px;color:var(--muted)}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--gl);color:var(--dg)}
.pill.warn{background:var(--red);color:var(--redt)} .pill.gold{background:var(--goldl);color:var(--ambt)}

/* tables */
.tw{overflow:auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);max-height:calc(100vh - 220px)}
table.t{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
table.t th,table.t td{border-bottom:1px solid var(--line);border-right:1px solid #edf3ee;padding:6px 8px;text-align:center;white-space:nowrap}
table.t th{background:var(--dg);color:#fff;position:sticky;top:0;z-index:2;font-weight:600}
table.t thead tr:nth-child(2) th{top:31px;background:var(--g1)}
table.t th.l,table.t td.l{text-align:left}
table.t td.name{position:sticky;left:0;background:#fff;z-index:1;text-align:left;font-weight:600;min-width:180px}
table.t th.name{left:0;z-index:3}
table.t tr.max td{background:var(--goldl);font-weight:700;color:var(--ambt)}
table.t tr:hover td{background:var(--gp)} table.t tr:hover td.name{background:var(--gp)}
td.calc{background:#eef6f0;font-weight:700}
td.below{background:var(--red)!important;color:var(--redt)} td.inline{background:var(--amb)!important;color:var(--ambt)} td.above{background:var(--grn)!important;color:var(--grnt)}
input.m{width:58px;padding:5px 4px;text-align:center;border:1px solid var(--line);border-radius:6px;background:#fff}
input.m:focus{outline:2px solid var(--g2);border-color:transparent}
input.m.saving{background:#fffbe6} input.m.saved{background:#e9f7ed} input.m.bad{background:var(--red);border-color:var(--redt)}
input.m[readonly]{background:#f5f7f6;color:#555;border-color:transparent}
.low{color:var(--redt);font-weight:700} .high{color:#8a6a00;font-weight:700}
.j-Outstanding{background:#0b5d1e!important;color:#fff}.j-VeryGood{background:#2e9a55!important;color:#fff}.j-Good{background:#9fd3ae!important}.j-Acceptable{background:#fff1c9!important}.j-Weak{background:#fbd5c0!important}.j-VeryWeak{background:#f4b3b3!important}

/* toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1d2b22;color:#fff;padding:10px 16px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:100;max-width:90vw}
#toast.on{opacity:.95} #toast.err{background:#9c0006}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0b5d1e,#1b7a3d 55%,#2e9a55)}
.login .box{background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.25);width:min(420px,92vw);padding:30px 32px}
.login img{width:76px;height:76px;display:block;margin:0 auto 10px}
.login h1{text-align:center;font-size:20px} .login .sub{text-align:center}
.login .btn{width:100%;justify-content:center;padding:11px;margin-top:16px;font-size:15px}
.err{background:var(--red);color:var(--redt);padding:9px 12px;border-radius:8px;margin-top:10px}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:#fff;border-radius:14px;max-width:640px;width:100%;max-height:90vh;overflow:auto;padding:20px 22px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.modal h2{margin-top:0}

/* sign-off stages */
.stage{font-weight:700}.stage.full{color:var(--dg)}.stage.edit{color:var(--redt)}

/* printing: only #print-area is printed */
#print-area{display:none}
@media print{
  @page{size:A4;margin:10mm}
  body{background:#fff}
  #app,#toast,.modal-bg{display:none!important}
  #print-area{display:block}
  .pg{page-break-after:always} .pg:last-child{page-break-after:auto}
}
.doc{font-family:"Segoe UI",Arial,sans-serif;color:#111;font-size:11.5px}
.doc .hd{display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--dg);padding-bottom:8px;margin-bottom:8px}
.doc .hd img{width:58px;height:58px}
.doc .hd .s1{font-size:17px;font-weight:800;color:var(--dg)} .doc .hd .s2{font-size:13px;font-weight:600}
.doc table{border-collapse:collapse;width:100%;margin:6px 0}
.doc th,.doc td{border:1px solid #7f9c88;padding:4px 5px;text-align:center}
.doc th{background:var(--dg);color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.doc td.l,.doc th.l{text-align:left}
.doc .info td{border:0;text-align:left;padding:2px 6px}
.doc .sig{display:flex;gap:16px;margin-top:22px}.doc .sig div{flex:1;text-align:center;border-top:1px solid #333;padding-top:4px;font-size:11px}
.doc .sig .nm{font-family:"Segoe Script","Brush Script MT",cursive;font-size:15px;color:#123;border:0;padding:0;min-height:20px}
.doc .box{border:1px solid #7f9c88;padding:6px 8px;margin-top:6px;min-height:40px}
.doc .ttl{background:var(--gl);font-weight:700;-webkit-print-color-adjust:exact;print-color-adjust:exact}

/* phones */
@media (max-width:800px){
  .menu-btn{display:inline-block}
  nav.side{position:fixed;top:50px;bottom:0;left:-240px;z-index:30;transition:left .2s;box-shadow:4px 0 20px rgba(0,0,0,.15)}
  nav.side.open{left:0}
  main{padding:14px 12px 60px}
  .top .who{display:none}
}

/* ---- version 2 ---- */
.tp{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:5px 8px;margin-left:10px}
.tp option{color:#1d2b22}
.pill.light{background:#eef2ef;color:var(--muted);font-weight:500}
h1 .i{font-size:14px;vertical-align:middle;margin-left:6px}
.hb{margin-left:5px;border:0;background:rgba(255,255,255,.2);color:inherit;border-radius:4px;width:18px;height:18px;line-height:16px;padding:0;cursor:pointer;font-weight:700;font-size:13px;opacity:.65}
.hb:hover{opacity:1;background:rgba(255,255,255,.4)}
td .hb{background:#eef2ef;color:var(--muted);margin:0}
th.rb,td.rb{width:26px;padding:2px!important}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px}
.chip{display:inline-block;border:1px dashed var(--g2);background:#fff;color:var(--dg);border-radius:999px;padding:3px 10px;font-size:12px;cursor:pointer;text-decoration:none}
.chip:hover{background:var(--gp)} .chip.on{background:var(--g1);color:#fff;border-style:solid} .chip.all{border-style:solid;font-weight:600}
table.t th.grp{background:var(--g1)}
table.t.small td,table.t.small th{padding:4px 5px;font-size:12px}
table.t th small{font-weight:400;opacity:.85}
input.m.empty{border-color:#e0b252;background:#fffaf0}
.warnmark{color:#b86e00;cursor:help}
.side-box{background:var(--gp);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.side-box.off{background:#fafbfa}
.anl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.mbar{display:inline-block;width:70px;height:8px;background:#e7eee9;border-radius:4px;vertical-align:middle;margin-left:4px;overflow:hidden}
.mbar i{display:block;height:100%;background:var(--g2)}
td.up{color:var(--grnt);font-weight:700} td.down{color:var(--redt);font-weight:700}
.acard{border-left:4px solid var(--g2)} .acard.removed{border-left-color:#c9c9c9;opacity:.75}
table.t.mini{width:auto;min-width:60%} table.t.mini th{position:static}
tr.removed td{background:#f4f4f4;color:#888}
.checks{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:4px 0 8px}
details summary{cursor:pointer;color:var(--dg);font-weight:600}
details.addc{margin-top:10px}
.rng{color:var(--muted);white-space:nowrap}
@media print{.hb,.chips{display:none!important}}
@media (max-width:800px){.top .t2{display:none}.top .tp{margin-left:4px}}
.card.ai{border-left:4px solid var(--gold)}
.tw[style*="max-height:none"] table.t th{position:static}
/* charts */
figure.vz{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin:0 0 16px;padding:12px 14px}
figure.vz figcaption{font-weight:700;color:var(--dg);margin-bottom:6px}
.vz-leg{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted);margin-bottom:6px}
.vz-leg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.vz-svg{width:100%;max-width:1000px;height:auto;display:block}
.vz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px}
.vz-row{display:flex;flex-wrap:wrap;gap:12px}
.rc-bottom{display:flex;gap:10px;align-items:stretch;margin-top:6px}.rc-chart{flex:2}
.rc-bottom figure.vz{box-shadow:none;border:1px solid #7f9c88;padding:6px 8px;margin:0}
.doc figure.vz{box-shadow:none;border:1px solid #c9d6cd;page-break-inside:avoid}
.doc td.below,.doc td.inline,.doc td.above{-webkit-print-color-adjust:exact;print-color-adjust:exact}
@media print{figure.vz{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.viewas{background:var(--goldl);border:1px solid var(--gold);border-radius:8px;padding:8px 12px;margin-bottom:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
img.sigimg{max-height:38px;max-width:160px;display:block;margin:0 auto}
/* domains & K/U/S */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:10px 0 16px}
.kpi{background:#fff;border:1px solid var(--line);border-left:4px solid var(--g2);border-radius:10px;padding:10px 12px}
.kpi span{display:block;font-size:12px;color:var(--mute,#5f6b63)} .kpi b{display:block;font-size:20px;margin:2px 0} .kpi small{color:var(--mute,#5f6b63)}
.kpi.up{border-left-color:#1f8a4c} .kpi.down{border-left-color:#d14b3b}
span.up{color:var(--grnt);font-weight:700} span.down{color:var(--redt);font-weight:700}
tr.gtop td{border-top:2px solid var(--g2)}
td.nw{white-space:nowrap}
details > summary{cursor:pointer;margin:12px 0 6px}

table.t tr.tmp td{background:#fff4d6} table.t tr.tmp td.name::after{content:" ✱ temporary SIS #";font-size:11px;font-weight:600;color:#9a6a00}
.pending{border-left:4px solid var(--gold,#e8a200)}
@media (max-width:760px){#pageXlsx{display:none}}

/* report card on the school template (landscape) */
.rct{font-family:"Times New Roman",Georgia,serif;color:#111}
.rct table{border-collapse:collapse;width:100%;margin:3px 0}
.rct th,.rct td{border:1px solid #444;padding:2px 3px;text-align:center;background:none;color:#111}
.rct th{font-weight:700}
.rct .l{text-align:left}.rct .c{text-align:center}.rct .b{font-weight:700}
.rct-hd td{border:0}.rct-hd .h1{font-size:1.45em;font-weight:700}.rct-hd .h2{font-size:1.3em;font-weight:700;color:#fff}.rct-hd .h3{font-weight:700}
.rct-info td{border:1px solid #444}
.rct-cap{text-align:center;font-weight:700;font-size:1.25em;margin:3px 0}
.rct-att thead th{font-size:.95em}
.rct-tot td,.rct-pct td{font-weight:700;background:inherit!important}
.rct-ov td{border:0;text-align:left;padding:3px 6px}
.rct-low{display:flex;gap:10px;align-items:flex-start;margin-top:6px}
.rct-sch{flex:1.1}.rct-sch .rct-cap{text-decoration:underline}
.rct-graph{flex:1.3;border:1px solid #bbb;padding:4px;text-align:center}
.rct-right{flex:.9;display:flex;gap:8px;align-items:flex-start}.rct-gk{flex:1}.rct-cg{flex:0 0 auto}
.rct-promo{margin:8px 0 0 52%}
.rct-sigs{display:flex;gap:20px;margin-top:26px;position:relative}.rct-sigs>div{flex:1;text-align:center}
.rct-sigs .nm{min-height:24px;font-family:"Segoe Script","Brush Script MT",cursive;font-size:15px}
.rct-stamp{position:absolute;right:30%;bottom:6px;flex:none!important}.rct-stamp img{height:70px;opacity:.85}
.rct td.below{background:#fbe3e3!important}.rct td.inline{background:#fff1c9!important}.rct td.above{background:#d9f2df!important}
.rct td.below,.rct td.inline,.rct td.above{-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* PTM proforma */
.pre{white-space:pre-wrap}
.ptm-t textarea{min-width:180px;font-size:13px}
.ptm-sig{margin-top:30px}.ptm-sig>div{position:relative}
.ptm-stamp{height:74px;display:flex;align-items:center;justify-content:center;border:0!important;padding:0!important;margin-top:6px}
.ptm-stamp img{max-height:70px;opacity:.85}
.ptm-sheet .ptm-stamp .note{border:1px dashed #9aa;border-radius:50%;width:70px;height:70px;display:flex;align-items:center;justify-content:center}

/* 4.4: bell, class picker, paper submission, smart import */
.bell{position:relative;font-size:16px;line-height:1}
.bell .bc{position:absolute;top:-6px;right:-6px;background:#d93025;color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:1px 6px}
.bell .bc[hidden]{display:none}
.nlist{display:flex;flex-direction:column;gap:4px;max-height:60vh;overflow:auto;margin:8px 0}
.nlist a{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.nlist a.new{background:var(--goldl);border-color:var(--gold);font-weight:600}
.nlist a small{color:var(--muted);white-space:nowrap}
tr.late td{background:var(--red)!important;color:var(--redt)} tr.late a{color:var(--redt)}
tr.mine td:first-child{box-shadow:inset 4px 0 0 var(--gold)}
.psteps{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.psteps span{display:flex;flex-direction:column;align-items:center;padding:6px 12px;border-radius:8px;background:#eef2ef;color:var(--muted);font-size:13px;min-width:110px}
.psteps span small{font-size:11px}
.psteps span.did{background:var(--grn);color:var(--grnt)} .psteps span.now{background:var(--goldl);color:var(--ambt);font-weight:700;outline:2px solid var(--gold)}
.psteps span.now.late{background:var(--red);color:var(--redt);outline-color:#d93025}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
@media (max-width:1000px){.pgrid{grid-template-columns:1fr}}
.pview{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:8px}
.ppage{position:relative;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.15);max-width:100%}
.ppage canvas{width:100%;height:100%;display:block}
.pov{position:absolute;inset:0}
.pview.drawing .pov{cursor:crosshair;touch-action:none}
.pno{position:absolute;bottom:-18px;right:0;font-size:11px;color:var(--muted)}
.pbox{position:absolute;border:2px solid #d93025;background:rgba(217,48,37,.07);border-radius:2px}
.pbox span{position:absolute;left:-2px;top:100%;background:#d93025;color:#fff;font-size:12px;padding:2px 6px;border-radius:0 0 4px 4px;max-width:320px;white-space:pre-wrap;z-index:2}
.pbox.done{border-color:#2e9a55;background:rgba(46,154,85,.06)} .pbox.done span{background:#2e9a55}
.pbox.new{border-style:dashed}
.pbox.flash{animation:pfl 1.2s}
@keyframes pfl{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 6px rgba(212,167,44,.6)}}
.pedit{position:absolute;z-index:5;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;width:280px;box-shadow:var(--shadow)}
.pnote{background:#fff;border:1px solid var(--line);border-left:4px solid #d93025;border-radius:8px;padding:8px 10px;margin-bottom:8px;cursor:pointer}
.pnote.done{border-left-color:#2e9a55;opacity:.75}
.ptl>div{border-left:2px solid var(--line);padding:4px 0 8px 10px;font-size:13px}
.pre{white-space:pre-wrap}
#pDraw.on{background:#d93025}
.gchk{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0}
.gchk label{display:flex;gap:4px;align-items:center;font-size:13px}
.grid4{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 12px}
.pact{border-left:4px solid var(--gold)}
.simp td select{width:auto;max-width:170px}
@media (max-width:800px){.top{flex-wrap:wrap;row-gap:6px}.top .tp{max-width:44vw;min-width:0}.top .who,#pageXlsx{display:none}.top .sp{flex-basis:0}}
/* 4.5: act as (roles) */
.actas{display:flex;align-items:center;gap:6px;font-size:13px;color:#cfe8d6;white-space:nowrap}
.actas .tp{margin-left:0;font-weight:600;background:var(--gold);color:#3a2b00;border-color:var(--gold)}
.rsg{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:12px}
.rsig{background:var(--gp)}
@media (max-width:800px){.actas{font-size:12px}.rsg{grid-template-columns:1fr}}
.urole{border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:6px;background:#fff;opacity:.75}
.urole.on{background:var(--gp);border-color:var(--g2);opacity:1}
.urole details summary,.rrow details summary{cursor:pointer;color:var(--g1);font-size:13px;margin-top:4px}
.gchk[hidden]{display:none}
/* 4.6: report cards on hold */
tr.held td.name,tr.held td.name b{color:#c62828;font-weight:700}
.holdbox tr.held td:first-child b{color:#c62828}
tr.held td{background:#fdecec}
tr.chk td{background:var(--amb)} tr.nf td{background:#f3f3f3;color:var(--muted)}
.holdbox{border-left:4px solid #c62828}
.heldcard{position:relative;opacity:.55}
.heldcard::after{content:"ON HOLD";position:absolute;top:40%;left:50%;transform:translate(-50%,-50%) rotate(-18deg);font:800 64px system-ui;color:#c62828;border:6px solid #c62828;padding:6px 26px;border-radius:12px;opacity:.8}
.pdfhost{position:fixed;left:-20000px;top:0;background:#fff;z-index:-1}
.nowrap{white-space:nowrap}
.slbar{height:10px;background:#eef2ef;border-radius:6px;overflow:hidden}.slbar i{display:block;height:100%;width:0;background:var(--g1);transition:width .3s}
tr.slnext td{background:var(--goldl)}