/* VOID.SYS — component library. Reads ONLY from tokens.css variables.
   Link after tokens.css (+ optionally presets.css). Extracted from VOID.SYS Editorial.html. */
/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
    background-color: var(--bg);
    font-family: var(--font-body);
    color: var(--black);
    overflow-x: clip;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--white); }

/* =========================================================
   FOCUS & KEYBOARD — visible only for keyboard focus.
   Form fields keep their own :focus lift (see FORMS).
   ========================================================= */
:focus { outline: none; }
:focus-visible:not(input):not(textarea):not(select) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.skip-link {
    position: fixed;
    top: 12px; left: 12px;
    z-index: var(--z-cursor);
    transform: translateY(-300%);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 18px;
    box-shadow: var(--shadow-accent);
}
.skip-link:focus-visible { transform: none; }

/* =========================================================
   REDUCED MOTION — decorative motion dies, content stays
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        transition-delay: 0s !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    /* Marquees are chrome, not decoration — keep them alive */
    .marquee-text > span { animation: marquee 20s linear infinite !important; }
    .announce-bar-inner { animation: marquee 30s linear infinite !important; }
    .edt-ticker-track { animation: edt-marquee 38s linear infinite !important; }
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: calc(var(--z-grain) + 1);
    opacity: 0.04;
    /* Pre-rendered noise tile — a live filter:url(#noise) here re-rasterizes
       the full viewport every animation frame and freezes the page */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1, h2, h3, h4, .font-display {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -2px;
    line-height: 0.95;
}

h1 { font-size: clamp(3.5rem, 10vw, 8rem); letter-spacing: -4px; }
h2 { font-size: clamp(2rem, 5vw, 4rem); }
h3 { font-size: clamp(1.2rem, 3vw, 2.25rem); letter-spacing: -1px; }
h4 { font-size: 1rem; letter-spacing: 0; }

p { font-size: 1.05rem; font-weight: 400; margin-bottom: var(--space-sm); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.mono-small {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.mono-xs {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
}

/* Pull Quote */
.pull-quote {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-style: italic;
    line-height: 1.15;
    letter-spacing: -1px;
    padding-left: var(--space-md);
    border-left: var(--border-thick);
}

/* Giant Numeric */
.numeric-giant {
    font-family: var(--font-display);
    font-size: clamp(5rem, 15vw, 12rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -8px;
}

/* Kbd */
kbd, .kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: 2px 2px 0 var(--black);
    color: var(--black);
    text-transform: uppercase;
}

/* Marquee Text */
.marquee-text {
    overflow: hidden;
    white-space: nowrap;
}
.marquee-text > span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -1px;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* =========================================================
   LAYOUT
   ========================================================= */
.section-break {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: var(--border-thick);
    position: relative;
}

/* Ghost numeral behind section headers */
.section-header {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.section-header h2 {
    position: relative;
    z-index: 2;
}

.section-meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--ink-muted);
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-md);
}

.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* =========================================================
   CARD
   ========================================================= */
.card {
    border: var(--border-base);
    padding: var(--space-md);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    position: relative;
}

.card-accent {
    background: var(--accent);
    color: var(--white);
}

.card-dark {
    background: var(--black);
    color: var(--white);
}

.card-interactive { transition: transform var(--dur-instant), box-shadow var(--dur-instant); cursor: pointer; }
.card-interactive:hover {
    transform: translate(-4px, -4px);
    box-shadow: var(--shadow-lvl2);
}
.card-interactive:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--black);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 14px 28px;
    background: var(--accent);
    color: var(--white);
    text-decoration: none;
    font-weight: 800;
    font-size: 0.95rem;
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    transition: transform var(--dur-instant), box-shadow var(--dur-instant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-family: var(--font-body);
    white-space: nowrap;
}

.btn:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-lvl2); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--black); }

.btn-white, .btn-default { background: var(--white); color: var(--black); }
.btn-primary { background: var(--accent); color: var(--white); } /* explicit alias — primary IS the base .btn look */
.btn-secondary { background: var(--black); color: var(--white); }
.btn-danger { background: var(--danger); color: var(--black); }
.btn-success { background: var(--success); color: var(--black); }
.btn-warning { background: var(--warning); color: var(--black); }

.btn-ghost {
    background: transparent;
    color: var(--black);
    box-shadow: none;
}
.btn-ghost:hover {
    background: var(--black);
    color: var(--white);
    box-shadow: var(--shadow-lvl1);
}

.btn-disabled {
    background: var(--gray);
    color: #888;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

.btn-sm { padding: 8px 16px; font-size: 0.8rem; }
.btn-lg { padding: 20px 40px; font-size: 1.1rem; }
.btn-icon { padding: 12px; }

.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    border: 3px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    color: var(--white);
}
.btn-loading.btn-white::after, .btn-loading.btn-default::after { color: var(--black); }

.btn-group {
    display: inline-flex;
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    background: var(--white);
    transition: transform var(--dur-instant), box-shadow var(--dur-instant);
}
.btn-group:hover { box-shadow: var(--shadow-lvl2); transform: translate(-4px, -4px); }
.btn-group:active { box-shadow: 0 0 0 var(--black); transform: translate(4px, 4px); }
.btn-group .btn {
    border: none;
    border-right: var(--border-base);
    box-shadow: none !important;
    transform: none !important;
}
.btn-group .btn:last-child { border-right: none; }
.btn-group .btn:hover { background: var(--black); color: var(--white); }

/* Segmented Control */
.segmented {
    display: inline-flex;
    border: var(--border-base);
    background: var(--gray);
    padding: 4px;
    gap: 4px;
    box-shadow: var(--shadow-lvl1);
}
.segmented button {
    padding: 8px 20px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--black);
    transition: background var(--dur-instant);
}
.segmented button.active {
    background: var(--black);
    color: var(--white);
}

.token-box {
    border: var(--border-base);
    padding: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    text-align: center;
    background: var(--white);
}

/* =========================================================
   FORMS
   ========================================================= */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    width: 100%;
}
.form-group:last-child { margin-bottom: 0; }

.form-label {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-control {
    border: var(--border-base);
    padding: 14px 16px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    background: var(--white);
    color: var(--black);
    box-shadow: var(--shadow-lvl1);
    outline: none;
    transition: transform var(--dur-instant), box-shadow var(--dur-instant);
    width: 100%;
}

.form-control:focus {
    box-shadow: var(--shadow-lvl2);
    transform: translate(-2px, -2px);
}

.form-control::placeholder { color: #999; font-weight: 400; }

textarea.form-control { resize: vertical; min-height: 120px; }

select.form-control {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='4' stroke-linecap='square'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 48px;
}

/* Search input with kbd */
.search-wrap {
    position: relative;
    width: 100%;
}
.search-wrap .form-control { padding-left: 48px; padding-right: 64px; }
.search-wrap svg.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.search-wrap .kbd {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* Checkbox & Radio */
.brutal-control {
    position: relative;
    padding-left: 36px;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}
.brutal-control input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0; width: 0;
}
.brutal-indicator {
    position: absolute;
    top: 0; left: 0;
    height: 24px; width: 24px;
    background: var(--white);
    border: var(--border-base);
    box-shadow: 2px 2px 0 var(--black);
    transition: background var(--dur-instant);
}
.brutal-control:hover input ~ .brutal-indicator { background: #f0f0f0; }
.brutal-control input:checked ~ .brutal-indicator { background: var(--accent); }
.brutal-indicator:after { content: ""; position: absolute; display: none; }
.brutal-control input:checked ~ .brutal-indicator:after { display: block; }
.brutal-control.checkbox .brutal-indicator:after {
    left: 4px; top: 4px;
    width: 10px; height: 10px;
    background: var(--black);
}
.brutal-control.radio .brutal-indicator { border-radius: 50%; }
.brutal-control.radio .brutal-indicator:after {
    left: 4px; top: 4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--black);
}

/* Toggle Switch (.toggle/.toggle-slider are aliases — settings-list markup uses them) */
.brutal-switch, .toggle {
    position: relative;
    display: inline-block;
    width: 64px; height: 32px;
}
.brutal-switch input, .toggle input { opacity: 0; width: 0; height: 0; }
.brutal-slider, .toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--white);
    border: var(--border-base);
    box-shadow: 2px 2px 0 var(--black);
    border-radius: var(--radius-pill);
    transition: background var(--dur-base);
}
.brutal-slider:before, .toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 4px; bottom: 4px;
    background: var(--black);
    border-radius: 50%;
    transition: transform var(--dur-base);
}
.brutal-switch input:checked + .brutal-slider, .toggle input:checked + .toggle-slider { background: var(--accent); }
.brutal-switch input:checked + .brutal-slider:before, .toggle input:checked + .toggle-slider:before {
    transform: translateX(32px);
    background: var(--white);
}

/* Range Slider */
.range-wrap { width: 100%; }
.range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: var(--white);
    border: var(--border-base);
    box-shadow: 2px 2px 0 var(--black);
    outline: none;
    cursor: pointer;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px; height: 28px;
    background: var(--accent);
    border: var(--border-base);
    box-shadow: 2px 2px 0 var(--black);
    cursor: grab;
}
.range-slider::-moz-range-thumb {
    width: 28px; height: 28px;
    background: var(--accent);
    border: var(--border-base);
    box-shadow: 2px 2px 0 var(--black);
    cursor: grab;
    border-radius: 0;
}
.range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-xs);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
}

/* OTP Input */
.otp-wrap {
    display: flex;
    gap: var(--space-sm);
}
.otp-wrap input {
    width: 56px; height: 64px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 800;
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    background: var(--white);
    outline: none;
    transition: transform var(--dur-instant), box-shadow var(--dur-instant);
}
.otp-wrap input:focus {
    background: var(--accent);
    color: var(--white);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-lvl2);
}

/* File Upload / Dropzone */
.dropzone {
    border: 3px dashed var(--black);
    padding: var(--space-lg);
    text-align: center;
    background: var(--white);
    cursor: pointer;
    transition: background var(--dur-instant), transform var(--dur-instant);
}
.dropzone:hover {
    background: var(--warning);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-lvl1);
}
.dropzone .dropzone-icon {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-mono);
    margin-bottom: var(--space-xs);
}

/* Stepper Input */
.stepper {
    display: inline-flex;
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    background: var(--white);
}
.stepper button {
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 1.2rem;
    background: var(--white);
    border: none;
    border-right: var(--border-base);
    cursor: pointer;
}
.stepper button:last-child { border-right: none; border-left: var(--border-base); }
.stepper button:hover { background: var(--accent); color: var(--white); }
.stepper .stepper-value {
    padding: 10px 20px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 1rem;
    min-width: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   FEEDBACK & STATUS
   ========================================================= */
.alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    font-weight: 700;
    gap: var(--space-sm);
}
.alert-success { background: var(--success); color: var(--black); }
.alert-warning { background: var(--warning); color: var(--black); }
.alert-error { background: var(--danger); color: var(--black); }
.alert-info { background: var(--info); color: var(--black); }

.toast {
    display: flex;
    flex-direction: column;
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-lvl2);
    padding: var(--space-md);
    position: relative;
}
.toast-header {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: var(--border-thin);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid var(--black);
    box-shadow: 2px 2px 0 var(--black);
    white-space: nowrap;
    line-height: 1.4;
}
.badge-solid { background: var(--black); color: var(--white); }
.badge-error { background: var(--danger); color: var(--black); }
.badge-success { background: var(--success); color: var(--black); }
.badge-warning { background: var(--warning); color: var(--black); }
.badge-accent { background: var(--accent); color: var(--white); }
.badge-pill { border-radius: var(--radius-pill); }
.badge-outlined { background: var(--white); color: var(--black); }

/* Tag with remove */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 12px;
    border: 2px solid var(--black);
    background: var(--white);
    box-shadow: 2px 2px 0 var(--black);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-family: var(--font-mono);
}
.tag button {
    width: 20px; height: 20px;
    border: 2px solid var(--black);
    background: var(--black);
    color: var(--white);
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.7rem;
    line-height: 1;
}
.tag button:hover { background: var(--danger); color: var(--black); }

/* Status Dots */
.status-dot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.status-dot::before {
    content: '';
    width: 10px; height: 10px;
    border: 2px solid var(--black);
    border-radius: 50%;
    background: var(--gray);
}
.status-dot.live::before { background: var(--success); animation: pulse 2s infinite; }
.status-dot.offline::before { background: var(--danger); }
.status-dot.busy::before { background: var(--warning); }
.status-dot.away::before { background: var(--info); }

/* Tooltip */
.tooltip-container {
    position: relative;
    display: inline-block;
    border-bottom: 2px dashed var(--black);
    cursor: help;
    font-weight: 700;
}
.tooltip-container::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--black);
    color: var(--white);
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    border: 2px solid var(--black);
    box-shadow: 4px 4px 0 var(--accent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-instant), transform var(--dur-instant);
    z-index: var(--z-tooltip);
}
.tooltip-container:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}

/* Popover */
.popover {
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-lvl2);
    padding: var(--space-md);
    max-width: 320px;
    position: relative;
}
.popover::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 30px;
    width: 20px;
    height: 20px;
    background: var(--white);
    border-top: var(--border-base);
    border-left: var(--border-base);
    transform: rotate(45deg);
}

/* Spinner (brutalist) */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--black);
    border-top-color: var(--accent);
    animation: spin 0.8s steps(8) infinite;
}
.spinner-sm { width: 24px; height: 24px; border-width: 3px; }
.spinner-lg { width: 64px; height: 64px; border-width: 6px; }

/* Skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--gray) 25%, #f0f0f0 50%, var(--gray) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s linear infinite;
    border: var(--border-base);
    box-shadow: 2px 2px 0 var(--black);
    height: 16px;
}
.skeleton-title { height: 32px; width: 60%; }
.skeleton-text { height: 14px; width: 100%; margin-bottom: 8px; }
.skeleton-text:last-child { width: 75%; margin-bottom: 0; }
.skeleton-avatar { width: 60px; height: 60px; border-radius: 50%; }

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--space-lg);
    border: 3px dashed var(--black);
    background: var(--white);
}
.empty-state .empty-icon {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: var(--space-sm);
    letter-spacing: -2px;
}

/* Stepper / Progress Steps */
.steps {
    display: flex;
    gap: 0;
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-lvl1);
    overflow: hidden;
}
.step {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border-right: var(--border-base);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--ink-muted);
}
.step:last-child { border-right: none; }
.step.complete { background: var(--black); color: var(--white); }
.step.current { background: var(--accent); color: var(--white); }
.step-num {
    width: 24px; height: 24px;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.75rem;
}

/* Rating Stars */
.rating {
    display: inline-flex;
    gap: 4px;
}
.rating .star {
    width: 24px; height: 24px;
    background: var(--white);
    border: 2px solid var(--black);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background: var(--gray);
}
.rating .star.filled { background: var(--warning); }

/* =========================================================
   NAVIGATION
   ========================================================= */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-lvl1);
}
.sidebar-nav a {
    padding: var(--space-md);
    border-bottom: var(--border-base);
    border-left: 0px solid var(--accent);
    text-decoration: none;
    color: var(--black);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background var(--dur-instant), color var(--dur-instant), border-left var(--dur-instant);
}
.sidebar-nav a:last-child { border-bottom: none; }
.sidebar-nav a:hover, .sidebar-nav a.active {
    background: var(--black);
    color: var(--white);
    border-left: 12px solid var(--accent);
}

/* Pill Nav */
.nav-pills {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}
.nav-pill {
    padding: 8px 20px;
    border: var(--border-base);
    border-radius: var(--radius-pill);
    text-decoration: none;
    color: var(--black);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    background: var(--white);
    box-shadow: 2px 2px 0 var(--black);
    transition: transform var(--dur-instant), box-shadow var(--dur-instant), background var(--dur-instant);
}
.nav-pill:hover, .nav-pill.active {
    background: var(--accent);
    color: var(--white);
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--black);
}
.nav-pill:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--black); }

/* Tabs Horizontal */
.tabs-horizontal {
    display: flex;
    border-bottom: var(--border-thick);
    gap: var(--space-xs);
}
.tab {
    padding: 14px 24px;
    border: var(--border-base);
    border-bottom: none;
    background: var(--gray);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    transform: translateY(6px);
    transition: background var(--dur-instant);
}
.tab:hover { background: var(--white); }
.tab.active {
    background: var(--white);
    border-bottom: 6px solid var(--white);
    z-index: 2;
}

/* Tabs Vertical */
.tabs-vertical-container {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
}
.tabs-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 200px;
}
.tab-v {
    padding: var(--space-md);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: var(--border-base);
    background: var(--white);
    box-shadow: 4px 4px 0 var(--black);
    text-align: left;
    transition: background var(--dur-instant), transform var(--dur-instant), box-shadow var(--dur-instant);
}
.tab-v:hover { background: var(--gray); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }
.tab-v.active {
    background: var(--accent);
    color: var(--white);
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--black);
}

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    background: var(--white);
    padding: var(--space-sm);
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    width: fit-content;
}
.breadcrumbs a { color: var(--accent); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span.separator { margin: 0 4px; color: var(--ink-muted); }

/* Pagination */
.pagination {
    display: inline-flex;
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    background: var(--white);
}
.page-item {
    padding: 12px 20px;
    border-right: var(--border-base);
    font-weight: 800;
    text-decoration: none;
    color: var(--black);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    transition: background var(--dur-instant), color var(--dur-instant);
}
.page-item:last-child { border-right: none; }
.page-item:hover { background: var(--black); color: var(--white); }
.page-item.active { background: var(--accent); color: var(--white); }

/* Dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--white);
    border: var(--border-base);
    box-shadow: var(--shadow-lvl2);
    display: none;
    flex-direction: column;
    min-width: 200px;
    z-index: var(--z-dropdown);
}
.dropdown:hover .dropdown-menu { display: flex; }
.dropdown-item {
    padding: var(--space-sm);
    border-bottom: var(--border-thin);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: var(--black);
    transition: background var(--dur-instant), color var(--dur-instant), padding var(--dur-instant);
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--accent); color: var(--white); padding-left: var(--space-md); }

/* Announcement Bar */
.announce-bar {
    background: var(--black);
    color: var(--white);
    padding: 10px 0;
    border-bottom: var(--border-base);
    overflow: hidden;
    white-space: nowrap;
}
.announce-bar-inner {
    display: inline-block;
    animation: marquee 30s linear infinite;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.announce-bar-inner span { padding: 0 var(--space-md); }
.announce-bar-inner .accent { color: var(--warning); }

/* Command Palette (static) */
.cmd-palette {
    max-width: 560px;
    background: var(--white);
    border: var(--border-thick);
    box-shadow: var(--shadow-lvl3);
}
.cmd-palette-header {
    padding: var(--space-sm) var(--space-md);
    border-bottom: var(--border-base);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.cmd-palette-header input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.1rem;
    font-family: var(--font-body);
    font-weight: 600;
    background: transparent;
}
.cmd-palette-list {
    padding: var(--space-xs);
    max-height: 320px;
    overflow-y: auto;
}
.cmd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
}
.cmd-item:hover, .cmd-item.active {
    background: var(--accent);
    color: var(--white);
}
.cmd-item .cmd-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-transform: uppercase;
}
.cmd-palette-footer {
    padding: var(--space-sm) var(--space-md);
    border-top: var(--border-base);
    background: var(--bg);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    gap: var(--space-md);
    text-transform: uppercase;
}
.cmd-palette-footer span { display: inline-flex; align-items: center; gap: 6px; }

/* =========================================================
   DATA DISPLAY
   ========================================================= */
.table-container {
    width: 100%;
    overflow-x: auto;
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    background: var(--white);
}
.table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.table th, .table td {
    padding: 14px 20px;
    border-bottom: var(--border-thin);
    border-right: var(--border-thin);
    font-weight: 700;
    font-size: 0.95rem;
}
.table th:last-child, .table td:last-child { border-right: none; }
.table th {
    background: var(--black);
    color: var(--white);
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: -0.5px;
    font-size: 0.95rem;
}
.table-striped tbody tr:nth-child(even) { background: #f4f4f4; }
.table tbody tr:hover { background: var(--accent); color: var(--white); }
.table-sortable th { cursor: pointer; transition: background var(--dur-instant); }
.table-sortable th:hover { background: #333; }
.sort-icon { display: inline-block; margin-left: 8px; font-size: 0.7rem; }

/* Stat Card */
.stat-card {
    border: var(--border-base);
    background: var(--white);
    padding: var(--space-md);
    box-shadow: var(--shadow-lvl1);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    position: relative;
}
.stat-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-muted);
}
.stat-value {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
}
.stat-delta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 800;
    padding: 4px 8px;
    border: 2px solid var(--black);
    width: fit-content;
    text-transform: uppercase;
}
.stat-delta.up { background: var(--success); }
.stat-delta.down { background: var(--danger); }
.stat-delta.flat { background: var(--gray); }
.stat-spark {
    height: 40px;
    margin-top: var(--space-xs);
    display: flex;
    align-items: flex-end;
    gap: 2px;
}
.stat-spark .bar {
    flex: 1;
    background: var(--black);
    min-height: 4px;
}

