/*
    * validation-cpuz-test.css
    * =============================================================================
    * CPU-Z Validator — Redesigned view styles (CPUZ_test skin).
    *
    * SCOPE
    * -----
    * Every rule (except :root variables, .skip-link, and .header) is scoped under
    * the .cpuz-test-root parent class, which is applied to the <main> wrapper by
    * validation-cpuz-test-v3.php. This prevents conflicts with the site's global
    * stylesheet (validation-details-v3-min.css) and the LDLC skin.
    *
    * DESIGN TOKENS  (CSS custom properties on :root)
    * -----------------------------------------------
    *   --bg           Page background           #1e1e22
    *   --s1…s4        Surface layers            dark charcoal steps
    *   --b0, --b1     Border colours            rgba white 8 / 14 %
    *   --t1…t4        Text hierarchy            near-white → dim grey
    *   --pur           Purple accent            #a62393  (nav, freq, badges)
    *   --red/amb/grn/blu/vio  Semantic colours  errors, warnings, ok, info
    *   --sans / --mono  Font stacks            Inter / IBM Plex Mono
    *   --r / --r2      Border-radius tokens    8 px / 12 px
    *
    * COMPONENT ORDER
    * ---------------
    *   1. Reset & base
    *   2. Navigation (.cpuz-test-root .nav)
    *   3. Status banner
    *   4. Summary panel
    *   5. Page layout (.page, .body, .main, .aside)
    *   6. Hero block
    *   7. Diagnostic accordion
    *   8. Section headers (.sec)
    *   9. Metric tiles (.metrics, .mtile)
    *  10. Memory slot visualisation
    *  11. Spec table (.spec, .sk, .sv)
    *  12. Drive cards
    *  13. Monitor rows
    *  14. Sidebar panels (.panel)
    *  15. Screenshot
    *  16. Benchmark panel
    *  17. Admin panel
    *  18. Telemetry (gauges, bars, charts)
    *  19. Animations
    *
    * TYPOGRAPHY
    * ----------
    *   Labels (spec keys, section heads) — Inter sans-serif
    *   Values (spec values, numbers)     — IBM Plex Mono
    *   All sizes relative to root 16 px
    *
    * @see validation-cpuz-test-v3.php   (markup)
    * @see validation-cpuz-test.js        (interactions)
    * =============================================================================
    */
