/* =====================================================================
   Rotaflex remote portal — design system (shared by every screen)
   Same visual language as the Rotaflex unit controller HMI:
   graphite surfaces, Weatherford red as the only brand accent,
   Bebas Neue wordmark, Roboto UI, Roboto Mono for numbers.
   Up = blue, down = green, ok/warn/crit reserved for state.
   ===================================================================== */
:root{
  --bg:#0f1316; --surface:#191e22; --surface2:#20262b; --inset:#14181b; --border:#2b3338; --border2:#3a444b;
  --text:#eef1f3; --muted:#9aa4ab; --faint:#7d8a92;
  --brand:#ce1141; --brand-soft:rgba(206,17,65,.16); --brand-ink:#ff5a7e;
  --up:#4c8dff; --down:#2fbf71; --cur:#ffffff; --prev:#7d868c; --dh:#ff7a63;
  --ok:#2fbf71; --warn:#f5b43c; --crit:#ff4d5e; --info:#6cb6ff; --off:#7d868c; --nc:#ff9a4d;
  --metal:#8b979f; --metal2:#5c676e; --steel:#b9c3c9;
  --grid:rgba(255,255,255,.06); --grid2:rgba(255,255,255,.11);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --hdr:52px; --sub:44px; --nav-m:60px;
  --r:12px; --r-sm:8px;
  /* categorical pens (fixed order, never cycled) */
  --p1:#4c8dff; --p2:#2fbf71; --p3:#f5b43c; --p4:#c77dff; --p5:#ff7a63; --p6:#3fc7c7; --p7:#e6e6e6; --p8:#ff6fae;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#e9ecee; --surface:#ffffff; --surface2:#f4f6f7; --inset:#f7f8f9; --border:#d3d9dd; --border2:#bcc4ca;
  --text:#191e22; --muted:#56616a; --faint:#6b7684;
  --brand-soft:rgba(206,17,65,.10); --brand-ink:#b30d37;
  --up:#1f63d6; --down:#13884b; --cur:#191e22; --prev:#9aa3a9; --dh:#d9472f;
  --ok:#13884b; --warn:#b57500; --crit:#d0213a; --info:#1f63d6; --off:#87929a; --nc:#c25a0e;
  --metal:#6f7b83; --metal2:#9aa5ac; --steel:#56626a;
  --grid:rgba(0,0,0,.07); --grid2:rgba(0,0,0,.12);
  --shadow:0 18px 50px rgba(20,30,40,.18);
  --p1:#1f63d6; --p2:#13884b; --p3:#b57500; --p4:#8a3fd1; --p5:#d9472f; --p6:#108a8a; --p7:#3a444b; --p8:#c2336f;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);font-family:Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);font-size:13px;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font-family:inherit;color:inherit}
a{color:var(--info);text-decoration:none}
.mono{font-family:"Roboto Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
svg text{font-family:Roboto,Arial,sans-serif}

/* ---------- app frame ---------- */
#app{height:100%;display:flex;flex-direction:column}
#hdr{height:var(--hdr);flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--surface);border-bottom:1px solid var(--border);position:relative;z-index:20;padding-top:env(safe-area-inset-top,0px);height:calc(var(--hdr) + env(safe-area-inset-top,0px))}
.wm{display:flex;align-items:center;gap:9px;padding-right:12px;border-right:1px solid var(--border);height:34px;cursor:pointer;flex:none}
.wm img{width:30px;height:30px;border-radius:3px;display:block}
.wm b{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:25px;letter-spacing:.06em;line-height:1;display:block}
.wm small{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:-1px;white-space:nowrap}
.crumb{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto}
.crumb .back{width:30px;height:30px;border-radius:8px;border:1px solid var(--border2);background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.crumb .back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.crumb .wn{line-height:1.12;min-width:0}
.crumb .wn b{font-size:15px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:7px}
.crumb .wn span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gnav{display:flex;align-items:center;gap:2px;margin:0 auto;min-width:0}
.gnav a,.gnav button{display:flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:8px;color:var(--muted);font:500 12.5px Roboto,sans-serif;background:none;border:0;cursor:pointer;white-space:nowrap;position:relative}
.gnav a svg,.gnav button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}
.gnav a:hover,.gnav button:hover{color:var(--text);background:var(--surface2)}
.gnav a.on{color:var(--text)}
.gnav a.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-9px;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}
.gnav .sepv{width:1px;height:20px;background:var(--border);margin:0 4px}
.hright{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.hbtn{position:relative;height:32px;min-width:32px;padding:0 8px;border-radius:8px;border:1px solid var(--border2);background:var(--surface);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font:500 12px Roboto,sans-serif;white-space:nowrap}
.hbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.hbtn:hover{color:var(--text)}
.hbtn .cnt{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;border-radius:8px;background:var(--crit);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--surface)}
.hbtn .cnt.w{background:var(--warn);color:#111}
.hbtn.user.in{color:var(--text);border-color:color-mix(in srgb,var(--up) 55%,transparent)}
.hbtn em{font-style:normal;font-size:10px;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--up) 20%,transparent);color:var(--up)}
.clock{font-size:12px;color:var(--muted)}
.wxchip{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.wxchip svg{width:18px;height:18px}

/* well sub-navigation (tabs) */
#sub{height:var(--sub);flex:none;display:flex;align-items:center;gap:2px;padding:0 12px;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
#sub::-webkit-scrollbar{display:none}
#sub:empty{display:none}
#sub a{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;color:var(--muted);font:500 12.5px Roboto,sans-serif;white-space:nowrap;position:relative}
#sub a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
#sub a:hover{background:var(--surface2);color:var(--text)}
#sub a.on{color:var(--text);background:var(--surface2);box-shadow:inset 0 -2px 0 var(--brand)}
#sub .sepv{width:1px;height:18px;background:var(--border);margin:0 6px;flex:none}
#sub .sp{flex:1}

#main{flex:1;min-height:0;overflow:auto;position:relative}
.page{padding:12px;display:flex;flex-direction:column;gap:10px;min-height:100%}
.page.fill{height:100%;min-height:0}
#mnav{display:none}

/* ---------- primitives ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);min-width:0;min-height:0;position:relative}
.card.pad{padding:10px 12px}
.ttl{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ttl.sm{font-size:10px}
.sub{font-size:12px;color:var(--muted)}
.faint{color:var(--faint)}
.muted{color:var(--muted)}
.sp{flex:1}
.row{display:flex;align-items:center;gap:8px}
.row.wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:8px}
.grid{display:grid;gap:10px}
.ch{display:flex;align-items:center;gap:8px;min-height:22px}
.ch .ttl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .u{font-size:11px;color:var(--faint)}
.ibtn{width:26px;height:26px;border-radius:7px;border:1px solid transparent;background:none;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0}
.ibtn:hover{border-color:var(--border2);color:var(--text)}
.ibtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.st-ok{color:var(--ok)} .st-warn{color:var(--warn)} .st-crit{color:var(--crit)} .st-info{color:var(--info)} .st-off{color:var(--off)}
.big{font-size:30px;font-weight:500;line-height:1}
.big small,.v small{font-size:.5em;color:var(--muted);font-weight:400;margin-left:3px}

/* buttons */
.btn{background:var(--surface);border:1px solid var(--border2);color:var(--text);border-radius:9px;font:500 13px Roboto,sans-serif;padding:0 14px;height:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--surface2)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.btn.p{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.p:hover{filter:brightness(1.08)}
.btn.g{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.btn.r{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 50%,transparent);background:color-mix(in srgb,var(--crit) 10%,transparent)}
.btn.y{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.btn.ghost{color:var(--muted);background:none}
.btn.sm{height:30px;font-size:12px;padding:0 10px;border-radius:8px}
.btn[disabled],.btn.dis{opacity:.45;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--border2);border-radius:8px;overflow:hidden;flex:none}
.seg button{background:none;border:0;border-right:1px solid var(--border);color:var(--muted);font:500 12px Roboto,sans-serif;padding:0 10px;height:30px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.seg button:last-child{border-right:0}
.seg button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface2);color:var(--text);box-shadow:inset 0 -2px 0 var(--brand)}
.sw{display:inline-block;vertical-align:middle;width:34px;height:20px;border-radius:10px;background:var(--border2);position:relative;cursor:pointer;flex:none;border:0;padding:0}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
.sw.on{background:var(--up)} .sw.on::after{left:17px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);border:1px solid var(--border2);border-radius:8px;padding:0 9px;height:30px;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:2px 8px;border-radius:999px;border:1px solid var(--border2);color:var(--muted);white-space:nowrap;line-height:16px}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 11%,transparent)}
.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 11%,transparent)}
.chip.crit{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 45%,transparent);background:color-mix(in srgb,var(--crit) 11%,transparent)}
.chip.info{color:var(--info);border-color:color-mix(in srgb,var(--info) 45%,transparent);background:color-mix(in srgb,var(--info) 11%,transparent)}
.chip.off{color:var(--off)}
.sev{font-size:10.5px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:999px;white-space:nowrap;text-transform:uppercase}
.sev.crit{color:var(--crit);background:color-mix(in srgb,var(--crit) 14%,transparent)}
.sev.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.sev.info{color:var(--info);background:color-mix(in srgb,var(--info) 14%,transparent)}
.sev.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.sev.nc{color:var(--nc);background:color-mix(in srgb,var(--nc) 14%,transparent)}
.sev.off{color:var(--off);background:color-mix(in srgb,var(--off) 14%,transparent)}

