/*
 * validation-cpuz-v3.css — Redesigned validation view (markup: validation-cpuz-v3.php,
 * JS: validation-cpuz-v3.js). Every rule except :root tokens and .skip-link is scoped
 * under .cpuz-v3-root to avoid clashing with the global stylesheet and the LDLC skin.
 * Labels use Inter (--sans), values IBM Plex Mono (--mono).
 */
.cpuz-v3-root *, .cpuz-v3-root *::before, .cpuz-v3-root *::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root{
    /* Warmer charcoal — reads like a tool, not a void */
    --bg:    #1e1e22;
    --s1:    #242428;
    --s2:    #2a2a2f;
    --s3:    #313137;
    --s4:    #3a3a40;
    --b0:    rgba(255,255,255,0.08);
    --b1:    rgba(255,255,255,0.14);
    --t1:    #f0f0f4;
    --t2:    #b8b8c8;
    --t3:    #8f8fa8;
    --t4:    #7a7a98;
    /* Purple — sparingly: nav, buttons, freq highlight, Fix badge */
    --pur:   #a62393;
    --pur-lo:rgba(166,35,147,0.10);
    --pur-md:rgba(166,35,147,0.18);
    --red:   #f87171;
    --amb:   #fbbf24;
    --grn:   #34d399;
    --blu:   #60a5fa;
    --vio:   #a78bfa;
    --red-bg:rgba(248,113,113,0.09);
    --amb-bg:rgba(251,191,36,0.09);
    --grn-bg:rgba(52,211,153,0.09);
    --blu-bg:rgba(96,165,250,0.09);
    --sans:  'Inter', sans-serif;
    --mono:  'IBM Plex Mono', monospace;
    --r:  8px;
    --r2: 12px;
}
.cpuz-v3-root {
    background: var(--bg);
    font-family: var(--sans);
    color: var(--t2);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body { margin: 0; }

/* ── PAGE ────────────────────────────────────── */
.cpuz-v3-root .page{
    max-width: 1480px;
    margin: 0 auto;
    padding: 16px 28px 90px;
}

/* ── HERO ────────────────────────────────────── */
.cpuz-v3-root .hero{
    display: flex;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.cpuz-v3-root .hero-main{
    flex: 1;
    min-width: 0;
}
.cpuz-v3-root .hero-crumb{
    font-size: 13px;
    color: var(--t4);
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cpuz-v3-root .hero-name{
    font-size: clamp(20px, 4.5vw, 28px);
    font-weight: 600;
    color: var(--t1);
    letter-spacing: -.4px;
    line-height: 1.15;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}
.cpuz-v3-root .hero-freq-row{
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 9px;
}
.cpuz-v3-root .hero-freq{
    font-family: var(--mono);
    font-size: clamp(38px, 10vw, 62px);
    font-weight: 300;
    color: var(--pur);
    letter-spacing: -2.5px;
    line-height: 1;
}
.cpuz-v3-root .highlight{
    color: var(--pur);
}
.cpuz-v3-root .stat-pill{
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}
.cpuz-v3-root .stat-pill--on{
    background: var(--grn-bg);
    color: var(--grn);
}
.cpuz-v3-root .stat-pill--off{
    background: var(--red-bg);
    color: var(--red);
}
.cpuz-v3-root .hero-freq-unit{
    font-family: var(--mono);
    font-size: clamp(22px, 4vw, 32px);
    color: var(--pur);
}
.cpuz-v3-root .hero-meta{
    font-size: 14px;
    color: var(--t2);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 0;
    line-height: 1.6;
}
.cpuz-v3-root .vstamp{
    background: var(--s1);
    border: 1px solid var(--b0);
    border-radius: var(--r);
    padding: 12px 20px;
    text-align: left;
    min-width: 180px;
    flex-shrink: 0;
}
.cpuz-v3-root .vstamp-label{
    font-size: 18px;
    font-weight: 600;
    color: var(--grn);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}
.cpuz-v3-root .vstamp-hl{
    color: var(--t2);
}
.cpuz-v3-root .vstamp-meta{
    font-size: 14px;
    color: var(--t4);
    line-height: 1.8;
}

/* ── DIAGNOSTICS ─────────────────────────────── */
.cpuz-v3-root .diag{
    background: var(--s1);
    border: 1px solid var(--b0);
    border-radius: var(--r2);
    overflow: hidden;
    margin-bottom: 26px;
}
.cpuz-v3-root .diag-bar{
    background: var(--s2);
    border-bottom: 1px solid var(--b0);
    padding: 0 20px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cpuz-v3-root .diag-bar-left{
    display: flex;
    align-items: center;
    gap: 12px;
}
.cpuz-v3-root .diag-dots{
    display: flex;
    gap: 6px;
}
.cpuz-v3-root .dd{
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.cpuz-v3-root .diag-title{
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    letter-spacing: .8px;
}
.cpuz-v3-root .diag-counts{
    display: flex;
    gap: 8px;
}
.cpuz-v3-root .dcount{
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 500;
}
.cpuz-v3-root .dc-e{
    background: var(--red-bg);
    color: var(--red);
}
.cpuz-v3-root .dc-w{
    background: var(--amb-bg);
    color: var(--amb);
}
.cpuz-v3-root .dc-i{
    background: var(--blu-bg);
    color: var(--blu);
}
.cpuz-v3-root .dc-ok{
    background: var(--grn-bg);
    color: var(--grn);
}
.cpuz-v3-root .diag-allgood{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 20px;
}
.cpuz-v3-root .diag-allgood-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--grn-bg);
    color: var(--grn);
}
.cpuz-v3-root .diag-allgood--bad .diag-allgood-icon{
    background: var(--red-bg);
    color: var(--red);
}
.cpuz-v3-root .diag-allgood-txt{
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cpuz-v3-root .diag-allgood-title{
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
}
.cpuz-v3-root .diag-allgood-sub{
    font-size: 12.5px;
    color: var(--t3);
}
.cpuz-v3-root .acc-item{ border-bottom: 1px solid rgba(255,255,255,.05); }
.cpuz-v3-root .acc-item:last-child{ border-bottom: none; }
.cpuz-v3-root .acc-trigger{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    cursor: pointer;
    user-select: none;
    transition: background .12s;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
}
.cpuz-v3-root .acc-trigger:hover{ background: rgba(255,255,255,.025); }
.cpuz-v3-root .acc-trigger.open{ background: rgba(255,255,255,.03); }
.cpuz-v3-root .acc-sev-badge{
    font-size: 11px;
    font-weight: 700;
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 4px 10px;
    border-radius: 4px;
    flex-shrink: 0;
    min-width: 72px;
    text-align: center;
}
.cpuz-v3-root .acc-label{
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--t1);
    line-height: 1.35;
}
.cpuz-v3-root .acc-arrow{
    flex-shrink: 0;
    color: var(--t4);
    transition: transform .2s;
}
.cpuz-v3-root .acc-trigger.open .acc-arrow{
    transform: rotate(180deg);
    color: var(--t3);
}
.cpuz-v3-root .acc-body{
    display: none;
    padding: 0 20px 18px 20px;
}
.cpuz-v3-root .acc-body.open{ display: block; }

/* ── Diagnostic message body ─────────────────── */
.cpuz-v3-root .diag-advice{ padding: 12px 0 4px; }
.cpuz-v3-root .diag-advice p{
    font-size: 14px;
    line-height: 1.75;
    margin: 0 0 8px;
}
.cpuz-v3-root .diag-obs, .cpuz-v3-root .diag-cause{ color: var(--t2); }
.cpuz-v3-root .diag-action{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--s2);
    border-radius: var(--r);
    border-left: 3px solid var(--pur);
}
.cpuz-v3-root .diag-action p{
    font-size: 13px;
    font-family: var(--mono);
    color: var(--t3);
    margin: 0;
}
.cpuz-v3-root .diag-action-bar{ display: none; }
.cpuz-v3-root .diag-val{
    font-family: var(--mono);
    font-weight: 600;
    color: var(--t1);
}
/* Reference / comparison value — visible, but calmer than the primary */
.cpuz-v3-root .diag-val--ref{
    font-weight: 600;
    color: var(--t2);
}

/* ── LAYOUT ──────────────────────────────────── */
.cpuz-v3-root .body{
    display: flex;
    gap: 26px;
    align-items: flex-start;
    margin: 0;
}
.cpuz-v3-root .main{
    flex: 1;
    min-width: 0;
}
.cpuz-v3-root .aside{
    width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── SECTION HEADERS ─────────────────────────── */
.cpuz-v3-root .sec{
    display: flex;
    align-items: center;
    gap: 0;
    margin: 28px 0 0;
    background: var(--s3);
    border-radius: 6px 6px 0 0;
    overflow: hidden;
    padding: 0;
}
.cpuz-v3-root .sec:first-child{ margin-top: 0; }
/* Tray for multi-instance sections (Storage, Display, multi-GPU): darker --bg holds
   the flush header + per-instance sub-cards so one border encloses the group. */
.cpuz-v3-root .sec-group{
    margin-top: 28px;
    margin-bottom: 28px;
    border: 1px solid var(--b0);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--bg);
}
.cpuz-v3-root .sec-group:first-child{ margin-top: 0; }
/* Header sits flush at the top of the group. */
.cpuz-v3-root .sec-group > .sec{
    margin: 0;
    border-radius: 0;
}
/* Padding zone — direct children after the header get left/right breathing room. */
.cpuz-v3-root .sec-group > .sec--sub,
.cpuz-v3-root .sec-group > .spec{
    margin: 12px 12px 0 12px;
    border: 1px solid var(--b0);
    border-radius: var(--r);
    overflow: hidden;
}
/* A .spec directly under a .sec--sub fuses with it into one block (no top border). */
.cpuz-v3-root .sec-group > .sec--sub + .spec{
    margin: 0 12px 0 12px;
    border: 1px solid var(--b0);
    border-top: none;
    border-radius: 0 0 var(--r) var(--r);
}
/* With per-instance widgets the card is header → metrics → spec: the metrics row
   keeps side borders only; the .spec below it carries the bottom rounding. */
.cpuz-v3-root .sec-group > .sec--sub + .metrics{
    margin: 0 12px 0 12px;
    border-left: 1px solid var(--b0);
    border-right: 1px solid var(--b0);
    border-radius: 0;
}
.cpuz-v3-root .sec-group > .metrics + .spec{
    margin: 0 12px 0 12px;
    border: 1px solid var(--b0);
    border-top: none;
    border-radius: 0 0 var(--r) var(--r);
}
/* A .sec--sub following a .spec squares its bottom corners to join its own .spec. */
.cpuz-v3-root .sec-group > .sec--sub{
    border-radius: var(--r) var(--r) 0 0;
    border-bottom: none;
}
/* Last child of the group gets bottom padding on the tray (covers every end shape). */
.cpuz-v3-root .sec-group > .sec--sub:last-child,
.cpuz-v3-root .sec-group > .sec--sub + .metrics:last-child,
.cpuz-v3-root .sec-group > .sec--sub + .spec:last-child,
.cpuz-v3-root .sec-group > .metrics + .spec:last-child,
.cpuz-v3-root .sec-group > .spec:last-child{
    margin-bottom: 12px;
}
/* Sub-headers for multi-instance device cards (drives, GPUs, monitors): one tier
   below a section — tighter top margin, darker background, "#N" number slot. */
.cpuz-v3-root .sec--sub{
    margin-top: 12px;
    background: var(--s2);
}
.cpuz-v3-root .sec--sub .sec-n{
    background: var(--s3);
    color: var(--t3);
}
.cpuz-v3-root .sec--sub .sec-t{
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--t2);
    font-weight: 500;
}
.cpuz-v3-root .sec + .spec{
    border-radius: 0 0 var(--r) var(--r);
    border-top: none;
    margin-top: 0;
}
.cpuz-v3-root .sec + .metrics{ margin-top: 0; }
.cpuz-v3-root .metrics + .spec{
    border-top: none;
    border-radius: 0 0 var(--r) var(--r);
}
.cpuz-v3-root .spec{
    border: 1px solid var(--b0);
    border-radius: 0 0 var(--r) var(--r);
    overflow: hidden;
    margin-bottom: 28px;
}
.cpuz-v3-root .metrics{
    display: flex;
    gap: 1px;
    margin-bottom: 0;
    background: var(--b0);
    border: 1px solid var(--b0);
    border-top: none;
    border-bottom: none;
    container-type: inline-size;
}
.cpuz-v3-root .sec-n{
    font-family: var(--mono);
    font-size: 11px;
    color: var(--t4);
    padding: 9px 14px;
    border-right: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
    background: var(--s4);
}
.cpuz-v3-root .sec-t{
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 9px 18px;
    flex-shrink: 0;
}
.cpuz-v3-root .sec-rule{ flex: 1; }
.cpuz-v3-root .sec-s{
    font-size: 12px;
    color: var(--t2);
    flex-shrink: 0;
    padding: 9px 16px;
    font-family: var(--mono);
    opacity: .7;
}
.cpuz-v3-root .sec-s.ok{ color: rgba(52,211,153,.7); }
.cpuz-v3-root .sec-s.warn{ color: rgba(251,191,36,.7); }
.cpuz-v3-root .sec-s.err{ color: rgba(248,113,113,.75); }
.cpuz-v3-root .sec-s.hi{ color: var(--pur); }

/* ── METRIC TILES ── */
.cpuz-v3-root .mtile{
    background: var(--s1);
    padding: 14px 20px;
    flex: 1 1 0;
    min-width: 0;
}

/* Tile sizing per widget type — flex-grow pulls more room toward the richer
   `bar`/`ring` tiles without forcing strict pixel widths. */
.cpuz-v3-root .mtile--val{
    flex: 1 1 0;
    min-width: 0;
}
.cpuz-v3-root .mtile--bar{
    flex: 1.5 1 0;
    min-width: 0;
}
.cpuz-v3-root .mtile--ring{
    flex: 1.5 1 0;
    min-width: 0;
}

/* Action tile — a real <button>; strip the UA chrome so it matches the div tiles.
   Centered column: icon sits under the label; sibling icon tiles stay uniform. */
.cpuz-v3-root .mtile--action{
    appearance: none;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    position: relative;   /* anchors the chevron */
    flex: 1 1 0;
    min-width: 0;
    transition: background .12s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cpuz-v3-root .mtile--action:hover{ background: var(--s2); }
.cpuz-v3-root .mtile--action:focus-visible{ outline: 2px solid var(--pur); outline-offset: -2px; }
.cpuz-v3-root .mtile-action-chev{
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--t4);
}
.cpuz-v3-root .mtile--action:hover .mtile-action-chev{ color: var(--t1); }
/* Badged icon — app-notification style: icon + count pill on its top-right corner. */
.cpuz-v3-root .mtile-action-ico{
    position: relative;
    display: inline-block;
    margin: 6px 0 4px;
    color: var(--t2);
}
.cpuz-v3-root .mtile-action-ico svg{ display: block; }
.cpuz-v3-root .mtile--action:hover .mtile-action-ico{ color: var(--t1); }
.cpuz-v3-root .mtile-action-badge{
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 999px;
    border: 2px solid var(--s1);   /* cutout ring against the tile background */
    color: #fff;
    font: 700 11px/15px var(--mono);
    text-align: center;
}
.cpuz-v3-root .mtile--action:hover .mtile-action-badge{ border-color: var(--s2); }

@container (max-width: 760px){ .cpuz-v3-root .metrics .mtile.p3{ display: none; } }
@container (max-width: 660px){ .cpuz-v3-root .metrics .mtile.p2{ display: none; } }

/* Ring widget (type === 'ring'): label on top, then donut + "Max …" caption row. */
.cpuz-v3-root .mtile-ring-row{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}
.cpuz-v3-root .mtile-ring-wrap{
    position: relative;
    width: 95px;
    height: 95px;
    flex-shrink: 0;
}
/* Scale the SVG to its container; rotate -90° so the stroke starts at 12 o'clock. */
.cpuz-v3-root .mtile-ring-wrap svg{
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(-90deg);
}
/* Right-hand column — value (.mtile-val typography) on top, "Max …" caption below. */
.cpuz-v3-root .mtile-ring-side{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cpuz-v3-root .mtile-ring-sub{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t4);
    letter-spacing: 0.3px;
}

.cpuz-v3-root .mtile-val{
    font-family: var(--mono);
    font-size: 26px;
    font-weight: 400;
    color: var(--t1);
    line-height: 1;
    margin-bottom: 5px;
    overflow-wrap: anywhere;
}
/* Title at the top of every widget tile — uppercase muted. */
.cpuz-v3-root .mtile-lbl{
    font-size: 13px;
    font-family: var(--sans);
    margin-bottom: 6px;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: var(--t4);
}

.cpuz-v3-root .mtile-sub{
    font-size: 12px;
    font-family: var(--mono);
    color: var(--t4);
    margin-top: 3px;
}

/* Bar widget — 3px progress bar with min/max axis underneath. position:relative
   + overflow:visible let the tick marker and its label escape the bar. */
.cpuz-v3-root .mtile-bar{
    position: relative;
    height: 3px;
    background: rgba(255,255,255,.07);
    border-radius: 2px;
    margin: 8px 0 4px;
    overflow: visible;
}
.cpuz-v3-root .mtile-bar-fill{
    height: 3px;
    border-radius: 2px;
}
.cpuz-v3-root .mtile-range{
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-family: var(--mono);
    color: var(--t4);
}

/* Bar cap marker — tick flagging a threshold (PL2/PPT/TDP). Renderer flips its label
   --top at markerPct ≥ 25%, --bottom below, to clear the range row's 0 / max numbers. */
.cpuz-v3-root .mtile-bar-marker{
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2.5px;
    background: #f0f0f4;
    box-shadow:
        0 0 0 1px var(--bg),
        0 0 4px rgba(0, 0, 0, 0.5);
    border-radius: 1px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
}

/* Marker label — base rules for both --top and --bottom; `left:N%` set inline. */
.cpuz-v3-root .mtile-bar-marker-lbl{
    position: absolute;
    transform: translateX(-50%);
    color: var(--t2);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
    pointer-events: none;
    background: var(--s1);
    padding: 0 4px;
    border-radius: 2px;
    z-index: 3;
}

/* Above the bar. */
.cpuz-v3-root .mtile-bar-marker-lbl--top{
    bottom: calc(100% + 6px);
}

/* Below the bar — needs the extra .mtile-range top margin (rule below). */
.cpuz-v3-root .mtile-bar-marker-lbl--bottom{
    top: calc(100% + 6px);
}

/* Give the range row room so a below-bar label doesn't overlap the 0 / max numbers. */
.cpuz-v3-root .mtile-bar:has(.mtile-bar-marker-lbl--bottom) + .mtile-range{
    margin-top: 14px;
}

/* Hint pill (data.hint) — badge anchored top-right of a bar tile, tinted to the
   bar's tone via the modifiers below. The .mtile gets position:relative inline. */
.cpuz-v3-root .mtile-hint-pill{
    position: absolute;
    top: 12px;
    right: 14px;
    padding: 3px 9px;
    border-radius: 999px;
    /* Neutral fallback when no tone modifier matches. */
    background: rgba(255, 255, 255, 0.06);
    color: var(--t2);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.4px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}
/* Tone modifiers — match the cpuz_v3_widget_tone() palette. */
.cpuz-v3-root .mtile-hint-pill--danger{
    background: rgba(248, 113, 113, 0.12);
    color: rgba(248, 113, 113, 0.95);
}
.cpuz-v3-root .mtile-hint-pill--warning{
    background: rgba(251, 191, 36, 0.12);
    color: rgba(251, 191, 36, 0.95);
}
.cpuz-v3-root .mtile-hint-pill--success{
    background: rgba(52, 211, 153, 0.12);
    color: rgba(52, 211, 153, 0.95);
}
.cpuz-v3-root .mtile-hint-pill--accent{
    background: var(--pur-lo);
    color: var(--pur);
}
.cpuz-v3-root .mtile-hint-pill--muted{
    background: rgba(255, 255, 255, 0.05);
    color: var(--t4);
}

/* WIDGET ADDITIONS — DIMM slots + storage info, both dispatched by cpuz_v3_render_widget(). */


/* DIMM-SLOTS WIDGET — one cell per physical bay; wider flex share to host 2..16 cells. */
.cpuz-v3-root .mtile--dimm{
    flex: 2 1 0;
    min-width: 0;
}

/* "(2 / 4)" counter after the title — secondary annotation inside .mtile-lbl. */
.cpuz-v3-root .mtile-dimm-count{
    color: var(--t4);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.3px;
    margin-left: 4px;
}

/* Slot grid — reflows by available width (4-up wide, fewer when narrow). */
.cpuz-v3-root .mtile-dimm-row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    gap: 6px;
    margin-top: 10px;
    justify-items: center;
}
.cpuz-v3-root .mtile-dimm-cell{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

/* The slot card — fills the cell width; fixed height keeps filled/empty cells aligned. */
.cpuz-v3-root .mtile-dimm-slot{
    width: 100%;
    max-width: 76px;
    height: 52px;
    border-radius: 3px;
    padding: 5px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
}

/* Soldered variant — hosts three lines (brand, SOLDERED tag, cap); tighter gap. */
.cpuz-v3-root .mtile-dimm-slot--soldered{
    gap: 1px;
}

/* "SOLDERED" tag between brand and capacity — mono, uppercase, muted pill. */
.cpuz-v3-root .mtile-dimm-tag{
    font-family: var(--mono);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--t3);
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 4px;
    border-radius: 2px;
    line-height: 1.1;
}

