/* country flags: Windows draws a flag as two letters, so a small font with the flags is used for those characters only (Twemoji Country Flags, CC BY 4.0, see docs/THIRD-PARTY.md) */
@font-face{font-family:"Twemoji Country Flags";unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E007F;src:url("/s/flags.woff2") format("woff2");font-display:swap}
:root{--bg:#071334;--bg2:#0B1A3D;--bg3:#12234A;--ink:#EAF3FB;--mut:#A9BCD6;--line:rgba(127,219,255,.22);--acc:#00B4EF;--gold:#F2A900;--warn:#E07A3B;--crit:#D9534F;--card:rgba(11,26,61,.75);--card2:rgba(4,12,38,.5);--inp:#050E26;--ctl:#5A7FA8;--cmd:#BFE8FA;--rings:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%2300B4EF' stroke-width='1.2' opacity='.14'%3E%3Ccircle cx='120' cy='120' r='110'/%3E%3Ccircle cx='120' cy='120' r='74'/%3E%3Ccircle cx='120' cy='120' r='38'/%3E%3C/g%3E%3C/svg%3E");--rings-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%232B2A8C' stroke-width='1.2' opacity='.07'%3E%3Ccircle cx='120' cy='120' r='110'/%3E%3Ccircle cx='120' cy='120' r='74'/%3E%3Ccircle cx='120' cy='120' r='38'/%3E%3C/g%3E%3C/svg%3E");--r:10px;--f:"Twemoji Country Flags","Segoe UI","Noto Sans Arabic",Tahoma,system-ui,sans-serif}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg) var(--rings);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.7}
a{color:var(--acc)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.w{width:min(1600px,96vw);margin-inline:auto}
header.top{background:var(--bg2);border-bottom:1px solid var(--line);padding:10px 0}
header.top .w{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
.brand{font-weight:800;color:var(--acc);text-decoration:none;font-size:1.15rem}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--mut);padding:6px 14px;border-radius:999px;border:1px solid transparent;font-size:.95rem}
nav a:hover,nav a.on{color:var(--ink);border-color:var(--line)}
.who{color:var(--mut);font-size:.88rem;display:flex;gap:10px;align-items:center}
h1{font-size:clamp(1.6rem,4vw,2.3rem);margin:26px 0 6px;line-height:1.25}
h2{font-size:1.25rem;margin:26px 0 10px;border-inline-start:4px solid var(--acc);padding-inline-start:10px}
.sub{color:var(--mut);margin:0 0 18px;max-width:46em}
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:16px 18px;margin:0 0 16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 18px}
.tile{border:1px solid var(--line);border-top:4px solid var(--acc);border-radius:var(--r);background:var(--card);padding:12px 14px}
.tile.warn{border-top-color:var(--gold)}.tile.bad{border-top-color:var(--crit)}
.tile b{display:block;font-size:1.7rem;line-height:1.2;font-variant-numeric:tabular-nums}
.tile span{color:var(--mut);font-size:.88rem}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{padding:9px 10px;text-align:start;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--mut);font-weight:600;font-size:.85rem}
.box{overflow:auto}
.chip{display:inline-block;font-size:.8rem;font-weight:700;padding:2px 11px;border-radius:999px}
.chip.ok{background:rgba(25,169,116,.2);color:#4FD6A5}.chip.wait{background:rgba(242,169,0,.2);color:var(--gold)}.chip.off{background:rgba(169,187,194,.18);color:var(--mut)}.chip.bad{background:rgba(217,83,79,.22);color:#F2A29F}
button,.btn{font:inherit;cursor:pointer;border-radius:999px;border:1px solid var(--ctl);background:transparent;color:var(--ink);padding:8px 20px;text-decoration:none;display:inline-block}
button.pri,.btn.pri{background:var(--acc);color:#03202E;border-color:var(--acc);font-weight:800}
button.dng{border-color:var(--crit);color:#F2A29F}
button:disabled{opacity:.5;cursor:not-allowed}
label{display:block;margin:12px 0 4px;color:var(--mut);font-size:.92rem}
input,select{font:inherit;width:100%;max-width:420px;background:var(--inp);color:var(--ink);border:1px solid var(--ctl);border-radius:8px;padding:10px 12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.msg{margin:12px 0;padding:10px 14px;border-radius:8px;border:1px solid var(--line)}
.msg.err{border-color:var(--crit);background:rgba(217,83,79,.1)}.msg.ok{border-color:var(--acc);background:rgba(0,180,239,.1)}.msg.warn{border-color:var(--gold);background:rgba(242,169,0,.08)}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;padding:0;list-style:none}
.steps li{flex:1 1 150px;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;color:var(--mut);font-size:.92rem}
.steps li b{display:block;color:var(--ink)}
.steps li.cur{border-color:var(--acc);background:rgba(0,180,239,.08)}
.steps li.done{border-color:rgba(0,180,239,.5)}
.steps li.done b::after{content:" ✔";color:var(--acc)}
pre.cmd{direction:ltr;text-align:left;background:var(--inp);border:1px solid var(--line);border-radius:8px;padding:12px;overflow:auto;font-size:.82rem;line-height:1.5;color:var(--cmd);white-space:pre-wrap;word-break:break-all;margin:8px 0}
.qr{background:#fff;padding:8px;border-radius:10px;display:inline-block}
.qr img{display:block;width:210px;height:210px}
.code{direction:ltr;display:inline-block;font-family:Consolas,monospace;font-size:1.6rem;letter-spacing:4px;background:var(--inp);border:1px dashed var(--acc);border-radius:8px;padding:6px 16px}
.two{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.center{max-width:430px;margin:9vh auto}
.loading{padding:40px 0}
.foot{color:var(--mut);font-size:.85rem;margin:36px 0 40px;border-top:1px solid var(--line);padding-top:14px}
@media(max-width:700px){.two{grid-template-columns:1fr}}
.gauge{display:flex;align-items:center;gap:12px;margin:10px 0}
.gauge .gl{min-width:110px;color:var(--mut)}
.gauge meter{flex:1;height:16px}
.gauge .gv{min-width:56px;text-align:left;font-weight:700}
.chart{width:100%;height:auto;display:block;direction:ltr}
.chart .grid{stroke:rgba(169,187,194,.25);stroke-width:1}
.chart .axis{fill:var(--mut);font-size:11px}
.chart .line{fill:none;stroke:var(--acc);stroke-width:2;stroke-linejoin:round}
.chart .area{fill:rgba(0,180,239,.15);stroke:none}
.recs{padding-inline-start:22px}
.recs li{margin:10px 0}
details.card summary{cursor:pointer}
h3{margin:22px 0 8px}
.fix{margin:6px 0;padding:8px 12px;border-inline-start:3px solid var(--acc);background:rgba(0,180,239,.07);border-radius:8px;line-height:1.7}
.fix code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:4px;direction:ltr;unicode-bidi:embed}
.verify{margin:8px 0 14px}
.verify button{font-size:.9rem}
.big{font-size:1.25rem}
.card .brand{display:block;font-weight:800;font-size:1.3rem;color:var(--acc);margin:0 0 6px}
@media(max-width:640px){
  table.devt thead{display:none}
  table.devt,table.devt tbody,table.devt tr,table.devt td{display:block;width:100%}
  table.devt tr{border:1px solid var(--line);border-radius:10px;margin:10px 0;padding:6px 12px}
  table.devt td{border:0;padding:4px 0;display:flex;justify-content:space-between;align-items:center;gap:10px}
  table.devt td::before{content:attr(data-l);color:var(--mut);font-size:.85rem}
  table.devt td:first-child::before,table.devt td:last-child::before{content:none}
  table.devt td:first-child{display:block}
}
.conn-top{display:grid;grid-template-columns:1fr minmax(180px,42%);gap:14px;align-items:center}
.conn-head{display:flex;align-items:center;gap:12px;min-width:0}
.isp-logo{border-radius:10px;background:#fff;padding:4px;object-fit:contain;flex:none}
.conn-title{min-width:0}
.conn-map{min-height:90px}
.wmap{width:100%;height:auto;display:block;background:transparent}
.wmap path{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.14);stroke-width:.5;vector-effect:non-scaling-stroke}
.wmap path.on{fill:rgba(0,180,239,.38);stroke:#00B4EF;stroke-width:1.6}
.wmap .pin{fill:#F2A900}
.wmap .pulse{fill:none;stroke:#F2A900;stroke-width:1.2;opacity:.7}
dl.kv{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px 14px;margin:12px 0 0}
dl.kv dt{color:var(--mut);font-size:.88rem}
dl.kv dd{margin:0;overflow-wrap:anywhere}
.conn-check{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.conn-check h3{margin:0 0 8px;font-size:1rem}
@media(max-width:640px){.conn-top{grid-template-columns:1fr}dl.kv{grid-template-columns:1fr}dl.kv dd{margin-bottom:6px}}
.fg-hero{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,rgba(0,180,239,.14),rgba(0,180,239,.03))}
.fg-hero h2{margin:0 0 6px}.fg-lead{margin:0 0 10px;color:var(--ink);max-width:46em}
.fg-feats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fg-feats li{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.88rem;color:var(--mut)}
.fg-feats li::before{content:"✓ ";color:var(--acc)}
.fg-steps{list-style:none;margin:16px 0 10px;padding:0;display:flex;gap:8px;counter-reset:s}
.fg-steps li{counter-increment:s;flex:1;text-align:center;padding:8px 6px;border-bottom:3px solid var(--line);color:var(--mut);font-size:.9rem}
.fg-steps li::before{content:counter(s) ". "}
.fg-steps li.on{color:var(--ink);border-color:var(--acc);font-weight:700}.fg-steps li.done{color:var(--acc);border-color:var(--acc)}
.fg-vol{margin:10px 0}.fg-vol-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin-bottom:6px}
.fg-vol meter{width:100%;height:8px;margin:2px 0 10px}
.fg-folder{display:flex;align-items:center;gap:10px;padding:6px 2px;cursor:pointer;border-top:1px solid rgba(127,219,255,.10)}
.fg-folder input{width:auto;max-width:none;flex:none}.fg-folder bdi{flex:1;overflow-wrap:anywhere}
.fg-list{margin:6px 0;padding-inline-start:18px}.fg-list li{overflow-wrap:anywhere}
.fg-disc{margin:8px 0;padding-inline-start:20px;line-height:1.9}.fg-accept{display:flex;gap:10px;align-items:center;margin:12px 0}.fg-accept input{width:auto;max-width:none}
input.otp{font-size:1.6rem;letter-spacing:.5em;text-align:center;max-width:260px;direction:ltr}
.plan-use{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 0;color:var(--mut);font-size:.9rem}
.plan-use meter{width:140px;height:8px}
.plan-banner{margin-top:14px}.plan-banner p{margin:.3em 0}

/* attack sources */
.atk-map{min-height:120px}
.amap path.hot{stroke:#D9534F;stroke-width:.8}
.amap path.hot.h1{fill:rgba(217,83,79,.20)}.amap path.hot.h2{fill:rgba(217,83,79,.36)}.amap path.hot.h3{fill:rgba(217,83,79,.52)}.amap path.hot.h4{fill:rgba(217,83,79,.72)}
.amap circle.src{cursor:pointer}
.lg{display:inline-block;padding:1px 10px;border-radius:999px;border:1px solid var(--line);font-size:.8rem;margin:2px 3px}
.lg[data-k=brute_force]{color:#E07A3B;border-color:#E07A3B}.lg[data-k=web]{color:#F2A29F;border-color:#D9534F}.lg[data-k=scan]{color:#F2A900;border-color:#F2A900}.lg[data-k=exploit]{color:#C9A6F0;border-color:#B07AE0}.lg[data-k=other]{color:#A9BCD6;border-color:#A9BCD6}
.ltr{direction:ltr;unicode-bidi:isolate;text-align:left;font-family:Consolas,monospace;font-size:.88rem}
.gauge .gv{color:var(--mut);font-size:.85rem;min-width:110px}

/* vulnerability news */
.vul .big{font-size:1.05rem}
details.tier{border:1px solid var(--line);border-radius:8px;margin:8px 0;padding:6px 12px;background:var(--card2)}
details.tier summary{cursor:pointer;font-weight:700}
details.tier.low{border-inline-start:4px solid var(--acc)}details.tier.mid{border-inline-start:4px solid var(--gold)}details.tier.high{border-inline-start:4px solid var(--crit)}
details.tier ul{margin:8px 0 4px;padding-inline-start:20px}

/* log analyzer */
.fnd{border-top:1px solid var(--line);padding:10px 0}
.fnd:first-of-type{border-top:0}
.fnd pre.cmd{white-space:pre-wrap;word-break:break-all;margin:6px 0 0}
.fnd ol{margin:6px 0 0;padding-inline-start:22px}
input[type=checkbox]{width:auto;max-width:none;margin:0}
.row label{margin:0;color:var(--ink)}
@media print{header.top,.foot,.noprint,.card input,.card button:not(.noprint){display:none!important}body{background:#fff;color:#000}.card{border-color:#999;background:#fff}.sub{color:#333}}
@media(max-width:640px){nav a{padding:5px 10px;font-size:.88rem}.gauge .gl{min-width:90px}.gauge .gv{min-width:70px}}
.who a{color:var(--mut);text-decoration:none;border:1px solid transparent;border-radius:999px;padding:4px 12px}
.who a:hover{color:var(--ink);border-color:var(--line)}

/* commands: copyable, selectable, never wider than the screen */
.cmdbox{margin:10px 0}
.cmdlab{color:var(--mut);font-size:.88rem;margin:0 0 4px}
pre.cmd{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;cursor:pointer;user-select:all}
/* the add-device wizard: the note under the version list, and the one-line alternative command */
.osnote{margin:6px 0 0;max-width:46em}.osnote .osun{display:block;margin-top:6px;color:var(--warn);font-weight:600}
.altcmd{margin:8px 0}.altcmd>button{min-height:44px}
.cmdbox .row{margin-top:6px}
main,.card,.fix,.box{min-width:0;overflow-wrap:anywhere}
.box{overflow-x:auto}
input[type=file]{max-width:100%;color:var(--mut)}
input[type=file]::file-selector-button{font:inherit;cursor:pointer;border-radius:999px;border:1px solid var(--acc);background:transparent;color:var(--acc);padding:6px 16px;margin-inline-end:10px}
button:active,.btn:active{transform:scale(.97)}
.terms{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px 14px;background:var(--card2);margin:8px 0}
.terms p{margin:10px 0;line-height:1.9}

/* the Rased mark */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand .logo{border-radius:8px;display:block}
.card .brand{display:flex;margin:0 0 10px}
textarea{font:inherit;background:var(--inp);color:var(--ink);border:1px solid var(--ctl);border-radius:8px;padding:10px 12px;max-width:100%}
.tile b{overflow-wrap:anywhere}

/* the support team: faces, requests, live sessions */
.avatar{border-radius:50%;object-fit:cover;background:#12234A;border:2px solid var(--line);flex:none}
.person{display:flex;align-items:center;gap:12px}
.supbar .card{border-color:var(--gold);background:rgba(242,169,0,.07)}
.supbar .card.sup-approved{border-color:var(--acc);background:rgba(0,180,239,.08)}
.tl{border-inline-start:3px solid var(--line);padding-inline-start:12px;margin:8px 0}
.tl-row{display:flex;gap:12px;padding:3px 0;font-size:.9rem}
.tl-t{color:var(--mut);min-width:150px;direction:ltr;text-align:right}
.photo-pick{margin:8px 0}

/* «مساعدك الذكي»: a small translucent window on the side */
.ast{position:fixed;left:18px;bottom:18px;z-index:50;font-family:var(--f)}
.ast-fab{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 12px;border-radius:999px;border:1px solid rgba(0,180,239,.5);background:rgba(11,26,61,.62);color:var(--ink);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 28px rgba(0,0,0,.35);font-weight:700;transition:transform .15s,background .15s}
.ast-fab:hover{background:rgba(11,26,61,.85);transform:translateY(-2px)}
.ast-fab img{border-radius:8px}
.ast-fab.hide{display:none}
.ast-panel{display:none;flex-direction:column;width:min(370px,calc(100vw - 28px));max-height:min(620px,calc(100vh - 36px));height:70vh;border:1px solid rgba(127,219,255,.3);border-radius:18px;background:rgba(9,24,32,.74);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 18px 50px rgba(0,0,0,.5);overflow:hidden}
.ast-panel.on{display:flex}
.ast-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);background:rgba(0,180,239,.1)}
.ast-head img{border-radius:8px;flex:none}
.ast-title{flex:1;display:flex;flex-direction:column;line-height:1.3}
.ast-title b{font-size:1rem}.ast-title span{font-size:.78rem;color:var(--mut)}
.ast-ic{padding:2px 10px;border-radius:8px;font-size:1rem;line-height:1.6}
.ast-list{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.ast-msg{max-width:92%;padding:9px 13px;border-radius:14px;line-height:1.75;font-size:.93rem;overflow-wrap:anywhere}
.ast-msg p{margin:0 0 6px}.ast-msg p:last-child,.ast-msg ul:last-child{margin-bottom:0}
.ast-msg ul{margin:4px 0 6px;padding-inline-start:20px}
.ast-a{align-self:flex-start;background:rgba(16,42,54,.82);border:1px solid var(--line)}
.ast-u{align-self:flex-end;background:rgba(0,180,239,.28);border:1px solid rgba(0,180,239,.45)}
.ast-typing{display:flex;gap:5px;padding:12px 16px}
.ast-typing span{width:8px;height:8px;border-radius:50%;background:var(--acc);animation:astDot 1.2s infinite ease-in-out}
.ast-typing span:nth-child(2){animation-delay:.2s}.ast-typing span:nth-child(3){animation-delay:.4s}
@keyframes astDot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1.1)}}
.ast-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px}
.ast-chip{padding:5px 12px;font-size:.82rem;border-radius:999px;background:rgba(255,255,255,.05)}
.ast-chip:hover{border-color:var(--acc);color:var(--acc)}
.ast-foot{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);align-items:flex-end}
.ast-foot textarea{flex:1;max-width:none;resize:none;min-height:42px;max-height:96px;background:rgba(4,12,38,.7)}
.ast-note{padding:0 12px 9px;font-size:.72rem;color:var(--mut);text-align:center}
@media(max-width:640px){.ast{left:10px;bottom:10px}.ast-panel{height:78vh;width:calc(100vw - 20px)}.ast-fab span{display:none}.ast-fab{padding:8px}}
@media print{.ast{display:none!important}}
@media(prefers-reduced-motion:reduce){.ast-typing span{animation:none}.ast-fab{transition:none}}

/* Telegram linking: one tap first, QR beside it, typing only as a fallback */
.link-grid{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
.link-main p{margin:6px 0}
.big-tap{display:inline-block;font-size:1.1rem;padding:14px 28px;margin:6px 0 10px}
.qr img{background:#fff;padding:8px;border-radius:12px;display:block}
details.fallback{margin-top:10px;border:1px dashed var(--line);border-radius:10px;padding:6px 12px}
details.fallback summary{cursor:pointer;color:var(--mut)}
@media(max-width:640px){.link-grid{grid-template-columns:1fr}.qr{justify-self:center}}

/* ===== design system, round 1: themes, density, flexible layout, toolbar, compact cards ===== */
/* light theme: chosen by the person (header button) or by the system when nothing was chosen */
:root[data-theme=light]{color-scheme:light;--bg:#F5F9FC;--bg2:#FFFFFF;--bg3:#E3EEF7;--ink:#0E1A33;--mut:#52657A;--line:rgba(20,50,70,.2);--acc:#2B2A8C;--gold:#9A6700;--warn:#A8470F;--crit:#C0392B;--card:#FFFFFF;--card2:#F1F5F8;--inp:#FFFFFF;--ctl:#6B7C90;--cmd:#1B1E7A}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]){color-scheme:light;--bg:#F5F9FC;--bg2:#FFFFFF;--bg3:#E3EEF7;--ink:#0E1A33;--mut:#52657A;--line:rgba(20,50,70,.2);--acc:#2B2A8C;--gold:#9A6700;--warn:#A8470F;--crit:#C0392B;--card:#FFFFFF;--card2:#F1F5F8;--inp:#FFFFFF;--ctl:#6B7C90;--cmd:#1B1E7A}}
:root[data-theme=light] .chip.bad,:root[data-theme=light] button.dng{color:#8F2A22}
:root[data-theme=light] .chip.wait{color:#7A5210}:root[data-theme=light] .chip.ok{color:#0B6B4A}
:root[data-theme=light] .btn.pri,:root[data-theme=light] button.pri{color:#fff}
:root[data-theme=light] .fix code{background:rgba(0,0,0,.07)}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .chip.bad,:root:not([data-theme=dark]) button.dng{color:#8F2A22}:root:not([data-theme=dark]) .chip.wait{color:#7A5210}:root:not([data-theme=dark]) .chip.ok{color:#0B6B4A}:root:not([data-theme=dark]) .btn.pri,:root:not([data-theme=dark]) button.pri{color:#fff}}
html{transition:background-color .2s}
/* density: comfortable (default) or compact, remembered per browser */
body[data-density=compact]{font-size:15px;line-height:1.55}
body[data-density=compact] .card{padding:10px 13px;margin-bottom:10px}
body[data-density=compact] h1{margin:16px 0 4px}body[data-density=compact] h2{margin:16px 0 8px}
body[data-density=compact] th,body[data-density=compact] td{padding:5px 8px}
body[data-density=compact] .tile{padding:8px 12px}
/* header: icon buttons, a sticky bar that never wastes the first screen */
header.top{position:sticky;top:0;z-index:40}
.ib{padding:4px 11px;font-size:1rem;line-height:1.6;min-width:36px;text-align:center}
@media(max-width:700px){header.top nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;width:100%;order:3}header.top nav::-webkit-scrollbar{display:none}header.top nav a{white-space:nowrap}}
/* tiles that filter */
.tile.btn{cursor:pointer;text-align:start;font:inherit;color:inherit;width:100%;display:block;transition:transform .12s,border-color .12s,background .12s}
.tile.btn:hover{transform:translateY(-2px);border-color:var(--acc)}
.tile.btn.on{background:rgba(0,180,239,.14);border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
/* a sticky toolbar: search, filters, sort and grouping stay in reach while the list scrolls */
.toolbar{position:sticky;top:58px;z-index:30;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.toolbar input[type=search]{flex:1 1 220px;max-width:340px;padding:7px 12px}
.toolbar select{width:auto;max-width:200px;padding:7px 10px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{padding:5px 13px;font-size:.88rem}
.seg button.on{background:var(--acc);color:#03202E;border-color:var(--acc);font-weight:700}
:root[data-theme=light] .seg button.on{color:#fff}
.toolbar .cnt{margin-inline-start:auto;color:var(--mut);font-size:.88rem}
/* grids: use the width of the screen */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));align-items:start}
.grid>.card{margin:0}
.grp{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:20px 0 8px;padding-inline-start:10px;border-inline-start:4px solid var(--acc)}
.grp h2{margin:0;border:0;padding:0;font-size:1.1rem}
.grp .fixline{color:var(--mut);font-size:.88rem;flex:1 1 280px}
/* a compact record: one header line, the title clipped to two lines, the rest on one small line */
.rec{padding:11px 14px}
.rec .rh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.rec .rh .ltr{font-size:1rem;font-weight:700}
.rec .rt{margin:6px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;direction:ltr;text-align:start}
.rec .rm{color:var(--mut);font-size:.85rem;margin:2px 0 0}
.rec details.tier{margin:8px 0 0}
.rec .fix{margin:8px 0 0;padding:6px 10px;font-size:.88rem}
.rec.sev-bad{border-inline-start:4px solid var(--crit)}.rec.sev-wait{border-inline-start:4px solid var(--gold)}.rec.sev-ok{border-inline-start:4px solid var(--acc)}
details.more{margin:14px 0}details.more>summary{cursor:pointer;font-weight:700;padding:8px 2px}
.empty{padding:26px 10px;text-align:center;color:var(--mut)}
/* a short notice at the bottom, instead of a blocking dialog */
.toast{position:fixed;inset-inline-start:50%;bottom:22px;transform:translateX(50%);z-index:80;max-width:min(92vw,520px);padding:10px 18px;border-radius:12px;background:var(--bg3);color:var(--ink);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:.95rem}
.skel{height:84px;border-radius:var(--r);background:linear-gradient(90deg,var(--card) 25%,var(--bg3) 45%,var(--card) 65%);background-size:200% 100%;animation:skel 1.2s infinite linear;border:1px solid var(--line)}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}.tile.btn{transition:none}}
@media print{.toolbar,.ib,.toast{display:none!important}}
/* phones: nothing sticky that eats the first screen, filters scroll sideways, the account line is short */
@media(max-width:700px){
  header.top{position:static;padding:6px 0}
  header.top .w{gap:6px}
  .who span{display:none}
  .toolbar{position:static;padding:8px}
  .toolbar input[type=search]{flex:1 1 100%;max-width:none}
  .seg{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:2px;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{white-space:nowrap;flex:none}
  .toolbar select{flex:1 1 140px;max-width:none}
  .toolbar .cnt{margin-inline-start:0}
  .grp{margin-top:14px}
}
/* a button-tile keeps the tile's shape (the generic button is a pill) */
button.tile.btn{border-radius:var(--r);padding:12px 14px;border:1px solid var(--line);border-top:4px solid var(--acc);background:var(--card);display:block}
button.tile.btn.warn{border-top-color:var(--gold)}button.tile.btn.bad{border-top-color:var(--crit)}
button.tile.btn.on{border-color:var(--acc);background:rgba(0,180,239,.14)}
.newver{position:fixed;inset-inline:0;top:0;z-index:90;margin:0;border-radius:0;text-align:center;border-width:0 0 1px;background:var(--bg3)}
/* data of a support session, an inspection or a report: records as cards, inner lists as titled blocks, no table inside a cell */
.ds-list{display:grid;gap:12px;grid-template-columns:1fr}
.dsc{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--card2);min-width:0}
.dsc>.dh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.dsc>.dh b{font-size:1.08rem}
.facts{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 10px}
.fact{display:inline-flex;align-items:baseline;gap:6px;padding:3px 10px;border:1px solid var(--line);border-radius:999px;font-size:.88rem;max-width:100%}
.fact i{font-style:normal;color:var(--mut)}.fact b{font-weight:600;overflow-wrap:anywhere}
.chips{display:inline-flex;flex-wrap:wrap;gap:4px}
.ds-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));align-items:start}
.ds{min-width:0}
.ds h4{margin:0 0 6px;font-size:.92rem;color:var(--mut);font-weight:700}
table.dt{font-size:.9rem;width:100%}
table.dt th{white-space:nowrap;padding:5px 9px;font-size:.8rem}
table.dt td{padding:5px 9px;overflow-wrap:normal;word-break:normal;vertical-align:top}
table.dt td.num{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
table.dt tbody tr:nth-child(even){background:rgba(127,219,255,.05)}
.rbody{min-width:0}
@media(min-width:1100px){.ds-list.wide{grid-template-columns:1fr 1fr}}
/* round 2 of the data view: small boxes for records of plain facts, folding long tables, full-width long lists */
.ds-small{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:10px;margin:0 0 12px;align-items:start}
.dsm{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--card)}
.dsm h4{margin:0 0 6px}
.dsm .facts{margin:0}
.ds.wide{grid-column:1/-1}
.fact b.yes{color:var(--acc)}.fact b.no{color:var(--warn)}
table.dt td[dir=auto]{text-align:start}
.more-btn{margin:8px 0 2px;font-size:.88rem;padding:4px 14px}
/* round 3 of the data view: cells keep a readable width (the table scrolls instead of squeezing words), long text gets room */
.box{max-width:100%}
table.dt td{min-width:5.5em}
table.dt td.num{min-width:0}
table.dt td.long{min-width:15em;overflow-wrap:break-word}
.dsc,.ds,.ds-list,.rbody,.facts,.dsm{max-width:100%}
.dsc .facts .fact{max-width:100%}
/* phones: a table of records becomes a stack of small cards, label beside value */
@media(max-width:640px){
  table.dt thead{display:none}
  table.dt,table.dt tbody,table.dt tr,table.dt td{display:block;width:100%}
  table.dt tr{border:1px solid var(--line);border-radius:10px;margin:8px 0;padding:6px 10px;background:var(--card)}
  table.dt tbody tr:nth-child(even){background:var(--card)}
  table.dt td,table.dt td.long,table.dt td.num{border:0;padding:3px 0;display:flex;gap:12px;justify-content:space-between;align-items:baseline;min-width:0;text-align:start}
  table.dt td::before{content:attr(data-l);color:var(--mut);font-size:.8rem;flex:none}
  .ds-small{grid-template-columns:1fr}
}

/* ===== the log analysis report: a formal document ===== */
.rpt{max-width:1180px;margin-inline:auto}
.rpt-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:2px solid var(--acc)}
.rpt-brand{display:flex;align-items:center;gap:10px}.rpt-brand b{display:block;font-size:1.2rem;color:var(--acc);line-height:1.2}.rpt-brand .sub{margin:0;font-size:.8rem}
.rpt-title{border:0;padding:0;margin:14px 0 8px;font-size:1.6rem}
dl.rpt-meta{grid-template-columns:repeat(auto-fit,minmax(150px,max-content));gap:6px 22px;margin:8px 0 14px}
dl.rpt-meta dt{grid-column:auto}
.rpt-meta dt,.rpt-meta dd{display:inline}
dl.rpt-meta{display:flex;flex-wrap:wrap}
dl.rpt-meta dt{margin-inline-end:6px}dl.rpt-meta dd{margin-inline-end:22px}
.rpt-risk{margin:6px 0 10px}.rpt-risk b{display:block;margin-bottom:6px}
.risk-bar{display:flex;gap:4px;max-width:520px}
.risk-bar .seg{flex:1;text-align:center;font-size:.8rem;padding:4px 6px;border-radius:6px;background:rgba(169,187,194,.15);color:var(--mut);border:1px solid var(--line)}
.risk-bar .seg.on.low{background:rgba(0,180,239,.25);color:var(--acc);border-color:var(--acc)}
.risk-bar .seg.on.medium{background:rgba(242,169,0,.25);color:var(--ink);border-color:var(--gold)}
.risk-bar .seg.on.high{background:rgba(224,122,59,.28);color:var(--ink);border-color:var(--warn)}
.risk-bar .seg.on.critical{background:rgba(217,83,79,.3);color:#F2A29F;border-color:var(--crit);font-weight:800}
:root[data-theme=light] .risk-bar .seg.on.critical{color:#8F2A22}
.rpt-lead{font-size:1.05rem;line-height:1.9;margin:6px 0 12px}
.rpt-cols{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.rpt-cols h3{margin:6px 0 8px;font-size:1rem}
ol.rpt-list{padding-inline-start:22px;margin:0}ol.rpt-list li{margin:8px 0}
.fgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr));align-items:start}
.fnd2{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card2);min-width:0}
.fnd2.sev-bad{border-inline-start:4px solid var(--crit)}.fnd2.sev-wait{border-inline-start:4px solid var(--gold)}.fnd2.sev-ok{border-inline-start:4px solid var(--acc)}
.fnd2 pre.cmd{margin:6px 0 0;font-size:.78rem;max-height:5.6em;overflow:auto}
details.ev{margin-top:6px}details.ev summary{cursor:pointer;color:var(--mut);font-size:.85rem}
.prob{border-top:1px solid var(--line);padding:12px 0}.prob:first-of-type{border-top:0}
.pnum{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--acc);color:#03202E;font-weight:800;font-size:.85rem;flex:none}
:root[data-theme=light] .pnum{color:#fff}
.pcause{margin:6px 0}.pcause i{font-style:normal;color:var(--mut)}
.rpt-foot{margin-top:16px;padding-top:10px;border-top:1px solid var(--line)}
@media print{
  @page{margin:14mm}
  .rpt .card{break-inside:avoid;box-shadow:none}
  .rpt .fnd2,.rpt .prob{break-inside:avoid}
  .rpt-top{border-bottom-color:#2B2A8C}
  .risk-bar .seg{border-color:#999;color:#333;background:#fff}
  .risk-bar .seg.on{background:#ddd;font-weight:800}
  details.ev>*{display:block}
  .fnd2 pre.cmd{max-height:none;border-color:#bbb;background:#f6f6f6;color:#000}
}

/* usage guide: steps beside a picture */
.gd-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.gd-steps{flex:1 1 280px;min-width:0}
.gd-fig{flex:0 1 380px;margin:0}
.gd-fig img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line,#2a4551);display:block}
.gd-fig figcaption{font-size:.78em;text-align:center}
ol.gd-st{list-style:none;counter-reset:gs;margin:.4em 0;padding:0}
ol.gd-st li{counter-increment:gs;position:relative;padding:4px 38px 4px 0;margin:4px 0}
ol.gd-st li:before{content:counter(gs);position:absolute;right:0;top:5px;width:26px;height:26px;border-radius:50%;background:#F2A900;color:#03202E;text-align:center;line-height:26px;font-weight:800;font-size:.85em}
.gd-tip{background:rgba(0,180,239,.12);border-inline-start:4px solid #00B4EF;border-radius:8px;padding:6px 12px;margin:8px 0;font-size:.92em}
.gd-tip.warn{background:rgba(224,122,59,.14);border-inline-start-color:#e07a3b}

/* home page */
.hv-banner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-inline-start:6px solid var(--acc);border-radius:var(--r);background:var(--card);padding:12px 16px;margin:0 0 14px}
.hv-banner.bad{border-inline-start-color:var(--crit);background:rgba(217,83,79,.08)}.hv-banner.info{border-inline-start-color:var(--gold)}
.hv-b-t b{display:block;font-size:1.1rem}
.hv-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px;align-items:start}
.hv-col{min-width:0}
.hv-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:14px 0 8px}
.hv-h h2{margin:0}
.hv-list{display:grid;gap:8px;margin:0 0 10px}
.hv-prob{border:1px solid var(--line);border-inline-start:5px solid var(--gold);border-radius:var(--r);background:var(--card);padding:10px 14px}
.hv-prob.sev-bad{border-inline-start-color:var(--crit)}
.hv-p-top,.hv-d-top,.hv-d-ft{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hv-devs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:0 0 10px}
.hv-dev{display:block;color:inherit;text-decoration:none;border:1px solid var(--line);border-top:4px solid var(--acc);border-radius:var(--r);background:var(--card);padding:12px 14px;transition:transform .12s,border-color .12s}
.hv-dev:hover{transform:translateY(-2px);border-color:var(--acc)}
.hv-dev.off{border-top-color:var(--crit)}.hv-dev.wait{border-top-color:var(--gold)}
.hv-dev .gauge{margin:8px 0}
.hv-go{color:var(--acc);font-size:.88rem}
.hv-tb{position:static;box-shadow:none}
.hv-day{margin:12px 0 6px;color:var(--mut);font-size:.85rem;font-weight:700;border-bottom:1px solid var(--line);padding-bottom:2px}
.hv-ev{display:flex;gap:10px;padding:6px 0}
.hv-dot{flex:none;width:10px;height:10px;border-radius:50%;margin-top:9px;background:var(--gold)}
.hv-ev.sev-bad .hv-dot{background:var(--crit)}.hv-ev.done .hv-dot{background:var(--acc)}
.hv-ev-b{flex:1;min-width:0}
@media(max-width:1000px){.hv-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.hv-dev{transition:none}}
.hv-tiles{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
@media(max-width:600px){.hv-tiles{gap:8px}.hv-tiles .tile{padding:8px 10px}.hv-tiles .tile b{font-size:1.3rem}.hv-tiles .tile span{font-size:.78rem}}

/* device page: header card, tabs, folded recommendations, chart hover */
.dh{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-inline-start:6px solid var(--acc);border-radius:var(--r);background:var(--card);padding:12px 16px;margin:0 0 14px}
.dh.off{border-inline-start-color:var(--crit)}.dh.wait{border-inline-start-color:var(--gold)}
.dh-row,.dh-comp,.dh-qa{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dh-c{display:inline-flex;gap:6px;align-items:center}
.tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--line);margin:0 0 14px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;border:0;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;padding:10px 16px;min-height:44px;color:var(--mut)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--acc);font-weight:700;background:rgba(0,180,239,.08)}
.tabs button:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.tabpane[hidden]{display:none}
.recs2{display:grid;gap:8px;margin:0 0 12px}
.rcard{border:1px solid var(--line);border-inline-start:5px solid var(--gold);border-radius:var(--r);background:var(--card)}
.rcard.sev-bad{border-inline-start-color:var(--crit)}
.rcard>summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;cursor:pointer;padding:10px 14px;min-height:44px;list-style:none}
.rcard>summary::-webkit-details-marker{display:none}
.rcard>summary::after{content:'▾';margin-inline-start:auto;color:var(--mut);transition:transform .15s}
.rcard[open]>summary::after{transform:rotate(180deg)}
.rn{color:var(--mut);font-variant-numeric:tabular-nums}
.rc-b{padding:0 14px 12px}
.verify{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.verify>div{flex:1 1 220px}
.chart .cg{stroke:var(--mut);stroke-width:1;stroke-dasharray:3 3}
.chart .cdot{fill:var(--acc);stroke:var(--bg);stroke-width:2}
.chart .ctipbg{fill:var(--bg2);stroke:var(--line)}
.chart .ctip{fill:var(--ink);font-size:11px}
.chart{max-height:180px}

/* dialogs (replace the browser's confirm/prompt/alert) */
dialog.dlg{border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);padding:18px 20px;max-width:min(92vw,440px);width:100%;box-shadow:0 20px 60px rgba(0,0,0,.45)}
dialog.dlg::backdrop{background:rgba(3,10,14,.6)}
dialog.dlg h3{margin:0 0 8px}
dialog.dlg label{display:block;margin:8px 0}
dialog.dlg input{width:100%;margin-top:4px}
.dlg-err{color:#F2A29F;min-height:1.2em;margin:4px 0}
.dlg-row{display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap}
.dlg-row button{min-height:44px;min-width:96px}

/* touch targets and checkboxes (design standard: 44px) */
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--acc);flex:none}
label:has(>input[type=checkbox]),label:has(>input[type=radio]){display:flex;gap:10px;align-items:center;min-height:44px;cursor:pointer}
main details>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}

/* vulnerability explanation: one line always visible, details folded */
.why{margin:8px 0 0}
.why-s{color:var(--ink);font-size:.92rem;line-height:1.7}
.why-d{margin-top:4px}
.why-d>summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;cursor:pointer;color:var(--acc);font-size:.88rem;min-height:36px}
.why-b{border-inline-start:3px solid var(--acc);padding:2px 12px 4px;margin:4px 0}
.why-r p{margin:2px 0 8px;line-height:1.8}
.why-n{margin:4px 0 0;padding-inline-start:18px;color:var(--mut);font-size:.86rem}

/* how to fix: steps, a command to copy, and a translucent honest notice */
.fixd{margin-top:8px}
.fixd>summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;cursor:pointer;color:var(--acc);font-size:.9rem;min-height:36px;font-weight:700}
.fixd-b{border-inline-start:3px solid var(--gold);padding:4px 12px 6px;margin:4px 0}
.fixd-warn{margin:8px 0;padding:8px 12px;border:1px dashed var(--gold);border-radius:var(--r);background:rgba(242,169,0,.12);backdrop-filter:blur(2px);font-size:.88rem;line-height:1.7}
.fixd-nocmd{margin:8px 0;padding:8px 12px;border-radius:var(--r);background:rgba(169,187,194,.12);font-size:.88rem;line-height:1.7}
.ast-fix{margin:8px 0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.04)}
.ast-fix .cmdbox pre.cmd{font-size:.76rem}

/* the live attack map */
.am-bar{position:static;box-shadow:none}
.am-note{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;border:1px solid var(--line);border-inline-start:5px solid var(--acc);border-radius:var(--r);padding:10px 14px;margin:0 0 12px;font-size:.9rem;line-height:1.8}
.am-note.sim{border-inline-start-color:var(--gold);background:rgba(242,169,0,.12)}
.am-note.live{border-inline-start-color:var(--crit)}
.am-warn{flex-basis:100%;color:#F2A29F}
.am-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.am-stage{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#050E26}
.am-cv{display:block;width:100%;touch-action:pan-y;cursor:grab}
.am-cv.pick{cursor:pointer}
.am-tip{position:absolute;max-width:240px;background:rgba(7,19,52,.94);color:#EAF3FB;border:1px solid #223357;border-radius:8px;padding:8px 10px;font-size:.82rem;line-height:1.6;pointer-events:none;z-index:3}
.am-tip .sub{color:#A9BCD6}
.am-hnote{position:absolute;inset-inline-start:10px;bottom:6px;font-size:.78rem;color:#A9BCD6;pointer-events:none}
.am-scrub{display:flex;gap:10px;align-items:center;margin:8px 0}
.am-scrub input{flex:1;min-height:32px}
.am-log{display:grid;gap:4px;margin:0 0 12px}
.am-ev{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:.85rem}
.am-t{color:var(--mut);font-variant-numeric:tabular-nums}
.am-x{color:var(--gold);font-weight:700}
.am-panel{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:10px 12px;margin:0 0 12px}
.am-panel h3{margin:0 0 6px;font-size:.95rem}
.am-row{display:flex;gap:8px;justify-content:space-between;align-items:center;width:100%;border:0;border-radius:8px;background:transparent;color:inherit;text-align:start;padding:6px 8px;min-height:36px}
button.am-row{cursor:pointer}
.am-row.on{background:rgba(242,169,0,.18)}.am-row.off{opacity:.45}
.am-row>span:first-child{flex:1}
.am-dot{width:10px;height:10px;border-radius:50%;flex:none;background:#A9BCD6}
.am-dot[data-k=brute_force]{background:#E07A3B}.am-dot[data-k=web]{background:#D9534F}.am-dot[data-k=scan]{background:#F2A900}.am-dot[data-k=exploit]{background:#B07AE0}
@media(max-width:900px){.am-body{grid-template-columns:minmax(0,1fr)}}
.am [hidden]{display:none!important}
@media(max-width:600px){.am-bar .seg{flex-wrap:wrap;overflow:visible}}

/* the log analyzer's guided choice */
.lw-step{margin:0 0 16px;padding:0 0 12px;border-bottom:1px dashed var(--line)}
.lw-step h2{margin:0 0 8px}
.lw-bar{position:static;box-shadow:none}
.lw-bar input[type=search]{max-width:none;flex:1 1 100%}
.lw-cats{flex-wrap:nowrap;overflow-x:auto;margin:6px 0;scrollbar-width:thin}
.lw-cats button{flex:none;white-space:nowrap}
.lw-seg{margin:6px 0}
.lw-sugg{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.lw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:8px 0}
button.lw-item{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:start;border-radius:var(--r);padding:10px 12px;min-height:56px}
button.lw-item.on{border-color:var(--acc);background:rgba(0,180,239,.16);box-shadow:0 0 0 1px var(--acc) inset}
button.lw-item .sub{font-size:.8rem}

/* a product the person added: its approval state in the report, with the meaning on hover or focus */
.psb{margin:10px 0;display:grid;gap:8px}
.psb-row{position:relative;border:1px dashed var(--gold);border-radius:var(--r);padding:8px 12px;background:rgba(242,169,0,.08)}
.psb-row:hover::after,.psb-row:focus-visible::after{content:attr(data-tip);position:absolute;inset-inline:8px;top:100%;margin-top:4px;z-index:5;background:rgba(7,19,52,.96);color:#EAF3FB;border:1px solid #223357;border-radius:8px;padding:8px 10px;font-size:.82rem;line-height:1.7}
@media print{.psb-row::after{display:none}}
/* brand: on the light theme the accent is the navy, so text on it is white */
:root[data-theme=light] .seg button.on,:root[data-theme=light] .pnum{color:#fff}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .seg button.on,:root:not([data-theme=dark]) .pnum{color:#fff}}
/* brand: the radar-rings pattern is the page background (dark: cyan lines, light: navy lines); printed pages keep it */
:root[data-theme=light]{--rings:var(--rings-l)}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--rings:var(--rings-l)}}
@media print{body{background:#fff var(--rings-l)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* English: the page runs left to right; the few places that were placed on a physical side follow */
html[dir=ltr] .ast{left:auto;right:18px}
html[dir=ltr] body{font-family:var(--f)}
html[dir=ltr] .tile b{font-size:1.35rem;overflow-wrap:anywhere}

/* the AI panel (platform manager): two menus tinted by how many keys consume right now. Dark is the default theme, the light ramp is turned round (pale = idle, dark = busy);
   every pair of text and tint keeps 4.5:1 (measured in docs/ai-panel/mockup/DESIGN-NOTES.md section 3) */
:root{--ap0:#1E1D4D;--ap1:#272671;--ap2:#2F2E9D;--ap3:#3937CD;--ap4:#524FDA;--ap5:#7E7DEA;--ap6:#9C9AF4;--apf0:#EAF3FB;--apf1:#EAF3FB;--apf2:#EAF3FB;--apf3:#EAF3FB;--apf4:#EAF3FB;--apf5:#0E1A33;--apf6:#0E1A33;--ape-p:#8A89EA;
--at0:#0C2631;--at1:#0C3544;--at2:#0A445C;--at3:#065675;--at4:#006A95;--at5:#0092CC;--at6:#00AEF3;--atf0:#EAF3FB;--atf1:#EAF3FB;--atf2:#EAF3FB;--atf3:#EAF3FB;--atf4:#EAF3FB;--atf5:#0E1A33;--atf6:#0E1A33;--ape-t:#48C2F0;
--aic1:#00B4EF;--aic2:#4863D9;--aic3:#68FAFE;--aic4:#9F76A2;--aic5:#BBBBBB;--aic6:#D43471}
:root[data-theme=light]{--ap0:#EEEEF8;--ap1:#DCDCEF;--ap2:#BBBBDA;--ap3:#9594C6;--ap4:#6B6AAE;--ap5:#49489C;--ap6:#2B2A8C;--apf0:#0E1A33;--apf1:#0E1A33;--apf2:#0E1A33;--apf3:#0E1A33;--apf4:#FFFFFF;--apf5:#FFFFFF;--apf6:#FFFFFF;--ape-p:#6564B0;
--at0:#E6F8FD;--at1:#BDEBFA;--at2:#6CD3F6;--at3:#00B4EF;--at4:#0199D3;--at5:#0374A4;--at6:#04537F;--atf0:#0E1A33;--atf1:#0E1A33;--atf2:#0E1A33;--atf3:#0E1A33;--atf4:#0E1A33;--atf5:#FFFFFF;--atf6:#FFFFFF;--ape-t:#0287BB;
--aic1:#007CBA;--aic2:#363967;--aic3:#07756B;--aic4:#762FA1;--aic5:#444444;--aic6:#DA598A}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--ap0:#EEEEF8;--ap1:#DCDCEF;--ap2:#BBBBDA;--ap3:#9594C6;--ap4:#6B6AAE;--ap5:#49489C;--ap6:#2B2A8C;--apf0:#0E1A33;--apf1:#0E1A33;--apf2:#0E1A33;--apf3:#0E1A33;--apf4:#FFFFFF;--apf5:#FFFFFF;--apf6:#FFFFFF;--ape-p:#6564B0;
--at0:#E6F8FD;--at1:#BDEBFA;--at2:#6CD3F6;--at3:#00B4EF;--at4:#0199D3;--at5:#0374A4;--at6:#04537F;--atf0:#0E1A33;--atf1:#0E1A33;--atf2:#0E1A33;--atf3:#0E1A33;--atf4:#0E1A33;--atf5:#FFFFFF;--atf6:#FFFFFF;--ape-t:#0287BB;
--aic1:#007CBA;--aic2:#363967;--aic3:#07756B;--aic4:#762FA1;--aic5:#444444;--aic6:#DA598A}}
[data-ai=prod]{--tb:var(--ap0);--tf:var(--apf0);--tedge:var(--ape-p)}[data-ai=test]{--tb:var(--at0);--tf:var(--atf0);--tedge:var(--ape-t)}
[data-ai=prod][data-lv="1"]{--tb:var(--ap1);--tf:var(--apf1)}[data-ai=prod][data-lv="2"]{--tb:var(--ap2);--tf:var(--apf2)}[data-ai=prod][data-lv="3"]{--tb:var(--ap3);--tf:var(--apf3)}
[data-ai=prod][data-lv="4"]{--tb:var(--ap4);--tf:var(--apf4)}[data-ai=prod][data-lv="5"]{--tb:var(--ap5);--tf:var(--apf5)}[data-ai=prod][data-lv="6"]{--tb:var(--ap6);--tf:var(--apf6)}
[data-ai=test][data-lv="1"]{--tb:var(--at1);--tf:var(--atf1)}[data-ai=test][data-lv="2"]{--tb:var(--at2);--tf:var(--atf2)}[data-ai=test][data-lv="3"]{--tb:var(--at3);--tf:var(--atf3)}
[data-ai=test][data-lv="4"]{--tb:var(--at4);--tf:var(--atf4)}[data-ai=test][data-lv="5"]{--tb:var(--at5);--tf:var(--atf5)}[data-ai=test][data-lv="6"]{--tb:var(--at6);--tf:var(--atf6)}
.aimenus{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;margin:0 0 14px}
button.aienv{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:start;border:2px solid var(--tedge);border-radius:14px;background:var(--tb);color:var(--tf);padding:14px 16px;min-height:132px;width:100%}
button.aienv.on{box-shadow:inset 0 0 0 3px var(--tf)}
button.aienv:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.aienv-t{display:flex;gap:10px;align-items:center;font-size:1.3rem}
.aienv-l,.ailive{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-weight:700}
.aienv-s{font-size:.85rem;margin-top:auto}
.aiband{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;border:2px solid var(--tedge);border-radius:14px;background:var(--tb);color:var(--tf);padding:12px 16px;margin:6px 0 14px}
.aiband h2{margin:0;border:0;padding:0;font-size:1.3rem;color:inherit;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.aiband .chips{display:flex;gap:6px;flex-wrap:wrap}
.aiband .chip,button.aienv .chip{background:var(--bg2);color:var(--ink);border:1.5px solid var(--line)}
@media(prefers-reduced-motion:no-preference){button.aienv,.aiband{transition:background-color .6s,color .6s}}
.badge-test{display:inline-block;font-size:.76rem;font-weight:800;padding:0 10px;line-height:1.7;border-radius:999px;background:#071334;color:#EAF3FB;border:1.5px solid #7FDBFF}
.aidots{display:inline-flex;gap:5px}.aidots i{width:12px;height:12px;border-radius:3px;border:2px solid currentColor;display:inline-block}.aidots i.f{background:currentColor}
.aitabs{margin:0 0 14px}.aitabs button{min-height:44px}
.aisvc .aihead{margin:0 0 8px}.aisvc h3{margin:0}
.aigrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.aigrid label{margin:8px 0 4px}.aick{min-width:3.2em;color:var(--mut)}
.aisws{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
label.aisw{display:flex;gap:10px;align-items:center;min-height:44px;cursor:pointer;color:var(--ink);margin:0}
label.aisw input{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:999px;border:2px solid var(--ctl);background:var(--inp);position:relative;flex:none;margin:0;cursor:pointer;padding:0}
label.aisw input::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:var(--mut)}
label.aisw input:checked{background:var(--acc);border-color:var(--acc)}
label.aisw input:checked::after{inset-inline-start:20px;background:#03202E}
:root[data-theme=light] label.aisw input:checked::after{background:#fff}
.aichart{width:100%;height:auto;display:block;direction:ltr}
.aichart text,.aiax{fill:var(--mut);font-size:11px}
.aic1{fill:var(--aic1)}.aic2{fill:var(--aic2)}.aic3{fill:var(--aic3)}.aic4{fill:var(--aic4)}.aic5{fill:var(--aic5)}.aic6{fill:var(--aic6)}
.ailegend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0}.aileg{display:inline-flex;gap:6px;align-items:center;font-size:.85rem}
.aileg i{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid var(--line)}
.aisw1{background:var(--aic1)}.aisw2{background:var(--aic2)}.aisw3{background:var(--aic3)}.aisw4{background:var(--aic4)}.aisw5{background:var(--aic5)}.aisw6{background:var(--aic6)}
.aisw-pk{background:var(--gold)}.aisw-off{background:var(--bg3)}.aisw-now{background:transparent;outline:2px solid var(--focus,var(--acc))}
.aitbl{margin:8px 0}.aitbl summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.aipeak{direction:ltr;display:grid;gap:3px;max-width:760px}
.aipk{display:grid;grid-template-columns:3.4em 1fr;gap:6px;align-items:center}.aipd{font-size:.8rem;color:var(--mut);text-align:end}
.aipc{display:grid;grid-template-columns:repeat(48,1fr);gap:1px}.aipc i{height:16px;background:var(--bg3);display:block}.aipc i.pk{background:var(--gold)}.aipc i.now{outline:2px solid var(--ink);outline-offset:-1px;position:relative;z-index:1}
.aiaxc{display:flex;justify-content:space-between;font-size:.75rem;color:var(--mut)}
.aitzsel{max-width:420px;min-height:140px}
.aicode{margin:10px 0}.aicode input{max-width:160px}
table.aikeys td{vertical-align:middle}
.aipane meter{display:block;width:100%;max-width:180px;margin-top:4px}
/* AI panel, phase 3A: the status of the push channel next to a key or a service, and the price card */
.aipush{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.aiwhy{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--mut);font-size:.86rem}
.aiwhy code{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:0 6px}
.card.inner{margin:14px 0 0;background:var(--bg2)}
/* AI panel: the usage of the test menu pulled from the test portal (banner with its time and a refresh button) */
.msg.aipull{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.msg.aipull button{padding:2px 10px;font-size:.86rem}
.aigw.card{margin:10px 0;padding:10px 14px}.aigw .row{align-items:center;gap:10px;flex-wrap:wrap}.aigw .hint{margin:8px 0 0}
code,bdi[dir=ltr]{unicode-bidi:isolate}code{direction:ltr}
.vulntabs{margin:12px 0}.vulnwhy{max-width:70ch}.vulndev{margin:14px 0}.vulndev .row{align-items:center;gap:10px;flex-wrap:wrap}.vulndev h2{margin:0}
/* UI audit 2026-10-04: text for screen readers only, touch-sized small buttons on a phone, a visible boundary for controls (3:1, token --ctl) */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:700px){button,.btn,summary,.why-d>summary,.fixd>summary,.toolbar select,.toolbar input[type=search]{min-height:44px}.msg.aipull button{min-height:44px;padding:6px 14px}}
@media(prefers-reduced-motion:reduce){html,.rcard>summary::after{transition:none}}
@media(max-width:700px){.box>table{min-width:640px}}
@media(max-width:700px){nav a,.brand{display:inline-flex;align-items:center;min-height:44px}}