/* state badge (one look everywhere) */
.stb{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;white-space:nowrap}
.stb i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--c,var(--off));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--off)) 22%,transparent)}
.stb.run{--c:var(--ok)} .stb.idle{--c:var(--info)} .stb.alarm{--c:var(--crit)} .stb.warn{--c:var(--warn)} .stb.stop{--c:var(--off)} .stb.off{--c:var(--nc)}   /* no comms = orange (had data, lost it) */
.stb.alarm i{animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 0%,transparent)}}

/* inputs */
.fld label{display:block;font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inp{display:flex;align-items:center;background:var(--inset);border:1px solid var(--border2);border-radius:8px;height:36px;padding:0 10px;min-width:0}
.inp input,.inp select,.inp textarea{flex:1;min-width:0;width:100%;background:none;border:0;color:var(--text);font:500 13.5px Roboto,sans-serif;outline:none}
.inp input.mono{font:500 14px "Roboto Mono",monospace}
.inp select option{background:var(--surface);color:var(--text)}
.inp u{text-decoration:none;font-size:12px;color:var(--muted);margin-left:6px;white-space:nowrap}
.inp:focus-within{border-color:var(--brand)}
.inp.ta{height:auto;padding:8px 10px}
.inp.ta textarea{resize:vertical;min-height:70px;font-weight:400}
.fld .h{font-size:11px;color:var(--faint);margin-top:3px}
.fld.ro .inp{background:transparent;border-style:dashed}
.search{display:flex;align-items:center;gap:6px;background:var(--inset);border:1px solid var(--border2);border-radius:8px;height:30px;padding:0 9px;min-width:0}
.search svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2;flex:none}
.search input{background:none;border:0;outline:none;color:var(--text);font:400 12.5px Roboto,sans-serif;min-width:0;width:100%}