/* Avatar Stack */
.avatar-stack {
    display: inline-flex;
}
.avatar {
    width: 44px; height: 44px;
    border: var(--border-base);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--black);
    box-shadow: 2px 2px 0 var(--black);
}
.avatar-stack .avatar {
    margin-left: -14px;
    background: var(--white);
    transition: transform var(--dur-instant);
}
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .avatar:nth-child(2) { background: var(--accent); color: var(--white); }
.avatar-stack .avatar:nth-child(3) { background: var(--warning); }
.avatar-stack .avatar:nth-child(4) { background: var(--success); }
.avatar-stack .avatar:nth-child(5) { background: var(--black); color: var(--white); }
.avatar-stack .avatar:hover { transform: translateY(-4px); z-index: 10; }

/* Spec Sheet (key-value table) */
.spec-sheet {
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-lvl1);
}
.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: var(--border-thin);
    gap: var(--space-md);
}
.spec-row:last-child { border-bottom: none; }
.spec-row:hover { background: var(--bg); }
.spec-key {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-muted);
}
.spec-value {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.9rem;
    text-align: right;
}

/* Timeline — Vertical */
.timeline {
    position: relative;
    padding-left: 48px;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 12px;
    bottom: 12px;
    width: 4px;
    background: var(--black);
}
.timeline-item {
    position: relative;
    padding: 0 0 var(--space-md) 0;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: -46px;
    top: 4px;
    width: 22px;
    height: 22px;
    background: var(--white);
    border: var(--border-base);
    box-shadow: 2px 2px 0 var(--black);
    z-index: 1;
}
.timeline-item.complete::before { background: var(--success); }
.timeline-item.current::before { background: var(--accent); animation: pulse 2s infinite; }
.timeline-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    line-height: 1.25;
    margin: 0 0 4px 0;
}
.timeline-time {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-muted);
    margin-bottom: 6px;
}
.timeline-desc {
    font-size: 0.9rem;
    color: var(--ink);
    line-height: 1.45;
}

/* Timeline — Horizontal */
.timeline-h {
    position: relative;
    display: flex;
    width: 100%;
    padding: 32px 0 var(--space-sm) 0;
}
.timeline-h::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 43px;
    height: 4px;
    background: var(--black);
    z-index: 0;
}
.timeline-h-item {
    flex: 1;
    position: relative;
    padding-top: 32px;
    text-align: center;
    min-width: 0;
}
.timeline-h-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    background: var(--white);
    border: var(--border-base);
    box-shadow: 2px 2px 0 var(--black);
    z-index: 1;
}
.timeline-h-item.complete::before { background: var(--success); }
.timeline-h-item.current::before { background: var(--accent); animation: pulse 2s infinite; }
.timeline-h-item .timeline-time {
    margin-bottom: 4px;
}
.timeline-h-item .timeline-title {
    font-size: 0.85rem;
}
.timeline-h-label {
    display: inline-block;
    padding: 2px 8px;
    background: var(--black);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

/* List Group */
.list-group {
    display: flex;
    flex-direction: column;
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-lvl1);
}
.list-item {
    padding: var(--space-md) var(--space-lg);
    border-bottom: var(--border-base);
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.list-item:last-child { border-bottom: none; }

/* Progress Bars */
.progress-container {
    width: 100%;
    height: 40px;
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-inset);
    position: relative;
    margin-bottom: var(--space-sm);
}
.progress-container:last-child { margin-bottom: 0; }
.progress-bar {
    height: 100%;
    background: var(--success);
    border-right: var(--border-base);
    transition: width var(--dur-smooth);
}
.progress-label {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-weight: 800;
    background: var(--black);
    color: var(--white);
    padding: 2px 8px;
    border: 2px solid var(--black);
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* CSS Bar Chart */
.chart-container {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    height: 250px;
    border-left: var(--border-thick);
    border-bottom: var(--border-thick);
    padding: var(--space-sm) var(--space-sm) 0 var(--space-md);
    background: repeating-linear-gradient(0deg, transparent, transparent 39px, var(--black) 39px, var(--black) 40px);
}
.chart-bar {
    width: 48px;
    background: var(--accent);
    border: var(--border-base);
    border-bottom: none;
    position: relative;
    box-shadow: 6px 0 0 0 var(--black);
    transition: background var(--dur-base), transform var(--dur-base);
    cursor: pointer;
}
.chart-bar:hover { background: var(--warning); transform: translateY(-10px); }
.chart-bar-label {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
}
.chart-bar-value {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 800;
    background: var(--white);
    border: 2px solid var(--black);
    padding: 2px 6px;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity var(--dur-base), top var(--dur-base);
}
.chart-bar:hover .chart-bar-value { opacity: 1; top: -40px; }

/* =========================================================
   INTERACTIVE
   ========================================================= */
.modal-backdrop {
    width: 100%;
    padding: var(--space-xl) var(--space-md);
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-thick);
}
.modal-box {
    background: var(--white);
    border: var(--border-thick);
    box-shadow: var(--shadow-lvl3);
    width: 100%;
    max-width: 500px;
    padding: var(--space-lg);
    position: relative;
}

details.accordion {
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    background: var(--white);
    margin-bottom: var(--space-sm);
}
details.accordion:last-child { margin-bottom: 0; }
details.accordion summary {
    padding: var(--space-md);
    font-weight: 800;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    transition: background var(--dur-instant);
}
details.accordion summary::-webkit-details-marker { display: none; }
details.accordion summary:hover { background: #f4f4f4; }
details.accordion summary .acc-num {
    font-family: var(--font-mono);
    color: var(--accent);
    margin-right: 12px;
}
details.accordion summary .acc-icon {
    font-size: 1.5rem;
    font-weight: 800;
    transition: transform var(--dur-base);
}
details[open].accordion summary { border-bottom: var(--border-base); background: var(--accent); color: var(--white); }
details[open].accordion summary .acc-num { color: var(--warning); }
details[open].accordion summary .acc-icon { transform: rotate(45deg); }
details.accordion .content {
    padding: var(--space-md);
    font-weight: 400;
    line-height: 1.6;
    background: var(--white);
}

/* Chat Bubbles */
.chat-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.chat-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    position: relative;
}
.chat-bubble .chat-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
    opacity: 0.7;
}
.chat-bubble.them { align-self: flex-start; background: var(--white); }
.chat-bubble.me { align-self: flex-end; background: var(--accent); color: var(--white); }

/* Cookie Banner */
.cookie-banner {
    border: var(--border-thick);
    background: var(--warning);
    padding: var(--space-md);
    box-shadow: var(--shadow-lvl2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
}
.cookie-banner-text {
    flex: 1;
    min-width: 240px;
}
.cookie-banner-text strong {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.2rem;
    display: block;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

/* CTA Block */
.cta-block {
    border: var(--border-thick);
    background: var(--black);
    color: var(--white);
    padding: var(--space-lg);
    box-shadow: var(--shadow-lvl2);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-lg);
    align-items: center;
    position: relative;
    overflow: hidden;
}
.cta-block::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 200px; height: 200px;
    background: var(--accent);
    transform: translate(30%, -30%) rotate(45deg);
}
.cta-block h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 0.95;
    margin-bottom: var(--space-sm);
    position: relative;
    z-index: 1;
}
.cta-block p {
    opacity: 0.8;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}
.cta-block .cta-actions {
    display: flex;
    gap: var(--space-sm);
    position: relative;
    z-index: 1;
    justify-content: flex-end;
}

/* =========================================================
   MEDIA
   ========================================================= */
.media-player {
    border: var(--border-thick);
    background: var(--black);
    color: var(--white);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lvl2);
}
.media-screen {
    aspect-ratio: 16/9;
    background: var(--gray);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    font-weight: 800;
    font-family: var(--font-mono);
    position: relative;
    overflow: hidden;
}
.media-controls {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-top: var(--border-thick);
    background: var(--white);
    color: var(--black);
    align-items: center;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-sm);
}
.gallery-item {
    aspect-ratio: 1;
    border: var(--border-base);
    background: var(--black);
    box-shadow: var(--shadow-lvl1);
    transition: transform var(--dur-base), box-shadow var(--dur-base), background var(--dur-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 800;
    font-family: var(--font-mono);
}
.gallery-item:hover {
    transform: translate(-4px, -4px);
    box-shadow: var(--shadow-lvl2);
    background: var(--accent);
}

/* =========================================================
   LAYOUT
   ========================================================= */
.code-block {
    background: var(--black);
    color: var(--success);
    padding: var(--space-md);
    border: var(--border-thick);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    overflow-x: auto;
    position: relative;
    box-shadow: var(--shadow-lvl2);
    line-height: 1.6;
}
.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed #444;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    color: var(--white);
}
.code-copy {
    background: var(--black);
    color: var(--white);
    border: 2px solid var(--white);
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--accent);
}
.code-copy:hover { background: var(--accent); }

.footer-component {
    border: var(--border-thick);
    background: var(--accent);
    color: var(--white);
    padding: var(--space-lg);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    box-shadow: var(--shadow-lvl1);
}
.footer-component h4 {
    margin-bottom: var(--space-sm);
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0;
}
.footer-component a {
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
    display: block;
    margin-bottom: var(--space-xs);
    transition: transform var(--dur-instant), text-decoration var(--dur-instant);
    font-size: 0.9rem;
}
.footer-component a:hover {
    text-decoration: underline;
    transform: translateX(4px);
}

/* =========================================================
   PATTERNS
   ========================================================= */
.pattern-grid {
    background-color: var(--white);
    background-image:
        linear-gradient(var(--black) 2px, transparent 2px),
        linear-gradient(90deg, var(--black) 2px, transparent 2px);
    background-size: 30px 30px;
}
.pattern-dots {
    background-color: var(--white);
    background-image: radial-gradient(var(--black) 3px, transparent 3px);
    background-size: 24px 24px;
}
.pattern-stipple {
    background: var(--accent);
    filter: url(#noise-heavy);
}
.pattern-diagonal {
    background-color: var(--white);
    background-image: repeating-linear-gradient(45deg, var(--black) 0, var(--black) 4px, transparent 4px, transparent 16px);
}
.pattern-crosshatch {
    background-color: var(--white);
    background-image:
        repeating-linear-gradient(45deg, var(--black) 0, var(--black) 2px, transparent 2px, transparent 16px),
        repeating-linear-gradient(-45deg, var(--black) 0, var(--black) 2px, transparent 2px, transparent 16px);
}
.pattern-checker {
    background-color: var(--white);
    background-image: conic-gradient(var(--black) 90deg, transparent 90deg 180deg, var(--black) 180deg 270deg, transparent 270deg);
    background-size: 32px 32px;
}
.pattern-noise {
    background-color: var(--accent);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* =========================================================
   TOP BARS (Terminal + Announcement)
   ========================================================= */
.terminal-bar {
    background: var(--black);
    color: var(--white);
    padding: 6px 0;
    border-bottom: var(--border-base);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.terminal-bar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.terminal-bar .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    display: inline-block;
    margin-right: 6px;
    animation: pulse 2s infinite;
}
.terminal-bar .term-group { display: inline-flex; align-items: center; gap: 8px; }
.terminal-bar .term-sep { opacity: 0.4; margin: 0 8px; }

/* Main Nav (top) */
nav.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: var(--border-base);
    margin-bottom: var(--space-xl);
}
.logo {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -2px;
}
nav.main-nav .nav-links {
    display: flex;
    gap: var(--space-md);
}
nav.main-nav .nav-links a {
    text-decoration: none;
    color: var(--black);
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color var(--dur-instant);
    position: relative;
}
nav.main-nav .nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 3px;
    background: var(--accent);
    transition: width var(--dur-base);
}
nav.main-nav .nav-links a:hover::after { width: 100%; }

/* Table of Contents */
.toc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0;
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-lvl2);
}
.toc-item {
    padding: var(--space-md);
    border-right: var(--border-thin);
    border-bottom: var(--border-thin);
    text-decoration: none;
    color: var(--black);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background var(--dur-instant), color var(--dur-instant);
    cursor: pointer;
}
.toc-item:hover { background: var(--accent); color: var(--white); }
.toc-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    opacity: 0.7;
}
.toc-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

/* Hero */
.hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-lg);
    padding: var(--space-md) 0 var(--space-xl);
    border-bottom: var(--border-thick);
    align-items: end;
    position: relative;
}
.hero h1 { margin-bottom: var(--space-md); }
.hero-intro {
    font-size: 1.3rem;
    max-width: 540px;
    font-weight: 500;
    line-height: 1.4;
}
.hero-spec {
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-lvl2);
    padding: var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.85rem;
}
.hero-spec-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: var(--border-thin);
    font-weight: 700;
}
.hero-spec-row:last-child { border-bottom: none; }
.hero-spec-row .k { color: var(--ink-muted); text-transform: uppercase; letter-spacing: 1px; }
.hero-spec-row .v { color: var(--black); }

/* Cursor blink */
.cursor::after {
    content: '_';
    display: inline-block;
    margin-left: 2px;
    animation: blink 1s steps(1) infinite;
    color: var(--accent);
}

/* Responsive */
@media (max-width: 900px) {
    .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
    :root {
        --space-xl: 80px;
        --space-lg: 40px;
    }
    .chart-bar { width: 32px; }
    .tabs-vertical-container { flex-direction: column; }
    .tabs-vertical { min-width: 100%; }
    .hero { grid-template-columns: 1fr; }
    .cta-block { grid-template-columns: 1fr; }
    .cta-block .cta-actions { justify-content: flex-start; }
}

@media (max-width: 560px) {
    .steps { flex-direction: column; }
    .step { border-right: none; border-bottom: var(--border-base); }
    .step:last-child { border-bottom: none; }
    .otp-wrap input { width: 44px; height: 52px; font-size: 1.1rem; }
}

/* =====================================================
   EXTRA DATA VIZ — CHARTS
   ===================================================== */

/* Chart frame shared */
.viz-frame {
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-lvl1);
    padding: var(--space-md);
    position: relative;
}
.viz-frame-dark {
    background: var(--black);
    color: var(--white);
}
.viz-frame-dark .viz-title,
.viz-frame-dark .viz-subtitle,
.viz-frame-dark .viz-legend-label,
.viz-frame-dark .viz-axis-label { color: var(--white); }
.viz-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
}
.viz-subtitle {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--ink-muted);
    margin-bottom: var(--space-sm);
}
.viz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: var(--border-thin);
}
.viz-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.viz-legend-swatch {
    width: 14px;
    height: 14px;
    border: 2px solid var(--black);
}
.viz-axis-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    fill: var(--ink-muted);
}
.viz-axis-line { stroke: var(--black); stroke-width: 2; }
.viz-grid-line { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.4; }

/* Line / Area chart */
.viz-line-stroke { stroke: var(--accent); stroke-width: 3; fill: none; stroke-linejoin: miter; stroke-linecap: square; }
.viz-line-stroke-alt { stroke: var(--black); stroke-width: 3; fill: none; stroke-dasharray: 6 4; }
.viz-area-fill { fill: var(--accent); opacity: 0.2; }
.viz-point {
    fill: var(--white);
    stroke: var(--black);
    stroke-width: 2;
}
.viz-point.accent { fill: var(--accent); }

/* Donut */
.donut-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.donut-svg { flex-shrink: 0; }
.donut-ring { fill: transparent; stroke-width: 32; }
.donut-center {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2rem;
    text-anchor: middle;
    fill: var(--black);
}
.donut-center-sub {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-anchor: middle;
    fill: var(--ink-muted);
}
.donut-legend {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.donut-legend-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border: var(--border-thin);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}
.donut-legend-row .swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--black);
    margin-right: 8px;
    vertical-align: middle;
}

/* Stacked horizontal bar */
.hbar-row {
    display: grid;
    grid-template-columns: 110px 1fr 60px;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 0;
    border-bottom: var(--border-thin);
}
.hbar-row:last-child { border-bottom: none; }
.hbar-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hbar-track {
    height: 22px;
    border: var(--border-base);
    background: var(--white);
    display: flex;
    overflow: hidden;
}
.hbar-seg { height: 100%; display: block; }
.hbar-seg.accent { background: var(--accent); }
.hbar-seg.success { background: var(--success); }
.hbar-seg.warning { background: var(--warning); }
.hbar-seg.danger { background: var(--danger); }
.hbar-seg.black { background: var(--black); }
.hbar-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 800;
    text-align: right;
}

/* Heatmap */
.heatmap {
    display: grid;
    gap: 3px;
}
.heatmap-cell {
    aspect-ratio: 1;
    border: 1.5px solid var(--black);
    background: var(--white);
    position: relative;
    transition: transform var(--dur-instant);
}
.heatmap-cell:hover {
    transform: scale(1.18);
    z-index: 2;
    box-shadow: 3px 3px 0 var(--black);
}
.heatmap-cell[data-level="0"] { background: var(--surface); }
.heatmap-cell[data-level="1"] { background: var(--bg-deep); }
.heatmap-cell[data-level="2"] { background: var(--accent-2); }
.heatmap-cell[data-level="3"] { background: var(--accent-2); }
.heatmap-cell[data-level="4"] { background: var(--accent); }
.heatmap-cell[data-level="5"] { background: var(--black); }
.heatmap-scale {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-muted);
}
.heatmap-scale .scale-sq {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--black);
}

/* Gauge */
.gauge-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.gauge-bg { fill: none; stroke: var(--surface); stroke-width: 24; stroke-linecap: butt; }
.gauge-bg-outline { fill: none; stroke: var(--black); stroke-width: 3; }
.gauge-value-arc { fill: none; stroke: var(--accent); stroke-width: 24; stroke-linecap: butt; }
.gauge-tick { stroke: var(--black); stroke-width: 2; }
.gauge-needle { stroke: var(--black); stroke-width: 4; stroke-linecap: square; }
.gauge-needle-dot { fill: var(--black); }
.gauge-readout {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 4px;
}
.gauge-readout-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--ink-muted);
    margin-bottom: 12px;
}

/* Column chart w/ comparison */
.colchart {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 220px;
    padding-bottom: 32px;
    border-bottom: 3px solid var(--black);
    border-left: 3px solid var(--black);
    padding-left: 16px;
    position: relative;
}
.colchart-group {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    position: relative;
    height: 100%;
}
.colchart-bar {
    flex: 1;
    border: 2px solid var(--black);
    min-width: 12px;
    position: relative;
}
.colchart-bar.a { background: var(--accent); }
.colchart-bar.b { background: var(--warning); }
.colchart-bar.c { background: var(--black); }
.colchart-group-label {
    position: absolute;
    bottom: -26px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Radar / Spider chart styling handled inline in SVG */
.radar-poly { fill: var(--accent); fill-opacity: 0.25; stroke: var(--accent); stroke-width: 3; stroke-linejoin: miter; }
.radar-grid { fill: none; stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; }
.radar-axis { stroke: var(--black); stroke-width: 2; }
.radar-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    fill: var(--black);
}
.radar-point { fill: var(--accent); stroke: var(--black); stroke-width: 2; }

/* Funnel */
.funnel {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.funnel-step {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-sm);
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    margin: 0 auto;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    background: var(--accent);
    color: var(--white);
}
.funnel-step:nth-child(2) { background: var(--accent-2); color: var(--white); }
.funnel-step:nth-child(3) { background: var(--accent-2); }
.funnel-step:nth-child(4) { background: var(--bg-deep); }
.funnel-step:nth-child(5) { background: var(--white); }
.funnel-step span.funnel-count {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
}

/* =====================================================
   EXTRA TABLES
   ===================================================== */

/* Compact table */
.table-compact th, .table-compact td {
    padding: 6px 12px;
    font-size: 0.82rem;
}
.table-compact th {
    font-size: 0.72rem;
    letter-spacing: 1px;
}

/* Table with checkbox column */
.table-check th:first-child,
.table-check td:first-child {
    width: 42px;
    text-align: center;
    padding: 10px 0;
}
.table-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--black);
    background: var(--white);
    cursor: pointer;
    position: relative;
    margin: 0;
    box-shadow: 1px 1px 0 var(--black);
}
.table-check input[type="checkbox"]:checked {
    background: var(--accent);
}
.table-check input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    color: var(--white);
    font-weight: 800;
    font-size: 0.85rem;
    top: -3px;
    left: 2px;
}
.table-check tbody tr.selected { background: var(--bg-deep) !important; }
.table-check tbody tr.selected:hover { background: var(--accent) !important; }
.table-bulkbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--black);
    color: var(--white);
    border: var(--border-base);
    border-bottom: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.table-bulkbar .bulk-actions {
    display: flex;
    gap: 4px;
}
.table-bulkbar .bulk-actions button {
    background: var(--white);
    color: var(--black);
    border: 2px solid var(--white);
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}
.table-bulkbar .bulk-actions button:hover { background: var(--accent); color: var(--white); border-color: var(--accent); }

/* Row action buttons */
.row-actions {
    display: inline-flex;
    gap: 4px;
}
.row-action-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1.5px solid var(--black);
    box-shadow: 1px 1px 0 var(--black);
    cursor: pointer;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.72rem;
    transition: transform var(--dur-instant);
    color: var(--black);
}
.row-action-btn:hover { background: var(--accent); color: var(--white); transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--black); }
.row-action-btn.danger:hover { background: var(--danger); }

/* Grouped rows */
.table-grouped tr.group-header td {
    background: var(--black);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 8px 20px;
}
.table-grouped tbody tr.group-header:hover { background: var(--black) !important; color: var(--white); }

/* Inline viz in table */
.tbl-spark {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 22px;
    vertical-align: middle;
}
.tbl-spark .bar {
    width: 4px;
    background: var(--black);
}
.tbl-bar {
    display: inline-block;
    height: 8px;
    background: var(--accent);
    border: 1px solid var(--black);
    vertical-align: middle;
    margin-right: 6px;
}
.tbl-trend {
    display: inline-block;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.72rem;
    border: 1.5px solid var(--black);
}
.tbl-trend.up { background: var(--success); }
.tbl-trend.down { background: var(--danger); color: var(--white); }
.tbl-trend.flat { background: var(--gray); }