.cpuz-test-root *, .cpuz-test-root *::before, .cpuz-test-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-test-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-test-root .nav{
    background: #0d0d13;
    border-bottom: 2px solid var(--pur);
    position: sticky;
    top: 0;
    z-index: 30;
}
.cpuz-test-root .nav-w{
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 28px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cpuz-test-root .nav-brand{
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.cpuz-test-root .nav-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cpuz-test-root .nav-icon{
    width: 32px;
    height: 32px;
    background: var(--pur);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cpuz-test-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-test-root .nav-name-cpuz{
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}
.cpuz-test-root .nav-name-validator{
    color: var(--pur);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.cpuz-test-root .nav-sub{ display: none; }
.cpuz-test-root .nav-links{ display: flex; }
.cpuz-test-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-test-root .nav-links a:hover{ color: var(--t3); }
.cpuz-test-root .nav-auth{
    display: flex;
    gap: 7px;
    align-items: center;
}
.cpuz-test-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-test-root .nav-btn:hover{
    background: var(--pur-lo);
    color: var(--pur);
}
.cpuz-test-root .nav-btn.f{
    background: var(--pur);
    color: #fff;
    border-color: var(--pur);
}
.cpuz-test-root .nav-btn.f:hover{ background: #7c22d4; }

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


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

/* ── HERO ────────────────────────────────────── */
.cpuz-test-root .hero{
    display: flex;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.cpuz-test-root .hero-main{
    flex: 1;
    min-width: 260px;
}
.cpuz-test-root .hero-crumb{
    font-size: 13px;
    color: var(--t4);
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cpuz-test-root .hero-sep{ opacity: .3; }
.cpuz-test-root .hero-name{
    font-size: 28px;
    font-weight: 600;
    color: var(--t1);
    letter-spacing: -.4px;
    line-height: 1.15;
    margin-bottom: 4px;
}
.cpuz-test-root .hero-freq-row{
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 9px;
}
.cpuz-test-root .hero-freq{
    font-family: var(--mono);
    font-size: 62px;
    font-weight: 300;
    color: var(--pur);
    letter-spacing: -2.5px;
    line-height: 1;
}
.cpuz-test-root .highlight{
    color: var(--pur);
}
.cpuz-test-root .hero-freq-unit{
    font-family: var(--mono);
    font-size: 20px;
    color: var(--pur);
}
.cpuz-test-root .hero-meta{
    font-size: 14px;
    color: var(--t3);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 0;
    line-height: 1.6;
}
.cpuz-test-root .vstamp{
    background: var(--s1);
    border: 1px solid var(--b0);
    border-radius: var(--r);
    padding: 16px 20px;
    text-align: left;
    min-width: 180px;
    flex-shrink: 0;
}
.cpuz-test-root .vstamp-label{
    font-size: 16px;
    font-weight: 600;
    color: var(--grn);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}
.cpuz-test-root .vstamp-id{
    font-family: var(--mono);
    font-size: 13px;
    color: rgba(52,211,153,.45);
    margin-bottom: 4px;
}
.cpuz-test-root .vstamp-meta{
    font-size: 12px;
    color: var(--t4);
    line-height: 1.8;
}

/* ── DIAGNOSTICS ─────────────────────────────── */
.cpuz-test-root .diag{
    background: var(--s1);
    border: 1px solid var(--b0);
    border-radius: var(--r2);
    overflow: hidden;
    margin-bottom: 26px;
}
.cpuz-test-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-test-root .diag-bar-left{
    display: flex;
    align-items: center;
    gap: 12px;
}
.cpuz-test-root .diag-dots{
    display: flex;
    gap: 6px;
}
.cpuz-test-root .dd{
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.cpuz-test-root .diag-title{
    font-size: 15px;
    font-weight: 500;
    color: var(--t2);
}
.cpuz-test-root .diag-counts{
    display: flex;
    gap: 8px;
}
.cpuz-test-root .dcount{
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 500;
}
.cpuz-test-root .dc-e{
    background: var(--red-bg);
    color: var(--red);
}
.cpuz-test-root .dc-w{
    background: var(--amb-bg);
    color: var(--amb);
}
.cpuz-test-root .dc-i{
    background: var(--blu-bg);
    color: var(--blu);
}
.cpuz-test-root .acc-item{ border-bottom: 1px solid rgba(255,255,255,.05); }
.cpuz-test-root .acc-item:last-child{ border-bottom: none; }
.cpuz-test-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-test-root .acc-trigger:hover{ background: rgba(255,255,255,.025); }
.cpuz-test-root .acc-trigger.open{ background: rgba(255,255,255,.03); }
.cpuz-test-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-test-root .acc-label{
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--t1);
    line-height: 1.35;
}
.cpuz-test-root .acc-arrow{
    flex-shrink: 0;
    color: var(--t4);
    transition: transform .2s;
}
.cpuz-test-root .acc-trigger.open .acc-arrow{
    transform: rotate(180deg);
    color: var(--t3);
}
.cpuz-test-root .acc-body{
    display: none;
    padding: 0 20px 18px 20px;
}
.cpuz-test-root .acc-body.open{ display: block; }

/* ── Diagnostic message body ─────────────────── */
.cpuz-test-root .diag-advice{ padding: 12px 0 4px; }
.cpuz-test-root .diag-advice p{
    font-size: 14px;
    line-height: 1.75;
    margin: 0 0 8px;
}
.cpuz-test-root .diag-obs, .cpuz-test-root .diag-cause{ color: var(--t2); }
/*.cpuz-test-root .diag-cause{ color: var(--t3); }*/
.cpuz-test-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-test-root .diag-action p{
    font-size: 13px;
    font-family: var(--mono);
    color: var(--t3);
    margin: 0;
}
.cpuz-test-root .diag-action-bar{ display: none; }
.cpuz-test-root .diag-val{
    font-family: var(--mono);
    font-weight: 600;
    color: var(--t1);
}
/* Reference / comparison value — visible, but calmer than the primary */
.cpuz-test-root .diag-val--ref{
    font-weight: 600;
    color: var(--t2);
}

/* Legacy compat */
.cpuz-test-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-test-root .acc-solution{
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.cpuz-test-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-test-root .acc-solution-text{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t3);
    line-height: 1.75;
}
.cpuz-test-root .acc-solution-text strong{
    color: var(--t2);
    font-weight: 500;
}

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

/* ── SECTION HEADERS ─────────────────────────── */
.cpuz-test-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-test-root .sec:first-child{ margin-top: 0; }
/* Continuous container for multi-instance sections (Storage, Display,
   multi-GPU…). Wraps the section header AND every per-instance card so a
   single border encloses the whole group, making it obvious the cards
   belong to that section.

   Strategy: the wrapper has a slightly darker background (--bg) to act
   as a "tray" the inner cards sit on. The header is flush at the top of
   the tray with no radius. Below the header, a padding zone contains the
   sub-cards as separate blocks (with their own background, radius and
   spacing between them) so they read as distinct devices within the
   section.                                                              */
.cpuz-test-root .sec-group{
    margin-top: 28px;
    margin-bottom: 28px;
    border: 1px solid var(--b0);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--bg);
}
.cpuz-test-root .sec-group:first-child{ margin-top: 0; }
/* The header sits flush at the top of the group: kill its own radius and
   drop the outer top margin so it occupies the wrapper's top edge.       */
.cpuz-test-root .sec-group > .sec{
    margin: 0;
    border-radius: 0;
}
/* Padding zone — every direct child after the header gets breathing room
   on the left/right of the tray. Top padding is added on the first card
   of the area, bottom on the last (handled by the gap from `.sec--sub`'s
   margin-top below).                                                    */
.cpuz-test-root .sec-group > .sec--sub,
.cpuz-test-root .sec-group > .spec{
    margin: 12px 12px 0 12px;
    border: 1px solid var(--b0);
    border-radius: var(--r);
    overflow: hidden;
}
/* The .spec sitting directly under a .sec--sub belongs to that sub-card
   and should fuse with it — no margin, no border (the sub-card already
   carries them via the rules above). The pair becomes one visual block. */
.cpuz-test-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);
}
/* When the API delivers per-instance widgets the sub-card grows a third
   block in the middle: header → metrics → spec. The metrics row must
   share the card's border on its sides only and connect both blocks
   above and below — no top/bottom border, no radius. The .spec right
   under it picks up the bottom rounding instead of the metrics doing it. */
.cpuz-test-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-test-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);
}
/* Conversely, a .sec--sub that follows a .spec needs its bottom corners
   square so it joins seamlessly with its own .spec underneath.          */
.cpuz-test-root .sec-group > .sec--sub{
    border-radius: var(--r) var(--r) 0 0;
    border-bottom: none;
}
/* Last child of the group needs bottom padding on the tray since the
   inner cards stop carrying margin past their own bounds. The selector
   list covers all shapes (.sec--sub, .metrics, .spec at the end) with
   enough specificity to win against the rules above (which otherwise
   pin margin-bottom: 0 on the trailing element).                        */
.cpuz-test-root .sec-group > .sec--sub:last-child,
.cpuz-test-root .sec-group > .sec--sub + .metrics:last-child,
.cpuz-test-root .sec-group > .sec--sub + .spec:last-child,
.cpuz-test-root .sec-group > .metrics + .spec:last-child,
.cpuz-test-root .sec-group > .spec:last-child{
    margin-bottom: 12px;
}
/* Sub-headers used for multi-instance device cards (Storage drives, GPUs,
   monitors). Visually one tier below a top-level section: tighter top
   margin so cards stack closely under the parent section, and a slightly
   darker background to suggest "child of the section above". The number
   slot shows "#N" instead of a global section number.                   */
.cpuz-test-root .sec--sub{
    margin-top: 12px;
    background: var(--s2);
}
.cpuz-test-root .sec--sub .sec-n{
    background: var(--s3);
    color: var(--t3);
}
.cpuz-test-root .sec--sub .sec-t{
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--t2);
    font-weight: 500;
}
.cpuz-test-root .sec + .spec{
    border-radius: 0 0 var(--r) var(--r);
    border-top: none;
    margin-top: 0;
}
.cpuz-test-root .sec + .metrics{ margin-top: 0; }
.cpuz-test-root .sec + .drive{
    border-radius: 0 0 var(--r) var(--r);
    margin-top: 0;
}
.cpuz-test-root .metrics + .spec{
    border-top: none;
    border-radius: 0 0 var(--r) var(--r);
}
.cpuz-test-root .spec{
    border: 1px solid var(--b0);
    border-radius: 0 0 var(--r) var(--r);
    overflow: hidden;
    margin-bottom: 28px;
}
.cpuz-test-root .drive{ margin-bottom: 28px; }
.cpuz-test-root .metrics{
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border: 1px solid var(--b0);
    border-top: none;
    border-bottom: none;
}
.cpuz-test-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-test-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-test-root .sec-rule{ flex: 1; }
.cpuz-test-root .sec-s{
    font-size: 12px;
    color: var(--t2);
    flex-shrink: 0;
    padding: 9px 16px;
    font-family: var(--mono);
    opacity: .7;
}
.cpuz-test-root .sec-s.ok{ color: rgba(52,211,153,.7); }
.cpuz-test-root .sec-s.warn{ color: rgba(251,191,36,.7); }
.cpuz-test-root .sec-s.err{ color: rgba(248,113,113,.75); }
.cpuz-test-root .sec-s.hi{ color: var(--pur); }

/* ── METRIC TILES ── */
.cpuz-test-root .mtile{
    background: var(--s1);
    padding: 14px 20px;
    flex: 1;
    min-width: 90px;
    border-right: 1px solid var(--b0);
}
.cpuz-test-root .mtile:last-child{ border-right: none; }

/* ─── Tile sizing per widget type ──────────────────────────────────────────
   `val` tiles (single number, e.g. Frequency, Cache) are visually compact
   and don't need much room. `bar` tiles are richer (bar + axes). `stacked`
   tiles host multiple rows and need real estate to breathe. flex-grow values
   pull more space toward the latter without forcing strict pixel widths.   */
.cpuz-test-root .mtile--val{
    flex: 1 1 0;
    min-width: 90px;
}
.cpuz-test-root .mtile--bar{
    flex: 1.5 1 0;
    min-width: 130px;
}
.cpuz-test-root .mtile--ring{
    /* Slightly more horizontal room to host the donut + side caption. */
    flex: 1.5 1 0;
    min-width: 180px;
}

/* ─── Ring widget (internal.widgets.<cat>[].type === 'ring') ───────────────
   Donut/ring layout: label on top (uppercase muted, like other widgets),
   then a row containing the donut on the left and the "Max 100°C" caption
   vertically centred on its right.                                          */
.cpuz-test-root .mtile-ring-row{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 10px;
}
.cpuz-test-root .mtile-ring-wrap{
    /* Sized to keep the ring tile visually anchored at the same height as
       the Puissance (stacked-bar) tile in the same row. The donut centre
       is now empty — the value sits to the right (.mtile-ring-side). */
    position: relative;
    width: 95px;
    height: 95px;
    flex-shrink: 0;
}
/* Override the SVG sizing so the ring scales down to its container.
   Rotate -90° so the stroke begins at 12 o'clock and grows clockwise. */
.cpuz-test-root .mtile-ring-wrap svg{
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(-90deg);
}
/* Right-hand column — value on top, "Max …" caption underneath. The value
   inherits .mtile-val typography (26px mono) for visual parity with val
   widget tiles.                                                          */
.cpuz-test-root .mtile-ring-side{
    display: flex;
    flex-direction: column;
    /* Tighten the gap so the caption sits close to the value baseline. */
    gap: 4px;
}
.cpuz-test-root .mtile-ring-sub{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t4);
    letter-spacing: 0.3px;
}

