/*
 * validation-cpuz-v3.css — Redesigned validation view styles.
 *
 * Every rule (except :root variables, .skip-link and .header) is scoped under
 * .cpuz-v3-root (applied to <main> by validation-cpuz-v3.php) to avoid conflicts
 * with the site's global stylesheet and the LDLC skin. Design tokens live in
 * :root below. Labels use Inter (--sans), values use IBM Plex Mono (--mono).
 *
 * @see validation-cpuz-v3.php   markup
 * @see validation-cpuz-v3.js    interactions
 */
.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; }

/* ── NAV ─────────────────────────────────────── */
.cpuz-v3-root .nav{
    background: #0d0d13;
    border-bottom: 2px solid var(--pur);
    position: sticky;
    top: 0;
    z-index: 30;
}
.cpuz-v3-root .nav-w{
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 28px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cpuz-v3-root .nav-brand{
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.cpuz-v3-root .nav-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cpuz-v3-root .nav-icon{
    width: 32px;
    height: 32px;
    background: var(--pur);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cpuz-v3-root .nav-name{
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .3px;
    line-height: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cpuz-v3-root .nav-name-cpuz{
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}
.cpuz-v3-root .nav-name-validator{
    color: var(--pur);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.cpuz-v3-root .nav-sub{ display: none; }
.cpuz-v3-root .nav-links{ display: flex; }
.cpuz-v3-root .nav-links a{
    font-size: 13px;
    color: var(--t4);
    text-decoration: none;
    padding: 5px 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: color .14s;
}
.cpuz-v3-root .nav-links a:hover{ color: var(--t3); }
.cpuz-v3-root .nav-auth{
    display: flex;
    gap: 7px;
    align-items: center;
}
.cpuz-v3-root .nav-btn{
    font-size: 12px;
    padding: 5px 13px;
    border-radius: 6px;
    border: 1px solid rgba(166,35,147,.3);
    background: transparent;
    color: rgba(166,35,147,.75);
    cursor: pointer;
    text-decoration: none;
    transition: all .14s;
}
.cpuz-v3-root .nav-btn:hover{
    background: var(--pur-lo);
    color: var(--pur);
}
.cpuz-v3-root .nav-btn.f{
    background: var(--pur);
    color: #fff;
    border-color: var(--pur);
}
.cpuz-v3-root .nav-btn.f:hover{ background: #7c22d4; }

/* ── STATUS BANNER ───────────────────────────── */
.cpuz-v3-root .status-banner{
    background: var(--s1);
    border-bottom: 1px solid var(--b0);
}
.cpuz-v3-root .status-banner-w{
    max-width: 1480px;
    margin: 0 auto;
    padding: 10px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cpuz-v3-root .status-dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cpuz-v3-root .status-text{
    font-size: 15px;
    font-weight: 500;
    color: var(--t1);
}
.cpuz-v3-root .status-sub{
    font-size: 13px;
    color: var(--t3);
}
.cpuz-v3-root .status-pills{
    display: flex;
    gap: 7px;
    margin-left: auto;
    flex-wrap: wrap;
}
.cpuz-v3-root .spill{
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 500;
}
.cpuz-v3-root .spill-e{
    background: var(--red-bg);
    color: var(--red);
}
.cpuz-v3-root .spill-w{
    background: var(--amb-bg);
    color: var(--amb);
}
.cpuz-v3-root .spill-i{
    background: var(--blu-bg);
    color: var(--blu);
}


/* ── 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 .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);
}

/* Legacy compat */
.cpuz-v3-root .acc-explanation{
    font-size: 14px;
    color: var(--t3);
    line-height: 1.75;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--b0);
}
.cpuz-v3-root .acc-solution{
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.cpuz-v3-root .acc-solution-label{
    font-size: 11px;
    font-weight: 600;
    color: var(--pur);
    text-transform: uppercase;
    letter-spacing: .7px;
    flex-shrink: 0;
    margin-top: 2px;
    background: var(--pur-lo);
    border: 1px solid var(--pur);
    border-radius: 4px;
    padding: 2px 7px;
}
.cpuz-v3-root .acc-solution-text{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t3);
    line-height: 1.75;
}
.cpuz-v3-root .acc-solution-text strong{
    color: var(--t2);
    font-weight: 500;
}

/* ── 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; }
/* Continuous container for multi-instance sections (Storage, Display, multi-GPU).
   Darker --bg "tray" holding the flush header plus the per-instance sub-cards, so
   one border encloses the whole 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 .sec + .drive{
    border-radius: 0 0 var(--r) var(--r);
    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 .drive{ 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;
}

@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 widget cap marker — vertical tick flagging a reference threshold (e.g. the
   PL2/PPT/TDP cap when peak overshoots). The renderer flips its label above the
   bar (--top) at markerPct ≥ 25% or below (--bottom) under 25%, 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 (memory) + storage info (per-drive header).
   Both are part of the internal.widgets payload dispatched by
   cpuz_v3_render_widget(); grouped here after the bar-widget rules. */


/* DIMM-SLOTS WIDGET — one cell per physical DIMM bay, filled/empty at a glance.
   Sits in the .metrics flex row but needs more room 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 — charcoal with a coloured top stripe encoding KIT IDENTITY: same
   brand+capacity+type share a colour. The renderer sets border-top-color inline
   from a fixed kit palette, so any number of kits works without 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 — acts as the drive sub-card header (single or multi-drive):
   letter badge + name on the left, usage stats on the right, thin bar at the bottom.
   Reuses .sec / .sec--sub so the .sec-group adjacency rules apply; the --storage
   modifier stacks the layout vertically so the bar can sit under the header row. */
.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 — the widget renders between the .sec header and the
   flat .spec, outside any .sec-group. These fuse the three into one card. Scoped
   to `.main > …` so the multi-drive .sec-group rules above keep handling that case. */
.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);
}


.cpuz-v3-root .c-red{ color: var(--red)  !important; }
.cpuz-v3-root .c-amb{ color: var(--amb)  !important; }
.cpuz-v3-root .c-grn{ color: var(--grn)  !important; }
.cpuz-v3-root .c-blu{ color: var(--blu)  !important; }
.cpuz-v3-root .c-vio{ color: var(--vio)  !important; }

/* ── MEMORY SLOT VISUALISATION ── */
.cpuz-v3-root .mem-slots-tile{ flex: 1.5; }
.cpuz-v3-root .mem-slots-label{
    font-size: 11px;
    font-family: var(--sans);
    color: var(--t3);
    margin-bottom: 8px;
}
.cpuz-v3-root .mem-slots-row{
    display: flex;
    gap: 6px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.cpuz-v3-root .mem-slot{
    width: 34px;
    height: 64px;
    border-radius: 4px;
    position: relative;
    cursor: default;
    transition: opacity .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 5px 2px 4px;
}
.cpuz-v3-root .mem-slot:hover{ opacity: .8; }
.cpuz-v3-root .mem-slot-empty{
    background: var(--s3);
    border: 1px dashed rgba(255,255,255,0.2);
}
.cpuz-v3-root .mem-slot-filled{
    background: linear-gradient(180deg, rgba(96,165,250,.7) 0%, rgba(96,165,250,.25) 100%);
    border: 1px solid rgba(96,165,250,.5);
}
.cpuz-v3-root .mem-slot-label{
    font-family: var(--mono);
    font-size: 9px;
    color: rgba(255,255,255,.5);
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
}
.cpuz-v3-root .mem-slot-cap{
    font-family: var(--mono);
    font-size: 9px;
    color: rgba(255,255,255,.85);
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.cpuz-v3-root .mem-slot-tooltip{
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--s4);
    border: 1px solid var(--b1);
    border-radius: 5px;
    padding: 6px 9px;
    font-size: 11px;
    font-family: var(--mono);
    color: var(--t2);
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}
.cpuz-v3-root .mem-slot:hover .mem-slot-tooltip{ display: block; }

/* ── 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); }

/* ── STORAGE DRIVES ──────────────────────────── */
.cpuz-v3-root .drive{
    background: var(--s1);
    border: 1px solid var(--b0);
    border-radius: var(--r);
    padding: 14px 16px;
    margin-bottom: 7px;
}
.cpuz-v3-root .drive:last-child{ margin-bottom: 0; }
.cpuz-v3-root .drive-head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.cpuz-v3-root .drive-letter{
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--t1);
    background: var(--s2);
    border: 1px solid var(--b0);
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cpuz-v3-root .drive-name{
    font-size: 15px;
    font-weight: 500;
    color: var(--t1);
}
.cpuz-v3-root .drive-type{
    font-size: 13px;
    color: var(--t4);
    margin-top: 2px;
}
.cpuz-v3-root .drive-bar-labels{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--t4);
    margin-bottom: 5px;
}
.cpuz-v3-root .drive-bar-labels span:last-child{
    color: var(--t2);
    font-family: var(--mono);
}
.cpuz-v3-root .drive-bar{
    height: 5px;
    background: rgba(255,255,255,.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 9px;
}
.cpuz-v3-root .drive-bar-fill{
    height: 5px;
    border-radius: 3px;
}
.cpuz-v3-root .drive-meta-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 5px;
}
.cpuz-v3-root .drive-meta-item{
    background: var(--s2);
    border-radius: 5px;
    padding: 6px 9px;
}
.cpuz-v3-root .drive-meta-label{
    font-size: 11px;
    color: var(--t4);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.cpuz-v3-root .drive-meta-val{
    font-family: var(--mono);
    font-size: 13px;
    color: var(--t2);
    font-weight: 500;
}

/* ── 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;
}
.cpuz-v3-root .share-note{
    font-size: 13px;
    color: var(--t4);
    margin-bottom: 11px;
}
.cpuz-v3-root .share-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.cpuz-v3-root .sbtn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--b0);
    background: var(--s2);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s;
}
.cpuz-v3-root .sbtn:hover{ background: var(--s3); }



/* ── 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;
}
.cpuz-v3-root .disp-tab{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 8%;
    box-sizing: border-box;
}
.cpuz-v3-root .share-button{
    display: block;
    width: 5rem;
    height: 1.313rem;
    background-image: url('/medias/images/social-buttons.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin: 5px 0;
    transition: transform 0.2s ease;
    cursor: pointer;
}
.cpuz-v3-root .share-button:hover{ transform: scale(0.90); }
.cpuz-v3-root .share-button-twitter{ background-position: 0 0; }
.cpuz-v3-root .share-button-facebook{ background-position: 0 28.5%; }
.cpuz-v3-root .share-button-gplus{ background-position: 0 57%; }
.cpuz-v3-root .share-button-pinterest{ background-position: 0 85.5%; }

/* ── 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 .no-issues-box{
    padding: 20px;
    background: var(--s1);
    border: 1px solid var(--b0);
    border-radius: var(--r);
    display: flex;
    align-items: center;
    gap: 10px;
}
.cpuz-v3-root .no-issues-text{
    font-size: 14px;
    color: var(--grn);
}
.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;
}

/* ── Footer ──────────────────────────────────── */
.cpuz-v3-root.ct-footer{
    border-top: 1px solid var(--b0);
    background: var(--s1);
}
.cpuz-v3-root .ct-footer-inner{
    max-width: 1480px;
    margin: 0 auto;
    padding: 32px 28px;
    display: flex;
    align-items: flex-start;
    gap: 48px;
}
.cpuz-v3-root .ct-footer-brand{ flex-shrink: 0; }
.cpuz-v3-root .ct-footer-logo{
    display: flex;
    align-items: center;
    gap: 10px;
}
.cpuz-v3-root .ct-footer-name{
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}
.cpuz-v3-root .ct-footer-copy{
    font-size: 11px;
    color: var(--t4);
    margin-top: 4px;
    font-family: var(--mono);
}
.cpuz-v3-root .ct-footer-nav{
    display: flex;
    gap: 40px;
    flex: 1;
}
.cpuz-v3-root .ct-footer-col{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cpuz-v3-root .ct-footer-col-head{
    font-size: 11px;
    font-weight: 600;
    color: var(--t4);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}
.cpuz-v3-root .ct-footer-col a{
    font-size: 13px;
    color: var(--t3);
    text-decoration: none;
    transition: color .14s;
}
.cpuz-v3-root .ct-footer-col a:hover{ color: var(--t1); }
.cpuz-v3-root .ct-footer-logos{
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}
.cpuz-v3-root .ct-footer-img{
    height: 24px;
    width: auto;
    opacity: .5;
    transition: opacity .14s;
    filter: brightness(0) invert(1);
}
.cpuz-v3-root .ct-footer-img:hover{ opacity: .8; }

/* ── 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 ─────────
   Shown in place of System Analysis for XOC dumps: a header line plus a focused
   hero tile and summary chips. Per-tile accent set 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-hero--mb,  .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-hero--mb .xoc-hero-ico, .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) so
   the XOC hero matches the main hero.
   Category-name pill anchored to the hero's top-left, in the .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) ───────
   At the end of the file so each rule overrides its base counterpart: the aside
   stacks under main, .mtile-hide-narrow tiles drop, drive meta goes 2×2, and the
   XOC stage stacks. */
@media (max-width: 1024px){
    .cpuz-v3-root .body{
        flex-direction: column;
        gap: 18px;
    }
    .cpuz-v3-root .aside{
        width: 100%;
    }
    .cpuz-v3-root .mtile-hide-narrow{
        display: none;
    }
    .cpuz-v3-root .drive-meta-grid{
        grid-template-columns: 1fr 1fr;
    }
    /* 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) ───────
   The base layout is desktop-first. The block above only stacks the main/aside
   columns; below ~640px the inner content needs help too. The metric-tile row is
   a non-wrapping flex strip whose tiles have 90–180px min-widths, so it could not
   shrink below ~400px and stretched the whole .page wider than the viewport
   (clipping the hero, diagnostics and every spec table). Here it becomes a 2-up
   grid, the hero type scales down, and the spec 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 pictos. Icon-above-label
   buttons that wrap on narrow widths; placeholders read slightly muted. */
.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);
}

/* ── QR modal (ported from the LDLC skin, scoped to .ct-qr-*) ──────────────── */
.cpuz-v3-root .ct-qr-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 .ct-qr-modal[hidden]{ display: none; }
@keyframes ctQrFade{ from{ opacity: 0; } to{ opacity: 1; } }

.cpuz-v3-root .ct-qr-card{
    background: #fff;
    border-radius: var(--r2);
    padding: 2rem 2rem 1.5rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    position: relative;
    animation: ctQrPop .22s ease-out both;
}
@keyframes ctQrPop{
    from{ transform: scale(.94); opacity: 0; }
    to{   transform: scale(1);   opacity: 1; }
}
.cpuz-v3-root .ct-qr-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 .ct-qr-close:hover{ background: #f0f2f5; color: #0a1a2e; }
.cpuz-v3-root .ct-qr-title{
    margin: 0 0 .4rem;
    font: 700 1.15rem/1.3 var(--sans);
    color: #0a1a2e;
}
.cpuz-v3-root .ct-qr-subtitle{
    margin: 0 0 1.25rem;
    font: 400 .9rem/1.4 var(--sans);
    color: #6b7682;
}
.cpuz-v3-root .ct-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 .ct-qr-target img,
.cpuz-v3-root .ct-qr-target canvas,
.cpuz-v3-root .ct-qr-target table{ display: block; margin: 0 auto; }
.cpuz-v3-root .ct-qr-url{
    margin: 0;
    font: 400 .75rem/1.4 var(--mono);
    color: #6b7682;
    word-break: break-all;
}

/* ── Archives modal (shares the QR card chrome; scoped to .ct-arch-*) ───────── */
.cpuz-v3-root .ct-arch-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 .ct-arch-modal[hidden]{ display: none; }
.cpuz-v3-root .ct-arch-card{
    background: #fff;
    border-radius: var(--r2);
    padding: 1.5rem 1.5rem 1.25rem;
    max-width: 460px;
    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 .ct-arch-card .ct-qr-title{ text-align: left; padding-right: 2rem; }

.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;
}