/* Summary / pivot table total row */
.table tbody tr.total-row td {
    background: var(--warning);
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.95rem;
    border-top: 3px solid var(--black);
}
.table tbody tr.total-row:hover td { background: var(--warning); color: var(--black); }

/* Table filter chip bar */
.table-filterbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px;
    background: var(--surface);
    border: var(--border-base);
    border-bottom: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.table-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: var(--white);
    border: 2px solid var(--black);
    box-shadow: 1px 1px 0 var(--black);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}
.table-filter-chip.active { background: var(--accent); color: var(--white); }
.table-filter-chip .x { cursor: pointer; font-weight: 800; }

/* Responsive tweaks */
@media (max-width: 760px) {
    .hbar-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
    .hbar-value { text-align: left; }
    .donut-wrap { flex-direction: column; align-items: flex-start; }
    .colchart { gap: 8px; }
    .timeline-h { flex-direction: column; padding-left: 48px; }
    .timeline-h::before { left: 9px; right: auto; top: 12px; bottom: 12px; width: 4px; height: auto; }
    .timeline-h-item { text-align: left; padding: 0 0 var(--space-md) 0; }
    .timeline-h-item::before { top: 4px; left: -46px; transform: none; }
}

/* =====================================================
   CHART INTERACTIVITY
   ===================================================== */
.viz-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: var(--z-float);
    background: var(--black);
    color: var(--white);
    border: 2px solid var(--black);
    box-shadow: 3px 3px 0 var(--accent);
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 10px));
    transition: opacity var(--dur-instant) ease;
}
.viz-tooltip.show { opacity: 1; }
.viz-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--black);
}
[data-tip] { cursor: pointer; }

/* Line chart points — interactive */
.viz-point {
    transition: transform var(--dur-instant), fill var(--dur-instant);
    transform-box: fill-box;
    transform-origin: center;
}
.viz-point:hover {
    transform: scale(1.6);
    fill: var(--warning);
}

/* Bar chart — interactive */
.chart-bar { cursor: pointer; }

/* Donut segments */
.donut-ring {
    transition: stroke-width var(--dur-fast) ease;
    cursor: pointer;
}
.donut-ring:hover { stroke-width: 40; }

/* Stacked hbar segments */
.hbar-seg {
    transition: filter var(--dur-instant), transform var(--dur-instant);
    cursor: pointer;
}
.hbar-seg:hover {
    filter: brightness(1.15) contrast(1.1);
    outline: 2px solid var(--black);
    outline-offset: -2px;
}

/* Grouped column bars */
.colchart-bar {
    transition: transform var(--dur-instant), filter var(--dur-instant);
    cursor: pointer;
}
.colchart-bar:hover {
    transform: translateY(-6px);
    filter: brightness(1.05);
    z-index: 2;
}

/* Radar points */
.radar-point {
    transition: r var(--dur-instant), fill var(--dur-instant);
    cursor: pointer;
}
.radar-point:hover { fill: var(--warning); }

/* Funnel steps */
.funnel-step {
    transition: transform var(--dur-instant), outline var(--dur-instant);
    cursor: pointer;
}
.funnel-step:hover {
    transform: translateX(4px);
    outline: 3px solid var(--black);
    outline-offset: -3px;
}

/* Legend click-toggle */
.viz-legend-item {
    cursor: pointer;
    user-select: none;
    transition: opacity var(--dur-fast);
}
.viz-legend-item.muted {
    opacity: 0.35;
    text-decoration: line-through;
}

/* Series visibility toggle (line chart) */
.viz-series.hidden { display: none; }

/* Gauge needle animatable */
.gauge-needle,
.gauge-value-arc {
    transition: all var(--dur-reveal) var(--ease-pop);
}

/* Animated entry for chart bars on load */
@keyframes grow-up {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
.chart-bar,
.colchart-bar {
    transform-origin: bottom;
}
.viz-animate .chart-bar,
.viz-animate .colchart-bar {
    animation: grow-up 0.6s var(--ease-pop) backwards;
}
.viz-animate .colchart-group:nth-child(1) .colchart-bar { animation-delay: 0.05s; }
.viz-animate .colchart-group:nth-child(2) .colchart-bar { animation-delay: 0.15s; }
.viz-animate .colchart-group:nth-child(3) .colchart-bar { animation-delay: 0.25s; }
.viz-animate .colchart-group:nth-child(4) .colchart-bar { animation-delay: 0.35s; }
.viz-animate .colchart-group:nth-child(5) .colchart-bar { animation-delay: 0.45s; }
.viz-animate .colchart-group:nth-child(6) .colchart-bar { animation-delay: 0.55s; }

/* Hbar grow-out on enter */
@keyframes grow-right {
    from { width: 0 !important; }
}
.viz-animate .hbar-seg { animation: grow-right 0.8s var(--ease-pop) backwards; }

/* Heatmap sequential entry */
@keyframes hm-pop {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* =====================================================
   EXTRA PATTERNS / BACKGROUNDS
   ===================================================== */
.pattern-grid-dense {
    background-color: var(--white);
    background-image:
        linear-gradient(var(--black) 1px, transparent 1px),
        linear-gradient(90deg, var(--black) 1px, transparent 1px);
    background-size: 15px 15px;
}
.pattern-grid-large {
    background-color: var(--white);
    background-image:
        linear-gradient(var(--black) 3px, transparent 3px),
        linear-gradient(90deg, var(--black) 3px, transparent 3px);
    background-size: 60px 60px;
}
.pattern-grid-accent {
    background-color: var(--white);
    background-image:
        linear-gradient(var(--accent) 2px, transparent 2px),
        linear-gradient(90deg, var(--accent) 2px, transparent 2px);
    background-size: 30px 30px;
}
.pattern-graph-paper {
    background-color: #fafaf7;
    background-image:
        linear-gradient(var(--accent) 2px, transparent 2px),
        linear-gradient(90deg, var(--accent) 2px, transparent 2px),
        linear-gradient(rgba(61,43,255,0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61,43,255,0.25) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
.pattern-blueprint {
    background-color: #0c1a3e;
    background-image:
        linear-gradient(rgba(255,255,255,0.35) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,0.35) 2px, transparent 2px),
        linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
    color: var(--white);
}
.pattern-dots-dense {
    background-color: var(--white);
    background-image: radial-gradient(var(--black) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
}
.pattern-dots-accent {
    background-color: var(--white);
    background-image: radial-gradient(var(--accent) 3px, transparent 3px);
    background-size: 24px 24px;
}
.pattern-dots-invert {
    background-color: var(--black);
    background-image: radial-gradient(var(--white) 3px, transparent 3px);
    background-size: 24px 24px;
    color: var(--white);
}
.pattern-halftone {
    background-color: var(--white);
    background-image:
        radial-gradient(var(--black) 4px, transparent 4px),
        radial-gradient(var(--black) 1.5px, transparent 1.5px);
    background-size: 32px 32px, 32px 32px;
    background-position: 0 0, 16px 16px;
}
.pattern-diagonal-reverse {
    background-color: var(--white);
    background-image: repeating-linear-gradient(-45deg, var(--black) 0, var(--black) 4px, transparent 4px, transparent 16px);
}
.pattern-diagonal-accent {
    background-color: var(--white);
    background-image: repeating-linear-gradient(45deg, var(--accent) 0, var(--accent) 6px, transparent 6px, transparent 20px);
}
.pattern-caution {
    background-color: var(--warning);
    background-image: repeating-linear-gradient(45deg, var(--black) 0, var(--black) 20px, transparent 20px, transparent 40px);
}
.pattern-scanlines {
    background-color: var(--black);
    background-image: repeating-linear-gradient(0deg, var(--black) 0, var(--black) 2px, rgba(61,43,255,0.9) 2px, rgba(61,43,255,0.9) 4px);
    color: var(--white);
}
.pattern-scanlines-light {
    background-color: var(--white);
    background-image: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,0.12) 3px, rgba(0,0,0,0.12) 4px);
}
.pattern-punchcard {
    background-color: var(--black);
    background-image:
        radial-gradient(var(--white) 2px, transparent 2px),
        radial-gradient(var(--white) 2px, transparent 2px);
    background-size: 20px 20px, 20px 20px;
    background-position: 0 0, 10px 10px;
    color: var(--white);
}
.pattern-isometric {
    background-color: var(--white);
    background-image:
        repeating-linear-gradient(30deg, var(--black) 0, var(--black) 1.5px, transparent 1.5px, transparent 24px),
        repeating-linear-gradient(-30deg, var(--black) 0, var(--black) 1.5px, transparent 1.5px, transparent 24px),
        repeating-linear-gradient(90deg, var(--black) 0, var(--black) 1.5px, transparent 1.5px, transparent 24px);
}
.pattern-crosshatch-fine {
    background-color: var(--white);
    background-image:
        repeating-linear-gradient(45deg, var(--black) 0, var(--black) 1px, transparent 1px, transparent 8px),
        repeating-linear-gradient(-45deg, var(--black) 0, var(--black) 1px, transparent 1px, transparent 8px);
}
.pattern-checker-sm {
    background-color: var(--white);
    background-image: conic-gradient(var(--black) 90deg, transparent 90deg 180deg, var(--black) 180deg 270deg, transparent 270deg);
    background-size: 16px 16px;
}
.pattern-checker-accent {
    background-color: var(--white);
    background-image: conic-gradient(var(--accent) 90deg, transparent 90deg 180deg, var(--accent) 180deg 270deg, transparent 270deg);
    background-size: 32px 32px;
}
.pattern-corner-marks {
    background-color: var(--white);
    background-image:
        linear-gradient(var(--black) 2px, transparent 2px),
        linear-gradient(90deg, var(--black) 2px, transparent 2px);
    background-size: 80px 80px;
    background-position: 0 0;
    position: relative;
    overflow: hidden;
}
.pattern-corner-marks::before,
.pattern-corner-marks::after {
    content: '+';
    position: absolute;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 1rem;
    color: var(--black);
}
.pattern-corner-marks::before { top: 6px; left: 6px; }
.pattern-corner-marks::after { bottom: 6px; right: 6px; }
.pattern-ticker-stripes {
    background-color: var(--accent);
    background-image: repeating-linear-gradient(90deg, var(--accent) 0, var(--accent) 40px, #2a1fb8 40px, #2a1fb8 80px);
    color: var(--white);
}
.pattern-noise-warning {
    background-color: var(--warning);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.pattern-noise-dark {
    background-color: var(--black);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    color: var(--white);
}

/* =====================================================
   EXTRA FORM COMPONENTS
   ===================================================== */

/* Input states */
.form-control.is-error {
    border-color: var(--danger);
    box-shadow: 4px 4px 0 var(--danger);
}
.form-control.is-success {
    border-color: var(--success);
    box-shadow: 4px 4px 0 var(--success);
}
.form-control.is-disabled,
.form-control:disabled {
    background: #e8e5df;
    color: #999;
    box-shadow: none;
    cursor: not-allowed;
    border-style: dashed;
}
.form-hint {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink-muted);
}
.form-hint.error { color: var(--danger); }
.form-hint.success { color: var(--success); }
.form-hint-count {
    font-variant-numeric: tabular-nums;
}

/* Input with icon (leading/trailing) */
.input-icon-wrap {
    position: relative;
    width: 100%;
}
.input-icon-wrap .form-control.has-leading { padding-left: 48px; }
.input-icon-wrap .form-control.has-trailing { padding-right: 48px; }
.input-icon-wrap .input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 1rem;
    color: var(--black);
    pointer-events: none;
}
.input-icon-wrap .input-icon.leading { left: 16px; }
.input-icon-wrap .input-icon.trailing { right: 16px; }
.input-icon-wrap button.input-icon {
    pointer-events: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
}

/* Prefix / suffix */
.input-affix {
    display: flex;
    width: 100%;
    align-items: stretch;
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    background: var(--white);
    transition: transform var(--dur-instant), box-shadow var(--dur-instant);
}
.input-affix:focus-within {
    box-shadow: var(--shadow-lvl2);
    transform: translate(-2px, -2px);
}
.input-affix .affix {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: var(--black);
    color: var(--white);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.input-affix .affix.right { border-left: var(--border-base); }
.input-affix .affix.left { border-right: var(--border-base); }
.input-affix input {
    flex: 1;
    border: none;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    background: transparent;
    outline: none;
    min-width: 0;
}

/* Input group (button attached) */
.input-group {
    display: flex;
    width: 100%;
    align-items: stretch;
}
.input-group .form-control {
    border-right: none;
}
.input-group .form-control:focus {
    transform: none;
    box-shadow: var(--shadow-lvl1);
}
.input-group .btn {
    border-left: 0;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    box-shadow: var(--shadow-lvl1);
    white-space: nowrap;
}

/* Date picker — inline calendar */
.datepicker {
    display: inline-block;
    background: var(--white);
    border: var(--border-base);
    box-shadow: var(--shadow-lvl2);
    font-family: var(--font-body);
    width: 100%;
    max-width: 320px;
}
.datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--black);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: -0.3px;
}
.datepicker-nav {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.datepicker-nav:hover { background: var(--accent); border-color: var(--accent); }
.datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
}
.datepicker-dow {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    padding: 8px 0;
    color: var(--ink-muted);
    background: var(--surface);
    border-bottom: 2px solid var(--black);
}
.datepicker-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.82rem;
    border-right: 1px solid #e8e5df;
    border-bottom: 1px solid #e8e5df;
    cursor: pointer;
    color: var(--black);
}
.datepicker-day:nth-child(7n) { border-right: none; }
.datepicker-day.muted { color: var(--ink-faint); }
.datepicker-day:hover { background: var(--surface); }
.datepicker-day.today {
    background: var(--warning);
    font-weight: 800;
}
.datepicker-day.selected {
    background: var(--accent);
    color: var(--white);
}
.datepicker-day.in-range { background: var(--bg-deep); }
.datepicker-day.range-start,
.datepicker-day.range-end {
    background: var(--accent);
    color: var(--white);
}

/* Time picker */
.timepicker {
    display: inline-flex;
    align-items: center;
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    background: var(--white);
    overflow: hidden;
}
.timepicker-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-right: var(--border-thin);
}
.timepicker-field:last-child { border-right: none; }
.timepicker-btn {
    background: var(--surface);
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 2px 14px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.7rem;
}
.timepicker-btn:hover { background: var(--accent); color: var(--white); }
.timepicker-btn:last-child { border-bottom: none; border-top: 1px solid #ccc; }
.timepicker-value {
    padding: 10px 20px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    text-align: center;
    min-width: 64px;
    line-height: 1;
}
.timepicker-colon {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    padding: 0 4px;
}
.timepicker-ampm {
    display: flex;
    flex-direction: column;
    border-left: var(--border-thin);
}
.timepicker-ampm button {
    background: var(--white);
    border: none;
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-weight: 800;
    cursor: pointer;
    font-size: 0.75rem;
}
.timepicker-ampm button.active {
    background: var(--accent);
    color: var(--white);
}
.timepicker-ampm button:first-child { border-bottom: 1px solid #ccc; }

/* Combobox / autocomplete */
.combobox {
    position: relative;
    width: 100%;
}
.combobox-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--white);
    border: var(--border-base);
    box-shadow: var(--shadow-lvl2);
    z-index: 10;
    max-height: 240px;
    overflow-y: auto;
}
.combobox-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    border-bottom: 1px solid #e8e5df;
}
.combobox-item:last-child { border-bottom: none; }
.combobox-item:hover,
.combobox-item.active {
    background: var(--accent);
    color: var(--white);
}
.combobox-item .meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.combobox-item:hover .meta,
.combobox-item.active .meta { color: #eee; }
.combobox-item mark {
    background: var(--warning);
    padding: 0 2px;
}

/* Multi-select chip input */
.chipinput {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 56px;
    padding: 8px 10px;
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-lvl1);
    transition: transform var(--dur-instant), box-shadow var(--dur-instant);
}
.chipinput:focus-within {
    box-shadow: var(--shadow-lvl2);
    transform: translate(-2px, -2px);
}
.chipinput-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    background: var(--black);
    color: var(--white);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.chipinput-chip button {
    background: var(--white);
    color: var(--black);
    border: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-weight: 800;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.chipinput-chip button:hover { background: var(--danger); color: var(--white); }
.chipinput input {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 4px 6px;
}

/* Dual-handle range slider */
.range-dual {
    position: relative;
    height: 40px;
    padding: 0 10px;
}
.range-dual-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    right: 10px;
    height: 8px;
    background: var(--white);
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
}
.range-dual-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--accent);
}
.range-dual input[type="range"] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    margin: 0;
    height: 40px;
}
.range-dual input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 32px;
    background: var(--black);
    border: 3px solid var(--white);
    box-shadow: 2px 2px 0 var(--black);
    cursor: grab;
    pointer-events: auto;
    position: relative;
    z-index: 2;
}
.range-dual input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 32px;
    background: var(--black);
    border: 3px solid var(--white);
    box-shadow: 2px 2px 0 var(--black);
    cursor: grab;
    pointer-events: auto;
}
.range-dual input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}
.range-dual-values {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
}
.range-dual-values .pill {
    background: var(--black);
    color: var(--white);
    padding: 3px 10px;
}

/* Color picker — swatch grid */
.color-swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}
.color-swatch {
    aspect-ratio: 1;
    border: 2.5px solid var(--black);
    cursor: pointer;
    position: relative;
    transition: transform var(--dur-instant);
}
.color-swatch:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--black);
}
.color-swatch.selected::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 800;
    font-size: 1rem;
    text-shadow: 1px 1px 0 var(--black), -1px -1px 0 var(--black), 1px -1px 0 var(--black), -1px 1px 0 var(--black);
}
.color-picked {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px 16px;
    background: var(--surface);
    border: var(--border-base);
    margin-bottom: var(--space-sm);
}
.color-picked-preview {
    width: 40px;
    height: 40px;
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
}
.color-picked-value {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Card radio (radio-as-tile) */
.card-radio-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}
.card-radio {
    display: block;
    cursor: pointer;
    position: relative;
    height: 100%;
}
.card-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.card-radio-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-md) var(--space-sm);
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-lvl1);
    transition: transform var(--dur-instant), box-shadow var(--dur-instant), background var(--dur-instant);
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.card-radio:hover .card-radio-box {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-lvl2);
}
.card-radio input:checked + .card-radio-box {
    background: var(--accent);
    color: var(--white);
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--black);
}
.card-radio-title {
    display: block;
    width: 100%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
}
.card-radio-price {
    display: block;
    width: 100%;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 8px;
}
.card-radio-desc {
    display: block;
    width: 100%;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
}
.card-radio-badge {
    display: inline-block;
    background: var(--warning);
    color: var(--black);
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    border: 1.5px solid var(--black);
}
.card-radio input:checked + .card-radio-box .card-radio-badge {
    background: var(--warning);
    color: var(--black);
}

/* Phone input with country code */
.phone-input {
    display: flex;
    border: var(--border-base);
    box-shadow: var(--shadow-lvl1);
    background: var(--white);
    transition: transform var(--dur-instant), box-shadow var(--dur-instant);
}
.phone-input:focus-within {
    box-shadow: var(--shadow-lvl2);
    transform: translate(-2px, -2px);
}
.phone-input select {
    border: none;
    border-right: var(--border-base);
    padding: 0 12px;
    background: var(--surface);
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    outline: none;
    min-width: 110px;
}
.phone-input input {
    flex: 1;
    border: none;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    outline: none;
    background: transparent;
    min-width: 0;
}

/* Credit card row */
.cc-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-sm);
}
.cc-number-wrap {
    position: relative;
}
.cc-brand {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    background: var(--black);
    color: var(--white);
    letter-spacing: 1px;
}
.cc-number-wrap input { padding-right: 70px; letter-spacing: 2px; font-family: var(--font-mono); }