.cpuz-test-root .mtile-val{
    font-family: var(--mono);
    font-size: 26px;
    font-weight: 400;
    color: var(--t1);
    line-height: 1;
    margin-bottom: 5px;
}
/* Title at the top of every widget tile. Uppercase muted header treatment. */
.cpuz-test-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-test-root .mtile-sub{
    font-size: 12px;
    font-family: var(--mono);
    color: var(--t4);
    margin-top: 3px;
}

/* ─── Bar widget ───────────────────────────────────────────────────────────
   Horizontal progress bar with min/max axis underneath. The bar itself is
   3px tall; the .mtile-bar wrapper carries position:relative so the tick
   marker and its label can absolutely-position relative to the bar's full
   width. overflow:visible lets the tick + label escape the 3px-tall bar.  */
.cpuz-test-root .mtile-bar{
    position: relative;
    height: 3px;
    background: rgba(255,255,255,.07);
    border-radius: 2px;
    margin: 8px 0 4px;
    overflow: visible;
}
.cpuz-test-root .mtile-bar-fill{
    height: 3px;
    border-radius: 2px;
}
.cpuz-test-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 that flags a reference threshold inside the bar (e.g. the
   declared PL2 / PPT / TDP cap on the CPU Power tile when peak overshoots).
   The label flips above/below the bar depending on marker position to
   avoid colliding with the range row's 0 / max numbers :
     markerPct ≥ 25%  →  label above the bar  (.mtile-bar-marker-lbl--top)
     markerPct  < 25% →  label below the bar  (.mtile-bar-marker-lbl--bottom)
   The threshold is set at 25% (not 50%) because the range row's left
   number ("0") only takes a few characters — a label sitting just right
   of it doesn't visually clash with it.                                  */