/* Filled slot — top stripe encodes KIT IDENTITY (same brand+capacity+type share a
   colour); renderer sets border-top-color inline, so no per-kit modifier classes. */
.cpuz-v3-root .mtile-dimm-slot--filled{
    background: var(--s3);
    border: 1px solid var(--b0);
    border-top: 3px solid var(--pur); /* border-top-color set inline (kit-driven) */
    padding-top: 6px;                 /* offset the thicker top border */
}

/* Empty slot — dashed purple-tinted border, transparent so the row backdrop shows. */
.cpuz-v3-root .mtile-dimm-slot--empty{
    background: transparent;
    border: 1px dashed rgba(147, 51, 234, 0.35);
}

/* Filled slot top line — vendor name, uppercase. */
.cpuz-v3-root .mtile-dimm-brand{
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    color: var(--t1);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1;
}

/* Filled slot capacity line ("8 GB") — mono, larger than the brand line. */
.cpuz-v3-root .mtile-dimm-cap{
    font-family: var(--mono);
    font-size: 13px;
    color: var(--t1);
    line-height: 1;
}

/* Unit suffix ("GB", "MB", …) next to the capacity — muted and smaller. */
.cpuz-v3-root .mtile-dimm-unit{
    font-size: 10px;
    color: var(--t3);
    margin-left: 1px;
}