/* Form wizard / stepper */
.wizard {
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-lvl2);
}
.wizard-steps {
    display: flex;
    background: var(--black);
    color: var(--white);
}
.wizard-step {
    flex: 1;
    padding: 14px 18px;
    border-right: 2px solid var(--white);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.wizard-step:last-child { border-right: none; }
.wizard-step-num {
    width: 24px;
    height: 24px;
    border: 2px solid var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.85rem;
}
.wizard-step.current {
    background: var(--accent);
}
.wizard-step.complete .wizard-step-num {
    background: var(--success);
    color: var(--black);
    border-color: var(--black);
}
.wizard-step.complete {
    color: #ccc;
}
.wizard-body {
    padding: var(--space-md);
}
.wizard-nav {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-top: var(--border-base);
    background: var(--surface);
}

/* Settings row list */
.settings-list {
    border: var(--border-base);
    background: var(--white);
    box-shadow: var(--shadow-lvl1);
}
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: var(--border-thin);
    gap: var(--space-sm);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label {
    flex: 1;
    min-width: 0;
}
.settings-row-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    margin-bottom: 2px;
}
.settings-row-desc {
    font-size: 0.82rem;
    color: var(--ink-muted);
    line-height: 1.4;
}
.settings-row-control {
    flex-shrink: 0;
}
.settings-section-title {
    padding: 10px 20px;
    background: var(--black);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Responsive form tweaks */
@media (max-width: 760px) {
    .cc-row { grid-template-columns: 1fr; }
    .card-radio-group { grid-template-columns: 1fr; }
    .wizard-steps { flex-direction: column; }
    .wizard-step { border-right: none; border-bottom: 2px solid var(--white); }
    .wizard-step:last-child { border-bottom: none; }
}

/* =====================================================
   DRAWERS / OFF-CANVAS
   ===================================================== */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-smooth) ease;
}
.drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.drawer {
    position: fixed;
    background: var(--white);
    z-index: var(--z-drawer);
    box-shadow: var(--shadow-lvl3);
    display: flex;
    flex-direction: column;
    transition: transform var(--dur-smooth) var(--ease-pop);
}
.drawer-right {
    top: 0; right: 0; bottom: 0;
    width: min(480px, 92vw);
    border-left: var(--border-thick);
    transform: translateX(100%);
}
.drawer-right.open { transform: translateX(0); }
.drawer-left {
    top: 0; left: 0; bottom: 0;
    width: min(320px, 85vw);
    border-right: var(--border-thick);
    transform: translateX(-100%);
}
.drawer-left.open { transform: translateX(0); }
.drawer-bottom {
    left: 0; right: 0; bottom: 0;
    max-height: 80vh;
    border-top: var(--border-thick);
    transform: translateY(100%);
}
.drawer-bottom.open { transform: translateY(0); }
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--black);
    color: var(--white);
    border-bottom: var(--border-base);
    flex-shrink: 0;
}
.drawer-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: -0.3px;
}
.drawer-close {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.drawer-close:hover { background: var(--danger); border-color: var(--danger); }
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}
.drawer-footer {
    padding: var(--space-sm) var(--space-md);
    border-top: var(--border-base);
    background: var(--surface);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
    flex-shrink: 0;
}
.drawer-grab {
    width: 60px;
    height: 5px;
    background: var(--white);
    border: 2px solid var(--white);
    margin: 8px auto 0;
    flex-shrink: 0;
}

/* Inline drawer preview (static doc version) */
.drawer-preview {
    position: relative;
    border: var(--border-base);
    background: var(--surface);
    min-height: 260px;
    overflow: hidden;
    display: flex;
}
.drawer-preview-page {
    flex: 1;
    padding: var(--space-md);
    opacity: 0.5;
    pointer-events: none;
    background: var(--surface);
    background-image: radial-gradient(var(--ink-muted) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
}
.drawer-preview-drawer {
    width: 260px;
    background: var(--white);
    border-left: var(--border-thick);
    box-shadow: -4px 0 0 var(--accent);
    display: flex;
    flex-direction: column;
}
.drawer-preview-drawer.left {
    border-left: 0;
    border-right: var(--border-thick);
    box-shadow: 4px 0 0 var(--accent);
    order: -1;
}

/* =====================================================
   MODAL VARIANTS
   ===================================================== */
.modal-fixed {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) ease;
}
.modal-fixed.open {
    opacity: 1;
    pointer-events: auto;
}
.modal-fixed .modal-box {
    transform: scale(0.94);
    transition: transform var(--dur-base) var(--ease-pop);
}
.modal-fixed.open .modal-box { transform: scale(1); }

/* Modal size variants */
.modal-box.modal-sm { max-width: 380px; }
.modal-box.modal-md { max-width: 520px; }
.modal-box.modal-lg { max-width: 720px; }
.modal-box.modal-xl { max-width: 960px; }
.modal-box.modal-full {
    max-width: none;
    width: min(94vw, 1200px);
    max-height: 88vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Modal colored header bar variants */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-bottom: var(--border-base);
    flex-shrink: 0;
}
.modal-header.danger { background: var(--danger); color: var(--white); }
.modal-header.success { background: var(--success); }
.modal-header.warning { background: var(--warning); }
.modal-header.info { background: var(--accent); color: var(--white); }
.modal-header-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: -0.3px;
}
.modal-close {
    background: transparent;
    border: 2px solid currentColor;
    color: inherit;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.modal-close:hover { background: rgba(0,0,0,0.12); }
.modal-body {
    padding: var(--space-md);
    overflow-y: auto;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-top: var(--border-base);
    background: var(--surface);
    flex-shrink: 0;
}
.modal-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--black);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.75rem;
    margin-bottom: var(--space-sm);
}
.modal-icon.danger { background: var(--danger); color: var(--white); }
.modal-icon.success { background: var(--success); }
.modal-icon.warning { background: var(--warning); }
.modal-icon.info { background: var(--accent); color: var(--white); }

/* Lightbox */
.lightbox-media {
    background: var(--black);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--white);
    color: var(--black);
    border: 2px solid var(--black);
    width: 44px;
    height: 44px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    box-shadow: var(--shadow-lvl1);
}
.lightbox-nav.prev { left: var(--space-sm); }
.lightbox-nav.next { right: var(--space-sm); }
.lightbox-caption {
    padding: var(--space-sm) var(--space-md);
    background: var(--black);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
}

/* Loading modal content */
.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-lg);
    text-align: center;
}
.loading-content .spinner-brutal {
    margin-bottom: var(--space-md);
}

/* Trigger button helper */
.demo-triggers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: var(--space-md);
    border: var(--border-thin);
    background: var(--surface);
}

/* =====================================================
   RESPONSIVE SWEEP — ALL NEW COMPONENTS
   ===================================================== */
@media (max-width: 900px) {
    .settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .settings-row-control {
        width: 100%;
    }
    .settings-row-control select,
    .settings-row-control .toggle { align-self: flex-start; }
}
@media (max-width: 760px) {
    /* Form components stacking */
    .input-affix { flex-wrap: wrap; }
    .color-swatches { grid-template-columns: repeat(6, 1fr); }
    .combobox-results { max-height: 200px; }
    .chipinput { min-height: 48px; }
    /* Drawer — right/left drawers go full-width */
    .drawer-right { width: 100vw; border-left: 0; }
    .drawer-left { width: 100vw; border-right: 0; }
    /* Modal full-width */
    .modal-box.modal-lg, .modal-box.modal-xl { max-width: 100%; }
    .modal-box { padding: var(--space-md); }
    /* Drawer preview becomes stacked */
    .drawer-preview { flex-direction: column; min-height: 360px; }
    .drawer-preview-drawer { width: 100%; border-left: 0; border-right: 0; border-top: var(--border-thick); box-shadow: 0 -4px 0 var(--accent); }
    .drawer-preview-drawer.left { border-top: 0; border-bottom: var(--border-thick); box-shadow: 0 4px 0 var(--accent); order: 0; }
    /* Charts — gauge / radar shrink */
    .gauge-wrap { flex-direction: column; text-align: center; }
    .gauge-readout { font-size: 2.4rem; }
    /* Tables already scroll via .table-container overflow-x:auto */
    /* Datepicker grid cells smaller on narrow screens */
    .datepicker-day { font-size: 0.72rem; }
    /* Timepicker single value box narrower */
    .timepicker-value { padding: 8px 14px; min-width: 52px; font-size: 1.2rem; }
    /* Phone input stacks select + input vertically if needed */
    .phone-input select { min-width: 90px; font-size: 0.82rem; }
}
@media (max-width: 480px) {
    .color-swatches { grid-template-columns: repeat(4, 1fr); }
    .heatmap { grid-template-columns: repeat(6, 1fr) !important; }
    .timeline { padding-left: 40px; }
    .timeline-item::before { left: -40px; }
    /* Stat/viz frames reduce padding */
    .viz-frame { padding: var(--space-sm); }
    /* Drawer bottom — make it more notch-like */
    .drawer-bottom { max-height: 70vh; }
    /* Card radio price scales down */
    .card-radio-price { font-size: 1.5rem; }
}

/* =========================================================
   BOLD AWWWARDS LAYER
   Keeps brutalist DNA — hard offset shadows, thick borders,
   confident type — and layers craft (variable display type,
   magnetic hovers, marquees, scroll reveals, cursor halo,
   giant animated numerals).
   ========================================================= */

body {
    background-color: var(--bg);
    color: var(--ink);
    font-weight: 400;
    line-height: 1.5;
    font-feature-settings: "ss01", "ss02";
}
/* opt-in: native cursor hides only when the cursor-halo component is present */
body:has(.cursor-halo) { cursor: none; }
@media (hover: none) { body:has(.cursor-halo) { cursor: auto; } }

::selection { background: var(--accent); color: var(--paper); }

/* Paper grain */
body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: var(--z-grain);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.16;
    mix-blend-mode: multiply;
}
.grain { opacity: 0.025; }

/* =========================================================
   CURSOR HALO
   ========================================================= */
.cursor-halo {
    position: fixed; top: 0; left: 0;
    width: 24px; height: 24px;
    border: 2px solid var(--ink);
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: var(--z-cursor);
    transform: translate(-50%, -50%);
    transition: width var(--dur-smooth) var(--ease-snap),
                height var(--dur-smooth) var(--ease-snap),
                background var(--dur-base), border-color var(--dur-base), opacity var(--dur-base), border-radius var(--dur-smooth);
    mix-blend-mode: difference;
}
.cursor-halo.dot { width: 8px; height: 8px; background: var(--ink); border-color: var(--ink); mix-blend-mode: normal; }
.cursor-halo.big {
    width: 88px; height: 88px;
    background: var(--acid);
    border-color: var(--ink);
    mix-blend-mode: multiply;
}
.cursor-halo.text {
    width: 100px; height: 100px;
    background: var(--ink);
    border-color: var(--ink);
    border-radius: 50%;
}
.cursor-halo.hidden { opacity: 0; }
@media (hover: none) { .cursor-halo { display: none; } }

/* =========================================================
   TYPOGRAPHY — bold + sculptural
   ========================================================= */
h1, h2, h3, h4, .font-display {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.04em;
    line-height: 0.92;
    font-feature-settings: "ss01";
    font-variation-settings: "opsz" 96, "wght" 700;
}
h1 {
    font-size: clamp(4.5rem, 13vw, 13rem);
    letter-spacing: -0.055em;
    line-height: 0.84;
    font-weight: 800;
    font-variation-settings: "opsz" 96, "wght" 800;
}
h2 {
    font-size: clamp(2.6rem, 6.5vw, 5.6rem);
    letter-spacing: -0.04em;
    font-weight: 700;
}
h3 {
    font-size: clamp(1.5rem, 2.8vw, 2.3rem);
    letter-spacing: -0.025em;
    font-weight: 600;
}
h4 {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--font-mono);
}
p { font-size: 1.04rem; line-height: 1.55; color: var(--ink); font-weight: 400; }
a { color: inherit; }

.mono-small, .mono-xs {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.container { max-width: 1380px; padding: 0 var(--space-md); }

/* =========================================================
   TICKER (awwwards-style top runner)
   ========================================================= */
.edt-ticker {
    position: sticky; top: 0; z-index: 80;
    background: var(--ink);
    color: var(--paper);
    border-bottom: 2px solid var(--ink);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.edt-ticker-track {
    display: flex; gap: 3rem;
    padding: 11px 0;
    animation: edt-marquee 38s linear infinite;
    white-space: nowrap;
    width: max-content;
}
.edt-ticker:hover .edt-ticker-track { animation-play-state: paused; }
.edt-ticker-track span { display: inline-flex; align-items: center; gap: 0.8rem; }
.edt-ticker-track .dot { width: 6px; height: 6px; background: var(--accent); display: inline-block; }
.edt-ticker-track .star { color: var(--acid); font-size: 0.9rem; }
@keyframes edt-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* =========================================================
   NAV — bold sticky
   ========================================================= */
nav.main-nav {
    padding: 22px 0;
    border-bottom: 2px solid var(--ink);
    margin-bottom: 0;
    position: sticky;
    top: 40px;
    background: var(--bg);
    z-index: 70;
}
.logo {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.logo::before {
    content: "";
    width: 26px; height: 26px;
    background: var(--accent);
    border: 2px solid var(--ink);
    display: inline-block;
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform var(--dur-slow) var(--ease-snap);
}
.logo:hover::before { transform: rotate(45deg); background: var(--acid); }
.logo span { color: var(--accent) !important; }
nav.main-nav .nav-links { gap: 2rem; }
nav.main-nav .nav-links a {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    position: relative;
}
nav.main-nav .nav-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 3px;
    background: var(--accent);
    transition: width var(--dur-slow) var(--ease-snap);
}
nav.main-nav .nav-links a:hover::after { width: 100%; }

/* =========================================================
   HERO — bold editorial layout
   ========================================================= */
section.hero {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-xl);
    border-bottom: 2px solid var(--ink);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-lg);
    align-items: end;
    position: relative;
    margin-top: 0;
}
@media (max-width: 900px) { section.hero { grid-template-columns: 1fr; padding-bottom: var(--space-lg); } }
section.hero h1 {
    font-size: clamp(5rem, 16vw, 16rem);
    line-height: 0.82;
    letter-spacing: -0.06em;
    font-weight: 800;
    margin-bottom: var(--space-md);
    font-variation-settings: "opsz" 96, "wght" 800;
}
section.hero h1 em,
section.hero h1 i,
section.hero h1 .swash {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--accent);
    font-variation-settings: normal;
}
section.hero h1 .underscore {
    position: relative; display: inline-block;
}
section.hero h1 .underscore::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 0.06em;
    height: 0.14em;
    background: var(--acid);
    z-index: -1;
    transform: skewX(-8deg) scaleX(0);
    transform-origin: left;
    animation: hero-swipe 1.6s 0.4s var(--ease-snap) forwards;
}
@keyframes hero-swipe {
    to { transform: skewX(-8deg) scaleX(1); }
}
.hero-intro {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    line-height: 1.32;
    max-width: 540px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: var(--space-md);
    letter-spacing: -0.005em;
}
.hero-intro strong, .hero-intro b {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 700;
    background: var(--ink);
    color: var(--paper);
    padding: 0 0.25em;
    display: inline-block;
    transform: skewX(-6deg);
}
.hero-spec {
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--ink);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 6px 22px;
    position: relative;
}
.hero-spec::before {
    content: "SPEC.SHEET";
    position: absolute;
    top: -10px; left: 16px;
    background: var(--accent);
    color: var(--paper);
    padding: 2px 10px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    border: 2px solid var(--ink);
}
.hero-spec-row {
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline-strong);
    font-weight: 600;
}
.hero-spec-row:last-child { border-bottom: none; }
.hero-spec-row .k { color: var(--ink-muted); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; font-weight: 600; }
.hero-spec-row .v { color: var(--ink); font-weight: 700; }
.hero .cursor::after {
    content: '';
    display: inline-block;
    width: 0.42em;
    height: 0.86em;
    background: var(--accent);
    margin-left: 0.08em;
    vertical-align: -0.05em;
    animation: blink 1.05s steps(2) infinite;
}
.hero-meta {
    display: flex; align-items: center; gap: 14px;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}
.hero-meta .pip {
    width: 8px; height: 8px;
    background: var(--accent);
    border: 1px solid var(--ink);
    animation: pulse 2s infinite;
}
.hero-meta .rule {
    flex: 1; max-width: 100px;
    height: 2px;
    background: var(--ink);
}

/* =========================================================
   SECTION BREAK — oversized numerals
   ========================================================= */
.section-break {
    border-top: 2px solid var(--ink);
    padding-top: var(--space-lg);
    margin-top: var(--space-xl);
    position: relative;
}
.section-header {
    margin-bottom: var(--space-lg);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
}
.section-header h2 {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.045em;
    font-weight: 700;
    position: relative;
    z-index: 2;
    max-width: 760px;
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-variation-settings: "opsz" 96, "wght" 700;
}
.section-meta {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--ink);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--paper);
    border: 2px solid var(--ink);
    padding: 6px 14px;
    box-shadow: 3px 3px 0 var(--ink);
}

/* =========================================================
   CARDS
   ========================================================= */
.card {
    border: 2px solid var(--ink);
    box-shadow: none;
    border-radius: 0;
    gap: var(--space-sm);
    transition: transform var(--dur-smooth) var(--ease-snap), box-shadow var(--dur-smooth);
}
.card:not([class*="pattern-"]) { background: var(--paper); }
.card-accent { background: var(--accent); color: var(--paper); border-color: var(--ink); }
.card-dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card-interactive { cursor: pointer; }
.card-interactive:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--ink);
}
.card-interactive:active {
    transform: translate(0, 0);
    box-shadow: 0 0 0 var(--ink);
}

/* =========================================================
   BUTTONS — magnetic + arrow, keep brutalist energy
   ========================================================= */
.btn {
    background: var(--ink);
    color: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    border-radius: 0;
    padding: 14px 26px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: transform var(--dur-smooth) var(--ease-snap),
                box-shadow var(--dur-smooth), background var(--dur-smooth), color var(--dur-smooth), border-color var(--dur-smooth);
    position: relative;
    overflow: hidden;
}
.btn::after {
    content: "→";
    margin-left: 0.5em;
    display: inline-block;
    transition: transform var(--dur-smooth) var(--ease-snap);
    font-family: var(--font-mono);
    font-weight: 700;
}
.btn.btn-icon::after,
.btn.no-arrow::after { content: none; margin-left: 0; }
.btn:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--ink);
    background: var(--accent);
    border-color: var(--ink);
    color: var(--paper);
}
.btn:hover::after { transform: translateX(4px); }
.btn:active { transform: translate(0, 0); box-shadow: 0 0 0 var(--ink); }

.btn-white, .btn-default { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn-white:hover, .btn-default:hover { background: var(--acid); color: var(--ink); }
.btn-secondary { background: var(--ink); color: var(--paper); }
.btn-danger { background: var(--danger); color: var(--paper); }
.btn-success { background: var(--success); color: var(--paper); }
.btn-warning { background: var(--warning); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); box-shadow: none; }
.btn-ghost:hover { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--accent); }
.btn-disabled {
    background: var(--gray) !important; color: var(--ink-muted) !important;
    border-color: var(--hairline-strong) !important;
    box-shadow: none !important; transform: none !important;
    cursor: not-allowed;
}
.btn-sm { padding: 8px 16px; font-size: 0.76rem; }
.btn-lg { padding: 18px 36px; font-size: 1rem; }
.btn-icon { padding: 12px; width: auto; height: auto; }

.btn-group, .pagination, .stepper {
    box-shadow: 4px 4px 0 var(--ink);
    border: 2px solid var(--ink);
    background: var(--paper);
    border-radius: 0;
    overflow: hidden;
}
.btn-group:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--ink); }
.btn-group .btn {
    border: none;
    border-right: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: none !important;
    transform: none !important;
}
.btn-group .btn::after { content: none; margin: 0; }
.btn-group .btn:hover { background: var(--accent); color: var(--paper); }

.segmented {
    border: 2px solid var(--ink);
    background: var(--bg-deep);
    box-shadow: 3px 3px 0 var(--ink);
    border-radius: 0;
    padding: 4px;
    gap: 4px;
}
.segmented button {
    border-radius: 0;
    padding: 8px 18px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    transition: background var(--dur-base), color var(--dur-base);
}
.segmented button.active { background: var(--ink); color: var(--paper); }

/* =========================================================
   FORMS — bold borders + subtle hover
   ========================================================= */
.form-label {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--ink);
    text-transform: uppercase;
}
.form-control {
    border: 2px solid var(--ink);
    border-radius: 0;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--ink);
    padding: 14px 16px;
    font-family: var(--font-body);
    font-weight: 500;
    transition: transform var(--dur-base), box-shadow var(--dur-base), background var(--dur-base);
}
.form-control:focus {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--accent);
    background: var(--paper);
    border-color: var(--ink);
}
select.form-control {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230E0D08' stroke-width='3' stroke-linecap='square'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.brutal-indicator {
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    border-radius: 0;
}
.brutal-control.radio .brutal-indicator { border-radius: 50%; }
.brutal-control input:checked ~ .brutal-indicator { background: var(--accent); }
.brutal-control.checkbox .brutal-indicator:after { background: var(--paper); }
.brutal-control.radio .brutal-indicator:after { background: var(--paper); }

.brutal-slider, .toggle-slider {
    background: var(--bg-deep);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
}
.brutal-slider:before, .toggle-slider:before { background: var(--ink); }
.brutal-switch input:checked + .brutal-slider, .toggle input:checked + .toggle-slider { background: var(--accent); }
.brutal-switch input:checked + .brutal-slider:before, .toggle input:checked + .toggle-slider:before { background: var(--paper); }

.range-slider {
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    height: 8px;
    border-radius: 0;
}
.range-slider::-webkit-slider-thumb {
    background: var(--accent);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    border-radius: 0;
    width: 24px; height: 24px;
}
.range-slider::-moz-range-thumb {
    background: var(--accent);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    border-radius: 0;
    width: 24px; height: 24px;
}

.otp-wrap input {
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    border-radius: 0;
    font-family: var(--font-display);
    font-weight: 700;
}
.otp-wrap input:focus {
    background: var(--accent);
    color: var(--paper);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}

.dropzone {
    border: 2px dashed var(--ink);
    border-radius: 0;
    background: var(--surface);
    transition: background var(--dur-smooth), transform var(--dur-smooth), box-shadow var(--dur-smooth);
}
.dropzone:hover {
    transform: translate(-2px, -2px);
    background: var(--acid);
    box-shadow: 4px 4px 0 var(--ink);
}

.stepper button {
    background: transparent;
    border-right: 2px solid var(--ink);
    font-family: var(--font-mono);
    font-weight: 700;
}
.stepper button:last-child { border-left: 2px solid var(--ink); border-right: none; }
.stepper button:hover { background: var(--accent); color: var(--paper); }