.cpuz-test-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 common to both --top and --bottom variants.
   The `left:N%` is set inline by the renderer, matching the tick's
   position so they stay aligned regardless of bar width.                 */
.cpuz-test-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 — label sits between the value row and the bar. */
.cpuz-test-root .mtile-bar-marker-lbl--top{
    bottom: calc(100% + 6px);
}

/* Below the bar — label sits over the range row's vertical space. The
   .mtile-range row needs extra top margin (rule below) so the label
   doesn't crash into it.                                                */
.cpuz-test-root .mtile-bar-marker-lbl--bottom{
    top: calc(100% + 6px);
}

/* When a marker label sits BELOW the bar, the .mtile-range row needs
   extra vertical breathing room so the absolutely-positioned label
   doesn't overlap with the 0 / max numbers.                            */
.cpuz-test-root .mtile-bar:has(.mtile-bar-marker-lbl--bottom) + .mtile-range{
    margin-top: 14px;
}

/* ─── Hint pill on bar widgets (data.hint) ────────────────────────────────
   Optional badge anchored to the top-right of a bar tile when the API
   sends a `hint` string. Visually a "subtle filled" pill that inherits
   the bar's tone — `danger` reads in red, `accent` in violet, etc. The
   parent .mtile gets position:relative inline (only when a hint exists)
   so the pill anchors to the tile's corner.                               */
.cpuz-test-root .mtile-hint-pill{
    position: absolute;
    top: 12px;
    right: 14px;
    padding: 3px 9px;
    border-radius: 999px;
    /* Default neutral fallback when no tone modifier matches — keeps the
       pill readable without flagging it in any specific colour. */
    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_test_widget_tone() palette. */
.cpuz-test-root .mtile-hint-pill--danger{
    background: rgba(248, 113, 113, 0.12);
    color: rgba(248, 113, 113, 0.95);
}
.cpuz-test-root .mtile-hint-pill--warning{
    background: rgba(251, 191, 36, 0.12);
    color: rgba(251, 191, 36, 0.95);
}
.cpuz-test-root .mtile-hint-pill--success{
    background: rgba(52, 211, 153, 0.12);
    color: rgba(52, 211, 153, 0.95);
}
.cpuz-test-root .mtile-hint-pill--accent{
    background: var(--pur-lo);
    color: var(--pur);
}
.cpuz-test-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)

   These two widgets are part of the `internal.widgets` payload, dispatched
   by `cpuz_test_render_widget()` further up. The block sits here, right
   after the bar widget's hint-pill rules, so anything widget-related stays
   grouped in the same area of the stylesheet.
   ════════════════════════════════════════════════════════════════════════════ */