/* Empty slot text — italic "empty", sans-serif to differ from the mono digits. */
.cpuz-v3-root .mtile-dimm-empty{
    font-family: var(--sans);
    font-size: 11px;
    font-style: italic;
    color: var(--t4);
    line-height: 1;
}

/* Slot label ("S0", "S1", …) — below the card for filled slots. */
.cpuz-v3-root .mtile-dimm-num{
    font-family: var(--mono);
    font-size: 9px;
    color: var(--t4);
    letter-spacing: 0.4px;
    line-height: 1;
}

/* Inside-the-card variant — empty slots place the label within the dashed frame. */
.cpuz-v3-root .mtile-dimm-num--inside{
    margin-top: 2px;
}


/* STORAGE-INFO WIDGET — drive sub-card header. Reuses .sec/.sec--sub so the
   .sec-group adjacency rules apply; --storage stacks vertically to fit the bottom bar. */
.cpuz-v3-root .sec--sub--storage{
    display: block; /* override .sec's flex; .ssub-storage-row recreates it */
    padding: 0;
}

/* Inner row recreates the .sec horizontal layout (badge → name → meta). */
.cpuz-v3-root .sec--sub--storage > .ssub-storage-row{
    display: flex;
    align-items: stretch;
}

/* Right-aligned meta: "98% used" over "Total 465 GiB", both mono. */
.cpuz-v3-root .ssub-storage-meta{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding: 7px 16px;
    flex-shrink: 0;
    font-family: var(--mono);
}
.cpuz-v3-root .ssub-storage-pct{
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    /* `color` is set inline by the renderer (matches the bar fill). */
}
.cpuz-v3-root .ssub-storage-total{
    font-size: 11px;
    color: var(--t4);
    line-height: 1.2;
}