/* =========================================================
   FEEDBACK
   ========================================================= */
.alert {
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    padding: 14px 20px;
    border-radius: 0;
    background: var(--paper);
    font-weight: 600;
}
.alert-success { background: var(--success); color: var(--paper); }
.alert-warning { background: var(--warning); color: var(--ink); }
.alert-error   { background: var(--danger); color: var(--paper); }
.alert-info    { background: var(--info); color: var(--paper); }

.toast { border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--paper); border-radius: 0; }
.toast-header { border-bottom: 2px solid var(--ink); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }

.badge {
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    border-radius: 0;
    background: var(--paper);
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.badge-solid { background: var(--ink); color: var(--paper); }
.badge-error { background: var(--danger); color: var(--paper); }
.badge-success { background: var(--success); color: var(--paper); }
.badge-warning { background: var(--warning); color: var(--ink); }
.badge-accent { background: var(--accent); color: var(--paper); }
.badge-pill { border-radius: 999px; }
.badge-outlined { background: var(--paper); color: var(--ink); }

.tag {
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    background: var(--paper);
    border-radius: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
}
.tag button {
    border: 2px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    border-radius: 0;
    width: 22px; height: 22px;
}
.tag button:hover { background: var(--accent); color: var(--paper); }

.status-dot { letter-spacing: 0.1em; font-weight: 700; font-family: var(--font-mono); }
.status-dot::before { border: 2px solid var(--ink); }

.tooltip-container {
    border-bottom: 2px dashed var(--ink);
    font-weight: 700;
}
.tooltip-container::after {
    background: var(--ink);
    color: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--accent);
    border-radius: 0;
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.popover { border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); border-radius: 0; background: var(--paper); }
.popover::before { background: var(--paper); border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }

.spinner { border-color: var(--ink); border-top-color: var(--accent); border-width: 4px; }
.skeleton {
    background: linear-gradient(90deg, var(--bg-deep) 25%, var(--paper) 50%, var(--bg-deep) 75%);
    background-size: 200% 100%;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    border-radius: 0;
}
.empty-state { border: 2px dashed var(--ink); background: var(--surface); border-radius: 0; }

.steps { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--paper); border-radius: 0; }
.step { border-right: 2px solid var(--ink); font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.08em; }
.step.complete { background: var(--ink); color: var(--paper); }
.step.current { background: var(--accent); color: var(--paper); }

/* =========================================================
   NAV COMPONENTS
   ========================================================= */
.sidebar-nav { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--paper); border-radius: 0; }
.sidebar-nav a {
    border-bottom: 1px solid var(--hairline-strong);
    border-left: 0px solid var(--accent);
    color: var(--ink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: var(--font-display);
    transition: background var(--dur-base), color var(--dur-base), padding var(--dur-base), border-left-width var(--dur-base);
    padding: 18px 24px;
}
.sidebar-nav a:hover, .sidebar-nav a.active {
    background: var(--ink);
    color: var(--paper);
    border-left: 10px solid var(--accent);
}

.nav-pill {
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    background: var(--paper);
    color: var(--ink);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.nav-pill:hover, .nav-pill.active {
    background: var(--accent);
    color: var(--paper);
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--ink);
}
.nav-pill:active { transform: translate(0, 0); box-shadow: 0 0 0 var(--ink); }

.tabs-horizontal { border-bottom: 4px solid var(--ink); gap: 4px; }
.tab {
    border: 2px solid var(--ink);
    border-bottom: none;
    background: var(--bg-deep);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    transform: translateY(4px);
    transition: background var(--dur-base);
    padding: 14px 24px;
    margin-right: 0;
}
.tab:hover { background: var(--paper); }
.tab.active { background: var(--accent); color: var(--paper); border-bottom: 4px solid var(--accent); }
.tab.active::after { content: none; }

.tab-v {
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: 0;
    color: var(--ink);
    padding: 16px 20px;
}
.tab-v:hover { background: var(--bg-deep); transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.tab-v.active { background: var(--accent); color: var(--paper); transform: translate(0, 0); box-shadow: 0 0 0 var(--ink); }

.breadcrumbs {
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    border-radius: 0;
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink);
}
.breadcrumbs a { color: var(--accent); text-decoration: none; font-weight: 700; }
.breadcrumbs a:hover { text-decoration: underline; }

.pagination { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--paper); border-radius: 0; }
.page-item { border-right: 2px solid var(--ink); font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.page-item:hover { background: var(--ink); color: var(--paper); }
.page-item.active { background: var(--accent); color: var(--paper); }

.dropdown-menu { border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--paper); border-radius: 0; }
.dropdown-item {
    border-bottom: 1px solid var(--hairline-strong);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink);
}
.dropdown-item:hover { background: var(--accent); color: var(--paper); padding-left: var(--space-md); }

.announce-bar { background: var(--ink); color: var(--paper); border-bottom: 2px solid var(--ink); }
.announce-bar-inner .accent { color: var(--accent); }

.cmd-palette { border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); background: var(--paper); border-radius: 0; }
.cmd-palette-header { border-bottom: 2px solid var(--ink); }
.cmd-item { border-radius: 0; font-weight: 600; }
.cmd-item:hover, .cmd-item.active { background: var(--accent); color: var(--paper); }
.cmd-palette-footer { background: var(--bg-deep); border-top: 2px solid var(--ink); }

kbd, .kbd { background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-weight: 700; border-radius: 0; }

/* =========================================================
   DATA DISPLAY
   ========================================================= */
.table-container { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--paper); border-radius: 0; }
.table th, .table td {
    border-bottom: 1px solid var(--hairline-strong);
    border-right: 1px solid var(--hairline);
    font-weight: 500;
}
.table th:last-child, .table td:last-child { border-right: none; }
.table th {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.table-striped tbody tr:nth-child(even) { background: var(--surface); }
.table tbody tr:hover { background: var(--accent); color: var(--paper); }
.table-sortable th:hover { background: var(--ink); color: var(--paper); }

.stat-card { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--paper); border-radius: 0; }
.stat-label { font-family: var(--font-mono); letter-spacing: 0.1em; color: var(--ink-muted); font-weight: 700; }
.stat-value { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; }
.stat-delta { border: 2px solid var(--ink); border-radius: 0; font-family: var(--font-mono); font-weight: 700; }
.stat-delta.up { background: var(--success); color: var(--paper); }
.stat-delta.down { background: var(--danger); color: var(--paper); }
.stat-delta.flat { background: var(--bg-deep); color: var(--ink); }
.stat-spark .bar { background: var(--ink); }

.avatar { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); background: var(--paper); font-family: var(--font-mono); font-weight: 700; }
.avatar-stack .avatar:nth-child(2) { background: var(--accent); color: var(--paper); }
.avatar-stack .avatar:nth-child(3) { background: var(--acid); color: var(--ink); }
.avatar-stack .avatar:nth-child(4) { background: var(--accent-2); color: var(--paper); }
.avatar-stack .avatar:nth-child(5) { background: var(--ink); color: var(--paper); }

.spec-sheet { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--paper); border-radius: 0; }
.spec-row { border-bottom: 1px solid var(--hairline-strong); }
.spec-row:hover { background: var(--bg-deep); }
.spec-key { font-family: var(--font-mono); letter-spacing: 0.1em; color: var(--ink-muted); font-weight: 700; }
.spec-value { font-family: var(--font-mono); font-weight: 700; }

.timeline::before { background: var(--ink); width: 3px; left: 9px; }
.timeline-item::before {
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    border-radius: 0;
    width: 22px; height: 22px;
    left: -46px; top: 4px;
}
.timeline-item.complete::before { background: var(--ink); }
.timeline-item.current::before { background: var(--accent); }
.timeline-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.timeline-time { font-family: var(--font-mono); letter-spacing: 0.1em; color: var(--ink-muted); font-weight: 700; }

.timeline-h::before { background: var(--ink); height: 3px; top: 43px; }
.timeline-h-item::before {
    background: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    border-radius: 0;
    width: 22px; height: 22px;
}
.timeline-h-item.complete::before { background: var(--ink); }
.timeline-h-item.current::before { background: var(--accent); }
.timeline-h-label { background: var(--ink); padding: 3px 10px; font-family: var(--font-mono); font-weight: 700; }

.list-group { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--paper); border-radius: 0; }
.list-item { border-bottom: 1px solid var(--hairline-strong); font-weight: 600; padding: 22px 32px; }

.progress-container {
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    background: var(--paper);
    border-radius: 0;
    overflow: hidden;
    height: 36px;
}
.progress-bar { background: var(--accent); border-right: 2px solid var(--ink); }
.progress-label { background: var(--ink); color: var(--paper); border: 2px solid var(--ink); font-family: var(--font-mono); font-weight: 700; }

.chart-container { border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, var(--hairline) 39px, var(--hairline) 40px); }
.chart-bar { background: var(--accent); border: 2px solid var(--ink); border-bottom: none; box-shadow: 4px 0 0 var(--ink); border-radius: 0; }
.chart-bar:hover { background: var(--acid); transform: translateY(-8px); }
.chart-bar-value { background: var(--paper); border: 2px solid var(--ink); font-family: var(--font-mono); font-weight: 700; border-radius: 0; }

/* =========================================================
   INTERACTIVE
   ========================================================= */
.modal-backdrop { background: rgba(14,13,8,0.7); border: 4px solid var(--ink); border-radius: 0; } /* backdrop-filter removed: blur across a page this size re-rasterizes everything behind it and freezes the renderer */
.modal-box { border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); background: var(--paper); border-radius: 0; padding: var(--space-lg); }

details.accordion { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--paper); border-radius: 0; }
details.accordion summary {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.05rem;
}
details.accordion summary:hover { background: var(--bg-deep); }
details.accordion summary .acc-num { color: var(--accent); font-family: var(--font-mono); font-weight: 700; }
details[open].accordion summary {
    background: var(--ink);
    color: var(--paper);
    border-bottom: 2px solid var(--ink);
}
details[open].accordion summary .acc-num { color: var(--acid); }

.chat-bubble { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); border-radius: 0; font-weight: 500; background: var(--paper); }
.chat-bubble.me { background: var(--accent); color: var(--paper); }

.cookie-banner { border: 4px solid var(--ink); background: var(--warning); box-shadow: 8px 8px 0 var(--ink); border-radius: 0; }
.cookie-banner-text strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; font-weight: 800; }

.cta-block {
    border: 4px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    box-shadow: 12px 12px 0 var(--accent);
    border-radius: 0;
    padding: var(--space-lg);
}
.cta-block::before {
    width: 240px; height: 240px;
    background: var(--accent);
    transform: translate(30%, -30%) rotate(45deg);
    opacity: 0.9;
}
.cta-block h2 { font-family: var(--font-display); text-transform: none; letter-spacing: -0.04em; font-weight: 800; }

/* =========================================================
   MEDIA
   ========================================================= */
.media-player { border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: var(--ink); border-radius: 0; }
.media-controls { border-top: 4px solid var(--ink); background: var(--paper); }
.gallery-item { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--ink); border-radius: 0; color: var(--paper); font-family: var(--font-mono); font-weight: 700; transition: transform var(--dur-smooth), box-shadow var(--dur-smooth), background var(--dur-smooth); }
.gallery-item:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--ink); background: var(--accent); }

/* =========================================================
   CODE
   ========================================================= */
.code-block { background: var(--ink); color: var(--acid); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); border-radius: 0; font-family: var(--font-mono); }
.code-header { border-bottom: 2px dashed rgba(255,255,255,0.2); color: var(--paper); font-family: var(--font-mono); font-weight: 700; }
.code-copy { border: 2px solid var(--paper); background: transparent; color: var(--paper); border-radius: 0; box-shadow: 2px 2px 0 var(--accent); font-family: var(--font-mono); font-weight: 700; }
.code-copy:hover { background: var(--accent); }

.footer-component { border: 4px solid var(--ink); background: var(--accent); color: var(--paper); box-shadow: 8px 8px 0 var(--ink); border-radius: 0; }
.footer-component h4 { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--paper); margin-bottom: var(--space-sm); }
.footer-component a { color: var(--paper); font-weight: 600; }

/* =========================================================
   PATTERNS — keep the bold base graphics
   ========================================================= */
.pattern-grid { background-color: var(--paper); background-image: linear-gradient(var(--ink) 2px, transparent 2px), linear-gradient(90deg, var(--ink) 2px, transparent 2px); background-size: 30px 30px; }
.pattern-dots { background-color: var(--paper); background-image: radial-gradient(var(--ink) 3px, transparent 3px); background-size: 24px 24px; }
.pattern-stipple { background: var(--accent); filter: url(#noise-heavy); }
.pattern-diagonal { background-color: var(--paper); background-image: repeating-linear-gradient(45deg, var(--ink) 0, var(--ink) 4px, transparent 4px, transparent 16px); }
.pattern-crosshatch { background-color: var(--paper); background-image: repeating-linear-gradient(45deg, var(--ink) 0, var(--ink) 2px, transparent 2px, transparent 16px), repeating-linear-gradient(-45deg, var(--ink) 0, var(--ink) 2px, transparent 2px, transparent 16px); }
.pattern-checker { background-color: var(--paper); background-image: conic-gradient(var(--ink) 90deg, transparent 90deg 180deg, var(--ink) 180deg 270deg, transparent 270deg); background-size: 32px 32px; }

/* =========================================================
   TERMINAL BAR
   ========================================================= */
.terminal-bar { background: var(--ink); color: var(--paper); border-bottom: 2px solid var(--ink); font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.12em; padding: 8px 0; }
.terminal-bar .dot { background: var(--acid); border: 1px solid var(--ink); }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-snap), transform var(--dur-reveal) var(--ease-snap); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* =========================================================
   PULL QUOTE / NUMERIC
   ========================================================= */
.pull-quote { font-family: var(--font-serif); border-left: 6px solid var(--accent); padding-left: var(--space-md); color: var(--ink); font-weight: 400; }
.numeric-giant { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.06em; line-height: 0.82; font-variation-settings: "opsz" 96, "wght" 800; }

/* card-accent / card-dark text contrast */
.card-accent h3, .card-accent h4, .card-accent p,
.card-dark h3, .card-dark h4, .card-dark p { color: var(--paper); }

.token-box { border: 2px solid var(--ink); background: var(--paper); border-radius: 0; font-family: var(--font-mono); font-weight: 700; box-shadow: 3px 3px 0 var(--ink); }

/* Smooth global easing */
* { transition-timing-function: var(--ease-snap); }

/* =========================================================
   17. METRICS / DATA DISPLAY SHOWCASE
   ========================================================= */

/* Hero KPI — one massive metric */
.kpi-hero {
    border: 2px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    box-shadow: 8px 8px 0 var(--ink);
    padding: var(--space-md);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-md);
    position: relative;
    overflow: hidden;
    align-items: stretch;
}
@media (max-width: 700px) { .kpi-hero { grid-template-columns: 1fr; padding: 22px; } }
.kpi-hero::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 60%; height: 100%;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    pointer-events: none;
}
.kpi-hero-label {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.kpi-hero-label .pip {
    width: 8px; height: 8px;
    background: var(--accent); border-radius: 50%;
    animation: pulse 2s infinite;
}
.kpi-hero-value {
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 8.5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.86;
    color: var(--paper);
    font-variation-settings: "opsz" 96, "wght" 800;
}
.kpi-hero-value .unit {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.4em;
    color: var(--accent);
    margin-left: 0.05em;
    vertical-align: 0.4em;
}
.kpi-hero-foot {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: auto;
    padding-top: var(--space-sm);
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    border-top: 1px solid rgba(255,255,255,0.18);
    gap: 12px;
    flex-wrap: wrap;
}
.kpi-hero-foot .delta {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700;
    color: var(--acid);
}
.kpi-hero-foot .delta.down { color: var(--accent); }
.kpi-hero > div:first-child {
    display: flex; flex-direction: column;
    position: relative;
    z-index: 1;
    min-width: 0;
}
.kpi-hero-mini {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 14px;
    position: relative;
    z-index: 1;
    min-width: 0;
}
.kpi-hero-mini-row {
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: center;
}
.kpi-hero-mini-row.with-spark {
    grid-template-columns: 1fr minmax(0, 140px);
    gap: 14px;
}
.kpi-hero-mini-row:first-child { border-top: none; padding-top: 0; }
.kpi-hero-mini-k {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 4px;
}
.kpi-hero-mini-v {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--paper);
    letter-spacing: -0.02em;
    line-height: 1;
    display: flex; align-items: baseline; gap: 8px;
    flex-wrap: wrap;
}
.kpi-hero-mini-v .change {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--acid);
    letter-spacing: 0.05em;
    font-weight: 700;
}
.kpi-hero-mini-v .change.down { color: var(--accent); }
.kpi-hero-mini-row .stat-spark-svg {
    width: 100%;
    height: 44px;
    max-width: 140px;
}

/* Stat card grid — denser variant */
.stat-card-xl {
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--ink);
    padding: var(--space-md);
    display: flex; flex-direction: column;
    gap: 12px;
    position: relative;
    min-height: 200px;
    overflow: hidden;
}
.stat-card-xl .label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}
.stat-card-xl .label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.stat-card-xl .value {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.88;
    color: var(--ink);
}
.stat-card-xl .value .unit {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 0.45em;
    color: var(--accent);
    margin-left: 0.05em;
}
.stat-card-xl .meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--hairline-strong);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-muted);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.stat-card-xl .delta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    border: 1.5px solid var(--ink);
    background: var(--success);
    color: var(--paper);
    font-weight: 700;
}
.stat-card-xl .delta.down { background: var(--danger); }
.stat-card-xl .delta.flat { background: var(--bg-deep); color: var(--ink); }
.stat-card-xl.accent { background: var(--accent); color: var(--paper); }
.stat-card-xl.accent .label, .stat-card-xl.accent .meta, .stat-card-xl.accent .value { color: var(--paper); }
.stat-card-xl.accent .value .unit { color: var(--acid); }
.stat-card-xl.dark { background: var(--ink); color: var(--paper); }
.stat-card-xl.dark .label, .stat-card-xl.dark .meta, .stat-card-xl.dark .value { color: var(--paper); }
.stat-card-xl.dark .value .unit { color: var(--acid); }

/* Sparkline inside stat card */
.stat-spark-svg { display: block; width: 100%; height: 48px; }
.stat-spark-svg path { stroke: var(--ink); stroke-width: 2; fill: none; }
.stat-spark-svg .fill { fill: var(--ink); fill-opacity: 0.08; stroke: none; }
.stat-card-xl.accent .stat-spark-svg path { stroke: var(--paper); }
.stat-card-xl.accent .stat-spark-svg .fill { fill: var(--paper); fill-opacity: 0.18; }
.stat-card-xl.dark .stat-spark-svg path { stroke: var(--acid); }
.stat-card-xl.dark .stat-spark-svg .fill { fill: var(--acid); fill-opacity: 0.1; }

/* Leaderboard / Scorecard */
.leaderboard {
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--ink);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.leaderboard-row {
    display: grid;
    grid-template-columns: 36px 1fr 100px 80px 60px;
    gap: 14px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--hairline-strong);
    font-family: var(--font-body);
    transition: background var(--dur-base);
}
.leaderboard-row:last-child { border-bottom: none; }
.leaderboard-row.header {
    background: var(--ink); color: var(--paper);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 12px 20px;
}
.leaderboard-row:not(.header):hover { background: var(--bg-deep); }
.leaderboard-rank {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--ink-muted);
    letter-spacing: -0.04em;
}
.leaderboard-rank.top { color: var(--accent); }
.leaderboard-name { font-weight: 600; font-size: 0.96rem; }
.leaderboard-name .sub {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-top: 2px;
}
.leaderboard-bar {
    position: relative;
    height: 8px;
    background: var(--bg-deep);
    border: 1.5px solid var(--ink);
}
.leaderboard-bar > span {
    display: block; height: 100%;
    background: var(--ink);
}
.leaderboard-bar.alt > span { background: var(--accent); }
.leaderboard-score {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.88rem;
    text-align: right;
}
.leaderboard-delta {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.74rem;
    text-align: right;
    color: var(--success);
}
.leaderboard-delta.down { color: var(--danger); }

/* Scorecard */
.scorecard {
    border: 2px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    box-shadow: 6px 6px 0 var(--accent);
    padding: var(--space-md);
    display: grid;
    gap: 18px;
}
.scorecard-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.scorecard-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--paper);
}
.scorecard-period {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 700;
}
.scorecard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid rgba(255,255,255,0.2);
}
.scorecard-cell {
    padding: 18px;
    border-right: 1px solid rgba(255,255,255,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.scorecard-cell:nth-child(3n) { border-right: none; }
.scorecard-cell:nth-last-child(-n+3) { border-bottom: none; }
.scorecard-cell .k {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 8px;
    font-weight: 700;
}
.scorecard-cell .v {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--paper);
    letter-spacing: -0.02em;
}
.scorecard-cell .v .pct {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--acid);
    font-weight: 700;
    margin-left: 6px;
    letter-spacing: 0.04em;
}
.scorecard-cell .v .pct.down { color: var(--accent); }