/* tables */
.tblw{overflow:auto;min-height:0}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
table.t th{position:sticky;top:0;z-index:2;background:var(--surface);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 9px;border-bottom:1px solid var(--border);white-space:nowrap;cursor:default;line-height:1.25;vertical-align:bottom}
table.t th.r,table.t td.r{text-align:right}
table.t th.c,table.t td.c{text-align:center}
table.t th small{display:block;font-size:9.5px;color:var(--faint);letter-spacing:.02em;text-transform:none}
table.t th.sort{cursor:pointer}
table.t th.sort:hover{color:var(--text)}
table.t th .ar{color:var(--brand-ink);margin-left:3px}
table.t td{padding:7px 9px;border-bottom:1px solid var(--grid);white-space:nowrap;vertical-align:middle}
table.t tr.click{cursor:pointer}
table.t tr.click:hover td{background:var(--surface2)}
table.t td.fix,table.t th.fix{position:sticky;left:0;z-index:1;background:var(--surface)}
table.t th.fix{z-index:3}
table.t tr.click:hover td.fix{background:var(--surface2)}
table.t .grp th{font-size:9.5px;color:var(--faint);border-bottom:1px solid var(--grid);padding-top:4px;padding-bottom:3px;text-align:center}
table.t .grp th.g{border-left:1px solid var(--border)}
table.t td.gl,table.t th.gl{border-left:1px solid var(--border)}

/* bars */
.bar{height:5px;border-radius:3px;background:color-mix(in srgb,var(--muted) 22%,transparent);position:relative;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--c,var(--info))}

/* KPI tile */
.kpi{padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden;position:relative}
.kpi .l{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:6px;white-space:nowrap}
.kpi .l span{overflow:hidden;text-overflow:ellipsis}
.kpi .v{font-size:22px;font-weight:500;line-height:1.15;white-space:nowrap}
.kpi .v small{font-size:12px}
.kpi .f{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:auto}
.kpi.flag::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--c,var(--warn))}
.kgrp{display:flex;flex-direction:column;gap:6px;min-width:0}
.kgrp>.ttl{font-size:10px;padding-left:2px}