/* Thin usage bar flush across the bottom of the card. */
.cpuz-v3-root .ssub-storage-bar{
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.cpuz-v3-root .ssub-storage-bar-fill{
    height: 100%;
    /* `width` and `background` are set inline by the renderer. */
}

@media (max-width: 600px){
    .cpuz-v3-root .sec--sub--storage > .ssub-storage-row{
        flex-wrap: wrap;
        align-items: center;
    }
    .cpuz-v3-root .sec--sub--storage .sec-t{
        flex-shrink: 1;
        min-width: 0;
    }
    .cpuz-v3-root .sec--sub--storage .sec-rule{ display: none; }
    .cpuz-v3-root .ssub-storage-meta{
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-end;
        gap: 8px;
        width: 100%;
        padding: 0 16px 8px;
    }
}

/* Single-drive (LIST) mode — widget sits between .sec and flat .spec, outside any
   .sec-group; fuse the three. Scoped `.main > …` so the .sec-group rules keep multi-drive. */
.cpuz-v3-root .main > .sec + .sec--sub--storage{
    margin-top: 0;
    border-radius: 0;
}
.cpuz-v3-root .main > .sec--sub--storage + .spec{
    margin-top: 0;
    border-top: none;
    border-radius: 0 0 var(--r) var(--r);
}

/* ── SPEC TABLE ── */
.cpuz-v3-root .spec-row{
    display: flex;
    border-bottom: 1px solid rgba(255,255,255,.045);
    background: var(--s1);
}
.cpuz-v3-root .spec-row:nth-child(even){ background: rgba(255,255,255,0.035); }
.cpuz-v3-root .spec-row:hover{ background: rgba(255,255,255,0.055) !important; }
.cpuz-v3-root .spec-row:last-child{ border-bottom: none; }
.cpuz-v3-root .sk{
    width: 220px;
    flex-shrink: 0;
    padding: 9px 16px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--t3);
    border-right: 1px solid rgba(255,255,255,.045);
    background: transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: visible;
}
.cpuz-v3-root .sv{
    flex: 1;
    padding: 9px 16px;
    font-family: var(--mono);
    font-size: 14px;
    color: var(--t2);
    background: transparent;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    line-height: 1.45;
}
.cpuz-v3-root .sv.hi{ color: var(--t1); }
.cpuz-v3-root .sv.hi .highlight{ color: var(--pur); font-weight: bold; }
.cpuz-v3-root .sv.ok{ color: var(--grn); }
.cpuz-v3-root .sv.warn{ color: var(--amb); }
.cpuz-v3-root .sv.err{ color: var(--red); }

/* ── SIDEBAR ─────────────────────────────────── */
.cpuz-v3-root .panel{
    background: var(--s1);
    border: 1px solid var(--b0);
    border-radius: var(--r2);
    overflow: hidden;
}
.cpuz-v3-root .panel-head{
    background: var(--s2);
    border-bottom: 1px solid var(--b0);
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--t4);
    text-transform: uppercase;
    letter-spacing: .9px;
}
.cpuz-v3-root .panel-body{ padding: 14px; }
.cpuz-v3-root .ss-img{
    width: 100%;
    height: 400px;
    display: block;
    object-fit: contain;
    background: var(--s2);
}
.cpuz-v3-root .ss-locked{
    background: var(--s2);
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.cpuz-v3-root .ss-ico{
    font-size: 18px;
    opacity: .13;
}
.cpuz-v3-root .ss-txt{
    font-size: 13px;
    color: var(--t4);
    text-align: center;
    line-height: 1.5;
}
.cpuz-v3-root .ss-lnk{
    font-size: 13px;
    color: var(--pur);
    text-decoration: none;
}
.cpuz-v3-root .ss-lnk:hover{ color: var(--pur); }
.cpuz-v3-root .bbcode{
    background: var(--s2);
    border: 1px solid var(--b0);
    border-radius: 4px;
    padding: 7px 10px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--t4);
    word-break: break-all;
    line-height: 1.5;
    margin-bottom: 8px;
    user-select: all;
    cursor: text;
}
.cpuz-v3-root .bsel{
    width: 100%;
    background: var(--s2);
    border: 1px solid var(--b0);
    color: var(--t2);
    font-size: 13px;
    padding: 6px 9px;
    border-radius: 5px;
    outline: none;
}

/* ── BENCHMARK PANEL ─────────────────────────── */
.cpuz-v3-root .bench-scores{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.cpuz-v3-root .bench-score-link{
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--r);
    padding: 6px 8px;
    margin: -6px -8px;
    transition: background 0.15s ease;
    cursor: pointer;
    position: relative;
}
.cpuz-v3-root .bench-score-link:hover{
    background: var(--pur-lo);
}
.cpuz-v3-root .bench-score-head{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.cpuz-v3-root .bench-score-label{
    font-size: 15px;
    color: var(--t3);
}
.cpuz-v3-root .bench-score-val{
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 500;
    color: var(--t1);
}
.cpuz-v3-root .bench-separator{
    margin: 16px 0;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--pur), transparent);
    opacity: 0.4;
}
.cpuz-v3-root .bench-compare-label{
    font-size: 12px;
    font-weight: 600;
    color: var(--t4);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 9px;
}
.cpuz-v3-root .bench-compare-row{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}
.cpuz-v3-root .bench-compare-row:last-child{ margin-bottom: 0; }
.cpuz-v3-root .bench-compare-name{
    font-size: 13px;
    color: var(--t3);
    width: 160px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cpuz-v3-root .bench-compare-track{
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,.06);
    border-radius: 3px;
    overflow: hidden;
}
.cpuz-v3-root .bench-compare-fill{
    height: 5px;
    border-radius: 3px;
}
.cpuz-v3-root .bench-compare-score{
    font-family: var(--mono);
    font-size: 13px;
    color: var(--t4);
    width: 48px;
    flex-shrink: 0;
    text-align: right;
}

/* ── ADMIN PANEL ─────────────────────────────── */
.cpuz-v3-root .admin-nav{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}
.cpuz-v3-root .admin-nav-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid var(--b0);
    background: var(--s2);
    font-size: 16px;
    font-weight: 500;
    color: var(--t2);
    text-decoration: none;
    cursor: pointer;
    transition: background .12s;
}
.cpuz-v3-root .admin-nav-btn:hover{
    background: var(--s3);
    color: var(--t1);
}
.cpuz-v3-root .admin-btn{
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 6px;
    transition: opacity .12s;
    letter-spacing: .2px;
}
.cpuz-v3-root .admin-btn:last-child{ margin-bottom: 0; }
.cpuz-v3-root .admin-btn:hover{ opacity: .82; }
.cpuz-v3-root .admin-btn-private{
    background: var(--s3);
    color: var(--t1);
    border: 1px solid var(--b1);
}
.cpuz-v3-root .admin-btn-reject{
    background: rgba(248,113,113,.15);
    color: var(--red);
    border: 1px solid rgba(248,113,113,.3);
}

