:root{--blue:#0575be;--navy:#0a4f86;--sky:#2a9bd8;--red:#e3242b;--orange:#ea5a2a;--bg:#f2f6fb;--ink:#14233a;--mute:#58595b;--line:#d3deeb;--card:#fff;
--grad:linear-gradient(90deg,#0575be,#2a9bd8 35%,#ea5a2a 70%,#e3242b)}
*{box-sizing:border-box}body{margin:0;font:14px/1.45 'Public Sans',Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3{font-family:'Bricolage Grotesque','Public Sans',sans-serif;margin:0}
.hidden{display:none!important}
.ribbon{height:4px;background:var(--grad)}
.login-art img{max-width:520px;width:100%}.login-art p{font-size:20px;color:var(--mute);margin:0}.login-card .emblem{width:72px;background:#fff;border-radius:50%;padding:6px}.login-card input{padding:10px;border-radius:6px;border:0;font-size:15px}.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--navy);color:#eaf3fc;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:10px;align-items:center;padding:16px}.brand img{width:40px;height:40px;background:#fff;border-radius:50%;padding:2px}
.brand b{font-family:'Bricolage Grotesque';font-size:18px;letter-spacing:.5px;display:block}.brand small{opacity:.75}
nav{flex:1;overflow:auto;padding:10px 8px}nav a{display:block;padding:9px 12px;border-radius:8px;color:#eaf3fc;text-decoration:none;cursor:pointer;margin-bottom:2px;font-weight:500}
nav a:hover{background:rgba(255,255,255,.1)}nav a.on{background:#fff;color:var(--navy);font-weight:700;box-shadow:inset 4px 0 0 var(--red)}
.me{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.15)}
.link{background:none;border:0;color:#9fd1f3;cursor:pointer;text-decoration:underline}
main{padding:20px 28px;min-width:0}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:3px solid transparent;border-image:var(--grad) 1}
.top h1{font-size:26px;color:var(--navy)}.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;cursor:pointer;font:600 13px 'Public Sans';text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--blue);color:var(--blue)}.btn.red{background:var(--red);border-color:var(--red);color:#fff}.btn.red:hover{background:#c81d25;color:#fff}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}.btn.sm{padding:4px 9px;font-size:12px}.btn.wa{background:#25d366;border-color:#25d366;color:#fff}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border-radius:10px;padding:14px 16px;box-shadow:0 1px 2px rgba(10,79,134,.1);border-top:4px solid var(--blue)}
.kpi:nth-child(2n){border-top-color:var(--red)}.kpi:nth-child(3n){border-top-color:var(--orange)}.kpi:nth-child(5n){border-top-color:var(--sky)}
.kpi small{color:var(--mute);font-weight:600}.kpi b{display:block;font:800 24px 'Bricolage Grotesque';margin-top:2px;font-variant-numeric:tabular-nums}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px}
.card{background:var(--card);border-radius:10px;padding:16px;box-shadow:0 1px 2px rgba(10,79,134,.1);margin-bottom:16px;overflow:auto}
.card h3{font-size:16px;color:var(--navy);margin-bottom:10px}
.bar{display:flex;align-items:center;gap:8px;margin:5px 0}.bar span{width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar i{display:block;height:14px;border-radius:4px;background:var(--grad);min-width:3px}.bar em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--mute)}
.tools{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
input,select,textarea{font:14px 'Public Sans';padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);width:100%}
.tools input,.tools select{width:auto}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(5,117,190,.25)}
table{border-collapse:collapse;width:100%}th{background:var(--navy);color:#fff;text-align:left;padding:8px 10px;font-weight:600;white-space:nowrap;position:sticky;top:0}
td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}tr:hover td{background:#f4f9fe}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tag{padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:#dcecf9;color:var(--navy)}.tag.g{background:#d8f2e5;color:#126b40}.tag.r{background:#fde0e1;color:#a5151b}.tag.o{background:#fdebd0;color:#8a5a00}
.empty{padding:28px;text-align:center;color:var(--mute)}
.modal{position:fixed;inset:0;background:rgba(10,30,50,.55);display:flex;align-items:flex-start;justify-content:center;padding:30px 12px;overflow:auto;z-index:50}
.sheet{background:#fff;border-radius:14px;width:min(860px,100%);box-shadow:0 12px 32px rgba(10,79,134,.3);overflow:hidden}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:var(--navy);color:#fff}.sheet-head h2{font-size:18px}
.x{background:none;border:0;color:#fff;font-size:26px;cursor:pointer}#mBody{padding:18px 20px}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.form label{display:flex;flex-direction:column;gap:3px;font-weight:600;font-size:12px;color:var(--mute)}
.form .wide{grid-column:1/-1}.form label.chk{flex-direction:row;align-items:center;gap:8px}.form label.chk input{width:auto}
.sect{grid-column:1/-1;font:700 15px 'Bricolage Grotesque';color:var(--navy);border-bottom:2px solid var(--line);padding-top:8px}
.foot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.layers{display:grid;grid-template-columns:40px 1fr 110px;gap:8px;align-items:center;grid-column:1/-1}
.toast{position:fixed;bottom:20px;right:20px;background:var(--navy);color:#fff;padding:12px 18px;border-radius:10px;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.25)}.toast.bad{background:var(--red)}
@media(max-width:860px){.app{grid-template-columns:1fr}.side{position:static;height:auto}.login{grid-template-columns:1fr}.login-art{display:none}main{padding:14px}}

.av{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#fff;color:#0a4f86;display:inline-flex;align-items:center;justify-content:center;font:700 13px 'Public Sans',sans-serif;flex:none}
.av.big{width:72px;height:72px;font-size:24px;border:3px solid #dcecf9}
#meName{display:flex;align-items:center;gap:8px;cursor:pointer;line-height:1.2;font-size:13px}#meName small{opacity:.75}
.prof{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.pinfo{flex:1;min-width:240px;line-height:1.7}.pinfo h3{margin-bottom:2px}

.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.subtabs a{padding:7px 16px;border-radius:99px;background:#fff;border:1px solid var(--line);cursor:pointer;font-weight:600;color:var(--navy)}
.subtabs a:hover{border-color:var(--blue)}.subtabs a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.filters .tools label{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--mute)}.sumline{padding-top:4px;color:var(--ink)}

.btn.danger{color:#c81d25;border-color:#f1b3b6}.btn.danger:hover{background:#c81d25;border-color:#c81d25;color:#fff}

.login{display:grid;grid-template-columns:1.25fr 1fr;min-height:100vh;background:#fff}
.login-hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(150deg,#06375e 0%,#0a4f86 38%,#0575be 70%,#2a9bd8 100%)}
.hero-blob{position:absolute;border-radius:50%;filter:blur(2px)}.hero-blob.b1{width:520px;height:520px;right:-160px;top:-140px;background:radial-gradient(circle,rgba(227,36,43,.55),rgba(227,36,43,0) 70%)}
.hero-blob.b2{width:560px;height:560px;left:-200px;bottom:-220px;background:radial-gradient(circle,rgba(234,90,42,.45),rgba(234,90,42,0) 70%)}
.hero-in{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;padding:44px 56px;gap:24px}
.hero-logo{background:#fff;border-radius:16px;padding:12px 20px;display:inline-block;align-self:flex-start;box-shadow:0 10px 30px rgba(0,0,0,.25)}.hero-logo img{height:46px;display:block}
.hero-mid{display:flex;flex-direction:column;gap:14px;max-width:560px}
.hero-mid h2{font-size:38px;line-height:1.1;font-weight:800;letter-spacing:-.5px}.hero-cap{margin:0;font-size:16px;opacity:.92;line-height:1.5}
.hero-badge{align-self:flex-start;background:linear-gradient(90deg,#e3242b,#ea5a2a);padding:6px 14px;border-radius:99px;font-weight:700;font-size:13px;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 6px 18px rgba(227,36,43,.45)}
.contest{border-radius:18px;padding:8px;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);box-shadow:0 18px 40px rgba(0,0,0,.35);transform:rotate(-1.2deg)}
.contest img{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.chips span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:6px 12px;border-radius:99px;font-size:13px;font-weight:600}
.hero-foot{font-size:18px;opacity:.85;letter-spacing:.4px}
.login-side{display:flex;align-items:center;justify-content:center;padding:32px;background:linear-gradient(180deg,#f7fbff,#eaf3fb)}
.login-card{width:min(400px,100%);background:#fff;border-radius:20px;padding:34px 32px;box-shadow:0 20px 50px rgba(10,79,134,.18);display:flex;flex-direction:column;gap:12px;border-top:5px solid transparent;border-image:var(--grad) 1}
.login-card .emblem{width:64px;height:64px;border-radius:50%;box-shadow:0 6px 18px rgba(10,79,134,.25)}.login-card h1{font-size:28px;color:var(--navy);margin-top:4px}.login-card .sub{margin:-6px 0 6px;color:var(--mute)}
.login-card label{display:flex;flex-direction:column;gap:5px;font-weight:600;color:var(--ink);font-size:13px}.login-card input{padding:11px 12px;font-size:15px}
.pw{position:relative;display:block}.pw input{padding-right:64px}.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--blue);font-weight:700;cursor:pointer;padding:6px 8px}
.err{color:#c81d25;min-height:18px;font-weight:600;font-size:13px}.btn.big{padding:12px 16px;font-size:15px;background:linear-gradient(90deg,#e3242b,#ea5a2a);border:0;box-shadow:0 8px 20px rgba(227,36,43,.35)}.btn.big:hover{filter:brightness(1.07);color:#fff}
.foot-note{color:var(--mute);text-align:center}
@media(max-width:900px){.login{grid-template-columns:1fr}.login-hero{display:none}.login-side{min-height:100vh}}

.login-card input{background:#f4f8fc;border:1px solid #c3d4e6}.login-card input:focus{background:#fff}

/* ---- pager, private tag, password chip ---- */
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 2px 0;color:var(--mute);font-size:12px}
.pager select{width:auto;padding:3px 6px}.pager .btn[disabled]{opacity:.4;cursor:default}.cnt{color:var(--mute);font-size:12px;margin-left:auto}
.tag.pv{background:#ece3fb;color:#4b2a99}.pwc{background:#fff7d6;border:1px dashed #d9b800;border-radius:4px;padding:1px 6px;font:600 12px Consolas,monospace;user-select:all}
.sheet-head .x.hidden{display:none}

/* ---- compact screen ---- */
body{font-size:13px;line-height:1.35}
.app{grid-template-columns:200px 1fr}
.brand{padding:10px 12px}.brand img{width:32px;height:32px}.brand b{font-size:16px}
nav{padding:6px}nav a{padding:6px 10px;margin-bottom:1px;font-size:13px}
.me{padding:9px 12px}
main{padding:12px 18px}.top{margin-bottom:10px;padding-bottom:8px}.top h1{font-size:21px}.actions{gap:6px}
.btn{padding:5px 10px;font-size:12px;border-radius:6px}.btn.sm{padding:2px 7px;font-size:11px}
.kpis{gap:9px;margin-bottom:11px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.kpi{padding:8px 11px;border-top-width:3px}.kpi b{font-size:18px}.kpi small{font-size:11px}
.grid2{gap:10px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card{padding:10px 12px;margin-bottom:10px;border-radius:8px}.card h3{font-size:14px;margin-bottom:6px}
.tools{gap:6px;margin-bottom:7px}
input,select,textarea{font-size:13px;padding:5px 8px}
th{padding:5px 8px;font-size:12px}td{padding:4px 8px;font-size:12.5px}
.subtabs{margin-bottom:9px}.subtabs a{padding:4px 12px;font-size:12px}
.form{gap:8px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.sect{font-size:13px;padding-top:4px}
#mBody{padding:12px 16px}.sheet-head{padding:9px 16px}.sheet-head h2{font-size:16px}
.tag{padding:1px 7px;font-size:11px}
.bar{margin:3px 0}.empty{padding:16px}.foot{margin-top:10px}
.me .link{white-space:nowrap}
.uc,input.uc,textarea.uc{text-transform:uppercase}

/* ===== COLOUR + EASIER READING ===== */
:root{--green:#12945a;--purple:#6b4fbb;--teal:#0e8f9b}
body{background:linear-gradient(180deg,#eaf3fc 0,#f4f7fb 260px) fixed;font-size:14.5px}
#busy{position:fixed;top:0;left:0;right:0;height:4px;z-index:200;background:linear-gradient(90deg,#0575be,#2a9bd8,#ea5a2a,#e3242b,#0575be);background-size:200% 100%;opacity:0;transition:opacity .15s;pointer-events:none}
#busy.on{opacity:1;animation:bz 1s linear infinite}@keyframes bz{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){#busy.on{animation:none}}
.side{background:linear-gradient(180deg,#0a4f86,#0b3f6c)}
nav a{display:flex;align-items:center;gap:10px}
nav a::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--dot,#2a9bd8)}
nav a:nth-child(5n+1){--dot:#2a9bd8}nav a:nth-child(5n+2){--dot:#ea5a2a}nav a:nth-child(5n+3){--dot:#5fd19a}nav a:nth-child(5n+4){--dot:#f2c14e}nav a:nth-child(5n){--dot:#c8a7ff}
nav a.on{box-shadow:inset 4px 0 0 var(--red)}
.top h1{background:linear-gradient(90deg,#0a4f86,#0575be 55%,#ea5a2a);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn.red{background:linear-gradient(135deg,#e3242b,#ea5a2a);border-color:transparent;box-shadow:0 2px 6px rgba(227,36,43,.25)}
.btn.blue{background:linear-gradient(135deg,#0575be,#2a9bd8);border-color:transparent;box-shadow:0 2px 6px rgba(5,117,190,.25)}
.btn{font-size:13.5px;padding:8px 14px;min-height:36px}.btn.sm{font-size:12.5px;padding:5px 10px;min-height:30px}
input,select,textarea{font-size:14.5px;padding:8px 10px}
th{font-size:13px;background:linear-gradient(180deg,#0a4f86,#0b4276)}td{font-size:13.5px;padding:7px 10px}
tbody tr:nth-child(even) td{background:#f7fafd}tr:hover td{background:#eaf4fd!important}
.card{border-top:3px solid transparent;border-image:linear-gradient(90deg,#0575be,#2a9bd8 40%,#ea5a2a 80%,#e3242b) 1;background:#fff}
.card h3{color:var(--navy)}
.kpi{border-top:0;color:#fff;box-shadow:0 4px 12px rgba(10,79,134,.18);position:relative;overflow:hidden}
.kpi small{color:rgba(255,255,255,.9);font-weight:600}.kpi b{font-size:26px}
.kpi::after{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.16)}
.kpi:nth-child(6n+1){background:linear-gradient(135deg,#0575be,#2a9bd8)}.kpi:nth-child(6n+2){background:linear-gradient(135deg,#12945a,#35c486)}
.kpi:nth-child(6n+3){background:linear-gradient(135deg,#ea5a2a,#f4903f)}.kpi:nth-child(6n+4){background:linear-gradient(135deg,#6b4fbb,#9a7fe0)}
.kpi:nth-child(6n+5){background:linear-gradient(135deg,#e3242b,#f0646a)}.kpi:nth-child(6n){background:linear-gradient(135deg,#0e8f9b,#38c0c9)}
.tag{padding:2px 10px;font-size:12px}.tag.g{background:#d8f2e5;color:#0f6a3e}.tag.r{background:#fde0e1;color:#a5151b}.tag.o{background:#fdebd0;color:#8a5a00}
.subtabs a.on{background:linear-gradient(135deg,#0a4f86,#0575be)}
.hint{display:block;margin-top:2px;font-weight:400;font-size:12px;color:var(--mute);line-height:1.3}
.cid{border-bottom:1px dotted var(--blue);cursor:help;font-weight:600;color:var(--navy)}
/* top bar: search, language, help */
.gbar{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.gs-wrap{position:relative;flex:1;max-width:520px}.gs-wrap input{border-radius:99px;padding-left:16px;background:#fff;border-color:#b9cde2}
.gs-list{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 26px rgba(10,79,134,.22);z-index:60;overflow:hidden}
.gs-list button{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;text-align:left;padding:8px 14px;border:0;border-bottom:1px solid #edf2f8;background:#fff;cursor:pointer;font:inherit;color:var(--ink)}
.gs-list button:hover{background:#eaf4fd}.gs-list button span{font-size:12.5px;color:var(--mute)}.gs-list .all{color:var(--blue);font-weight:700;flex-direction:row}.gs-list .none{padding:10px 14px;color:var(--mute)}
.gbar select{width:auto;border-radius:99px}
/* drop-down menus in the page header */
.menu{position:relative}.menu summary{list-style:none;cursor:pointer;user-select:none}.menu summary::-webkit-details-marker{display:none}
.menu-list{position:absolute;right:0;top:calc(100% + 4px);min-width:260px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 26px rgba(10,79,134,.22);z-index:60;padding:6px;display:grid;gap:2px}
.menu-list button{border:0;background:none;text-align:left;padding:9px 12px;border-radius:8px;font:600 13.5px 'Public Sans';color:var(--ink);cursor:pointer}.menu-list button:hover{background:#eaf4fd;color:var(--blue)}
.menu.admin summary{border-color:#f1b3b6;color:#a5151b}.menu.admin .menu-list button:hover{background:#fde0e1;color:#a5151b}
/* folding blocks on the dashboard */
.fold{padding:0}.fold>summary{cursor:pointer;list-style:none;padding:12px 16px;font:700 15.5px 'Bricolage Grotesque';color:var(--navy);display:flex;justify-content:space-between;gap:10px}
.fold>summary::-webkit-details-marker{display:none}.fold>summary::after{content:"+";font-size:20px;line-height:1;color:var(--orange)}.fold[open]>summary::after{content:"\2212"}
.fold>.pgw,.fold>table{padding:0 12px 12px;overflow-x:auto;display:block}
.fold-line{margin-bottom:14px}.fold-line>summary{cursor:pointer;font-weight:700;color:var(--blue);padding:4px 0}
/* draft bar, welcome card, tour, help, keys */
.draftbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff4dd;border:1px solid #f1c97a;border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:13.5px}
.welcome{background:linear-gradient(135deg,#eaf4fd,#fff4ea);border:0;border-image:none;border-left:6px solid var(--orange);border-radius:14px}.welcome ol{margin:6px 0 12px;padding-left:20px;line-height:1.8}
.helpl{margin:0 0 6px;padding-left:20px;line-height:1.7}.helpl li.first{font:700 17px 'Bricolage Grotesque';list-style:none;margin-left:-20px;color:var(--navy);margin-bottom:6px}
.keybox{display:inline-block;margin:4px 0;padding:6px 12px;background:#eef3f8;border-radius:8px;font:700 17px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;user-select:all}
.tour{position:fixed;z-index:90;left:50%;bottom:24px;transform:translateX(-50%);width:min(420px,calc(100% - 24px));background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 14px 40px rgba(10,30,50,.4);border-top:5px solid var(--orange)}
.tour h4{margin:2px 0;font:800 18px 'Bricolage Grotesque';color:var(--navy)}.tour p{margin:4px 0 10px}.tour small{color:var(--mute)}
nav a.tour-hl{outline:3px solid #ffd54a;outline-offset:1px;background:rgba(255,213,74,.25)}
@media(max-width:860px){nav a::before{display:none}.gbar{flex-wrap:wrap}.gs-wrap{flex:1 1 100%;max-width:none}.menu-list{right:auto;left:0}}

/* wide tables: text may wrap, numbers and buttons stay on one line, and the table scrolls inside its box instead of the whole page */
.pgw{overflow-x:auto}
td{white-space:normal;min-width:70px;vertical-align:middle;padding:6px 8px}th{padding:7px 8px}td.num,td.act,td .tag,td .btn,.cid{white-space:nowrap}
td.act{min-width:0}td .btn{margin:1px 0}
/* ===== MOBILE (phones) ===== */
@media(max-width:860px){
 .app{display:block}
 .side{position:sticky;top:0;z-index:30;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;box-shadow:0 2px 8px rgba(10,79,134,.35)}
 .side .ribbon{display:none}
 .brand{flex:1;padding:8px 12px}.brand img{width:30px;height:30px}.brand b{font-size:15px}.brand small{font-size:10px}
 .me{border:0;padding:6px 12px;gap:10px;font-size:12px}#meName small{display:none}
 nav{order:3;flex:0 0 100%;display:flex;gap:6px;overflow-x:auto;padding:6px 10px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 nav::-webkit-scrollbar{display:none}
 nav a{flex:none;margin:0;padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.12);font-size:13px;white-space:nowrap}
 nav a.on{box-shadow:none;background:#fff}
 main{padding:10px 12px 28px}
 .top{flex-direction:column;align-items:stretch;gap:8px}.top h1{font-size:19px}
 .actions .btn{flex:1 1 auto;text-align:center}
 .kpis{grid-template-columns:1fr 1fr;gap:8px}.kpi b{font-size:16px}
 .grid2{grid-template-columns:1fr}
 .tools{flex-direction:column;align-items:stretch}.tools input,.tools select,.tools .btn{width:100%}
 .filters .tools label{flex-direction:column;align-items:stretch;gap:2px}
 .subtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.subtabs a{flex:none;white-space:nowrap}
 input,select,textarea{font-size:16px;padding:9px 10px}
 .btn{padding:9px 12px;font-size:13px}.btn.sm{padding:7px 11px;font-size:12px}
 .form{grid-template-columns:1fr}
 .layers{grid-template-columns:30px 1fr}
 .modal{padding:0;align-items:stretch}.sheet{width:100%;min-height:100%;border-radius:0}
 .sheet-head{position:sticky;top:0;z-index:2}#mBody{padding:12px}
 .foot{position:sticky;bottom:0;background:#fff;padding:10px 0;flex-wrap:wrap}.foot .btn{flex:1}
 .toast{left:12px;right:12px;bottom:12px;text-align:center}
 .pager{flex-direction:column;gap:6px;align-items:flex-start}
 .card{overflow-x:auto}
 .pgw:not(.cards){overflow-x:auto;-webkit-overflow-scrolling:touch}
 .bar span{width:90px}
}
/* each case / row becomes a small card */
@media(max-width:640px){
 .pgw.cards table,.pgw.cards tbody{display:block;width:100%}
 .pgw.cards thead{display:none}
 .pgw.cards tr{display:block;background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:10px;margin:0 0 10px;padding:6px 10px;box-shadow:0 1px 2px rgba(10,79,134,.08)}
 .pgw.cards td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border-bottom:1px dashed #e4ecf5;white-space:normal;text-align:right;font-size:13px;word-break:break-word}
 .pgw.cards td:last-child{border-bottom:0}
 .pgw.cards td::before{content:attr(data-l);flex:none;max-width:45%;text-align:left;color:var(--mute);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.2px}
 .pgw.cards td.act{justify-content:flex-start;flex-wrap:wrap;gap:6px;padding-top:8px}.pgw.cards td.act::before{display:none}
 .pgw.cards tr:hover td{background:none}
 .pgw.cards td:empty{display:none}
}