/* Metric Cluster */
.metric-cluster {
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--ink);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: hidden;
}
.metric-cell {
    padding: 22px;
    border-right: 1px solid var(--hairline-strong);
    border-bottom: 1px solid var(--hairline-strong);
    display: flex; flex-direction: column; gap: 6px;
    position: relative;
}
.metric-cell:nth-child(2n) { border-right: none; }
.metric-cell:nth-last-child(-n+2) { border-bottom: none; }
.metric-cell .k {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
}
.metric-cell .v {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1;
}
.metric-cell .trend {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-muted);
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: 0.04em;
}
.metric-cell .trend .up { color: var(--success); }
.metric-cell .trend .down { color: var(--danger); }
.metric-cell.featured { background: var(--accent); color: var(--paper); }
.metric-cell.featured .k, .metric-cell.featured .v, .metric-cell.featured .trend { color: var(--paper); }
.metric-cell.featured .trend .up { color: var(--acid); }

/* Mini Timeline */
.mini-timeline {
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--ink);
    padding: var(--space-md);
}
.mini-timeline-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 18px;
}
.mini-timeline-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.mini-timeline-period {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
}
.mini-timeline-track {
    position: relative;
    padding-left: 28px;
    border-left: 2px solid var(--ink);
    display: flex; flex-direction: column; gap: 14px;
}
.mini-timeline-evt {
    position: relative;
    font-family: var(--font-body);
    font-size: 0.9rem;
}
.mini-timeline-evt::before {
    content: "";
    position: absolute;
    left: -36px; top: 4px;
    width: 14px; height: 14px;
    border: 2px solid var(--ink);
    background: var(--paper);
}
.mini-timeline-evt.done::before { background: var(--ink); }
.mini-timeline-evt.now::before { background: var(--accent); animation: pulse 2s infinite; }
.mini-timeline-evt .when {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}
.mini-timeline-evt .what {
    font-weight: 600;
    color: var(--ink);
}
.mini-timeline-evt.now .what { color: var(--accent); }
.mini-timeline-evt .who {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-muted);
    font-weight: 600;
    margin-left: 6px;
}

/* Banner family */
.banner-stripes {
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    background:
        repeating-linear-gradient(45deg,
            var(--ink) 0, var(--ink) 18px,
            var(--accent) 18px, var(--accent) 36px);
    padding: 0;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 88px;
    overflow: hidden;
}
.banner-stripes-inner {
    background: var(--paper);
    border: 2px solid var(--ink);
    padding: 14px 28px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
}
.banner-stripes-inner .em { color: var(--accent); }

.banner-sideways {
    border: 2px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    box-shadow: 4px 4px 0 var(--ink);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    overflow: hidden;
    min-height: 96px;
}
.banner-sideways-side {
    background: var(--accent);
    color: var(--paper);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 12px 8px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex; align-items: center; justify-content: center;
    border-right: 2px solid var(--ink);
}
.banner-sideways-body {
    padding: 18px 22px;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.banner-sideways-body .title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--paper);
}
.banner-sideways-body .meta {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-faint);
    letter-spacing: 0.08em;
    font-weight: 600;
}
.banner-sideways-cta {
    display: flex; align-items: center; padding: 0 22px;
    border-left: 1px solid rgba(255,255,255,0.18);
}

.banner-status {
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--ink);
    display: grid;
    grid-template-columns: 8px 1fr auto auto;
    align-items: center;
    min-height: 64px;
    overflow: hidden;
}
.banner-status-stripe {
    height: 100%;
    background: var(--success);
}
.banner-status.warn .banner-status-stripe { background: var(--warning); }
.banner-status.err .banner-status-stripe { background: var(--danger); }
.banner-status.info .banner-status-stripe { background: var(--info); }
.banner-status-body {
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 2px;
}
.banner-status-body .title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1rem;
}
.banner-status-body .desc {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    font-weight: 600;
}
.banner-status-meta {
    padding: 0 18px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
}
.banner-status-action {
    padding: 0 18px;
    border-left: 1px solid var(--hairline-strong);
    align-self: stretch;
    display: flex; align-items: center;
}
.banner-status-action a {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    display: inline-flex; gap: 6px; align-items: center;
}
.banner-status-action a::after { content: "→"; }

.banner-deal {
    border: 4px solid var(--ink);
    background: var(--accent);
    color: var(--paper);
    box-shadow: 8px 8px 0 var(--ink);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 0;
    overflow: hidden;
    min-height: 140px;
}
.banner-deal-body {
    padding: 22px 28px;
    display: flex; flex-direction: column; justify-content: center;
}
.banner-deal-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    margin-bottom: 8px;
}
.banner-deal-tag::before {
    content: "✦";
    color: var(--acid);
}
.banner-deal-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--paper);
}
.banner-deal-title em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--acid);
}
.banner-deal-meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--paper);
    margin-top: 8px;
    opacity: 0.85;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.banner-deal-side {
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
    padding: 22px;
    border-left: 4px solid var(--ink);
    position: relative;
}
.banner-deal-side .price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    color: var(--paper);
    letter-spacing: -0.05em;
    line-height: 0.9;
}
.banner-deal-side .price .pct {
    color: var(--acid);
}
.banner-deal-side .price-sub {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-faint);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 4px;
    font-weight: 700;
    text-align: center;
}

/* Big chart cards */
.chart-card {
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--ink);
    padding: var(--space-md);
    display: flex; flex-direction: column; gap: var(--space-sm);
}
.chart-card-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline-strong);
}
.chart-card-head h3 { font-size: 1.3rem; margin: 0; }
.chart-card-head .legend {
    display: flex; gap: 14px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.chart-card-head .legend i {
    display: inline-block;
    width: 12px; height: 12px;
    border: 1.5px solid var(--ink);
    margin-right: 6px;
    vertical-align: -1px;
}
.chart-card-head .legend .l-accent i { background: var(--accent); }
.chart-card-head .legend .l-ink i { background: var(--ink); }
.chart-card-head .legend .l-acid i { background: var(--acid); }
.chart-card-foot {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    font-weight: 700;
    text-transform: uppercase;
    padding-top: 10px;
    border-top: 1px solid var(--hairline-strong);
}

/* Activity Feed */
.activity-feed {
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--ink);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.activity-feed-head {
    padding: 18px 22px;
    background: var(--ink);
    color: var(--paper);
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
}
.activity-feed-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); animation: pulse 2s infinite; margin-right: 8px; }
.activity-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--hairline-strong);
    align-items: start;
}
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: var(--bg-deep); }
.activity-ava {
    width: 36px; height: 36px;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    background: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.78rem;
}
.activity-ava.accent { background: var(--accent); color: var(--paper); }
.activity-ava.acid { background: var(--acid); color: var(--ink); }
.activity-ava.dark { background: var(--ink); color: var(--paper); }
.activity-ava.warn { background: var(--warning); color: var(--ink); }
.activity-body { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.45; }
.activity-body .who { font-weight: 700; color: var(--ink); }
.activity-body .verb { color: var(--ink-muted); }
.activity-body .target {
    font-weight: 600;
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
}
.activity-body .target.kbd {
    font-family: var(--font-mono);
    background: var(--paper);
    border: 1px solid var(--hairline-strong);
    padding: 1px 6px;
    color: var(--ink);
}
.activity-detail {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--hairline-strong);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-muted);
    font-weight: 600;
}
.activity-detail .delete { color: var(--danger); text-decoration: line-through; }
.activity-detail .add { color: var(--success); }
.activity-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    text-transform: uppercase;
}
.activity-feed-foot {
    padding: 14px 22px;
    border-top: 2px solid var(--ink);
    background: var(--bg-deep);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center;
}
.activity-feed-foot a {
    color: var(--accent);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.activity-feed-foot a::after { content: "→"; }

/* Section 17 sub-header band */
.sub-band {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 14px;
    padding: 18px 0 8px;
    border-top: 1px solid var(--hairline-strong);
    margin-top: var(--space-md);
}
.sub-band .meta {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper);
    padding: 5px 10px;
}
.sub-band .desc {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: uppercase;
}
.sub-band .rule {
    flex: 1; height: 1px; background: var(--hairline-strong);
}

@media (max-width: 900px) {
    .kpi-hero { grid-template-columns: 1fr; }
    .scorecard-grid { grid-template-columns: 1fr 1fr; }
    .scorecard-cell:nth-child(2n) { border-right: none; }
    .scorecard-cell:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.18); }
    .leaderboard-row { grid-template-columns: 28px 1fr 60px 50px; gap: 8px; padding: 12px 14px; }
    .leaderboard-row .leaderboard-bar { display: none; }
    .banner-sideways { grid-template-columns: 1fr; }
    .banner-sideways-side { writing-mode: horizontal-tb; transform: none; padding: 8px; }
    .banner-deal { grid-template-columns: 1fr; }
    .banner-deal-side { border-left: none; border-top: 4px solid var(--ink); }
    .metric-cluster { grid-template-columns: 1fr 1fr !important; }
    .kpi-row { grid-template-columns: 1fr 1fr; }
    .kpi-row-cell { border-right: 1px solid var(--hairline-strong) !important; border-bottom: 1px solid var(--hairline-strong); }
    .kpi-row-cell:nth-child(2n) { border-right: none !important; }
    .heatmap-matrix { grid-template-columns: 80px repeat(12, minmax(20px, 1fr)); font-size: 0.62rem; }
    .heatmap-matrix .h, .heatmap-matrix .l { font-size: 0.6rem; }
    .heatmap-mcell { font-size: 0.6rem; }
    .activity-item { grid-template-columns: 36px 1fr; padding: 14px 16px; }
    .activity-meta { grid-column: 2; text-align: left; padding-top: 4px; }
    .chart-card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .chart-card-head .legend { flex-wrap: wrap; }
}
@media (max-width: 700px) {
    section.hero h1 { font-size: clamp(3rem, 11vw, 6rem) !important; }
    .container { padding: 0 18px; }
    h1 { font-size: clamp(2.6rem, 11vw, 5rem); }
    h2 { font-size: clamp(1.8rem, 8vw, 3rem) !important; }
    :root { --space-lg: 48px; --space-xl: 80px; --space-md: 22px; }
    .edt-ticker { font-size: 0.66rem; }
    .edt-ticker-track { gap: 2rem; }
    nav.main-nav { padding: 16px 0; }
    nav.main-nav .nav-links { display: none; }
    .logo { font-size: 1.1rem; }
    .toc { grid-template-columns: 1fr 1fr; }
    section.hero { gap: var(--space-md); padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .hero-meta { font-size: 0.62rem; gap: 8px; flex-wrap: wrap; }
    .hero-meta .rule { display: none; }
    .hero-intro { font-size: 1.1rem; }
    .hero-spec { padding: 4px 16px; }
    .hero-spec-row { padding: 10px 0; }
    .section-header { gap: 14px; }
    .section-meta { font-size: 0.66rem; padding: 4px 10px; }

    /* KPI heroes — stack everything */
    .kpi-hero { grid-template-columns: 1fr !important; padding: 20px !important; gap: 18px !important; }
    .kpi-hero-value { font-size: clamp(2.6rem, 12vw, 4.4rem) !important; }
    .kpi-hero-mini-row.with-spark { grid-template-columns: 1fr; }
    .kpi-hero-mini-row .stat-spark-svg { max-width: 100%; }
    .kpi-hero > div[style*="border-right"] { border-right: none !important; padding-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: 18px; }

    /* KPI row stacks 1-up below 700 */
    .kpi-row { grid-template-columns: 1fr; }
    .kpi-row-cell { border-right: none !important; border-bottom: 1px solid var(--hairline-strong) !important; }
    .kpi-row-cell:last-child { border-bottom: none !important; }

    /* Gauges 2-up */
    .gauge-card svg { width: 130px; height: 100px; }
    .gauge-card .gauge-v { font-size: 1.6rem; }

    /* Scorecard 2-up */
    .scorecard-grid { grid-template-columns: 1fr 1fr; }
    .scorecard-cell:nth-child(2n) { border-right: none; }
    .scorecard-cell:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.18); }
    .scorecard-cell:nth-last-child(-n+2) { border-bottom: none; }

    /* Metric cluster — 2 up */
    .metric-cluster, .metric-cluster[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
    .metric-cell .v { font-size: 1.6rem; }

    /* Leaderboard — drop sub & bar */
    .leaderboard-row { grid-template-columns: 22px 1fr 60px; gap: 8px; padding: 12px; }
    .leaderboard-row .leaderboard-bar,
    .leaderboard-row .leaderboard-delta { display: none; }
    .leaderboard-name .sub { font-size: 0.62rem; }

    /* Stat cards */
    .stat-card-xl { padding: 20px; min-height: 0; }
    .stat-card-xl .value { font-size: clamp(2rem, 10vw, 2.8rem); }

    /* Banners */
    .banner-deal-title { font-size: 1.3rem; }
    .banner-deal-side .price { font-size: clamp(2rem, 10vw, 2.8rem); }
    .banner-status { grid-template-columns: 6px 1fr; }
    .banner-status-meta, .banner-status-action { display: none; }

    /* Tables — scroll horizontally + smaller cells */
    .table th, .table td { padding: 10px 12px; font-size: 0.84rem; }
    .table-container > div:first-child { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* Charts — smaller heights & legend wrap */
    .chart-card { padding: 20px; }
    .chart-card-head h3 { font-size: 1.05rem; }
    .chart-card svg { height: auto !important; }
    .chart-card .legend { font-size: 0.62rem; gap: 8px; }

    /* Heatmap — smaller matrix, scroll if needed */
    .heatmap { padding: 20px; }
    .heatmap-head { flex-direction: column; align-items: flex-start; }
    .heatmap-matrix { grid-template-columns: 70px repeat(12, minmax(18px, 1fr)); gap: 2px; }
    .heatmap-mcell { font-size: 0.58rem; border-width: 1px; }
    .heatmap-cal-cells { gap: 1px; }
    .heatmap-cal-days { font-size: 0.56rem; }

    /* Activity feed */
    .activity-feed-head { padding: 14px 16px; font-size: 0.68rem; }
    .activity-feed-foot { padding: 12px 16px; font-size: 0.66rem; }
    .activity-item { padding: 14px 16px; gap: 10px; }
    .activity-body { font-size: 0.86rem; }
    .activity-detail { font-size: 0.72rem; padding: 8px; }

    /* Hero CTA buttons */
    .btn-lg { padding: 14px 22px; font-size: 0.86rem; }

    /* Right rail hidden */
    .edt-rail { display: none; }

    /* Sub-band breaks */
    .sub-band { flex-wrap: wrap; padding: 14px 0 8px; }
    .sub-band .desc { font-size: 0.64rem; }

    /* Cursor halo off on touch */
    body { cursor: auto; }
    .cursor-halo { display: none; }
}
@media (max-width: 480px) {
    .toc { grid-template-columns: 1fr; }
    section.hero h1 { font-size: clamp(2.6rem, 14vw, 4.4rem) !important; }
    .scorecard-grid { grid-template-columns: 1fr; }
    .scorecard-cell { border-right: none !important; }
    .scorecard-cell:nth-last-child(-n+1) { border-bottom: none !important; }
    .metric-cluster, .metric-cluster[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .metric-cell:nth-child(2n) { border-right: none; }
    .metric-cell { border-right: none !important; }
    /* Gauges 1-up */
    .gauge-card { padding: 18px; }
    /* Stat card grid 1-up implicit through .col-* responsive collapse */
}


/* =========================================================
   ICON SET (03·C) — thin-line hollow, square caps
   ========================================================= */
.icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: var(--icon-stroke, 1.25); stroke-linecap: square; stroke-linejoin: miter; fill: none; flex-shrink: 0; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 2px; background: var(--ink); border: var(--border-base); box-shadow: var(--shadow-lvl1); }
.icon-cell { background: var(--paper); border: none; cursor: pointer; padding: 14px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-muted); transition: background var(--dur-instant) var(--ease-snap); }
.icon-cell:hover { background: var(--acid); color: var(--ink); }
.icon-cell span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Filter facet dropdowns */
.fdrop-panel { display: none; }
.fdrop-panel.open { display: block; }
.fpill.open { background: var(--accent); color: var(--paper); }

/* =========================================================
   MOTION LAYER — stats & viz micro-interactions
   Hover = lift −2/−3px against a grown shadow (Motion Law 03)
   ========================================================= */
.kpi-hero, .stat-card-xl, .stat-card, .viz-frame, .giant-donut, .streak-card, .stat-banner,
.striped-card, .permonth-card, .operational-banner, .deal-banner, .gauge-card {
    transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.giant-donut:hover, .streak-card:hover, .stat-banner:hover, .striped-card:hover,
.permonth-card:hover, .operational-banner:hover, .deal-banner:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--ink);
}
.stat-card:hover, .gauge-card:hover, .viz-frame:hover, .stat-card-xl:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}
.kpi-hero:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--accent); }
.kpi-hero.accent:hover, .kpi-hero.paper:hover { box-shadow: 8px 8px 0 var(--ink); }
.stat-card-xl:hover .value .unit, .kpi-hero.paper:hover .kpi-hero-value .unit { color: var(--accent); }
.kpi-hero:hover .kpi-hero-value .unit,
.stat-card-xl.dark:hover .value .unit, .stat-card-xl.accent:hover .value .unit { color: var(--acid); }
.stat-card-xl .delta { transition: transform var(--dur-instant) var(--ease-snap); }
.stat-card-xl:hover .delta { transform: translate(-1px, -1px); }
.scorecard-cell, .metric-cell, .kpi-row-cell { transition: background var(--dur-instant) var(--ease-snap); }
.scorecard-cell:hover, .metric-cell:hover, .kpi-row-cell:not(.active):hover { background: var(--bg); }

/* Entrance — heat/streak cells pop in staggered waves */
.viz-animate .heatmap-cell, .viz-animate .streak-cell, .viz-animate .heatmap-mcell {
    animation: hm-pop var(--dur-smooth) var(--ease-pop) backwards;
}
.viz-animate .heatmap-cell:nth-child(2n), .viz-animate .streak-cell:nth-child(2n) { animation-delay: 0.08s; }
.viz-animate .heatmap-cell:nth-child(3n), .viz-animate .streak-cell:nth-child(3n) { animation-delay: 0.16s; }
.viz-animate .heatmap-cell:nth-child(5n), .viz-animate .streak-cell:nth-child(5n) { animation-delay: 0.24s; }
.viz-animate .heatmap-cell:nth-child(7n), .viz-animate .streak-cell:nth-child(7n) { animation-delay: 0.32s; }
.viz-animate .heatmap-mcell:nth-child(3n) { animation-delay: 0.1s; }
.viz-animate .heatmap-mcell:nth-child(4n) { animation-delay: 0.2s; }

/* =========================================================
   GLYPH SET (03·B)
   ========================================================= */
.glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 2px; background: var(--ink); border: var(--border-base); box-shadow: var(--shadow-lvl1); }
.glyph-cell { background: var(--paper); padding: 18px 10px 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; transition: background var(--dur-instant) var(--ease-snap); }
.glyph-cell:hover { background: var(--acid); }
.glyph-cell .g { font-size: 1.7rem; line-height: 1; font-family: var(--font-mono); }

/* =========================================================
   VIZ RAMPS (12·A)
   ========================================================= */
.ramp-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-sm); align-items: center; padding: 12px 0; border-top: 1px solid var(--hairline-strong); }
.ramp-row:first-of-type { border-top: none; padding-top: 0; }
.ramp-swatches { display: flex; border: 2px solid var(--ink); }
.ramp-swatches span { flex: 1; height: 52px; display: flex; align-items: flex-end; padding: 4px 6px; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.5px; }
@media (max-width: 700px) { .ramp-row { grid-template-columns: 1fr; } }

/* =========================================================
   ANALYTICAL (12·I) — time-series · comparison · funnel ·
   cohort · spark table. Token-driven: presets restyle freely.
   ========================================================= */