/* ─── DIMM-SLOTS WIDGET ────────────────────────────────────────────────────
   Memory slot visualisation. One cell per physical DIMM bay on the board,
   showing filled / empty state at a glance. Sits in the .metrics flex row
   alongside val/bar tiles; takes more horizontal room than a val tile
   because it needs to host 2..16 slot cells in a single row.            */
.cpuz-test-root .mtile--dimm{
    /* Sized to host a 4-slot row guaranteed:
         4 × 58 (slot width) + 3 × 6 (gap) = 250px
       plus the .mtile's own horizontal padding (20px × 2 = 40px) and a
       small safety margin → 290. On the standard memory metrics row
       (3 val tiles + this dimm tile, with flex weights 1 + 1 + 1 + 2),
       this tile lands around 290-340px wide so the row never wraps.   */
    flex: 2 1 0;
    min-width: 290px;
}

/* "(2 / 4)" counter appended to the widget title. Sibling of the title
   text inside .mtile-lbl, so it picks up the uppercase + letter-spacing
   of that header but overrides the casing and weight to read as a
   secondary annotation rather than a continuation of the label.       */
.cpuz-test-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 row — flex container hosting all cells. With cells sized to fit
   4 in a row on the default .metrics layout, wrapping kicks in only on
   HEDT / Xeon boards with 8+ slots — and even then the second row aligns
   visually with the first since cells are fixed-width.                 */