/* overlays */
.ovl{position:fixed;inset:0;background:rgba(5,8,10,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.dlg{width:min(480px,100%);max-height:calc(100% - 32px);overflow:auto;background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.dlg.wide{width:min(860px,100%)}
.dlg h2{margin:0;font-size:17px;font-weight:500}
.dlg .ft{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.fs{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px));gap:8px}
.fs .fsh{display:flex;align-items:center;gap:10px}
.fs .fsb{flex:1;min-height:0;position:relative}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
#toast div{background:var(--surface2);border:1px solid var(--border2);border-left:3px solid var(--c,var(--info));border-radius:9px;padding:9px 14px;font-size:13px;box-shadow:var(--shadow);animation:tin .2s}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
#help{position:fixed;z-index:130;max-width:300px;background:var(--surface2);border:1px solid var(--border2);border-radius:9px;padding:8px 10px;font-size:12px;line-height:1.45;color:var(--text);box-shadow:var(--shadow);pointer-events:none;display:none}
#help b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.menu{position:fixed;z-index:110;min-width:200px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:5px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.menu button,.menu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;background:none;border:0;color:var(--text);font:400 13px Roboto,sans-serif;text-align:left;cursor:pointer;white-space:nowrap}
.menu button:hover,.menu a:hover{background:var(--surface2)}
.menu svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.7;flex:none}
.menu hr{border:0;border-top:1px solid var(--border);margin:4px 2px}
.menu .mh{padding:8px 10px 6px;font-size:12px;color:var(--muted)}
.menu .mh b{display:block;color:var(--text);font-size:14px;font-weight:500}

/* chart chrome (shared by every chart in every screen) */
.chart{display:flex;flex-direction:column;padding:8px 10px 6px;min-height:0}
.chart .cb{flex:1;min-height:0;position:relative}
.chart svg.plot{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ctip{position:absolute;pointer-events:none;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;padding:6px 9px;font-size:11.5px;box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:6;white-space:nowrap;display:none}
.ctip .tt{font-size:11px;color:var(--muted);margin-bottom:3px}
.ctip .ln{display:flex;align-items:center;gap:6px}
.ctip .ln i{width:9px;height:3px;border-radius:2px;flex:none}
.ctip .ln b{margin-left:auto;padding-left:12px;font-weight:500;font-family:"Roboto Mono",monospace}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.legend span i{width:12px;height:3px;border-radius:2px}
.legend span.off{opacity:.4}

/* empty / skeleton */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:30px;color:var(--muted);text-align:center}
.skel{background:linear-gradient(90deg,var(--surface) 0,var(--surface2) 50%,var(--surface) 100%);background-size:200% 100%;animation:sk 1.3s infinite;border-radius:8px}
@keyframes sk{to{background-position:-200% 0}}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px;border:2px solid var(--bg)}
*::-webkit-scrollbar-track{background:transparent}

/* ---------- responsive: tablet & phone ---------- */
@media (max-width:1500px){ #hdr.inwell .gnav a span.lbl{display:none} #hdr.inwell .gnav a{padding:0 9px} }
@media (max-width:1100px){
  .gnav a span.lbl,.gnav button span.lbl{display:none}
  .gnav a{padding:0 9px}
  .wm small{display:none}
}
@media (max-width:760px){
  :root{--hdr:50px}
  body{font-size:13.5px}
  .wm{border-right:0;padding-right:0}
  .wm b{font-size:22px}
  .gnav{display:none}
  .hright .clock,.hright .wxchip,.hright .hide-m,#hdrBell{display:none}
  .crumb .wn b .stb span{display:none}
  .crumb .wn b{font-size:14px}
  #sub{padding:0 8px}
  #sub a{padding:0 10px}
  #sub a span.lbl{display:none}
  #sub a.on span.lbl{display:inline}
  #main{padding-bottom:calc(var(--nav-m) + env(safe-area-inset-bottom,0px))}
  .page{padding:10px}
  #mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--nav-m) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface);border-top:1px solid var(--border)}
  #mnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font:500 10.5px Roboto,sans-serif;position:relative}
  #mnav a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
  #mnav a.on{color:var(--text)}
  #mnav a.on::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;background:var(--brand);border-radius:0 0 3px 3px}
  #mnav .cnt{position:absolute;top:6px;left:calc(50% + 6px);min-width:16px;height:16px;border-radius:8px;background:var(--crit);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
  .hide-m{display:none!important}
  .dlg{padding:14px}
}
@media (min-width:761px){ .only-m{display:none!important} }

/* print (report) */
@media print{
  body{overflow:visible;background:#fff}
  #hdr,#sub,#mnav,.noprint{display:none!important}
  #main{overflow:visible}
}

/* phone landscape (≤900×500): one-row header — hide the clock, keep «Last data» on one line */
@media (max-height:500px) and (max-width:900px){ #hdrClock{display:none} #subLast{white-space:nowrap} }