.ts-frame, .bcomp, .funnel-frame, .cohort-frame, .spark-wrap {
    border: var(--border-base); background: var(--paper); box-shadow: var(--shadow-lvl1);
    padding: var(--space-sm); display: flex; flex-direction: column; gap: 12px;
    transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.ts-frame:hover, .bcomp:hover, .funnel-frame:hover, .cohort-frame:hover, .spark-wrap:hover {
    transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink);
}
.anl-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.anl-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: -0.01em; }
.anl-legend { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-muted); }
.anl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.anl-legend .sw { width: 14px; height: 3px; display: inline-block; background: var(--ink); opacity: 0.45; }
.anl-legend .sw.acc { background: var(--accent); opacity: 1; }
/* time-series */
.ts-plot { position: relative; border: 1px solid var(--hairline-strong); background: var(--true-white); }
.ts-svg { display: block; width: 100%; height: 250px; }
.ts-grid { stroke: var(--hairline); stroke-width: 1; }
.ts-line { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.ts-line-prev { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.5; }
.ts-area { fill: var(--accent); opacity: 0.12; }
.ts-mark { fill: var(--paper); stroke: var(--accent); stroke-width: 2.5; }
.ts-ann { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.6; }
.ts-flag { position: absolute; top: 8px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.55rem; font-weight: 800; letter-spacing: 1px; background: var(--ink); color: var(--acid); padding: 3px 7px; white-space: nowrap; }
.ts-x { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.5px; }
/* grouped bar comparison */
.bcomp-row { display: grid; grid-template-columns: 76px 1fr 52px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hairline); }
.bcomp-row:first-of-type { border-top: none; }
.bcomp-row .k { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-muted); }
.bcomp-row .bars { display: flex; flex-direction: column; gap: 3px; }
.bcomp-row .bars i { display: block; height: 10px; background: var(--accent); }
.bcomp-row .bars i.prev { height: 6px; background: var(--ink); opacity: 0.35; }
.bcomp-row .v { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 800; text-align: right; }
.bcomp-row .v.down { color: var(--danger); }
/* funnel */
.fun-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: var(--ink); color: var(--paper); padding: 11px 14px; min-width: max-content; font-family: var(--font-mono); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.5px; text-transform: uppercase; }
.fun-bar .fv { font-size: 0.95rem; letter-spacing: 0; }
.fun-bar.last { background: var(--accent); color: var(--paper); }
.fun-drop { padding: 5px 0 5px 14px; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 800; letter-spacing: 1px; color: var(--accent); }
/* cohort matrix */
.cohort-grid { display: grid; grid-template-columns: 64px repeat(6, 1fr); gap: 3px; font-family: var(--font-mono); }
.cohort-grid .ch { display: flex; align-items: center; justify-content: center; height: 30px; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.5px; color: var(--ink-faint); text-transform: uppercase; }
.cohort-grid .cl { justify-content: flex-start; color: var(--ink-muted); }
.cohort-grid i { display: flex; align-items: center; justify-content: center; height: 36px; font-style: normal; font-size: 0.64rem; font-weight: 700; color: var(--ink); border: 1px solid var(--hairline); }
.cohort-grid i.hi { color: var(--paper); }
.cohort-grid i.x { border: 1px dashed var(--hairline); color: var(--ink-faint); }
/* spark table */
.spark-wrap { padding: 0; overflow-x: auto; background: var(--true-white); }
.spark-wrap table { width: 100%; border-collapse: collapse; min-width: 640px; }
.spark-wrap th { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; text-align: left; color: var(--ink-muted); padding: 12px 14px; border-bottom: var(--border-base); background: var(--paper); }
.spark-wrap td { padding: 12px 14px; border-top: 1px solid var(--hairline); font-size: 0.9rem; vertical-align: middle; }
.spark-wrap tr:first-child td { border-top: none; }
.spark-wrap td.m { font-weight: 600; }
.spark-wrap td .mono-sub { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-top: 2px; }
.spk { display: block; width: 110px; height: 26px; }
.spk polyline { fill: none; stroke: var(--accent); stroke-width: 2; }
.spk.dim polyline { stroke: var(--ink); opacity: 0.45; }
.spark-wrap .num { font-family: var(--font-mono); font-weight: 800; font-size: 0.95rem; }
.spark-wrap .delta { font-family: var(--font-mono); font-weight: 800; font-size: 0.72rem; }
.spark-wrap .delta.up { color: var(--success); }
.spark-wrap .delta.down { color: var(--danger); }
.share-bar { width: 120px; height: 8px; background: var(--gray); }
.share-bar i { display: block; height: 100%; background: var(--ink); }
@media (max-width: 700px) { .cohort-grid { grid-template-columns: 48px repeat(6, 1fr); } .bcomp-row { grid-template-columns: 60px 1fr 46px; } }


/* =========================================================
   COLUMN MANAGER + VIEW OPTIONS (12·F)
   ========================================================= */
.cmg { border: 2px solid var(--ink); background: var(--true-white); }
.cmg-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.cmg-row:last-child { border-bottom: none; }
.cmg-row:hover { background: var(--bg); }
.cmg-row .grip { cursor: grab; color: var(--ink-faint); }
.cmg-row .pin { margin-left: auto; font-size: 0.62rem; color: var(--ink-muted); letter-spacing: 1px; }
.cmg-row .brutal-control { margin: 0; font-size: 0.76rem; }
.dens-preview { border: 2px solid var(--ink); background: var(--true-white); font-family: var(--font-mono); font-size: 0.76rem; }
.dens-preview .dp-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--hairline); transition: padding var(--dur-fast) var(--ease-snap); }
.dens-preview .dp-row:last-child { border-bottom: none; }
.dens-preview.d-compact .dp-row { padding: 5px 14px; }
.dens-preview.d-comfort .dp-row { padding: 18px 14px; }
.dens-preview.zebra .dp-row:nth-child(even) { background: var(--bg); }
.dens-preview.lines .dp-row { border-bottom: 2px solid var(--ink); }
.dens-preview.lines .dp-row:last-child { border-bottom: none; }

/* =========================================================
   TREE / FILE BROWSER (12·G)
   ========================================================= */
.tree { border: var(--border-base); background: var(--true-white); box-shadow: var(--shadow-lvl1); font-family: var(--font-mono); font-size: 0.8rem; }
.tree summary { list-style: none; }
.tree summary::-webkit-details-marker { display: none; }
.tree-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.tree-row:hover { background: var(--bg); }
.tree-row.sel { background: var(--accent); color: var(--paper); }
.tree-row.sel .t-meta { color: var(--paper); opacity: 0.8; }
.tree-row .t-caret { width: 14px; text-align: center; flex-shrink: 0; }
summary > .tree-row .t-caret::before { content: "▸"; }
details[open] > summary > .tree-row .t-caret::before { content: "▾"; }
.tree-row .t-name { font-weight: 700; letter-spacing: 0.5px; }
.tree-row .t-meta { margin-left: auto; color: var(--ink-faint); font-size: 0.68rem; display: flex; gap: 18px; font-weight: 700; }
.tree-kids { border-left: 2px solid var(--ink); margin-left: 20px; }

/* =========================================================
   FILTERING — toolbar, facets, query builder (12·F)
   ========================================================= */
.fpill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); transition: transform var(--dur-instant) var(--ease-snap), box-shadow var(--dur-instant) var(--ease-snap); }
.fpill:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.fpill:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--ink); }
.fpill.active { background: var(--ink); color: var(--paper); }
.fpill .count { background: var(--accent); color: var(--paper); padding: 1px 6px; font-size: 0.65rem; line-height: 1.4; }
.fpill .caret { font-size: 0.55rem; opacity: 0.7; }
.fdrop { border: 2px solid var(--ink); background: var(--true-white); box-shadow: var(--shadow-lvl1); max-width: 340px; }
.fdrop-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.fdrop-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.fdrop-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 2px solid var(--ink); }
.facet-count { margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-muted); font-weight: 700; }
.facet-group { border-top: 2px solid var(--ink); padding: 12px 0; }
.facet-group:first-of-type { border-top: none; padding-top: 0; }
.facet-group-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.qb-row { display: grid; grid-template-columns: minmax(110px, 1.1fr) minmax(88px, 0.8fr) minmax(110px, 1.2fr) 36px; gap: 8px; align-items: center; margin-bottom: 8px; }
.qb-row .form-control { padding: 8px 10px; font-size: 0.78rem; width: 100%; }
.qb-del { width: 36px; height: 36px; border: 2px solid var(--ink); background: var(--paper); font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qb-del:hover { background: var(--danger); color: var(--paper); }
.qb-add { border: 2px dashed var(--ink); background: transparent; padding: 10px; width: 100%; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.qb-add:hover { background: var(--acid); }
@media (max-width: 700px) { .qb-row { grid-template-columns: 1fr 1fr; } .qb-del { justify-self: start; } }

/* =========================================================
   FIX: Combobox results — show inline (not absolute) in the
   static showcase so it doesn't overlap the component below.
   ========================================================= */
.combobox { isolation: isolate; }
.combobox .combobox-results {
    position: static;
    margin-top: 8px;
    max-height: 220px;
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    background: var(--paper);
    border-radius: 0;
    overflow: hidden;
    display: block;
}
.combobox-item {
    border-bottom: 1px solid var(--hairline-strong);
    font-family: var(--font-body);
    font-weight: 600;
}
.combobox-item:hover, .combobox-item.active {
    background: var(--accent);
    color: var(--paper);
}
.combobox-item .meta {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--ink-muted);
    letter-spacing: 0.12em;
}
.combobox-item:hover .meta, .combobox-item.active .meta { color: var(--paper); opacity: 0.85; }
.combobox-item mark {
    background: var(--acid);
    color: var(--ink);
    padding: 0 4px;
    font-weight: 800;
    border-radius: 0;
}

/* =========================================================
   FIX: Time picker — every cell gets a visible state
   ========================================================= */
.timepicker {
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    background: var(--paper);
    border-radius: 0;
    overflow: hidden;
    width: fit-content;
}
.timepicker-field { border-right: 1px solid var(--hairline-strong); }
.timepicker-btn {
    background: var(--bg-deep);
    border: none;
    border-bottom: 1px solid var(--hairline-strong);
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--ink);
}
.timepicker-btn:last-child { border-top: 1px solid var(--hairline-strong); border-bottom: none; }
.timepicker-btn:hover { background: var(--ink); color: var(--paper); }
.timepicker-value {
    font-family: var(--font-display);
    font-weight: 800;
    background: var(--paper);
    color: var(--ink);
}
.timepicker-colon { color: var(--ink); }
.timepicker-ampm {
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--ink);
}
.timepicker-ampm button {
    background: var(--paper);
    border: none;
    border-bottom: 1px solid var(--hairline-strong);
    color: var(--ink);
    font-family: var(--font-mono);
    font-weight: 700;
    min-width: 64px;
    padding: 14px 18px;
    cursor: pointer;
    transition: background var(--dur-base), color var(--dur-base);
}
.timepicker-ampm button:last-child { border-bottom: none; }
.timepicker-ampm button:hover { background: var(--bg-deep); }
.timepicker-ampm button.active { background: var(--accent); color: var(--paper); }

/* =========================================================
   INTERACTIVE CHARTS — tooltip + hover states
   ========================================================= */
.chart-tooltip {
    position: fixed;
    background: var(--ink);
    color: var(--paper);
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--accent);
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    pointer-events: none;
    z-index: var(--z-overlay);
    opacity: 0;
    transform: translate(-50%, -120%);
    transition: opacity var(--dur-fast);
    white-space: nowrap;
}
.chart-tooltip.show { opacity: 1; }
.chart-tooltip .v { color: var(--acid); }

.ix-bar, .ix-point, .ix-slice, .ix-cell {
    transition: filter var(--dur-base), transform var(--dur-base), opacity var(--dur-base), stroke-width var(--dur-base);
    cursor: pointer;
}
.ix-bar:hover { filter: brightness(0.82); }
.ix-slice:hover { stroke-width: 42; }
.ix-cell:hover { stroke: var(--ink); stroke-width: 2.5; }

/* =========================================================
   KPI HERO — variants
   ========================================================= */
.kpi-hero.accent { background: var(--accent); color: var(--paper); }
.kpi-hero.accent::before { background-image: radial-gradient(rgba(246,243,235,0.18) 1.5px, transparent 1.5px); }
.kpi-hero.accent .kpi-hero-label,
.kpi-hero.accent .kpi-hero-foot { color: rgba(246,243,235,0.7); border-top-color: rgba(246,243,235,0.25); }
.kpi-hero.accent .kpi-hero-foot .delta { color: var(--acid); }
.kpi-hero.accent .kpi-hero-value .unit { color: var(--acid); }
.kpi-hero.accent .kpi-hero-mini-row { border-top-color: rgba(246,243,235,0.25); }
.kpi-hero.paper {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
}
.kpi-hero.paper::before { background-image: radial-gradient(rgba(11,12,18,0.10) 1.5px, transparent 1.5px); }
.kpi-hero.paper .kpi-hero-label { color: var(--ink-muted); }
.kpi-hero.paper .kpi-hero-value { color: var(--ink); }
.kpi-hero.paper .kpi-hero-value .unit { color: var(--accent); }
.kpi-hero.paper .kpi-hero-foot { color: var(--ink-muted); border-top-color: var(--hairline-strong); }
.kpi-hero.paper .kpi-hero-foot .delta { color: var(--success); }
.kpi-hero.paper .kpi-hero-mini-row { border-top-color: var(--hairline-strong); }
.kpi-hero.paper .kpi-hero-mini-k { color: var(--ink-muted); }
.kpi-hero.paper .kpi-hero-mini-v { color: var(--ink); }
.kpi-hero.paper .kpi-hero-mini-v .change { color: var(--success); }
.kpi-hero.paper .kpi-hero-mini-v .change.down { color: var(--danger); }
.kpi-hero.paper .stat-spark-svg path { stroke: var(--ink); }
.kpi-hero.paper .stat-spark-svg .fill { fill: var(--ink); fill-opacity: 0.08; }

/* KPI row — compact 5-up with active state */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    background: var(--paper);
}
.kpi-row-cell {
    padding: 22px 20px;
    border-right: 1px solid var(--hairline-strong);
    display: flex; flex-direction: column; gap: 6px;
    position: relative;
    cursor: pointer;
    transition: background var(--dur-base), color var(--dur-base);
}
.kpi-row-cell:hover { background: var(--bg-deep); }
.kpi-row-cell.active { background: var(--ink); color: var(--paper); }
.kpi-row-cell:last-child { border-right: none; }
.kpi-row-cell .k {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
}
.kpi-row-cell.active .k { color: var(--ink-faint); }
.kpi-row-cell .v {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.03em;
    line-height: 1;
}
.kpi-row-cell.active .v { color: var(--paper); }
.kpi-row-cell .d {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--success);
    letter-spacing: 0.04em;
}
.kpi-row-cell .d.down { color: var(--danger); }
.kpi-row-cell.active .d { color: var(--acid); }
@media (max-width: 900px) { .kpi-row { grid-template-columns: 1fr 1fr; } }

/* Gauge / radial */
.gauge-card {
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--ink);
    padding: var(--space-md);
    display: flex; flex-direction: column; gap: 8px;
    min-height: 220px;
    align-items: center;
    justify-content: center;
}
.gauge-card svg { display: block; }
.gauge-card .gauge-v {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--ink);
}
.gauge-card .gauge-l {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
}
.gauge-card .gauge-status {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border: 1.5px solid var(--ink);
    background: var(--success);
    color: var(--paper);
    margin-top: 6px;
}
.gauge-card .gauge-status.warn { background: var(--warning); color: var(--ink); }
.gauge-card .gauge-status.err { background: var(--danger); color: var(--paper); }

/* =========================================================
   HEATMAPS
   ========================================================= */
.heatmap {
    border: 2px solid var(--ink);
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--ink);
    padding: var(--space-md);
}
.heatmap-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline-strong);
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}
.heatmap-head h3 { margin: 0; font-size: 1.3rem; }
.heatmap-head .scale {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    text-transform: uppercase;
}
.heatmap-head .scale .s {
    width: 14px; height: 14px;
    border: 1.5px solid var(--ink);
    display: inline-block;
}
.heatmap-cal {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.heatmap-cal-days {
    display: grid;
    grid-template-rows: repeat(7, 14px);
    gap: 2px;
    padding-top: 22px;
}
.heatmap-cal-days span { line-height: 14px; }
.heatmap-cal-grid {
    display: flex; flex-direction: column;
    gap: 4px;
    overflow: hidden;
}
.heatmap-cal-months {
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
}
.heatmap-cal-cells {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-auto-flow: column;
    gap: 2px;
    overflow-x: auto;
}
.heatmap-cell {
    width: 100%;
    aspect-ratio: 1;
    min-width: 10px;
    background: var(--bg-deep);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.heatmap-cell:hover { transform: scale(1.5); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); z-index: 2; position: relative; }
.heatmap-cell.l1 { background: color-mix(in oklab, var(--accent) 18%, var(--paper)); }
.heatmap-cell.l2 { background: color-mix(in oklab, var(--accent) 40%, var(--paper)); }
.heatmap-cell.l3 { background: color-mix(in oklab, var(--accent) 65%, var(--paper)); }
.heatmap-cell.l4 { background: var(--accent); }
.heatmap-cell.l5 { background: var(--ink); }

/* Matrix heatmap */
.heatmap-matrix {
    width: 100%;
    display: grid;
    grid-template-columns: 110px repeat(12, 1fr);
    gap: 3px;
}
.heatmap-matrix .h, .heatmap-matrix .l {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    padding: 6px 0;
    text-transform: uppercase;
}
.heatmap-matrix .h { text-align: center; }
.heatmap-matrix .l { text-align: left; padding-right: 8px; align-self: center; }
.heatmap-mcell {
    aspect-ratio: 1;
    border: 1.5px solid var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast);
    background: var(--bg-deep);
}
.heatmap-mcell:hover { transform: scale(1.06); box-shadow: 2px 2px 0 var(--ink); z-index: 2; }
.heatmap-mcell.v100 { background: var(--ink); color: var(--paper); }
.heatmap-mcell.v90 { background: color-mix(in oklab, var(--accent) 90%, var(--ink)); color: var(--paper); }
.heatmap-mcell.v80 { background: color-mix(in oklab, var(--accent) 75%, var(--paper)); color: var(--paper); }
.heatmap-mcell.v70 { background: color-mix(in oklab, var(--accent) 58%, var(--paper)); color: var(--paper); }
.heatmap-mcell.v60 { background: color-mix(in oklab, var(--accent) 45%, var(--paper)); color: var(--ink); }
.heatmap-mcell.v50 { background: color-mix(in oklab, var(--accent) 32%, var(--paper)); color: var(--ink); }
.heatmap-mcell.v40 { background: color-mix(in oklab, var(--accent) 22%, var(--paper)); color: var(--ink); }
.heatmap-mcell.v30 { background: color-mix(in oklab, var(--accent) 14%, var(--paper)); color: var(--ink); }
.heatmap-mcell.v20 { background: color-mix(in oklab, var(--accent) 8%, var(--paper)); color: var(--ink); }
.heatmap-mcell.v0 { background: var(--bg-deep); color: var(--ink-faint); }

/* =========================================================
   DASHBOARD KPI BLOCKS — bold colorful hero variants
   ========================================================= */
.dash-kpi {
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    padding: 26px;
    display: flex; flex-direction: column; gap: 14px;
    position: relative;
    overflow: hidden;
    min-height: 220px;
}
.dash-kpi .badge-corner {
    position: absolute;
    top: 14px; right: 14px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 10px;
    background: var(--ink);
    color: var(--paper);
    border: 1.5px solid var(--ink);
}
.dash-kpi .dk-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.7;
}
.dash-kpi .dk-v {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -0.045em;
    color: var(--ink);
    font-size: clamp(2.6rem, 6vw, 4.4rem);
}
.dash-kpi .dk-v.giant { font-size: clamp(3.2rem, 8vw, 5.6rem); }
.dash-kpi .dk-foot {
    margin-top: auto;
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
    opacity: 0.85;
}
.dash-kpi .dk-spark {
    display: block; width: 100%; height: 48px;
    margin-top: 12px;
}
.dash-kpi .dk-spark path { fill: none; stroke: var(--ink); stroke-width: 2.5; }

/* Color variants — based on canonical brand swatches */
.dash-kpi.acid { background: var(--acid); }
.dash-kpi.acid .badge-corner { background: var(--ink); color: var(--acid); }
.dash-kpi.acid .dk-foot .delta { color: var(--olive); font-weight: 800; }

.dash-kpi.paper { background: var(--paper); }
.dash-kpi.paper .dk-v .unit { color: var(--accent); font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.5em; }
.dash-kpi.paper .dk-foot .delta { color: var(--success); font-weight: 800; }

.dash-kpi.dark { background: var(--ink); color: var(--paper); }
.dash-kpi.dark .dk-label { color: var(--ink-faint); opacity: 1; }
.dash-kpi.dark .dk-v { color: var(--paper); }
.dash-kpi.dark .dk-v .unit { color: var(--acid); }
.dash-kpi.dark .badge-corner { background: var(--paper); color: var(--ink); }
.dash-kpi.dark .dk-foot { color: var(--ink-faint); opacity: 1; }
.dash-kpi.dark .dk-foot .delta { color: var(--acid); font-weight: 800; }
.dash-kpi.dark .dk-spark path { stroke: var(--acid); }

.dash-kpi.cyan { background: var(--accent-2); }
.dash-kpi.cyan .dk-v .unit { color: var(--ink); font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.5em; }
.dash-kpi.cyan .dk-foot .delta { color: var(--olive); font-weight: 800; }

.dash-kpi.pink { background: var(--accent); color: var(--paper); }
.dash-kpi.pink .dk-label { color: var(--paper); opacity: 0.85; }
.dash-kpi.pink .dk-v { color: var(--paper); }
.dash-kpi.pink .badge-corner { background: var(--paper); color: var(--ink); }
.dash-kpi.pink .dk-foot { color: var(--paper); opacity: 0.9; }
.dash-kpi.pink .dk-foot .delta { color: var(--paper); }
.dash-kpi.pink .dk-spark path { stroke: var(--paper); }

.dash-kpi.accent { background: var(--accent); color: var(--paper); }
.dash-kpi.accent .dk-label { color: var(--paper); opacity: 0.85; }
.dash-kpi.accent .dk-v { color: var(--paper); }
.dash-kpi.accent .dk-v .unit { color: var(--acid); }
.dash-kpi.accent .badge-corner { background: var(--paper); color: var(--ink); }
.dash-kpi.accent .dk-foot { color: var(--paper); }
.dash-kpi.accent .dk-foot .delta { color: var(--acid); font-weight: 800; }
.dash-kpi.accent .dk-spark path { stroke: var(--acid); }

/* Split-row stat list (MRR/ARR/Expansion/Churn pattern) */
.dash-stack {
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--bg-deep); /* warm peach */
    padding: 24px 28px;
    display: flex; flex-direction: column;
    gap: 6px;
    min-height: 220px;
}
.dash-stack-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid rgba(11,12,18,0.18);
}
.dash-stack-row:last-child { border-bottom: none; }
.dash-stack-row .k {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink);
    opacity: 0.72;
}
.dash-stack-row .v {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.03em;
}
.dash-stack-row .d {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--success);
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border: 1.5px solid var(--ink);
    background: var(--paper);
}
.dash-stack-row .d.down { color: var(--danger); }

