/* Dashboard (SmartOLT-style), OLT pages, charts with hover. Uses the colour variables from index.html. */
.dashgrid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--s4,1rem); align-items:start; }
@media (max-width:980px) { .dashgrid { grid-template-columns:minmax(0,1fr); } }
.dashgrid .panel > h3 { display:flex; align-items:center; justify-content:flex-start; gap:.5rem; margin-top:0; }
.dashgrid .panel > h3 .sp { flex:1; }
.cards .card small { display:block; opacity:.92; }
.cardsub { display:flex; justify-content:space-between; gap:.5rem; font-size:.78rem; opacity:.92; margin-top:.15rem; }
.freshness { text-align:right; font-size:.8rem; color:var(--mute); margin:-.25rem 0 .6rem; display:flex; justify-content:flex-end; align-items:center; gap:.6rem; }
.freshness .led { width:.55rem; height:.55rem; border-radius:50%; background:var(--green); display:inline-block; margin-right:.25rem; }
.freshness .led.old { background:var(--amber); }

/* icon buttons in panel headers */
.ibtn { background:transparent; border:0; color:var(--mute); padding:.2rem .35rem; min-height:0; border-radius:var(--r-sm,6px); cursor:pointer; font-size:1rem; line-height:1; }
.ibtn:hover { color:var(--text); background:var(--inset); }
.ibtn svg { width:1.05rem; height:1.05rem; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.menu { position:relative; display:inline-block; }
.menu > .items { position:absolute; right:0; top:100%; z-index:30; margin-top:.2rem; min-width:11rem; background:var(--panel-solid); border:1px solid var(--line); border-radius:var(--r-sm,6px); box-shadow:0 8px 24px rgba(0,0,0,.3); padding:.25rem; }
.menu .items button { display:block; width:100%; text-align:left; background:transparent; color:var(--text); border-radius:4px; padding:.4rem .6rem; font-weight:400; min-height:0; }
.menu .items button:hover, .menu .items button.on { background:var(--inset); }
.menu .items button.on::before { content:"✓ "; color:var(--green); }

/* hover charts */
.mchart .chwrap { position:relative; }
.mchart .tip, .barchart .tip { position:absolute; pointer-events:none; background:var(--panel-solid); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:.4rem .6rem; font-size:.8rem; box-shadow:0 6px 18px rgba(0,0,0,.35); z-index:5; white-space:nowrap; }
.mchart .tip i, .barchart .tip i { display:inline-block; width:.6rem; height:.6rem; border-radius:2px; margin-right:.35rem; }
.mchart svg .xh { stroke:var(--mute); stroke-width:1; stroke-dasharray:3 3; }
.mchart svg .dotp { stroke:var(--panel-solid); stroke-width:1.5; }

/* bar chart */
.barchart { position:relative; }
.barchart svg { width:100%; height:auto; display:block; }
.barchart .gl { stroke:var(--line); stroke-width:1; }
.barchart .tx { fill:var(--mute); font-size:11px; }
.barchart rect.bb { fill:#2f6bff; transition:fill .12s; }
.barchart rect.bb:hover, .barchart rect.bb.hot { fill:#6c9bff; }
.barchart rect.hit { fill:transparent; }

/* PON outage window */
.outwin .osec { border-top:1px solid var(--line); }
.outwin .osec:first-of-type { border-top:0; }
.outwin .ohead { display:flex; align-items:center; gap:.5rem; padding:.55rem .2rem; cursor:pointer; user-select:none; }
.outwin .ohead:hover { background:var(--inset); }
.outwin .oico { width:1.25rem; text-align:center; }
.outwin .ostate { margin-left:.2rem; font-size:.85rem; }
.outwin .ostate.ok { color:var(--green); }
.outwin .ostate.bad { color:#fff; background:var(--red); border-radius:999px; padding:0 .5rem; font-size:.75rem; font-weight:700; }
.outwin .ostate.warn { color:#1a1200; background:var(--amber); border-radius:999px; padding:0 .5rem; font-size:.75rem; font-weight:700; }
.outwin .obody .okline { color:var(--mute); }
.outwin .orow { padding:.3rem 0; border-bottom:1px dashed var(--line); }
.outwin .orow:last-child { border-bottom:0; }

/* OLT card */
.oltcard .hd { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.oltcard .hd select { max-width:60%; }
.oltcard .pic { display:flex; justify-content:center; padding:.5rem 0; position:relative; }
.oltcard .pic svg { max-width:100%; height:auto; }
.oltcard .acts { display:flex; justify-content:center; gap:.9rem; margin:.25rem 0 .6rem; }
.oltcard .acts .ibtn { font-size:1.15rem; padding:.35rem .5rem; border:1px solid var(--line); }
.oltcard .acts .ibtn.blue { color:#5b9bff; } .oltcard .acts .ibtn.amber { color:var(--amber); } .oltcard .acts .ibtn.green { color:var(--green); }
.oltcard .upt { display:flex; align-items:center; gap:.5rem; background:var(--inset); border-radius:6px; padding:.45rem .7rem; font-size:.9rem; }
.oltcard .upt .sp { flex:1; }
.oltcard .upt i { color:var(--mute); font-style:italic; }
.oltcard .meters { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-top:.5rem; text-align:center; font-size:.8rem; color:var(--mute); }
.oltcard .meters b { display:block; color:var(--text); font-size:1rem; }

/* info feed */
.infolist { max-height:26rem; overflow:auto; margin:0 -.2rem; }
.infolist .it { display:flex; gap:.5rem; padding:.45rem .3rem; border-bottom:1px solid var(--line); font-size:.86rem; }
.infolist .it:last-child { border-bottom:0; }
.infolist .it .t { white-space:nowrap; color:var(--mute); font-style:italic; font-size:.78rem; margin-left:auto; padding-left:.5rem; }
.infolist .it .m { flex:1; overflow-wrap:anywhere; }
.infolist .it .u { color:var(--mute); }

/* OLT page */
.oltpage .toolbar { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; align-items:center; }
.oltpage table.kvt td:first-child { width:18rem; color:var(--mute); }
.oltpage .loadbar { display:flex; align-items:center; gap:.4rem; min-width:9rem; }
.oltpage .loadbar .bar { flex:1; height:.7rem; }
.oltpage .loadbar span { font-size:.75rem; color:var(--mute); white-space:nowrap; }
.oltpage .editgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.75rem; }
.oltpage .editgrid label { display:block; font-size:.8rem; color:var(--mute); margin-bottom:.2rem; }
.oltpage .editgrid input, .oltpage .editgrid textarea { width:100%; }
.sigavg { display:inline-flex; align-items:center; gap:.3rem; }

/* real device photographs */
.devphoto { background:transparent; border-radius:8px; overflow:hidden; }
.devphoto img { width:100%; height:100%; display:block; object-fit:cover; }
.devphoto.wide { aspect-ratio:3.4/1; } .devphoto.mid { aspect-ratio:1.5/1; } .devphoto.onu { aspect-ratio:1.25/1; width:100%; max-width:260px; }
.oltcard .pic .devphoto { width:100%; }
.detrow { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1rem; align-items:start; }
.detrow .devphoto.side { margin-top:2.2rem; }
@media (max-width:900px) { .detrow { grid-template-columns:minmax(0,1fr); } .detrow .devphoto.side { margin-top:0; } }

/* ---------- ONU list: compact, one line per ONU ---------- */
.onulist table { border-collapse:separate; border-spacing:0; }
.onulist th { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--mute); padding:.5rem .6rem; white-space:nowrap; }
.onulist td { padding:.38rem .6rem; vertical-align:middle; white-space:nowrap; border-bottom:1px solid var(--line); }
.onulist tr.row { cursor:pointer; transition:background .12s; } .onulist tr.row:hover td { background:color-mix(in srgb, var(--blue) 7%, transparent); }
.onulist .nmcell { display:flex; flex-direction:column; line-height:1.2; } .onulist .nmcell small { color:var(--mute); font-size:.74rem; font-variant-numeric:tabular-nums; max-width:14rem; overflow:hidden; text-overflow:ellipsis; }
.onulist .nmcell b { font-weight:600; max-width:16rem; overflow:hidden; text-overflow:ellipsis; }
.onulist .dim { color:var(--mute); opacity:.55; }
.onulist .chips { display:flex; gap:.25rem; flex-wrap:nowrap; } .chip { background:var(--inset); border:1px solid var(--line); border-radius:999px; padding:.05rem .5rem; font-size:.72rem; color:var(--text); }
.typechip { display:inline-block; max-width:12rem; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; font-size:.78rem; color:var(--mute); }
.vbtn { background:transparent; color:var(--link); border:1px solid var(--line); padding:.18rem .7rem; min-height:0; font-size:.78rem; border-radius:999px; font-weight:500; }
.vbtn:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.onulist .sigcell { flex-direction:row; gap:.3rem; align-items:center; } .onulist .sigcell small.note { display:none; }
.onulist .loading { padding:3rem 1rem; }
.busy { position:relative; opacity:.55; pointer-events:none; transition:opacity .15s; }
.busy::after { content:""; position:absolute; top:.9rem; right:1rem; width:1.4rem; height:1.4rem; border:3px solid var(--line); border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; }

/* ---------- ONU page: photo, status and signal boxes ---------- */
.imgrow { display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-bottom:var(--s3); }
.devphoto.onu { aspect-ratio:1.5/1; max-width:300px; border-radius:12px; box-shadow:none; }
.gauges { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; max-width:26rem; }
.gcard { min-width:0; padding:.55rem .8rem; border-radius:.6rem; }
.gcard > small { color:var(--mute); font-size:.76rem; }
.gval { margin-top:.1rem; line-height:1.15; } .gval small { font-size:.7rem; font-weight:500; color:var(--mute); }
.gbar { height:.42rem; margin-top:.5rem; }
.gnote { color:var(--mute); font-size:.78rem; margin-top:.4rem; max-width:26rem; }
.statbox { padding:.35rem .75rem; border-radius:.6rem; }
.setlink { font-size:.8rem; opacity:.9; }

/* ---------- icons ---------- */
svg.ic { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:middle; }
.ibtn svg.ic { width:1.05rem; height:1.05rem; stroke-width:1.8; }
button.eye, button.ico { color:var(--mute); } button.eye:hover, button.ico:hover { color:var(--text); }
button.eye { background:transparent; border:0; padding:.1rem .25rem; min-height:0; line-height:0; border-radius:6px; }
button.ico svg.ic { width:1rem; height:1rem; }
.oltcard .acts { display:flex; justify-content:center; gap:1.1rem; margin:.4rem 0 .9rem; }
.oact { background:transparent; border:0; padding:0; min-height:0; display:flex; flex-direction:column; align-items:center; gap:.35rem; color:var(--mute); font-weight:500; }
.oact .oc { width:2.9rem; height:2.9rem; border-radius:50%; display:grid; place-items:center; color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, filter .18s; }
.oact small { font-size:.72rem; letter-spacing:.02em; }
.oact:hover { background:transparent; color:var(--text); } .oact:hover .oc { transform:translateY(-3px) scale(1.04); filter:brightness(1.08); box-shadow:0 9px 22px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.3); }
.oact:active .oc { transform:translateY(0) scale(.97); }
@media (prefers-reduced-motion:reduce) { .oact .oc { transition:none; } }

/* ---------- living background: light on the GPU (only transform / translate animate), still when the user prefers no motion ---------- */
@property --f1 { syntax:'<color>'; inherits:true; initial-value:#2f6bff; }
@property --f2 { syntax:'<color>'; inherits:true; initial-value:#14b8a6; }
@property --f3 { syntax:'<color>'; inherits:true; initial-value:#7c3aed; }
body { --f1:#2f6bff; --f2:#14b8a6; --f3:#7c3aed; --fo:.34; transition:--f1 2.4s ease, --f2 2.4s ease, --f3 2.4s ease; }
body[data-mood="warn"] { --f1:#d98a10; --f2:#2f6bff; --f3:#e05d2b; }
body[data-mood="bad"] { --f1:#e0443e; --f2:#d98a10; --f3:#7c3aed; }
@media (prefers-color-scheme: light) { body { --fo:.22; } }
#bgfx { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; --mx:0; --my:0; contain:strict; }
#bgfx i { position:absolute; width:62vmax; height:62vmax; border-radius:50%; opacity:var(--fo); will-change:transform; transition:translate 1.2s cubic-bezier(.2,.7,.2,1); }
#bgfx i:nth-child(1) { left:-18vmax; top:-26vmax; background:radial-gradient(closest-side, var(--f1), transparent); translate:calc(var(--mx) * -26px) calc(var(--my) * -18px); animation:fx1 46s ease-in-out infinite alternate; }
#bgfx i:nth-child(2) { right:-22vmax; top:8vmax; background:radial-gradient(closest-side, var(--f2), transparent); translate:calc(var(--mx) * 34px) calc(var(--my) * 22px); animation:fx2 58s ease-in-out infinite alternate; }
#bgfx i:nth-child(3) { left:22vmax; bottom:-34vmax; background:radial-gradient(closest-side, var(--f3), transparent); translate:calc(var(--mx) * -18px) calc(var(--my) * 30px); animation:fx3 70s ease-in-out infinite alternate; }
@keyframes fx1 { to { transform:translate3d(16vmax, 10vmax, 0) scale(1.12); } }
@keyframes fx2 { to { transform:translate3d(-14vmax, 12vmax, 0) scale(.92); } }
@keyframes fx3 { to { transform:translate3d(-10vmax, -14vmax, 0) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { #bgfx i { animation:none; transition:none; } body { transition:none; } }

/* ===================== critique fixes ===================== */
/* skip link and screen-reader-only text */
.skip { position:fixed; left:.75rem; top:-4rem; z-index:100; background:var(--blue); color:#fff; padding:.6rem 1rem; border-radius:var(--r-sm); text-decoration:none; font-weight:600; transition:top .15s; }
.skip:focus { top:.75rem; }
.sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
main:focus { outline:none; }

/* navigation: real links and menu buttons, one look */
nav .nmbtn { background:transparent; color:var(--mute); border:0; border-bottom:2px solid transparent; border-radius:0; padding:.95rem .7rem; min-height:0; font:inherit; font-weight:500; letter-spacing:.01em; cursor:pointer; display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
nav .nmbtn:hover { color:var(--text); background:transparent; } nav .nmbtn[aria-expanded="true"] { color:var(--text); }
nav .nmbtn svg.ic { width:.75rem; height:.75rem; transition:transform .2s var(--ease); } nav .nmbtn[aria-expanded="true"] svg.ic { transform:rotate(180deg); }
nav a:focus-visible, nav .nmbtn:focus-visible, .navpop a:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
.navpop a:focus-visible { background:var(--inset); }

/* outage window: buttons, dots instead of side stripes */
.outwin .ohead { width:100%; background:transparent; color:var(--text); border:0; border-radius:0; text-align:left; font:inherit; font-weight:500; min-height:2.6rem; }
.outwin .ohead:hover { background:var(--inset); }
.outwin .t-acc-chevron { color:var(--mute); }
.outwin .obody { padding:.1rem .2rem .7rem 2.1rem; font-size:.9rem; }
.outwin .orow { position:relative; padding:.35rem 0 .35rem 1.1rem; --dot:var(--mute); }
.outwin .orow::before { content:""; position:absolute; left:.15rem; top:.95em; width:.5rem; height:.5rem; border-radius:50%; background:var(--dot); }
.outwin .orow.red { --dot:var(--red); } .outwin .orow.amber { --dot:var(--amber); } .outwin .orow.blue { --dot:#5b8cff; }
.outwin .offmark { display:inline-flex; position:relative; opacity:.7; } .outwin .offmark i { position:absolute; left:-1px; right:-1px; top:50%; height:1.5px; background:currentColor; transform:rotate(-40deg); }
.linkbtn { background:transparent; color:var(--link); border:0; padding:.4rem 0; min-height:0; font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.linkbtn:hover { background:transparent; color:var(--text); }
.notice { background:var(--inset); border:1px solid var(--line); padding:.7rem .9rem; border-radius:var(--r-sm); margin:.5rem 0; color:var(--text); }

/* OLT card actions: one neutral surface; colour is kept for status */
.oact .oc { background:linear-gradient(160deg, var(--chip), var(--inset)); color:var(--text); border:1px solid var(--line); box-shadow:0 3px 10px rgba(0,0,0,.22); }
.oact.blue .oc, .oact.amber .oc, .oact.green .oc, .oact.slate .oc { background:linear-gradient(160deg, var(--chip), var(--inset)); }
.oact:hover .oc { border-color:color-mix(in srgb, var(--blue) 60%, var(--line)); color:var(--link); }
.oact small { font-size:.78rem; }

/* list filters, chips, selection */
.fbtn { min-height:2.25rem; display:inline-flex; align-items:center; gap:.4rem; } .cnt { background:var(--blue); color:#fff; border-radius:999px; padding:0 .45rem; font-size:.75rem; font-weight:700; }
.fpanel .frow .sp { flex:1; }
.chiprow { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; } .chiprow[hidden] { display:none; }
.chipx { background:var(--inset); color:var(--text); border:1px solid var(--line); border-radius:999px; padding:.2rem .7rem; min-height:0; font-size:.8rem; font-weight:500; }
.chipx:hover { border-color:var(--red); background:var(--inset); }
.bulkbar { position:sticky; top:3.4rem; z-index:20; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; padding:.6rem .9rem; margin:0 0 var(--s4); background:var(--panel-solid); border:1px solid color-mix(in srgb, var(--blue) 55%, var(--line)); border-radius:var(--r); box-shadow:var(--shadow-sm); }
.bulkbar[hidden] { display:none; }
.onulist th.selcol, .onulist td:first-child { width:2.2rem; padding-right:0; }
input[type=checkbox].rowsel, #sel_all { width:1.1rem; height:1.1rem; cursor:pointer; accent-color:var(--blue); }

/* a floor of 12px for supporting text */
small, .note, .tx, .legend2 small, .cardsub, .nmcell small, .typechip, .chip, .sigcell small, .infolist .it .t, .gcard > small, .gnote, .oact small, th { font-size:max(.75rem, .85em); }
.onulist th { font-size:.75rem; }
.chart .tx, .barchart .tx, svg.ich .tx { font-size:12px; }
.chip, .typechip { font-size:.78rem; }

/* keyboard focus on the custom chart */
svg.ich:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }

/* dialogs and toasts use the transitions from motion.css, not older keyframes */
.modal.t-modal { animation:none; }
.toast.t-toast { animation:none !important; }

/* background: two quiet fields; amber / red only when there is a reason */
#bgfx i:nth-child(3) { display:none; }
body { --fo:.26; }
@media (prefers-color-scheme: light) { body { --fo:.18; } }

/* phones and touch: bigger targets, no sideways scrolling, a lighter ONU list */
@media (pointer:coarse), (max-width:700px) {
  main button, main select, main input:not([type=checkbox]):not([type=radio]), .vbtn, .ibtn, .chipx, .linkbtn { min-height:44px; }
  main a.setlink, main a[data-onu], main a[data-go], main a[data-oltpage], #f_more, #f_ie { display:inline-flex; align-items:center; min-height:44px; padding:0 .25rem; }
  input[type=checkbox].rowsel, #sel_all { width:1.5rem; height:1.5rem; }
  .onulist td, .onulist th { padding-top:.55rem; padding-bottom:.55rem; }
  .vbtn { padding:.3rem 1rem; }
}
@media (max-width:700px) {
  .onulist th:nth-child(6), .onulist td:nth-child(6), .onulist th:nth-child(7), .onulist td:nth-child(7), .onulist th:nth-child(9), .onulist td:nth-child(9),
  .onulist th:nth-child(10), .onulist td:nth-child(10) { display:none; }
  .onupage .onutop { grid-template-columns:minmax(0,1fr); }
  .onupage dl.kv2 .r { grid-template-columns:minmax(0,1fr); gap:.1rem; } .onupage dl.kv2 dt { text-align:left; color:var(--mute); font-size:.8rem; }
  .onupage dd, .onupage dl.kv2 dd { min-width:0; overflow-wrap:anywhere; }
  .gauges { max-width:none; } .devphoto.onu { max-width:100%; }
  .fpanel .frow .sp { display:none; }
  .oltcard .acts { gap:.6rem; }
}

nav .navbtn { background:transparent; color:var(--mute); border:0; border-radius:0; padding:.95rem .7rem; min-height:0; font:inherit; font-weight:500; cursor:pointer; white-space:nowrap; }
nav .navbtn:hover { color:var(--text); background:transparent; }
nav .navbtn:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }

nav a, .navpop a { text-decoration:none; }

@media (max-width:700px) { .onupage .onutop .onuright { order:-1; } }

/* the round action buttons draw only their circle: no filled button behind it */
button.oact, button.oact:hover, button.oact:active, button.oact:focus-visible { background:transparent; box-shadow:none; }
button.oact:focus-visible .oc { outline:2px solid var(--blue); outline-offset:3px; }
.oact small { color:var(--mute); } .oact:hover small { color:var(--text); }

/* Font Awesome glyphs, flat like the reference portal */
i.fa.ic { stroke:none; line-height:1; vertical-align:middle; width:auto; }
.oact .oc { width:auto; height:auto; background:none !important; border:0 !important; box-shadow:none !important; font-size:1.5rem; padding:.1rem .35rem; }
.oact:nth-child(1) .oc { color:#3b82f6; } .oact:nth-child(2) .oc { color:#f59e0b; } .oact:nth-child(3) .oc { color:#22a447; } .oact:nth-child(4) .oc { color:var(--mute); }
.oact:hover .oc { transform:translateY(-2px); filter:brightness(1.2); box-shadow:none !important; color:inherit; }
.oact:nth-child(1):hover .oc { color:#60a5fa; } .oact:nth-child(2):hover .oc { color:#fbbf24; } .oact:nth-child(3):hover .oc { color:#34d399; } .oact:nth-child(4):hover .oc { color:var(--text); }
.oact .oc i.fa { font-size:1.5rem !important; }
nav .nmbtn i.fa { margin-left:.2rem; transition:transform .2s var(--ease); } nav .nmbtn[aria-expanded="true"] i.fa { transform:rotate(180deg); }
.t-acc-chevron i.fa { font-size:.95rem; }
.oico i.fa { font-size:1rem; width:1.2rem; text-align:center; }
button.ibtn, button.ibtn.amber, button.ibtn.amber:hover { background:transparent; box-shadow:none; }
button.ibtn.amber { color:#f59e0b; } button.ibtn:hover { color:var(--text); background:var(--chip); }
i.stic { font-size:1.3rem; width:1.4rem; text-align:center; line-height:1; }
i.sigic { font-size:1.25rem; line-height:1; }
.sigcell svg, td .statbox svg { max-width:none; }
.cards .card { position:relative; }
.cards .card .kic { position:absolute; left:.85rem; top:.8rem; font-size:2.4rem; line-height:1; color:#fff; opacity:.95; pointer-events:none; }
.cards .card .n { text-align:right; }
.cards .card > .cardsub { margin-top:.2rem; }
/* cut-out photos keep their own proportions */
.devphoto.wide, .devphoto.mid { aspect-ratio:auto; }
.devphoto.wide img, .devphoto.mid img { height:auto; object-fit:contain; }
.devphoto.mid img { max-height:150px; }
.tabs button i.fa, .t-tab i.fa { margin-right:.45rem; width:1em; text-align:center; font-size:.95em; }
.vlanadd { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .8rem; margin:.4rem 0 1rem; }
.vlanadd input { background:var(--inset); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:.45rem .6rem; min-height:2.2rem; }
.vlanadd input:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
button.sm { padding:.3rem .7rem; min-height:0; font-size:.85rem; }

/* OLT console (every page of the OLT's own interface) */
.con { display:grid; grid-template-columns:15.5rem minmax(0,1fr); gap:1rem; align-items:start; }
.con-nav { display:block !important; flex-direction:column; position:sticky; top:.5rem; max-height:calc(100vh - 2rem); overflow:auto; background:var(--inset); border:1px solid var(--line); border-radius:12px; padding:.4rem; }
.con-nav summary { cursor:pointer; padding:.5rem .6rem; font-weight:600; border-radius:8px; list-style:none; display:flex; justify-content:space-between; }
.con-nav summary::after { content:"\f107"; font-family:FontAwesome; opacity:.6; transition:transform .2s var(--ease); }
.con-nav details[open] > summary::after { transform:rotate(180deg); }
.con-nav summary:hover { background:var(--chip); }
.con-it { display:block; width:100%; text-align:left; background:transparent; border:0; box-shadow:none; color:var(--mute); padding:.4rem .7rem; min-height:0; font-weight:500; border-radius:8px; font-size:.88rem; }
.con-it.sub { padding-left:1.6rem; font-size:.85rem; }
.con-it:hover { background:var(--chip); color:var(--text); }
.con-it.on { background:color-mix(in srgb, var(--blue) 22%, transparent); color:var(--text); box-shadow:0 0 0 1px color-mix(in srgb, var(--blue) 50%, transparent) inset; }
.con-hint { padding:.4rem .6rem; }
.con-main { min-width:0; }
.con-head { display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; } .con-head h4 { margin:0; font-size:1.05rem; } .con-head .sp { flex:1; }
.warnbox { border-color:#b97a00; background:color-mix(in srgb, #e08a00 14%, var(--inset)); margin-bottom:.8rem; }
.cform { overflow-x:auto; font-size:.9rem; }
.cform table { border-collapse:collapse; margin:.5rem 0 1rem; max-width:100%; }
.cform th { background:var(--inset); text-align:left; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:var(--mute); }
.cform th, .cform td { border:1px solid var(--line); padding:.35rem .6rem; vertical-align:middle; }
.cform h1, .cform h2, .cform h3, .cform h4 { font-size:.95rem; margin:1rem 0 .3rem; }
.cform input[type=text], .cform input[type=password], .cform select, .cform textarea { background:var(--inset); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:.3rem .5rem; min-height:2rem; max-width:100%; }
.cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
.cform input:disabled, .cform select:disabled { opacity:.55; }
.cform input[type=checkbox], .cform input[type=radio] { width:1.05rem; height:1.05rem; accent-color:var(--blue); vertical-align:middle; margin-right:.25rem; }
.cform .ocb { padding:.3rem .8rem; min-height:0; font-size:.85rem; margin:.15rem .25rem .15rem 0; }
.cform .ocb-del { background:#b33a3a; }
.cform .ocb:disabled { opacity:.45; cursor:not-allowed; }
.oc-hide { display:none !important; }
@media (max-width:900px) { .con { grid-template-columns:minmax(0,1fr); } .con-nav { position:static; max-height:16rem; } }
.con-nav details { display:block !important; margin:0 0 .2rem; }
.con-nav summary { width:100%; box-sizing:border-box; }
.makerlogo { display:flex; justify-content:center; margin:.2rem 0 .5rem; } .makerlogo img { height:2.6rem; width:auto; background:#eef3fa; border-radius:8px; padding:.15rem .6rem; } .makerlogo b { font-size:1.35rem; letter-spacing:.06em; }
.detrow .makerlogo { justify-content:flex-end; margin-top:0; }
.oltcard .pic { display:flex !important; flex-direction:column; align-items:center; gap:.35rem; }
.oltcard .pic .makerlogo { width:100%; margin:0; } .oltcard .pic .devphoto { width:100%; }
.oltcard .pic { gap:.8rem; } .oltcard .pic .makerlogo img { height:2.1rem; }

/* ---------- living background: deep night sky, slow light beams, a fading dot grid, a glow on the horizon (transform-only motion, no filters) ---------- */
#bgfx { background:radial-gradient(130% 95% at 50% -12%, #14307a 0%, #0b1a3f 34%, #070f25 62%, #050a18 100%); }
#bgfx i { mix-blend-mode:screen; }
#bgfx .grid { position:absolute; inset:0; background-image:radial-gradient(rgba(150,190,255,.20) 1px, transparent 1.3px); background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 18%, #000 0%, transparent 72%); mask-image:radial-gradient(ellipse 80% 70% at 50% 18%, #000 0%, transparent 72%); opacity:.5; text-decoration:none; }
#bgfx b { position:absolute; top:-35%; height:175%; width:30vmax; pointer-events:none; will-change:transform; transform:rotate(27deg);
  background:linear-gradient(90deg, transparent 0%, rgba(96,150,255,.07) 30%, rgba(170,215,255,.17) 50%, rgba(96,150,255,.07) 70%, transparent 100%); animation:bgbeam 52s ease-in-out infinite alternate; }
#bgfx b:nth-of-type(1) { left:4%; }
#bgfx b:nth-of-type(2) { left:38%; width:20vmax; opacity:.75; animation-duration:68s; animation-delay:-24s; }
#bgfx b:nth-of-type(3) { left:70%; width:36vmax; opacity:.6; animation-duration:80s; animation-delay:-40s; }
@keyframes bgbeam { from { transform:rotate(27deg) translateX(-9vmax); } to { transform:rotate(27deg) translateX(11vmax); } }
#bgfx .horizon { position:absolute; left:-10%; right:-10%; bottom:-24vh; height:48vh; background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(20,184,166,.20), rgba(47,107,255,.10) 45%, transparent 72%); text-decoration:none; }
@media (max-width:760px) { #bgfx b:nth-of-type(3), #bgfx .horizon { display:none; } #bgfx b { width:44vmax; } #bgfx .grid { background-size:24px 24px; } }
@media (prefers-reduced-motion: reduce) { #bgfx b { animation:none; } }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) #bgfx { background:linear-gradient(180deg, #f3f7fd, #e8eef8); } :root:not([data-theme="dark"]) #bgfx b, :root:not([data-theme="dark"]) #bgfx .grid, :root:not([data-theme="dark"]) #bgfx .horizon { display:none; } }

/* the OLT picture on a lit stage, the maker's logo crisp above it */
.oltcard .pic { padding:.7rem .4rem .5rem; isolation:isolate; }
.oltcard .pic::before { content:""; position:absolute; inset:18% 4% 4%; z-index:-1; background:radial-gradient(ellipse 60% 55% at 50% 60%, rgba(70,130,255,.34), rgba(20,184,166,.14) 55%, transparent 75%); }
.oltcard .pic .devphoto { filter:drop-shadow(0 12px 16px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(255,255,255,.25)); transform:scale(1.06); }
.oltcard .pic .devphoto img { image-rendering:auto; }
.makerlogo img { height:2.3rem !important; padding:.25rem .8rem !important; background:linear-gradient(#ffffff,#eaf0fa) !important; border-radius:10px !important; box-shadow:0 4px 14px rgba(0,0,0,.35); }
/* panels let a little of the sky through */
:root { --panel:rgba(18,28,50,.62); }
.panel, .card, .oltcard { backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
@media (max-width:760px) { .panel, .oltcard { backdrop-filter:none; -webkit-backdrop-filter:none; } :root { --panel:rgba(18,28,50,.78); } }
#bgfx b { opacity:1; } #bgfx b:nth-of-type(1) { filter:none; }


/* ================= phones and small tablets ================= */
.navtog, nav .mnav, nav .mgrp { display:none; }
@media (max-width:760px) {
  html { -webkit-text-size-adjust:100%; }
  body { padding-bottom:env(safe-area-inset-bottom); }
  nav { flex-wrap:wrap; overflow:visible; padding:0 .9rem; padding-left:max(.9rem, env(safe-area-inset-left)); padding-right:max(.9rem, env(safe-area-inset-right)); min-height:3.4rem; }
  nav > b { margin-right:auto; padding:.8rem 0; font-size:1rem; display:flex; align-items:center; gap:.5rem; }
  nav > b img.brandlogo { height:1.6rem; }
  nav > .note { display:none; }
  .navtog { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:0 .9rem; background:var(--chip); color:var(--text); border:1px solid var(--line); border-radius:12px; box-shadow:none; font-weight:600; }
  nav > a, nav > .nmbtn, nav > .who, nav > #logout, nav > .sp, nav > .mnav, nav > .mgrp { display:none !important; }
  nav.open { padding-bottom:.8rem; max-height:100dvh; overflow-y:auto; }
  nav.open > a[data-v], nav.open > .mnav, nav.open > #logout, nav.open > .who { display:flex !important; width:100%; align-items:center; box-sizing:border-box; }
  nav.open > a[data-v] { padding:.85rem .6rem; border-bottom:1px solid var(--line); min-height:44px; }
  nav.open > .mnav { padding:.75rem .6rem .75rem 1.6rem; min-height:44px; border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent); }
  nav.open > .mgrp { display:block !important; width:100%; padding:.9rem .6rem .25rem; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
  nav.open > .who { padding:.7rem .6rem; }
  nav.open > #logout { justify-content:center; margin-top:.4rem; min-height:46px; }
  nav .nmbtn { display:none !important; }
  body.navopen { overflow:hidden; }

  main { padding-left:max(.75rem, env(safe-area-inset-left)); padding-right:max(.75rem, env(safe-area-inset-right)); }
  /* touch size and no zoom-on-focus on iOS */
  button, .btn, select, input, textarea { font-size:16px; }
  button:not(.ocb):not(.sm):not(.mini):not(.navtog):not(.oc):not(.oact) , select:not(.mini) { min-height:44px; }
  input[type=checkbox], input[type=radio] { min-width:22px; min-height:22px; }

  /* the five figures: two columns, compact, the last one across */
  .cards { grid-template-columns:repeat(2, minmax(0,1fr)); gap:.6rem; }
  .cards .card { padding:.7rem .75rem; min-height:0; border-radius:14px; }
  .cards .card:last-child { grid-column:1 / -1; }
  .cards .card .kic { font-size:1.6rem; left:.7rem; top:.6rem; }
  .cards .card .n { font-size:1.9rem; }
  .cards .card .cardsub { gap:.3rem .6rem; flex-wrap:wrap; font-size:.75rem; }
  .cards .card:not(:last-child) { padding-top:.6rem; }
  .freshness { flex-wrap:wrap; justify-content:center; gap:.2rem .6rem; font-size:.78rem; }

  /* panels, headers, charts */
  .panel { padding:.8rem .8rem; border-radius:14px; }
  .panel h3 { flex-wrap:wrap; gap:.4rem .6rem; }
  .panel h3 .menu, .panel h3 select, .panel h3 .ibtn { flex:none; }
  .dashgrid { gap:.8rem; }
  .oltcard .pic { padding:.5rem 0 .3rem; }
  .oact .oc { font-size:1.5rem; }
  .makerlogo img { height:2rem !important; }
  .toolbar, .tabs { flex-wrap:wrap; gap:.4rem; }
  .tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs button { flex:none; }
  .t-tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } .t-tabs::-webkit-scrollbar { display:none; } .t-tab { flex:none; }

  /* tables scroll sideways inside their panel, never the page */
  .tablewrap, .panel > table, .cform, .scrollx { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { font-size:.85rem; }
  .modal { width:calc(100vw - 1.2rem) !important; max-width:none !important; max-height:92dvh; }
  .modal.wide { width:calc(100vw - 1.2rem) !important; }
  .modal .mb { max-height:calc(92dvh - 4rem); overflow:auto; }
  .cf-actions { flex-direction:column-reverse; } .cf-actions button { width:100%; }
  .toast, #toasts { left:.6rem; right:.6rem; max-width:none; }

  /* the console on a phone: the page menu is a short scrolling list above the page */
  .con-nav { max-height:13rem; }
  .con-head { flex-wrap:wrap; }
  .cform table { display:block; overflow-x:auto; max-width:100%; }
  .cform input[type=text], .cform input[type=password], .cform select { max-width:100%; min-height:44px; }
  .cform .ocb { min-height:44px; padding:.5rem 1rem; }
  .vlanadd { flex-direction:column; align-items:stretch; }
  .vlanadd input { width:100% !important; }
}
@media (max-width:420px) {
  .cards .card .n { font-size:1.65rem; }
  .cards .card { font-size:.85rem; }
  .panel h3 { font-size:.9rem; }
  nav > b { font-size:.95rem; }
}
@media (max-width:760px) {
  main .cards { grid-template-columns:repeat(2, minmax(0,1fr)); }
  main .cards .card:last-child { grid-column:1 / -1; }
  .navtog { margin-left:auto; }
  nav.open > .who { order:90; } nav.open > #logout { order:99; }
}
[hidden] { display:none !important; }
/* the ONU list as cards on a phone: status, name and port, signal, type, View */
@media (max-width:760px) {
  table.cardrows { display:block; width:100%; }
  table.cardrows > tbody, table.cardrows > tr { display:block; }
  table.cardrows tr:first-child { display:none; }
  table.cardrows tr.row { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; grid-template-areas:"sel st nm sg" "sel st on sg" "sel st ty vw"; gap:.1rem .6rem; align-items:center; padding:.65rem .35rem; border-bottom:1px solid var(--line); }
  table.cardrows td { display:block; border:0; padding:0; min-width:0; }
  table.cardrows td:nth-child(1) { grid-area:sel; } table.cardrows td:nth-child(2) { grid-area:st; }
  table.cardrows td:nth-child(3) { grid-area:nm; overflow:hidden; } table.cardrows td:nth-child(4) { grid-area:on; font-size:.8rem; color:var(--mute); }
  table.cardrows td:nth-child(7) { grid-area:sg; justify-self:end; } table.cardrows td:nth-child(9) { grid-area:ty; font-size:.78rem; color:var(--mute); }
  table.cardrows td:nth-child(11) { grid-area:vw; justify-self:end; }
  table.cardrows td:nth-child(5), table.cardrows td:nth-child(6), table.cardrows td:nth-child(8), table.cardrows td:nth-child(10) { display:none; }
  table.cardrows .sigcell { flex-direction:row; }
  .toppager { flex-wrap:wrap; gap:.4rem; } .toppager .pgs { overflow-x:auto; white-space:nowrap; max-width:100%; }
}
@media (max-width:760px) { table.cardrows td:nth-child(7), table.cardrows td:nth-child(9) { display:block !important; } table.cardrows tr.row td:nth-child(4) { font-size:.8rem; } }
@media (max-width:760px) { main { overflow-x:clip; } .devphoto { max-width:100%; overflow:hidden; } .devphoto.onu { margin-inline:auto; } }

/* ================= theme: translucent blue glass (replaces the dark navy; applies in light and dark system settings) ================= */
html:root {
  color-scheme:dark;
  --bg:#0f4bc4; --panel:rgba(255,255,255,.15); --panel-solid:#14439f; --inset:rgba(6,32,96,.30);
  --line:rgba(255,255,255,.26); --text:#ffffff; --mute:rgba(228,240,255,.80); --link:#cfe7ff;
  --blue:#0c3a9e; --chip:rgba(255,255,255,.18); --hover:rgba(255,255,255,.12); --glow:rgba(255,255,255,.10);
  --green:#17a34a; --red:#d93636; --amber:#f0a020; --grey:#506a9c; --ok:#6ff0a0; --warn:#ffc860; --bad:#ff8c8c;
  --shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 12px 32px rgba(4,24,80,.30); --shadow-sm:0 1px 0 rgba(255,255,255,.25) inset, 0 5px 16px rgba(4,24,80,.25);
}
html:root #bgfx { background:radial-gradient(90% 60% at 82% -8%, rgba(120,215,255,.75), transparent 62%), radial-gradient(80% 70% at 6% 12%, rgba(70,120,255,.65), transparent 64%), linear-gradient(165deg, #0d3fae 0%, #1565e0 34%, #1c86ea 66%, #36b2f2 100%) !important; display:block !important; }
html:root #bgfx i { opacity:.30; mix-blend-mode:soft-light; }
html:root #bgfx .grid { display:block !important; background-image:radial-gradient(rgba(255,255,255,.34) 1px, transparent 1.3px); opacity:.55; }
html:root #bgfx b { display:block !important; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,.20) 50%, rgba(255,255,255,.05) 70%, transparent 100%); }
html:root #bgfx .horizon { display:block !important; background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(255,255,255,.30), rgba(120,215,255,.14) 45%, transparent 72%); }
@media (max-width:760px) { html:root #bgfx b:nth-of-type(3), html:root #bgfx .horizon { display:none !important; } }
html:root .panel, html:root .oltcard, html:root .gcard, html:root .chbox { background:var(--panel); border:1px solid var(--line); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); box-shadow:var(--shadow); }
@media (max-width:760px) { html:root { --panel:rgba(10,52,150,.55); } html:root .panel, html:root .oltcard { -webkit-backdrop-filter:none; backdrop-filter:none; } }
html:root nav { background:rgba(10,56,160,.55); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%); box-shadow:0 1px 0 rgba(255,255,255,.28), 0 8px 22px rgba(4,24,80,.25); }
html:root nav a.active, html:root nav .nmbtn.active { border-bottom-color:#fff; }
html:root .navpop, html:root .modal, html:root .con-nav { background:rgba(14,60,160,.94); border-color:var(--line); }
html:root .cards .card, html:root .card { border:1px solid rgba(255,255,255,.34); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px rgba(4,24,80,.32); }
/* controls on glass */
html:root input[type=text], html:root input[type=password], html:root input[type=number], html:root input:not([type]), html:root select, html:root textarea { background:rgba(6,32,96,.34); border-color:rgba(255,255,255,.30); color:#fff; }
html:root input::placeholder, html:root textarea::placeholder { color:rgba(228,240,255,.55); }
html:root button:not(.grey):not(.red):not(.green):not(.ibtn):not(.oact):not(.navtog):not(.con-it):not(.pgn):not(.t-tab) { background:#0b2f86; border:1px solid rgba(255,255,255,.35); color:#fff; }
html:root button.grey, html:root .btn.grey { background:rgba(255,255,255,.20); border:1px solid rgba(255,255,255,.28); color:#fff; }
html:root button.green { background:#12a152; } html:root button.red, html:root .ocb-del { background:#d23a3a; }
html:root .pgn.on, html:root .t-tabs-pill { background:rgba(255,255,255,.28); box-shadow:0 0 0 1px rgba(255,255,255,.5) inset; }
html:root .con-it.on { background:rgba(255,255,255,.22); box-shadow:0 0 0 1px rgba(255,255,255,.5) inset; }
html:root table th, html:root .cform th { background:rgba(6,32,96,.30); color:rgba(235,245,255,.9); }
html:root table td, html:root table th, html:root .cform td, html:root .cform th { border-color:rgba(255,255,255,.20); }
html:root .note, html:root small { color:var(--mute); }
html:root .notice { background:rgba(6,32,96,.40); border-color:rgba(255,255,255,.30); }
html:root .t-tabs { background:rgba(6,32,96,.28); border-color:rgba(255,255,255,.26); }
html:root svg.ich .gl { stroke:rgba(255,255,255,.22); } html:root svg.ich .tx, html:root .chart .tx { fill:rgba(235,245,255,.85); }
html:root .oltcard .pic::before { background:radial-gradient(ellipse 60% 55% at 50% 60%, rgba(255,255,255,.40), rgba(120,215,255,.18) 55%, transparent 75%); }
html:root .tabs button.on, html:root .tabs button[aria-selected="true"] { background:rgba(255,255,255,.26); color:#fff; }
html:root nav .nmbtn, html:root nav .navbtn, html:root .ohead, html:root button.lg, html:root button.ico, html:root .oact, html:root .ibtn, html:root button.pgn, html:root .eye, html:root .vbtn { background:transparent !important; border-color:transparent; box-shadow:none; color:var(--text); }
html:root button.lg { background:rgba(255,255,255,.14) !important; border:1px solid rgba(255,255,255,.28); }
html:root button.lg.off { opacity:.5; }
html:root button.ico { border:1px solid rgba(255,255,255,.22); } html:root button.ico.on, html:root button.ico[aria-pressed="true"] { background:rgba(255,255,255,.28) !important; }
html:root .ohead:hover { background:rgba(255,255,255,.12) !important; }
html:root .vbtn, html:root button[data-onu] { background:rgba(255,255,255,.18) !important; border:1px solid rgba(255,255,255,.34); }
html:root button.pgn { background:rgba(255,255,255,.14) !important; border:1px solid rgba(255,255,255,.25); } html:root button.pgn.on { background:rgba(255,255,255,.34) !important; }
html:root .chwrap { background:rgba(6,32,96,.28); border-radius:12px; }
html:root .osec { background:rgba(6,32,96,.22); border:1px solid rgba(255,255,255,.22); border-radius:12px; }
html:root .navtog { background:rgba(255,255,255,.20); border:1px solid rgba(255,255,255,.35); color:#fff; }
html:root nav .nmbtn { border:0; border-bottom:2px solid transparent; border-radius:0; }
html:root nav .nmbtn.active { border-bottom-color:#fff; }
html:root nav .nmbtn { border:0 !important; border-bottom:2px solid transparent !important; } html:root nav .nmbtn.active { border-bottom:2px solid #fff !important; }

/* ---- darker glass: deeper blue sky, panels tinted navy so text has contrast ---- */
html:root { --bg:#08307f; --panel:rgba(6,28,88,.56); --panel-solid:#0b2f7c; --inset:rgba(3,16,60,.46); --line:rgba(255,255,255,.22); --mute:rgba(232,243,255,.86); --link:#d6eaff; --chip:rgba(255,255,255,.14); --hover:rgba(255,255,255,.10); }
html:root #bgfx { background:radial-gradient(90% 60% at 82% -8%, rgba(70,170,255,.55), transparent 62%), radial-gradient(80% 70% at 6% 12%, rgba(40,90,230,.55), transparent 64%), linear-gradient(165deg, #06236b 0%, #0a3a98 36%, #0e56b8 68%, #1678cf 100%) !important; }
html:root #bgfx b { background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.035) 30%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.035) 70%, transparent 100%); }
html:root #bgfx .grid { opacity:.38; }
html:root #bgfx .horizon { background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(120,200,255,.22), rgba(60,140,240,.10) 45%, transparent 72%); }
html:root nav { background:rgba(4,22,74,.66); }
html:root .navpop, html:root .modal, html:root .con-nav { background:rgba(6,32,96,.96); }
html:root .panel, html:root .oltcard, html:root .gcard, html:root .chbox { box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 12px 30px rgba(2,12,50,.38); }
html:root table th, html:root .cform th { background:rgba(2,14,56,.42); }
html:root .t-tabs, html:root .osec, html:root .chwrap { background:rgba(2,14,56,.34); }
html:root .notice { background:rgba(2,14,56,.5); }
html:root .oltcard .pic::before { background:radial-gradient(ellipse 60% 55% at 50% 60%, rgba(120,190,255,.34), rgba(40,110,230,.16) 55%, transparent 75%); }
@media (max-width:760px) { html:root { --panel:rgba(5,28,92,.72); } }
html:root .unset, html:root .note.unset, html:root dd .note { color:rgba(232,243,255,.78); opacity:1; }
html:root .kv2 dt, html:root dl dt { color:#fff; }