.cpuz-test-root .mtile-dimm-row{
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* Vertical wrapper around one slot. Hosts the card and (for filled
   slots) the slot label below — empty slots host their label INSIDE
   the dashed card, so this wrapper acts mostly as a flex anchor.

   flex-basis = 25% minus the cumulative gap share forces EXACTLY 4
   cells per row no matter how wide the parent grows. With gap: 6px
   and 4 cells per row, the 3 inter-cell gaps consume 18px total, so
   each cell needs to be (100% / 4) minus (18px / 4) = calc(25% - 4.5px).
   Cells 5+ wrap to the next row keeping the same width, so an 8-slot
   HEDT board reads as a clean 4×2 grid.                                */
.cpuz-test-root .mtile-dimm-cell{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 calc(25% - 4.5px);
    min-width: 0;
}

/* The slot card itself. Width: 100% of the cell wrapper so the cards
   stretch / shrink with the available row width while still capping
   at 4 per row (the cell wrapper enforces the 25% basis).
   Height stays fixed so filled and empty cells stay on the same
   baseline regardless of internal content.                          */
.cpuz-test-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 — needs to host THREE stacked lines (brand,
   SOLDERED tag, cap) instead of two, so we cut the inter-line gap
   to keep the same overall height. The tag itself is tiny and muted.  */
.cpuz-test-root .mtile-dimm-slot--soldered{
    gap: 1px;
}

/* "SOLDERED" tag — sits between brand and capacity on soldered cells.
   Mono, uppercase, muted on a hairline-thin background pill so it
   reads as metadata rather than a value. Width: auto so it hugs the
   text rather than stretching across the cell.                        */
.cpuz-test-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 — solid charcoal background with a coloured top stripe
   that encodes the module's KIT IDENTITY (not a tone). Two modules
   with identical brand + capacity + type share the same stripe colour;
   any difference yields a different colour. The colour is set inline
   by the renderer from a fixed kit palette (pur → blu → grn → amb …),
   so the same CSS supports any number of kits without modifier classes. */
.cpuz-test-root .mtile-dimm-slot--filled{
    background: var(--s3);
    border: 1px solid var(--b0);
    /* border-top-color is set inline by the renderer (kit-driven).
       Width and style are constant.                                  */
    border-top: 3px solid var(--pur);
    /* Compensate vertically for the thicker top border so the inner
       content stays optically centred against the empty variant.    */
    padding-top: 6px;
}

/* Empty slot — dashed border with a purple tint at low opacity.
   Transparent background so the metrics row's own backdrop shows
   through and visually de-emphasises the empty cell.                */
.cpuz-test-root .mtile-dimm-slot--empty{
    background: transparent;
    border: 1px dashed rgba(147, 51, 234, 0.35);
}

/* Filled slot top line — vendor name, uppercase, slightly bolder
   than the cap line so the brand reads as the card's identity.    */
.cpuz-test-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 so the digits align
   visually across cells, slightly larger than the brand line to
   establish hierarchy.                                            */
.cpuz-test-root .mtile-dimm-cap{
    font-family: var(--mono);
    font-size: 13px;
    color: var(--t1);
    line-height: 1;
}

/* Unit suffix ("GB", "MB", "TB") tucked next to the capacity
   number — muted and smaller so the digit stays the focal point. */
.cpuz-test-root .mtile-dimm-unit{
    font-size: 10px;
    color: var(--t3);
    margin-left: 1px;
}

/* Empty slot text — italic "empty" in muted grey, sans-serif so
   it visually differs from the mono digits of the filled cards. */
.cpuz-test-root .mtile-dimm-empty{
    font-family: var(--sans);
    font-size: 11px;
    font-style: italic;
    color: var(--t4);
    line-height: 1;
}

/* Slot label ("S0", "S1", ...). Default placement is BELOW the
   card (for filled slots — the wrapper hosts it as a sibling of
   the card). Mono so it matches the spec table's typographic
   register.                                                       */
.cpuz-test-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 — used by empty slots, where the label
   sits below the "empty" word still WITHIN the dashed frame.
   Just a tiny top margin so it doesn't crowd the italic line.    */
.cpuz-test-root .mtile-dimm-num--inside{
    margin-top: 2px;
}


/* ─── STORAGE-INFO WIDGET (acts as drive sub-card header) ────────────────
   The storage-info widget replaces the standard .sec--sub block for each
   drive in multi-drive mode (and for the single drive in mono-drive
   mode). It carries the drive identity (letter badge + name on the left),
   the usage stats (% used + total on the right), AND a thin progress bar
   attached at the bottom — all in one cohesive header block.

   Reuses .sec / .sec--sub as base classes so the existing .sec-group
   adjacency rules (.sec--sub + .spec etc.) fire naturally without
   duplicating selectors. The `--storage` modifier flips the inner
   layout from a single flex row to a block stack so the bar can sit
   underneath the header row.                                            */
.cpuz-test-root .sec--sub--storage{
    /* Override .sec's "display: flex; align-items: center" — the inner
       .ssub-storage-row recreates that horizontal layout below.        */
    display: block;
    padding: 0;
}

/* Inner row recreates the original .sec horizontal layout (letter
   badge → name → spacer → right-aligned meta) inside the now-vertical
   parent. align-items: stretch lets the .sec-n badge fill the row's
   height like it does on a regular .sec.                              */
.cpuz-test-root .sec--sub--storage > .ssub-storage-row{
    display: flex;
    align-items: stretch;
}

/* Right-aligned meta column: "98% used" on top, "Total 465 GiB" below.
   Both lines mono, vertically centred against the rest of the row.    */
.cpuz-test-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-test-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-test-root .ssub-storage-total{
    font-size: 11px;
    color: var(--t4);
    line-height: 1.2;
}

/* Thin usage bar at the bottom of the card. Sits flush across the full
   width — no horizontal padding — to read as a "status line" of the
   card rather than a tile inside it.                                   */
.cpuz-test-root .ssub-storage-bar{
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.cpuz-test-root .ssub-storage-bar-fill{
    height: 100%;
    /* `width` and `background` are set inline by the renderer. */
}

/* Single-drive (LIST) mode adjacency — when there's only one fixed drive,
   the back sends the widget as a LIST (no instance key), and the front
   loop renders it directly between the section .sec header and the flat
   .spec table — outside any .sec-group wrapper. These rules fuse the
   three blocks into one visually continuous card just like .sec-group
   does in multi-drive mode.

   Scope restricted to `.main > …` so this DOESN'T fire on the multi-drive
   case where .sec--sub--storage is a child of .sec-group (and the
   `.sec-group > .sec--sub` adjacency rules already handle it).            */
.cpuz-test-root .main > .sec + .sec--sub--storage{
    margin-top: 0;
    border-radius: 0;
}
.cpuz-test-root .main > .sec--sub--storage + .spec{
    margin-top: 0;
    border-top: none;
    border-radius: 0 0 var(--r) var(--r);
}


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

/* ── MEMORY SLOT VISUALISATION ── */
.cpuz-test-root .mem-slots-tile{ flex: 1.5; }
.cpuz-test-root .mem-slots-label{
    font-size: 11px;
    font-family: var(--sans);
    color: var(--t3);
    margin-bottom: 8px;
}
.cpuz-test-root .mem-slots-row{
    display: flex;
    gap: 6px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.cpuz-test-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-test-root .mem-slot:hover{ opacity: .8; }
.cpuz-test-root .mem-slot-empty{
    background: var(--s3);
    border: 1px dashed rgba(255,255,255,0.2);
}
.cpuz-test-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-test-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-test-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-test-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-test-root .mem-slot:hover .mem-slot-tooltip{ display: block; }

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

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

/* ── SIDEBAR ─────────────────────────────────── */
.cpuz-test-root .panel{
    background: var(--s1);
    border: 1px solid var(--b0);
    border-radius: var(--r2);
    overflow: hidden;
}
.cpuz-test-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-test-root .panel-body{ padding: 14px; }
.cpuz-test-root .ss-img{
    width: 100%;
    height: 400px;
    display: block;
    object-fit: contain;
    background: var(--s2);
}
.cpuz-test-root .ss-locked{
    background: var(--s2);
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.cpuz-test-root .ss-ico{
    font-size: 18px;
    opacity: .13;
}
.cpuz-test-root .ss-txt{
    font-size: 13px;
    color: var(--t4);
    text-align: center;
    line-height: 1.5;
}
.cpuz-test-root .ss-lnk{
    font-size: 13px;
    color: var(--pur);
    text-decoration: none;
}
.cpuz-test-root .ss-lnk:hover{ color: var(--pur); }
.cpuz-test-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-test-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-test-root .share-note{
    font-size: 13px;
    color: var(--t4);
    margin-bottom: 11px;
}
.cpuz-test-root .share-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.cpuz-test-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-test-root .sbtn:hover{ background: var(--s3); }



/* ── BENCHMARK PANEL ─────────────────────────── */
.cpuz-test-root .bench-scores{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.cpuz-test-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-test-root .bench-score-link::after{
    content: 'Compare →';
    display: block;
    font-size: 11px;
    color: var(--pur);
    opacity: 0;
    transition: opacity 0.15s ease;
    font-family: var(--sans);
    letter-spacing: 0.3px;
    text-align: right;
    margin-top: 2px;
}
.cpuz-test-root .bench-score-link:hover{
    background: var(--pur-lo);
}
.cpuz-test-root .bench-score-link:hover::after{
    opacity: 1;
}
.cpuz-test-root .bench-score-head{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.cpuz-test-root .bench-score-label{
    font-size: 13px;
    color: var(--t3);
}
.cpuz-test-root .bench-score-val{
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 500;
    color: var(--t1);
}
.cpuz-test-root .bench-separator{
    margin: 16px 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--pur), transparent);
    opacity: 0.4;
}
.cpuz-test-root .bench-compare-label{
    font-size: 12px;
    font-weight: 600;
    color: var(--t4);
    text-transform: uppercase;
    letter-spacing: .7px;
    margin-bottom: 9px;
}
.cpuz-test-root .bench-compare-row{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}
.cpuz-test-root .bench-compare-row:last-child{ margin-bottom: 0; }
.cpuz-test-root .bench-compare-name{
    font-size: 13px;
    color: var(--t3);
    width: 160px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cpuz-test-root .bench-compare-track{
    flex: 1;
    height: 5px;
    background: rgba(255,255,255,.06);
    border-radius: 3px;
    overflow: hidden;
}
.cpuz-test-root .bench-compare-fill{
    height: 5px;
    border-radius: 3px;
}
.cpuz-test-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-test-root .admin-nav{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}
.cpuz-test-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: 13px;
    font-weight: 500;
    color: var(--t2);
    text-decoration: none;
    cursor: pointer;
    transition: background .12s;
}
.cpuz-test-root .admin-nav-btn:hover{
    background: var(--s3);
    color: var(--t1);
}
.cpuz-test-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-test-root .admin-btn:last-child{ margin-bottom: 0; }
.cpuz-test-root .admin-btn:hover{ opacity: .82; }
.cpuz-test-root .admin-btn-private{
    background: var(--s3);
    color: var(--t1);
    border: 1px solid var(--b1);
}
.cpuz-test-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-test-root .admin-skin-switcher {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--b0);
}
.cpuz-test-root .admin-skin-label {
    font-size: 11px;
    color: var(--t4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.cpuz-test-root .admin-nav-btn.active {
    background: var(--pur-md);
    border-color: var(--pur);
    color: var(--pur);
}

/* ── SHARE PANEL ─────────────────────────────── */
.cpuz-test-root .social_content{
    color: var(--t4);
    margin-bottom: 12px;
}
.cpuz-test-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-test-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-test-root .share-button:hover{ transform: scale(0.90); }
.cpuz-test-root .share-button-twitter{ background-position: 0 0; }
.cpuz-test-root .share-button-facebook{ background-position: 0 28.5%; }
.cpuz-test-root .share-button-gplus{ background-position: 0 57%; }
.cpuz-test-root .share-button-pinterest{ background-position: 0 85.5%; }

/* ── Extra sections (dump + other validations) ── */
.cpuz-test-root.ct-extra-section{
    max-width: 1480px;
    margin: 0 auto;
    padding-bottom: 1rem;
}
.cpuz-test-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-test-root .ct-dump-frame{
    display: block;
    border: 1px solid var(--b0);
    border-radius: var(--r);
    background: var(--s1);
}

/* ── Replaced inline styles ──────────────────── */
.cpuz-test-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-test-root .no-issues-text{
    font-size: 14px;
    color: var(--grn);
}
.cpuz-test-root .panel-head--split{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cpuz-test-root .panel-vstatus{
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}
.cpuz-test-root .panel-vstatus-id{
    color: var(--t4);
    font-weight: 400;
    font-family: var(--mono);
}
.cpuz-test-root .ss-body{
    padding: 0;
    overflow: hidden;
}
.cpuz-test-root .ss-footer{
    padding: 10px 14px;
    border-top: 1px solid var(--b0);
    background: var(--s2);
}
.cpuz-test-root .ss-meta{
    font-size: 12px;
    color: var(--t4);
    font-family: var(--mono);
    line-height: 1.8;
}

/* ── Footer ──────────────────────────────────── */
.cpuz-test-root.ct-footer{
    border-top: 1px solid var(--b0);
    background: var(--s1);
}
.cpuz-test-root .ct-footer-inner{
    max-width: 1480px;
    margin: 0 auto;
    padding: 32px 28px;
    display: flex;
    align-items: flex-start;
    gap: 48px;
}
.cpuz-test-root .ct-footer-brand{ flex-shrink: 0; }
.cpuz-test-root .ct-footer-logo{
    display: flex;
    align-items: center;
    gap: 10px;
}
.cpuz-test-root .ct-footer-name{
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}
.cpuz-test-root .ct-footer-copy{
    font-size: 11px;
    color: var(--t4);
    margin-top: 4px;
    font-family: var(--mono);
}
.cpuz-test-root .ct-footer-nav{
    display: flex;
    gap: 40px;
    flex: 1;
}
.cpuz-test-root .ct-footer-col{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cpuz-test-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-test-root .ct-footer-col a{
    font-size: 13px;
    color: var(--t3);
    text-decoration: none;
    transition: color .14s;
}
.cpuz-test-root .ct-footer-col a:hover{ color: var(--t1); }
.cpuz-test-root .ct-footer-logos{
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}
.cpuz-test-root .ct-footer-img{
    height: 24px;
    width: auto;
    opacity: .5;
    transition: opacity .14s;
    filter: brightness(0) invert(1);
}
.cpuz-test-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-test-root .hero{ animation: up .25s ease both; }
.cpuz-test-root .diag{ animation: up .25s .05s ease both; }
.cpuz-test-root .body{ animation: up .25s .1s ease both; }

/* ── Spec row alert icons ─────────────────────── */
.cpuz-test-root .ct-row-icons {
    display: inline-flex;
    gap: 3px;
    margin-left: 4px;
    flex-shrink: 0;
}
.cpuz-test-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-test-root .ct-row-icon:hover {
    transform: scale(1.4);
    opacity: 1;
}
.cpuz-test-root .ct-row-icon--error { background: var(--red); }
.cpuz-test-root .ct-row-icon--warning { background: var(--amb); }
.cpuz-test-root .ct-row-icon--info { background: var(--blu); }

/* ── TELEMETRY (timeline charts only) ─────────────
   Section header sits below the last hardware section, separated by a
   thin top border. Animation matches the .hero / .diag / .body pattern
   so the section fades in with the rest of the page.                  */
.cpuz-test-root .tele{
    margin-top: 32px;
    padding-top: 26px;
    animation: up .25s .15s ease both;
}

/* Sub-header above the accordion stack: title on the left, divider line
   filling the middle, "Expand all" pill on the right.                  */
.cpuz-test-root .tele-charts-header{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
}
.cpuz-test-root .tele-charts-title{
    font-size: 13px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .8px;
    flex-shrink: 0;
}
.cpuz-test-root .tele-charts-line{
    flex: 1;
    height: 1px;
    background: var(--b0);
}
.cpuz-test-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-test-root .tele-charts-all-btn:hover{
    background: var(--s3);
    color: var(--t2);
}

/* Per-chart accordion. Each entry is a click-to-open card that lazy-
   renders its ApexChart on first open via ctToggleChart().            */
.cpuz-test-root .chart-acc{
    border: 1px solid var(--b0);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 6px;
}
.cpuz-test-root .chart-acc:last-child{ margin-bottom: 0; }
.cpuz-test-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-test-root .chart-acc-trigger:hover{ background: var(--s3); }
.cpuz-test-root .chart-acc-trigger.open{ background: var(--s3); }
.cpuz-test-root .chart-acc-left{
    display: flex;
    align-items: center;
    gap: 12px;
}
.cpuz-test-root .chart-acc-title{
    font-size: 13px;
    font-weight: 500;
    color: var(--t1);
}
.cpuz-test-root .chart-acc-sku{
    font-family: var(--mono);
    font-size: 12px;
    color: var(--t4);
}
.cpuz-test-root .chart-acc-arrow{
    color: var(--t4);
    transition: transform .2s;
    flex-shrink: 0;
}
.cpuz-test-root .chart-acc-trigger.open .chart-acc-arrow{ transform: rotate(180deg); }
.cpuz-test-root .chart-acc-body{
    display: none;
    background: var(--s1);
    padding: 14px 16px;
}
.cpuz-test-root .chart-acc-body.open{ display: block; }

/* ── RESPONSIVE — narrow screens ─────────────────
   Placed at the END of the file so each rule below comes AFTER its base
   counterpart in source order. Below 1024px:
     - the fixed 420px aside + main content overflow horizontally → stack;
     - metric tiles flagged .mtile-hide-narrow disappear;
     - storage drive meta forced to 2 × 2;
     - telemetry gauges 4 cols → 2 × 2;
     - voltage / fan-speed cards stacked full-width. */
@media (max-width: 1024px){
    .cpuz-test-root .body{
        flex-direction: column;
        gap: 18px;
    }
    .cpuz-test-root .aside{
        width: 100%;
    }
    .cpuz-test-root .mtile-hide-narrow{
        display: none;
    }
    .cpuz-test-root .drive-meta-grid{
        grid-template-columns: 1fr 1fr;
    }
}