/* Goals progress card (donut + bar rows) */
.dash-goals {
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--paper);
    padding: 26px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-md);
    align-items: center;
    min-height: 220px;
}
.dash-goals-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-muted);
    grid-column: 1 / -1;
    margin-bottom: -8px;
}
.dash-goals-title .em { color: var(--accent); }
.dash-goals svg { width: 100%; max-width: 200px; height: auto; }
.dash-goals-rows { display: flex; flex-direction: column; gap: 12px; }
.dash-goals-row {
    display: grid;
    grid-template-columns: 90px 1fr 50px;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.dash-goals-row .lbl {
    display: inline-flex; align-items: center; gap: 8px;
}
.dash-goals-row .lbl::before {
    content: ""; width: 10px; height: 10px;
    background: var(--ink);
}
.dash-goals-row.l-accent .lbl::before { background: var(--accent); }
.dash-goals-row.l-acid .lbl::before { background: var(--acid); border: 1px solid var(--ink); }
.dash-goals-row.l-cyan .lbl::before { background: var(--accent-2); border: 1px solid var(--ink); }
.dash-goals-row .bar {
    height: 14px;
    background: var(--bg-deep);
    border: 1.5px solid var(--ink);
    position: relative;
    overflow: hidden;
}
.dash-goals-row .bar > span {
    display: block; height: 100%;
    background: var(--ink);
}
.dash-goals-row.l-accent .bar > span { background: var(--accent); }
.dash-goals-row.l-acid .bar > span { background: var(--acid); }
.dash-goals-row.l-cyan .bar > span { background: var(--accent-2); }
.dash-goals-row .pct {
    text-align: right;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.01em;
}

@media (max-width: 700px) {
    .dash-kpi { padding: 20px; min-height: 180px; }
    .dash-stack { padding: 18px 20px; min-height: 0; }
    .dash-stack-row .v { font-size: 1.3rem; }
    .dash-goals { grid-template-columns: 1fr; padding: 22px; }
    .dash-goals svg { margin: 0 auto; max-width: 160px; }
}

/* =========================================================
   GIANT DONUT + DEVICE LIST
   ========================================================= */
.giant-donut {
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--paper);
    padding: 26px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-md);
    align-items: center;
    min-height: 220px;
}
.gd-title {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: -6px;
}
.gd-svg { width: 100%; max-width: 200px; height: auto; }
.gd-center { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; }
.gd-rows { display: flex; flex-direction: column; gap: 10px; }
.gd-row {
    display: grid;
    grid-template-columns: 100px 1fr 44px;
    gap: 14px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.gd-row .lbl { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; }
.gd-row .lbl::before {
    content: ""; width: 10px; height: 10px;
    background: var(--ink); border: 1px solid var(--ink);
}
.gd-row.l-accent .lbl::before { background: var(--accent); }
.gd-row.l-acid   .lbl::before { background: var(--acid); }
.gd-row.l-cyan   .lbl::before { background: var(--accent-2); }
.gd-row .bar {
    height: 10px; background: var(--bg-deep);
    border: 1.5px solid var(--ink); position: relative; overflow: hidden;
}
.gd-row .bar > span { display: block; height: 100%; background: var(--ink); }
.gd-row.l-accent .bar > span { background: var(--accent); }
.gd-row.l-acid   .bar > span { background: var(--acid); }
.gd-row.l-cyan   .bar > span { background: var(--accent-2); }
.gd-row .pct { font-family: var(--font-display); font-weight: 800; text-align: right; font-size: 1rem; letter-spacing: -0.01em; }

/* =========================================================
   CALENDAR STREAK
   ========================================================= */
.streak-card {
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--acid);
    padding: 26px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-md);
    align-items: center;
    min-height: 220px;
}
.streak-card .head {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.7;
    margin-bottom: -8px;
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 8px;
}
.streak-card .num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(4rem, 9vw, 7rem);
    line-height: 0.86;
    letter-spacing: -0.06em;
    color: var(--ink);
}
.streak-card .num-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
}
.streak-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}
.streak-week { display: grid; grid-template-rows: repeat(7, 1fr); gap: 4px; }
.streak-cell {
    aspect-ratio: 1;
    background: rgba(11,12,18,0.12);
    border: 1px solid var(--ink);
    transition: transform var(--dur-fast);
}
.streak-cell:hover { transform: scale(1.15); }
.streak-cell.on { background: var(--ink); }
.streak-cell.miss { background: rgba(255,71,23,0.6); }

/* =========================================================
   DARK STAT BANNER ("REVENUE UP +18%")
   ========================================================= */
.stat-banner {
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--ink);
    color: var(--paper);
    padding: 28px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.stat-banner .tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--ink-faint);
    text-transform: uppercase;
}
.stat-banner .tag .em { color: var(--accent); }
.stat-banner .ttl {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3rem, 7vw, 5.4rem);
    letter-spacing: -0.05em;
    line-height: 0.92;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px;
}
.stat-banner .ttl .pill {
    display: inline-block;
    background: var(--accent);
    color: var(--paper);
    font-size: 0.6em;
    padding: 4px 16px;
    border: 2px solid var(--paper);
    box-shadow: 4px 4px 0 var(--paper);
    letter-spacing: -0.02em;
    font-weight: 800;
    transform: translateY(-0.15em);
}
.stat-banner .spark {
    position: absolute;
    top: 24px; right: 24px;
    width: 280px; height: 60px;
    max-width: 40%;
}
.stat-banner .spark path { fill: none; stroke: var(--acid); stroke-width: 2.5; }
.stat-banner .row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.16);
}
.stat-banner .row .k {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: var(--ink-faint);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}
.stat-banner .row .v {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--paper);
    letter-spacing: -0.02em;
}
.stat-banner .row .v.acid { color: var(--acid); }
.stat-banner .row .v.pink { color: var(--accent); }

/* =========================================================
   STRIPED TOTAL REVENUE
   ========================================================= */
.striped-card {
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    background:
      repeating-linear-gradient(45deg,
        var(--acid) 0, var(--acid) 14px,
        rgba(11,12,18,0.06) 14px, rgba(11,12,18,0.06) 28px);
    padding: 26px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    overflow: hidden;
    min-height: 220px;
}
.striped-card .left {
    background: var(--acid);
    padding: 8px 22px 8px 0;
    display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.striped-card .right {
    background: var(--paper);
    border-left: 2px solid var(--ink);
    margin: -26px -26px -26px 0;
    padding: 22px;
    display: flex; flex-direction: column;
    gap: 4px;
    justify-content: center;
}
.striped-card .lbl {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink);
    opacity: 0.72;
}
.striped-card .v {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.8rem, 6vw, 4rem);
    letter-spacing: -0.045em;
    color: var(--ink);
    line-height: 1;
}
.striped-card .foot {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink);
    font-weight: 700;
    opacity: 0.85;
    letter-spacing: 0.04em;
}
.striped-card .row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(11,12,18,0.18);
    font-family: var(--font-mono);
}
.striped-card .row:last-child { border-bottom: none; }
.striped-card .row .k { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 700; }
.striped-card .row .v2 { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--ink); letter-spacing: -0.02em; }
.striped-card .row .v2.down { color: var(--danger); }

/* =========================================================
   PER-MONTH BARS CARD
   ========================================================= */
.permonth-card {
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--bg-deep);
    padding: 26px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-md);
    align-items: center;
    min-height: 220px;
}
.permonth-card .left .lbl {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink);
    opacity: 0.7;
    margin-bottom: 6px;
}
.permonth-card .left .v {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    letter-spacing: -0.04em;
    color: var(--ink);
}
.permonth-card .left .pills { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.permonth-card .left .pill {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1.5px solid var(--ink);
    padding: 4px 10px;
    background: var(--paper);
    color: var(--ink);
}
.permonth-card .left .pill.on { background: var(--ink); color: var(--paper); }
.permonth-card .left .pill.acid { background: var(--acid); }
.permonth-card .right svg { width: 100%; height: 120px; display: block; }

/* =========================================================
   VERTICAL STRIPED STREAK METRIC
   ========================================================= */
.vstreak {
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--paper);
    display: grid;
    grid-template-columns: 36px 1fr;
    overflow: hidden;
    min-height: 100px;
}
.vstreak-side {
    background:
      repeating-linear-gradient(0deg,
        var(--ink) 0, var(--ink) 10px,
        var(--paper) 10px, var(--paper) 20px);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--paper);
    background-color: var(--accent);
}
.vstreak-body {
    padding: 18px 24px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 24px;
    align-items: center;
}
.vstreak-body .v {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    letter-spacing: -0.04em;
    color: var(--ink);
}
.vstreak-body .v .small {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    margin-left: 4px;
}
.vstreak-body .stat .k {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-muted);
}
.vstreak-body .stat .sv {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    margin-top: 2px;
}

/* =========================================================
   ALL OPERATIONAL BANNER
   ========================================================= */
.operational-banner {
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--ink);
    color: var(--paper);
    padding: 24px 28px 0;
    overflow: hidden;
}
.operational-head {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 12px;
    flex-wrap: wrap; gap: 8px;
}
.operational-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 6.5vw, 4.6rem);
    letter-spacing: -0.05em;
    line-height: 0.95;
    color: var(--paper);
    margin-bottom: 24px;
}
.operational-title .em { color: var(--acid); }
.operational-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid rgba(255,255,255,0.16);
}
.operational-cell {
    padding: 16px 14px;
    border-right: 1px solid rgba(255,255,255,0.16);
    font-family: var(--font-mono);
}
.operational-cell:last-child { border-right: none; }
.operational-cell .k {
    font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 700; margin-bottom: 4px;
}
.operational-cell .v {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}
.operational-cell.warn .v { color: var(--warning); }
.operational-cell.ok .v { color: var(--acid); }

/* =========================================================
   LARGEST DEAL PINK
   ========================================================= */
.deal-banner {
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--accent);
    color: var(--paper);
    padding: 26px 28px;
    display: flex; flex-direction: column; gap: 14px;
    position: relative;
    overflow: hidden;
}
.deal-banner .tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: 0.85;
    font-weight: 700;
}
.deal-banner .ttl {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--paper);
}
.deal-banner .ttl .em {
    background: var(--ink);
    color: var(--paper);
    padding: 0 10px;
    display: inline-block;
    transform: skewX(-6deg);
    font-style: normal;
}
.deal-banner .meta {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 18px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(246,243,235,0.28);
}
.deal-banner .meta .k {
    font-size: 0.62rem; letter-spacing: 0.14em;
    text-transform: uppercase; opacity: 0.75; margin-bottom: 2px;
}

/* =========================================================
   DAYS STREAK ACID
   ========================================================= */
.streak-acid {
    border: 2px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--acid);
    padding: 26px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-md);
    align-items: end;
    min-height: 160px;
}
.streak-acid .head {
    grid-column: 1 / -1;
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.72;
    font-weight: 700;
    flex-wrap: wrap; gap: 8px;
    margin-bottom: -8px;
}
.streak-acid .head .pill {
    background: var(--ink);
    color: var(--paper);
    padding: 4px 10px;
    opacity: 1;
}
.streak-acid .v {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(4rem, 9vw, 7rem);
    line-height: 0.85;
    letter-spacing: -0.06em;
    color: var(--ink);
}
.streak-acid .v + .l {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    margin-top: 4px;
}
.streak-acid svg {
    width: 100%; height: 80px; display: block;
}
.streak-acid svg rect { fill: var(--ink); }

@media (max-width: 700px) {
    .giant-donut, .streak-card, .striped-card, .permonth-card, .streak-acid {
        grid-template-columns: 1fr !important;
        padding: 20px;
        min-height: 0;
    }
    .striped-card .right { margin: 0; border-left: none; border-top: 2px solid var(--ink); }
    .stat-banner .spark { display: none; }
    .stat-banner .row { grid-template-columns: 1fr 1fr; gap: 12px; }
    .operational-row { grid-template-columns: 1fr 1fr 1fr; }
    .operational-cell { border-bottom: 1px solid rgba(255,255,255,0.16); }
    .vstreak-body { grid-template-columns: 1fr; gap: 12px; }
    .deal-banner .meta { grid-template-columns: 1fr 1fr; }
}
    </style>

/* Focus ring variants (§08·B) — moved from spec blocks: real component options */
.focus-a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.focus-b:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; background: var(--acid); color: var(--ink); }
.focus-c:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }

/* =========================================================
   KANBAN BOARD — columns, draggable cards, live counts
   Structure: [data-kanban] > .kanban-col[data-col] > .kanban-col-body > .kanban-card[draggable]
   Behavior (drag & drop, ‹ › movers, counts) wired in voidsys.behavior.js
   ========================================================= */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); align-items: start; }
.kanban-col { border: var(--border-base); background: var(--surface); box-shadow: var(--shadow-lvl1); display: flex; flex-direction: column; }
.kanban-col.drop-hint { outline: 2px dashed var(--ink); outline-offset: 3px; background: color-mix(in srgb, var(--acid) 26%, var(--surface)); }
.kanban-col-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.kanban-dot { width: 10px; height: 10px; border: 1px solid var(--paper); flex: none; }
.kanban-col-title { flex: 1; }
.kanban-count { background: var(--acid); color: var(--ink); border: 1px solid var(--ink); padding: 1px 8px; font-size: 0.66rem; font-weight: 800; }
.kanban-col-body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-xs); min-height: 140px; flex: 1; }
.kanban-card { background: var(--paper); border: var(--border-base); box-shadow: var(--shadow-lvl1); padding: 12px; cursor: grab; transition: transform var(--dur-instant) var(--ease-snap), box-shadow var(--dur-instant) var(--ease-snap); }
.kanban-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lvl2); }
.kanban-card.dragging { opacity: 0.35; cursor: grabbing; box-shadow: none; border-style: dashed; }
.kanban-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.kanban-tag { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 2px 7px; border: 1.5px solid var(--ink); }
.kanban-pts { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; color: var(--ink-muted); }
.kanban-card-title { font-weight: 700; font-size: 0.92rem; line-height: 1.3; margin-bottom: 12px; }
.kanban-card-foot { display: flex; align-items: center; justify-content: space-between; }
.kanban-who { width: 26px; height: 26px; background: var(--accent); color: var(--paper); border: 2px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 800; font-size: 0.6rem; box-shadow: 2px 2px 0 var(--ink); }
.kanban-move { display: flex; gap: 6px; }
.kanban-move button { width: 26px; height: 26px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-weight: 800; font-size: 0.9rem; line-height: 1; cursor: pointer; transition: background var(--dur-instant) var(--ease-snap), color var(--dur-instant) var(--ease-snap); }
.kanban-move button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.kanban-move button:disabled { opacity: 0.25; cursor: not-allowed; }
@media (max-width: 900px) { .kanban { grid-template-columns: 1fr; } }

/* =========================================================
   AUTH BLOCKS — login / signup / reset compositions
   ========================================================= */
.auth-or { display: flex; align-items: center; gap: var(--space-xs); margin: var(--space-sm) 0; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 800; letter-spacing: 1.5px; color: var(--ink-faint); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--hairline-strong); }
.auth-foot { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--hairline-strong); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; display: flex; justify-content: space-between; gap: var(--space-xs); }
.auth-foot a { color: var(--accent); text-decoration: none; }
.auth-foot a:hover { background: var(--acid); color: var(--ink); }

/* =========================================================
   MOBILE NAV — hamburger + drawer-composed menu
   ========================================================= */
.mnav-burger { width: 46px; height: 46px; border: var(--border-base); background: var(--paper); box-shadow: var(--shadow-lvl1); cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; transition: transform var(--dur-instant) var(--ease-snap), box-shadow var(--dur-instant) var(--ease-snap); }
.mnav-burger:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lvl2); }
.mnav-burger:active { transform: translate(2px, 2px); box-shadow: none; }
.mnav-burger span { display: block; width: 20px; height: 3px; background: var(--ink); }
.mnav-list { display: flex; flex-direction: column; }
.mnav-list a { display: flex; align-items: baseline; gap: 14px; padding: 16px 4px; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; border-bottom: 1px solid var(--hairline-strong); transition: padding var(--dur-fast) var(--ease-snap), color var(--dur-fast) var(--ease-snap); }
.mnav-list a .idx { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 800; color: var(--accent); letter-spacing: 1px; }
.mnav-list a:hover { padding-left: 14px; color: var(--accent); }
.mnav-list a.active { color: var(--accent); }
.mnav-meta { margin-top: auto; padding-top: var(--space-sm); font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; color: var(--ink-muted); text-transform: uppercase; display: flex; justify-content: space-between; }

/* =========================================================
   DRILL-DOWN FILTER (table·S) — parent chips expand a child row
   Single-select parent (ink fill) → child chips (accent fill).
   Chip physics mirror .fpill: 2px ink border, hard offset shadow,
   hover lift −2/−2 against a grown shadow.
   ========================================================= */
.drill { border: var(--border-base); background: var(--paper); box-shadow: var(--shadow-lvl1); padding: 18px 22px; }
.drill-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: 14px; }
.drill-eyebrow { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); }
.drill-meta { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }
.drill-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.drill-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: var(--border-base); background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); transition: transform var(--dur-instant) var(--ease-snap), box-shadow var(--dur-instant) var(--ease-snap), background var(--dur-instant) var(--ease-snap), color var(--dur-instant) var(--ease-snap); }
.drill-chip:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.drill-chip:active { transform: translate(0, 0); box-shadow: 1px 1px 0 var(--ink); }
.drill-chip .n { font-weight: 700; color: var(--ink-muted); }
.drill-chip.active { background: var(--ink); color: var(--paper); box-shadow: 2px 2px 0 var(--accent); }
.drill-chip.active:hover { box-shadow: 4px 4px 0 var(--accent); }
.drill-chip.active .n { color: var(--acid); }
.drill-sub { margin-top: 14px; border-top: 1px solid var(--hairline-strong); padding-top: 13px; }
.drill-sub[hidden] { display: none; }
.drill-sub-label { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.drill-sub .drill-chip.active { background: var(--accent); color: var(--paper); box-shadow: 2px 2px 0 var(--ink); }
.drill-sub .drill-chip.active:hover { box-shadow: 4px 4px 0 var(--ink); }
.drill-sub .drill-chip.active .n { color: var(--paper); opacity: 0.7; }

/* =========================================================
   FILTER TOOLBAR · APPLIED PILLS (table·T) — extends .fpill/.fdrop
   Applied pills fill + swap caret→✕; active-count chip; clear-all.
   ========================================================= */
.fbar { }
.fbar-top { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-xs); }
.fbar-top-right { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; flex-wrap: wrap; }
.fbar-box { border: var(--border-base); background: var(--paper); box-shadow: var(--shadow-lvl1); }
.fbar-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.fbar-row + .fbar-row { border-top: 1px solid var(--hairline-strong); }
.fbar-eyebrow { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-muted); }
.fbar .fpill .lbl { opacity: 0.6; }
.fbar .fpill .val { font-weight: 800; color: var(--accent); }
.fbar .fpill.active .val { color: var(--paper); }
.fbar .fpill .fpill-x { display: none; }
.fbar .fpill.active .caret { display: none; }
.fbar .fpill.active .fpill-x { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; padding: 0; border: none; background: none; color: var(--acid); font-weight: 800; font-size: 0.68rem; cursor: pointer; }
.fbar-count { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; background: var(--accent); color: var(--paper); padding: 3px 8px; }
.fbar-count.zero { background: var(--gray); color: var(--ink-muted); }
.fbar-clear { background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--danger); text-decoration: underline; padding: 0; }
.fbar-panels { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: flex-start; padding: var(--space-xs) 0 0; }
.fopt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 7px 8px; font-family: var(--font-body); font-size: 0.82rem; color: var(--ink); transition: background var(--dur-instant) var(--ease-snap); }
.fopt:hover { background: var(--acid); }
.fopt.sel { background: var(--ink); color: var(--paper); }
.fopt.sel .facet-count { color: var(--acid); }

/* =========================================================
   SECTION HEADER · METRIC TABS (dash·O) — display title + accent
   tag, metric segmented + granularity micro-segment.
   Exclusive toggles reuse .segmented[data-segment] behavior.
   ========================================================= */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.sec-head-title { display: flex; align-items: center; gap: 12px; }
.sec-head-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; margin: 0; }
.sec-tag { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; background: var(--accent); color: var(--paper); padding: 3px 7px; }
.sec-head-controls { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
.sec-gran button { min-width: 34px; }

/* =========================================================
   HERO STATS §19 (dash·R…Y · chart·X) — shared anatomy for the
   31 hero-stat forms: reveal/grow/draw keyframes, hover lift,
   and the .hs-card corners hook (also listed in presets.css).
   Cards themselves are token-driven inline compositions.
   ========================================================= */
@keyframes hs-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: 0.35; } }
@keyframes hs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hs-flip { 0% { transform: rotateX(-88deg); } 100% { transform: rotateX(0deg); } }
@keyframes hs-eq { 0%, 100% { transform: scaleY(0.28); } 50% { transform: scaleY(1); } }
@keyframes hs-reveal { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes hs-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hs-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hs-dial { from { stroke-dasharray: 0 100; } }
.hs-card { position: relative; }
.hs-lift, .hs-lift-lg { transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap); }
.hs-lift:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--ink); }
.hs-lift-lg:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ink); }