/* ── Admin skin switcher ──────────────────────────── */
.cpuz-v3-root .admin-skin-switcher {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--b0);
}
.cpuz-v3-root .admin-skin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.cpuz-v3-root .admin-skin-label {
    font-size: 11px;
    color: var(--t4);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cpuz-v3-root .admin-skin-forced {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cpuz-v3-root .admin-skin-forced-msg {
    font-size: 11px;
    font-weight: 600;
    color: var(--pur);
    white-space: nowrap;
}
.cpuz-v3-root .admin-skin-reset {
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--b1);
    background: var(--s3);
    color: var(--t2);
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.cpuz-v3-root .admin-skin-reset:hover {
    background: var(--s2);
    color: var(--t1);
}
.cpuz-v3-root .admin-nav-btn.active {
    background: var(--pur-md);
    border-color: var(--pur);
    color: var(--pur);
}

/* ── SHARE PANEL ─────────────────────────────── */
.cpuz-v3-root .social_content{
    color: var(--t4);
    margin-bottom: 12px;
}
/* Share buttons — Tools-panel shape. Each brand sets --brand; the inline SVG uses
   currentColor so icon, label and border pick up the hue on hover/focus. */
.cpuz-v3-root .share-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cpuz-v3-root .share-btn{
    flex: 1 1 0;
    min-width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    background: var(--s2);
    border: 1px solid var(--b0);
    border-radius: var(--r);
    color: var(--t2);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
/* The native button ships with [hidden] and is revealed by initShare() only where
   navigator.share exists; the display:flex above would otherwise defeat [hidden]. */
.cpuz-v3-root .share-btn[hidden]{ display: none; }
.cpuz-v3-root .share-btn:hover,
.cpuz-v3-root .share-btn:focus-visible{
    background: var(--s3);
    border-color: var(--brand);
    color: var(--brand);
    outline: none;
}
.cpuz-v3-root .share-btn:active{ transform: translateY(1px); }
.cpuz-v3-root .share-btn svg{ display: block; }
/* Brand icons wear their own colour at rest (label stays neutral until hover);
   the native "Share…" button stays neutral as it's a generic system action. */
.cpuz-v3-root .share-x svg,
.cpuz-v3-root .share-reddit svg,
.cpuz-v3-root .share-facebook svg,
.cpuz-v3-root .share-whatsapp svg{ color: var(--brand); }
.cpuz-v3-root .share-btn .share-label{
    line-height: 1;
    text-align: center;
}
.cpuz-v3-root .share-native  { --brand: var(--pur); }
.cpuz-v3-root .share-x       { --brand: #e7e9ea; }
.cpuz-v3-root .share-reddit  { --brand: #ff4500; }
.cpuz-v3-root .share-facebook{ --brand: #1877f2; }
.cpuz-v3-root .share-whatsapp{ --brand: #25d366; }

/* ── Extra sections (dump + other validations) ── */
.cpuz-v3-root.ct-extra-section{
    max-width: 1480px;
    margin: 0 auto;
    padding-bottom: 1rem;
}
.cpuz-v3-root .ct-extra-head{
    font-size: 11px;
    font-family: var(--mono);
    font-weight: 600;
    color: var(--t4);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 18px 0 10px;
    border-top: 1px solid var(--b0);
}
.cpuz-v3-root .ct-dump-frame{
    display: block;
    border: 1px solid var(--b0);
    border-radius: var(--r);
    background: var(--s1);
}

/* ── Replaced inline styles ──────────────────── */
.cpuz-v3-root .panel-head--split{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cpuz-v3-root .panel-vstatus{
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}
.cpuz-v3-root .panel-vstatus-id{
    color: var(--t4);
    font-weight: 400;
    font-family: var(--mono);
}
.cpuz-v3-root .ss-body{
    padding: 0 0 10px;
    overflow: hidden;
}

/* ── Skip to content ─────────────────────────── */
.skip-link{
    position: absolute;
    top: -40px;
    left: 8px;
    background: var(--pur);
    color: #fff;
    padding: 8px 16px;
    border-radius: 0 0 6px 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    z-index: 100;
    transition: top .15s;
}
.skip-link:focus{ top: 0; }

/* ── Animations ──────────────────────────────── */
@keyframes up {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.cpuz-v3-root .hero{ animation: up .25s ease both; }
.cpuz-v3-root .diag{ animation: up .25s .05s ease both; }
.cpuz-v3-root .body{ animation: up .25s .1s ease both; }

/* ── Spec row alert icons ─────────────────────── */
.cpuz-v3-root .ct-row-icons {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
    flex-shrink: 0;
}
.cpuz-v3-root .ct-row-icon {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform .14s, opacity .14s;
    opacity: 0.75;
}
.cpuz-v3-root .ct-row-icon:hover {
    transform: scale(1.4);
    opacity: 1;
}
.cpuz-v3-root .ct-row-icon--error { background: var(--red); }
.cpuz-v3-root .ct-row-icon--warning { background: var(--amb); }
.cpuz-v3-root .ct-row-icon--info { background: var(--blu); }

/* ── TELEMETRY (timeline charts only) ─────────────
   Sits below the last hardware section; fades in like .hero / .diag / .body. */
.cpuz-v3-root .tele{
    margin-top: 32px;
    padding-top: 26px;
    animation: up .25s .15s ease both;
}

/* Sub-header above the accordion: title, divider, "Expand all" pill. */
.cpuz-v3-root .tele-charts-header{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
}
.cpuz-v3-root .tele-charts-title{
    font-size: 13px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .8px;
    flex-shrink: 0;
}
.cpuz-v3-root .tele-charts-line{
    flex: 1;
    height: 1px;
    background: var(--b0);
}
.cpuz-v3-root .tele-charts-all-btn{
    font-size: 11px;
    color: var(--t4);
    background: var(--s2);
    border: 1px solid var(--b0);
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all .12s;
    flex-shrink: 0;
}
.cpuz-v3-root .tele-charts-all-btn:hover{
    background: var(--s3);
    color: var(--t2);
}

/* Per-chart accordion — each card lazy-renders its ApexChart on first open. */
.cpuz-v3-root .chart-acc{
    border: 1px solid var(--b0);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 6px;
}
.cpuz-v3-root .chart-acc:last-child{ margin-bottom: 0; }
.cpuz-v3-root .chart-acc-trigger{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    cursor: pointer;
    user-select: none;
    background: var(--s2);
    border: none;
    width: 100%;
    color: inherit;
    font-family: inherit;
    transition: background .12s;
}
.cpuz-v3-root .chart-acc-trigger:hover{ background: var(--s3); }
.cpuz-v3-root .chart-acc-trigger.open{ background: var(--s3); }
.cpuz-v3-root .chart-acc-left{
    display: flex;
    align-items: center;
    gap: 12px;
}
.cpuz-v3-root .chart-acc-title{
    font-size: 13px;
    font-weight: 500;
    color: var(--t1);
}
.cpuz-v3-root .chart-acc-sku{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t4);
}
.cpuz-v3-root .chart-acc-arrow{
    color: var(--t4);
    transition: transform .2s;
    flex-shrink: 0;
}
.cpuz-v3-root .chart-acc-trigger.open .chart-acc-arrow{ transform: rotate(180deg); }
.cpuz-v3-root .chart-acc-body{
    display: none;
    background: var(--s1);
    padding: 14px 16px;
}
.cpuz-v3-root .chart-acc-body.open{ display: block; }

/* ── XOC — "Overclocking by …" hero block ─────────
   Replaces System Analysis on XOC dumps: hero tile + summary chips, accent via --xoc-accent. */
.cpuz-v3-root .xoc-oc{
    background: var(--s1);
    border: 1px solid var(--b0);
    border-radius: var(--r2);
    overflow: hidden;
    margin-bottom: 24px;
}
/* Header bar mirrors the System Analysis (.diag-bar) header. */
.cpuz-v3-root .xoc-oc-head{
    background: var(--s2);
    border-bottom: 1px solid var(--b0);
    padding: 0 20px;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    letter-spacing: .8px;
}
.cpuz-v3-root .xoc-oc-head b{
    color: var(--t1);
    font-weight: 600;
}
/* Validated-status badge pushed to the right of the header bar (inline colour). */
.cpuz-v3-root .xoc-oc-status{
    margin-left: auto;
    display: flex;
    align-items: center;
    font-size: 18px;
    letter-spacing: 0;
    white-space: nowrap;
}
.cpuz-v3-root .xoc-oc-status svg{
    width: 18px;
    height: 18px;
}
.cpuz-v3-root .xoc-bolt{
    width: 16px;
    height: 16px;
    color: var(--pur);
    flex-shrink: 0;
}
/* Stage = focused hero (left) + summary chips column (right). */
.cpuz-v3-root .xoc-stage{
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 20px 22px 20px;
}
/* Per-kind accent — shared by hero + chips. */
.cpuz-v3-root .xoc-hero--cpu, .cpuz-v3-root .xoc-sum--cpu{ --xoc-accent: var(--pur); }
.cpuz-v3-root .xoc-hero--ram, .cpuz-v3-root .xoc-sum--ram{ --xoc-accent: var(--blu); }
.cpuz-v3-root .xoc-hero--gpu, .cpuz-v3-root .xoc-sum--gpu{ --xoc-accent: var(--grn); }
.cpuz-v3-root .xoc-sum--mb { --xoc-accent: var(--amb); }
/* Icons are SVGs recoloured to the accent via CSS mask (source files have fixed
   black fills); mask-image is keyed per kind, shared across both *-ico sizes. */
.cpuz-v3-root .xoc-hero-ico,
.cpuz-v3-root .xoc-sum-ico{
    background-color: var(--xoc-accent);
    -webkit-mask-repeat: no-repeat;        mask-repeat: no-repeat;
    -webkit-mask-position: center;         mask-position: center;
    -webkit-mask-size: contain;            mask-size: contain;
}
.cpuz-v3-root .xoc-hero--cpu .xoc-hero-ico, .cpuz-v3-root .xoc-sum--cpu .xoc-sum-ico{
    -webkit-mask-image: url(../images/icon-cpu.svg); mask-image: url(../images/icon-cpu.svg);
}
.cpuz-v3-root .xoc-hero--ram .xoc-hero-ico, .cpuz-v3-root .xoc-sum--ram .xoc-sum-ico{
    -webkit-mask-image: url(../images/icon-ram.svg); mask-image: url(../images/icon-ram.svg);
}
.cpuz-v3-root .xoc-hero--gpu .xoc-hero-ico, .cpuz-v3-root .xoc-sum--gpu .xoc-sum-ico{
    -webkit-mask-image: url(../images/icon-gpu.svg); mask-image: url(../images/icon-gpu.svg);
}
.cpuz-v3-root .xoc-sum--mb .xoc-sum-ico{
    -webkit-mask-image: url(../images/icon-mb.svg);  mask-image: url(../images/icon-mb.svg);
}

/* ── Hero — the focused (overclocked) component ── */
.cpuz-v3-root .xoc-hero{
    --xoc-accent: var(--pur);
    position: relative;
    flex: 1.8 1 0; /* hero takes the larger share, chips the remainder */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--s2);
    border: 1px solid var(--b0);
    border-top: 3px solid var(--xoc-accent);
    border-radius: var(--r);
    padding: 20px 22px 20px;
}
/* Rejected dump: paint the whole hero red (icon, coin, headline, sub, bubble). */
.cpuz-v3-root .xoc-hero--rejected{
    --xoc-accent: var(--red);
}
.cpuz-v3-root .xoc-hero--rejected .xoc-hero-icowrap{
    --xoc-ico-color: var(--red);
}
.cpuz-v3-root .xoc-hero--rejected .hero-freq,
.cpuz-v3-root .xoc-hero--rejected .hero-freq-unit,
.cpuz-v3-root .xoc-hero--rejected .hero-name,
.cpuz-v3-root .xoc-hero--rejected .xoc-hero-lbl{
    color: var(--red);
}
.cpuz-v3-root .xoc-hero--rejected .xoc-hero-lbl{
    border-color: var(--red);
}
/* Icon + status coin. The wrapper hugs the icon so the coin anchors to the
   artwork's bottom-right corner, not the wide mask box. */
.cpuz-v3-root .xoc-hero-icowrap{
    --xoc-ico-color: var(--t1); /* icon colour; the coin inherits it */
    position: relative;
    display: inline-block;
    margin: 0 auto 20px;
    line-height: 0;
}
.cpuz-v3-root .xoc-hero-ico{
    width: 96px;
    max-width: 100%;
    height: 72px;
    background-color: var(--xoc-ico-color);
}
/* Status coin on the icon's bottom-right (inline colour: check / clock / cross). */
.cpuz-v3-root .xoc-hero-badge{
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--s2);
    color: var(--xoc-ico-color);
    border: 2px solid currentColor;
    box-shadow: 0 0 0 3px var(--s2);
}
/* Hero title/sub reuse the page hero's classes (.hero-freq*, .hero-name).
   Category-name pill anchored top-left, .mtile-hint-pill style. */
.cpuz-v3-root .xoc-hero-lbl{
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--t2);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--t2);
}

/* ── Summary chips — the along-for-the-ride components ── */
.cpuz-v3-root .xoc-sum{
    flex: 1 1 0;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cpuz-v3-root .xoc-sum-item{
    --xoc-accent: var(--pur);
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--s2);
    border: 1px solid var(--b0);
    border-left: 3px solid var(--xoc-accent);
    border-radius: var(--r);
    padding: 14px 16px;
}
.cpuz-v3-root .xoc-sum-ico{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-color: var(--t2);
}
.cpuz-v3-root .xoc-sum-body{
    min-width: 0;
}
.cpuz-v3-root .xoc-sum-lbl{
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--t3);
}
.cpuz-v3-root .xoc-sum-lbl::before{
    content: "> ";  /* prefix, e.g. "> MOTHERBOARD" */
}
.cpuz-v3-root .xoc-sum-val{
    margin-top: 3px;
    font-family: var(--mono);
    font-size: 19px;
    font-weight: 300;
    line-height: 1.15;
    color: var(--t1);
    overflow-wrap: anywhere;
}
.cpuz-v3-root .xoc-sum-unit{
    font-size: 13px;
    color: var(--t3);
}
.cpuz-v3-root .xoc-sum-sub{
    margin-top: 2px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t3);
}

/* ── RESPONSIVE — narrow screens (< 1024px) ───────
   Late in the file so each rule overrides its base: aside and XOC stage stack. */
@media (max-width: 1024px){
    .cpuz-v3-root .body{
        flex-direction: column;
        gap: 18px;
    }
    .cpuz-v3-root .aside{
        width: 100%;
    }
    /* XOC hero: hero + summaries stack; type scales down. */
    .cpuz-v3-root .xoc-stage{
        flex-direction: column;
    }
    .cpuz-v3-root .xoc-hero-ico{
        height: 60px;
    }
    /* Scoped to the XOC hero so the page hero's own .hero-freq is untouched. */
    .cpuz-v3-root .xoc-hero .hero-freq{
        font-size: 46px;
    }
    .cpuz-v3-root .xoc-sum{
        min-width: 0;
    }
}

/* ── RESPONSIVE — phones & small tablets (≤ 640px) ───────
   Desktop-first base; the 1024px block only stacks the columns. Without this block the
   non-wrapping metric strip (tile min-widths) stretched .page past the viewport,
   clipping the hero and spec tables. Here type scales and the label column narrows. */
@media (max-width: 640px){
    .cpuz-v3-root .page{ padding: 12px 12px 64px; }
    .cpuz-v3-root .hero{ gap: 14px; }
    .cpuz-v3-root .vstamp{ width: 100%; }
    .cpuz-v3-root .sk{ width: 38%; min-width: 104px; padding: 9px 12px; }
    .cpuz-v3-root .sv{ padding: 9px 12px; }
}

/* ── Tools panel ───────────────────────────────────────────────────────────
   Copy / QR / Archive / Download / Customer-Service icon-above-label buttons. */
.cpuz-v3-root .tools-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cpuz-v3-root .tool-btn{
    flex: 1 1 0;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    background: var(--s2);
    border: 1px solid var(--b0);
    border-radius: var(--r);
    color: var(--t2);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
.cpuz-v3-root .tool-btn:hover{
    background: var(--pur-lo);
    border-color: var(--pur-md);
    color: var(--pur);
}
.cpuz-v3-root .tool-btn:active{ transform: translateY(1px); }
.cpuz-v3-root .tool-btn svg{ display: block; }
.cpuz-v3-root .tool-btn .tool-label{
    line-height: 1;
    text-align: center;
}
.cpuz-v3-root .tool-btn[data-placeholder]{ color: var(--t4); }
.cpuz-v3-root .tool-btn.is-flash,
.cpuz-v3-root .tool-btn.is-flash:hover{
    background: var(--grn-bg);
    border-color: var(--grn);
    color: var(--grn);
}

/* ── Modal shell — shared by every vm- modal (partials) plus the skin-local
      Archives/Service modals. Per-modal cards override padding/max-width. ── */
.cpuz-v3-root .vm-modal{
    position: fixed;
    inset: 0;
    background: rgba(10,10,14,0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: ctQrFade .18s ease-out both;
}
.cpuz-v3-root .vm-modal[hidden]{ display: none; }
@keyframes ctQrFade{ from{ opacity: 0; } to{ opacity: 1; } }

.cpuz-v3-root .vm-card{
    background: #fff;
    border-radius: var(--r2);
    padding: 1.5rem 1.5rem 1.25rem;
    width: 100%;
    text-align: left;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    position: relative;
    animation: ctQrPop .22s ease-out both;
}
.cpuz-v3-root .vm-card .vm-title{ text-align: left; padding-right: 2rem; }

/* QR card keeps its centred, roomier layout. */
.cpuz-v3-root .vm-qr-card{
    padding: 2rem 2rem 1.5rem;
    max-width: 420px;
    text-align: center;
}
.cpuz-v3-root .vm-qr-card .vm-title{ text-align: center; padding-right: 0; }
@keyframes ctQrPop{
    from{ transform: scale(.94); opacity: 0; }
    to{   transform: scale(1);   opacity: 1; }
}
.cpuz-v3-root .vm-close{
    position: absolute;
    top: .5rem;
    right: .75rem;
    width: 2.25rem;
    height: 2.25rem;
    background: transparent;
    border: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: #6b7682;
    cursor: pointer;
    border-radius: 4px;
    transition: background .12s, color .12s;
}
.cpuz-v3-root .vm-close:hover{ background: #f0f2f5; color: #0a1a2e; }
.cpuz-v3-root .vm-title{
    margin: 0 0 .4rem;
    font: 700 1.15rem/1.3 var(--sans);
    color: #0a1a2e;
}
.cpuz-v3-root .vm-qr-subtitle{
    margin: 0 0 1.25rem;
    font: 400 .9rem/1.4 var(--sans);
    color: #6b7682;
}
.cpuz-v3-root .vm-qr-target{
    display: inline-block;
    padding: 12px;
    background: #fff;
    border: 1px solid #e1e5ea;
    border-radius: 6px;
    margin-bottom: 1rem;
    min-width: 280px;
    min-height: 280px;
}
.cpuz-v3-root .vm-qr-target img,
.cpuz-v3-root .vm-qr-target canvas,
.cpuz-v3-root .vm-qr-target table{ display: block; margin: 0 auto; }
.cpuz-v3-root .vm-qr-url{
    margin: 0;
    font: 400 .75rem/1.4 var(--mono);
    color: #6b7682;
    word-break: break-all;
}

/* ── Archives modal (vm- shell; scoped to .ct-arch-*) ───────── */
.cpuz-v3-root .ct-arch-card{ padding: 1.5rem 1.5rem 1.25rem; max-width: 460px; }

.cpuz-v3-root .ct-arch-body{ min-height: 64px; }
.cpuz-v3-root .ct-arch-msg{
    margin: 0;
    padding: 1.5rem .5rem;
    text-align: center;
    font: 400 .9rem/1.4 var(--sans);
    color: #6b7682;
}
.cpuz-v3-root .ct-arch-list{
    max-height: 50vh;
    overflow-y: auto;
    margin-top: .5rem;
    border-top: 1px solid #eef1f4;
}
.cpuz-v3-root .ct-arch-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid #eef1f4;
    cursor: pointer;
    transition: background .12s;
}
.cpuz-v3-root .ct-arch-row:hover{ background: #f4f6f8; }
.cpuz-v3-root .ct-arch-row:focus{ outline: 2px solid var(--pur-md, #8b7cff); outline-offset: -2px; }
.cpuz-v3-root .ct-arch-main{
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.cpuz-v3-root .ct-arch-ico{
    flex: 0 0 auto;
    display: inline-flex;
    color: #97a0ab;
}
.cpuz-v3-root .ct-arch-ico svg{ display: block; }
.cpuz-v3-root .ct-arch-row:hover .ct-arch-ico{ color: #5b6470; }
.cpuz-v3-root .ct-arch-date{
    font: 500 .85rem/1.3 var(--mono);
    color: #2a3340;
}
.cpuz-v3-root .ct-arch-status{
    flex: 0 0 auto;
    font: 600 .72rem/1 var(--sans);
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.cpuz-v3-root .ct-arch-status.is-ok{   color:#0f8a5f; background:#e8f7f0; border-color:#c2e9d8; }
.cpuz-v3-root .ct-arch-status.is-warn{ color:#9a6a00; background:#fbf2dd; border-color:#efdcab; }
.cpuz-v3-root .ct-arch-status.is-bad{  color:#c63828; background:#fceae7; border-color:#f3c8c1; }
.cpuz-v3-root .ct-arch-capped{
    margin: .6rem 0 0;
    text-align: center;
    font: 400 .72rem/1.3 var(--sans);
    color: #97a0ab;
}

/* ── BSOD modal (vm- shell; scoped to .vm-bsod-*) ───────────── */
.cpuz-v3-root .vm-bsod-card{ padding: 1.5rem 1.5rem 1.25rem; max-width: 672px; }

.cpuz-v3-root .vm-bsod-body{
    max-height: 65vh;
    overflow-y: auto;
    margin-top: .5rem;
}
/* Empty state — shown instead of the list when the PC never crashed. */
.cpuz-v3-root .vm-bsod-none{
    margin: .35rem 0 0;
    font: 400 .78rem/1.5 var(--sans);
    color: #6b7682;
}
.cpuz-v3-root .vm-bsod-item{
    border: 1px solid #eef1f4;
    border-radius: 6px;
    padding: 12px 48px 12px 24px;
    margin-bottom: 10px;
}
.cpuz-v3-root .vm-bsod-item:last-child{ margin-bottom: 0; }
.cpuz-v3-root .vm-bsod-head{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 8px;
}
.cpuz-v3-root .vm-bsod-name{
    font: 600 .8rem/1.3 var(--mono);
    color: #2a3340;
    overflow-wrap: anywhere;
}
.cpuz-v3-root .vm-bsod-desc{
    margin: 0 0 8px;
    font: 400 .78rem/1.5 var(--sans);
    color: #6b7682;
}
.cpuz-v3-root .vm-bsod-code{
    font: 600 .78rem/1 var(--mono);
    color: #c63828;
    background: #fceae7;
    border: 1px solid #f3c8c1;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.cpuz-v3-root .vm-bsod-date{
    font: 500 .85rem/1.3 var(--mono);
    color: #2a3340;
    margin-left: auto;
}
.cpuz-v3-root .vm-bsod-mrow{
    display: flex;
    gap: 12px;
    padding: 2px 0;
}
/* display:flex above beats the UA [hidden] rule — restore it for the JS-filled row. */
.cpuz-v3-root .vm-bsod-mrow[hidden]{ display: none; }
.cpuz-v3-root .vm-bsod-mk{
    flex: 0 0 130px;
    font: 400 .78rem/1.5 var(--sans);
    color: #6b7682;
}
.cpuz-v3-root .vm-bsod-mv{
    font: 400 .78rem/1.5 var(--mono);
    color: #2a3340;
    overflow-wrap: anywhere;
}
/* ── Boot Time modal (vm- shell; scoped to .vm-boot-*) ──────── */
.cpuz-v3-root .vm-boot-card{ padding: 1.5rem 1.5rem 1.25rem; max-width: 560px; }

.cpuz-v3-root .vm-boot-body{
    max-height: 65vh;
    overflow-y: auto;
    margin-top: .75rem;
}
/* Waterfall row: label | shared-scale bar | duration. Groups bold, sub-phases indented. */
.cpuz-v3-root .vm-boot-row{
    display: grid;
    grid-template-columns: minmax(118px, 42%) 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
}
.cpuz-v3-root .vm-boot-lbl{
    font: 400 .8rem/1.4 var(--sans);
    color: #2a3340;
    overflow-wrap: anywhere;
}
.cpuz-v3-root .vm-boot-row--group .vm-boot-lbl{ font-weight: 600; }
.cpuz-v3-root .vm-boot-row--sub .vm-boot-lbl{
    padding-left: 16px;
    color: #6b7682;
}
.cpuz-v3-root .vm-boot-val{
    font: 500 .8rem/1.3 var(--mono);
    color: #2a3340;
    text-align: right;
    white-space: nowrap;
}
.cpuz-v3-root .vm-boot-track{
    height: 6px;
    background: #eef1f4;
    border-radius: 999px;
    overflow: hidden;
}
.cpuz-v3-root .vm-boot-bar{
    display: block;
    height: 100%;
    background: var(--pur);
    border-radius: 999px;
}
.cpuz-v3-root .vm-boot-row--sub .vm-boot-bar{ opacity: .45; }
/* Barless rows (apps count, Total): keep the duration in the right column. */
.cpuz-v3-root .vm-boot-row--nobar .vm-boot-val{ grid-column: 3; }
.cpuz-v3-root .vm-boot-row--total{
    border-top: 1px solid #eef1f4;
    margin-top: 6px;
    padding-top: 10px;
}
.cpuz-v3-root .vm-boot-row--total .vm-boot-lbl,
.cpuz-v3-root .vm-boot-row--total .vm-boot-val{ font-weight: 700; }
.cpuz-v3-root .vm-boot-row--total .vm-boot-val{ grid-column: 3; }

/* ── WHEA modal (vm- shell; scoped to .vm-whea-*) ──────────── */
.cpuz-v3-root .vm-whea-card{ padding: 1.5rem 1.5rem 1.25rem; max-width: 672px; }
.cpuz-v3-root .vm-whea-sum{
    margin: .35rem 0 .75rem;
    font: 400 .78rem/1.5 var(--sans);
    color: #6b7682;
}
.cpuz-v3-root .vm-whea-body{
    max-height: 62vh;
    overflow-y: auto;
}
.cpuz-v3-root .vm-whea-item{
    border: 1px solid #eef1f4;
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 8px;
}
.cpuz-v3-root .vm-whea-item:last-child{ margin-bottom: 0; }
.cpuz-v3-root .vm-whea-head{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.cpuz-v3-root .vm-whea-sev{
    font: 600 .7rem/1 var(--mono);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.cpuz-v3-root .vm-whea-sev--fatal{
    color: #c63828; background: #fceae7; border: 1px solid #f3c8c1;
}
.cpuz-v3-root .vm-whea-sev--corrected{
    color: #9a6300; background: #fdf3e0; border: 1px solid #f2ddb4;
}
.cpuz-v3-root .vm-whea-sev--info,
.cpuz-v3-root .vm-whea-sev--unknown{
    color: #6b7682; background: #f2f4f6; border: 1px solid #e2e6ea;
}
.cpuz-v3-root .vm-whea-name{
    font: 600 .8rem/1.3 var(--sans);
    color: #2a3340;
    overflow-wrap: anywhere;
}
.cpuz-v3-root .vm-whea-when{
    font: 500 .8rem/1.3 var(--mono);
    color: #6b7682;
    margin-left: auto;
    white-space: nowrap;
}
.cpuz-v3-root .vm-whea-det{
    margin: 6px 0 0;
    font: 400 .78rem/1.5 var(--sans);
    color: #6b7682;
}
/* Reporting device is gone from this machine (hardware changed since the error was
   logged): keep the row readable but clearly secondary. */
.cpuz-v3-root .vm-whea-item--absent{
    opacity: .55;
    background: #fafbfc;
}

/* ── Drivers modal (vm- shell; scoped to .vm-drv-*) ────────── */
.cpuz-v3-root .vm-drv-card{ padding: 1.5rem 1.5rem 1.25rem; max-width: 672px; }
.cpuz-v3-root .vm-drv-sum{
    margin: .35rem 0 .75rem;
    font: 400 .78rem/1.5 var(--sans);
    color: #6b7682;
}
.cpuz-v3-root .vm-drv-body{
    max-height: 62vh;
    overflow-y: auto;
}
.cpuz-v3-root .vm-drv-grp{
    border: 1px solid #eef1f4;
    border-radius: 6px;
    padding: 10px 16px 12px;
    margin-bottom: 8px;
}
.cpuz-v3-root .vm-drv-grp:last-child{ margin-bottom: 0; }
.cpuz-v3-root .vm-drv-ghead{
    display: flex;
    align-items: center;
    gap: 6px 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f2f4f6;
}
.cpuz-v3-root .vm-drv-glbl{
    font: 600 .7rem/1.3 var(--mono);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #2a3340;
    overflow-wrap: anywhere;
}
/* Group colour carries the severity: no per-row pill, the heading says it once. */
.cpuz-v3-root .vm-drv-grp--fault .vm-drv-glbl{ color: #c63828; }
.cpuz-v3-root .vm-drv-grp--missing .vm-drv-glbl{ color: #9a6300; }
.cpuz-v3-root .vm-drv-gnum{
    font: 600 .7rem/1 var(--mono);
    color: #6b7682;
    background: #f2f4f6;
    border: 1px solid #e2e6ea;
    border-radius: 999px;
    padding: 3px 8px;
    margin-left: auto;
}
.cpuz-v3-root .vm-drv-item{
    padding-top: 8px;
}
.cpuz-v3-root .vm-drv-name{
    display: block;
    font: 600 .8rem/1.35 var(--sans);
    color: #2a3340;
    overflow-wrap: anywhere;
}
.cpuz-v3-root .vm-drv-sub{
    display: block;
    margin-top: 2px;
    font: 400 .78rem/1.45 var(--sans);
    color: #6b7682;
    overflow-wrap: anywhere;
}
/* Nothing the user can act on (disabled by choice, phantom port, virtual adapter):
   listed for completeness, but visibly secondary and never counted. */
.cpuz-v3-root .vm-drv-grp--muted{
    opacity: .55;
    background: #fafbfc;
}

/* ── Processes modal (vm- shell; scoped to .vm-proc-*) ──────── */
.cpuz-v3-root .vm-proc-card{ padding: 1.5rem 1.5rem 1.25rem; max-width: 672px; }
.cpuz-v3-root .vm-proc-sum{
    margin: .35rem 0 .75rem;
    font: 400 .78rem/1.5 var(--sans);
    color: #6b7682;
}
.cpuz-v3-root .vm-proc-body{
    max-height: 62vh;
    overflow-y: auto;
}
.cpuz-v3-root .vm-proc-grp{
    border: 1px solid #eef1f4;
    border-radius: 6px;
    padding: 10px 16px 12px;
    margin-bottom: 8px;
}
.cpuz-v3-root .vm-proc-grp:last-child{ margin-bottom: 0; }
.cpuz-v3-root .vm-proc-ghead{
    display: flex;
    align-items: center;
    gap: 6px 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f2f4f6;
}
.cpuz-v3-root .vm-proc-glbl{
    font: 600 .7rem/1.3 var(--mono);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #2a3340;
    overflow-wrap: anywhere;
}
/* Group colour carries the class: malware red, bloatware amber. */
.cpuz-v3-root .vm-proc-grp--malware .vm-proc-glbl{ color: #c63828; }
.cpuz-v3-root .vm-proc-grp--bloat .vm-proc-glbl{ color: #9a6300; }
.cpuz-v3-root .vm-proc-gnum{
    font: 600 .7rem/1 var(--mono);
    color: #6b7682;
    background: #f2f4f6;
    border: 1px solid #e2e6ea;
    border-radius: 999px;
    padding: 3px 8px;
    margin-left: auto;
}
.cpuz-v3-root .vm-proc-item{
    padding-top: 8px;
}
.cpuz-v3-root .vm-proc-name{
    display: block;
    font: 600 .8rem/1.35 var(--sans);
    color: #2a3340;
    overflow-wrap: anywhere;
}
.cpuz-v3-root .vm-proc-sub{
    display: block;
    margin-top: 2px;
    font: 400 .74rem/1.4 var(--mono);
    color: #6b7682;
    overflow-wrap: anywhere;
}
.cpuz-v3-root .vm-proc-why{
    display: block;
    margin-top: 2px;
    font: 400 .78rem/1.45 var(--sans);
    color: #6b7682;
    overflow-wrap: anywhere;
}

/* ── Service modal (vm- shell; scoped to .ct-svc-*) ─────────── */
.cpuz-v3-root .ct-svc-card{ padding: 2rem 2rem 1.5rem; max-width: 560px; }
.cpuz-v3-root .ct-svc-intro{
    margin: 0 0 1.25rem;
    font: 400 .9rem/1.5 var(--sans);
    color: #6b7682;
}
.cpuz-v3-root .ct-svc-label{
    display: block;
    margin: 0 0 .35rem;
    font: 600 .78rem/1.2 var(--sans);
    color: #2a3340;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.cpuz-v3-root .ct-svc-input{
    width: 100%;
    box-sizing: border-box;
    padding: .7rem .85rem;
    font: 500 .95rem/1.2 var(--mono);
    color: #0a1a2e;
    background: #fff;
    border: 1px solid #d4dae1;
    border-radius: 8px;
    text-transform: uppercase;
    transition: border-color .12s, box-shadow .12s;
}
.cpuz-v3-root .ct-svc-input:focus{
    outline: none;
    border-color: var(--pur);
    box-shadow: 0 0 0 3px var(--pur-md);   /* subtle magenta ring (--pur-md is a translucent tint) */
}
.cpuz-v3-root .ct-svc-name{
    margin: .75rem 0 0;
    font: 600 .9rem/1.3 var(--sans);
    color: #0f8a5f;
}
.cpuz-v3-root .ct-svc-name::before{
    content: '';
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .45rem;
    border-radius: 50%;
    background: #0f8a5f;
    vertical-align: middle;
}
.cpuz-v3-root .ct-svc-send{
    margin: 1.1rem 0 0;
    width: 100%;
    padding: .8rem 1rem;
    font: 700 .95rem/1.2 var(--sans);
    color: #fff;
    background: var(--pur);   /* solid brand magenta (#a62393) — readable with white text */
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, opacity .12s;
}
.cpuz-v3-root .ct-svc-send:hover{ background: #8c1d7d; }   /* darker magenta */
.cpuz-v3-root .ct-svc-send:disabled{
    background: #c7ccd4;
    color: #fff;
    cursor: not-allowed;
}
.cpuz-v3-root .ct-svc-msg{
    margin: .85rem 0 0;
    padding: .6rem .75rem;
    font: 500 .85rem/1.4 var(--sans);
    border-radius: 6px;
}
.cpuz-v3-root .ct-svc-msg.is-ok{  color:#0f8a5f; background:#e8f7f0; border:1px solid #c2e9d8; }
.cpuz-v3-root .ct-svc-msg.is-err{ color:#c63828; background:#fceae7; border:1px solid #f3c8c1; }
.cpuz-v3-root .ct-svc-footer{
    margin: 1.4rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #eef1f4;
    font: 400 .72rem/1.45 var(--sans);
    color: #97a0ab;
}
.cpuz-v3-root .ct-svc-footer a{ color: var(--pur); text-decoration: underline; }
.cpuz-v3-root .ct-svc-footer a:hover{ color: #8c1d7d; }