/* =========================================
   BATEMO INSIGHTS - MAIN CSS
   Organized CSS architecture with modular imports
   ========================================= */

/* ===== STEP 1: Base System (Foundation) ===== */

/* =========================================
   BASE COLORS
   CSS Custom Properties for colors and themes
   ========================================= */

:root {
    /* ===== BRAND COLORS ===== */
    --brand: #ea5b0c;
    --brand-hover: #ff6d1a;
    --brand-active: #d64f00;
    --brand-grad: linear-gradient(90deg, #ea5b0c, #ff7a2f);

    /* ===== PRIMARY/ACCENT COLORS ===== */
    --primary-color: #ea5b0c;
    --primary-hover: #ff6d1a;
    --primary-active: #d64f00;
    --accent: #ea5b0c;

    /* ===== BACKGROUND LAYERS ===== */
    /* Lighter background scheme - #272727 als dunkelste Farbe */
    --bg-0: #2c2c2c;
    /* page base */
    --bg-1: #323232;
    /* mid stop */
    --bg-2: #383838;
    /* cards, panels */
    --bg-3: #3e3e3e;
    /* hover states */
    --bg-4: #444444;
    /* active states */

    /* ===== TEXT COLORS ===== */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-tertiary: rgba(255, 255, 255, 0.55);
    --text-muted: rgba(255, 255, 255, 0.35);
    --text-disabled: rgba(255, 255, 255, 0.25);

    /* ===== BORDER COLORS ===== */
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-light: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.20);

    /* ===== GLASS MORPHISM ===== */
    --glass-bg: rgba(255, 255, 255, 0.02);
    --glass-bg-hover: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --glass-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.3);

    /* ===== BATEMO "KACHEL" — signature gradient tile ===== */
    /* The app's signature surface (factsheet/KPI cards, Ion panels). Canonical
       source of truth; ion.css --ion-tile-* and the admin dashboard both
       point here. Theme-aware (light overrides below). */
    --kachel-grad: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    --kachel-grad-hover: linear-gradient(135deg, rgba(64, 61, 57, 0.88) 0%, rgba(50, 46, 41, 0.97) 100%);
    --kachel-border: var(--border-light);
    --kachel-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --kachel-radius: 12px;
    --kachel-blur: blur(80px) saturate(250%);
    /* Orange Ion halo for hover/active — non-clipped elements use box-shadow. */
    --kachel-glow: 0 8px 32px rgba(234, 91, 12, 0.20);
    --kachel-glow-strong: 0 10px 40px rgba(234, 91, 12, 0.30);
    --kachel-glow-ring: 0 0 0 1px rgba(234, 91, 12, 0.35);

    /* ===== STATUS COLORS ===== */
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.1);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.1);
    --error: #ef4444;
    --error-light: rgba(239, 68, 68, 0.1);
    --info: #3b82f6;
    --info-light: rgba(59, 130, 246, 0.1);

    /* ===== BATTERY CELL CHEMISTRY COLORS ===== */
    /* Warm-earth-teal family — derived from Batemo Style Guide, intensified for dark mode */
    --nmc: #f0b028;
    --nca: #e04838;
    --lco: #68b0d0;
    --lmo: #9cc840;
    --lfp: #d48440;

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 12px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.3);

    /* ===== SPACING (für konsistente Abstände) ===== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 4px;
    --radius: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.15s ease;
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ===== LIGHT THEME OVERRIDES ===== */

[data-theme="light"] {
    --bg-0: #f5f5f5;
    --bg-1: #ebebeb;
    --bg-2: #e0e0e0;
    --bg-3: #d6d6d6;
    --bg-4: #cccccc;

    --text-primary: rgba(0, 0, 0, 0.90);
    --text-secondary: rgba(0, 0, 0, 0.70);
    --text-tertiary: rgba(0, 0, 0, 0.50);
    --text-muted: rgba(0, 0, 0, 0.35);
    --text-disabled: rgba(0, 0, 0, 0.25);

    --border-subtle: rgba(0, 0, 0, 0.04);
    --border-light: rgba(0, 0, 0, 0.08);
    --border-medium: rgba(0, 0, 0, 0.12);
    --border-strong: rgba(0, 0, 0, 0.20);

    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-bg-hover: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --glass-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* Kachel — light glass variant (grad + shadow tuned for light; glow stays orange) */
    --kachel-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(245, 245, 245, 0.95) 100%);
    --kachel-grad-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 248, 248, 0.98) 100%);
    --kachel-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ===== UTILITY CLASSES ===== */

.bg-glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.bg-glass:hover {
    background: var(--glass-bg-hover);
}

.text-brand {
    color: var(--brand);
}

.text-primary-color {
    color: var(--primary-color);
}

.text-success {
    color: var(--success);
}

.text-warning {
    color: var(--warning);
}

.text-error {
    color: var(--error);
}

.bg-success {
    background-color: var(--success-light);
    color: var(--success);
}

.bg-warning {
    background-color: var(--warning-light);
    color: var(--warning);
}

.bg-error {
    background-color: var(--error-light);
    color: var(--error);
}

/* =========================================
   BASE TYPOGRAPHY
   Font faces, variables, and text styles
   ========================================= */

/* ===== FONT FACES ===== */

@font-face {
    font-family: 'Big John';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/big_john.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Big John';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/big_john.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Big John';
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/big_john.ttf') format('truetype');
    font-display: swap;
}

/* ===== GLOBAL FONT RESET ===== */

* {
    font-weight: 400;
}

body,
input,
button,
select,
textarea {
    font-family: var(--font-ui);
}

/* ===== CSS CUSTOM PROPERTIES ===== */

:root {
    /* Typography - Big John nur für Zahlen/Werte */
    --font-display: 'Big John', sans-serif;
    /* Nur für Zahlen/Werte */
    --font-body: 'Roboto', sans-serif;
    /* Alle Texte, Labels, Überschriften */
    --font-ui: 'Roboto', sans-serif;
    /* Buttons, Controls */

    /* Font Sizes */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 24px;
    --text-3xl: 32px;

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

}

/* ===== TEXT UTILITY CLASSES ===== */

.text-display {
    font-family: var(--font-display);
    margin-bottom: -0.25em;
}

.text-body {
    font-family: var(--font-body);
}

.text-ui {
    font-family: var(--font-ui);
}

/* ===== HEADING STYLES ===== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    padding: 0;
}

h1 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
}

h2 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
}

h3 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
}

h4 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
}

h5,
h6 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
}

/* ===== PARAGRAPH STYLES ===== */

p {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 12px 0;
}

p:last-child {
    margin-bottom: 0;
}

/* ===== TEXT COLOR VARIANTS ===== */

.text-primary {
    color: rgba(255, 255, 255, 0.9);
}

.text-secondary {
    color: rgba(255, 255, 255, 0.7);
}

.text-tertiary {
    color: rgba(255, 255, 255, 0.5);
}

.text-muted {
    color: rgba(255, 255, 255, 0.4);
}

/* ===== TEXT SIZE VARIANTS ===== */

.text-xs {
    font-size: var(--text-xs);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-base {
    font-size: var(--text-base);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

/* ===== TEXT TRANSFORM ===== */

.uppercase {
    text-transform: uppercase;

}

.capitalize {
    text-transform: capitalize;
}

/* ===== EMPHASIS ===== */

strong,
b {
    color: rgba(255, 255, 255, 0.9);
    font-weight: var(--font-semibold);
}

em,
i {
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
}

/* ===== CODE & MONOSPACE ===== */

code,
pre {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.9);
}

pre {
    padding: 12px;
    overflow-x: auto;
}

/* =========================================
   BASE LAYOUT
   Grid, Flexbox, Container, and spacing utilities
   ========================================= */

/* ===== GLOBAL BOX MODEL ===== */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100vh;
}

body {
    margin: 0;
    padding: 0;
}

/* ===== CONTAINER SYSTEM ===== */

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-lg, 16px);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--space-lg, 16px);
}

/* ===== GRID SYSTEM ===== */

.grid {
    display: grid;
    gap: var(--space-md, 12px);
}

.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Auto-fit responsive grid */

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

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

/* Gap utilities */

.gap-xs {
    gap: var(--space-xs, 4px);
}

.gap-sm {
    gap: var(--space-sm, 8px);
}

.gap-md {
    gap: var(--space-md, 12px);
}

.gap-lg {
    gap: var(--space-lg, 16px);
}

.gap-xl {
    gap: var(--space-xl, 20px);
}

/* ===== FLEXBOX SYSTEM ===== */

.flex {
    display: flex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

/* Justify content */

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Align items */

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

/* Flex grow/shrink */

.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-none {
    flex: none;
}

/* ===== SPACING UTILITIES ===== */

/* Margin */

.m-0 {
    margin: 0;
}

.m-xs {
    margin: var(--space-xs, 4px);
}

.m-sm {
    margin: var(--space-sm, 8px);
}

.m-md {
    margin: var(--space-md, 12px);
}

.m-lg {
    margin: var(--space-lg, 16px);
}

.m-xl {
    margin: var(--space-xl, 20px);
}

/* Margin Top */

.mt-0 {
    margin-top: 0;
}

.mt-xs {
    margin-top: var(--space-xs, 4px);
}

.mt-sm {
    margin-top: var(--space-sm, 8px);
}

.mt-md {
    margin-top: var(--space-md, 12px);
}

.mt-lg {
    margin-top: var(--space-lg, 16px);
}

.mt-xl {
    margin-top: var(--space-xl, 20px);
}

/* Margin Bottom */

.mb-0 {
    margin-bottom: 0;
}

.mb-xs {
    margin-bottom: var(--space-xs, 4px);
}

.mb-sm {
    margin-bottom: var(--space-sm, 8px);
}

.mb-md {
    margin-bottom: var(--space-md, 12px);
}

.mb-lg {
    margin-bottom: var(--space-lg, 16px);
}

.mb-xl {
    margin-bottom: var(--space-xl, 20px);
}

/* Padding */

.p-0 {
    padding: 0;
}

.p-xs {
    padding: var(--space-xs, 4px);
}

.p-sm {
    padding: var(--space-sm, 8px);
}

.p-md {
    padding: var(--space-md, 12px);
}

.p-lg {
    padding: var(--space-lg, 16px);
}

.p-xl {
    padding: var(--space-xl, 20px);
}

/* Padding Top */

.pt-0 {
    padding-top: 0;
}

.pt-xs {
    padding-top: var(--space-xs, 4px);
}

.pt-sm {
    padding-top: var(--space-sm, 8px);
}

.pt-md {
    padding-top: var(--space-md, 12px);
}

.pt-lg {
    padding-top: var(--space-lg, 16px);
}

.pt-xl {
    padding-top: var(--space-xl, 20px);
}

/* Padding Bottom */

.pb-0 {
    padding-bottom: 0;
}

.pb-xs {
    padding-bottom: var(--space-xs, 4px);
}

.pb-sm {
    padding-bottom: var(--space-sm, 8px);
}

.pb-md {
    padding-bottom: var(--space-md, 12px);
}

.pb-lg {
    padding-bottom: var(--space-lg, 16px);
}

.pb-xl {
    padding-bottom: var(--space-xl, 20px);
}

/* ===== DISPLAY UTILITIES ===== */

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.hidden {
    display: none;
}

/* ===== POSITION UTILITIES ===== */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

/* ===== WIDTH/HEIGHT UTILITIES ===== */

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.w-auto {
    width: auto;
}

.h-auto {
    height: auto;
}

/* ===== OVERFLOW UTILITIES ===== */

.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-scroll {
    overflow: scroll;
}

/* ===== FACT SHEET CARDS GRID ===== */

.fact-sheet-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg, 16px);
    margin-top: var(--space-lg, 16px);
}

/* 2-column layout for larger screens */

@media (min-width: 768px) {
    .fact-sheet-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3-column layout for very large screens */

@media (min-width: 1200px) {
    .fact-sheet-cards.three-col {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== RESPONSIVE UTILITIES ===== */

@media (max-width: 767px) {
    .hide-mobile {
        display: none;
    }
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none;
    }
}

/* =========================================
   BASE CARDS & SPEC ROWS
   Shared card and specification row patterns
   ========================================= */

/* ===== FACT CARDS (Flip Cards) ===== */

/* Minimal base pattern - Section-CSS überschreibt */

.fact-card {
    position: relative;
}

/* Flip Card System */

.flipcard {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.flipcard-inner {
    position: relative;
    width: 100%;
    height: auto;
    /* Height determined by front side */
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flipcard.flipped .flipcard-inner {
    transform: rotateY(180deg);
}

.flipcard-front,
.flipcard-back {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.flipcard-back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transform: rotateY(180deg);
    overflow-y: auto;
    /* Allow scrolling if back content is longer than front */
}

/* Scrollbar styling for flipcard back */

.flipcard-back::-webkit-scrollbar {
    width: 6px;
}

.flipcard-back::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.flipcard-back::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.3);
    border-radius: 3px;
}

.flipcard-back::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.5);
}

.flip-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.flip-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.flip-content {
    padding: 16px 0;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.flip-content p {
    margin-bottom: 12px;
}

.flip-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.flip-content li {
    padding: 6px 0;
    padding-left: 16px;
    position: relative;
}

.flip-content li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--primary-color, #0d7c99);
}

.flip-content strong {
    color: rgba(255, 255, 255, 0.9);
}

/* ===== SPEC ROWS (Specification Rows) ===== */

/* Base pattern - Section-CSS überschreibt diese Styles */

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Spec List Container */

.spec-list,
.spec-list-minimal {
    display: flex;
    flex-direction: column;
}

/* ===== LARGE VALUE CARDS (Chemistry Style) ===== */

.value-card-main,
.chem-value-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 19px 24px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    transition: all 0.2s ease;
}

.value-card-main:hover,
.chem-value-main:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ===== CARD TITLES ===== */

.card-title,
.column-title {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
    text-transform: none;

}

/* ===== SPEC CATEGORIES ===== */

.spec-category {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;

    font-weight: 600;
    margin-bottom: 8px;
}

/* ===== STEP 2: Theme System ===== */

/* Theme System - Light & Dark Mode */

/* ================================
   DARK THEME (Default) - Liquid Glass mit #272727 als dunkelste Farbe
================================= */

:root,
[data-theme="dark"] {
  /* Background - #272727 als dunkelste Farbe */
  --bg-0: #2c2c2c;
  --bg-1: #323232;
  --bg-2: #2f2f2f;

  /* Text */
  --ink: #f0f1f3;
  --muted: #b5bac0;

  /* Cards & Glass - Deutlicher Glassmorphism */
  --card: #2f2f2f;
  --card-glass: rgba(55, 55, 55, 0.8);
  --card-border: rgba(234, 91, 12, 0.25);
  --card-border-strong: rgba(234, 91, 12, 0.4);

  /* UI Elements */
  --chip: #383838;
  --chip-border: #454545;
  --line: #404040;

  /* Shadows - Stärker für Tiefe */
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-strong: 0 8px 40px rgba(0, 0, 0, 0.9), 0 0 50px rgba(234, 91, 12, 0.3);
  --inset: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Backdrop - Sehr starker Blur + Saturation für Liquid Glass */
  --blur: blur(80px) saturate(250%);

  /* Noise */
  --noise-opacity: 0.07;
}

/* ================================
   LIGHT THEME
================================= */

[data-theme="light"] {
  /* Background - Much brighter whites */
  --bg-0: #ffffff;
  --bg-1: #fafafa;
  --bg-2: #f5f5f5;

  /* Text - Higher contrast for readability */
  --ink: #1a1a1a;
  --muted: #666666;

  /* Cards & Glass - Bright with subtle shadows */
  --card: #ffffff;
  --card-glass: rgba(255, 255, 255, 0.98);
  --card-border: rgba(234, 91, 12, 0.15);
  --card-border-strong: rgba(234, 91, 12, 0.25);

  /* UI Elements - Lighter grays with good contrast */
  --chip: #f5f5f5;
  --chip-border: #e0e0e0;
  --line: #e8e8e8;

  /* Shadows - Softer, lighter shadows */
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-strong: 0 4px 24px rgba(0, 0, 0, 0.1), 0 0 30px rgba(234, 91, 12, 0.06);
  --inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* Backdrop */
  --blur: blur(80px) saturate(250%);

  /* Noise */
  --noise-opacity: 0.012;

  /* Plot backgrounds - Light theme specific */
  --plot-bg: #ffffff;
  --plot-grid: #f0f0f0;
  --plot-text: #1a1a1a;
}

/* Background gradient adjustments */

[data-theme="light"] body {
  background:
    radial-gradient(1000px 800px at 50% -20%, rgba(234, 91, 12, 0.03), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fefefe 50%, #fcfcfc 100%);
  background-attachment: fixed;
}

/* ================================
   SETTINGS DIALOG
================================= */

.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(80px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

.settings-dialog {
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  background: linear-gradient(135deg, var(--card-glass) 0%, var(--card) 100%);
  backdrop-filter: var(--blur);
  border: 1px solid var(--card-border-strong);
  border-radius: 24px;
  box-shadow: var(--shadow-strong);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid var(--line);
}

.settings-title {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.settings-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-close:hover {
  background: var(--chip);
  border-color: var(--brand);
  color: var(--brand);
  transform: scale(1.05);
}

/* Category Navigation */

.settings-categories {
  display: flex;
  gap: 12px;
  padding: 0 32px 20px 32px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.category-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--font-weight-normal);
}

.category-btn:hover {
  color: var(--ink);
  background: var(--chip);
}

.category-btn.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: transparent;
}

.category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.category-icon svg {
  stroke: currentColor;
}

.category-label {
  font-size: 13px;
}

/* Content */

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
}

.settings-section {
  margin-bottom: 40px;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section-title {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--brand);
  text-transform: uppercase;
  margin: 0 0 8px 0;
  font-weight: var(--font-weight-bold);
}

.settings-section-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 20px 0;
}

/* Options Grid */

.option-group {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.theme-option,
.data-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--chip);
  border: 1px solid var(--chip-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: left;
  position: relative;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
}

.theme-option:hover,
.data-option:hover {
  background: var(--card);
  border-color: var(--brand);
  transform: translateX(4px);
}

.theme-option.active,
.data-option.active {
  background: var(--bg-tile-gradient-hover);
  border-color: var(--brand);
  box-shadow: var(--shadow-tile-hover);
}

.option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: currentColor;
}

.option-icon svg {
  stroke: currentColor;
}

.option-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.option-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.option-check {
  font-size: 16px;
  color: var(--brand);
  margin-left: auto;
}

.option-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 0 0;
  padding: 0;
}

/* Settings options - DEPRECATED: Using settings-dialog.css instead */

/* Keeping only for backwards compatibility with old dialogs */

/* Setting Items (Account & Advanced) */

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  font-weight: var(--font-weight-normal);
  flex: 1;
}

.setting-value {
  display: flex;
  align-items: center;
  gap: 12px;
}

.setting-value-text {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  color: var(--muted);
}

.setting-input {
  padding: 8px 12px;
  background: var(--chip);
  border: 1px solid var(--chip-border);
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-body);
  transition: all 0.2s ease;
}

.setting-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.setting-select {
  padding: 8px 12px;
  background: var(--chip);
  border: 1px solid var(--chip-border);
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.2s ease;
}

.setting-select:hover {
  border-color: var(--brand);
}

.setting-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.setting-action-btn {
  padding: 8px 16px;
  background: var(--chip);
  border: 1px solid var(--chip-border);
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all 0.2s ease;
}

.setting-action-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.setting-button {
  padding: 10px 20px;
  background: var(--chip);
  border: 1px solid var(--chip-border);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all 0.2s ease;
}

.setting-button:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateY(-1px);
}

.setting-button.danger {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.setting-button.danger:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}

/* Setting Toggle (Switch) */

.setting-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--chip);
  border: 1px solid var(--chip-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.setting-toggle:hover {
  border-color: var(--brand);
}

.setting-toggle.active {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.3) 0%, rgba(234, 91, 12, 0.2) 100%);
  border-color: var(--brand);
}

.setting-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--muted);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.setting-toggle.active .setting-toggle-thumb {
  left: 22px;
  background: var(--brand);
}

/* Hint Text */

.settings-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-hint kbd {
  display: inline-block;
  padding: 4px 8px;
  background: var(--chip);
  border: 1px solid var(--chip-border);
  border-radius: 4px;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  color: var(--brand);
}

/* Footer */

.settings-footer {
  padding: 20px 32px;
  border-top: 1px solid var(--line);
  background: var(--chip);
}

.settings-footer-text {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin: 0;
}

/* ================================
   SETTINGS BUTTON (Site Header)
================================= */

.settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.settings-btn:hover {
  background: rgba(234, 91, 12, 0.1);
  border-color: rgba(234, 91, 12, 0.3);
  color: var(--brand);
  transform: rotate(45deg);
}

.settings-btn:active {
  transform: rotate(45deg) scale(0.95);
}

/* Light mode adjustments */

[data-theme="light"] .settings-btn {
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .settings-btn:hover {
  background: rgba(234, 91, 12, 0.08);
}

/* ===== STEP 3: Section Styles ===== */

/* ========================================
   FACT SHEET V2 - 2-SECTION LAYOUT
   Section 1: Key Specifications (4-col)
   Section 2: Performance Characteristics (3-col)
   ======================================== */

.section-fact-sheet-v2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
}

/* ========================================
   SECTION 1: KEY SPECIFICATIONS (3-col)
   ======================================== */

.key-specs-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.key-spec-column-stacked {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.key-spec-card {
    /* Container für 3D-Flip - kein eigener Hintergrund */
    position: relative;
    perspective: 1000px;
    /* Entfernt: Hintergrund ist jetzt auf flipcard-front/back */
}

/* Quality card takes remaining space to align with mechanical */

.key-spec-card:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Stretch inner elements of quality card to fill height */

.key-spec-card:last-child .flipcard-inner,
.key-spec-card:last-child .flipcard-front {
    flex: 1;
}

.spec-list-horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.spec-list-horizontal .spec-row {
    grid-column: span 1;
}

.key-spec-column {
    /* Container für 3D-Flip - kein eigener Hintergrund */
    position: relative;
    perspective: 1000px;
    height: 100%;
    /* Entfernt: Hintergrund ist jetzt auf flipcard-front/back */
}

/* Ensure flipcard fills parent height */

.key-spec-column.flipcard {
    height: 100%;
}

.key-spec-column .flipcard-inner {
    height: 100%;
}

.key-spec-column .flipcard-front {
    height: 100%;
    box-sizing: border-box;
}

/* Flip Card Functionality */

.flipcard {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.flipcard-inner {
    position: relative;
    width: 100%;
    min-height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    /* Inherit parent height for full card coverage */
    transform-origin: center center;
}

.flipcard.flipped .flipcard-inner {
    transform: rotateY(180deg);
}

.flipcard-front,
.flipcard-back {
    width: 100%;
    min-height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    box-sizing: border-box;
    transform-style: preserve-3d;
    will-change: transform;
}

.flipcard-front {
    /* Front side defines the card height */
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
    transform: rotateY(0deg);
    padding: 16px;
    /* Card styling - macht die ganze Karte zum 3D-Objekt */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.flipcard-back {
    /* Back side is absolutely positioned, fills full card height */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100%;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    z-index: 1;
    /* Allow scrolling if back has more content */
    padding: 12px 14px;
    /* Card styling - Rückseite der Karte */
    background: linear-gradient(135deg, rgba(45, 42, 38, 0.95) 0%, rgba(55, 53, 50, 0.8) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.flip-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(234, 91, 12, 0.2);
    border: 1px solid var(--brand);
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}

.flip-btn:hover {
    background: var(--brand);
    color: white;
    transform: scale(1.1);
}

/* Close button on back side */

.flip-btn-back {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

.flip-content {
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    padding: 0;
}

.flip-content p {
    margin: 0 0 8px 0;
}

.flip-content p:last-child {
    margin-bottom: 0;
}

/* Section headers in flip content */

.flip-content p[style*="font-weight: 600"],
.flip-content p[style*="font-weight:600"] {
    color: var(--brand);
    margin-top: 10px;
    margin-bottom: 4px;
    font-size: 12px;
}

.flip-content ul {
    margin: 0 0 8px 0;
    padding-left: 16px;
    list-style-type: none !important;
    list-style: none !important;
}

.flip-content li {
    margin-bottom: 4px;
    position: relative;
    padding-left: 0;
    list-style: none !important;
}

.flip-content li::before {
    content: "•";
    color: var(--brand);
    font-weight: bold;
    position: absolute;
    left: -12px;
}

.flip-content li::marker {
    content: none;
    display: none;
}

.flip-content strong {
    color: var(--brand);
}

.color-legend {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    line-height: 1.4;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Combined Column for Chemical + Quality */

.stacked-columns {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sub-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.column-title {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.column-title-secondary {
    margin-top: 8px;
    font-size: 10px;
    opacity: 0.9;
}

.column-title svg {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(234, 91, 12, 0.3), transparent);
    margin: 16px 0;
}

/* KPI Column */

.radar-container-compact {
    width: 100%;
    height: 250px;
    margin-bottom: 20px;
}

.score-badges-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
}

.score-badge-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 19px 24px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.score-badge-inline svg {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(234, 91, 12, 0.4));
    flex-shrink: 0;
}

.score-value-unit {
    display: flex;
    flex-direction: column;
}

.score-badge-inline .score-value {
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    line-height: 1;
}

.score-badge-inline .score-unit {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    line-height: 1;
}

.score-badge-inline .score-value-inline {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
}

.score-badge-inline .score-unit-inline {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    margin-left: 2px;
    font-family: 'Roboto', sans-serif;
}

/* Quality color coding for badges - Radar-based colors */

.score-badge-inline.badge-energy {
    border-color: rgba(234, 91, 12, 0.3);
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.2), 0 2px 12px rgba(0, 0, 0, 0.3);
}

.score-badge-inline.badge-energy svg {
    stroke: #ea5b0c;
    filter: drop-shadow(0 0 8px rgba(234, 91, 12, 0.6));
}

.score-badge-inline.badge-energy .score-value-inline {
    color: #ea5b0c;
}

.score-badge-inline.badge-power {
    border-color: rgba(13, 124, 153, 0.3);
    box-shadow: 0 0 20px rgba(13, 124, 153, 0.2), 0 2px 12px rgba(0, 0, 0, 0.3);
}

.score-badge-inline.badge-power svg {
    stroke: #0d7c99;
    filter: drop-shadow(0 0 8px rgba(13, 124, 153, 0.6));
}

.score-badge-inline.badge-power .score-value-inline {
    color: #0d7c99;
}

.score-badge-inline.badge-safety {
    border-color: rgba(168, 168, 168, 0.3);
    box-shadow: 0 0 20px rgba(168, 168, 168, 0.2), 0 2px 12px rgba(0, 0, 0, 0.3);
}

.score-badge-inline.badge-safety svg {
    stroke: #a8a8a8;
    filter: drop-shadow(0 0 8px rgba(168, 168, 168, 0.6));
}

.score-badge-inline.badge-safety .score-value-inline {
    color: #a8a8a8;
}

.score-badge-inline.badge-lifetime {
    border-color: rgba(74, 74, 74, 0.3);
    box-shadow: 0 0 20px rgba(74, 74, 74, 0.2), 0 2px 12px rgba(0, 0, 0, 0.3);
}

.score-badge-inline.badge-lifetime svg {
    stroke: #4a4a4a;
    filter: drop-shadow(0 0 8px rgba(74, 74, 74, 0.6));
}

.score-badge-inline.badge-lifetime .score-value-inline {
    color: #4a4a4a;
}

.score-badge-inline.quality-average .score-value {
    color: #ffc107;
}

.score-badge-inline.quality-poor {
    border-color: rgba(244, 67, 54, 0.3);
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.2), 0 2px 12px rgba(0, 0, 0, 0.3);
}

.score-badge-inline.quality-poor svg {
    stroke: #f44336;
    filter: drop-shadow(0 0 8px rgba(244, 67, 54, 0.6));
}

.score-badge-inline.quality-poor .score-value {
    color: #f44336;
}

/* Mechanical Column - 3D Cell Schematic */

.cell-3d-schematic {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 12px;
}

.cell-3d-schematic svg {
    max-width: 90%;
    max-height: 90%;
}

/* Chemical Column - Chemistry Diagram */

/* Chemistry diagram styles now in components/chemistry-diagram.css */

/* Quality Content in Column */

.quality-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
}

.quality-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}

.quality-badges .score-badge-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    border: none;
    gap: 12px;
}

.quality-badges .score-circle-mini {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.quality-badges .score-info-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    gap: 8px;
}

.quality-badges .score-label-mini {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.quality-badges .score-value-mini {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.batch-variation-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.batch-plot-svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100px;
}

.batch-variation-empty {
    padding: 30px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    font-size: 11px;
}

.batch-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.batch-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.batch-stat .stat-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.batch-stat .stat-value {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--brand);
}

.batch-variation-empty {
    padding: 40px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    font-size: 12px;
}

.quality-metrics {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.quality-metric-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: rgba(234, 91, 12, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(234, 91, 12, 0.1);
}

.metric-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.metric-header .metric-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

.metric-header svg {
    filter: drop-shadow(0 0 4px rgba(234, 91, 12, 0.5));
    stroke: var(--brand);
}

.metric-header .metric-value {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--brand);
}

.metric-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.bar-progress {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    position: relative;
    background: linear-gradient(90deg, rgba(234, 91, 12, 0.5), var(--brand));
    box-shadow: 0 0 12px rgba(234, 91, 12, 0.6);
}

.quality-rating-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(234, 91, 12, 0.03);
    border-radius: 6px;
    border: 1px solid rgba(234, 91, 12, 0.1);
    margin-top: 8px;
}

.rating-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.quality-stars {
    display: flex;
    gap: 4px;
}

.quality-stars svg {
    filter: drop-shadow(0 0 3px rgba(234, 91, 12, 0.3));
}

/* Spec List */

.spec-list-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spec-list-minimal {
    gap: 8px;
    display: flex;
    flex-direction: column;
}

.spec-list-minimal .spec-row {
    padding: 8px 12px;
    font-size: 12px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.spec-row .spec-label {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: none !important;
    /* Override any uppercase */
}

.spec-row .spec-value {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0 !important;
    /* Remove any margin */
    display: flex;
    align-items: baseline;
    gap: 3px;
}

/* Value number in Big John */

.spec-row .spec-value .value-num {
    font-family: 'Big John', sans-serif;
}

/* Value unit in Roboto */

.spec-row .spec-value .value-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}

/* Legacy support for old structure */

.spec-row span:not(.spec-label):not(.spec-value) {
    color: rgba(255, 255, 255, 0.7);
}

.spec-row strong {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

/* Spec Groups for Electrical */

.spec-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border-left: 3px solid rgba(234, 91, 12, 0.5);
}

.spec-group-label {
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
    text-transform: uppercase;

}

.spec-group .spec-row {
    background: transparent;
    padding: 4px 8px;
}

/* ========================================
   SECTION 2: PERFORMANCE (1fr 3fr layout)
   ======================================== */

.performance-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 20px;
    align-items: start;
}

.performance-left-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.performance-column {
    /* Container für 3D-Flip - kein eigener Hintergrund */
    position: relative;
    perspective: 1000px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

/* Add padding and card styling to flipcard content in performance columns */

.performance-column .flipcard-front,
.performance-column .flipcard-back {
    padding: 16px;
    /* Card styling wird von der generellen flipcard-front/back übernommen */
}

/* Auto-height for electrical and thermal flip cards based on content */

.electrical-column .flipcard-inner,
.thermal-column .flipcard-inner {
    height: auto;
}

/* Spec List for Performance (consistent with Key Specs) */

.spec-list-performance {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spec-row-perf {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border-left: 3px solid var(--brand);
}

.spec-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;

}

.spec-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spec-values-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spec-value-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.value-sublabel {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    font-weight: 600;
    min-width: 40px;
}

.spec-value-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 80px;
}

.value-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.spec-value-item strong {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

/* Plots Column */

.plots-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
}

.plot-wrapper {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 10px;
    flex: 1;
    min-height: 328px;
    height: auto;
}

.plot-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 12px 0;
}

/* Responsive */

@media (max-width: 1900px) {
    .key-specs-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .performance-grid {
        grid-template-columns: 1fr 2fr;
    }
}

@media (max-width: 1400px) {
    .key-specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .performance-grid {
        grid-template-columns: 1fr;
    }

    .spec-values {
        flex-direction: row;
    }
}

@media (max-width: 1024px) {
    .key-specs-grid {
        grid-template-columns: 1fr;
    }

    .score-badges-compact {
        grid-template-columns: repeat(4, 1fr);
    }

    .stacked-columns {
        flex-direction: row;
        gap: 20px;
    }

    .stacked-columns>* {
        flex: 1;
    }
}

/* ========================================
   MECHANICAL DRAWING CLICK INDICATOR
   ======================================== */

.mechanical-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.5rem;
    align-items: stretch;
}

.mechanical-image-wrapper {
    grid-column: 1 / 2;
    aspect-ratio: 3/2;
}

.mechanical-content-wrapper .spec-list-compact {
    grid-column: 2 / 3;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mechanical-content-wrapper .spec-row {
    padding: 0.5rem 1rem;
    border-bottom: none;
}

.mechanical-content-wrapper .spec-row:last-child {
    border-bottom: none;
}

/* Chemical Section - Clean Key-Specs Style */

.chemical-section-new {
    padding: 0;
    height: 100%;
    overflow-y: auto;
}

/* ===== SECTION HEADER ===== */

.chemical-section-new .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(234, 91, 12, 0.3);
}

.chemical-section-new .section-title {
    font-family: 'Big John', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #ea5b0c;
    margin: 0;
    text-transform: uppercase;

}

/* ===== CARD GRID ===== */

.chemical-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* ===== FLIP CARDS (from fact-sheet-v2.css) ===== */

.chemical-section-new .key-spec-card {
    background: transparent;
    border: none;
    border-radius: 12px;
    box-shadow: none;
    position: relative;
    perspective: 1000px;
    transition: transform 0.2s ease;
}

.chemical-section-new .key-spec-card:hover {
    transform: translateY(-2px);
}

/* Flip Button */

.chemical-section-new .flip-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    color: #ea5b0c;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
}

.chemical-section-new .flip-btn:hover {
    background: rgba(234, 91, 12, 0.25);
    border-color: #ea5b0c;
    transform: scale(1.1);
}

.chemical-section-new .flipcard {
    transform-style: preserve-3d;
}

.chemical-section-new .flipcard-inner {
    position: relative;
    width: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    height: auto;
    /* Auto-height based on front content */
    transform-origin: center center;
}

.chemical-section-new .flipcard.flipped .flipcard-inner {
    transform: rotateY(180deg);
}

.chemical-section-new .flipcard-front,
.chemical-section-new .flipcard-back {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform-style: preserve-3d;
    will-change: transform;
    padding: 16px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chemical-section-new .flipcard-front:hover,
.chemical-section-new .flipcard-back:hover {
    border-color: rgba(234, 91, 12, 0.5);
}

.chemical-section-new .flipcard-front {
    position: relative;
    z-index: 2;
    transform: rotateY(0deg);
}

.chemical-section-new .flipcard-back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transform: rotateY(180deg);
    z-index: 1;
    overflow-y: auto;
    /* Scrolling if content longer than front */
}

/* ===== CARD TITLE (White with Subtle Underline) ===== */

.chemical-section-new .column-title {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== MAIN VALUE (Button-Style like Dimension Stepper) ===== */

.chemical-section-new .chem-value-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 19px 24px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

/* ===== FRONT CARD CONTENT ===== */

.chemical-section-new .spec-category {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;

    font-weight: 600;
}

.chemical-section-new .spec-main-value {
    margin-bottom: 12px;
}

.chemical-section-new .spec-value-large {
    font-family: 'Big John', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #ea5b0c;
    line-height: 1.2;
}

.chemical-section-new .spec-sublabel {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

.chemical-section-new .spec-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    margin-top: 12px;
    /* Space below column-title */
}

.chemical-section-new .spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.chemical-section-new .spec-label {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    text-transform: none !important;
}

.chemical-section-new .spec-value {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.chemical-section-new .spec-value .value-num {
    font-family: 'Big John', sans-serif;
}

.chemical-section-new .spec-value .value-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}

/* ===== BACK CARD CONTENT ===== */

.chemical-section-new .spec-detail-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.chemical-section-new .spec-detail-content h4 {
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ea5b0c;
    margin: 0 0 8px 0;
}

.chemical-section-new .spec-detail-content p {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.chemical-section-new .spec-detail-content strong {
    color: #fff;
    font-weight: 600;
}

.chemical-section-new .detail-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: rgba(234, 91, 12, 0.1);
    border: 1px solid rgba(234, 91, 12, 0.2);
    border-radius: 8px;
    margin-top: auto;
}

.chemical-section-new .detail-label {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;

}

.chemical-section-new .detail-value {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ea5b0c;
}

/* ===== CHEMISTRY DIAGRAM ===== */

/* Chemistry diagram styles now in components/chemistry-diagram.css */

/* ===== SCROLLBAR ===== */

.chemical-section-new::-webkit-scrollbar {
    width: 8px;
}

.chemical-section-new::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.chemical-section-new::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.5);
    border-radius: 4px;
}

.chemical-section-new::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.8);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .chemical-section-new {
        padding: 16px;
    }

    .chemical-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .chemical-section-new .spec-value-large {
        font-size: 24px;
    }
}

/* ===== FLIP CARDS ===== */

.chemical-card {
    position: relative;
    perspective: 1200px;
    height: 400px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.chemical-card:hover {
    transform: translateY(-4px);
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.chemical-card.flipped .card-inner {
    transform: rotateY(180deg);
}

/* ===== CARD FACES (Front & Back) ===== */

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    padding: 32px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.card-back {
    transform: rotateY(180deg);
}

/* ===== FRONT CARD STYLING ===== */

.card-icon {
    font-size: 48px;
    margin-bottom: 20px;
    text-align: center;
    filter: drop-shadow(0 0 10px rgba(234, 91, 12, 0.3));
}

.card-front h3 {
    font-family: 'Big John', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin: 0 0 20px 0;
}

/* Chemistry Badge */

.chemistry-badge {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(13, 124, 153, 0.15));
    border: 2px solid rgba(234, 91, 12, 0.3);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 20px;
}

.chem-abbr {
    font-family: 'Big John', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #ea5b0c;

    text-shadow: 0 0 20px rgba(234, 91, 12, 0.5);
}

.chem-tech {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #0d7c99;
    font-weight: 600;

}

/* Electrode Grid */

.electrode-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.electrode-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s ease;
}

.electrode-item.cathode {
    border-left: 3px solid #ea5b0c;
}

.electrode-item.anode {
    border-left: 3px solid #0d7c99;
}

.electrode-label {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #999;
    text-transform: uppercase;

    margin-bottom: 8px;
}

.electrode-value {
    font-family: 'Big John', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

/* Construction Grid */

.construction-grid,
.origin-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.construction-row,
.origin-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid rgba(234, 91, 12, 0.3);
}

.cons-label,
.origin-label {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #999;
}

.cons-value,
.origin-value {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

/* Card Footer */

.card-footer {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: rgba(234, 91, 12, 0.8);
    text-align: center;
    padding: 12px;
    background: rgba(234, 91, 12, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(234, 91, 12, 0.2);
}

/* ===== BACK CARD STYLING ===== */

.card-back-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.back-icon {
    font-size: 32px;
}

.card-back h3 {
    font-family: 'Big John', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* IUPAC Content */

.iupac-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.iupac-formula {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ea5b0c;
    line-height: 1.6;
    padding: 16px;
    background: rgba(234, 91, 12, 0.1);
    border: 1px solid rgba(234, 91, 12, 0.2);
    border-radius: 8px;
}

.full-cell-chem {
    padding: 16px;
    background: rgba(13, 124, 153, 0.1);
    border: 1px solid rgba(13, 124, 153, 0.2);
    border-radius: 8px;
}

.chem-label {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #999;
    text-transform: uppercase;

    margin-bottom: 8px;
}

.chem-formula {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0d7c99;
    line-height: 1.6;
}

.chem-description {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}

.chem-description p {
    margin: 0;
}

/* Material Specs */

.material-specs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.spec-section {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.spec-header {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ea5b0c;
    margin-bottom: 12px;
}

.spec-detail {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

.spec-detail:last-child {
    margin-bottom: 0;
}

.spec-detail strong {
    color: #fff;
    font-weight: 600;
}

/* Construction Specs */

.construction-specs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.spec-group {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.spec-title {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #999;
    text-transform: uppercase;

    margin-bottom: 8px;
}

.spec-value {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ea5b0c;
    margin-bottom: 8px;
}

.spec-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* Origin Specs */

.origin-specs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid rgba(234, 91, 12, 0.3);
}

.info-label {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #999;
    text-transform: uppercase;

}

.info-value {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.manufacturer-note {
    margin-top: 12px;
    padding: 16px;
    background: rgba(13, 124, 153, 0.1);
    border: 1px solid rgba(13, 124, 153, 0.2);
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}

/* ===== SCROLLBAR ===== */

.chemical-section-new::-webkit-scrollbar,
.card-front::-webkit-scrollbar,
.card-back::-webkit-scrollbar {
    width: 8px;
}

.chemical-section-new::-webkit-scrollbar-track,
.card-front::-webkit-scrollbar-track,
.card-back::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.chemical-section-new::-webkit-scrollbar-thumb,
.card-front::-webkit-scrollbar-thumb,
.card-back::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.5);
    border-radius: 4px;
}

.chemical-section-new::-webkit-scrollbar-thumb:hover,
.card-front::-webkit-scrollbar-thumb:hover,
.card-back::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.8);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1200px) {
    .chemical-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }

    .chem-abbr {
        font-size: 40px;
    }
}

@media (max-width: 900px) {
    .chemical-section-new {
        padding: 20px;
    }

    .chemical-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .chemical-card {
        height: 380px;
    }

    .card-front,
    .card-back {
        padding: 24px;
    }
}

@media (max-width: 600px) {
    .chemical-header h2 {
        font-size: 24px;
    }

    .card-icon {
        font-size: 36px;
    }

    .chem-abbr {
        font-size: 32px;
    }

    .card-front h3 {
        font-size: 20px;
    }
}

/* Mechanical Section Styling - Fact Sheet Style */

:root {
    --brand: #ea5b0c;
}

.mechanical-section-new {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header - Same as Fact Sheet */

.mechanical-section-new .fact-sheet-header {
    margin-bottom: 2rem;
}

.mechanical-section-new .header-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mechanical-section-new .header-main {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mechanical-section-new .section-title {
    font-family: 'Big John', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;

    color: var(--text-primary);
    margin: 0;
}

.mechanical-section-new .format-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: rgba(234, 91, 12, 0.1);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 4px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;

}

.mechanical-section-new .section-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Visual Section */

.mechanical-visuals {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.visual-card {
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.visual-card.full-width {
    grid-column: 1 / -1;
    min-height: 400px;
    /* Ensure drawing has space */
}

.visual-card .card-title {
    font-family: 'Big John', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;

    color: var(--text-primary);
    margin: 0 0 1rem 0;
    flex-shrink: 0;
}

.drawing-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background-color: #1a1a1a;
    border-radius: 8px;
    padding: 1rem;
    min-height: 400px;
}

.drawing-container img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

.drawing-container svg {
    width: 100%;
    height: auto;
    display: block;
}

/* SVG content wrapper - contains the inline SVG */

.technical-drawing-svg {
    width: 100%;
    height: auto;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Style the actual SVG element inside the container */

/* SVG will scale to fit container while maintaining aspect ratio and stroke widths */

.technical-drawing-svg svg,
.technical-drawing-svg-content {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

/* LibreOffice SVGs already use white strokes on transparent background - no inversion needed */

/* Strokes scale naturally with the viewBox - this is correct behavior */

.technical-drawing-svg svg path,
.technical-drawing-svg svg line,
.technical-drawing-svg svg polyline,
.technical-drawing-svg svg polygon,
.technical-drawing-svg svg rect,
.technical-drawing-svg svg circle,
.technical-drawing-svg svg ellipse {
    /* No vector-effect needed - strokes should scale proportionally with the drawing */
}

/* Drawing placeholder styles */

.drawing-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.drawing-placeholder svg {
    opacity: 0.3;
}

.drawing-placeholder p {
    margin: 0;
    font-size: 0.9rem;
}

/* Loading spinner in drawing container - uses global loading-spinner component */

.drawing-container .loading-spinner {
    min-height: 300px;
}

.drawing-container .loading-spinner--small {
    min-height: 300px;
    padding: 40px;
}

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

.cell-mechanical-drawing {
    width: 100%;
    height: auto;
}

.mechanical-drawing-svg {
    width: 100%;
    height: auto;
}

.photo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 2rem);
}

.photo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--text-tertiary);
}

.photo-placeholder svg {
    opacity: 0.3;
}

.photo-placeholder p {
    margin: 0;
    font-size: 0.9rem;
}

/* Data Cards Grid - Same as Fact Sheet */

.mechanical-data-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.mechanical-data-cards .fact-card {
    background: transparent;
    border: none;
    border-radius: 12px;
    padding: 0;
    transition: all 0.2s ease;
    position: relative;
    perspective: 1000px;
    box-shadow: none;
    min-height: 280px;
    height: 100%;
}

.mechanical-data-cards .fact-card:hover {
    transform: translateY(-2px);
}

/* Flip Card Functionality */

.mechanical-data-cards .flipcard {
    transform-style: preserve-3d;
    height: 100%;
}

.mechanical-data-cards .flipcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    transform-origin: center center;
}

.mechanical-data-cards .flipcard.flipped .flipcard-inner {
    transform: rotateY(180deg);
}

.mechanical-data-cards .flipcard-front,
.mechanical-data-cards .flipcard-back {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transform-style: preserve-3d;
    will-change: transform;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mechanical-data-cards .flipcard-front:hover,
.mechanical-data-cards .flipcard-back:hover {
    border-color: rgba(234, 91, 12, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mechanical-data-cards .flipcard-front {
    position: relative;
    z-index: 2;
    transform: rotateY(0deg);
    padding: 16px;
    height: 100%;
    box-sizing: border-box;
}

.mechanical-data-cards .flipcard-back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    transform: rotateY(180deg);
    padding: 16px;
    box-sizing: border-box;
}

.mechanical-data-cards .flipcard-front {
    /* Front side defines card height */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mechanical-data-cards .flipcard-back {
    /* Back side absolutely positioned, matches front height */
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    /* Scrolling if content longer than front */
}

/* Flip Button */

.mechanical-data-cards .flip-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(234, 91, 12, 0.2);
    border: 1px solid var(--brand);
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}

.mechanical-data-cards .flip-btn:hover {
    background: var(--brand);
    color: white;
    transform: scale(1.1);
}

/* Column Title (replaces card-title for flip cards) */

.mechanical-data-cards .column-title {
    font-family: 'Big John', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Flip Content on Back */

.mechanical-data-cards .flip-content {
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    overflow-y: auto;
    max-height: calc(100% - 50px);
    padding-right: 4px;
}

.mechanical-data-cards .flip-content p {
    margin: 0 0 16px 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.mechanical-data-cards .flip-content ul {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

.mechanical-data-cards .flip-content li {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border-left: 3px solid var(--brand);
    font-size: 11px;
    line-height: 1.6;
}

.mechanical-data-cards .flip-content li:last-child {
    margin-bottom: 0;
}

.mechanical-data-cards .flip-content strong {
    color: var(--brand);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* Spec List Minimal Style (from Fact Sheet) */

.mechanical-data-cards .spec-list-minimal {
    gap: 8px;
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    /* Space below column-title */
}

.mechanical-data-cards .spec-list-minimal .spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mechanical-data-cards .spec-list-minimal .spec-row .spec-label,
.mechanical-data-cards .spec-list-minimal .spec-row span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 400;
    text-transform: none !important;
}

.mechanical-data-cards .spec-list-minimal .spec-row .spec-value,
.mechanical-data-cards .spec-list-minimal .spec-row strong {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;

    display: flex;
    align-items: baseline;
    gap: 3px;
}

.mechanical-data-cards .spec-list-minimal .spec-row .value-num,
.mechanical-data-cards .spec-list-minimal .spec-row strong {
    font-family: 'Big John', sans-serif;
}

.mechanical-data-cards .spec-list-minimal .spec-row .value-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}

.mechanical-data-cards .card-title {
    font-family: 'Big John', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;

    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.mechanical-data-cards .card-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.mechanical-data-cards .card-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Data Rows - DEPRECATED, use spec-list-minimal instead */

.data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.data-row:last-child {
    border-bottom: none;
}

.data-row.highlight {
    background: rgba(234, 91, 12, 0.05);
    padding: 0.75rem;
    border-radius: 4px;
    border-bottom: none;
    margin-top: 0.5rem;
}

.data-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}

.data-value {
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: right;
}

.data-row.highlight .data-value {
    color: var(--primary-color);
}

/* Safety Features - Large Value Style (matching chem-value-main) */

.safety-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.safety-feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    gap: 8px;
}

.safety-feature-card.active {
    border-color: rgba(13, 124, 153, 0.4);
    background: linear-gradient(135deg, rgba(13, 124, 153, 0.15) 0%, rgba(10, 90, 110, 0.2) 100%);
}

.safety-feature-card.inactive {
    opacity: 0.35;
    filter: grayscale(0.5);
}

.safety-feature-card svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.safety-feature-card.active svg {
    stroke: #0d7c99;
}

.safety-feature-card.inactive svg {
    stroke: rgba(255, 255, 255, 0.4);
}

.safety-feature-label {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-align: center;

}

.safety-feature-card.active .safety-feature-label {
    color: #0d7c99;
}

.safety-feature-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    text-transform: uppercase;

}

.safety-badge.inactive .badge-label {
    color: rgba(255, 255, 255, 0.4);
}

.badge-desc {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.2;
    font-family: 'Roboto', sans-serif;
}

/* Responsive */

@media (max-width: 768px) {
    .mechanical-section-new {
        padding: 1rem;
    }

    .mechanical-visuals {
        grid-template-columns: 1fr;
    }

    .mechanical-data-cards {
        grid-template-columns: 1fr;
    }

    .mechanical-section-new .section-title {
        font-size: 1.4rem;
    }

    .safety-badges {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Electrical Section - Progressive 1D→2D→3D Navigation */

.electrical-section-new {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    height: calc(100vh - 160px);
    min-height: 600px;
}

/* ===== SIDE NAVIGATION ===== */

.electrical-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.6) 0%, rgba(45, 42, 38, 0.8) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    padding: 20px;
    height: 100%;
    overflow-y: auto;
}

/* Custom scrollbar for electrical-nav */

.electrical-nav::-webkit-scrollbar {
    width: 8px;
}

.electrical-nav::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.electrical-nav::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.5);
    border-radius: 4px;
    transition: background 0.2s;
}

.electrical-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.8);
}

/* Firefox scrollbar */

.electrical-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(234, 91, 12, 0.5) rgba(0, 0, 0, 0.2);
}

.nav-header {
    margin-bottom: 10px;
}

.nav-header h3 {
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 5px 0;
}

.nav-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #999;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.category-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px;
    min-height: 80px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.category-card:hover {
    border-color: rgba(234, 91, 12, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transform: translateX(4px);
}

.category-card.active {
    background: linear-gradient(135deg, rgba(75, 73, 70, 0.9) 0%, rgba(65, 62, 58, 1) 100%);
    border-color: rgba(234, 91, 12, 0.6);
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.2);
}

.category-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 91, 12, 0.1);
    border-radius: 8px;
    flex-shrink: 0;
}

.category-icon svg {
    width: 20px;
    height: 20px;
    color: #ea5b0c;
    stroke-width: 2;
}

.category-card.active .category-icon {
    background: rgba(234, 91, 12, 0.2);
}

.category-info {
    flex: 1;
}

.category-label {
    font-family: 'Big John', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.category-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #999;
    line-height: 1.3;
}

.category-value {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #ea5b0c;
    line-height: 1.3;
}

.value-unit {
    font-size: 11px;
    font-weight: 400;
    color: #999;
    margin-left: 2px;
    text-transform: none;
    /* Preserve case for units like mΩ */
}

.category-value-na {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #666;
    font-style: italic;
}

/* Multi-value chips display (vertical list with labels) */

.category-values-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.value-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid;
    font-family: 'Roboto', sans-serif;
    transition: all 0.2s ease;
    background: rgba(0, 0, 0, 0.15);
}

.value-chip:hover {
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.value-chip-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.value-chip-value {
    font-size: 13px;
    font-weight: 700;
}

.value-chip-unit {
    font-size: 10px;
    font-weight: 400;
    margin-left: 3px;
    opacity: 0.7;
}

.category-indicator {
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: #ea5b0c;
    border-radius: 2px 0 0 2px;
}

/* Basis Selector in Sidebar */

.sidebar-basis-selector {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.basis-label {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    text-transform: uppercase;

}

.basis-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.basis-btn {
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #999;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.basis-btn:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(234, 91, 12, 0.3);
    color: #ea5b0c;
}

.basis-btn.active {
    background: rgba(234, 91, 12, 0.15);
    border-color: #ea5b0c;
    color: #ea5b0c;
}

.basis-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== MAIN CONTENT AREA ===== */

.electrical-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    overflow: hidden;
}

/* Dimension Stepper */

.dimension-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    padding: 6px 12px;
}

.dimension-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #999;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.dimension-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(234, 91, 12, 0.2);
}

.dimension-btn.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
    border-color: #ea5b0c;
    color: #fff;
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
}

.dimension-btn.disabled,
.dimension-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.dim-icon {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.dimension-btn.active .dim-icon {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px rgba(234, 91, 12, 0.6));
}

.dim-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.dim-label {
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: inherit;
}

.dim-sublabel {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    color: #888;
}

.dimension-btn.active .dim-sublabel {
    color: #ea5b0c;
}

.stepper-line {
    width: 24px;
    height: 2px;
    background: linear-gradient(to right, rgba(234, 91, 12, 0.3), rgba(234, 91, 12, 0.1));
    flex-shrink: 0;
}

/* ===== DIMENSION CONTENT ===== */

.dimension-content {
    flex: 1;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    padding: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dimension-view-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}

/* ===== GUIDE QUESTION ===== */

.guide-question {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: #999;
    text-align: center;
    padding: 12px 20px;
    background: rgba(234, 91, 12, 0.05);
    border-left: 3px solid #ea5b0c;
    border-radius: 6px;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

/* ===== INFO BANNER (Single Cell Sections) ===== */

.section-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    margin: 0 0 20px 0;
    background: linear-gradient(135deg, rgba(13, 124, 153, 0.08) 0%, rgba(13, 124, 153, 0.04) 100%);
    border: 1px solid rgba(13, 124, 153, 0.2);
    border-left: 3px solid #0d7c99;
    border-radius: 8px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.section-info-banner svg {
    flex-shrink: 0;
    color: #0d7c99;
    margin-top: 2px;
}

.section-info-banner .info-banner-content {
    flex: 1;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.section-info-banner .info-banner-content strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

/* ===== ELECTRICAL FLIPCARD ===== */

.electrical-flipcard {
    flex: 1;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.electrical-flipcard .flipcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    transform-origin: center center;
}

.electrical-flipcard.flipped .flipcard-inner {
    transform: rotateY(180deg);
}

.electrical-flipcard-front,
.electrical-flipcard-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    box-sizing: border-box;
    transform-style: preserve-3d;
    will-change: transform;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    padding: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.electrical-flipcard-front {
    transform: rotateY(0deg);
    z-index: 2;
}

.electrical-flipcard-back {
    transform: rotateY(180deg);
    z-index: 1;
    overflow-y: auto;
}

.electrical-flipcard .column-title {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.electrical-flipcard .flip-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(234, 91, 12, 0.2);
    border: 1px solid var(--brand);
    color: var(--brand);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}

.electrical-flipcard .flip-btn:hover {
    background: var(--brand);
    color: white;
    transform: scale(1.1);
}

.electrical-flipcard .flip-btn-back {
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.electrical-flipcard .flip-content {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    padding: 0;
}

.electrical-flipcard .flip-content p {
    margin: 0;
}

.electrical-flipcard .flip-content strong {
    color: var(--brand);
    font-weight: 600;
}

/* ===== 1D VIEW ===== */

.dimension-1d {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 20px;
}

.kpi-large {
    text-align: center;
    padding: 40px;
    background: radial-gradient(circle at center, rgba(234, 91, 12, 0.1), transparent);
    border-radius: 20px;
    border: 2px solid rgba(234, 91, 12, 0.2);
}

.kpi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 15px;
}

/* 4-column layout for experimental conditions */

.kpi-row.kpi-row-4cols {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.kpi-row.kpi-row-4cols .kpi-large {
    padding: 20px 15px;
}

/* Single column for voltage (only one KPI) */

.kpi-row.single-column {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.kpi-row .kpi-large {
    padding: 30px 25px;
}

/* Domain highlighting for dual KPI display with color coding */

.kpi-highlighted {
    border-color: var(--kpi-color, rgba(234, 91, 12, 0.5));
    background: radial-gradient(circle at center, color-mix(in srgb, var(--kpi-color, #ea5b0c) 15%, transparent), transparent);
    transform: scale(1.02);
    transition: all 0.3s ease;
}

.kpi-highlighted .kpi-value {
    color: var(--kpi-color, #ea5b0c);
    text-shadow: 0 0 30px color-mix(in srgb, var(--kpi-color, #ea5b0c) 50%, transparent);
}

.kpi-dimmed {
    opacity: 0.5;
}

/* Multi-Cell 1D View */

.multi-cell-1d-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
    height: 100%;
    align-content: start;
}

.cell-1d-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px;
    border-left-width: 4px;
    border-left-style: solid;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cell-1d-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.cell-1d-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.cell-1d-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cell-1d-name {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-1d-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.kpi-compact {
    text-align: center;
    padding: 16px 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.kpi-compact .kpi-value {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.kpi-compact .kpi-unit {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;

    margin-bottom: 6px;
}

.kpi-compact .kpi-label {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Single KPI takes full width */

.cell-1d-kpis .kpi-compact:only-child {
    grid-column: 1 / -1;
    border-color: rgba(234, 91, 12, 0.1);
    transition: all 0.3s ease;
}

.kpi-dimmed .kpi-value {
    color: #999;
    text-shadow: none;
}

.kpi-value {
    font-family: 'Big John', sans-serif;
    font-size: 72px;
    font-weight: 700;
    color: #ea5b0c;
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 0 0 30px rgba(234, 91, 12, 0.4);
}

.kpi-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    color: #fff;
    margin-bottom: 20px;
}

.kpi-label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #999;
    max-width: 500px;
}

.explore-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 19px 32px;
    background: linear-gradient(135deg, #ea5b0c, #ff7733);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: 'Big John', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(234, 91, 12, 0.3);
}

.explore-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(234, 91, 12, 0.5);
}

.btn-icon {
    font-size: 18px;
}

/* ===== 2D VIEW ===== */

.dimension-2d {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}

.plot-grid-2d {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    min-height: 0;
}

/* Single plot mode for Voltage category */

.plot-grid-2d.single-plot {
    grid-template-columns: 1fr;
}

.plot-grid-2d.single-plot .plot-card:nth-child(2) {
    display: none;
}

/* Bode plots mode for AC Impedance - stacked vertically */

.plot-grid-2d.bode-plots {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}

.plot-grid-2d.bode-plots .plot-card {
    display: block;
}

.plot-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    overflow: hidden;
}

.combine-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 17px 28px;
    background: rgba(234, 91, 12, 0.1);
    border: 1px solid #ea5b0c;
    border-radius: 8px;
    color: #ea5b0c;
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: center;
}

.combine-btn:hover {
    background: rgba(234, 91, 12, 0.2);
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
    transform: scale(1.05);
}

/* ===== 3D VIEW ===== */

.dimension-3d {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}

.plot-3d-container {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    overflow: hidden;
    min-height: 0;
}

.split-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 17px 28px;
    background: rgba(13, 124, 153, 0.1);
    border: 1px solid #0d7c99;
    border-radius: 8px;
    color: #0d7c99;
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: center;
}

.split-btn:hover {
    background: rgba(13, 124, 153, 0.2);
    box-shadow: 0 0 20px rgba(13, 124, 153, 0.3);
    transform: scale(1.05);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1200px) {
    .electrical-section-new {
        grid-template-columns: 240px 1fr;
    }

    .category-card {
        padding: 12px;
        gap: 12px;
    }

    .category-icon {
        width: 36px;
        height: 36px;
        font-size: 24px;
    }

    .dimension-btn {
        padding: 12px 16px;
    }
}

/* ===== KPI GRID & TILE STYLES (for 1D electrical plots) ===== */

.kpi-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 20px 0;
}

.kpi-tile {
    text-align: center;
    padding: 30px 20px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.kpi-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.kpi-tile .kpi-value {
    font-family: 'Big John', sans-serif;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
}

.kpi-tile .kpi-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    color: #999;
    margin-bottom: 15px;
}

.kpi-tile .kpi-label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #cfd2d6;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

@media (max-width: 900px) {
    .electrical-section-new {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .kpi-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .electrical-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 15px;
    }

    .category-list {
        flex-direction: row;
    }

    .category-card {
        min-width: 200px;
    }

    .plot-grid-2d {
        grid-template-columns: 1fr;
    }

    .kpi-grid-4 {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 0;
    }

    .kpi-tile {
        padding: 20px 15px;
    }

    .kpi-tile .kpi-value {
        font-size: 36px;
    }

    .kpi-tile .kpi-unit {
        font-size: 16px;
    }
}

/* Thermal Section - Progressive 1D→2D→3D Navigation */

.thermal-section-new {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    height: calc(100vh - 160px);
    min-height: 600px;
}

/* ===== SIDE NAVIGATION ===== */

.thermal-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.6) 0%, rgba(45, 42, 38, 0.8) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    padding: 20px;
    height: 100%;
    overflow-y: auto;
}

/* Custom scrollbar for thermal-nav */

.thermal-nav::-webkit-scrollbar {
    width: 8px;
}

.thermal-nav::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.thermal-nav::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.5);
    border-radius: 4px;
    transition: background 0.2s;
}

.thermal-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.8);
}

/* Firefox scrollbar */

.thermal-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(234, 91, 12, 0.5) rgba(0, 0, 0, 0.2);
}

/* ===== MAIN CONTENT AREA ===== */

.thermal-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    overflow: hidden;
}

.content-header {
    padding: 0 10px;
}

.content-header h2 {
    font-family: 'Big John', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
}

.content-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #999;
    margin: 0;
}

/* Dimension Stepper - Matches Electrical Section */

.dimension-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    padding: 6px 12px;
}

.dimension-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #999;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.dimension-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(234, 91, 12, 0.2);
}

.dimension-btn.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
    border-color: #ea5b0c;
    color: #fff;
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
}

.dim-icon {
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.dimension-btn:hover .dim-icon {
    transform: scale(1.1);
}

.dimension-btn.active .dim-icon {
    filter: drop-shadow(0 0 8px rgba(234, 91, 12, 0.5));
}

.dim-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.dim-title {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
}

.dim-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.dimension-btn.active .dim-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* Remove old dimension selector from sidebar */

.dimension-selector {
    display: none;
}

/* ===== DIMENSION CONTENT ===== */

.dimension-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Dimension View Container - NO background, matches Electrical */

.dimension-view-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    gap: 20px;
}

/* Control Bar for dimension content (e.g., Loss Type selector) */

.dimension-control-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dimension-control-bar .control-label {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    text-transform: uppercase;

    color: #666;
    font-weight: 500;
}

.dimension-control-bar .control-buttons {
    display: flex;
    gap: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.dimension-control-bar .control-btn {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #999;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;

}

.dimension-control-bar .control-btn:hover {
    color: #cfd2d6;
}

.dimension-control-bar .control-btn.active {
    background: rgba(234, 91, 12, 0.15);
    color: #ea5b0c;
    font-weight: 600;
}

/* ===== THERMAL FLIPCARD ===== */

.thermal-flipcard {
    flex: 1;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.thermal-flipcard .flipcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    transform-origin: center center;
}

.thermal-flipcard.flipped .flipcard-inner {
    transform: rotateY(180deg);
}

.thermal-flipcard-front,
.thermal-flipcard-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    box-sizing: border-box;
    transform-style: preserve-3d;
    will-change: transform;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    padding: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.thermal-flipcard-front {
    transform: rotateY(0deg);
    z-index: 2;
}

.thermal-flipcard-back {
    transform: rotateY(180deg);
    z-index: 1;
    overflow-y: auto;
}

.thermal-flipcard .column-title {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.thermal-flipcard .flip-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(234, 91, 12, 0.2);
    border: 1px solid var(--brand);
    color: var(--brand);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}

.thermal-flipcard .flip-btn:hover {
    background: var(--brand);
    color: white;
    transform: scale(1.1);
}

.thermal-flipcard .flip-btn-back {
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.thermal-flipcard .flip-content {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    padding: 0;
}

.thermal-flipcard .flip-content p {
    margin: 0 0 12px 0;
}

.thermal-flipcard .flip-content p:last-child {
    margin-bottom: 0;
}

.thermal-flipcard .flip-content strong {
    color: var(--brand);
    font-weight: 600;
}

/* 1D View */

.dimension-1d {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 30px;
}

/* 4-tile grid for thermal values (matching Energy/Power sections) */

.kpi-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
}

.kpi-tile {
    text-align: center;
    padding: 30px 20px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.kpi-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.kpi-tile .kpi-value {
    font-family: 'Big John', sans-serif;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
}

.kpi-tile .kpi-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    color: #999;
    margin-bottom: 15px;
}

.kpi-tile .kpi-label {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #cfd2d6;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* KPI Row for side-by-side values (Heat Loss power/energy) */

.kpi-row {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
}

.kpi-large {
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 20px;
    border-radius: 8px;
}

.kpi-row .kpi-large {
    opacity: 0.5;
    transform: scale(0.95);
}

.kpi-row .kpi-large.active {
    opacity: 1;
    transform: scale(1);
    background: rgba(234, 91, 12, 0.1);
}

.kpi-row .kpi-large:hover {
    opacity: 0.8;
}

.kpi-large .kpi-value {
    font-family: 'Big John', sans-serif;
    font-size: 64px;
    font-weight: 700;
    color: #ea5b0c;
    margin-bottom: 10px;
}

.kpi-large .kpi-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    color: #999;
    margin-bottom: 20px;
}

.kpi-large .kpi-label {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #cfd2d6;
}

/* 2D View */

.dimension-2d {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}

.plot-grid-2d {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    min-height: 0;
}

.plot-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    overflow: hidden;
    height: 100%;
}

/* 3D View */

.dimension-3d {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
}

.plot-3d-container {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    overflow: hidden;
    height: 100%;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1200px) {
    .thermal-section-new {
        grid-template-columns: 240px 1fr;
    }
}

@media (max-width: 900px) {
    .thermal-section-new {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .thermal-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 15px;
    }

    .category-list {
        flex-direction: row;
    }

    .category-card {
        min-width: 200px;
    }
}

/* ===== CATEGORY VALUE STYLES ===== */

.category-value {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #ea5b0c;
    line-height: 1.3;
}

.value-unit {
    font-size: 11px;
    font-weight: 400;
    color: #999;
    margin-left: 2px;
    text-transform: none;
    /* Preserve case for units like mΩ */
}

.category-value-na {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #666;
    font-style: italic;
}

/* Multi-value chips display (vertical list with labels) */

.category-values-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.value-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid;
    font-family: 'Roboto', sans-serif;
    transition: all 0.2s ease;
    background: rgba(0, 0, 0, 0.15);
}

.value-chip:hover {
    transform: translateX(3px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.value-chip-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.value-chip-value {
    font-size: 13px;
    font-weight: 700;
}

.value-chip-unit {
    font-size: 10px;
    font-weight: 400;
    margin-left: 3px;
    opacity: 0.7;
}

/* ===== GUIDE QUESTION ===== */

.guide-question {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: #999;
    text-align: center;
    padding: 12px 20px;
    background: rgba(234, 91, 12, 0.05);
    border-left: 3px solid #ea5b0c;
    border-radius: 6px;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* Quality Section - Clean Design with Full Width Layout */

.quality-section-new {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* ===== UNIFIED LAYOUT (No Sidebar) ===== */

.quality-section-unified {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.quality-content-unified {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Side by Side Layout - Batch (2fr) + Aging (1fr) */

.quality-content-sidebyside {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

/* Quality Cards - Matching Fact Sheet Style with Flip Card */

.quality-batch-card,
.quality-aging-card {
    background: transparent;
    border: none;
    border-radius: 12px;
    box-shadow: none;
    padding: 0;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    perspective: 1000px;
}

.quality-batch-card:hover,
.quality-aging-card:hover {
    transform: translateY(-2px);
}

/* Flip Button for Quality Cards */

.quality-batch-card .flip-btn,
.quality-aging-card .flip-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    color: #ea5b0c;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
}

.quality-batch-card .flip-btn:hover,
.quality-aging-card .flip-btn:hover {
    background: rgba(234, 91, 12, 0.25);
    border-color: #ea5b0c;
    transform: scale(1.1);
}

/* Flipcard Structure for Quality Cards */

.quality-batch-card.flipcard,
.quality-aging-card.flipcard {
    transform-style: preserve-3d;
}

.quality-batch-card .flipcard-inner,
.quality-aging-card .flipcard-inner {
    position: relative;
    width: 100%;
    height: auto;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    flex: 1;
    transform-origin: center center;
}

.quality-batch-card.flipped .flipcard-inner,
.quality-aging-card.flipped .flipcard-inner {
    transform: rotateY(180deg);
}

.quality-batch-card .flipcard-front,
.quality-batch-card .flipcard-back,
.quality-aging-card .flipcard-front,
.quality-aging-card .flipcard-back {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    will-change: transform;
    padding: 24px;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quality-batch-card .flipcard-front:hover,
.quality-batch-card .flipcard-back:hover,
.quality-aging-card .flipcard-front:hover,
.quality-aging-card .flipcard-back:hover {
    border-color: rgba(234, 91, 12, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.quality-batch-card .flipcard-front,
.quality-aging-card .flipcard-front {
    position: relative;
    z-index: 2;
    transform: rotateY(0deg);
}

.quality-batch-card .flipcard-back,
.quality-aging-card .flipcard-back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1;
    transform: rotateY(180deg);
    overflow-y: auto;
}

/* Flip Content Styling */

.quality-batch-card .flip-content,
.quality-aging-card .flip-content {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.quality-batch-card .flip-content p,
.quality-aging-card .flip-content p {
    margin: 0 0 12px 0;
}

.quality-batch-card .flip-content strong,
.quality-aging-card .flip-content strong {
    color: var(--brand, #ea5b0c);
}

.quality-batch-card .card-subtitle,
.quality-aging-card .card-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: -8px 0 20px 0;
}

/* Batch Plots Grid - Two plots side by side matching stat blocks width */

.batch-plots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: 24px;
}

.batch-plot-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.batch-plot-container .plot-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    text-align: center;
}

.batch-plot-container .plot-container {
    background: var(--glass-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    height: 320px;
    width: 100%;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

/* Batch Stats Grid - Two columns */

.batch-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--border-light);
}

.batch-stat-block,
.aging-stat-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: var(--glass-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(60px);
    -webkit-backdrop-filter: blur(60px);
    transition: all var(--transition);
}

.batch-stat-block:hover,
.aging-stat-block:hover {
    background: var(--glass-bg-hover);
    border-color: var(--border-light);
    transform: translateY(-1px);
}

.batch-stat-block .stat-block-title,
.aging-stat-block .stat-block-title {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 20px 0;
}

/* Stat Groups */

.stat-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.stat-group:last-child {
    margin-bottom: 0;
}

.stat-group-title {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    transition: background 0.2s ease;
}

.spec-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.spec-row .spec-label {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}

.spec-row .spec-value {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.spec-row .spec-value .value-num {
    color: #0d7c99;
}

.spec-row .spec-value .value-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
}

/* Aging Stats Grid - Single column (only one block) */

.aging-stats-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    flex: 1;
}

/* Value styling - Big John for numbers, Roboto for units */

.quality-batch-card .quality-value-main,
.quality-aging-card .quality-value-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-sm);
    background: linear-gradient(135deg,
            rgba(13, 124, 153, 0.08) 0%,
            rgba(13, 124, 153, 0.03) 100%);
    border: 1px solid rgba(13, 124, 153, 0.15);
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.quality-batch-card .quality-value-main .value-number,
.quality-aging-card .quality-value-main .value-number {
    font-family: 'Big John', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.quality-batch-card .quality-value-main .value-unit,
.quality-aging-card .quality-value-main .value-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

.quality-batch-card .quality-value-main.aging .value-number,
.quality-aging-card .quality-value-main.aging .value-number {
    color: var(--text-secondary);
}

.quality-batch-card .quality-sublabel,
.quality-aging-card .quality-sublabel {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-bottom: 12px;
    text-transform: uppercase;

}

/* Responsive */

@media (max-width: 1400px) {
    .batch-plots-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {

    /* Stack cards vertically on smaller screens */
    .quality-content-sidebyside {
        grid-template-columns: 1fr;
    }

    .batch-stats-grid,
    .aging-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== SIDEBAR NAVIGATION ===== */

.quality-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.6) 0%, rgba(45, 42, 38, 0.8) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    padding: 20px;
    align-self: stretch;
}

.quality-nav .nav-header {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quality-nav .nav-title {
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.quality-nav .nav-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Category Card Style (from Electrical Section) */

.quality-nav .nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.4) 0%, rgba(45, 42, 38, 0.6) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

.quality-nav .nav-btn:hover {
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.6) 0%, rgba(45, 42, 38, 0.8) 100%);
    border-color: rgba(234, 91, 12, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.quality-nav .nav-btn.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.2) 0%, rgba(234, 91, 12, 0.05) 100%);
    border-color: #ea5b0c;
    box-shadow: 0 0 24px rgba(234, 91, 12, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.quality-nav .nav-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quality-nav .nav-icon svg {
    width: 100%;
    height: 100%;
    stroke: #999;
    transition: all 0.3s ease;
}

.quality-nav .nav-btn.active .nav-icon svg {
    stroke: #ea5b0c;
    filter: drop-shadow(0 0 8px rgba(234, 91, 12, 0.6));
}

.quality-nav .nav-info {
    width: 100%;
}

.quality-nav .nav-label {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #999;
    transition: color 0.3s ease;
}

.quality-nav .nav-btn.active .nav-label {
    color: #fff;
}

.quality-nav .nav-sublabel {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #666;
    margin-top: 4px;
    transition: color 0.3s ease;
}

.quality-nav .nav-btn.active .nav-sublabel {
    color: #ea5b0c;
}

/* ===== MAIN CONTENT AREA ===== */

.quality-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ===== DIMENSION STEPPER (for Batch View) ===== */

.quality-section-new .dimension-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    padding: 12px 20px;
}

.quality-section-new .dimension-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 19px 24px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #999;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.quality-section-new .dimension-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(234, 91, 12, 0.2);
}

.quality-section-new .dimension-btn.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
    border-color: #ea5b0c;
    color: #fff;
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
}

.quality-section-new .dim-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.quality-section-new .dim-icon svg {
    width: 100%;
    height: 100%;
    stroke: #999;
    transition: all 0.3s ease;
}

.quality-section-new .dimension-btn.active .dim-icon svg {
    stroke: #ea5b0c;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(234, 91, 12, 0.6));
}

.quality-section-new .dim-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.quality-section-new .dim-label {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: inherit;
}

.quality-section-new .dim-sublabel {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #888;
}

.quality-section-new .dimension-btn.active .dim-sublabel {
    color: #ea5b0c;
}

.quality-section-new .stepper-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(to right, rgba(234, 91, 12, 0.3), rgba(234, 91, 12, 0.1));
    flex-shrink: 0;
}

/* ===== CARD GRID ===== */

.quality-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* For batch cards: full width with internal 2-column layout */

.quality-grid .key-spec-card.batch-card .flipcard-front {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto 1fr;
    gap: 20px;
    align-items: start;
}

.quality-grid .key-spec-card.batch-card .column-title {
    grid-column: 1 / -1;
    grid-row: 1;
}

.quality-grid .key-spec-card.batch-card .quality-value-main {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    margin-bottom: 0;
}

.quality-grid .key-spec-card.batch-card .quality-sublabel {
    grid-column: 1;
    grid-row: 3;
}

.quality-grid .key-spec-card.batch-card .spec-list {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: center;
    margin-bottom: 0;
}

.quality-grid .key-spec-card.batch-card .quality-bar-container {
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: end;
}

.quality-grid .key-spec-card.batch-card .flipcard-back {
    display: flex;
    flex-direction: column;
}

/* For aging cards: keep 2-column grid */

.quality-grid.aging-grid {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1200px) {
    .quality-grid.aging-grid {
        grid-template-columns: 1fr;
    }

    .quality-grid .key-spec-card.batch-card .flipcard-front {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr auto;
    }

    .quality-grid .key-spec-card.batch-card .column-title {
        grid-row: 1;
    }

    .quality-grid .key-spec-card.batch-card .quality-value-main {
        grid-column: 1;
        grid-row: 2;
    }

    .quality-grid .key-spec-card.batch-card .quality-sublabel {
        grid-column: 1;
        grid-row: 3;
    }

    .quality-grid .key-spec-card.batch-card .spec-list {
        grid-column: 1;
        grid-row: 4;
    }

    .quality-grid .key-spec-card.batch-card .quality-bar-container {
        grid-column: 1;
        grid-row: 5;
    }
}

/* ===== FLIP CARDS ===== */

.quality-section-new .key-spec-card {
    background: transparent;
    border: none;
    border-radius: 12px;
    box-shadow: none;
    padding: 0;
    position: relative;
    perspective: 1000px;
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.quality-section-new .key-spec-card:hover {
    transform: translateY(-2px);
}

/* ===== FLIP BUTTON ===== */

.quality-section-new .flip-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    color: #ea5b0c;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
}

.quality-section-new .flip-btn:hover {
    background: rgba(234, 91, 12, 0.25);
    border-color: #ea5b0c;
    transform: scale(1.1);
}

.quality-section-new .flipcard {
    transform-style: preserve-3d;
}

.quality-section-new .flipcard-inner {
    position: relative;
    width: 100%;
    height: auto;
    /* Auto-height based on front content */
    transition: transform 0.6s;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    flex: 1;
    transform-origin: center center;
}

.quality-section-new .flipcard.flipped .flipcard-inner {
    transform: rotateY(180deg);
}

.quality-section-new .flipcard-front,
.quality-section-new .flipcard-back {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    will-change: transform;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    padding: 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.quality-section-new .flipcard-front:hover,
.quality-section-new .flipcard-back:hover {
    border-color: rgba(234, 91, 12, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.quality-section-new .flipcard-front {
    position: relative;
    z-index: 2;
    transform: rotateY(0deg);
}

.quality-section-new .flipcard-back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1;
    transform: rotateY(180deg);
}

/* Override for specificity - ensure back side properties */

.quality-section-new .flipcard:not(.flipped) .flipcard-front {
    position: relative;
}

.quality-section-new .flipcard-back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow-y: auto;
    /* Scrolling if content longer than front */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: rotateY(180deg);
}

/* ===== CARD TITLE (White with Subtle Underline) ===== */

.quality-section-new .column-title {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== MAIN VALUE (Button-Style) ===== */

.quality-section-new .quality-value-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    padding: 19px 24px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.quality-section-new .quality-value-main .value-number {
    font-family: 'Big John', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.quality-section-new .quality-value-main .value-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

.quality-section-new .quality-value-main.aging .value-number {
    color: #ea5b0c;
}

.quality-section-new .quality-sublabel {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-bottom: 12px;
    text-transform: uppercase;

}

/* ===== SPEC LIST ===== */

.quality-section-new .spec-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.quality-section-new .spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.quality-section-new .spec-label {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    text-transform: none !important;
}

.quality-section-new .spec-value {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0 !important;
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.quality-section-new .spec-value .value-num {
    font-family: 'Big John', sans-serif;
}

.quality-section-new .spec-value .value-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}

.quality-section-new .spec-value .value-num {
    font-family: 'Big John', sans-serif;
}

.quality-section-new .spec-value .value-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
}

/* ===== QUALITY BAR ===== */

.quality-section-new .quality-bar-container {
    margin-top: auto;
}

.quality-section-new .quality-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.quality-section-new .quality-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #0d7c99, #00bcd4);
    transition: width 0.5s ease;
    border-radius: 3px;
}

.quality-section-new .quality-bar.aging-bar .quality-bar-fill {
    background: linear-gradient(90deg, #0d7c99, #00bcd4);
}

.quality-section-new .quality-bar-label {
    font-family: 'Big John', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #0d7c99;
    text-align: center;
    text-transform: uppercase;

}

.quality-section-new .quality-bar.aging-bar+.quality-bar-label {
    color: #0d7c99;
}

/* ===== FLIP BACK CONTENT ===== */

.quality-section-new .spec-detail-content {
    padding: 10px 0;
}

.quality-section-new .spec-detail-content p {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 12px 0;
}

.quality-section-new .detail-metric {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #ea5b0c;
    padding: 12px;
    border-radius: 6px;
    margin: 12px 0;
}

.quality-section-new .detail-label {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;

    margin-bottom: 4px;
}

.quality-section-new .detail-value {
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ea5b0c;
}

/* ===== PLOTS SECTION ===== */

.quality-plots {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.quality-section-new .plot-card {
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    padding: 20px;
}

.quality-section-new .plot-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quality-section-new .plot-container {
    height: auto;
}

/* ===== SCROLLBAR ===== */

.quality-section-new::-webkit-scrollbar {
    width: 8px;
}

.quality-section-new::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.quality-section-new::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.5);
    border-radius: 4px;
    transition: background 0.2s;
}

.quality-section-new::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.8);
}

.quality-section-new {
    scrollbar-width: thin;
    scrollbar-color: rgba(234, 91, 12, 0.5) rgba(0, 0, 0, 0.2);
}

/* ===== STEP 4: Page Layouts ===== */

/* Cell Explorer Page - Liquid Glass Design */

.explorer-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 0;
  background: linear-gradient(135deg, rgba(50, 48, 45, 0.5) 0%, rgba(45, 42, 38, 0.7) 100%);
}

/* Note: Explorer header is now in drawer-concept.css as .explorer-header-bar */

/* Cell Grid - Liquid Glass Cards */

.cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 60px;
}

.cell-card {
  position: relative;
  /* Glassmorphism matching key-spec-card tiles */
  background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  /* For <a> tags */
  color: inherit;
  /* For <a> tags */
}

.cell-card.loading-card {
  pointer-events: none;
  opacity: 0.6;
}

.cell-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(234, 91, 12, 0.3) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cell-card:hover {
  transform: translateY(-4px);
  border-color: rgba(234, 91, 12, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(234, 91, 12, 0.2);
}

.cell-card:hover::before {
  opacity: 1;
}

/* Cell Image */

.cell-image {
  width: 100%;
  aspect-ratio: 1;
  /* Slightly darker than card for depth */
  background: linear-gradient(135deg, rgba(45, 43, 40, 0.9) 0%, rgba(40, 38, 35, 0.95) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.cell-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.cell-card:hover .cell-image img {
  transform: scale(1.05);
}

.cell-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.3);
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  font-size: 13px;
  padding-top: 3px;
}

/* Cell Info */

.cell-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cell-manufacturer {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: rgba(234, 91, 12, 0.8);
  text-transform: none;
  
  padding-top: 3px;
}

.cell-name {
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  padding-top: 4px;
  line-height: 1.3;
}

.cell-loading {
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  padding-top: 3px;
}

/* KPI Badges - Premium 4 indicators in 2x2 Grid */

.cell-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.cell-card .kpi-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-size: 9px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.cell-card .kpi-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cell-card .kpi-badge svg {
  flex-shrink: 0;
  opacity: 0.9;
}

.cell-card .kpi-content {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
}

.cell-card .kpi-value {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.cell-card .kpi-unit {
  font-size: 8px;
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1;
}

/* Quality Color Coding - Dynamic based on thresholds */

/* Excellent Quality - Green */

.cell-card .kpi-badge.quality-excellent {
  background: rgba(76, 175, 80, 0.08);
  border-color: rgba(76, 175, 80, 0.2);
}

.cell-card .kpi-badge.quality-excellent svg {
  stroke: #4caf50;
  filter: drop-shadow(0 0 4px rgba(76, 175, 80, 0.3));
}

.cell-card .kpi-badge.quality-excellent .kpi-value {
  color: #4caf50;
}

/* Good Quality - Orange */

.cell-card .kpi-badge.quality-good {
  background: rgba(234, 91, 12, 0.08);
  border-color: rgba(234, 91, 12, 0.2);
}

.cell-card .kpi-badge.quality-good svg {
  stroke: #ea5b0c;
  filter: drop-shadow(0 0 4px rgba(234, 91, 12, 0.3));
}

.cell-card .kpi-badge.quality-good .kpi-value {
  color: #ea5b0c;
}

/* Average Quality - Yellow */

.cell-card .kpi-badge.quality-average {
  background: rgba(255, 193, 7, 0.08);
  border-color: rgba(255, 193, 7, 0.2);
}

.cell-card .kpi-badge.quality-average svg {
  stroke: #ffc107;
  filter: drop-shadow(0 0 4px rgba(255, 193, 7, 0.3));
}

.cell-card .kpi-badge.quality-average .kpi-value {
  color: #ffc107;
}

/* Poor Quality - Red */

.cell-card .kpi-badge.quality-poor {
  background: rgba(244, 67, 54, 0.08);
  border-color: rgba(244, 67, 54, 0.2);
}

.cell-card .kpi-badge.quality-poor svg {
  stroke: #f44336;
  filter: drop-shadow(0 0 4px rgba(244, 67, 54, 0.3));
}

.cell-card .kpi-badge.quality-poor .kpi-value {
  color: #f44336;
}

.cell-year,
.cell-detail {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Roboto', sans-serif;
}

/* View Details Button */

.cell-view-details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: var(--brand);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-family: 'Big John', sans-serif;
  font-size: 13px;
  font-weight: 400;
  
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0;
  transform: translateY(10px);
}

.cell-card:hover .cell-view-details {
  opacity: 1;
  transform: translateY(0);
}

.cell-view-details:hover {
  background: #ff6b00;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(234, 91, 12, 0.4);
}

/* Button */

.btn-cell-details {
  padding: 15px 24px 10px;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.25) 0%, rgba(234, 91, 12, 0.12) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(234, 91, 12, 0.3);
  border-radius: 12px;
  color: #fff;
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 2px 12px rgba(234, 91, 12, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
}

.btn-cell-details:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.35), rgba(234, 91, 12, 0.22));
  border-color: rgba(234, 91, 12, 0.5);
  transform: translateY(-2px);
  box-shadow:
    0 6px 20px rgba(234, 91, 12, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-cell-details:active:not(:disabled) {
  transform: translateY(0);
}

.btn-cell-details:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Pagination - Liquid Glass */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px 20px;
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.4) 0%, rgba(39, 39, 39, 0.6) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  border-radius: 16px;
  border: 1px solid rgba(234, 91, 12, 0.12);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
}

.pagination-btn {
  padding: 12px 24px 8px;
  background: linear-gradient(135deg, rgba(60, 58, 55, 0.8) 0%, rgba(50, 48, 45, 0.95) 100%);
  border: 1px solid rgba(234, 91, 12, 0.2);
  border-radius: 10px;
  color: #fff;
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pagination-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.2) 0%, rgba(234, 91, 12, 0.1) 100%);
  border-color: rgba(234, 91, 12, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(234, 91, 12, 0.2);
}

.pagination-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pagination-info {
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 3px;
  
}

/* ================================
   LIGHT THEME OVERRIDES
================================= */

/* Header */

[data-theme="light"] .explorer-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.98) 100%);
  border: 1px solid rgba(234, 91, 12, 0.2);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .explorer-header h1 {
  color: #1a1a1a;
  background: linear-gradient(135deg, #1a1a1a 0%, #ea5b0c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .explorer-header p {
  color: rgba(26, 26, 26, 0.6);
}

/* Cell Cards */

[data-theme="light"] .cell-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.98) 100%);
  border: 1px solid rgba(234, 91, 12, 0.15);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

[data-theme="light"] .cell-card::before {
  background: linear-gradient(90deg, transparent 0%, rgba(234, 91, 12, 0.4) 50%, transparent 100%);
}

[data-theme="light"] .cell-card:hover {
  border-color: rgba(234, 91, 12, 0.4);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 0 20px rgba(234, 91, 12, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Cell Image */

[data-theme="light"] .cell-image {
  background: linear-gradient(135deg, rgba(250, 250, 250, 0.7) 0%, rgba(245, 245, 245, 0.9) 100%);
  border: 1px solid rgba(234, 91, 12, 0.1);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .cell-placeholder {
  color: rgba(26, 26, 26, 0.3);
}

/* Cell Info */

[data-theme="light"] .cell-manufacturer {
  color: rgba(234, 91, 12, 0.9);
}

[data-theme="light"] .cell-name {
  color: #1a1a1a;
}

/* KPI Badges - Light Theme */

[data-theme="light"] .cell-card .kpi-badge {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .cell-card .kpi-badge:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Excellent Quality - Green */

[data-theme="light"] .cell-card .kpi-badge.quality-excellent {
  background: rgba(76, 175, 80, 0.06);
  border-color: rgba(76, 175, 80, 0.25);
}

[data-theme="light"] .cell-card .kpi-badge.quality-excellent svg {
  stroke: #388e3c;
  filter: drop-shadow(0 0 4px rgba(76, 175, 80, 0.25));
}

[data-theme="light"] .cell-card .kpi-badge.quality-excellent .kpi-value {
  color: #388e3c;
}

/* Good Quality - Orange */

[data-theme="light"] .cell-card .kpi-badge.quality-good {
  background: rgba(234, 91, 12, 0.06);
  border-color: rgba(234, 91, 12, 0.25);
}

[data-theme="light"] .cell-card .kpi-badge.quality-good svg {
  stroke: #c24a00;
  filter: drop-shadow(0 0 4px rgba(234, 91, 12, 0.25));
}

[data-theme="light"] .cell-card .kpi-badge.quality-good .kpi-value {
  color: #c24a00;
}

/* Average Quality - Yellow */

[data-theme="light"] .cell-card .kpi-badge.quality-average {
  background: rgba(255, 193, 7, 0.06);
  border-color: rgba(255, 193, 7, 0.3);
}

[data-theme="light"] .cell-card .kpi-badge.quality-average svg {
  stroke: #f57c00;
  filter: drop-shadow(0 0 4px rgba(255, 193, 7, 0.25));
}

[data-theme="light"] .cell-card .kpi-badge.quality-average .kpi-value {
  color: #f57c00;
}

/* Poor Quality - Red */

[data-theme="light"] .cell-card .kpi-badge.quality-poor {
  background: rgba(244, 67, 54, 0.06);
  border-color: rgba(244, 67, 54, 0.25);
}

[data-theme="light"] .cell-card .kpi-badge.quality-poor svg {
  stroke: #c62828;
  filter: drop-shadow(0 0 4px rgba(244, 67, 54, 0.25));
}

[data-theme="light"] .cell-card .kpi-badge.quality-poor .kpi-value {
  color: #c62828;
}

[data-theme="light"] .cell-loading {
  color: rgba(26, 26, 26, 0.4);
}

[data-theme="light"] .cell-year {
  color: rgba(26, 26, 26, 0.5);
}

/* View Details Button */

[data-theme="light"] .cell-view-details {
  background: rgba(234, 91, 12, 0.12);
  border-color: rgba(234, 91, 12, 0.3);
  color: var(--brand);
}

[data-theme="light"] .cell-view-details:hover {
  background: rgba(234, 91, 12, 0.2);
  border-color: var(--brand);
}

/* Button */

[data-theme="light"] .btn-cell-details {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.12) 0%, rgba(234, 91, 12, 0.06) 100%);
  border: 1px solid rgba(234, 91, 12, 0.3);
  color: #1a1a1a;
  box-shadow:
    0 2px 8px rgba(234, 91, 12, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .btn-cell-details:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.2) 0%, rgba(234, 91, 12, 0.12) 100%);
  border-color: rgba(234, 91, 12, 0.5);
  box-shadow:
    0 4px 12px rgba(234, 91, 12, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Pagination */

[data-theme="light"] .pagination {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.98) 100%);
  border: 1px solid rgba(234, 91, 12, 0.15);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

[data-theme="light"] .pagination-btn {
  background: linear-gradient(135deg, rgba(250, 250, 250, 0.7) 0%, rgba(245, 245, 245, 0.9) 100%);
  border: 1px solid rgba(234, 91, 12, 0.2);
  color: #1a1a1a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .pagination-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.08) 100%);
  border-color: rgba(234, 91, 12, 0.4);
  box-shadow: 0 4px 10px rgba(234, 91, 12, 0.15);
}

[data-theme="light"] .pagination-info {
  color: rgba(26, 26, 26, 0.7);
}

/* Loading Screen */

.explorer-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  gap: 60px;
  animation: fadeIn 0.6s ease;
}

.loading-logo-container {
  display: flex;
  align-items: center;
  gap: 50px;
}

.loading-logo {
  width: 200px;
  height: 200px;
  filter: drop-shadow(0 0 20px rgba(234, 91, 12, 0.3));
}

.loading-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loading-brand {
  font-family: 'Big John', sans-serif;
  font-size: 72px;
  font-weight: 400;
  color: #fff;
  margin: 0;
  
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

.loading-tagline {
  font-family: 'Big John', sans-serif;
  font-size: 36px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Loading Progress Bar */

.loading-progress {
  margin-top: 24px;
  width: 400px;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ea5b0c, #ff7b2c);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 12px rgba(234, 91, 12, 0.5);
}

.progress-text {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin: 0;
}

.loading-message {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 20px 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 768px) {
  .cell-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }

  .explorer-header h1 {
    font-size: 32px;
  }

  .pagination {
    flex-direction: column;
    gap: 12px;
  }
}

/**
 * Cells Page Layout & Filter Panel Styles
 * 
 * Unified Cells Page with left filter panel (similar to Electrical Nav),
 * adaptive context bar, and three view modes (Grid/Ragone/Table)
 */

/* ============================================================================
   CSS VARIABLES
   ============================================================================ */

:root {
    /* Panel dimensions */
    --filter-panel-width: 280px;
    --filter-panel-collapsed: 48px;
    --filter-panel-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing */
    --filter-section-gap: 12px;
    --filter-option-gap: 6px;
    --filter-padding: 0.5rem;
    /* Kompakt für FilterPanel */

    /* Colors - Dark Theme (matching key-spec-card) */
    --filter-bg-primary: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    --filter-bg-secondary: rgba(60, 58, 55, 0.7);
    --filter-bg-tertiary: rgba(50, 48, 45, 0.85);
    --filter-border: rgba(255, 255, 255, 0.06);
    --filter-border-strong: rgba(255, 255, 255, 0.10);

    /* Interactive states */
    --filter-hover: rgba(234, 91, 12, 0.1);
    --filter-active: rgba(234, 91, 12, 0.2);
    --filter-selected: linear-gradient(135deg, #ea5b0c, #ff7733);

    /* Text colors */
    --filter-text-primary: rgba(255, 255, 255, 0.9);
    --filter-text-secondary: rgba(255, 255, 255, 0.6);
    --filter-text-tertiary: rgba(255, 255, 255, 0.4);
    --filter-text-accent: #ea5b0c;

    /* Badges & counts */
    --filter-count-bg: rgba(255, 255, 255, 0.05);
    --filter-count-text: rgba(255, 255, 255, 0.5);

    /* Shadows */
    --filter-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --filter-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --filter-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   MAIN LAYOUT
   ============================================================================ */

.cells-page-layout {
    display: flex;
    flex-direction: column;
    /* Simplified - sidebar is fixed via unified-app-layout */
    min-height: 100vh;
    background: transparent;
}

.cells-page-layout.panel-collapsed {
    grid-template-columns: var(--filter-panel-collapsed) 1fr;
}

/* ============================================================================
   CONTEXT BAR (Adaptive Header below CmdBar)
   ============================================================================ */

.cells-context-bar {
    grid-area: context;
    position: sticky;
    top: 0;
    /* Sticky an Viewport-Top, CmdBar floatet darüber */
    z-index: 98;
    /* Gleicher Background wie cmdbar & drawer-header */
    background: linear-gradient(180deg,
            rgba(44, 44, 44, 0.92) 0%,
            rgba(44, 44, 44, 0.85) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-bottom: none;
    padding: var(--context-bar-padding) 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: var(--header-transition);
}

/* SCROLLED STATE - Disabled (always keep full size) */

/* body.scrolled .cells-context-bar {
    padding: var(--context-bar-padding-scrolled) 2rem;
    backdrop-filter: blur(50px) saturate(180%);
    -webkit-backdrop-filter: blur(50px) saturate(180%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    top: 0;
} */

/* Context bar rows */

.context-bar-row {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--context-bar-min-height);
}

.context-bar-row+.context-bar-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--filter-border);
}

.context-bar-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.context-bar-section.grow {
    flex: 1;
}

/* View switcher tabs */

.view-switcher {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 10px;
}

.view-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--filter-text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.view-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--filter-text-primary);
}

.view-tab.active {
    background: var(--filter-selected);
    color: white;
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.3);
}

.view-tab-icon {
    font-size: 16px;
}

/* Search input */

.context-search {
    flex: 1;
    max-width: 400px;
    position: relative;
}

.context-search-input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--filter-border);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    transition: all 0.2s;
}

.context-search-input::placeholder {
    color: var(--filter-text-tertiary);
}

.context-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(234, 91, 12, 0.5);
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.context-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--filter-text-tertiary);
    pointer-events: none;
}

/* Active filter tags */

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.filter-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 6px;
    color: #ea5b0c;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    cursor: default;
}

.filter-tag-remove {
    background: none;
    border: none;
    color: #ea5b0c;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.filter-tag-remove:hover {
    background: rgba(234, 91, 12, 0.3);
}

.clear-all-filters {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--filter-border);
    border-radius: 6px;
    color: var(--filter-text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.clear-all-filters:hover {
    background: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.3);
    color: #ff4444;
}

/* Cell count badge */

.cell-count {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    color: var(--filter-text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.cell-count-number {
    color: var(--filter-text-accent);
    font-weight: 700;
}

/* ============================================================================
   FILTER PANEL (Left Sidebar)
   ============================================================================ */

.cells-filter-panel {
    /* Rendered inside .adaptive-sidebar__panel - no positioning needed */
    width: 100%;
    height: 100%;
    background: transparent;
    /* Parent has background */
    display: flex;
    flex-direction: column;
    /* Stack header, scrollable content, footer */
    overflow: hidden;
    /* Prevent scrolling on panel itself */
    padding: 12px;
    /* Inner padding for filter sections */
    box-sizing: border-box;
    /* Include padding in width calculation */
    transition: padding 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Scrollable content wrapper between header and footer */

.filter-panel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(234, 91, 12, 0.5) rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
    /* Small padding at bottom */
}

.filter-panel-content::-webkit-scrollbar {
    width: 6px;
}

.filter-panel-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}

.filter-panel-content::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.4);
    border-radius: 3px;
}

.filter-panel-content::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.6);
}

/* Panel header with search + actions */

.filter-panel-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    margin-bottom: 16px;
    /* Glass morphism card matching tile system */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.6) 0%, rgba(45, 42, 38, 0.8) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.filter-search--header {
    width: 100%;
}

.filter-panel-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.filter-action-btn {
    flex: 1;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    gap: 6px;
}

.filter-action-btn:hover {
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.4);
    color: #ea5b0c;
}

.filter-action-btn svg {
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 2;
    transition: stroke 0.3s ease;
}

.filter-action-btn:hover svg {
    stroke: #ea5b0c;
}

/* Panel loading state */

.filter-panel-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 60px 20px;
    color: var(--filter-text-secondary);
}

.filter-panel-loading .loading-spinner__animation {
    width: 60px;
    height: 60px;
}

.filter-panel-loading .loading-spinner__text {
    font-family: 'Big John', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;

    color: var(--filter-text-primary);
    text-transform: uppercase;
}

/* Remove old spinner animation */

.filter-panel-spinner {
    animation: none;
}

/* Panel footer */

.filter-panel-footer {
    flex-shrink: 0;
    /* Don't shrink, always full height */
    padding: 10px 0 0 0;
    /* Top padding for spacing, bottom padding for edge spacing */
}

.filter-reset-btn {
    width: 100%;
    padding: 10px 16px;
    background: rgba(50, 50, 50, 0.7);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 8px;
    color: #ea5b0c;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Big John', sans-serif;
    text-transform: uppercase;

    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.filter-reset-btn:hover {
    background: rgba(234, 91, 12, 0.15);
    border-color: #ea5b0c;
    color: #ff7733;
    box-shadow: 0 4px 16px rgba(234, 91, 12, 0.3);
    transform: translateY(-1px);
}

.filter-reset-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.2);
}

.filter-reset-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: rgba(50, 50, 50, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
}

.filter-reset-btn:disabled:hover {
    background: rgba(50, 50, 50, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    transform: none;
    box-shadow: none;
}

/* Collapsed state */

.cells-filter-panel.collapsed .filter-section,
.cells-filter-panel.collapsed .filter-panel-footer {
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
}

.cells-filter-panel.collapsed .filter-panel-header {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

/* ============================================================================
   ACTIVE FILTERS HEADER
   ============================================================================ */

.active-filters-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    margin: 0 0 16px 0;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.7) 0%, rgba(45, 42, 38, 0.85) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: fadeInSlideDown 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeInSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.active-filters-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Big John', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ccc;
    white-space: nowrap;
}

.active-filters-label svg {
    color: #ea5b0c;
}

.active-filters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 12px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.08) 100%);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 14px;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    color: #ea5b0c;
    font-weight: 500;
    transition: all 0.2s ease;
    animation: fadeInScale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.filter-chip:hover {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.2) 0%, rgba(234, 91, 12, 0.12) 100%);
    border-color: rgba(234, 91, 12, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(234, 91, 12, 0.2);
}

/* Type-specific colors */

.filter-chip-chemistry {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.08) 100%);
    border-color: rgba(76, 175, 80, 0.3);
    color: #4CAF50;
}

.filter-chip-chemistry:hover {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(76, 175, 80, 0.12) 100%);
    border-color: rgba(76, 175, 80, 0.4);
}

.filter-chip-manufacturer {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(33, 150, 243, 0.08) 100%);
    border-color: rgba(33, 150, 243, 0.3);
    color: #2196F3;
}

.filter-chip-manufacturer:hover {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.2) 0%, rgba(33, 150, 243, 0.12) 100%);
    border-color: rgba(33, 150, 243, 0.4);
}

.filter-chip-search {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(156, 39, 176, 0.08) 100%);
    border-color: rgba(156, 39, 176, 0.3);
    color: #9C27B0;
}

.filter-chip-search:hover {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.2) 0%, rgba(156, 39, 176, 0.12) 100%);
    border-color: rgba(156, 39, 176, 0.4);
}

.filter-chip-technology {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, rgba(255, 152, 0, 0.08) 100%);
    border-color: rgba(255, 152, 0, 0.3);
    color: #FF9800;
}

.filter-chip-technology:hover {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.2) 0%, rgba(255, 152, 0, 0.12) 100%);
    border-color: rgba(255, 152, 0, 0.4);
}

.filter-chip-country,
.filter-chip-format {
    background: linear-gradient(135deg, rgba(96, 125, 139, 0.15) 0%, rgba(96, 125, 139, 0.08) 100%);
    border-color: rgba(96, 125, 139, 0.3);
    color: #607D8B;
}

.filter-chip-country:hover,
.filter-chip-format:hover {
    background: linear-gradient(135deg, rgba(96, 125, 139, 0.2) 0%, rgba(96, 125, 139, 0.12) 100%);
    border-color: rgba(96, 125, 139, 0.4);
}

.filter-chip-label {
    user-select: none;
}

.filter-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: currentColor;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip-remove:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.15);
}

.clear-all-filters {
    padding: 6px 14px;
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 12px;
    font-size: 11px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: #f44336;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.clear-all-filters:hover {
    background: rgba(244, 67, 54, 0.25);
    border-color: rgba(244, 67, 54, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(244, 67, 54, 0.3);
}

/* Ion attribution card (Task 10, Ion-as-Insights P1) — shown in
   ActiveFiltersHeader once an Ion turn commits (state/commandLayer.js's
   commitIonTransaction); offers a one-click Revert while it's still fresh.
   Reuses the --ion-* tokens (components/ion.css) so it reads as part of the
   Ion design system, not a bespoke filter-chip variant. */

.ion-attribution-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 14px;
    background: var(--ion-marker-soft, rgba(234, 91, 12, 0.12));
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 14px;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    color: var(--ion-marker, #ea5b0c);
    white-space: nowrap;
    animation: fadeInScale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ion-attribution-label {
    font-weight: 500;
}

.ion-attribution-revert {
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(234, 91, 12, 0.4);
    border-radius: 10px;
    font-size: 11px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: var(--ion-marker, #ea5b0c);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ion-attribution-revert:hover {
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.5);
    transform: translateY(-1px);
}

/* ============================================================================
   MAIN CONTENT AREA
   ============================================================================ */

.cells-main-content {
    grid-area: content;
    overflow: visible;
    /* No scroll here - parent .app-content handles scrolling */
    /* Let content flow naturally - no min-height forcing */
    padding: 0 20px 68px 0;
    /* Right padding 20px, bottom 68px for footer, no left (comes from grid gap) */
    background: transparent;
    display: flex;
    flex-direction: column;
}

/* Custom scrollbar for content */

.cells-main-content::-webkit-scrollbar {
    width: 12px;
}

.cells-main-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.cells-main-content::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.3);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.cells-main-content::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.5);
    background-clip: content-box;
}

/* ============================================================================
   FOOTER - App-Style (compact, functional) v2
   ============================================================================ */

/* ============================================
   FOOTER - Modern App Style (Compact)
   ============================================ */

.cells-page-footer {
    grid-area: footer;
    background: var(--bg-tertiary);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-subtle);
    padding: 1rem 2rem;
    margin-top: auto;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* Left: App Info */

.footer-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.footer-app-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.footer-app-name svg {
    color: var(--accent-primary);
}

.footer-version {
    color: var(--text-tertiary);
    font-size: 0.7rem;
}

.footer-stats {
    color: var(--text-tertiary);
}

.footer-separator {
    color: var(--border-subtle);
}

/* Center: Quick Actions */

.footer-center {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--accent-primary);
}

.footer-link svg {
    opacity: 0.6;
}

/* Right: Legal Links */

.footer-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.7rem;
}

.footer-link-minimal {
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link-minimal:hover {
    color: var(--text-secondary);
}

/* Responsive */

@media (max-width: 1024px) {
    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .footer-center {
        order: 3;
    }
}

@media (max-width: 768px) {
    .cells-page-footer {
        padding: 1rem;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        flex-wrap: wrap;
    }

    .footer-stats {
        display: none;
    }
}

.footer-action-btn:hover {
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(234, 91, 12, 0.15);
}

.footer-action-btn--primary {
    background: linear-gradient(135deg, #ea5b0c, #ff7733);
    border-color: transparent;
    color: white;
}

.footer-action-btn--primary:hover {
    background: linear-gradient(135deg, #ff6a1a, #ff8844);
    box-shadow: 0 4px 16px rgba(234, 91, 12, 0.3);
}

.footer-bottom {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--filter-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--filter-text-tertiary);
}

.footer-copyright {
    display: flex;
    align-items: center;
    gap: 5px;
}

.footer-copyright svg {
    opacity: 0.4;
}

.footer-social-links {
    display: flex;
    gap: 10px;
}

.footer-social-link {
    color: var(--filter-text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
}

.footer-social-link:hover {
    color: #ea5b0c;
    background: rgba(234, 91, 12, 0.12);
    transform: translateY(-1px);
}

.footer-social-link svg {
    width: 14px;
    height: 14px;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

/* Mobile (< 768px) */

@media (max-width: 767px) {
    .cells-page-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "context"
            "content"
            "footer";
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .cells-filter-panel {
        position: fixed;
        top: calc(var(--cmdbar-height, 56px) + var(--context-bar-min-height));
        left: 0;
        width: 100%;
        max-width: 320px;
        height: calc(100vh - var(--cmdbar-height, 56px) - var(--context-bar-min-height));
        transform: translateX(-100%);
        transition: transform 0.3s;
        z-index: 100;
        box-shadow: var(--filter-shadow-lg);
    }

    .cells-filter-panel.open {
        transform: translateX(0);
    }

    .cells-filter-panel.collapsed {
        transform: translateX(-100%);
    }

    /* Mobile overlay */
    .filter-panel-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 99;
    }

    .filter-panel-overlay.visible {
        display: block;
    }

    /* Mobile context bar */
    .cells-context-bar {
        padding: 12px 1rem;
    }

    .context-bar-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    .view-switcher {
        order: -1;
        width: 100%;
    }

    .context-search {
        max-width: none;
        width: 100%;
    }

    /* Mobile content */
    .cells-main-content {
        padding: 16px;
    }

    /* Add filter toggle button for mobile */
    .mobile-filter-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: var(--filter-selected);
        border: none;
        border-radius: 8px;
        color: white;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(234, 91, 12, 0.3);
    }
}

/* Tablet (768px - 1024px) */

@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        --filter-panel-width: 240px;
    }

    .cells-main-content {
        padding: 20px;
    }

    .cells-context-bar {
        padding: 12px 1.5rem;
    }

    .context-bar-row {
        gap: 16px;
    }
}

/* Large desktop (> 1440px) */

@media (min-width: 1441px) {
    :root {
        --filter-panel-width: 320px;
    }

    .cells-main-content {
        padding: 32px;
    }
}

/* Hide mobile-only elements on desktop */

@media (min-width: 768px) {

    .mobile-filter-toggle,
    .filter-panel-overlay {
        display: none !important;
    }
}

/* ============================================================================
   LIGHT THEME ADJUSTMENTS
   ============================================================================ */

body.light-theme {
    --filter-bg-primary: rgba(255, 255, 255, 0.95);
    --filter-bg-secondary: rgba(245, 245, 245, 0.9);
    --filter-bg-tertiary: rgba(250, 250, 250, 0.95);
    --filter-border: rgba(0, 0, 0, 0.08);
    --filter-border-strong: rgba(0, 0, 0, 0.12);

    --filter-hover: rgba(234, 91, 12, 0.08);
    --filter-active: rgba(234, 91, 12, 0.15);

    --filter-text-primary: rgba(0, 0, 0, 0.9);
    --filter-text-secondary: rgba(0, 0, 0, 0.6);
    --filter-text-tertiary: rgba(0, 0, 0, 0.4);

    --filter-count-bg: rgba(0, 0, 0, 0.05);
    --filter-count-text: rgba(0, 0, 0, 0.5);

    --filter-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --filter-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --filter-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}

body.light-theme .cells-filter-panel {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(250, 250, 250, 0.98) 100%);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.08);
}

body.light-theme .cells-context-bar {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.75) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body.light-theme .cells-filter-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

body.light-theme .context-search-input {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--filter-text-primary);
}

body.light-theme .context-search-input:focus {
    background: rgba(0, 0, 0, 0.06);
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

/* Error and empty states */

.cells-page-layout .error-message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #ff4444;
    font-size: 14px;
}

.cells-page-layout .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: var(--filter-text-secondary);
    text-align: center;
    padding: 32px;
}

.empty-state-icon {
    font-size: 64px;
    opacity: 0.3;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--filter-text-primary);
}

.empty-state-description {
    font-size: 14px;
    max-width: 400px;
}

/* Modern Empty State with Corporate Design */

.empty-state-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 40px 20px;
}

.empty-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 500px;
    padding: 48px 40px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.7) 0%, rgba(45, 42, 38, 0.85) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.empty-state-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.05) 100%);
    border: 2px solid rgba(234, 91, 12, 0.3);
    border-radius: 50%;
    margin-bottom: 8px;
}

.empty-state-icon-wrapper svg {
    color: #ea5b0c;
    opacity: 0.8;
}

.empty-state-modern .empty-state-title {
    font-family: 'Big John', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin: 0;
}

.empty-state-modern .empty-state-description {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #ccc;
    max-width: 400px;
    margin: 0;
}

.empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.2) 0%, rgba(234, 91, 12, 0.1) 100%);
    border: 1px solid rgba(234, 91, 12, 0.4);
    border-radius: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ea5b0c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.empty-state-action:hover {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.3) 0%, rgba(234, 91, 12, 0.15) 100%);
    border-color: rgba(234, 91, 12, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.3);
}

.empty-state-action svg {
    width: 16px;
    height: 16px;
}

/**
 * Cells View Styles - Grid, Ragone, and Table views
 */

/* ============================================================================
   GRID VIEW
   ============================================================================ */

.cells-grid-view {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 160px);
    /* Match FilterPanel height: 100vh - (ContextBar 60px + CommandBar 70px + gaps) */
    /* Unified padding like FilterPanel */
}

.cells-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding-top: 8px;
    /* Prevent top row cards from being clipped on hover */
    align-content: start;
    /* Grid startet oben, kein vertikales Stretching */
    max-height: calc(100vh - 160px);
    /* Fill down to the bottom, matching the FilterPanel/sidebar height
       (CommandBar 70px + ContextBar 60px + gaps). The old 250px reservation
       left a dead band for the former full-width pagination bar; the bar is
       now a floating pill, so the tiles extend to the bottom. */
    padding-bottom: 84px;
    /* Scroll clearance so the last row can clear the floating pagination
       pill + ASK ION button (bottom: 28px, height: 56px). */
    overflow-y: auto;
    /* Allow scrolling to see all cards on current page */
    overflow-x: hidden;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(234, 91, 12, 0.3) transparent;
}

.cells-grid::-webkit-scrollbar {
    width: 6px;
}

.cells-grid::-webkit-scrollbar-track {
    background: transparent;
}

.cells-grid::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.3);
    border-radius: 3px;
}

.cells-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.5);
}

/* Display Mode Variants */

.cells-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.cells-grid--detailed {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
}

.cells-grid--minimal {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

/* Cell Card */

.cell-card {
    position: relative;
    /* For compare button positioning */
    background: linear-gradient(135deg,
            rgba(55, 53, 50, 0.6) 0%,
            rgba(45, 45, 45, 0.8) 100%);
    border: 1px solid var(--filter-border);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
    height: 280px;
    overflow: hidden;
    box-sizing: border-box;
}

.cell-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: rgba(234, 91, 12, 0.4);
}

/* Compare mode active state */

.cell-card.in-compare {
    border-color: rgba(234, 91, 12, 0.6);
    background: linear-gradient(135deg,
            rgba(234, 91, 12, 0.1) 0%,
            rgba(45, 45, 45, 0.8) 100%);
}

/* Compare Toggle Button - Repositioned to avoid overlap */

.cell-card__compare-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    /* Ensure it's above cell image */
}

.cell-card__compare-toggle:hover {
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.4);
    color: #ea5b0c;
    transform: scale(1.1);
}

.cell-card__compare-toggle.active {
    background: #ea5b0c;
    border-color: #ea5b0c;
    color: white;
}

.cell-card__compare-toggle.active:hover {
    background: #ff6a1a;
    border-color: #ff6a1a;
}

/* Cell Image - Detailed Mode Only */

.cell-card__image {
    position: relative;
    width: 100%;
    height: 180px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05));
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

.cell-card__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.2);
}

.cell-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 12px;
    padding-right: 36px;
    /* Make space for compare button */
    border-bottom: 1px solid var(--filter-border);
}

.cell-card-title-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.cell-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--filter-text-primary);
    margin: 0;
}

.cell-card-chemistry {
    padding: 4px 10px;
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #ea5b0c;
    text-transform: uppercase;

}

.cell-card-manufacturer-badge {
    padding: 4px 10px;
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #ea5b0c;
    text-transform: uppercase;

}

.cell-card-chemistry-footer {
    padding: 3px 8px;
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #ea5b0c;
    text-transform: uppercase;

}

.cell-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.cell-card-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-label {
    font-size: 13px;
    color: var(--filter-text-secondary);
    font-weight: 500;
}

.metric-value {
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--filter-text-primary);
}

.cell-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--filter-border);
    font-size: 12px;
    color: var(--filter-text-tertiary);
}

/* ============================================================================
   DISPLAY MODE VARIATIONS
   ============================================================================ */

/* Compact Mode - Smaller cards, reduced padding */

.cells-grid--compact .cell-card {
    padding: 14px;
    height: 240px;
}

.cells-grid--compact .cell-card-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
}

.cells-grid--compact .cell-card-title {
    font-size: 14px;
}

.cells-grid--compact .cell-card-chemistry {
    display: none;
    /* Hidden in compact - chemistry shown in footer */
}

.cells-grid--compact .cell-card-manufacturer-badge {
    font-size: 10px;
    padding: 3px 8px;
}

.cells-grid--compact .cell-card-chemistry-footer {
    font-size: 9px;
    padding: 2px 6px;
}

.cells-grid--compact .cell-card-body {
    gap: 8px;
    margin-bottom: 12px;
}

.cells-grid--compact .metric-label {
    font-size: 11px;
}

.cells-grid--compact .metric-value {
    font-size: 12px;
}

.cells-grid--compact .cell-card-footer {
    font-size: 11px;
}

/* Detailed Mode - Larger cards with image */

.cells-grid--detailed .cell-card {
    padding: 24px;
    height: 360px;
}

.cells-grid--detailed .cell-card-title {
    font-size: 18px;
}

.cells-grid--detailed .cell-card-chemistry {
    font-size: 12px;
}

.cells-grid--detailed .metric-label {
    font-size: 14px;
}

.cells-grid--detailed .metric-value {
    font-size: 16px;
}

/* Minimal Mode - Smallest cards, essential info only */

.cells-grid--minimal .cell-card {
    padding: 12px;
    height: 200px;
}

.cells-grid--minimal .cell-card-header {
    margin-bottom: 8px;
    padding-bottom: 6px;
    padding-right: 28px;
}

.cells-grid--minimal .cell-card-title {
    font-size: 13px;
}

.cells-grid--minimal .cell-card-chemistry {
    display: none;
    /* Hide in minimal mode */
}

.cells-grid--minimal .cell-card-body {
    gap: 6px;
    margin-bottom: 0;
}

.cells-grid--minimal .cell-card-metric {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.cells-grid--minimal .metric-label {
    font-size: 10px;
}

.cells-grid--minimal .metric-value {
    font-size: 11px;
}

.cells-grid--minimal .cell-card-footer {
    display: none;
    /* Hide footer in minimal mode */
}

.cells-grid--minimal .cell-card__compare-toggle {
    width: 1.5rem;
    height: 1.5rem;
    top: 6px;
    right: 6px;
}

/* Responsive grid */

@media (max-width: 767px) {
    .cells-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .cells-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }
}

@media (min-width: 1441px) {
    .cells-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 24px;
    }
}

/* ============================================================================
   RAGONE VIEW
   ============================================================================ */

.cells-graph-view {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;
    /* Changed from column to support settings drawer */
    gap: 16px;
    /* Space between plot and settings drawer */
    height: 100%;
    min-height: 600px;
    overflow: hidden;
    /* Prevent overflow when drawer animates */
    /* Match FilterPanel height */
    /* Unified padding */
}

/* Fullscreen mode: remove gap and let plot take full width */

.cells-graph-view.plot-fullscreen {
    gap: 0;
}

.ragone-plot-container {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 600px;
    max-height: calc(100vh - 110px);
    /* Match app wrapper height */
    /* Glassmorphism matching key-spec-card tiles */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ragone-plot-header {
    padding: 12px 20px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ragone-plot-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ragone-plot-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.8;
}

.ragone-plot-icon svg {
    stroke: #ea5b0c;
    stroke-width: 2;
}

.ragone-plot-label {
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;

    color: #f1f5f9;
}

.ragone-plot-count {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    padding: 2px 8px;
    background: rgba(234, 91, 12, 0.15);
    border-radius: 4px;
    border: 1px solid rgba(234, 91, 12, 0.3);
}

.ragone-plot-chart {
    flex: 1;
    display: flex;
    padding: 20px;
    width: 100%;
    height: 100%;
    min-height: 600px;
    overflow: hidden;
    position: relative;
}

/* Ragone Info Button (Pareto Explanation) */

.ragone-info-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 6px;
    color: #ea5b0c;
    cursor: pointer;
    transition: all 0.2s;
}

.ragone-info-btn:hover {
    background: rgba(234, 91, 12, 0.25);
    border-color: #ea5b0c;
    transform: scale(1.05);
}

.ragone-info-btn:active {
    transform: scale(0.95);
}

/* ============================================================================
   TABLE VIEW
   ============================================================================ */

.cells-table-view {
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 250px);
    /* Match grid: app wrapper (110px) + context+gap (80px) = 190px */
    overflow: hidden;
    /* No scrolling - use pagination instead */
    display: flex;
    flex-direction: column;
}

.cells-table-container {
    flex: 1;
    /* Glassmorphism matching key-spec-card tiles */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    overflow-x: auto;
    overflow-y: auto;
}

.cells-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

.cells-table thead {
    background: rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cells-table th {
    padding: 14px 16px;
    text-align: left;
    font-family: 'Big John', sans-serif;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    font-size: 12px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.cells-table th .unit-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 11px;
    text-transform: none;

    color: rgba(255, 255, 255, 0.6);
}

.cells-table th:hover {
    background: rgba(234, 91, 12, 0.15);
}

.cells-table .compare-column-header {
    width: 50px;
    min-width: 50px;
    text-align: center;
    cursor: default;
    padding: 14px 8px;
}

.cells-table .compare-column-header:hover {
    background: transparent;
}

.cells-table .compare-column-cell {
    width: 50px;
    min-width: 50px;
    text-align: center;
    padding: 8px !important;
}

.cells-table .compare-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    margin: 0 auto;
}

.cells-table .compare-checkbox:hover {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.4);
    color: var(--primary);
    transform: scale(1.05);
}

.cells-table .compare-checkbox.active {
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.5);
    color: var(--accent);
}

.cells-table .row-number-header {
    width: 50px;
    min-width: 50px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    cursor: default;
}

.cells-table .row-number-header:hover {
    background: rgba(0, 0, 0, 0.2);
}

.cells-table .sortable-header {
    position: relative;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.cells-table .sortable-header:hover {
    background: rgba(234, 91, 12, 0.25);
    color: #ea5b0c;
}

.cells-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.2s;
}

.cells-table tbody tr:hover {
    background: rgba(234, 91, 12, 0.08);
}

/* Locked / Shadow Rows */

.cells-table tbody tr.row--locked {
    opacity: 0.5;
}

.cells-table tbody tr.row--locked:hover {
    background: transparent;
}

.cells-table tbody tr.row--locked .lock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, 0.4);
}

/* Bug B: not-yet-opened cell at today's deep-dive limit — still clickable
   (opens the DailyLimitModal), so keep it distinct from the not-allowed
   shadow-lock row above. */

.cells-table tbody tr.row--limit-locked {
    opacity: 0.55;
}

.cells-table tbody tr.row--limit-locked .lock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, 0.4);
}

/* Row Height Variants */

.cells-table-container[data-row-height="compact"] .cells-table th,
.cells-table-container[data-row-height="compact"] .cells-table td {
    padding: 8px 12px;
    font-size: 13px;
}

.cells-table-container[data-row-height="normal"] .cells-table th,
.cells-table-container[data-row-height="normal"] .cells-table td {
    padding: 14px 16px;
    font-size: 14px;
}

.cells-table-container[data-row-height="spacious"] .cells-table th,
.cells-table-container[data-row-height="spacious"] .cells-table td {
    padding: 20px 20px;
    font-size: 15px;
}

/* Alternate Row Colors */

.cells-table-container[data-alternate-rows="true"] .cells-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.2);
}

/* Column Borders */

.cells-table-container[data-column-borders="true"] .cells-table td,
.cells-table-container[data-column-borders="true"] .cells-table th {
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.cells-table-container[data-column-borders="true"] .cells-table td:last-child,
.cells-table-container[data-column-borders="true"] .cells-table th:last-child {
    border-right: none;
}

/* Hover Highlight */

.cells-table-container[data-hover-highlight="true"] .cells-table tbody tr:hover {
    background: rgba(234, 91, 12, 0.15);
}

.cells-table td {
    padding: 14px 16px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}

.row-number {
    width: 50px;
    min-width: 50px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    font-family: 'Roboto Mono', monospace;
    background: rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.cell-name {
    font-family: 'Big John', sans-serif;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.cell-number {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

/* Table Toolbar */

.table-toolbar {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-column-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 6px;
    color: #ea5b0c;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-column-picker:hover {
    background: rgba(234, 91, 12, 0.25);
    border-color: rgba(234, 91, 12, 0.5);
}

/* Column Picker Overlay */

.column-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

.column-picker-panel {
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.95) 0%, rgba(45, 42, 38, 0.98) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    min-width: 320px;
    max-width: 400px;
    animation: slideUp 0.3s ease-out;
}

.column-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.column-picker-header h3 {
    margin: 0;
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;

}

.column-picker-header button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.column-picker-header button:hover {
    color: #ea5b0c;
}

.column-picker-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.column-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.column-picker-item:hover {
    background: rgba(234, 91, 12, 0.1);
}

.column-picker-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #ea5b0c;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive table */

@media (max-width: 767px) {
    .cells-table {
        font-size: 12px;
    }

    .cells-table th,
    .cells-table td {
        padding: 10px 12px;
    }

    /* Hide some columns on mobile */
    .cells-table th:nth-child(n+5),
    .cells-table td:nth-child(n+5) {
        display: none;
    }
}

/* ============================================================================
   LIGHT THEME
   ============================================================================ */

body.light-theme .cell-card {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(250, 250, 250, 0.95) 100%);
}

body.light-theme .ragone-plot-container,
body.light-theme .cells-table-container {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(250, 250, 250, 0.95) 100%);
}

body.light-theme .cells-table thead {
    background: rgba(0, 0, 0, 0.04);
}

body.light-theme .cells-table tbody tr:hover {
    background: rgba(234, 91, 12, 0.05);
}

body.light-theme .cells-table .sortable-header:hover {
    background: rgba(234, 91, 12, 0.15);
    color: #d14200;
}

/* ============================================================================
   PAGINATION CONTROLS
   ============================================================================ */

.pagination-controls {
    position: fixed;
    bottom: 28px;
    /* Same baseline as the ASK ION launcher → the two sit flush side by side */
    left: 380px;
    /* After sidebar (96px when the sidebar is collapsed, see rule below) */
    right: 200px;
    /* Keep clear of the bottom-right ASK ION button */
    width: fit-content;
    /* Only as wide as its content — not a full-width band */
    max-width: calc(100% - 380px - 220px);
    /* Safety cap so the pill stays within the band */
    margin: 0 auto;
    /* Center the content-width pill within the [left, right] band */
    height: 56px;
    /* Match the launcher height */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0 1.5rem;
    /* Vertical centering comes from height + align-items */
    z-index: 100;
    /* Above content but below modals */
    /* Glassmorphism */
    background: linear-gradient(135deg, rgba(45, 42, 38, 0.95) 0%, rgba(40, 38, 35, 0.98) 100%);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Adjust pagination when sidebar is collapsed */

body:has(.adaptive-sidebar--collapsed) .pagination-controls {
    left: 96px;
    /* Collapsed sidebar width + margins */
}

.pagination-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--filter-border);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.3);
    color: #ea5b0c;
    transform: translateX(0);
}

.pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.pagination-current {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1rem;
}

.pagination-divider {
    color: var(--text-tertiary);
}

.pagination-total {
    font-weight: 600;
    color: var(--text-secondary);
}

.pagination-count {
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--filter-border);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

/* Responsive */

/* Below ~1200px the compact side-by-side pill no longer fits next to the
   sidebar + FAB. Lift it to a bar ABOVE the launcher instead — still no
   overlap, just a different vertical band. */

@media (max-width: 1200px) {
    .pagination-controls {
        right: 20px;
        bottom: 96px;
        /* Clears the 56px FAB + its 28px offset */
        width: auto;
        max-width: none;
        height: auto;
        margin: 0;
        flex-wrap: wrap;
        padding: 0.75rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .pagination-controls {
        left: 12px;
        right: 12px;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .pagination-count {
        display: none;
    }
}

/* Benchmarking Page - Score, My, Free plots layout */

.benchmarking-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
    /* Full viewport minus header */
    height: 100%;
    background: var(--bg-primary);
}

/* ============================================
   HEADER & VIEW SWITCHER
   ============================================ */

.benchmarking-header {
    padding: 1.5rem 2rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.view-switcher {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-primary);
    padding: 0.5rem;
    border-radius: 12px;
    width: fit-content;
}

.view-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.view-btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.3);
}

/* ============================================
   CONTENT AREA
   ============================================ */

.benchmarking-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.benchmarking-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* ============================================
   PLACEHOLDER LAYOUT (Temporary)
   ============================================ */

.plot-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 1rem;
    overflow-y: auto;
}

.plot-placeholder h2 {
    font-family: 'Big John', sans-serif;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.plot-placeholder p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.placeholder-content {
    display: flex;
    gap: 2rem;
    height: calc(100% - 120px);
}

.placeholder-main {
    flex: 1;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.placeholder-chart {
    font-size: 1.25rem;
    color: var(--text-tertiary);
    text-align: center;
    padding: 4rem;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    width: 100%;
}

.placeholder-sidebar {
    flex-shrink: 0;
    width: 320px;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
}

.placeholder-sidebar h3 {
    font-family: 'Big John', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.placeholder-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.placeholder-sidebar li {
    padding: 0.75rem 0;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.placeholder-sidebar li:last-child {
    border-bottom: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .placeholder-content {
        flex-direction: column;
    }

    .placeholder-sidebar {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .benchmarking-header {
        padding: 1rem;
    }

    .view-switcher {
        width: 100%;
    }

    .view-btn {
        flex: 1;
        justify-content: center;
        padding: 0.75rem 1rem;
    }

    .view-btn span {
        display: none;
    }

    .plot-placeholder {
        padding: 1rem;
    }
}

/* Benchmarking page (Score, My, Free plots) */

/* ========================================
   BENCHMARKING WORKFLOW - 4-STEP GUIDED PROCESS
   ======================================== */

/* Main Container */

.benchmarking-workflow {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-primary);
}

/* Workflow Content Area - Fills remaining space */

.workflow-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Header */

.workflow-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 1rem;
    background: transparent;
    z-index: 10;
}

.workflow-header h1 {
    font-family: 'Big John', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;

    color: var(--text-primary);
    margin: 0;
}

/* Progress Indicator */

.workflow-progress {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: rgba(50, 50, 50, 0.7);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.workflow-step-indicator {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 120px;
}

.step-dot-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    font-family: 'Big John', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.step-dot-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;

    opacity: 0.6;
    text-align: center;
    transition: all 0.3s ease;
}

.step-dot.active .step-dot-circle {
    background: rgba(13, 124, 153, 0.2);
    border-color: #0d7c99;
    color: #0d7c99;
}

.step-dot.active .step-dot-label {
    opacity: 0.8;
    color: #0d7c99;
}

.step-dot.current .step-dot-circle {
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
    border-color: #ea5b0c;
    color: white;
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.5);
}

.step-dot.current .step-dot-label {
    opacity: 1;
    color: #ea5b0c;
    font-weight: 600;
}

.step-connector {
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    margin-top: 17px;
}

.workflow-step-labels {
    display: none;
}

/* Reset Button */

.workflow-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem 1.25rem;
    height: 44px;
    background: rgba(50, 50, 50, 0.7);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-family: 'Big John', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;

    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.workflow-reset-btn:hover {
    background: rgba(234, 91, 12, 0.2);
    border-color: #ea5b0c;
    color: #ea5b0c;
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(234, 91, 12, 0.3);
}

.workflow-reset-btn:active {
    transform: translateY(-1px);
}

/* Step Content */

.workflow-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    width: 100%;
}

.workflow-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.loading-spinner {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Footer Navigation */

.workflow-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0;
    background: transparent;
    z-index: 10;
    align-items: center;
}

.workflow-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem 1.25rem;
    height: 44px;
    background: rgba(50, 50, 50, 0.7);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-family: 'Big John', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;

    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.workflow-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.workflow-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.workflow-nav-btn--next {
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
    border-color: #ea5b0c;
    color: white;
    box-shadow: 0 8px 32px rgba(234, 91, 12, 0.4);
}

.workflow-nav-btn--next:hover:not(:disabled) {
    box-shadow: 0 12px 40px rgba(234, 91, 12, 0.6);
    transform: translateY(-3px);
}

.workflow-nav-btn--back {
    justify-self: start;
}

.workflow-nav-btn--next {
    justify-self: end;
}

.workflow-nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-self: end;
}

.workflow-cell-count {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Cell Count Chain - Progressive Filtering Visualization */

.cell-count-chain {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(50, 50, 50, 0.7);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.count-chain-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.375rem 0.5rem;
    min-width: 50px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.count-chain-step.active {
    background: rgba(234, 91, 12, 0.15);
    border-color: #ea5b0c;
    box-shadow: 0 0 12px rgba(234, 91, 12, 0.3);
}

.count-chain-step.passed {
    background: rgba(13, 124, 153, 0.1);
    border-color: rgba(13, 124, 153, 0.3);
}

.count-chain-step.future {
    opacity: 0.4;
}

.count-chain-number {
    font-family: 'Big John', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.count-chain-step.active .count-chain-number {
    color: #ea5b0c;
}

.count-chain-step.passed .count-chain-number {
    color: #0d7c99;
}

.count-chain-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.5rem;
    text-transform: uppercase;

    color: var(--text-secondary);
    opacity: 0.7;
}

.count-chain-arrow {
    color: rgba(255, 255, 255, 0.2);
    transition: color 0.3s ease;
}

.count-chain-arrow.passed {
    color: rgba(13, 124, 153, 0.5);
}

.count-chain-arrow.future {
    opacity: 0.3;
}

.workflow-nav-feedback {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.workflow-nav-feedback strong {
    color: #ea5b0c;
    font-weight: 500;
}

.workflow-nav-feedback .arrow {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 0.25rem;
}

/* ========================================
   STEP 1: FUNDAMENTALS
   ======================================== */

.step-fundamentals {
    height: 100%;
    overflow: hidden;
}

.step-fundamentals-card {
    display: flex;
    flex-direction: column;
    background: rgba(50, 50, 50, 0.7);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 1rem 1.5rem;
    height: 100%;
    overflow: hidden;
}

.step-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.step-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem 0;
}

.step-title svg {
    color: #ea5b0c;
    width: 18px;
    height: 18px;
}

.step-title h2 {
    font-family: 'Big John', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;

    color: var(--text-primary);
    margin: 0;
}

.step-description {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

.fundamentals-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

.filter-column {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
    min-height: 0;
}

.filter-column:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(234, 91, 12, 0.2);
}

.filter-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.filter-column-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-column h3 {
    font-family: 'Big John', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;

    color: var(--text-primary);
    margin: 0;
}

.filter-count {
    font-family: 'Roboto', sans-serif;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-right: 0.5rem;
}

.filter-options::-webkit-scrollbar {
    width: 6px;
}

.filter-options::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.filter-options::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.4);
    border-radius: 3px;
}

.filter-options::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.6);
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem;
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9375rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.filter-option--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.filter-option--disabled:hover {
    background: transparent;
}

.filter-option--disabled .filter-option-label {
    text-decoration: line-through;
}

.filter-option--disabled .filter-option-count {
    opacity: 0.5;
}

.filter-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #ea5b0c;
}

.filter-option input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.filter-option-label {
    flex: 1;
}

.filter-option-count {
    padding: 0.25rem 0.625rem;
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 12px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ea5b0c;
}

.filter-empty {
    padding: 1rem;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
}

.fundamentals-feedback {
    margin-bottom: 2rem;
}

.feedback-box {
    text-align: center;
    padding: 1.5rem;
    background: rgba(234, 91, 12, 0.1);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 8px;
}

.feedback-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.feedback-count {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.count-number {
    font-family: 'Big John', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ea5b0c;
}

.count-number--large {
    font-size: 2.5rem;
}

.count-total {
    font-family: 'Roboto', sans-serif;
    font-size: 1.25rem;
    color: var(--text-secondary);
}

.feedback-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: #0d7c99;
}

.feedback-status--success {
    color: #0d7c99;
}

/* ========================================
   STEP 2: PERFORMANCE - MY PLOT FULL IMPLEMENTATION
   3-Column Layout: Requirements Panel | Plot | Settings Drawer
   ======================================== */

.step-performance {
    height: 100%;
    overflow: hidden;
}

.step-performance-card {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Removed double glassmorphism - child elements have it */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Left Panel: Requirements Input */

.performance-requirements-panel {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: rgba(50, 50, 50, 0.7);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.requirements-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(234, 91, 12, 0.08);
    border-bottom: 1px solid rgba(234, 91, 12, 0.2);
}

.requirements-header svg {
    color: #ea5b0c;
}

.requirements-header h3 {
    font-family: 'Big John', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;

    color: var(--text-primary);
    margin: 0;
}

.requirements-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    flex: 1;
    overflow-y: auto;
}

/* Shared Requirement Input Styles (Step 2 & 3) */

.requirement-input-group,
.weight-slider {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.requirement-label,
.weight-slider-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.requirement-unit,
.weight-value {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.requirement-input {
    width: 100%;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.requirement-input:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.requirement-input:focus {
    outline: none;
    border-color: #ea5b0c;
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.15);
}

.requirement-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.requirement-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.requirement-reset-btn:hover:not(:disabled) {
    background: rgba(234, 91, 12, 0.1);
    border-color: #ea5b0c;
    color: #ea5b0c;
}

.requirement-reset-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.requirement-reset-btn svg {
    transition: transform 0.3s ease;
}

.requirement-reset-btn:hover:not(:disabled) svg {
    transform: rotate(180deg);
}

.requirement-summary {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;

    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.summary-count {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.summary-number {
    font-family: 'Big John', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ea5b0c;
}

.summary-total {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: var(--text-secondary);
}

/* DCC Empty State - shown inside plot area when no DCC data available */

.dcc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 3rem 2rem;
    text-align: center;
    color: #e2e8f0;
}

.dcc-empty-state-icon {
    color: #fbbf24;
    margin-bottom: 1.25rem;
    opacity: 0.7;
}

.dcc-empty-state h4 {
    font-family: 'Big John', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fbbf24;
    margin: 0 0 1rem;
}

.dcc-empty-state p {
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 0 0.5rem;
}

.dcc-empty-state-hint {
    margin-top: 1rem !important;
    padding: 0.75rem 1.25rem;
    background: rgba(234, 91, 12, 0.08);
    border: 1px solid rgba(234, 91, 12, 0.2);
    border-radius: 8px;
    color: #cbd5e1 !important;
}

/* Center: Main My Plot Container */

.workflow-my-plot-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(50, 50, 50, 0.7);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(80px) saturate(250%);
    min-width: 0;
}

.workflow-my-plot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(234, 91, 12, 0.08);
    border-bottom: 1px solid rgba(234, 91, 12, 0.2);
}

.workflow-my-plot-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Big John', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;

    color: var(--text-primary);
}

.workflow-my-plot-title svg {
    color: #ea5b0c;
}

.workflow-my-plot-count {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;

    color: var(--text-secondary);
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.workflow-my-plot-main {
    flex: 1;
    min-height: 0;
    padding: 1rem;
}

/* Flipcard for My Plot */

.workflow-my-plot-flipcard {
    flex: 1;
    min-width: 0;
    perspective: 1000px;
    position: relative;
}

.workflow-my-plot-flipcard .flipcard-front,
.workflow-my-plot-flipcard .flipcard-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.workflow-my-plot-flipcard .flipcard-front,
.workflow-my-plot-flipcard .flipcard-back {
    padding: 0;
}

.workflow-my-plot-flipcard .flipcard-front {
    transform: rotateY(0deg);
}

.workflow-my-plot-flipcard .flipcard-back {
    transform: rotateY(180deg);
}

.workflow-my-plot-flipcard.flipped .flipcard-front {
    transform: rotateY(-180deg);
}

.workflow-my-plot-flipcard.flipped .flipcard-back {
    transform: rotateY(0deg);
}

/* Flip button - matches fact sheet style */

.workflow-my-plot-flipcard .flip-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(234, 91, 12, 0.2);
    border: 1px solid var(--brand);
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workflow-my-plot-flipcard .flip-btn:hover {
    background: var(--brand);
    color: white;
    transform: scale(1.1);
}

.workflow-my-plot-flipcard .flip-btn-back {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

.workflow-my-plot-info {
    display: flex;
    flex-direction: column;
    background: rgba(50, 50, 50, 0.7);
    backdrop-filter: blur(80px) saturate(250%);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.workflow-my-plot-info-content {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    font-family: 'Roboto', sans-serif;
    color: var(--text-primary);
    line-height: 1.7;
}

.workflow-my-plot-info-content .info-intro {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.workflow-my-plot-info-content .info-concept {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    white-space: pre-line;
}

.workflow-my-plot-info-content .info-how-to h4 {
    font-family: 'Big John', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #ea5b0c;
    margin: 0 0 0.75rem 0;
}

.workflow-my-plot-info-content .info-how-to ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.workflow-my-plot-info-content .info-how-to li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.workflow-my-plot-info-content .info-how-to li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #ea5b0c;
}

/* =====================================================
   STEP 3: PRIORITIES - Score Plot with Weight Sliders
   ===================================================== */

.step-priorities {
    height: 100%;
    overflow: hidden;
}

.step-priorities-card {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: rgba(50, 50, 50, 0.7);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 1rem;
}

/* Left Panel: Score Weight Controls */

.priorities-weight-panel {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: rgba(50, 50, 50, 0.7);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.weight-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(234, 91, 12, 0.08);
    border-bottom: 1px solid rgba(234, 91, 12, 0.2);
}

.weight-header svg {
    color: #ea5b0c;
}

.weight-header h3 {
    font-family: 'Big John', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;

    color: var(--text-primary);
    margin: 0;
    flex: 1;
}

.weight-total {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875rem;
    color: #0d7c99;
    font-weight: 600;
}

.weight-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    flex: 1;
    overflow-y: auto;
}

/* Weight Slider Component */

.weight-slider {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.weight-slider-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.weight-slider-header svg {
    flex-shrink: 0;
}

.weight-label {
    flex: 1;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.weight-value {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875rem;
    color: #ea5b0c;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}

.weight-range {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.weight-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ea5b0c;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.weight-range::-webkit-slider-thumb:hover {
    background: #ff7a33;
    transform: scale(1.1);
}

.weight-range::-webkit-slider-thumb:active {
    transform: scale(0.95);
}

.weight-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ea5b0c;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.weight-range::-moz-range-thumb:hover {
    background: #ff7a33;
    transform: scale(1.1);
}

.weight-range::-moz-range-thumb:active {
    transform: scale(0.95);
}

/* Slider track progress */

.weight-range::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #ea5b0c 0%, #ea5b0c var(--value, 50%), rgba(255, 255, 255, 0.1) var(--value, 50%), rgba(255, 255, 255, 0.1) 100%);
}

.weight-range::-moz-range-track {
    background: rgba(255, 255, 255, 0.1);
}

.weight-range::-moz-range-progress {
    background: #ea5b0c;
    height: 6px;
    border-radius: 3px;
}

/* Weight Reset Button */

.weight-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
}

.weight-reset-btn:hover {
    background: rgba(234, 91, 12, 0.15);
    border-color: #ea5b0c;
    color: #ea5b0c;
}

.weight-reset-btn svg {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.weight-reset-btn:hover svg {
    transform: rotate(180deg);
}

/* Weight Summary */

.weight-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(13, 124, 153, 0.08);
    border: 1px solid rgba(13, 124, 153, 0.2);
    border-radius: 8px;
    margin-top: 0.5rem;
}

.summary-label {
    font-family: 'Big John', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.6);
}

.summary-count {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.summary-number {
    font-family: 'Big John', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #0d7c99;
    line-height: 1;
}

.summary-total {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Center: Score Bar Chart */

.priorities-chart-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(26, 26, 26, 0.6);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(80px) saturate(250%);
    min-width: 0;
    width: 100%;
}

.priorities-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: rgba(50, 50, 50, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.priorities-chart-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Big John', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;

    color: var(--text-primary);
}

.priorities-chart-title svg {
    color: #ea5b0c;
    flex-shrink: 0;
}

.priorities-chart-count {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;

    color: var(--text-secondary);
    margin-left: 0.5rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.priorities-chart-main {
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    padding: 1rem;
}

/* Legacy performance-controls (keep for compatibility) */

.performance-controls {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.control-section {
    background: rgba(50, 50, 50, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
}

.control-section h3 {
    font-family: 'Big John', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;

    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.control-group {
    margin-bottom: 1rem;
}

.control-group:last-child {
    margin-bottom: 0;
}

/* Only apply to labels within control groups in workflow */

.control-group label,
.control-group .control-label {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.control-group select,
.control-group input,
.control-select,
.control-input {
    width: 100%;
    padding: 0.625rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9375rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.control-group select:focus,
.control-group input:focus,
.control-select:focus,
.control-input:focus {
    outline: none;
    border-color: #ea5b0c;
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.control-reset-btn {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.control-reset-btn:hover {
    background: rgba(234, 91, 12, 0.1);
    border-color: #ea5b0c;
    color: #ea5b0c;
}

.zone-inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.zone-input-group {
    display: flex;
    flex-direction: column;
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.input-with-unit input {
    flex: 1;
}

.input-unit {
    position: absolute;
    right: 0.75rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    pointer-events: none;
}

.requirement-zone-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.performance-plot {
    background: rgba(50, 50, 50, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.performance-plot h3 {
    font-family: 'Big John', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;

    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.performance-feedback {
    padding: 1rem;
    background: rgba(13, 124, 153, 0.1);
    border: 1px solid rgba(13, 124, 153, 0.3);
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9375rem;
    color: #0d7c99;
    margin-top: 1rem;
}

/* Legacy priorities styles (deprecated, using unified layout above) */

/* ========================================
   STEP 4: CHAMPION
   ======================================== */

.step-champion {
    height: 100%;
    overflow: hidden;
}

.step-champion-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: rgba(50, 50, 50, 0.7);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 1rem;
}

.champion-table-wrapper {
    flex: 1;
    background: rgba(26, 26, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow-y: auto;
    overflow-x: hidden;
}

.champion-table {
    width: 100%;
    border-collapse: collapse;
}

.champion-table thead {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.champion-table th {
    padding: 1rem;
    text-align: left;
    font-family: 'Big John', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;

    color: var(--text-secondary);
}

.champion-table th:first-child {
    width: 60px;
    text-align: center;
}

.champion-table th:nth-child(2) {
    width: 60px;
    text-align: center;
}

.champion-table th:last-child {
    width: 80px;
    text-align: center;
}

.champion-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.champion-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.champion-table tbody tr.top-champion {
    background: rgba(234, 91, 12, 0.1);
}

.champion-table tbody tr.selected {
    background: rgba(13, 124, 153, 0.15);
}

.champion-table td {
    padding: 1rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.champion-table td:first-child {
    text-align: center;
    font-family: 'Big John', sans-serif;
    font-weight: 700;
    color: #ea5b0c;
}

.champion-table td:nth-child(2) {
    text-align: center;
    font-size: 1.5rem;
}

.champion-table td:last-child {
    text-align: center;
}

.champion-table .cell-name {
    font-weight: 500;
    color: var(--text-primary);
}

.champion-table .manufacturer-name {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.champion-table .score-value {
    font-weight: 600;
    color: #0d7c99;
}

.champion-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #ea5b0c;
}

.champion-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0.5rem 0;
    flex-shrink: 0;
}

.champion-action-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
    border: none;
    border-radius: 8px;
    font-family: 'Big John', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;

    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.champion-action-btn:hover {
    box-shadow: 0 8px 30px rgba(234, 91, 12, 0.5);
    transform: translateY(-3px);
}

.champion-action-btn:active {
    transform: translateY(-1px);
}

.champion-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.rank-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    font-family: 'Big John', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.rank-badge--champion {
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.3);
}

.col-rank,
.col-image,
.col-select {
    text-align: center !important;
}

/* Cell Image Column */

.champion-cell-image {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    aspect-ratio: 1 / 1;
}

.champion-cell-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(20, 20, 20, 0.3);
}

.champion-cell-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.625rem;
    text-align: center;
}

.top-champion .champion-cell-image {
    border-color: #ea5b0c;
    box-shadow: 0 0 12px rgba(234, 91, 12, 0.3);
}

.top-champion .champion-cell-image-placeholder {
    color: #ea5b0c;
}

/* Compare Toggle Button */

.compare-toggle-btn {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-family: 'Roboto', sans-serif;
}

.compare-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.compare-toggle-btn.active {
    background: rgba(234, 91, 12, 0.15);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.compare-toggle-btn.active:hover {
    background: rgba(234, 91, 12, 0.25);
}

/* Remove button state (in compare, shows Remove instead of Added) */

.compare-toggle-btn.active.remove {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.5);
    color: rgba(220, 53, 69, 0.9);
}

.compare-toggle-btn.active.remove:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.7);
}

/* Input with Slider Layout */

.input-with-slider {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Requirement Range Sliders - Same design as weight sliders */

.req-range-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.req-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ea5b0c;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.req-range-slider::-webkit-slider-thumb:hover {
    background: #ff7a33;
    transform: scale(1.1);
}

.req-range-slider::-webkit-slider-thumb:active {
    transform: scale(0.95);
}

.req-range-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ea5b0c;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.req-range-slider::-moz-range-thumb:hover {
    background: #ff7a33;
    transform: scale(1.1);
}

.req-range-slider::-moz-range-thumb:active {
    transform: scale(0.95);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

@media (max-width: 1400px) {
    .fundamentals-filters {
        grid-template-columns: repeat(2, 1fr);
    }

    .step-performance,
    .step-priorities {
        grid-template-columns: 350px 1fr;
    }
}

/* ========================================
   STEP 3: CELL LIST (NEW)
   ======================================== */

.step-cell-list {
    height: 100%;
    overflow: hidden;
}

.step-cell-list-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: rgba(50, 50, 50, 0.7);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 1rem;
}

.cell-list-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cell-list-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ea5b0c;
}

.cell-list-title h2 {
    font-family: 'Big John', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    color: var(--text-primary);
}

.cell-list-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.add-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
    border: none;
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-start;
    margin-top: 0.5rem;
}

.add-all-btn:hover {
    box-shadow: 0 4px 16px rgba(234, 91, 12, 0.4);
    transform: translateY(-1px);
}

.cell-list-table-wrapper {
    flex: 1;
    background: rgba(26, 26, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow-y: auto;
    overflow-x: hidden;
}

.cell-list-table {
    width: 100%;
    border-collapse: collapse;
}

.cell-list-table thead {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cell-list-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-family: 'Big John', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Sortable column headers */

.cell-list-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.cell-list-table th.sortable:hover {
    color: var(--color-primary);
}

.cell-list-table th.sortable span {
    display: inline;
}

.cell-list-table th.sortable svg {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.25rem;
    color: var(--color-primary);
}

.cell-list-table th.col-image {
    width: 60px;
    text-align: center;
}

.cell-list-table th.col-action {
    width: 100px;
    text-align: center;
}

.cell-list-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.cell-list-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cell-list-table tbody tr.in-compare {
    background: rgba(13, 124, 153, 0.1);
}

.cell-list-table td {
    padding: 0.75rem 1rem;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.cell-list-table td.col-image {
    text-align: center;
}

.cell-list-table td.col-action {
    text-align: center;
}

.cell-list-table .cell-name {
    font-weight: 500;
    color: var(--text-primary);
}

.cell-list-table .unit {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: 0.25rem;
}

.cell-list-table .cell-image {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cell-list-table .cell-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(20, 20, 20, 0.3);
}

.cell-list-table .cell-image-placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

.cell-list-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-secondary);
    font-family: 'Roboto', sans-serif;
    text-align: center;
    padding: 2rem;
}

@media (max-width: 1024px) {
    .cell-list-table {
        font-size: 0.8125rem;
    }

    .cell-list-table th,
    .cell-list-table td {
        padding: 0.5rem;
    }
}

@media (max-width: 768px) {
    .cell-list-table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 1024px) {
    .fundamentals-filters {
        grid-template-columns: 1fr;
    }

    .step-performance,
    .step-priorities {
        grid-template-columns: 1fr;
        height: auto;
    }

    .performance-controls,
    .priorities-weights {
        margin-bottom: 2rem;
    }

    .champion-table {
        font-size: 0.875rem;
    }

    .champion-table th,
    .champion-table td {
        padding: 0.75rem 0.5rem;
    }
}

@media (max-width: 768px) {
    .workflow-header {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .workflow-progress {
        width: 100%;
        justify-content: center;
    }

    .workflow-navigation {
        flex-direction: column;
        gap: 1rem;
    }

    .workflow-nav-feedback {
        order: -1;
    }

    .step-title {
        font-size: 1.25rem;
    }

    .champion-table {
        display: block;
        overflow-x: auto;
    }
}

/* NEW: Benchmarking 4-step guided workflow (Fundamentals → Performance → Priorities → Champion) */

/* ========================================
   COMPARE PAGE - Side-by-side comparison
   ======================================== */

.compare-page {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

.compare-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.compare-header h1 {
    margin: 0;
    font-size: 2rem;
    color: var(--text-primary);
}

.compare-header p {
    margin: 0.5rem 0 0 0;
    color: var(--text-secondary);
}

.btn-clear {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.compare-content {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    min-height: 400px;
}

.compare-empty {
    text-align: center;
    padding: 4rem 2rem;
}

.compare-empty h2 {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
}

.compare-empty p {
    color: var(--text-secondary);
    margin: 0;
}

/* ========================================
   COMPARISON TABLE
   ======================================== */

.compare-table-container {
    overflow-x: auto;
}

.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.compare-table thead {
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 10;
}

.compare-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.compare-table th:first-child {
    border-top-left-radius: 8px;
    position: sticky;
    left: 0;
    z-index: 11;
    background: var(--bg-primary);
}

.compare-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

.compare-table td:first-child {
    font-weight: 500;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.02);
    position: sticky;
    left: 0;
    z-index: 1;
}

.compare-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .compare-page {
        padding: 1rem;
    }

    .compare-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .compare-table th,
    .compare-table td {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
}

/* ========================================
   LIGHT THEME
   ======================================== */

[data-theme="light"] .compare-header {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .compare-content {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .compare-table th {
    background: rgba(0, 0, 0, 0.05);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .compare-table td {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .compare-table td:first-child {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .compare-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* Compare page for side-by-side cell comparison */

/* =========================================
   COMPARE QUALITY VIEW
   Quality comparison with normalized plots
   ========================================= */

.compare-quality-view {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.compare-quality-view.loading,
.compare-quality-view.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.compare-quality-view .loading-spinner,
.compare-quality-view .empty-state {
    text-align: center;
    color: var(--text-secondary);
    font-family: 'Roboto', sans-serif;
}

.compare-quality-view .empty-state .hint {
    margin-top: var(--space-sm);
    font-size: 14px;
    color: var(--text-tertiary);
}

/* ===== SECTION LAYOUT ===== */

.quality-comparison-section {
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    padding: 24px;
    margin-bottom: var(--space-3xl);
    transition: all 0.3s ease;
}

.quality-comparison-section:last-child {
    margin-bottom: 0;
}

.quality-comparison-section:hover {
    border-color: rgba(234, 91, 12, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.section-header {
    margin-bottom: var(--space-xl);
}

.section-title {
    font-family: 'Big John', sans-serif;
    font-size: 20px;
    font-weight: 700;

    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.section-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* ===== INFO BANNER ===== */

.info-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, rgba(13, 124, 153, 0.08) 0%, rgba(13, 124, 153, 0.04) 100%);
    border: 1px solid rgba(13, 124, 153, 0.2);
    border-left: 3px solid #0d7c99;
    border-radius: 8px;
    margin-bottom: var(--space-xl);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.info-banner svg {
    flex-shrink: 0;
    color: #0d7c99;
    margin-top: 2px;
}

.info-banner .info-banner-content {
    flex: 1;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.info-banner .info-banner-content strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

/* ===== PLOT CARDS ===== */

.quality-plot-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
}

.plot-card-header {
    margin-bottom: var(--space-lg);
}

.plot-title {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 600;

    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.plot-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: var(--text-tertiary);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.plot-container {
    width: 100%;
    min-height: 300px;
    position: relative;
}

/* ===== COMPARISON TABLE ===== */

.comparison-table-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    overflow-x: auto;
}

.table-title {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 600;

    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 var(--space-lg) 0;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
}

.comparison-table thead {
    border-bottom: 2px solid var(--border-medium);
}

.comparison-table th {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;

    color: var(--text-secondary);
}

.comparison-table th.metric-col {
    width: 180px;
    min-width: 180px;
}

.comparison-table th.cell-col {
    min-width: 160px;
}

.comparison-table th.best-col {
    width: 120px;
    text-align: center;
}

.cell-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.cell-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.comparison-table tbody tr {
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
}

.comparison-table tbody tr:hover {
    background: var(--bg-3);
}

.comparison-table tbody tr.highlight-row {
    background: rgba(13, 124, 153, 0.05);
}

.comparison-table tbody tr.highlight-row:hover {
    background: rgba(13, 124, 153, 0.08);
}

.comparison-table td {
    padding: var(--space-md) var(--space-lg);
    font-size: 13px;
}

.metric-label {
    font-weight: 500;
    color: var(--text-primary);
}

.value-cell {
    color: var(--text-secondary);
}

.value-cell .value-num {
    font-family: 'Big John', sans-serif;
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 3px;
}

.value-cell .value-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-tertiary);
}

.value-cell.best-value {
    background: rgba(16, 185, 129, 0.1);
    position: relative;
}

.value-cell.best-value::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    background: var(--success);
    border-radius: 0 2px 2px 0;
}

.best-cell {
    text-align: center;
}

.best-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    color: var(--success);
    text-transform: uppercase;

}

.best-indicator svg {
    flex-shrink: 0;
}

/* ===== QUALITY STATS GRID (Simplified) ===== */

.quality-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.quality-stat-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.quality-stat-card .stat-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.quality-stat-card .stat-name {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #cfd2d6;
    font-weight: 500;
}

.quality-stat-card .stat-value {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    color: #ea5b0c;
    margin-left: auto;
}

/* ===== AGING SUMMARY GRID ===== */

.aging-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.aging-summary-card {
    background: linear-gradient(135deg, rgba(40, 38, 35, 0.9) 0%, rgba(30, 28, 25, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 16px;
    transition: all 0.3s ease;
}

.aging-summary-card:hover {
    border-color: rgba(234, 91, 12, 0.3);
    transform: translateY(-2px);
}

.aging-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.aging-card-header .stat-color {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.aging-card-header .stat-name {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #fff;
    font-weight: 600;
}

.aging-metrics {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aging-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.aging-metric .metric-label {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #999;
}

.aging-metric .metric-value {
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    font-weight: 600;
}

.aging-metric .metric-value.positive {
    color: #4ade80;
}

.aging-metric .metric-value.negative {
    color: #f87171;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1200px) {
    .compare-quality-view {
        padding: var(--space-lg);
    }

    .comparison-table th.metric-col {
        width: 140px;
        min-width: 140px;
    }

    .comparison-table th.cell-col {
        min-width: 130px;
    }
}

@media (max-width: 768px) {
    .compare-quality-view {
        padding: var(--space-md);
    }

    .section-title {
        font-size: 18px;
    }

    .plot-card-header,
    .comparison-table-card {
        padding: var(--space-lg);
    }

    .comparison-table {
        font-size: 12px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: var(--space-sm) var(--space-md);
    }
}

/* Compare Quality view with normalized plots */

/* Section-based Layout Styles */

body {
  background: #0a0a0a;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(234, 91, 12, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(13, 124, 153, 0.04) 0%, transparent 50%);
  background-attachment: fixed;
}

/* Light Theme - Body Background */

[data-theme="light"] body {
  background: #fafafa;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(234, 91, 12, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(13, 124, 153, 0.03) 0%, transparent 50%);
}

.section-container {
  position: relative;
  width: 100%;
  min-height: 600px;
  padding: 0;
  /* Removed padding - sections handle their own spacing */
  background: transparent;
  backdrop-filter: none;
  border-radius: 24px;
  overflow: visible;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Light Theme - Section Container */

[data-theme="light"] .section-container {
  background: transparent;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: blur(80px) saturate(120%);
}

/* Section Description - Guide text */

.section-description {
  max-width: 1280px;
  margin: 0 auto 32px;
  padding: 0;
  text-align: center;
  z-index: 2;
  position: relative;
}

.section-description p {
  font-size: 14px;
  color: #999;
  line-height: 1.6;
  margin: 0;
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  
}

/* Light Theme - Section Description */

[data-theme="light"] .section-description p {
  color: #666;
}

/* Watermark */

.section-watermark {
  position: absolute;
  top: 80px;
  right: 80px;
  font-family: 'Big John', sans-serif;
  font-size: 72px;
  font-weight: 400;
  color: rgba(234, 91, 12, 0.18);
  
  pointer-events: none;
  user-select: none;
  z-index: 1;
  line-height: 1;
  text-align: right;
  text-shadow:
    0 0 40px rgba(234, 91, 12, 0.15),
    0 0 80px rgba(234, 91, 12, 0.08);
  animation: watermarkPulse 8s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(234, 91, 12, 0.1));
}

@keyframes watermarkPulse {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

/* Grid Layout (Default View) */

.section-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.section-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Flip Container */

.section-tile-flipper {
  perspective: 1000px;
  min-height: 140px;
}

.section-tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
}

.section-tile-flipper.flipped .section-tile-inner {
  transform: rotateY(180deg);
}

.section-tile {
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.8) 0%, rgba(45, 45, 45, 0.9) 100%);
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(234, 91, 12, 0.1);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Light Theme - Section Tiles */

[data-theme="light"] .section-tile {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 250, 250, 0.95) 100%);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(234, 91, 12, 0.15);
}

.section-tile-front {
  transform: rotateY(0deg);
  z-index: 2;
}

.section-tile-back {
  transform: rotateY(180deg);
  cursor: default;
  z-index: 1;
}

/* Hover nur auf Front, nicht auf Back */

.section-tile-flipper:not(.flipped):hover .section-tile-front {
  box-shadow:
    0 12px 32px rgba(234, 91, 12, 0.3),
    0 0 0 1px rgba(234, 91, 12, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-color: rgba(234, 91, 12, 0.5);
}

/* Flip Button */

.tile-flip-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(234, 91, 12, 0.15);
  border: 1px solid rgba(234, 91, 12, 0.3);
  color: #ea5b0c;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.tile-flip-btn:hover {
  background: rgba(234, 91, 12, 0.3);
  border-color: rgba(234, 91, 12, 0.6);
  transform: scale(1.1);
}

.tile-flip-back {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 16px;
}

.section-tile-label {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 16px;
  text-transform: uppercase;
  
  font-family: 'Big John', sans-serif;
}

/* Light Theme - Tile Labels and Values */

[data-theme="light"] .section-tile-label {
  color: #666;
}

.section-tile-value {
  font-size: 36px;
  color: #fff;
  line-height: 1;
  font-family: 'Big John', sans-serif;
}

[data-theme="light"] .section-tile-value {
  color: #1a1a1a;
}

.section-tile-unit {
  font-size: 18px;
  color: #bbb;
  margin-left: 8px;
}

[data-theme="light"] .section-tile-unit {
  color: #666;
}

/* Definition on back */

.section-tile-definition {
  padding: 8px;
}

.section-tile-definition h4 {
  font-size: 14px;
  color: #ea5b0c;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  
  font-family: 'Big John', sans-serif;
}

.section-tile-definition p {
  font-size: 13px;
  color: #ccc;
  line-height: 1.6;
  margin: 0;
}

/* Light Theme - Tile Definition */

[data-theme="light"] .section-tile-definition p {
  color: #4a4a4a;
}

/* Side Content (Radar, Plots, Images) */

.section-side-content {
  background: #1a1a1a;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Light Theme - Side Content */

[data-theme="light"] .section-side-content {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-side-content .radar-chart {
  height: 320px !important;
  width: 100%;
}

/* Sidebar links - Fly-out Animation */

.section-sidebar {
  position: sticky;
  top: 137px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 157px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(234, 91, 12, 0.3) transparent;
  align-self: start;
  padding: 0;
  animation: flyInLeft 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes flyInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.section-sidebar-header {
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.05) 100%);
  backdrop-filter: blur(80px);
  border-radius: 12px;
  border: 1px solid rgba(234, 91, 12, 0.2);
}

.section-sidebar-title {
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #ea5b0c;
  margin: 0;
  padding-top: 3px;
  
  text-align: center;
}

.section-sidebar-tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-sidebar::-webkit-scrollbar {
  width: 6px;
}

.section-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.section-sidebar::-webkit-scrollbar-thumb {
  background: rgba(234, 91, 12, 0.3);
  border-radius: 3px;
}

.section-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(234, 91, 12, 0.5);
}

.section-mini-tile {
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.95) 0%, rgba(39, 39, 39, 0.98) 100%);
  backdrop-filter: blur(80px);
  border-radius: 16px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(234, 91, 12, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(234, 91, 12, 0.2);
  position: relative;
  animation: slideInLeft 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: 100%;
  box-sizing: border-box;
}

/* Light Theme - Mini Tiles */

[data-theme="light"] .section-mini-tile {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.98) 100%);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(234, 91, 12, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(234, 91, 12, 0.2);
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.section-mini-tile:hover {
  box-shadow: 0 6px 20px rgba(234, 91, 12, 0.5);
  border-color: rgba(234, 91, 12, 0.4);
}

.section-mini-tile.active {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.3), rgba(234, 91, 12, 0.1));
  border-color: #ea5b0c;
  box-shadow: 0 6px 24px rgba(234, 91, 12, 0.8);
  transform: scale(1.1);
}

.section-mini-label {
  font-size: 10px;
  color: #aaa;
  margin-bottom: 4px;
  text-transform: uppercase;
  
}

/* Light Theme - Mini Labels and Values */

[data-theme="light"] .section-mini-label {
  color: #666;
}

.section-mini-value {
  font-size: 18px;
  color: #fff;
  font-family: 'Big John', sans-serif;
}

[data-theme="light"] .section-mini-value {
  color: #1a1a1a;
}

.section-mini-unit {
  font-size: 12px;
  color: #bbb;
  margin-left: 4px;
}

[data-theme="light"] .section-mini-unit {
  color: #666;
}

.section-mini-tile .close-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 16px;
  color: #ea5b0c;
  font-weight: bold;
  transition: all 0.2s ease;
}

.section-mini-tile.active:hover .close-icon {
  transform: translateX(-2px);
  text-shadow: 0 0 8px rgba(234, 91, 12, 0.6);
}

/* Detail Content - Rechts Spalte Grid Row 2 */

.section-detail-content {
  grid-column: 2;
  grid-row: 2;
  animation: slideInRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-detail-view {
  background: #1f1f1f;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  min-height: 500px;
}

.section-detail-view h3 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 16px;
}

.section-detail-view p {
  color: #aaa;
  font-size: 14px;
}

/* Quality Section */

.section-quality {
  min-height: 800px;
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 20px;
}

.quality-card {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quality-card .card-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(234, 91, 12, 0.3);
}

.quality-card svg {
  width: 100%;
  height: auto;
  stroke: #ea5b0c;
}

.quality-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quality-empty {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}

/* Batch Variation */

.batch-plot-container {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.batch-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.batch-metric-item {
  background: rgba(234, 91, 12, 0.05);
  border: 1px solid rgba(234, 91, 12, 0.2);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  
}

.metric-value {
  font-size: 16px;
  font-weight: 600;
  color: #ea5b0c;
}

.metric-unit {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* Initial Aging */

.aging-metrics {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aging-metric-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric-gauge {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gauge-bar {
  flex: 1;
  height: 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

.gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, #34a853 0%, #fbbc05 50%, #ff5733 100%);
  transition: width 0.4s ease;
  border-radius: 6px;
}

.metric-gauge .metric-value {
  font-size: 14px;
  min-width: 60px;
  text-align: right;
}

/* Responsive */

@media (max-width: 1200px) {
  .quality-grid {
    grid-template-columns: 1fr;
  }

  .section-grid {
    grid-template-columns: 1fr;
  }

  .section-tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-sidebar {
    position: relative;
    top: 0;
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }

  .section-mini-tile {
    min-width: 160px;
  }
}

/**
 * Login Page Styles
 * Elegant glass morphism design matching Batemo Insights theme
 */

.login-page {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #0a0a0a 100%);
    overflow: hidden;
    padding: 20px;
}

/* Animated Background Orbs */

.login-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* Futuristic grid overlay */

.login-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(234, 91, 12, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(234, 91, 12, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(13, 124, 153, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13, 124, 153, 0.02) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
    z-index: 1;
    pointer-events: none;
}

/* Background Bildmarken - Radar Effect - Many small logos */

.radar-logo {
    position: absolute;
    width: 70px;
    height: 70px;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 0 12px rgba(234, 91, 12, 0.3));
}

/* Left side - 7 logos */

.radar-logo-1 {
    top: 8%;
    left: 4%;
}

.radar-logo-2 {
    top: 22%;
    left: 10%;
}

.radar-logo-3 {
    top: 38%;
    left: 2%;
}

.radar-logo-4 {
    top: 54%;
    left: 8%;
}

.radar-logo-5 {
    top: 68%;
    left: 3%;
}

.radar-logo-6 {
    top: 82%;
    left: 12%;
}

.radar-logo-7 {
    top: 95%;
    left: 6%;
}

/* Center-left - 3 logos */

.radar-logo-8 {
    top: 15%;
    left: 25%;
}

.radar-logo-9 {
    top: 50%;
    left: 28%;
}

.radar-logo-10 {
    top: 85%;
    left: 22%;
}

/* Center-right - 3 logos */

.radar-logo-11 {
    top: 18%;
    right: 25%;
}

.radar-logo-12 {
    top: 50%;
    right: 28%;
}

.radar-logo-13 {
    top: 82%;
    right: 23%;
}

/* Right side - 7 logos */

.radar-logo-14 {
    top: 10%;
    right: 5%;
}

.radar-logo-15 {
    top: 25%;
    right: 11%;
}

.radar-logo-16 {
    top: 40%;
    right: 3%;
}

.radar-logo-17 {
    top: 56%;
    right: 9%;
}

.radar-logo-18 {
    top: 70%;
    right: 4%;
}

.radar-logo-19 {
    top: 84%;
    right: 13%;
}

.radar-logo-20 {
    top: 96%;
    right: 7%;
}

/* Additional logos 21-40 for denser effect */

.radar-logo-21 {
    top: 12%;
    left: 15%;
}

.radar-logo-22 {
    top: 28%;
    left: 6%;
}

.radar-logo-23 {
    top: 44%;
    left: 18%;
}

.radar-logo-24 {
    top: 60%;
    left: 12%;
}

.radar-logo-25 {
    top: 76%;
    left: 5%;
}

.radar-logo-26 {
    top: 90%;
    left: 16%;
}

.radar-logo-27 {
    top: 5%;
    left: 20%;
}

.radar-logo-28 {
    top: 33%;
    left: 32%;
}

.radar-logo-29 {
    top: 65%;
    left: 26%;
}

.radar-logo-30 {
    top: 92%;
    left: 30%;
}

.radar-logo-31 {
    top: 14%;
    right: 15%;
}

.radar-logo-32 {
    top: 30%;
    right: 6%;
}

.radar-logo-33 {
    top: 46%;
    right: 18%;
}

.radar-logo-34 {
    top: 62%;
    right: 12%;
}

.radar-logo-35 {
    top: 78%;
    right: 5%;
}

.radar-logo-36 {
    top: 92%;
    right: 16%;
}

.radar-logo-37 {
    top: 7%;
    right: 20%;
}

.radar-logo-38 {
    top: 35%;
    right: 32%;
}

.radar-logo-39 {
    top: 67%;
    right: 26%;
}

.radar-logo-40 {
    top: 94%;
    right: 30%;
}

/* Scanner Effect - DISABLED - invisible scan line only in JS */

/* .login-background::after removed - logos fade in/out through invisible scan */

/* Scanner Effect - Option 2: Wave with Trail (uncomment to use)
.login-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(234, 91, 12, 0.05) 20%,
            rgba(234, 91, 12, 0.15) 40%,
            rgba(234, 91, 12, 0.6) 50%,
            rgba(234, 91, 12, 0.8) 55%,
            rgba(234, 91, 12, 0.3) 70%,
            rgba(234, 91, 12, 0.1) 85%,
            transparent 100%);
    box-shadow: 0 0 60px rgba(234, 91, 12, 0.6);
    filter: blur(2px);
    animation: radarScan 10s linear infinite;
    z-index: 2;
    pointer-events: none;
}
*/

/* Scanner Effect - Option 3: Pulsing Circle Expanding (uncomment to use)
.login-background::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -100px;
    width: 200px;
    height: 200px;
    margin-left: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(234, 91, 12, 0.6) 0%,
        rgba(234, 91, 12, 0.3) 30%,
        rgba(234, 91, 12, 0.1) 60%,
        transparent 100%);
    box-shadow: 0 0 80px rgba(234, 91, 12, 0.8), inset 0 0 40px rgba(234, 91, 12, 0.4);
    animation: radarScan 8s linear infinite, pulseCircle 2s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes pulseCircle {
    0%, 100% {
        transform: scale(0.9);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}
*/

/* Scanner Effect - Option 4: Double Line (uncomment to use)
.login-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(234, 91, 12, 0.8) 50%, transparent 100%) 0 0 / 100% 2px no-repeat,
        linear-gradient(90deg, transparent 0%, rgba(13, 124, 153, 0.6) 50%, transparent 100%) 0 100% / 100% 2px no-repeat;
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.6);
    animation: radarScan 8s linear infinite;
    z-index: 2;
    pointer-events: none;
}
*/

@keyframes radarScan {
    0% {
        transform: translateY(-2px);
    }

    100% {
        transform: translateY(100vh);
    }
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.12;
    animation: float 25s ease-in-out infinite;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #ea5b0c 0%, transparent 70%);
    top: -300px;
    left: -300px;
    animation-delay: 0s;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #0d7c99 0%, transparent 70%);
    bottom: -250px;
    right: -250px;
    animation-delay: 8s;
}

.orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #ea5b0c 0%, transparent 70%);
    top: 40%;
    right: 5%;
    animation-delay: 16s;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(40px, -40px) scale(1.1);
    }

    66% {
        transform: translate(-30px, 30px) scale(0.95);
    }
}

/* Login Container - Single Column Compact Layout */

.login-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 24px 20px;
}

/* Logo */

.login-logo {
    text-align: center;
    flex-shrink: 0;
}

/* Centered - Single Card (Compact) */

.login-center {
    width: 100%;
    max-width: 480px;
    flex-shrink: 0;
}

/* Legal footer spans both columns */

.login-legal {
    grid-column: 1 / -1;
}

/* Logo Section */

.login-logo {
    animation: fadeInDown 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.login-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.login-logo .logo-icon {
    width: 65px;
    height: 65px;
    filter: drop-shadow(0 0 40px rgba(234, 91, 12, 0.3)) drop-shadow(0 0 80px rgba(13, 124, 153, 0.15));
    animation: pulse 3s ease-in-out infinite;
    flex-shrink: 0;
}

.logo-text-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

@keyframes pulse {

    0%,
    100% {
        filter: drop-shadow(0 0 40px rgba(234, 91, 12, 0.3)) drop-shadow(0 0 80px rgba(13, 124, 153, 0.15));
    }

    50% {
        filter: drop-shadow(0 0 50px rgba(234, 91, 12, 0.4)) drop-shadow(0 0 100px rgba(13, 124, 153, 0.2));
    }
}

.login-logo h1 {
    font-family: 'Big John', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    white-space: nowrap;
}

.login-subtitle {
    font-family: 'Big John', sans-serif;
    font-size: 23.25px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    padding: 0;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}

/* Info Card & Login Card - Premium Glass Morphism (Identical Styling) */

.info-card,
.login-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.info-card::before,
.login-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    pointer-events: none;
}

/* Futuristic corner brackets */

.info-card::after,
.login-card::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 20px;
    background:
        linear-gradient(to right, #ea5b0c 20px, transparent 20px) 0 0 / 40px 2px,
        linear-gradient(to right, #ea5b0c 20px, transparent 20px) 0 100% / 40px 2px,
        linear-gradient(to bottom, #ea5b0c 20px, transparent 20px) 0 0 / 2px 40px,
        linear-gradient(to bottom, #ea5b0c 20px, transparent 20px) 100% 0 / 2px 40px,
        linear-gradient(to bottom, #ea5b0c 20px, transparent 20px) 0 100% / 2px 40px,
        linear-gradient(to bottom, #ea5b0c 20px, transparent 20px) 100% 100% / 2px 40px,
        linear-gradient(to right, #ea5b0c 20px, transparent 20px) 100% 0 / 40px 2px,
        linear-gradient(to right, #ea5b0c 20px, transparent 20px) 100% 100% / 40px 2px;
    background-repeat: no-repeat;
    opacity: 0.4;
    pointer-events: none;
}

.info-card h2,
.login-card h2 {
    font-family: 'Big John', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 24px 0;

    text-align: center;
}

.info-description,
.login-description {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 36px 0;
    line-height: 1.6;
}

/* Info Card Features */

.info-features {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.info-feature-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    position: relative;
}

.info-feature-item .feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(255, 122, 51, 0.1) 100%);
    border: 1px solid rgba(234, 91, 12, 0.3);
}

.info-feature-item .feature-icon svg {
    color: #ea5b0c;
    width: 20px;
    height: 20px;
}

.info-feature-item .feature-text h3 {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 6px 0;

}

.info-feature-item .feature-text p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Info Card Divider */

.info-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    margin: 32px 0;
}

/* Info Card Access Section */

.info-access {
    text-align: center;
}

.access-title {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 20px 0;

}

.access-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0;
    height: 52px;
    width: 100%;
    max-width: 320px;
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 700;

    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(234, 91, 12, 0.25);
}

.access-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.access-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(234, 91, 12, 0.4);
}

.access-button:hover::before {
    opacity: 1;
}

.access-button:active {
    transform: translateY(0);
}

.access-button .arrow-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.access-button:hover .arrow-icon {
    transform: translateX(4px);
}

/* Form Styles */

.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);

    text-transform: uppercase;
}

.form-group input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.form-group input:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
}

.form-group input:focus {
    outline: none;
    border-color: rgba(234, 91, 12, 0.5);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 4px rgba(234, 91, 12, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.form-group input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Error Message */

.error-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #ff6b6b;
    font-size: 14px;
    line-height: 1.5;
    animation: shake 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.error-message svg {
    flex-shrink: 0;
    color: #ff6b6b;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    75% {
        transform: translateX(6px);
    }
}

/* Login Button - Premium Style */

.login-button {
    width: 100%;
    height: 50px;
    padding: 0 24px;
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Big John', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(234, 91, 12, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
    margin-top: 8px;
    text-transform: uppercase;

}

.login-button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(234, 91, 12, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #ff7a33 0%, #ea5b0c 100%);
}

.login-button:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(234, 91, 12, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.login-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 8px 24px rgba(234, 91, 12, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* Spinner Animation */

.spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
    /* Prevent spinner from shrinking */
}

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

/* Login Footer */

.login-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Login Divider */

.login-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 20px 0 16px 0;
}

/* Login Access Section (Get Access integrated) */

.login-value-prop {
    margin: 4px auto 0;
    max-width: 40ch;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
}

.login-value-prop::first-line {
    color: rgba(255, 255, 255, 0.82);
}

/* Prominent register CTA — the primary path for the logged-out (podcast-spike)
   entry, since demo approval stays manual. Brand orange, full-width. */

.login-register-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 14px 0 0;
    padding: 13px 20px;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ea5b0c 0%, #d14e09 100%);
    border: 1px solid #ea5b0c;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.login-register-cta:hover {
    background: linear-gradient(135deg, #d14e09 0%, #b84308 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(234, 91, 12, 0.35);
    opacity: 1;
}

.login-access {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.access-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.access-link:hover {
    color: #ff7a33;
    gap: 10px;
}

.access-link svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.access-link:hover svg {
    transform: translateX(4px);
}

.login-link {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.login-link:hover {
    color: #ea5b0c;
}

.login-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background: #ea5b0c;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.login-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.separator {
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
}

/* Feature Highlights */

.login-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fadeInUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}

.feature-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    background: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    pointer-events: none;
}

.feature-item:hover {
    transform: translateY(-4px);
    border-color: rgba(234, 91, 12, 0.3);
    box-shadow: 0 12px 48px rgba(234, 91, 12, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.feature-item:hover::before {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(234, 91, 12, 0.05) 20%,
            rgba(13, 124, 153, 0.05) 40%,
            transparent 60%,
            rgba(255, 255, 255, 0.02) 100%);
    background-size: 200% 200%;
    animation: shimmer 3s ease-in-out infinite;
}

.feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(255, 122, 51, 0.1) 100%);
    border: 1px solid rgba(234, 91, 12, 0.3);
}

.feature-icon svg {
    color: #ea5b0c;
    width: 20px;
    height: 20px;
}

.feature-text h3 {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 6px 0;

}

.feature-text p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Signup Section */

.login-signup {
    animation: fadeInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
}

.signup-content {
    text-align: center;
    padding: 32px 28px;
    background: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.signup-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    pointer-events: none;
}

.signup-content:hover {
    transform: translateY(-4px);
    border-color: rgba(234, 91, 12, 0.3);
    box-shadow: 0 12px 48px rgba(234, 91, 12, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.signup-content:hover::before {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(234, 91, 12, 0.05) 20%,
            rgba(13, 124, 153, 0.05) 40%,
            transparent 60%,
            rgba(255, 255, 255, 0.02) 100%);
    background-size: 200% 200%;
    animation: shimmer 3s ease-in-out infinite;
}

.signup-title {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 12px 0;

}

.signup-text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 20px 0;
    font-weight: 400;

}

.signup-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0;
    height: 52px;
    width: 100%;
    max-width: 280px;
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;

    box-shadow: 0 4px 16px rgba(234, 91, 12, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.signup-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%);
    pointer-events: none;
}

.signup-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(234, 91, 12, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.signup-button:active {
    transform: translateY(-1px);
}

.signup-button .arrow-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.signup-button:hover .arrow-icon {
    transform: translateX(4px);
}

.login-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    animation: fadeIn 0.6s ease-out 0.5s both;
    flex-shrink: 0;
}

.login-legal a {
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: color 0.3s ease;
}

.login-legal a:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* Animations */

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Holographic shimmer effect on login card */

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

    100% {
        background-position: 200% center;
    }
}

.login-card:hover::before {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(234, 91, 12, 0.05) 20%,
            rgba(13, 124, 153, 0.05) 40%,
            transparent 60%,
            rgba(255, 255, 255, 0.02) 100%);
    background-size: 200% 200%;
    animation: shimmer 3s ease-in-out infinite;
}

/* Responsive Design - Large Tablet */

@media (max-width: 1300px) {
    .login-container {
        grid-template-columns: 1fr 460px;
        gap: 40px;
    }
}

/* Responsive Design - Tablet */

@media (max-width: 1024px) {
    .login-container {
        grid-template-columns: 1fr;
        max-width: 600px;
        gap: 32px;
    }

    .login-right {
        position: relative;
        top: 0;
        max-width: 100%;
    }

    .login-logo {
        text-align: center;
    }

    .login-logo-container {
        justify-content: center;
    }
}

/* Responsive Design - Mobile */

@media (max-width: 640px) {
    .login-page {
        padding: 16px;
    }

    .login-container {
        max-width: 100%;
        padding: 12px;
        gap: 16px;
    }

    .login-logo-container {
        gap: 12px;
    }

    .login-logo .logo-icon {
        width: 55px;
        height: 55px;
    }

    .logo-text-stack {
        gap: 1px;
    }

    .login-card {
        padding: 24px 20px;
    }

    .login-logo h1 {
        font-size: 22px;

    }

    .login-subtitle {
        font-size: 9px;

    }

    .login-card h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .login-form {
        gap: 16px;
    }

    .form-group input {
        height: 44px;
        font-size: 14px;
    }

    .login-button {
        height: 46px;
        font-size: 14px;
    }

    .login-footer {
        margin-top: 16px;
        padding-top: 16px;
        font-size: 11px;
    }

    .login-divider {
        margin: 16px 0 12px 0;
    }

    .login-access {
        padding: 10px 0;
        font-size: 0.8rem;
    }

    .login-legal {
        font-size: 10px;
        flex-wrap: wrap;
    }

    .signup-content {
        padding: 24px 20px;
    }

    .signup-button {
        width: 100%;
    }

    .gradient-orb {
        opacity: 0.08;
        filter: blur(120px);
    }

    /* Reduce grid overlay on mobile */
    .login-background::before {
        background-size: 30px 30px, 30px 30px, 6px 6px, 6px 6px;
    }

    /* Smaller radar logos on mobile */
    .radar-logo {
        width: 120px;
        height: 120px;
    }

    /* Stack features vertically on mobile */
    .feature-item {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 20px;
    }

    .feature-item:hover {
        transform: translateY(-4px);
    }

    .feature-icon {
        margin: 0 auto;
    }

    .signup-title {
        font-size: 18px;
    }
}

/* Login Glass - Alias for login-card (used by ForgotPassword/ResetPassword pages) */

.login-glass {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
    animation: fadeInUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.login-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
    pointer-events: none;
}

/* Futuristic corner brackets */

.login-glass::after {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 20px;
    background:
        linear-gradient(to right, #ea5b0c 20px, transparent 20px) 0 0 / 40px 2px,
        linear-gradient(to right, #ea5b0c 20px, transparent 20px) 0 100% / 40px 2px,
        linear-gradient(to bottom, #ea5b0c 20px, transparent 20px) 0 0 / 2px 40px,
        linear-gradient(to bottom, #ea5b0c 20px, transparent 20px) 100% 0 / 2px 40px,
        linear-gradient(to bottom, #ea5b0c 20px, transparent 20px) 0 100% / 2px 40px,
        linear-gradient(to bottom, #ea5b0c 20px, transparent 20px) 100% 100% / 2px 40px,
        linear-gradient(to right, #ea5b0c 20px, transparent 20px) 100% 0 / 40px 2px,
        linear-gradient(to right, #ea5b0c 20px, transparent 20px) 100% 100% / 40px 2px;
    background-repeat: no-repeat;
    opacity: 0.4;
    pointer-events: none;
}

.login-glass .login-logo {
    margin-bottom: 8px;
}

.login-glass .login-logo-container {
    gap: 12px;
}

.login-glass .login-logo .logo-icon {
    width: 40px;
    height: 40px;
}

.login-glass .login-logo h1 {
    font-size: 24px;
}

.login-glass .login-subtitle {
    font-size: 14px;
}

.login-glass .login-heading {
    font-family: 'Big John', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Light theme - login always dark for elegance */

@media (prefers-color-scheme: light) {
    .login-page {
        background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #0a0a0a 100%);
    }
}

/* ============================================================================
   Event Signup Page - Trade Fair Landing Page
   Matches login.css design: glassmorphism, gradient orbs, matrix logo rain
   ============================================================================ */

.event-signup-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #0a0a0a 100%);
  overflow: hidden;
  z-index: 9999;
}

/* Background (reuses login-background pattern) */

.event-background {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(234, 91, 12, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 91, 12, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(13, 124, 153, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 124, 153, 0.02) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  pointer-events: none;
}

/* Container */

.event-container {
  position: relative;
  z-index: 1;
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 20px;
}

/* Branding */

.event-branding {
  display: flex;
  align-items: center;
  gap: 16px;
  animation: fadeInDown 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.event-logo-icon {
  width: 65px;
  height: 65px;
  filter: drop-shadow(0 0 40px rgba(234, 91, 12, 0.3)) drop-shadow(0 0 80px rgba(13, 124, 153, 0.15));
  animation: pulse 3s ease-in-out infinite;
}

.event-logo-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.event-logo-text {
  font-family: 'Big John', sans-serif;
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  line-height: 1.1;
}

.event-logo-subtitle {
  font-family: 'Big John', sans-serif;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
}

/* "at" divider */

.event-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  animation: fadeIn 0.6s ease-out 0.2s both;
}

.event-divider::before,
.event-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.event-divider span {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Event name block */

.event-name-block {
  text-align: center;
  animation: fadeIn 0.6s ease-out 0.3s both;
}

.event-event-name {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 8px 0;
}

.event-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(13, 124, 153, 0.12);
  border: 1px solid rgba(13, 124, 153, 0.25);
  border-radius: 20px;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.event-badge svg {
  color: #0d7c99;
  flex-shrink: 0;
}

/* Card (glassmorphism) */

.event-card {
  width: 100%;
  background: rgba(30, 30, 30, 0.4);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 32px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    inset 0 -1px 1px rgba(0, 0, 0, 0.2);
  animation: fadeInUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
  position: relative;
  overflow: hidden;
}

/* Corner brackets */

.event-card::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0.4;
  background:
    linear-gradient(to right, #ea5b0c 40px, transparent 40px) top left,
    linear-gradient(to bottom, #ea5b0c 40px, transparent 40px) top left,
    linear-gradient(to left, #ea5b0c 40px, transparent 40px) top right,
    linear-gradient(to bottom, #ea5b0c 40px, transparent 40px) top right,
    linear-gradient(to right, #ea5b0c 40px, transparent 40px) bottom left,
    linear-gradient(to top, #ea5b0c 40px, transparent 40px) bottom left,
    linear-gradient(to left, #ea5b0c 40px, transparent 40px) bottom right,
    linear-gradient(to top, #ea5b0c 40px, transparent 40px) bottom right;
  background-size: 1px 1px;
  background-repeat: no-repeat;
}

.event-card-title {
  font-family: 'Big John', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  text-align: center;
}

.event-card-subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

/* Form */

.event-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.event-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.event-label {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.event-input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #ffffff;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.event-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.event-input:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
}

.event-input:focus {
  outline: none;
  border-color: rgba(234, 91, 12, 0.5);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 4px rgba(234, 91, 12, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.event-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.event-input--code {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  height: 60px;
}

/* Button */

.event-button {
  width: 100%;
  height: 54px;
  padding: 0 24px;
  background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
  border: none;
  border-radius: 12px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Big John', sans-serif;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(234, 91, 12, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  margin-top: 8px;
  text-transform: uppercase;
}

.event-button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(234, 91, 12, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, #ff7a33 0%, #ea5b0c 100%);
}

.event-button:active:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(234, 91, 12, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.event-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Error */

.event-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  color: #ff6b6b;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
  animation: shake 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Spinner */

.event-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* Success state */

.event-card--success {
  text-align: center;
}

.event-success-icon {
  margin: 0 auto 16px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(234, 91, 12, 0.1);
  border-radius: 50%;
  animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.event-success-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}

.event-success-email svg {
  color: #ea5b0c;
  flex-shrink: 0;
}

/* Countdown */

.event-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
}

/* Legal footer */

.event-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  animation: fadeIn 0.6s ease-out 0.5s both;
}

.event-legal a {
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: color 0.3s ease;
}

.event-legal a:hover {
  color: #ea5b0c;
}

.event-legal .separator {
  color: rgba(255, 255, 255, 0.2);
}

/* Animations */

@keyframes scaleIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Responsive */

@media (max-width: 640px) {
  .event-container {
    padding: 16px 12px;
  }

  .event-logo-icon {
    width: 50px;
    height: 50px;
  }

  .event-logo-text {
    font-size: 26px;
  }

  .event-logo-subtitle {
    font-size: 16px;
  }

  .event-card {
    padding: 24px 20px;
  }

  .event-form-row {
    grid-template-columns: 1fr;
  }

  .event-input--code {
    font-size: 20px;
  }
}

/***************************************
 * LOADING SCREEN STYLES
 * Futuristic loading screen after auth
 ***************************************/

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Same background as login-page */
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #0a0a0a 100%);
    animation: fadeIn 0.4s ease;
    /* Ensure it covers everything including header */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Note: Background styles (.login-background, .gradient-orb, .radar-logo, animations)
   are inherited from login.css and will be reused identically */

/* Loading container - same width and centering as login */

.loading-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 24px 20px;
}

/* Logo styles inherited from login.css:
   .login-logo, .login-logo-container, .logo-icon, .logo-text-stack, 
   .login-logo h1, .login-subtitle are all reused */

/* Loading message */

.loading-message {
    margin-bottom: 2rem;
    text-align: center;
}

.loading-message h1 {
    font-family: 'Big John', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.75rem 0;

    text-transform: uppercase;
    animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {

    0%,
    100% {
        color: #ffffff;
        text-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
    }

    50% {
        color: var(--accent-primary);
        text-shadow: 0 0 40px rgba(234, 91, 12, 0.6);
    }
}

.loading-detail {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    min-height: 1.5rem;
    transition: all 0.3s ease;
}

/* Progress bar */

.loading-progress-container {
    margin-bottom: 2.5rem;
    width: 100%;
    max-width: 500px;
}

.loading-progress-track {
    position: relative;
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.loading-progress-fill {
    position: relative;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(234, 91, 12, 0.8) 0%,
            rgba(234, 91, 12, 1) 50%,
            rgba(255, 140, 60, 1) 100%);
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.6);
}

.loading-progress-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.6) 50%,
            transparent 100%);
    animation: progressGlow 1.5s ease-in-out infinite;
}

@keyframes progressGlow {

    0%,
    100% {
        opacity: 0;
        transform: translateX(-30px);
    }

    50% {
        opacity: 1;
        transform: translateX(0);
    }
}

.loading-percentage {
    text-align: center;
    margin-top: 0.75rem;
    font-family: 'Big John', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ea5b0c;

    text-shadow: 0 0 20px rgba(234, 91, 12, 0.5);
}

/* Phase indicators */

.loading-phases {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.loading-phase {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.4;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.loading-phase.active {
    opacity: 1;
}

.loading-phase.complete {
    opacity: 0.6;
}

.phase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.loading-phase.active .phase-dot {
    background: #ea5b0c;
    box-shadow: 0 0 16px rgba(234, 91, 12, 0.8);
    animation: phasePulse 1.5s ease-in-out infinite;
}

@keyframes phasePulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.8;
    }
}

.loading-phase.complete .phase-dot {
    background: #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
}

.phase-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;

    transition: color 0.4s ease;
}

.loading-phase.active .phase-label {
    color: rgba(255, 255, 255, 0.9);
}

.loading-phase.complete .phase-label {
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive */

@media (max-width: 768px) {
    .loading-logo .logo-text {
        font-size: 1.25rem;
    }

    .loading-message h1 {
        font-size: 1.5rem;
    }

    .loading-phases {
        gap: 1rem;
    }

    .phase-label {
        font-size: 0.65rem;
    }
}

/***************************************
 * QA VERIFICATION PAGE STYLES
 * Cell image vs technical drawing comparison
 ***************************************/

.qa-verification-page {
    min-height: 100vh;
    background: #0d0d0d;
    color: #ffffff;
    padding: 40px 20px;
}

/* Header */

.qa-header {
    max-width: 1600px;
    margin: 0 auto 30px;
    text-align: center;
    border-bottom: 2px solid rgba(234, 91, 12, 0.3);
    padding-bottom: 30px;
}

.qa-header h1 {
    font-family: 'Big John', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #ffffff;
    
    text-transform: uppercase;
}

.qa-description {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Filter and Sort Controls */

.qa-controls {
    max-width: 1600px;
    margin: 0 auto 24px;
    padding: 20px 24px;
    background: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(80px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.qa-control-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qa-control-label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.qa-control-select {
    padding: 8px 16px;
    background: rgba(13, 13, 13, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    color: #e2e8f0;
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 180px;
}

.qa-control-select:hover {
    background: rgba(13, 13, 13, 0.85);
    border-color: rgba(234, 91, 12, 0.4);
}

.qa-control-select:focus {
    outline: none;
    border-color: #ea5b0c;
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.15);
}

.qa-results-count {
    margin-left: auto;
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 16px;
    background: rgba(234, 91, 12, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(234, 91, 12, 0.2);
}

/* Table Container */

.qa-table-container {
    max-width: 1600px;
    margin: 0 auto 60px;
    overflow-x: auto;
    background: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(80px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Comparison Table */

.qa-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
}

.qa-comparison-table thead {
    background: rgba(234, 91, 12, 0.1);
    border-bottom: 2px solid rgba(234, 91, 12, 0.3);
    position: sticky;
    top: 0;
    z-index: 10;
}

.qa-comparison-table th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.qa-comparison-table th:last-child {
    border-right: none;
}

/* Column Widths */

.col-cell-info {
    width: 180px;
    min-width: 180px;
}

.col-dimensions {
    width: 240px;
    min-width: 240px;
}

.col-image {
    width: 350px;
    min-width: 350px;
}

.col-drawing {
    width: 350px;
    min-width: 350px;
}

/* Table Rows */

.qa-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease;
}

.qa-row:hover {
    background: rgba(234, 91, 12, 0.05);
}

.qa-row td {
    padding: 12px 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: top;
}

.qa-row td:last-child {
    border-right: none;
}

/* Cell Info Column (Combined Manufacturer + Name) */

.cell-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.manufacturer-name {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    text-transform: uppercase;
    
}

.cell-name-link {
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: 600;
    word-break: break-word;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
}

.cell-name-link:hover {
    color: #ea5b0c;
    text-decoration: underline;
    transform: translateX(2px);
}

.cell-id {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Courier New', monospace;
}

/* Dimensions Column */

.dimensions-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dimension-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dimension-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    
    font-weight: 600;
}

.dimension-values {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dim-item {
    font-size: 0.8rem;
    color: #ffffff;
    font-family: 'Courier New', monospace;
    line-height: 1.3;
}

.dimension-value {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Roboto', sans-serif;
    word-break: break-word;
    line-height: 1.4;
}

/* Image Container */

.image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    height: 280px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.product-image {
    max-width: 100%;
    max-height: 280px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.image-placeholder {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 20px;
}

/* Drawing Container */

.drawing-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    height: 280px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px;
}

.drawing-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.drawing-wrapper svg {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    display: block;
}

/* Footer */

.qa-footer {
    max-width: 1600px;
    margin: 0 auto;
    padding: 30px;
    text-align: center;
    background: rgba(234, 91, 12, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(234, 91, 12, 0.2);
}

.qa-footer p {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 8px 0;
}

.qa-note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 12px;
    line-height: 1.6;
}

/* Responsive - Stack columns vertically on small screens */

@media (max-width: 1400px) {
    .col-cell-info {
        width: 180px;
        min-width: 180px;
    }

    .col-dimensions {
        width: 200px;
        min-width: 200px;
    }

    .col-image,
    .col-drawing {
        width: 300px;
        min-width: 300px;
    }

    .image-container,
    .drawing-container {
        height: 250px;
        min-height: 250px;
    }

    .product-image {
        max-height: 250px;
    }

    .qa-comparison-table th,
    .qa-row td {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
}

@media (max-width: 1200px) {
    .col-cell-info {
        width: 160px;
        min-width: 160px;
    }

    .col-dimensions {
        width: 180px;
        min-width: 180px;
    }

    .col-image,
    .col-drawing {
        width: 250px;
        min-width: 250px;
    }

    .image-container,
    .drawing-container {
        height: 220px;
        min-height: 220px;
    }

    .product-image {
        max-height: 220px;
    }

    .manufacturer-name {
        font-size: 0.8rem;
    }

    .cell-name-link {
        font-size: 0.85rem;
    }

    .qa-controls {
        padding: 16px 20px;
        gap: 16px;
    }

    .qa-control-select {
        min-width: 150px;
        font-size: 0.85rem;
    }

    .dimension-label {
        font-size: 0.65rem;
    }

    .dimension-values {
        gap: 2px;
    }

    .dim-item {
        font-size: 0.75rem;
    }

    .dimension-value {
        font-size: 0.75rem;
    }
}

@media (max-width: 800px) {
    .qa-verification-page {
        padding: 20px 10px;
    }

    .qa-header h1 {
        font-size: 1.5rem;
    }

    .qa-header {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .qa-table-container {
        margin-bottom: 40px;
        border-radius: 12px;
    }

    .qa-comparison-table th,
    .qa-row td {
        padding: 8px;
        font-size: 0.75rem;
    }

    .col-cell-info {
        width: 120px;
        min-width: 120px;
    }

    .col-dimensions {
        width: 140px;
        min-width: 140px;
    }

    .col-image,
    .col-drawing {
        width: 160px;
        min-width: 160px;
    }

    .image-container,
    .drawing-container {
        height: 150px;
        min-height: 150px;
    }

    .product-image {
        max-height: 150px;
    }

    .manufacturer-name {
        font-size: 0.7rem;
    }

    .cell-name-link {
        font-size: 0.75rem;
    }

    .cell-id {
        font-size: 0.65rem;
    }

    .qa-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .qa-control-group {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .qa-control-select {
        min-width: auto;
        width: 100%;
    }

    .qa-results-count {
        margin-left: 0;
        text-align: center;
    }

    .dimension-label {
        font-size: 0.6rem;
    }

    .dimension-values {
        gap: 1px;
    }

    .dim-item {
        font-size: 0.65rem;
    }

    .dimension-value {
        font-size: 0.65rem;
    }
}

/* Error Message */

.error-message {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 107, 107, 0.3);
    font-family: 'Roboto', sans-serif;
}

/* Container */

.qa-container {
    max-width: 1600px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 20px;
}

.qa-container h1 {
    font-family: 'Big John', sans-serif;
    font-size: 2rem;
    color: #ffffff;
}

.qa-container p {
    font-family: 'Roboto', sans-serif;
    color: rgba(255, 255, 255, 0.6);
}

/* QA verification tool for comparing product images to technical drawings */

/**
 * Admin Portal Styles
 * Modern Glassmorphism admin interface with Batemo corporate design
 */

/* ============================================
   GLOBAL: native <select>/<option> readability
   ============================================
   Every admin surface already sets `color: #fff` on the <select> box itself
   (readable when closed), but a native <option> is rendered by the OS/browser
   popup, not by our CSS cascade — it does NOT inherit a usable background
   from the select, so unstyled dropdown lists fall back to browser-default
   WHITE text-on-white until an option is hovered/focused. Seen on the Agent
   Config model dropdown + Cache TTL selects, and would affect any other
   admin <select> that doesn't set its own `option` rule.
   Fix once, globally, scoped to the admin dashboard: style every <option>
   reachable from it with the same dark surface + light text already used by
   .admin-filter-select/.admin-form-select above. Three root scopes are
   needed because some admin dialogs createPortal() to document.body (Promo
   Codes modals, AI Knowledge drawers) and so sit outside
   .admin-portal-page's DOM subtree. */

.admin-portal-page select,
.admin-modal-overlay select,
.admin-aim-drawer-overlay select {
  color: #fff;
}

.admin-portal-page select option,
.admin-modal-overlay select option,
.admin-aim-drawer-overlay select option {
  background-color: #1a1a1a;
  color: #fff;
}

/* ============================================
   Admin Portal Layout
   ============================================ */

/* ============================================
   Admin Context Bar — analog zu .unified-context-bar
   ============================================ */

.admin-context-bar {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 900;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.92) 0%, rgba(45, 42, 38, 0.96) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.admin-context-bar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Admin Identity Badge — matches .cell-info-card height (48px) */

.admin-identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    height: 48px;
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.admin-identity-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(39, 39, 39, 0.6);
    border: 1px solid rgba(234, 91, 12, 0.3);
    color: #ea5b0c;
    flex-shrink: 0;
}

.admin-identity-name {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
    text-transform: uppercase;
}

.admin-identity-meta {
    font-size: 10px;
    color: #aaa;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

.admin-identity-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Admin Context Tabs — matches .section-tabs height (50px) */

.admin-context-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    height: 50px;
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.admin-context-tab {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #999;
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-transform: uppercase;
}

.admin-context-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ddd;
}

.admin-context-tab.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
    border-color: #ea5b0c;
    color: #fff;
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
}

/* ============================================
   Admin Portal Layout
   ============================================ */

/* Override .app-content min-height when admin context bar is present */

.app-content:has(.admin-context-bar) {
    min-height: calc(100vh - 130px); /* 70px Header + 60px Context Bar */
}

.admin-portal-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 68px 0 20px; /* clears the 60px fixed Context Bar + ~8px gap (content starts under the 70px sticky command bar) */
}

/* When AdminDataScopeBanner renders, IT clears the fixed Context Bar (see
   .admin-data-scope-banner's own margin-top below) — admin-portal-page then
   only needs a small gap under the banner instead of clearing the bar again. */

.app-content:has(.admin-data-scope-banner) .admin-portal-page {
    padding-top: 8px;
}

/* ============================================
   Tab Content - Glassmorphism
   ============================================ */

.admin-portal-content {
    position: relative;
    background: linear-gradient(135deg, rgba(45, 42, 38, 0.6) 0%, rgba(30, 28, 25, 0.8) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 22px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    min-height: calc(100vh - 200px); /* Fill viewport minus navbar + context bar + bottom gap */
}

.admin-tab-content {
    width: 100%;
}

.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.admin-section-header h2 {
    font-family: 'Big John', sans-serif;
    font-size: 24px;
    margin: 0;
    color: #fff;
}

.admin-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-section-count {
    background: rgba(234, 91, 12, 0.15);
    color: #ea5b0c;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.admin-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

/* ============================================
   Stats Grid - Glassmorphism
   ============================================ */

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.admin-stat-card {
    background: var(--kachel-grad);
    backdrop-filter: var(--kachel-blur);
    -webkit-backdrop-filter: var(--kachel-blur);
    border: 1px solid var(--kachel-border);
    border-radius: var(--kachel-radius);
    box-shadow: var(--kachel-shadow);
    padding: 20px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.admin-stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(234, 91, 12, 0.3);
    box-shadow: var(--kachel-shadow), var(--kachel-glow);
}

.admin-stat-card--highlight {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.05) 100%);
    border-color: rgba(234, 91, 12, 0.3);
}

.admin-stat-value {
    font-family: 'Big John', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px 0;
}

.admin-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #aaa;
    font-weight: 500;
}

/* ============================================
   Loading States
   ============================================ */

.admin-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 16px;
    color: #aaa;
}

.admin-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(234, 91, 12, 0.2);
    border-top-color: #ea5b0c;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.admin-btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ============================================
   Empty States - Glassmorphism
   ============================================ */

.admin-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: #aaa;
}

.admin-empty-state--glass {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    margin: 20px 0;
}

.admin-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    color: rgba(76, 175, 80, 0.4);
}

.admin-empty-icon svg {
    display: inline-block;
}

.admin-empty-state h3 {
    font-family: 'Big John', sans-serif;
    font-size: 20px;
    margin: 0 0 8px 0;
    color: #fff;
}

.admin-empty-state p {
    margin: 0;
    font-size: 14px;
}

/* ============================================
   Alerts - Glassmorphism
   ============================================ */

.admin-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    backdrop-filter: blur(10px);
}

.admin-alert svg {
    flex-shrink: 0;
}

.admin-alert--error {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #f44336;
}

.admin-alert--success {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #4caf50;
}

.admin-alert--warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

/* ============================================
   Data Scope Banner (AdminDataScopeBanner.jsx)
   Persistent, non-dismissable — answers "whose data is this page
   showing/affecting" (staging environment vs. live production data reached
   via the analytics-DB redirect). Margin-top clears the fixed
   .admin-context-bar itself (60px bar + ~8px gap, same offset
   .admin-portal-page used before this banner existed); see the
   .app-content:has(.admin-data-scope-banner) override above that shrinks
   .admin-portal-page's own padding-top to match.
   ============================================ */

.admin-data-scope-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1400px;
    margin: 68px auto 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    backdrop-filter: blur(10px);
}

.admin-data-scope-banner svg {
    flex-shrink: 0;
}

.admin-data-scope-banner--prod-live {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

.admin-data-scope-banner--staging {
    background: rgba(13, 124, 153, 0.1);
    border: 1px solid rgba(13, 124, 153, 0.35);
    color: #38bdf8;
}

/* ============================================
   Buttons - Modern Style
   ============================================ */

.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid;
}

.admin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.admin-btn--sm {
    padding: 8px 14px;
    font-size: 13px;
}

.admin-btn--primary {
    background: linear-gradient(135deg, #ea5b0c 0%, #d14e09 100%);
    border-color: #ea5b0c;
    color: #fff;
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.3);
}

.admin-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #d14e09 0%, #b84308 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(234, 91, 12, 0.4);
}

.admin-btn--secondary {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #aaa;
}

.admin-btn--secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.admin-btn--success {
    background: rgba(76, 175, 80, 0.15);
    border-color: rgba(76, 175, 80, 0.4);
    color: #4caf50;
}

.admin-btn--success:hover:not(:disabled) {
    background: rgba(76, 175, 80, 0.25);
    transform: translateY(-1px);
}

.admin-btn--danger {
    background: rgba(244, 67, 54, 0.15);
    border-color: rgba(244, 67, 54, 0.4);
    color: #f44336;
}

.admin-btn--danger:hover:not(:disabled) {
    background: rgba(244, 67, 54, 0.25);
    transform: translateY(-1px);
}

.admin-btn--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: #aaa;
}

.admin-btn--outline:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #aaa;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-icon-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: scale(1.05);
}

.admin-icon-btn--success {
    color: #4caf50;
}

.admin-icon-btn--success:hover:not(:disabled) {
    background: rgba(76, 175, 80, 0.1);
}

.admin-icon-btn--danger {
    color: #f44336;
}

.admin-icon-btn--danger:hover:not(:disabled) {
    background: rgba(244, 67, 54, 0.1);
}

.admin-icon-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ============================================
   Search Input
   ============================================ */

.admin-search-input {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    min-width: 250px;
    transition: all 0.2s;
}

.admin-search-input:focus {
    outline: none;
    border-color: rgba(234, 91, 12, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.admin-search-input::placeholder {
    color: #64748b;
}

/* ============================================
   Table - Glassmorphism
   ============================================ */

.admin-table-container {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table thead {
    background: rgba(255, 255, 255, 0.03);
}

.admin-table th {
    padding: 14px 16px;
    text-align: left;
    font-family: 'Big John', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-table td {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 14px;
}

.admin-table tbody tr {
    transition: all 0.2s;
}

.admin-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.admin-table-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-small {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.3) 0%, rgba(234, 91, 12, 0.1) 100%);
    border: 2px solid rgba(234, 91, 12, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ea5b0c;
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name {
    font-weight: 500;
    color: #fff;
}

.user-email {
    font-size: 12px;
    color: #64748b;
}

.user-id {
    font-size: 12px;
    color: #64748b;
}

.admin-table-actions {
    display: flex;
    gap: 8px;
}

/* ============================================
   Badges - Modern Style
   ============================================ */

.admin-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-badge--success {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.admin-badge--error {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
}

.admin-badge--info {
    background: rgba(13, 124, 153, 0.15);
    color: #0d7c99;
}

.admin-badge--warning {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.admin-badge--premium {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.2) 0%, rgba(234, 91, 12, 0.1) 100%);
    color: #ea5b0c;
    border: 1px solid rgba(234, 91, 12, 0.3);
}

.admin-badge--pro {
    background: rgba(13, 124, 153, 0.15);
    color: #0d7c99;
    border: 1px solid rgba(13, 124, 153, 0.3);
}

.admin-badge--basic {
    background: rgba(255, 255, 255, 0.08);
    color: #aaa;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.admin-badge--clickable {
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.admin-badge--clickable:hover {
    filter: brightness(1.2);
    transform: scale(1.02);
}

.admin-badge--clickable:active {
    transform: scale(0.98);
}

/* ============================================
   Subscription Cards - Glassmorphism
   ============================================ */

.admin-subscription-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.admin-subscription-card {
    background: var(--kachel-grad);
    backdrop-filter: var(--kachel-blur);
    -webkit-backdrop-filter: var(--kachel-blur);
    border: 1px solid var(--kachel-border);
    border-radius: 14px;
    box-shadow: var(--kachel-shadow);
    padding: 24px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.admin-subscription-card--glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.admin-subscription-card:hover {
    border-color: rgba(234, 91, 12, 0.3);
    transform: translateY(-3px);
    box-shadow: var(--kachel-shadow), var(--kachel-glow);
}

/* Selected subscription card (from URL /admin/subscriptions/:id) */

.admin-subscription-card--selected {
    border-color: #ea5b0c;
    box-shadow: 0 0 0 2px rgba(234, 91, 12, 0.3), 0 12px 32px rgba(234, 91, 12, 0.15);
    animation: selectedPulse 2s ease-in-out;
}

@keyframes selectedPulse {
    0% {
        box-shadow: 0 0 0 2px rgba(234, 91, 12, 0.5), 0 12px 32px rgba(234, 91, 12, 0.3);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(234, 91, 12, 0.3), 0 12px 32px rgba(234, 91, 12, 0.2);
    }

    100% {
        box-shadow: 0 0 0 2px rgba(234, 91, 12, 0.3), 0 12px 32px rgba(234, 91, 12, 0.15);
    }
}

.admin-subscription-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.admin-subscription-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.3) 0%, rgba(234, 91, 12, 0.1) 100%);
    border: 2px solid rgba(234, 91, 12, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ea5b0c;
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}

.admin-subscription-user {
    flex: 1;
    min-width: 0;
}

.admin-subscription-user h3 {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    margin: 0 0 4px 0;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-subscription-email {
    margin: 0;
    font-size: 13px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-subscription-details {
    margin-bottom: 20px;
}

.admin-subscription-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-subscription-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #aaa;
}

.admin-subscription-info-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.admin-subscription-info-label {
    flex: 1;
}

.admin-subscription-info-value {
    color: #fff;
    font-weight: 500;
}

.admin-subscription-actions {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-subscription-actions .admin-btn {
    flex: 1;
    justify-content: center;
}

/* ============================================
   Card Grid (legacy)
   ============================================ */

.admin-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.admin-card {
    background: var(--kachel-grad);
    backdrop-filter: var(--kachel-blur);
    -webkit-backdrop-filter: var(--kachel-blur);
    border: 1px solid var(--kachel-border);
    border-radius: var(--kachel-radius);
    box-shadow: var(--kachel-shadow);
    padding: 20px;
    transition: all 0.2s;
}

.admin-card:hover {
    border-color: rgba(234, 91, 12, 0.3);
    background: var(--kachel-grad-hover);
    box-shadow: var(--kachel-shadow), var(--kachel-glow);
}

.admin-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-card-title h3 {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    margin: 0 0 4px 0;
    color: #fff;
}

.admin-card-title p {
    margin: 0;
    font-size: 13px;
    color: #aaa;
}

.admin-card-body {
    margin-bottom: 16px;
}

.admin-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.admin-info-grid>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    font-weight: 600;
}

.admin-info-value {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}

.admin-info-value--highlight {
    color: #ea5b0c;
    font-weight: 600;
}

.admin-info-value--mono {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
}

.admin-card-footer {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-card-footer .admin-btn {
    flex: 1;
    justify-content: center;
}

/* ============================================
   Health Cards - Glassmorphism
   ============================================ */

.admin-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.admin-health-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    background: var(--kachel-grad);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s;
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.admin-health-card--glass {
    /* backdrop-filter now on base .admin-health-card */
    
}

.admin-health-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.admin-health-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-health-icon--success {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.admin-health-icon--info {
    background: rgba(13, 124, 153, 0.15);
    color: #0d7c99;
}

.admin-health-icon--warning {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.admin-health-icon--error {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
}

.admin-health-content h3 {
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    margin: 0 0 6px 0;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-health-value {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    text-transform: capitalize;
}

/* ============================================
   Actions Section
   ============================================ */

.admin-actions-section {
    margin-top: 32px;
    padding: 24px;
    background: var(--kachel-grad);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.admin-actions-section h3 {
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    margin: 0 0 8px 0;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-section-icon {
    color: #ea5b0c;
    flex-shrink: 0;
}

.admin-actions-description {
    font-size: 14px;
    color: #aaa;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.admin-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

/* ============================================
   Info Section
   ============================================ */

.admin-info-section {
    margin-top: 24px;
    padding: 24px;
    background: var(--kachel-grad);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.admin-info-section h3 {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    margin: 0 0 16px 0;
    color: #fff;
}

.admin-info-section .admin-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.admin-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ============================================
   Modal - Glassmorphism
   ============================================ */

.admin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 40px 20px;
    overflow-y: auto;
}

.admin-modal {
    background: var(--kachel-grad);
    backdrop-filter: var(--kachel-blur);
    -webkit-backdrop-filter: var(--kachel-blur);
    border: 1px solid var(--kachel-border);
    border-radius: 16px;
    box-shadow: var(--kachel-shadow), var(--kachel-glow);
    width: 100%;
    max-width: 480px;
    flex-shrink: 0;
    margin: auto; /* Centers vertically in scrollable overlay, prevents clipping tall modals */
}

.admin-modal--glass {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-modal-header h3 {
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    margin: 0;
    color: #fff;
}

.admin-modal-close {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.admin-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.admin-modal-body {
    padding: 24px;
}

.admin-modal-text {
    font-size: 14px;
    color: #aaa;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.admin-modal-text strong {
    color: #fff;
}

.admin-modal-text--error {
    color: #ff6b6b;
}

.admin-modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

/* ============================================
   Form Elements
   ============================================ */

.admin-form-group {
    margin-bottom: 16px;
}

.admin-form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #aaa;
    margin-bottom: 8px;
}

.admin-form-textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
    transition: all 0.2s;
}

.admin-form-textarea:focus {
    outline: none;
    border-color: rgba(234, 91, 12, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.admin-form-textarea::placeholder {
    color: #64748b;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
    .admin-portal-page {
        padding: 96px 16px 20px;
    }

    .app-content:has(.admin-data-scope-banner) .admin-portal-page {
        padding-top: 12px;
    }

    .admin-data-scope-banner {
        margin: 96px 16px 8px;
    }

    .admin-context-bar-inner {
        padding: 0 1rem;
        gap: 1rem;
    }

    .admin-identity {
        min-width: auto;
        padding: 6px 10px;
    }

    .admin-identity-name {
        font-size: 12px;
    }

    .admin-context-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-context-tab {
        padding: 6px 12px;
        font-size: 11px;
    }

    .admin-portal-content {
        padding: 20px;
        border-radius: 12px;
    }

    .admin-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .admin-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .admin-search-input {
        min-width: 100%;
    }

    .admin-table-container {
        font-size: 13px;
    }

    .admin-card-grid,
    .admin-subscription-grid {
        grid-template-columns: 1fr;
    }

    .admin-health-grid,
    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-modal {
        max-width: 100%;
        margin: 20px;
    }
}

/* ============================================
   Additional Stat Row Styles
   ============================================ */

.admin-stats-row {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

.admin-stat-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    background: var(--kachel-grad);
    border: 1px solid var(--kachel-border);
    border-radius: var(--kachel-radius);
    backdrop-filter: var(--kachel-blur);
    -webkit-backdrop-filter: var(--kachel-blur);
    box-shadow: var(--kachel-shadow);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 90px;
}

.admin-stat-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(234, 91, 12, 0.3);
    box-shadow: var(--kachel-shadow), var(--kachel-glow);
}

.admin-stat-badge .stat-number {
    font-family: 'Big John', sans-serif;
    font-size: 24px;
    color: #fff;
}

.admin-stat-badge .stat-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #aaa;
    letter-spacing: 0.5px;
}

.admin-stat-badge--success {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(76, 175, 80, 0.1);
}

.admin-stat-badge--success .stat-number {
    color: #4caf50;
}

.admin-stat-badge--warning {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 193, 7, 0.1);
}

.admin-stat-badge--warning .stat-number {
    color: #ffc107;
}

.admin-stat-badge--info {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(13, 124, 153, 0.1);
}

.admin-stat-badge--info .stat-number {
    color: #0d7c99;
}

/* ============================================
   Search Wrapper
   ============================================ */

.admin-search-wrapper {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.admin-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
}

.admin-search-wrapper .admin-search-input {
    width: 100%;
    padding-left: 40px;
}

/* ============================================
   User Details Modal Styles
   ============================================ */

.admin-user-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-detail-row:last-child {
    border-bottom: none;
}

.admin-detail-label {
    font-size: 13px;
    color: #aaa;
}

.admin-detail-value {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    word-break: break-all;
}

.admin-detail-divider {
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ea5b0c;
    margin-top: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(234, 91, 12, 0.3);
}

/* ============================================
   Accent Badge
   ============================================ */

.admin-badge--accent {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.2) 0%, rgba(234, 91, 12, 0.1) 100%);
    color: #ea5b0c;
    border: 1px solid rgba(234, 91, 12, 0.3);
}

/* ============================================
   Warning Button/Icon Styles
   ============================================ */

.admin-btn--warning {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
    color: #ffc107;
}

.admin-btn--warning:hover:not(:disabled) {
    background: rgba(255, 193, 7, 0.25);
    transform: translateY(-1px);
}

.admin-icon-btn--warning {
    color: #ffc107;
}

.admin-icon-btn--warning:hover:not(:disabled) {
    background: rgba(255, 193, 7, 0.1);
}

/* ============================================
   Clickable Table Row
   ============================================ */

.admin-table-row--clickable {
    cursor: pointer;
    transition: all 0.2s;
}

.admin-table-row--clickable:hover {
    background: rgba(234, 91, 12, 0.05);
}

/* ============================================
   Quick Filters
   ============================================ */

.admin-quick-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.admin-quick-filter {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: #aaa;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-quick-filter:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.admin-quick-filter--active {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.4);
    color: #ea5b0c;
}

/* ============================================
   Filter Bar
   ============================================ */

.admin-filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.admin-filter-select {
    padding: 10px 14px;
    padding-right: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.admin-filter-select:focus {
    outline: none;
    border-color: rgba(234, 91, 12, 0.5);
    background-color: rgba(255, 255, 255, 0.08);
}

.admin-filter-select option {
    background: #1a1a1a;
    color: #fff;
}

/* ============================================
   Selected Table Row
   ============================================ */

.admin-table-row--selected {
    background: rgba(234, 91, 12, 0.1) !important;
    animation: rowPulse 2s ease-in-out;
}

@keyframes rowPulse {
    0% {
        background: rgba(234, 91, 12, 0.2);
    }

    50% {
        background: rgba(234, 91, 12, 0.15);
    }

    100% {
        background: rgba(234, 91, 12, 0.1);
    }
}

/* ============================================
   User Company in Table
   ============================================ */

.user-company {
    font-size: 11px;
    color: #64748b;
    display: block;
}

/* ============================================
   Alert Close Button
   ============================================ */

.admin-alert-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
    padding: 0 4px;
    line-height: 1;
}

.admin-alert-close:hover {
    opacity: 1;
}

/* ============================================
   Pagination
   ============================================ */

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-pagination-info {
    font-size: 13px;
    color: #aaa;
}

/* ============================================
   Revoke Modal Styles
   ============================================ */

.admin-modal--wide {
    max-width: 560px;
}

.admin-modal-header--danger {
    background: rgba(244, 67, 54, 0.1);
    border-bottom-color: rgba(244, 67, 54, 0.2);
}

.admin-modal-header--danger h3 {
    color: #f44336;
}

.admin-modal-warning {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.admin-modal-warning p {
    margin: 0 0 8px 0;
    color: #aaa;
    font-size: 14px;
}

.admin-modal-warning p:last-child {
    margin-bottom: 0;
}

.admin-modal-email {
    font-size: 16px !important;
    color: #fff !important;
    font-weight: 500;
}

.admin-modal-amount {
    color: #ffc107 !important;
}

/* ============================================
   Refund Options
   ============================================ */

.admin-refund-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-refund-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-refund-option:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.admin-refund-option--selected {
    background: rgba(234, 91, 12, 0.1);
    border-color: rgba(234, 91, 12, 0.4);
}

.admin-refund-option input[type="radio"] {
    margin-top: 3px;
    accent-color: #ea5b0c;
}

.admin-refund-option-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-refund-option-label {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.admin-refund-option-desc {
    font-size: 12px;
    color: #64748b;
}

/* ============================================
   Checkbox Label
   ============================================ */

.admin-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #aaa;
}

.admin-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #ea5b0c;
    cursor: pointer;
}

.admin-checkbox-label span {
    user-select: none;
}

/* ============================================
   Form Elements Extended
   ============================================ */

.admin-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.admin-form-select {
    width: 100%;
    padding: 12px 14px;
    padding-right: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.admin-form-select:focus {
    outline: none;
    border-color: rgba(234, 91, 12, 0.5);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.admin-form-select option {
    background: #1a1a1a;
    color: #fff;
}

.admin-form-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    transition: all 0.2s;
}

.admin-form-input:focus {
    outline: none;
    border-color: rgba(234, 91, 12, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.admin-form-input[type="date"] {
    color-scheme: dark;
}

.admin-form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media (max-width: 768px) {
    .admin-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-filter-bar .admin-search-wrapper {
        max-width: 100%;
    }

    .admin-filter-select {
        width: 100%;
    }

    .admin-form-row {
        grid-template-columns: 1fr;
    }

    .admin-table th:nth-child(5),
    .admin-table td:nth-child(5),
    .admin-table th:nth-child(6),
    .admin-table td:nth-child(6) {
        display: none;
    }
}

/* ============================================
   Admin Analytics Tab
   ============================================ */

.admin-analytics-tab {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Analytics Header */

.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 12px;
    margin-bottom: 24px;
}

.analytics-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}

.analytics-period-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 16px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}

.analytics-period-select:hover,
.analytics-period-select:focus {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.analytics-period-select option {
    background: #1e293b;
    color: #e2e8f0;
    padding: 8px 12px;
}

.analytics-period-select option:hover,
.analytics-period-select option:focus {
    background: #334155;
    color: #fff;
}

.analytics-period-select option:checked {
    background: #0d7c99;
    color: #fff;
}

.analytics-refresh-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #aaa;
    cursor: pointer;
    transition: all 0.2s;
}

.analytics-refresh-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.analytics-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.analytics-refresh-btn .spinning {
    animation: spin 1s linear infinite;
}

/* Analytics Sub-Navigation */

.analytics-nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    border: none;
}

.analytics-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.analytics-nav-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.analytics-nav-btn.active {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.4);
    color: #ea5b0c;
}

.analytics-nav-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
}

.analytics-report-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a2f 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.analytics-report-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.4);
}

.analytics-report-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.analytics-report-btn.success {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.analytics-report-btn.error {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

/* Analytics Content */

.analytics-content {
    min-height: 600px;
}

/* Analytics Loading & Error States */

.analytics-loading,
.analytics-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 400px;
    color: #aaa;
}

.analytics-error {
    color: #f87171;
}

.analytics-error button {
    margin-top: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.analytics-error button:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* KPI Grid */

.analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* KPI Cards */

.analytics-kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.2s;
}

.analytics-kpi-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.kpi-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

.analytics-kpi-card--orange .kpi-icon {
    background: rgba(234, 91, 12, 0.15);
    color: #ea5b0c;
}

.analytics-kpi-card--cyan .kpi-icon {
    background: rgba(13, 124, 153, 0.15);
    color: #0d7c99;
}

.analytics-kpi-card--green .kpi-icon {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.analytics-kpi-card--purple .kpi-icon {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.analytics-kpi-card--red .kpi-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.kpi-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kpi-value {
    font-family: 'Big John', sans-serif;
    font-size: 28px;
    color: #fff;
    line-height: 1.1;
}

.kpi-label {
    font-size: 14px;
    color: #aaa;
}

.kpi-sublabel {
    font-size: 12px;
    color: #64748b;
}

/* Metric Cards */

.analytics-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.analytics-metric-card {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.metric-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px 0;
}

.metric-card-icon {
    color: #ea5b0c;
    display: flex;
}

.metric-card-header h4 {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.metric-card-content {
    padding: 12px 0;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    transition: background 0.2s;
}

.metric-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.metric-row--warning .metric-value {
    color: #f87171;
}

.metric-row--empty {
    justify-content: center;
    color: #64748b;
    font-style: italic;
}

.metric-label {
    font-size: 13px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.metric-value {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}

/* Charts Section */

.analytics-charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.analytics-chart-container {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 20px;
    min-height: 280px;
    position: relative;
}

.analytics-chart-container canvas {
    border-radius: 8px;
}

.analytics-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-style: italic;
}

/* Chart Header — title + info icon above chart */

.analytics-chart-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 12px;
    padding: 0 4px;
}

.analytics-chart-title {
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.analytics-chart-header .chart-info-btn {
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    color: #64748b;
    padding: 0;
}

.analytics-chart-header .chart-info-btn svg {
    width: 13px;
    height: 13px;
}

/* Info Button */

.chart-info-wrapper {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.chart-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.chart-info-btn svg {
    width: 14px;
    height: 14px;
}

.chart-info-btn:hover {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.4);
    color: #ea5b0c;
    transform: scale(1.1);
}

/* Info Popup — rendered as portal into document.body, positioned via inline fixed style */

.chart-info-popup {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: popupFadeIn 0.15s ease;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 300px;
    box-sizing: border-box;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chart-info-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chart-info-popup-header h4 {
    margin: 0;
    flex: 1;
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    color: #fff;
}

.chart-info-popup-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(234, 91, 12, 0.2);
    border-radius: 50%;
    color: #ea5b0c;
}

.chart-info-popup-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chart-info-popup-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.chart-info-popup p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #aaa;
}

/* Conversions Section */

.analytics-conversions {
    margin-bottom: 24px;
}

.analytics-conversions h3 {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.conversion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.conversion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.conversion-name {
    font-size: 13px;
    color: #aaa;
}

.conversion-count {
    font-size: 14px;
    font-weight: 600;
    color: #10b981;
}

/* External Links */

.analytics-external-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.external-link-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-decoration: none;
    transition: all 0.2s;
}

.external-link-card:hover {
    background: rgba(234, 91, 12, 0.08);
    border-color: rgba(234, 91, 12, 0.3);
    transform: translateY(-2px);
}

.external-link-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 91, 12, 0.15);
    border-radius: 12px;
    color: #ea5b0c;
    flex-shrink: 0;
}

.external-link-card>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.external-link-title {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}

.external-link-desc {
    font-size: 13px;
    color: #aaa;
}

.external-link-arrow {
    color: #64748b;
    transition: all 0.2s;
}

.external-link-card:hover .external-link-arrow {
    color: #ea5b0c;
    transform: translate(2px, -2px);
}

/* Analytics Tables */

.analytics-table-section {
    margin-bottom: 24px;
}

.analytics-table-section h3 {
    margin: 0 0 16px 0;
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    color: #fff;
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.analytics-table th,
.analytics-table td {
    padding: 14px 20px;
    text-align: left;
}

.analytics-table th {
    background: rgba(255, 255, 255, 0.03);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #aaa;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.analytics-table td {
    font-size: 14px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.analytics-table tr:last-child td {
    border-bottom: none;
}

.analytics-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.endpoint-cell {
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    color: #aaa;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.count-cell {
    text-align: right;
    font-weight: 500;
}

/* Overview Grid */

.analytics-overview-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.analytics-card {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 20px;
}

.analytics-card--large {
    grid-column: 1 / -1;
}

.analytics-card h3 {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.analytics-card .text-muted {
    color: #aaa;
    font-size: 14px;
}

/* Quick Links */

.quick-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quick-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 14px;
}

.quick-link:hover {
    background: rgba(234, 91, 12, 0.15);
    transform: translateX(4px);
}

.quick-link span {
    font-size: 18px;
}

/* AI Chat */

.analytics-ai-chat {
    max-width: 900px;
    margin: 0 auto;
}

.ai-chat-container {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 320px);
    min-height: 500px;
}

.ai-chat-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-chat-header-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 124, 153, 0.15);
    border-radius: 12px;
    color: #0d7c99;
}

.ai-chat-header h3 {
    margin: 0 0 4px 0;
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    color: #fff;
}

.ai-chat-header .text-muted {
    color: #aaa;
    font-size: 13px;
    margin: 0;
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-chat-welcome {
    text-align: center;
    padding: 40px 20px;
}

.ai-chat-welcome-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    background: rgba(13, 124, 153, 0.15);
    border-radius: 50%;
    color: #0d7c99;
}

.ai-chat-welcome-icon svg {
    width: 28px;
    height: 28px;
}

.ai-chat-welcome p {
    color: #fff;
    font-size: 16px;
    margin: 0 0 24px 0;
}

.ai-chat-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.ai-chat-suggestions .text-muted {
    color: #aaa;
    font-size: 13px;
    margin-bottom: 8px;
}

.ai-chat-suggestions button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 10px 16px;
    color: #aaa;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.ai-chat-suggestions button:hover {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.3);
    color: #fff;
}

.ai-chat-message {
    display: flex;
    gap: 12px;
    max-width: 85%;
}

.ai-chat-message--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-chat-message--assistant {
    align-self: flex-start;
}

.ai-chat-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.ai-chat-message--user .ai-chat-message-avatar {
    background: rgba(234, 91, 12, 0.2);
}

.ai-chat-message--assistant .ai-chat-message-avatar {
    background: rgba(13, 124, 153, 0.2);
}

.ai-chat-message-content {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 12px 16px;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.ai-chat-message--user .ai-chat-message-content {
    background: rgba(234, 91, 12, 0.15);
    border-bottom-right-radius: 4px;
}

.ai-chat-message--assistant .ai-chat-message-content {
    background: rgba(13, 124, 153, 0.15);
    border-bottom-left-radius: 4px;
}

/* Typing Indicator */

.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: #94a3b8;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Chat Input */

.ai-chat-input-container {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.ai-chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 12px 20px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
}

.ai-chat-input:focus {
    border-color: rgba(234, 91, 12, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.ai-chat-input::placeholder {
    color: #64748b;
}

.ai-chat-send-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a2f 100%);
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-chat-send-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.4);
}

.ai-chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Small spinner for buttons */

.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Responsive */

@media (max-width: 768px) {
    .analytics-header {
        flex-direction: column;
        align-items: stretch;
    }

    .analytics-controls {
        justify-content: space-between;
    }

    .analytics-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .analytics-metrics-grid {
        grid-template-columns: 1fr;
    }

    .analytics-charts-row {
        grid-template-columns: 1fr;
    }

    .analytics-overview-grid {
        grid-template-columns: 1fr;
    }

    .analytics-nav {
        flex-direction: column;
    }

    .analytics-report-btn {
        width: 100%;
        justify-content: center;
    }

    .ai-chat-message {
        max-width: 95%;
    }

    .external-link-card {
        flex-direction: column;
        text-align: center;
    }

    .external-link-card>div {
        align-items: center;
    }
}

@media (max-width: 480px) {
    .analytics-kpi-grid {
        grid-template-columns: 1fr;
    }

    .conversion-grid {
        grid-template-columns: 1fr;
    }

    .analytics-chart-container {
        min-height: 220px;
        padding: 12px;
    }
}

/* ============================================
   Cache Management Styles
   ============================================ */

.admin-cache-stats {
    margin-top: 16px;
}

.admin-cache-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.admin-cache-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-cache-stat-label {
    font-size: 12px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-cache-stat-value {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    font-family: 'Roboto Mono', monospace;
}

.admin-cache-stat-sub {
    font-size: 11px;
    color: #64748b;
}

.admin-cache-breakdown {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 16px;
}

.admin-cache-breakdown h4 {
    font-size: 13px;
    color: #aaa;
    margin: 0 0 12px 0;
    font-weight: 500;
}

.admin-cache-type-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-cache-type-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    font-size: 14px;
    color: #e2e8f0;
}

.admin-cache-type-count {
    font-family: 'Roboto Mono', monospace;
    font-weight: 600;
    color: #0d7c99;
}

.admin-cache-stats-error {
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 14px;
}

.admin-cache-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.admin-cache-buttons .admin-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Cache Inspector */

.admin-cache-inspector {
    margin-top: 16px;
}

.admin-cache-search {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-cache-search .admin-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-family: 'Roboto Mono', monospace;
}

.admin-cache-search .admin-input:focus {
    outline: none;
    border-color: #0d7c99;
}

.admin-cache-keys-table {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    overflow: hidden;
}

.admin-cache-keys-header {
    display: grid;
    grid-template-columns: 1fr 80px 80px 50px;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-cache-keys-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px 50px;
    gap: 12px;
    padding: 10px 16px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease;
}

.admin-cache-keys-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.admin-cache-keys-row:last-child {
    border-bottom: none;
}

.admin-cache-key-name {
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-cache-key-ttl {
    font-size: 13px;
    color: #64748b;
    text-align: right;
}

.admin-cache-key-size {
    font-size: 13px;
    color: #64748b;
    text-align: right;
    font-family: 'Roboto Mono', monospace;
}

.admin-btn--icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    min-width: unset;
}

.admin-btn--small {
    padding: 6px 12px;
    font-size: 13px;
}

.admin-cache-empty {
    text-align: center;
    color: #64748b;
    font-size: 14px;
    padding: 24px;
}

/* ============================================
   Promo Codes Tab Styles
   ============================================ */

.admin-promo-codes-tab {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.admin-tab-header {
    margin-bottom: 8px;
}

.admin-search-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-search-container {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.admin-search-container .admin-search-input {
    width: 100%;
    padding-left: 40px;
}

.admin-search-container .admin-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
}

/* Promo code display */

.admin-promo-code {
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    background: rgba(234, 91, 12, 0.15);
    color: #ea5b0c;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(234, 91, 12, 0.3);
    display: inline-block;
}

/* Table cell modifiers */

.admin-cell--description {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #aaa;
}

.admin-text--danger {
    color: #f44336 !important;
}

.admin-text--muted {
    color: #64748b;
}

.admin-row--inactive {
    opacity: 0.6;
}

.admin-row--inactive:hover {
    opacity: 0.8;
}

/* Actions cell */

.admin-actions {
    display: flex;
    gap: 8px;
}

/* Link button style */

.admin-link {
    background: none;
    border: none;
    color: #0d7c99;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
    text-decoration: none;
    transition: all 0.2s;
}

.admin-link:hover:not(:disabled) {
    color: #0a5d73;
    text-decoration: underline;
}

.admin-link:disabled {
    color: #64748b;
    cursor: default;
}

/* Badge - inactive state */

.admin-badge--inactive {
    background: rgba(148, 163, 184, 0.15);
    color: #aaa;
}

/* Empty message */

.admin-empty-message {
    color: #64748b;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Compact table */

.admin-table--compact th,
.admin-table--compact td {
    padding: 10px 14px;
}

/* Large modal */

.admin-modal--large {
    max-width: 640px;
}

/* Input field */

.admin-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    transition: all 0.2s;
}

.admin-input:focus {
    outline: none;
    border-color: rgba(234, 91, 12, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.admin-input::placeholder {
    color: #64748b;
}

.admin-input--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Form group with label */

.admin-form-group {
    margin-bottom: 20px;
}

.admin-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #aaa;
    margin-bottom: 8px;
}

.admin-form-group small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}

/* Checkbox form group */

.admin-form-group--checkbox {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-form-group--checkbox label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 0;
}

.admin-form-group--checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #ea5b0c;
    cursor: pointer;
}

.admin-form-group--checkbox small {
    margin-left: 28px;
}

/* Form row for side-by-side fields */

.admin-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ============================================
   Promo Code History Styles
   ============================================ */

.admin-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
}

.admin-history-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 14px 16px;
}

.admin-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.admin-history-action {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-history-date {
    font-size: 12px;
    color: #64748b;
}

.admin-history-actor {
    font-size: 13px;
    color: #aaa;
    margin-bottom: 6px;
}

.admin-history-details {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 8px;
}

.admin-history-change {
    font-size: 12px;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.admin-history-change:last-child {
    margin-bottom: 0;
}

.admin-history-change strong {
    color: #aaa;
}

/* Ghost button variant */

.admin-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #aaa;
}

.admin-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Limits cell styling */

.admin-cell--limits {
    font-size: 13px;
    line-height: 1.4;
}

/* ============================================
   DASHBOARD WIDGETS
   ============================================ */

/* Funnel overview: Health + Trend */

.analytics-dashboard-funnel-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.analytics-dashboard-funnel-card {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 20px;
    overflow: hidden;
}

.dashboard-mid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.dashboard-widget-title {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Funnel Health Score + Alerts */

.analytics-funnel-health {
    display: flex;
    gap: 20px;
    padding: 0;
    flex: 1;
    min-width: 0;
}

.funnel-health-score {
    width: 96px;
    height: 96px;
    border: 3px solid;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.funnel-health-number {
    font-family: 'Big John', sans-serif;
    font-size: 32px;
    line-height: 1;
    margin-bottom: 2px;
}

.funnel-health-label {
    font-size: 9px;
    text-transform: uppercase;
    color: #aaa;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.2;
}

.funnel-health-alerts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.funnel-health-alert {
    padding: 8px 10px;
    border-left: 3px solid;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.funnel-health-alert:hover {
    filter: brightness(1.2);
}

.funnel-health-alert--warning {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.funnel-health-alert--critical {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.funnel-health-alert .alert-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.funnel-health-alert .alert-recommendation {
    display: block;
    font-size: 11px;
    color: #aaa;
    line-height: 1.4;
}

/* Trend Summary */

.analytics-trend-summary {
    display: flex;
    gap: 24px;
    padding: 0;
    align-items: center;
    flex-wrap: wrap;
}

.trend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.trend-item-value {
    font-family: 'Big John', sans-serif;
    font-size: 20px;
    color: #fff;
    line-height: 1;
    margin-bottom: 2px;
}

.trend-item-label {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.trend-item-label .chart-info-btn {
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    color: #64748b;
    padding: 0;
}

.trend-item-label .chart-info-btn svg {
    width: 11px;
    height: 11px;
}

.trend-item-change {
    font-size: 12px;
    font-weight: 700;
}

/* Quick Actions */

.dashboard-quick-actions {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 16px;
}

.dashboard-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dashboard-action-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    color: inherit;
}

.dashboard-action-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.dashboard-action-icon {
    display: flex;
    flex-shrink: 0;
}

.dashboard-action-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.dashboard-action-desc {
    display: block;
    font-size: 10px;
    color: #64748b;
}

/* Funnel Conversion Mini */

.dashboard-funnel-mini {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 16px;
}

.dashboard-funnel-mini-stages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-funnel-mini-stage {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-funnel-mini-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.dashboard-funnel-mini-label {
    font-size: 12px;
    color: #aaa;
}

.dashboard-funnel-mini-rate {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
}

.dashboard-funnel-mini-bar-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.dashboard-funnel-mini-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
    min-width: 2px;
}

.dashboard-funnel-mini-bar-target {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
}

.dashboard-funnel-mini-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-funnel-mini-target {
    font-size: 10px;
    color: #475569;
}

.dashboard-funnel-mini-trend {
    font-size: 11px;
    color: #64748b;
}

.dashboard-funnel-mini-trend--up {
    color: #10b981;
}

.dashboard-funnel-mini-trend--down {
    color: #ef4444;
}

/* Dashboard responsive */

@media (max-width: 1200px) {
    .analytics-dashboard-funnel-overview {
        grid-template-columns: 1fr;
    }

    .analytics-funnel-health {
        flex-direction: row;
    }
}

@media (max-width: 800px) {
    .analytics-dashboard-funnel-overview {
        grid-template-columns: 1fr;
    }

    .analytics-funnel-health {
        flex-direction: column;
    }

    .analytics-trend-summary {
        flex-wrap: wrap;
        gap: 16px;
    }

    .dashboard-mid-row {
        grid-template-columns: 1fr;
    }

    .dashboard-actions-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ANALYTICS INSIGHT CARDS (Traffic + API tabs)
   ============================================ */

/* Shared insight grid for Traffic + API tabs */

.analytics-traffic-insights,
.analytics-api-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Section block (e.g., Source Efficiency with title + content) */

.analytics-insight-section {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 16px;
}

.analytics-insight-section-title {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    color: #fff;
    margin: 0 0 12px 0;
}

/* Insight card (used by bounce rate, session duration, perf alert, error alert, usage) */

.analytics-insight-card {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 14px 16px;
}

.insight-card-header {
    margin-bottom: 8px;
}

.insight-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.insight-card-description {
    font-size: 13px;
    color: #aaa;
    margin: 0;
    line-height: 1.5;
}

/* Traffic source efficiency bars */

.traffic-source-efficiency {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.traffic-source-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.traffic-source-name {
    font-size: 13px;
    color: #cbd5e1;
    min-width: 80px;
}

.traffic-source-bar-wrapper {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
}

.traffic-source-bar {
    height: 100%;
    background: linear-gradient(90deg, #ea5b0c, #ff7a2f);
    border-radius: 3px;
    transition: width 0.3s;
}

.traffic-source-count {
    font-size: 13px;
    color: #aaa;
    min-width: 40px;
    text-align: right;
}

@media (max-width: 800px) {
    .analytics-traffic-insights,
    .analytics-api-insights {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   LEAD FUNNEL STYLES
   ============================================ */

.analytics-lead-funnel-view {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Period label */

.funnel-period {
    font-size: 13px;
    color: #64748b;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.funnel-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.funnel-filter-badge svg {
    width: 12px;
    height: 12px;
}

.funnel-stage-details {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.funnel-stage-detail-item {
    font-size: 10px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: capitalize;
}

.analytics-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #94a3b8;
}

.analytics-toggle input[type="checkbox"] {
    accent-color: #ea5b0c;
    width: 14px;
    height: 14px;
}

.analytics-toggle-label {
    white-space: nowrap;
}

/* Hero trend chart - full width, prominent positioning */

.funnel-hero-chart {
    margin-bottom: 8px;
}

/* Demo Lifecycle + Time to Convert side by side */

.funnel-mid-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Collapsible insights */

.funnel-section-title--clickable {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.funnel-section-title--clickable:hover {
    opacity: 0.85;
}

.funnel-insights-badges {
    display: inline-flex;
    gap: 6px;
    margin-left: 8px;
}

.funnel-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

.funnel-badge--critical {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.funnel-badge--warning {
    background: rgba(234, 91, 12, 0.15);
    color: #ea5b0c;
}

.funnel-collapse-chevron {
    font-size: 10px;
    color: #64748b;
    margin-left: auto;
}

/* Before/After comparison cards below trend chart */

.funnel-before-after {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.funnel-ba-title {
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    color: #ea5b0c;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.funnel-ba-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.funnel-ba-card {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.funnel-ba-card--after {
    border-color: rgba(13, 124, 153, 0.3);
    background: rgba(13, 124, 153, 0.05);
}

.funnel-ba-label {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.funnel-ba-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #94a3b8;
    padding: 2px 0;
}

.funnel-ba-row strong {
    color: #fff;
}

.funnel-ba-delta {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
}

.funnel-ba-delta--up {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.funnel-ba-delta--down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.funnel-ba-metric-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.funnel-ba-source {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 3px;
    flex-shrink: 0;
}

.funnel-ba-source--plausible {
    color: #0d7c99;
    background: rgba(13, 124, 153, 0.15);
}

.funnel-ba-source--db {
    color: #ea5b0c;
    background: rgba(234, 91, 12, 0.15);
}

.funnel-ba-note {
    margin-top: 8px;
    font-size: 11px;
    color: #64748b;
    font-style: italic;
    padding: 6px 10px;
    background: rgba(234, 179, 8, 0.05);
    border-left: 2px solid rgba(234, 179, 8, 0.3);
    border-radius: 0 4px 4px 0;
}

.funnel-ba-legend {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    font-size: 11px;
    color: #475569;
}

.funnel-ba-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media (max-width: 800px) {
    .funnel-ba-grid {
        grid-template-columns: 1fr;
    }
}

/* Funnel Section wrapper with subtle divider */

.funnel-section {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.funnel-section:last-of-type {
    border-bottom: none;
}

/* Section labels — same style as section-title (Big John, white) */

.funnel-section-label {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    color: #fff;
    margin: 0 0 2px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Section subtitle — tight to label */

.funnel-section-subtitle {
    font-size: 12px;
    color: #475569;
    margin-top: 0;
    margin-bottom: 12px;
}

.funnel-section-title {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    color: #fff;
    margin: 0 0 2px 0;
}

/* Pipeline Layout — Acquisition (Section 1) */

.funnel-pipeline-acquisition {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.funnel-pipeline-acquisition .funnel-stage-card {
    flex: 1;
    min-width: 0;
}

.funnel-entry-points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* Pipeline Layout — Conversion (Section 2) */

.funnel-pipeline-conversion {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    width: 100%;
}

.funnel-pipeline-conversion .funnel-stage-card {
    flex: 1;
    min-width: 0;
}

/* Stage Card */

.funnel-stage-card {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 16px;
    min-width: 140px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.funnel-stage-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.funnel-stage-card--highlight {
    border-color: rgba(234, 91, 12, 0.3);
    background: rgba(234, 91, 12, 0.05);
}

.funnel-stage-card--highlight:hover {
    border-color: rgba(234, 91, 12, 0.5);
    background: rgba(234, 91, 12, 0.08);
}

/* Target-colored borders for conversion stage cards */

.funnel-stage-card--target-green {
    border-color: rgba(16, 185, 129, 0.3);
}

.funnel-stage-card--target-green:hover {
    border-color: rgba(16, 185, 129, 0.5);
}

.funnel-stage-card--target-orange {
    border-color: rgba(234, 91, 12, 0.3);
}

.funnel-stage-card--target-orange:hover {
    border-color: rgba(234, 91, 12, 0.5);
}

.funnel-stage-card--target-red {
    border-color: rgba(239, 68, 68, 0.3);
}

.funnel-stage-card--target-red:hover {
    border-color: rgba(239, 68, 68, 0.5);
}

.funnel-stage-value {
    font-family: 'Big John', sans-serif;
    font-size: 24px;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}

.funnel-stage-total {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: -2px;
    margin-bottom: 2px;
}

/* "via Funnel" label next to flow_value */

.funnel-stage-flow-label {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #64748b;
    vertical-align: baseline;
}

/* Target indicator below trend */

.funnel-stage-target {
    font-size: 10px;
    font-weight: 500;
    margin-top: 4px;
}

.funnel-stage-label {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 6px;
}

.funnel-stage-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.funnel-stage-trend--up {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

.funnel-stage-trend--down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.funnel-stage-trend--neutral {
    color: #64748b;
    background: rgba(100, 116, 139, 0.12);
}

.funnel-trend-arrow {
    font-size: 11px;
}

/* "vs. Vorperiode" context label */

.funnel-trend-context {
    font-size: 9px;
    font-weight: 400;
    opacity: 0.7;
    margin-left: 2px;
}

/* Source mini-bars inside stage cards */

.funnel-stage-sources {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.funnel-source-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}

.funnel-source-name {
    color: #64748b;
    min-width: 50px;
    flex-shrink: 0;
}

.funnel-source-bar-track {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 2px;
    overflow: hidden;
}

.funnel-source-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.funnel-source-value {
    color: #aaa;
    min-width: 30px;
    text-align: right;
}

/* Funnel Connector */

.funnel-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    min-width: 50px;
}

.funnel-connector-line {
    width: 100%;
    height: 0;
    border-top: 2px dashed rgba(255, 255, 255, 0.15);
}

.funnel-connector-rate {
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.funnel-connector-rate-row {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.funnel-connector-rate-row .chart-info-btn {
    width: 14px;
    height: 14px;
}

.funnel-connector-rate-row .chart-info-btn svg {
    width: 10px;
    height: 10px;
}

/* Absolute numbers above connector line (e.g. "118 von 17K") */

.funnel-connector-absolute {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    color: #64748b;
    white-space: nowrap;
    margin-bottom: 2px;
}

/* "Conversion" label under rate */

.funnel-connector-label {
    font-family: 'Roboto', sans-serif;
    font-size: 9px;
    font-weight: 400;
    opacity: 0.6;
    margin-left: 3px;
}

.funnel-connector-change {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 400;
    opacity: 0.7;
    cursor: help;
}

.funnel-connector-change--up {
    color: #10b981;
}

.funnel-connector-change--down {
    color: #ef4444;
}

.funnel-connector-arrow {
    font-size: 16px;
    line-height: 1;
    opacity: 0.6;
}

.funnel-connector-spacer {
    min-width: 50px;
}

.funnel-connector--vertical {
    flex-direction: row;
}

.funnel-connector--vertical .funnel-connector-line {
    width: 0;
    height: 30px;
    border-top: none;
    border-left: 2px dashed rgba(255, 255, 255, 0.15);
}

/* Demo Lifecycle */

.funnel-lifecycle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.funnel-lifecycle-card {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.funnel-lifecycle-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.funnel-lifecycle-card--active {
    border-color: rgba(16, 185, 129, 0.2);
}

.funnel-lifecycle-card--post {
    border-color: rgba(234, 91, 12, 0.2);
}

.funnel-lifecycle-card--lost {
    border-color: rgba(239, 68, 68, 0.2);
}

.funnel-lifecycle-value {
    font-family: 'Big John', sans-serif;
    font-size: 28px;
    color: #fff;
    line-height: 1;
    margin-bottom: 4px;
}

.funnel-lifecycle-label {
    font-size: 12px;
    color: #aaa;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.funnel-lifecycle-label .chart-info-btn {
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    color: #64748b;
    padding: 0;
}

.funnel-lifecycle-label .chart-info-btn svg {
    width: 11px;
    height: 11px;
}

.funnel-lifecycle-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    opacity: 0.4;
}

/* Insights Section */

.funnel-insights-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.funnel-insight-card {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 16px;
    transition: all 0.2s ease;
}

.funnel-insight-card:hover {
    background: rgba(255, 255, 255, 0.05);
}

.funnel-insight-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.funnel-insight-severity {
    flex-shrink: 0;
    display: flex;
}

.funnel-insight-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.funnel-insight-desc {
    font-size: 13px;
    color: #aaa;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.funnel-insight-metrics {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #aaa;
}

.funnel-insight-metric strong {
    font-weight: 600;
}

.funnel-insight-trend {
    color: #64748b;
}

.funnel-insight-trend--up {
    color: #10b981;
}

.funnel-insight-recommendation {
    font-size: 12px;
    color: #cbd5e1;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
}

.funnel-insight-recommendation strong {
    color: #ea5b0c;
    font-weight: 600;
}

/* Bottom Grid: Trend Chart + Time to Convert */

.funnel-bottom-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

/* Time to Convert */

.funnel-time-to-convert {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 20px;
}

.funnel-ttc-bars {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.funnel-ttc-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.funnel-ttc-label {
    font-size: 12px;
    color: #aaa;
    min-width: 120px;
    flex-shrink: 0;
}

.funnel-ttc-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.funnel-ttc-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
    min-width: 4px;
}

.funnel-ttc-bar-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #64748b;
}

.funnel-ttc-value {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    min-width: 40px;
    text-align: right;
}

/* Source Attribution */

.funnel-source-attribution {
    display: flex;
    flex-direction: column;
}

/* Source Comparison Cards (Section 3) */

.funnel-source-comparison {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.funnel-sc-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.funnel-sc-card {
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 14px;
    transition: all 0.2s ease;
}

.funnel-sc-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.funnel-sc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.funnel-sc-card-source {
    font-size: 12px;
    color: #aaa;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.funnel-sc-card-pct {
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    flex-shrink: 0;
}

.funnel-sc-card-value {
    font-family: 'Big John', sans-serif;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 2px;
}

.funnel-sc-card-label {
    font-size: 10px;
    color: #64748b;
    margin-bottom: 8px;
}

.funnel-sc-card-bar-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 2px;
    overflow: hidden;
}

.funnel-sc-card-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
    min-width: 2px;
}

/* Data Quality Footer */

.funnel-data-quality {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 12px;
    background: var(--kachel-grad);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.funnel-data-quality--ok .funnel-dq-icon {
    color: #10b981;
}

.funnel-data-quality--warn .funnel-dq-icon {
    color: #ef4444;
}

.funnel-dq-icon {
    display: flex;
    flex-shrink: 0;
}

.funnel-dq-label {
    color: #aaa;
    font-weight: 600;
    flex-shrink: 0;
}

.funnel-dq-badge {
    font-weight: 500;
    white-space: nowrap;
}

/* Responsive: stack pipeline on narrow screens */

@media (max-width: 1200px) {
    .funnel-pipeline-conversion {
        flex-wrap: wrap;
    }

    .funnel-bottom-grid {
        grid-template-columns: 1fr;
    }

    .funnel-mid-grid {
        grid-template-columns: 1fr;
    }

    .funnel-sc-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 800px) {
    .funnel-pipeline-acquisition {
        flex-direction: column;
    }

    .funnel-entry-points {
        flex-direction: row;
        width: 100%;
    }

    .funnel-entry-points .funnel-stage-card {
        flex: 1;
    }

    .funnel-lifecycle-grid {
        grid-template-columns: 1fr;
    }

    .funnel-sc-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============== Cell Access Analytics =============== */

.analytics-cell-access-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cell-access-table .sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.cell-access-table .sortable-th:hover {
    color: var(--text-primary);
}

.cell-access-row:hover td {
    background: rgba(255, 255, 255, 0.04);
}

.cell-access-row--expanded td {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: none;
}

.cell-access-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cell-access-user-name {
    color: var(--text-primary);
    font-weight: 500;
}

.cell-access-user-email {
    color: var(--text-secondary);
    font-size: 12px;
}

.cell-access-user-company {
    color: var(--text-tertiary, #64748b);
    font-size: 11px;
}

.cell-access-detail-row td {
    padding: 0 !important;
    border-top: none;
}

.cell-access-detail-panel {
    padding: 16px 20px;
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.02));
    border-top: 1px solid var(--border-color);
}

.cell-access-detail-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.cell-access-flags {
    padding: 12px 16px;
    margin-bottom: 16px;
    background: rgba(234, 91, 12, 0.06);
    border: 1px solid rgba(234, 91, 12, 0.2);
    border-radius: var(--radius-md, 8px);
}

.cell-access-flag-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cell-access-flag-list li {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    font-size: 12px;
}

.cell-access-flag-name {
    color: #ea5b0c;
    font-weight: 600;
    font-family: monospace;
}

.cell-access-flag-desc {
    color: var(--text-secondary);
    font-size: 11px;
}

.cell-access-detail-cells {
    margin-top: 12px;
}

.cell-access-cells-scroll {
    max-height: 250px;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .cell-access-detail-charts {
        grid-template-columns: 1fr;
    }
}

/* Scraping Detection View */

.scraping-filter-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.scraping-filter-pill {
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid var(--border-color, #333);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.scraping-filter-pill:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.scraping-filter-pill.active {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--text-primary);
    color: var(--text-primary);
    font-weight: 600;
}

/* ============================================================
   AdminUserQuickActionsModal — re-send / deactivate / delete bundle
   ============================================================ */

.admin-modal--narrow {
    max-width: 520px;
}

.admin-modal-sub {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--text-tertiary);
    word-break: break-all;
}

.admin-banner {
    margin: 0 var(--space-lg) 12px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.admin-banner--error {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.admin-banner--success {
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #4ade80;
}

.admin-quick-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border-light, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    background: var(--bg-2, rgba(255, 255, 255, 0.02));
}

.admin-quick-action + .admin-quick-action {
    margin-top: 8px;
}

.admin-quick-action__text {
    flex: 1;
    min-width: 0;
}

.admin-quick-action__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.admin-quick-action__desc {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.4;
}

.admin-quick-action .admin-btn {
    flex-shrink: 0;
    min-width: 96px;
    justify-content: center;
}

/* Admin portal with tabs (Subscriptions, Users, Products, System) */

/**
 * Profile Page Styles
 * Glassmorphism design for user profile
 */

/* ============================================
   Profile Page Layout
   ============================================ */

.profile-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.profile-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 16px;
    color: #94a3b8;
}

.profile-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(234, 91, 12, 0.2);
    border-top-color: #ea5b0c;
    border-radius: 50%;
    animation: profile-spin 1s linear infinite;
}

@keyframes profile-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Profile Header
   ============================================ */

.profile-header {
    margin-bottom: 32px;
}

.profile-avatar-section {
    display: flex;
    align-items: center;
    gap: 24px;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.3) 0%, rgba(234, 91, 12, 0.1) 100%);
    border: 3px solid rgba(234, 91, 12, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ea5b0c;
    font-family: 'Big John', sans-serif;
    font-size: 32px;
    font-weight: 600;
    flex-shrink: 0;
}

.profile-header-info {
    flex: 1;
}

.profile-name {
    font-family: 'Big John', sans-serif;
    font-size: 28px;
    margin: 0 0 4px 0;
    color: #fff;
}

.profile-email {
    margin: 0 0 12px 0;
    color: #94a3b8;
    font-size: 15px;
}

.profile-header-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================
   Profile Alerts
   ============================================ */

.profile-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    backdrop-filter: blur(10px);
}

.profile-alert svg {
    flex-shrink: 0;
}

.profile-alert--success {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #4caf50;
}

.profile-alert--error {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #f44336;
}

/* ============================================
   Profile Content
   ============================================ */

.profile-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ============================================
   Profile Cards - Glassmorphism
   ============================================ */

.profile-card {
    background: rgba(26, 26, 26, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s;
}

.profile-card--glass {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.profile-card:hover {
    border-color: rgba(234, 91, 12, 0.2);
}

.profile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.profile-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-card-title svg {
    color: #ea5b0c;
}

.profile-card-title h2 {
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    margin: 0;
    color: #fff;
}

.profile-card-body {
    padding: 24px;
}

/* ============================================
   Profile Info Grid
   ============================================ */

.profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.profile-info-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-info-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    font-weight: 500;
}

.profile-info-value {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}

.profile-info-value--mono {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: #94a3b8;
    word-break: break-all;
}

/* ============================================
   Profile Badges
   ============================================ */

.profile-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-badge--admin {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.2) 0%, rgba(234, 91, 12, 0.1) 100%);
    color: #ea5b0c;
    border: 1px solid rgba(234, 91, 12, 0.3);
}

.profile-badge--user {
    background: rgba(13, 124, 153, 0.15);
    color: #0d7c99;
    border: 1px solid rgba(13, 124, 153, 0.3);
}

.profile-badge--active {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.profile-badge--inactive {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
}

.profile-badge--verified {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
}

.profile-badge--unverified {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.profile-badge--pending {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.profile-badge--premium {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.25) 0%, rgba(234, 91, 12, 0.1) 100%);
    color: #ea5b0c;
    border: 1px solid rgba(234, 91, 12, 0.4);
}

.profile-badge--pro {
    background: rgba(13, 124, 153, 0.2);
    color: #0d7c99;
    border: 1px solid rgba(13, 124, 153, 0.4);
}

.profile-badge--basic {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Demo-trial nudge (Entscheidung 9) — subtle, mixed-case (not shouty),
   so "ends {date}" reads naturally instead of being upper-cased. */

.profile-badge--demo-trial {
    background: rgba(234, 91, 12, 0.08);
    color: #ea5b0c;
    border: 1px solid rgba(234, 91, 12, 0.25);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}

/* ============================================
   Profile Subscription
   ============================================ */

.profile-subscription {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-subscription-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-subscription-tier {
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
}

.profile-no-subscription {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.profile-no-subscription svg {
    color: rgba(234, 91, 12, 0.3);
    margin-bottom: 16px;
}

.profile-no-subscription h3 {
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    margin: 0 0 8px 0;
    color: #fff;
}

.profile-no-subscription p {
    margin: 0;
    font-size: 14px;
}

/* ============================================
   Profile Security Info
   ============================================ */

.profile-security-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================
   Profile Form
   ============================================ */

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.profile-form-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-form-label {
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
}

.profile-form-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    transition: all 0.2s;
}

.profile-form-input:focus {
    outline: none;
    border-color: rgba(234, 91, 12, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.profile-form-input::placeholder {
    color: #64748b;
}

.profile-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 8px;
}

/* ============================================
   Profile Buttons
   ============================================ */

.profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid;
}

.profile-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.profile-btn--primary {
    background: linear-gradient(135deg, #ea5b0c 0%, #d14e09 100%);
    border-color: #ea5b0c;
    color: #fff;
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.3);
}

.profile-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #d14e09 0%, #b84308 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(234, 91, 12, 0.4);
}

.profile-btn--secondary {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: #94a3b8;
}

.profile-btn--secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.profile-btn--small {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a2f 100%);
    border: none;
    color: #fff;
    margin-left: 12px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.3);
    transition: all 0.2s ease;
}

.profile-btn--small:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff7a2f 0%, #ea5b0c 100%);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.5);
    transform: translateY(-1px);
}

.profile-btn--small:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   Danger Zone - Delete Account
   ============================================ */

.profile-card--danger {
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.profile-card--danger .profile-card-header {
    border-bottom-color: rgba(239, 68, 68, 0.2);
}

.profile-card--danger .profile-card-title svg {
    color: #ef4444;
}

.profile-card--danger .profile-card-title h2 {
    color: #ef4444;
}

.profile-delete-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-delete-info p {
    color: #94a3b8;
    margin: 0;
    font-size: 14px;
}

.profile-delete-confirm {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-delete-warning {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 16px;
    border-radius: 8px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.profile-delete-instruction {
    color: #94a3b8;
    margin: 0;
    font-size: 14px;
}

.profile-form-input--danger {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.profile-form-input--danger:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

.profile-btn--danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-btn--danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

.profile-btn--danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.profile-btn--danger-outline {
    background: transparent;
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.5);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-btn--danger-outline:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
    .profile-page {
        padding: 20px 16px;
    }

    .profile-avatar-section {
        flex-direction: column;
        text-align: center;
    }

    .profile-header-badges {
        justify-content: center;
    }

    .profile-info-grid {
        grid-template-columns: 1fr;
    }

    .profile-form-grid {
        grid-template-columns: 1fr;
    }

    .profile-form-actions {
        flex-direction: column;
    }

    .profile-form-actions .profile-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =============================================
   Technology Radar — Viewport-contained layout
   ============================================= */

/* ===== Overview Page (Viewport-filling) ===== */

.radar-overview--viewport {
  display: flex;
  align-items: stretch;
  height: 100%;
  padding: 16px;
}

.radar-overview__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  height: 100%;
}

/* Cards stretch to fill their grid cell */

.radar-overview__cards .story-card {
  height: 100%;
}

@media (max-width: 900px) {
  .radar-overview__cards {
    grid-template-columns: 1fr;
  }
}

/* ===== Section Page (Viewport-contained, slide-based) ===== */

.radar-section--viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 0;
  position: relative;
}

/* Plot container — Glassmorphism */

.radar-plot-container {
  background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* "Section not found" error state */

.radar-section--not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text-secondary, rgba(255, 255, 255, 0.65));
}

/* ===== Error state with retry ===== */

.radar-section__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  color: var(--text-secondary, rgba(255, 255, 255, 0.65));
}

.radar-section__error p {
  margin: 0 0 16px;
  font-size: 0.95rem;
}

.radar-section__retry-btn {
  display: inline-block;
  padding: 8px 24px;
  border: 1px solid var(--brand, #ea5b0c);
  border-radius: 6px;
  background: transparent;
  color: var(--brand, #ea5b0c);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.radar-section__retry-btn:hover {
  background: var(--brand, #ea5b0c);
  color: #fff;
}

/* ===== Year Toggle (Performance Envelope) ===== */

/* Same style as .view-toggle-mini / .view-toggle-btn */

.radar-year-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.radar-year-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.radar-year-toggle__btn:hover {
  border-color: rgba(234, 91, 12, 0.4);
  background: rgba(234, 91, 12, 0.06);
  color: rgba(255, 255, 255, 0.9);
}

.radar-year-toggle__btn--active {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.2), rgba(234, 91, 12, 0.08));
  border-color: rgba(234, 91, 12, 0.5);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 12px rgba(234, 91, 12, 0.15);
}

/* ===== Radar section tabs — colored glow per section ===== */

.section-tab[style*="--tab-accent"] {
  transition: all 0.25s ease;
}

.section-tab.active[style*="--tab-accent"] {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tab-accent) 20%, transparent) 0%,
    color-mix(in srgb, var(--tab-accent) 8%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--tab-accent) 50%, transparent);
  color: var(--text-primary, rgba(255, 255, 255, 0.95));
  box-shadow:
    0 0 20px color-mix(in srgb, var(--tab-accent) 25%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--tab-accent) 15%, transparent);
}

.section-tab[style*="--tab-accent"]:hover:not(.active) {
  border-color: color-mix(in srgb, var(--tab-accent) 30%, transparent);
  background: color-mix(in srgb, var(--tab-accent) 6%, transparent);
}

/* Chart skeleton for loading state */

.chart-skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

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

/* Technology Radar overview and section page layouts */

/* User profile page with Glassmorphism design */

/*
 * Plan Selection Page Styles
 * Glassmorphism design matching Batemo Insights corporate design
 */

.plan-selection-page {
    position: fixed;
    inset: 0;
    top: 56px;
    /* Account for CommandBar height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Changed from center to prevent overlap */
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #0a0a0a 100%);
    overflow-y: auto;
    padding: 40px 20px;
    color: var(--text-primary, #fff);
}

/* Animated background orbs */

.plan-selection-page::before {
    content: '';
    position: fixed;
    top: -30%;
    left: -20%;
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(234, 91, 12, 0.08) 0%, transparent 60%);
    animation: planOrb1 25s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.plan-selection-page::after {
    content: '';
    position: fixed;
    bottom: -20%;
    right: -20%;
    width: 70%;
    height: 70%;
    background: radial-gradient(ellipse at center, rgba(13, 124, 153, 0.06) 0%, transparent 50%);
    animation: planOrb2 30s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes planOrb1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(5%, 10%) scale(1.1);
    }
}

@keyframes planOrb2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-8%, -5%) scale(1.15);
    }
}

.plan-selection-page .page-header {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 2.5rem;
}

.plan-selection-page .page-header h1 {
    font-family: 'Big John', 'Roboto', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #fff);
}

.plan-selection-page .page-header p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
}

/* Loading State */

.plan-selection-page .loading-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.plan-selection-page .loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent-primary, #ea5b0c);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Alerts */

.plan-selection-page .alert {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    max-width: 600px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Pre-Register Banner - full width to match plans container */

.plan-selection-page .pre-register-banner {
    max-width: 800px;
    width: 100%;
    display: block;
}

.plan-selection-page .alert-error {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #fca5a5;
}

.plan-selection-page .alert-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.alert-icon {
    font-size: 1.25rem;
}

/* Plans Container */

.plans-container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto 2rem;
    width: 100%;
}

/* Plan Card - Glassmorphism */

.plan-card {
    position: relative;
    background: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.plan-card:hover {
    transform: translateY(-8px);
    border-color: rgba(13, 124, 153, 0.5);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(13, 124, 153, 0.1);
}

/* No hover effect for disabled cards */

.plan-card.no-hover:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.plan-card.featured {
    border-color: rgba(234, 91, 12, 0.4);
    background: rgba(234, 91, 12, 0.05);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 80px rgba(234, 91, 12, 0.08);
}

.plan-card.featured:hover {
    border-color: rgba(234, 91, 12, 0.6);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 100px rgba(234, 91, 12, 0.15);
}

.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.375rem 1.25rem;
    border-radius: 20px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.plan-badge.recommended {
    background: linear-gradient(135deg, #ea5b0c 0%, #d14e09 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(234, 91, 12, 0.4);
}

.plan-card h2 {
    font-family: 'Big John', 'Roboto', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0.75rem 0 1.25rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.plan-price {
    text-align: center;
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plan-price .price {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    line-height: 1;
}

.plan-price .period {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* Introductory offer pricing */

.plan-price .price-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.plan-price .price-intro .price {
    font-size: 3rem;
    color: #ea5b0c;
}

.plan-price .price-intro .intro-label {
    font-size: 0.75rem;
    color: #ea5b0c;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.plan-price .price-regular {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.5rem;
}

.plan-price .price-regular .regular-price {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: line-through;
}

.plan-price .price-regular .period {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 2px;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    flex: 1;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.625rem 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

.plan-features .check {
    color: var(--accent-secondary, #0d7c99);
    font-weight: bold;
    font-size: 1.1rem;
}

/* Plan Actions - Button container at bottom */

.plan-actions {
    margin-top: auto;
    width: 100%;
}

.plan-actions .btn {
    width: 100%;
}

/* Buttons */

.plan-selection-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-family: 'Big John', 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    width: 100%;
}

.plan-selection-page .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.plan-selection-page .btn-primary {
    background: linear-gradient(135deg, #ea5b0c 0%, #d14e09 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(234, 91, 12, 0.35);
}

.plan-selection-page .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(234, 91, 12, 0.5);
}

.plan-selection-page .btn-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary, #fff);
}

.plan-selection-page .btn-outline:hover:not(:disabled) {
    border-color: var(--accent-secondary, #0d7c99);
    color: var(--accent-secondary, #0d7c99);
    background: rgba(13, 124, 153, 0.1);
}

.plan-selection-page .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #fff);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.plan-selection-page .btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Plan Info */

.plan-info {
    position: relative;
    z-index: 1;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.plan-info strong {
    color: rgba(255, 255, 255, 0.8);
}

.plan-info .btn-link {
    background: none;
    border: none;
    color: var(--accent-secondary, #0d7c99);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.plan-info .btn-link:hover {
    color: var(--accent-primary, #ea5b0c);
}

/* Status Card - Glassmorphism */

.status-card {
    position: relative;
    z-index: 1;
    max-width: 500px;
    width: 100%;
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.status-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 20px rgba(234, 91, 12, 0.3));
}

.status-card h2 {
    font-family: 'Big John', 'Roboto', sans-serif;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.status-message {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.period-info {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
}

.status-details {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-item:last-child {
    border-bottom: none;
}

.detail-item .label {
    color: rgba(255, 255, 255, 0.5);
}

.detail-item .value {
    font-weight: 600;
    color: #fff;
}

/* Payment Card - Glassmorphism */

.payment-card {
    position: relative;
    z-index: 1;
    width: 100%;
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.payment-element-container {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    min-height: 150px;
}

.payment-info {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.button-group {
    display: flex;
    gap: 1rem;
}

.button-group .btn {
    flex: 1;
}

/* Responsive */

@media (max-width: 768px) {
    .plan-selection-page {
        padding: 24px 16px;
    }

    .plan-selection-page .page-header h1 {
        font-size: 1.75rem;
    }

    .plans-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 8px;
    }

    .plan-card {
        padding: 2rem 1.5rem;
    }

    .plan-price .price {
        font-size: 2.75rem;
    }

    .button-group {
        flex-direction: column;
    }

    .status-card,
    .payment-card {
        padding: 2rem 1.5rem;
    }
}

/* Plan selection page for subscription tiers */

/**
 * Auth Pages Styles (Register, Forgot Password, Reset Password)
 * Glassmorphism design matching Login page
 */

/* Base Auth Page Layout - Similar to Login */

.auth-page {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #0a0a0a 100%);
    overflow-y: auto;
    padding: 40px 20px;
}

/* Gradient background orbs */

.auth-page::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(234, 91, 12, 0.08) 0%, transparent 60%);
    animation: authOrb1 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.auth-page::after {
    content: '';
    position: fixed;
    bottom: -30%;
    right: -30%;
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(13, 124, 153, 0.06) 0%, transparent 50%);
    animation: authOrb2 25s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes authOrb1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(10%, 10%) scale(1.1);
    }
}

@keyframes authOrb2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-10%, -5%) scale(1.15);
    }
}

/* Futuristic grid overlay */

.auth-page .auth-container::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(234, 91, 12, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(234, 91, 12, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

.auth-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Glass Card */

.auth-card {
    width: 100%;
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 80px rgba(234, 91, 12, 0.05);
}

.auth-card h1 {
    font-family: 'Big John', 'Roboto', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    margin: 0 0 0.5rem 0;
    text-align: center;
}

.auth-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Selected Plan Badge */

.selected-plan-badge {
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    color: #ea5b0c;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Form Styling */

.auth-card form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #ea5b0c;
    background: rgba(234, 91, 12, 0.05);
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-group select option {
    background: #1a1a1a;
    color: #fff;
}

.form-group small {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Alert Messages */

.auth-card .alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.auth-card .alert-error {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: #fca5a5;
}

.auth-card .alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #86efac;
}

/* Login Button - Same as login page */

.auth-card .login-button {
    width: 100%;
    height: 50px;
    padding: 0 24px;
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Big John', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(234, 91, 12, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
    margin-top: 8px;
    text-transform: uppercase;
}

.auth-card .login-button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(234, 91, 12, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #ff7a33 0%, #ea5b0c 100%);
}

.auth-card .login-button:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(234, 91, 12, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.auth-card .login-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 8px 24px rgba(234, 91, 12, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* Auth Footer */

.auth-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.auth-footer a {
    color: #ea5b0c;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.auth-footer a:hover {
    color: #ff7a3d;
}

/* Marketing Consent Checkbox */

.register__consent {
    margin: 4px 0;
}

.register__consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.register__consent-checkbox {
    margin-top: 3px;
    accent-color: #ea5b0c;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.register__consent-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

/* Responsive */

@media (max-width: 600px) {
    .auth-page {
        padding: 20px 16px;
    }

    .auth-card {
        padding: 1.5rem;
        border-radius: 16px;
    }

    .auth-card h1 {
        font-size: 1.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Verify Email Page Styles
   ========================================= */

.verify-email-page {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #0a0a0a 100%);
    padding: 40px 20px;
}

/* Background gradient orbs - same as auth pages */

.verify-email-page::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(234, 91, 12, 0.08) 0%, transparent 60%);
    animation: authOrb1 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.verify-email-page::after {
    content: '';
    position: fixed;
    bottom: -30%;
    right: -30%;
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(13, 124, 153, 0.06) 0%, transparent 50%);
    animation: authOrb2 25s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.verify-email-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 80px rgba(234, 91, 12, 0.05);
    text-align: center;
}

.verify-email-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.verify-email-icon--verifying {
    border: 2px solid rgba(234, 91, 12, 0.2);
}

.verify-email-icon--success {
    background: rgba(34, 197, 94, 0.15);
    border: 2px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.verify-email-icon--error {
    background: rgba(239, 68, 68, 0.15);
    border: 2px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.verify-email-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(234, 91, 12, 0.2);
    border-top-color: #ea5b0c;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.verify-email-title {
    font-family: 'Big John', 'Roboto', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    margin: 0 0 1rem 0;
}

.verify-email-message {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.verify-email-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.verify-email-btn {
    width: 100%;
    height: 50px;
    padding: 0 24px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Big John', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-transform: uppercase;
}

.verify-email-btn--primary {
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(234, 91, 12, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.verify-email-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(234, 91, 12, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #ff7a33 0%, #ea5b0c 100%);
}

.verify-email-btn--secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.verify-email-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .verify-email-page {
        padding: 20px 16px;
    }

    .verify-email-card {
        padding: 2rem 1.5rem;
        border-radius: 16px;
    }

    .verify-email-title {
        font-size: 1.5rem;
    }
}

/* Auth pages (Register, Forgot Password, Reset Password) with Glassmorphism */

/* ===== STEP 5: Layout Components ===== */

/* Adaptive Layout System
 * Controls filter panel, content width, and transitions
 * Based on layoutMode signal: cells-grid, cells-single, benchmarking, compare
 */

/* ============================================
   APP SHELL LAYOUT (HIGH SPECIFICITY)
   ============================================ */

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-primary);
}

/* Base app-content - override hybrid-workspace styles */

[data-layout-mode] .app-content {
    display: block !important;
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    /* Override legacy min-height (100vh - 56px) that causes ~14px overflow
       because cmdbar is 70px sticky, not 56px fixed. flex:1 handles sizing. */
    overflow-y: auto;
    /* Allow content to scroll */
    overflow-x: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent !important;
    backdrop-filter: none !important;
}

/* Full-width layouts (cells-grid, benchmarking, compare) - no padding, managed by children */

[data-layout-mode="cells-grid"] .app-content,
[data-layout-mode="benchmarking"] .app-content,
[data-layout-mode="compare"] .app-content {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Centered layout for single cell view */

[data-layout-mode="cells-single"] .app-content {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* Animating state */

.app-content.content--animating {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   FILTER PANEL TRANSITIONS (AdaptiveSidebar)
   ============================================ */

.adaptive-sidebar {
    /* Default: visible and in position */
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
    will-change: transform, opacity;
}

/* Visible state in all modes - sidebar is always visible, just collapses/expands */

[data-layout-mode="cells-grid"] .adaptive-sidebar,
[data-layout-mode="benchmarking"] .adaptive-sidebar,
[data-layout-mode="cells-single"] .adaptive-sidebar,
[data-layout-mode="compare"] .adaptive-sidebar {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Animating states */

.adaptive-sidebar--animating-in {
    animation: slideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.adaptive-sidebar--animating-out {
    animation: slideOutLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* ============================================
   MAIN CONTENT AREA (with sidebar awareness)
   ============================================ */

/* Cells Page Layout Wrapper */

.cells-page-layout {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    /* Below CommandBar */
    width: 100%;
    position: relative;
}

.cells-page-layout--single {
    /* Single cell mode - no context bar */
    min-height: calc(100vh - 56px);
}

.cells-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Content shifts right when sidebar is visible in grid mode */

[data-layout-mode="cells-grid"] .cells-main-content {
    margin-left: 280px;
    /* Sidebar width */
    margin-top: 48px;
    /* Below Context Bar */
}

/* Single cell mode - no sidebar, no context bar, fullwidth */

[data-layout-mode="cells-single"] .cells-main-content,
.cells-main-content--single {
    margin-left: 0;

    /* Only below CommandBar, no Context Bar */
    max-width: 100%;
    /* Fullwidth */
    width: 100%;
    padding: 0;
}

/* Benchmarking Page Layout */

.benchmarking-page-layout {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
    /* Below CommandBar */
    width: 100%;
    position: relative;
}

.benchmarking-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    position: relative;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 20px 20px 0;
    /* Right padding 20px, bottom 20px, no left (comes from margin) */
}

[data-layout-mode="benchmarking"] .benchmarking-main-content {
    margin-left: calc(280px + 40px);
    /* Sidebar width (280px) + left padding (20px) + gap (20px) */
    margin-top: 48px;
    /* Below Context Bar */
}

/* Legacy main-content support */

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    overflow: hidden;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Content shifts right when sidebar is visible */

[data-layout-mode="cells-grid"] .main-content,
[data-layout-mode="benchmarking"] .main-content {
    margin-left: calc(280px + 40px);
    /* Sidebar width (280px) + left padding (20px) + gap (20px) */
}

/* Content full width when sidebar hidden */

[data-layout-mode="cells-single"] .main-content,
[data-layout-mode="compare"] .main-content {
    margin-left: 0;
}

/* Full width layout (cells-grid, benchmarking, compare) */

.main-content--full {
    width: 100%;
}

/* Centered layout (cells-single) */

.main-content--centered {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ============================================
   SIDE PANELS (Controls, Selection)
   ============================================ */

.side-panel {
    flex-shrink: 0;
    width: 320px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    padding: 1.5rem;
    overflow-y: auto;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
}

/* Side panel variants */

.side-panel--controls {
    /* Score plot weight sliders */
    background: var(--bg-secondary);
}

.side-panel--selection {
    /* Compare cell selection */
    background: var(--bg-secondary);
}

.side-panel--hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* ============================================
   HEADER ADAPTIVE STYLES
   ============================================ */

.command-bar {
    transition: max-width 0.2s ease,
        padding 0.2s ease;
}

/* Full header in grid modes with sidebar (cells-grid, benchmarking) */

[data-layout-mode="cells-grid"] .command-bar,
[data-layout-mode="benchmarking"] .command-bar {
    max-width: 100%;
    padding: 0 2rem;
}

/* Fullwidth header in single cell mode - NO SIDEBAR */

[data-layout-mode="cells-single"] .command-bar {
    max-width: 100%;
    width: 100%;
    padding: 0 2rem;
}

/* Legacy support */

.command-bar--full {
    max-width: 100%;
    padding: 0 2rem;
}

/* Centered header (deprecated) */

.command-bar--centered {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ============================================
   LAYOUT-SPECIFIC OVERRIDES
   ============================================ */

/* Cells Grid Layout */

[data-layout-mode="cells-grid"] .filter-panel {
    transform: translateX(0);
    opacity: 1;
}

[data-layout-mode="cells-grid"] .main-content {
    width: 100%;
}

/* Single Cell Layout */

[data-layout-mode="cells-single"] .filter-panel {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

[data-layout-mode="cells-single"] .main-content {
    max-width: 1400px;
    margin: 0 auto;
}

/* Benchmarking Layout */

[data-layout-mode="benchmarking"] .filter-panel {
    transform: translateX(0);
    opacity: 1;
}

[data-layout-mode="benchmarking"] .side-panel--controls {
    transform: translateX(0);
    opacity: 1;
}

/* Compare Layout */

[data-layout-mode="compare"] .filter-panel {
    transform: translateX(-100%);
    opacity: 0;
}

[data-layout-mode="compare"] .side-panel--selection {
    transform: translateX(0);
    opacity: 1;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet (landscape) */

@media (max-width: 1024px) {
    .filter-panel {
        width: 240px;
    }

    .side-panel {
        width: 280px;
    }

    .app-content[data-width="centered"] {
        padding: 0 1.5rem;
    }
}

/* Tablet (portrait) */

@media (max-width: 768px) {
    .filter-panel {
        position: fixed;
        left: 0;
        top: 60px;
        bottom: 0;
        width: 280px;
        z-index: 100;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
    }

    .filter-panel--hidden {
        transform: translateX(-100%);
    }

    .side-panel {
        position: fixed;
        right: 0;
        top: 60px;
        bottom: 0;
        z-index: 100;
        box-shadow: -2px 0 12px rgba(0, 0, 0, 0.3);
    }

    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem;
    }

    .app-content[data-width="centered"] {
        padding: 0 1rem;
    }
}

/* Mobile */

@media (max-width: 640px) {
    .filter-panel {
        width: 100%;
        max-width: 320px;
    }

    .side-panel {
        width: 100%;
        max-width: 320px;
    }

    .app-content[data-width="centered"] {
        padding: 0 0.75rem;
    }

    .command-bar--centered {
        padding: 0 1rem;
    }
}

/* ============================================
   BACKDROP (Mobile overlay)
   ============================================ */

.layout-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.layout-backdrop--visible {
    display: block;
    opacity: 1;
}

@media (max-width: 768px) {
    .layout-backdrop {
        display: block;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU acceleration for transitions */

/* NOTE: .app-content is intentionally excluded — transform/backdrop-filter
   create a containing block that breaks position:fixed for children
   (e.g. UnifiedContextBar). */

.filter-panel,
.side-panel,
.main-content {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ============================================
   FLIP ANIMATION SUPPORT (Cell Card → Detail)
   ============================================ */

/* Mark source elements for FLIP animation */

.cell-card-flip-source {
    position: relative;
    will-change: transform, opacity;
}

/* Detail container optimized for FLIP animation */

.cell-detail-container {
    position: relative;
    will-change: transform, opacity;
    transform-origin: top left;
}

/* During FLIP animation */

.cell-card-flip-source.flip-animating {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cell-detail-container.flip-animating {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease;
}

/* Ensure smooth rendering during animation */

.flip-animating {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================ */

/* Reduce motion for accessibility */

@media (prefers-reduced-motion: reduce) {

    .filter-panel,
    .side-panel,
    .app-content,
    .main-content,
    .command-bar {
        transition: none !important;
        animation: none !important;
    }
}

/* NEW: Adaptive layout system for cells/benchmarking/compare modes */

/* Hybrid Workspace Navigation CSS */

/* Command Bar + Workspace Tabs + Context Bar + Content */

:root {
  --brand: #ea5b0c;
  --bg: #1a1a1a;
  --text: #e8eaed;
  --muted: #a1a7ae;
  --h: 64px;
  --wktabs-h: 48px;
  --ctxbar-h: 56px;

  /* Typography System */
  --font-display: 'Big John', sans-serif;
  /* Headings, Logos, Titles */
  --font-ui: 'Roboto', -apple-system, sans-serif;
  /* UI Elements, Body Text */
}

/* App Shell */

.app-shell {
  min-height: 100vh;
  /* Same background as body - seamless integration */
  background:
    radial-gradient(800px 600px at 50% -10%, rgba(234, 91, 12, 0.12), transparent 70%),
    linear-gradient(180deg, #2c2c2c 0%, #323232 50%, #272727 100%);
  background-attachment: fixed;
  background-color: #272727;
  color: var(--text);
}

.app-content {
  min-height: calc(100vh - 56px);
  /* Transparent - shows app-shell background */
  background: transparent;
  padding-top: 0;
  /* NO padding - nahtlos unter CmdBar */
}

/* Command Bar - Defined in command-bar-adaptive.css */

/* All cmdbar styles moved to command-bar-adaptive.css */

/* CENTER: Navigation Container mit Glassmorphism */

/* All cmdbar center/right/logo/navigation/utils styles moved to command-bar-adaptive.css */

/* ============================================================================
   GLOBAL CONTROLS - Domain & Basis Switchers
   ============================================================================ */

.global-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  /* No extra card wrapper - domain/basis buttons directly in toolbar */
}

.global-control-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 13px;
  font-weight: 600;

  white-space: nowrap;
  position: relative;
}

.global-control-btn .control-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: all 0.25s ease;
}

.global-control-btn .control-label {
  font-family: 'Big John', sans-serif;
  text-transform: uppercase;
  font-size: 11px;

  opacity: 0.9;
  transition: all 0.25s ease;
}

.global-control-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(234, 91, 12, 0.4);
  color: var(--brand);
  transform: translateY(-1px);
}

.global-control-btn:hover .control-icon {
  opacity: 1;
  transform: scale(1.1);
}

.global-control-btn:hover .control-label {
  opacity: 1;
}

.global-control-btn:active {
  transform: translateY(0);
  background: rgba(234, 91, 12, 0.15);
  border-color: rgba(234, 91, 12, 0.6);
}

/* Domain Switcher specific */

.domain-switcher:hover {
  border-color: rgba(234, 91, 12, 0.4);
  color: #ea5b0c;
}

.domain-switcher:active {
  background: rgba(234, 91, 12, 0.15);
  border-color: rgba(234, 91, 12, 0.6);
}

/* Basis Switcher specific */

.basis-switcher:hover {
  border-color: rgba(234, 91, 12, 0.4);
  color: var(--brand);
}

.basis-switcher:active {
  background: rgba(234, 91, 12, 0.15);
  border-color: rgba(234, 91, 12, 0.6);
}

/* Workspace Tabs - Akten-Reiter (File Folder Tabs) */

.wktabs {
  position: sticky;
  top: var(--h);
  z-index: 950;
  background: transparent;
  padding: 20px 2rem 0;
  margin-top: 0;
}

.wktabs-row {
  display: flex;
  gap: 8px;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  align-items: flex-end;
}

.wktabs-row::-webkit-scrollbar {
  height: 4px;
}

.wktabs-row::-webkit-scrollbar-thumb {
  background: rgba(234, 91, 12, 0.3);
  border-radius: 2px;
}

/* Individual Workspace Tab - Akten-Reiter with Cell Info */

.wktab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 16px 16px;
  margin-bottom: -6px;
  background: linear-gradient(to bottom, rgba(50, 40, 30, 0.85), rgba(40, 30, 20, 0.95));
  border: 1px solid rgba(234, 91, 12, 0.25);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  transition: all 0.25s ease;
  cursor: move;
  user-select: none;
  min-width: 280px;
  max-width: 360px;
  transform-origin: bottom center;
}

.wktab:hover {
  background: linear-gradient(to bottom, rgba(70, 55, 40, 0.95), rgba(55, 45, 35, 1));
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(234, 91, 12, 0.4);
  transform: translateY(-3px);
}

.wktab.is-active {
  background: linear-gradient(to bottom,
      rgba(234, 91, 12, 0.18),
      rgba(200, 70, 10, 0.15));
  color: #fff;
  border-color: var(--brand);
  border-width: 2px;
  border-bottom: 3px solid transparent;
  z-index: 10;
  transform: translateY(0);
  box-shadow:
    0 -4px 12px rgba(234, 91, 12, 0.25),
    0 0 0 1px rgba(234, 91, 12, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.wktab.is-active .wktab-title {
  color: var(--brand);
  font-weight: 700;
}

.wktab.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
  transform: scale(0.95) rotate(-2deg);
}

.wktab.is-drag-over {
  background: linear-gradient(to bottom, rgba(234, 91, 12, 0.35), rgba(234, 91, 12, 0.25));
  border-color: var(--brand);
  transform: translateY(-2px) scale(1.02);
}

.wktab-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  pointer-events: none;
  min-width: 0;
}

.wktab-image {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(234, 91, 12, 0.3);
  background: rgba(0, 0, 0, 0.3);
}

.wktab-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.wktab-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}

.wktab-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

.wktab-meta span {
  white-space: nowrap;
}

.wktab.is-active .wktab-title {
  color: var(--brand);
}

.wktab.is-active .wktab-meta {
  color: rgba(234, 91, 12, 0.7);
}

.wktab-close {
  flex-shrink: 0;
  margin-left: 4px;
  opacity: 0.5;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
  pointer-events: auto;
}

.wktab-close:hover {
  opacity: 1;
  background: rgba(255, 100, 100, 0.2);
  color: #ff6666;
}

/* Akte (Opened File Folder) - Contains Context Bar + Content */

.akte-container {
  background: linear-gradient(to bottom,
      rgba(50, 45, 40, 0.95) 0%,
      rgba(45, 42, 38, 0.98) 100%);
  border: 1px solid rgba(234, 91, 12, 0.3);
  border-top: 3px solid var(--brand);
  border-radius: 0 8px 8px 8px;
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  margin: 0 2rem 2rem 2rem;
  overflow: hidden;
}

/* Context Bar - Only Section Tabs (Cell info now in wktab) */

.ctxbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 52px;
  background: linear-gradient(to bottom, rgba(55, 50, 45, 0.9), rgba(25, 22, 20, 0.95));
  border-bottom: 2px solid rgba(234, 91, 12, 0.25);
  padding: 0 2rem;
}

/* Section Tabs - Folder dividers */

.ctx-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
  background: transparent;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.ctx-tabs::-webkit-scrollbar {
  display: none;
}

/* Individual Section Tab */

.ctx-tab {
  position: relative;
  padding: 16px 28px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;

  white-space: nowrap;
  transition: all 0.2s;
  border: none;
  background: transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ctx-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: all 0.2s;
}

.ctx-tab:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.03);
}

.ctx-tab:hover::after {
  background: rgba(234, 91, 12, 0.4);
}

.ctx-tab.is-active {
  color: var(--brand);
  background: linear-gradient(to bottom,
      rgba(234, 91, 12, 0.12),
      rgba(234, 91, 12, 0.08));
  font-weight: 700;
}

.ctx-tab.is-active::after {
  background: var(--brand);
  height: 3px;
  box-shadow: 0 0 8px rgba(234, 91, 12, 0.5);
}

.ctx-right {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  flex-shrink: 0;
}

/* Page Content - Now inside Akte Container */

.page {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(50, 48, 45, 0.5) 0%, rgba(45, 42, 38, 0.7) 100%);
}

/* Cell detail drawer - full width with no constraints */

.drawer-content.page {
  padding: 0;
  margin: 0;
  max-width: none;
  background: transparent;
}

.card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Cell Detail Page - Akte Content inside Container */

.cell-akte {
  padding: 0;
}

.akte-header {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.08), rgba(200, 70, 10, 0.05));
  border-bottom: 1px solid rgba(234, 91, 12, 0.2);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.akte-header-info h1 {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--brand);
  margin: 0 0 8px 0;
  font-weight: 700;
  text-transform: uppercase;

}

.akte-header-meta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.akte-header-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.akte-section {
  padding: 32px;
  min-height: 400px;
}

.akte-section h2 {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--brand);
  margin: 0 0 20px 0;
  text-transform: uppercase;

}

/* Form Elements */

.input,
.select {
  background: #111;
  color: #eee;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  transition: all 0.2s;
}

.input:focus,
.select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(234, 91, 12, 0.1);
}

.btn {
  background: var(--brand);
  color: #fff;
  padding: 8px 16px;
  border-radius: 10px;
  border: none;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn:hover {
  background: #ff6b1a;
  box-shadow: 0 4px 12px rgba(234, 91, 12, 0.3);
}

/* Explorer Page - Filing Cabinet View */

.explorer-page {
  padding: 2rem;
  max-width: 1600px;
  margin: 0 auto;
}

.explorer-header {
  margin-bottom: 2rem;
}

.explorer-header h1 {
  font-family: var(--font-display);
  font-size: 42px;
  color: var(--brand);
  margin: 0 0 8px 0;
  text-transform: uppercase;

}

.explorer-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}

.compare-hint {
  color: var(--brand);
  font-weight: 500;
}

.explorer-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.explorer-controls .input {
  min-width: 300px;
}

.explorer-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.btn-compare-mode,
.btn-start-compare,
.btn-cancel-compare {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-compare-mode {
  background: rgba(234, 91, 12, 0.15);
  color: var(--brand);
  border: 1px solid rgba(234, 91, 12, 0.3);
}

.btn-compare-mode:hover {
  background: rgba(234, 91, 12, 0.25);
  border-color: var(--brand);
}

.btn-start-compare {
  background: var(--brand);
  color: #fff;
}

.btn-start-compare:hover:not(:disabled) {
  background: #ff6b1a;
  box-shadow: 0 4px 12px rgba(234, 91, 12, 0.4);
}

.btn-start-compare:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-cancel-compare {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.btn-cancel-compare:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.compare-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.compare-count {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.explorer-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  gap: 20px;
}

/* Cell Grid - Akten Files */

.cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 2rem;
}

.cell-card.akte-file {
  position: relative;
  background: linear-gradient(135deg, rgba(50, 40, 30, 0.6), rgba(40, 30, 20, 0.8));
  border: 2px solid rgba(234, 91, 12, 0.2);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.cell-card.akte-file:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--brand);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(234, 91, 12, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cell-card.akte-file.compare-mode {
  cursor: pointer;
}

.cell-card.akte-file.is-selected {
  background: linear-gradient(135deg, rgba(60, 50, 45, 0.9), rgba(50, 42, 38, 0.95));
  border-color: var(--brand);
  border-width: 2px;
  box-shadow:
    0 2px 12px rgba(234, 91, 12, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Note: .compare-checkbox for table cells is defined in cells-view-styles.css and compare-system.css */

/* This rule only applies to card-based layouts */

.cell-card .compare-checkbox,
.factsheet-card .compare-checkbox {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
}

.compare-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--brand);
}

.cell-image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cell-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cell-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
}

.cell-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.cell-manufacturer {
  font-size: 11px;
  text-transform: uppercase;

  color: var(--brand);
  font-weight: 600;
}

.cell-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}

.cell-year {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

.cell-hover-action {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  background: linear-gradient(to top, rgba(234, 91, 12, 0.9), rgba(234, 91, 12, 0.7));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.cell-card.akte-file:hover .cell-hover-action {
  opacity: 1;
  transform: translateY(0);
}

/* Utility Classes */

.flex {
  display: flex;
  align-items: center;
}

.gap-2 {
  gap: 12px;
}

/* Cell Identity in Context Bar - Enhanced "Akte" Header */

.cell-id {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.cell-id-image {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px;
}

.cell-id-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cell-id strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  display: block;
}

.cell-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.cell-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Light Theme */

:root[data-theme="light"] {
  --bg: #f5f5f5;
  --text: #1a1a1a;
  --muted: #666;
}

/* App shell - light background */

:root[data-theme="light"] .app-shell {
  background:
    radial-gradient(800px 600px at 50% -10%, rgba(234, 91, 12, 0.08), transparent 70%),
    linear-gradient(180deg, #fafafa 0%, #f5f5f5 50%, #efefef 100%);
  background-attachment: fixed;
  background-color: #efefef;
}

/* Light theme cmdbar styles in command-bar-adaptive.css */

:root[data-theme="light"] .wktabs {
  background: rgba(245, 245, 245, 0.9);
}

:root[data-theme="light"] .wktab {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.5);
}

:root[data-theme="light"] .ctxbar {
  background: rgba(248, 248, 248, 0.9);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .card {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .input,
:root[data-theme="light"] .select {
  background: #fff;
  color: #1a1a1a;
  border-color: #ddd;
}

/* Responsive */

@media (max-width: 768px) {
  /* cmdbar responsive handled in command-bar-adaptive.css */

  .wktabs-row {
    padding: 6px 8px;
  }

  .ctxbar {
    padding: 8px 12px;
    flex-direction: column;
    align-items: stretch;
  }

  .ctx-tabs {
    justify-content: flex-start;
  }

  .page {
    padding: 12px;
  }
}

/**
 * Adaptive Sidebar Styles
 * Morphs between FilterPanel and ComparePanel with smooth transitions
 */

.adaptive-sidebar {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
    /* Transparent, parent has glassmorphism */
    overflow: hidden;
    transition: width 0.4s ease-out;
}

/* Collapsed State - Narrow Sidebar (60px) */

.adaptive-sidebar--collapsed {
    width: 60px !important;
    cursor: pointer;
}

.adaptive-sidebar--collapsed:hover {
    background: rgba(234, 91, 12, 0.05);
}

/* Collapsed Content - Vertical Text + Icon */

.adaptive-sidebar__collapsed-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 32px;
    gap: 24px;
    height: 100%;
}

.adaptive-sidebar__collapsed-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 91, 12, 0.1);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.adaptive-sidebar__collapsed-icon:hover {
    background: rgba(234, 91, 12, 0.2);
    border-color: #ea5b0c;
    box-shadow: 0 0 12px rgba(234, 91, 12, 0.3);
}

.adaptive-sidebar__collapsed-icon svg {
    stroke: #ea5b0c;
    stroke-width: 2.5;
}

.adaptive-sidebar__collapsed-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 700;
    
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    user-select: none;
    transition: color 0.3s ease;
}

.adaptive-sidebar--collapsed:hover .adaptive-sidebar__collapsed-text {
    color: #ea5b0c;
}

/* Tabs - Matching Plot/Settings Header (48px height) */

.adaptive-sidebar__tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    position: relative;
}

.adaptive-sidebar__tab {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.adaptive-sidebar__tab:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(234, 91, 12, 0.2);
}

.adaptive-sidebar__tab.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
    border-color: #ea5b0c;
    box-shadow: 0 0 12px rgba(234, 91, 12, 0.25);
}

.adaptive-sidebar__tab-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.adaptive-sidebar__tab-icon svg {
    width: 100%;
    height: 100%;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 2;
    transition: all 0.3s ease;
}

.adaptive-sidebar__tab.active .adaptive-sidebar__tab-icon svg {
    stroke: #ea5b0c;
    filter: drop-shadow(0 0 4px rgba(234, 91, 12, 0.3));
    stroke-width: 2;
}

.adaptive-sidebar__tab-label {
    font-family: 'Big John', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.adaptive-sidebar__tab.active .adaptive-sidebar__tab-label {
    color: #f1f5f9;
}

.adaptive-sidebar__tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ea5b0c;
    border-radius: 9px;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: white;
    margin-left: 4px;
    box-shadow: 0 2px 6px rgba(234, 91, 12, 0.4);
}

/* Content Container */

.adaptive-sidebar__content {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Panel wrapper - Both panels always rendered */

.adaptive-sidebar__panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(234, 91, 12, 0.5) rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
}

.adaptive-sidebar__panel::-webkit-scrollbar {
    width: 8px;
}

.adaptive-sidebar__panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.adaptive-sidebar__panel::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.5);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.adaptive-sidebar__panel::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.7);
}

/* Filter Panel - Default position */

.adaptive-sidebar__panel--filter {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.adaptive-sidebar__panel--filter.inactive {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Compare Panel - Hidden by default */

.adaptive-sidebar__panel--compare {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.adaptive-sidebar__panel--compare.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Mode-specific body classes for advanced styling */

body.sidebar-filter .adaptive-sidebar__panel--filter {
    transform: translateX(0);
    opacity: 1;
}

body.sidebar-compare .adaptive-sidebar__panel--compare {
    transform: translateX(0);
    opacity: 1;
}

/* Hint notification (when cells added but in filter mode) */

.adaptive-sidebar__hint {
    position: absolute;
    bottom: 1rem;
    left: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.85) 0%, rgba(45, 42, 38, 0.92) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(234, 91, 12, 0.4);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(234, 91, 12, 0.2), 0 0 20px rgba(234, 91, 12, 0.1);
    animation: slideUp 0.3s ease;
    z-index: 10;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.adaptive-sidebar__hint-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.adaptive-sidebar__hint-icon svg {
    width: 100%;
    height: 100%;
    stroke: #ea5b0c;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.adaptive-sidebar__hint-text {
    flex: 1;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    color: #fff;
    font-weight: 500;
    line-height: 1.4;
}

.adaptive-sidebar__hint-btn {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #ea5b0c, #ff6a1a);
    border: 1px solid rgba(234, 91, 12, 0.5);
    border-radius: 8px;
    font-family: 'Big John', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.3);
}

.adaptive-sidebar__hint-btn:hover {
    background: linear-gradient(135deg, #ff6a1a, #ea5b0c);
    border-color: #ea5b0c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.4);
}

/* Collapsed State (for detail views) */

.adaptive-sidebar--collapsed {
    width: 48px;
    background: rgba(44, 44, 44, 0.8);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.adaptive-sidebar__toggle {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.adaptive-sidebar__toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* Collapse Button in Tabs - Links neben Filters */

.adaptive-sidebar__collapse-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 8px;
}

.adaptive-sidebar__collapse-btn:hover {
    background: rgba(234, 91, 12, 0.3);
    border-color: rgba(234, 91, 12, 0.5);
}

.adaptive-sidebar__collapse-btn svg {
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 2;
    transition: all 0.3s ease;
}

.adaptive-sidebar__collapse-btn:hover svg {
    stroke: #ea5b0c;
}

/* Responsive adjustments */

@media (max-width: 1280px) {
    .adaptive-sidebar__tab {
        padding: 12px 12px;
    }

    .adaptive-sidebar__tab-icon {
        width: 28px;
        height: 28px;
    }

    .adaptive-sidebar__tab-label {
        font-size: 11px;
    }

    .adaptive-sidebar__stepper-line {
        width: 30px;
    }
}

/* Light theme support */

body.light-theme .adaptive-sidebar {
    background: rgba(255, 255, 255, 0.95);
    border-right-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .adaptive-sidebar__tabs {
    background: linear-gradient(135deg, rgba(245, 245, 245, 0.9) 0%, rgba(235, 235, 235, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light-theme .adaptive-sidebar__tab {
    color: #666;
}

body.light-theme .adaptive-sidebar__tab:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(234, 91, 12, 0.2);
}

body.light-theme .adaptive-sidebar__tab.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.12), rgba(234, 91, 12, 0.04));
    border-color: #ea5b0c;
}

body.light-theme .adaptive-sidebar__tab-icon svg {
    stroke: #666;
}

body.light-theme .adaptive-sidebar__tab.active .adaptive-sidebar__tab-icon svg {
    stroke: #ea5b0c;
}

body.light-theme .adaptive-sidebar__tab-label {
    color: #666;
}

body.light-theme .adaptive-sidebar__tab.active .adaptive-sidebar__tab-label {
    color: #1a1a1a;
}

body.light-theme .adaptive-sidebar__stepper-line {
    background: linear-gradient(to right, rgba(234, 91, 12, 0.25), rgba(234, 91, 12, 0.08));
}

body.light-theme .adaptive-sidebar__hint {
    background: rgba(234, 91, 12, 0.1);
    border-color: rgba(234, 91, 12, 0.2);
}

body.light-theme .adaptive-sidebar--collapsed {
    background: rgba(255, 255, 255, 0.8);
    border-right-color: rgba(0, 0, 0, 0.1);
}

/**
 * Unified App Layout
 * Single page with layer system
 */

/* ============================================
   BASE APP STRUCTURE
   ============================================ */

.main-app-page {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Glassmorphism background matching key-spec-card tiles */
    background: linear-gradient(135deg,
            rgba(45, 42, 38, 0.98) 0%,
            rgba(40, 38, 35, 1) 50%,
            rgba(45, 42, 38, 0.98) 100%);
}

/* ============================================
   LAYER 0: COMMAND BAR (ALWAYS VISIBLE)
   ============================================ */

.command-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    z-index: 1000;
    background: linear-gradient(180deg,
            rgba(44, 44, 44, 0.95) 0%,
            rgba(44, 44, 44, 0.9) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================
   LAYER 1: UNIFIED CONTEXT BAR (ADAPTIVE)
   ============================================ */

.unified-context-bar {
    position: fixed;
    top: 70px;
    /* Below CommandBar (70px) */
    left: 0;
    right: 0;
    height: 60px;
    z-index: 900;
    /* Glassmorphism matching key-spec-card tiles */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.92) 0%, rgba(45, 42, 38, 0.96) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    /* Always sticky - no shrinking on scroll */
}

/* Expanded height in single cell mode for metadata */

[data-view-mode="cells-single"] .unified-context-bar {
    height: 90px;
}

.context-bar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    gap: 2rem;
    max-width: 100%;
    margin: 0 auto;
}

/* ============================================
   LAYER 2: CONTENT WRAPPER
   ============================================ */

.app-content-wrapper {
    position: relative;
    margin-top: 80px;
    /* ContextBar (60px) + 20px gap */
    display: flex;
    height: calc(100vh - 160px);
    /* Total height until footer: 100vh - 80px (context+gap) - 30px (bottom gap to footer) */
    transition: margin-top 0.3s ease;
}

/* Adjust margin in single cell mode (taller context bar) */

[data-view-mode="cells-single"] .app-content-wrapper {
    margin-top: 110px;
    /* Context Bar (90px) + 20px gap */
}

/* Adaptive Sidebar - Glassmorphism Kachel mit 20px Abstand */

.adaptive-sidebar {
    position: fixed;
    left: 20px;
    /* 20px Abstand zum linken Rand */
    top: 150px;
    /* CommandBar (70px) + ContextBar (60px) + 20px gap */
    /* height set by JavaScript to match app-main-content */
    max-height: calc(100vh - 160px);
    /* Match app wrapper height */
    width: 340px;
    /* Wider sidebar for better readability */
    z-index: 850;
    /* Glassmorphism matching key-spec-card tiles */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.85) 0%, rgba(45, 42, 38, 0.92) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    transition: width 0.4s ease-out,
        top 0.3s ease,
        transform 0.3s ease-out,
        opacity 0.3s ease-out;
    overflow: hidden;
    /* Clip rounded corners */
}

/* Collapsed State - Narrow (60px) */

.adaptive-sidebar.adaptive-sidebar--collapsed {
    width: 60px;
}

/* Visible in all view modes except benchmarking */

[data-view-mode="cells-grid"] .adaptive-sidebar,
[data-view-mode="cells-ragone"] .adaptive-sidebar,
[data-view-mode="cells-table"] .adaptive-sidebar,
[data-view-mode="single-cell"] .adaptive-sidebar {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Benchmarking Mode: Show sidebar like explorer */

[data-view-mode^="benchmarking-"] .adaptive-sidebar {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Workflow Mode: Collapsed state for Steps 1-3, expanded for Step 4 */

.adaptive-sidebar[data-workflow-mode="active"].workflow-hidden {
    width: 60px !important;
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
}

.adaptive-sidebar[data-workflow-mode="active"].workflow-hidden .adaptive-sidebar__panel {
    opacity: 0;
    pointer-events: none;
}

.adaptive-sidebar[data-workflow-mode="active"].workflow-visible {
    width: 340px !important;
    opacity: 1;
}

.adaptive-sidebar[data-workflow-mode="active"].workflow-visible .adaptive-sidebar__panel {
    opacity: 1;
    pointer-events: auto;
}

/* Keyboard shortcut indicator (subtle tooltip) */

.adaptive-sidebar[data-workflow-mode="active"]::before {
    content: 'Press C to toggle';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.75rem;
    background: rgba(234, 91, 12, 0.9);
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1001;
}

.adaptive-sidebar[data-workflow-mode="active"]:hover::before {
    opacity: 1;
}

/* Radar Mode: Hide sidebar */

[data-view-mode^="radar-"] .adaptive-sidebar {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Radar Mode: Content without sidebar offset */

[data-view-mode^="radar-"] .app-main-content {
    margin-left: 20px;
    overflow: hidden;
    max-height: calc(100vh - 160px);
}

/* Main Content Area */

.app-main-content {
    flex: 1;
    margin-left: 380px;
    /* 340px sidebar + 20px gap + 20px left margin = 380px */
    margin-right: 20px;
    /* 20px right margin */
    max-height: calc(100vh - 160px);
    /* Match app wrapper height */
    overflow-y: auto;
    /* Allow scrolling when content exceeds viewport */
    transition: margin-left 0.4s ease-out,
        margin-right 0.4s ease-out,
        opacity 0.3s ease,
        filter 0.3s ease;
    position: relative;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(234, 91, 12, 0.5) rgba(255, 255, 255, 0.05);
}

.app-main-content::-webkit-scrollbar {
    width: 10px;
}

.app-main-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 5px;
}

.app-main-content::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.4);
    border-radius: 5px;
    transition: background 0.2s ease;
}

.app-main-content::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.6);
}

/* Grid view: fixed height, reserve space for fixed pagination at bottom */

[data-view-mode="cells-grid"] .app-main-content {
    overflow-y: hidden;
    max-height: calc(100vh - 160px);
    /* Match app wrapper height */
    padding-bottom: 0;
    /* Fixed pagination floats above, no padding needed */
}

/* Table view: no scrolling in main content */

[data-view-mode="cells-table"] .app-main-content {
    overflow-y: hidden;
}

/* Graph view: no scrolling in main content */

[data-view-mode="cells-graph"] .app-main-content {
    overflow-y: hidden;
}

/* Fullscreen mode - no margins (highest priority) */

body:has(.plot-fullscreen) .app-main-content {
    margin-left: 20px !important;
    margin-right: 20px !important;
}

/* Sidebar collapsed - reduce to 60px collapsed width + margins */

body:not(:has(.plot-fullscreen)):has(.adaptive-sidebar--collapsed) .app-main-content {
    margin-left: 100px;
    /* 60px collapsed sidebar + 20px gap + 20px base margin */
}

/* Single cell mode with collapsed sidebar: center content with sidebar space */

[data-view-mode="single-cell"]:has(.adaptive-sidebar--collapsed) .app-main-content {
    margin-left: 100px;
    /* 60px collapsed sidebar + 20px gap + 20px base margin */
    margin-right: 20px;
    opacity: 1;
    filter: none;
    pointer-events: auto;
}

/* Single cell mode with expanded sidebar: shift content right */

[data-view-mode="single-cell"]:not(:has(.adaptive-sidebar--collapsed)) .app-main-content {
    margin-left: 380px;
    /* 340px sidebar + 20px gap + 20px base margin */
    margin-right: 20px;
    opacity: 1;
    filter: none;
    pointer-events: auto;
}

/* ============================================
   FLOATING COMPARE BUTTON (< 1600px only)
   ============================================ */

.floating-compare-btn {
    display: none !important;
}

.floating-compare-btn:hover {
    transform: scale(1.1) translateY(-4px);
    box-shadow: 0 12px 32px rgba(234, 91, 12, 0.6),
        0 6px 16px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

.floating-compare-btn svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    stroke-width: 2.5;
}

.floating-compare-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    background: #fff;
    color: #ea5b0c;
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    border: 2px solid rgba(234, 91, 12, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Hide floating button on large screens (≥1600px) */

@media (min-width: 1600px) {
    .floating-compare-btn {
        display: none;
    }
}

/* Hide in non-single-cell views */

[data-view-mode="cells-grid"] .floating-compare-btn,
[data-view-mode="cells-ragone"] .floating-compare-btn,
[data-view-mode="cells-table"] .floating-compare-btn {
    display: none;
}

/* Floating Compare Panel Overlay */

.floating-compare-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.floating-compare-panel {
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.98) 0%, rgba(45, 42, 38, 1) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   LAYER 3: SINGLE CELL OVERLAY
   ============================================ */

.single-cell-overlay {
    position: fixed;
    top: 180px;
    /* Below CommandBar (70px) + expanded Context Bar (90px) + 20px gap */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    animation: overlayFadeIn 0.3s ease;
}

@keyframes overlayFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.overlay-backdrop {
    position: fixed;
    top: 180px;
    left: 0;
    right: 0;
    bottom: 0;
    /* UNIFIED: Same gradient as main page - seamless transition */
    background: linear-gradient(135deg,
            rgba(45, 42, 38, 0.98) 0%,
            rgba(40, 38, 35, 1) 50%,
            rgba(45, 42, 38, 0.98) 100%);
    /* Very subtle blur - not jarring */
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    z-index: -1;
    cursor: pointer;
    animation: backdropFadeIn 0.3s ease;
}

@keyframes backdropFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(30px);
    }
}

.overlay-content {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* Full width for single cell detail */
    /* Glassmorphism matching key-spec-card tiles */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.85) 0%, rgba(45, 42, 38, 0.92) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    animation: slideInFromBottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(40px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Close animation */

.overlay-content.closing {
    animation: slideOutToBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideOutToBottom {
    from {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    to {
        transform: translateY(40px) scale(0.95);
        opacity: 0;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 1200px) {
    .adaptive-sidebar {
        width: 260px;
    }

    .app-main-content {
        margin-left: 260px;
    }

    [data-view-mode="cells-single"] .app-main-content {
        margin-left: 0;
    }
}

@media (max-width: 768px) {

    .adaptive-sidebar {
        transform: translateX(-100%);
    }

    .adaptive-sidebar.mobile-open {
        transform: translateX(0);
    }

    .app-main-content {
        margin-left: 0;
        padding: 1rem;
    }

    .single-cell-overlay {
        padding: 1rem;
        top: 190px;
        /* Adjusted for mobile: CommandBar (70px) + expanded Context Bar (90px) + 30px gap */
    }

    .overlay-content {
        border-radius: 12px;
    }
}

/* NEW: Unified single-page app layout with layer system */

/**
 * Context Bar Controls - Styling for view-specific controls
 * 
 * Dropdowns, buttons, and other interactive elements in the context bar
 */

/* ============================================================================
   CONTROL GROUPS
   ============================================================================ */

.control-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Only apply to control groups, not global controls */

.control-group .control-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--filter-text-secondary);
    white-space: nowrap;
}

/* ============================================================================
   SELECT DROPDOWNS
   ============================================================================ */

.control-select {
    padding: 8px 32px 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--filter-border);
    border-radius: 6px;
    color: var(--filter-text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ea5b0c' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: all 0.2s;
    min-width: 120px;
}

body.light-theme .control-select {
    background-color: rgba(0, 0, 0, 0.04);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ea5b0c' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.control-select:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(234, 91, 12, 0.3);
}

body.light-theme .control-select:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.control-select:focus {
    outline: none;
    border-color: rgba(234, 91, 12, 0.5);
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.control-select option {
    background: #2c2c2c;
    color: white;
    padding: 8px;
}

body.light-theme .control-select option {
    background: white;
    color: black;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.control-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--filter-border);
    border-radius: 6px;
    color: var(--filter-text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

body.light-theme .control-btn {
    background: rgba(0, 0, 0, 0.04);
}

.control-btn:hover {
    background: var(--filter-hover);
    border-color: rgba(234, 91, 12, 0.3);
    color: var(--filter-text-accent);
}

.control-btn:active {
    transform: translateY(1px);
}

/* Sort order toggle button */

.control-sort-order {
    padding: 8px 12px;
    min-width: 36px;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}

/* ============================================================================
   MOBILE FILTER TOGGLE
   ============================================================================ */

.mobile-filter-toggle {
    display: none;
    /* Hidden by default, shown on mobile */
}

@media (max-width: 767px) {
    .mobile-filter-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: var(--filter-selected);
        border: none;
        border-radius: 8px;
        color: white;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(234, 91, 12, 0.3);
        position: relative;
    }

    .mobile-filter-toggle .filter-badge {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        background: #ff3333;
        border-radius: 10px;
        color: white;
        font-size: 11px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Mobile */

@media (max-width: 767px) {
    .context-bar-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .view-switcher {
        order: -1;
        width: 100%;
    }

    .context-search {
        order: 1;
        flex: 1 1 100%;
        max-width: none;
    }

    .control-group {
        flex-wrap: wrap;
    }

    .control-select {
        min-width: auto;
        flex: 1;
    }

    .control-label {
        display: none;
        /* Hide labels on mobile to save space */
    }

    /* Stack active filters */
    .active-filters {
        width: 100%;
        order: 10;
    }

    /* Hide some controls on mobile */
    .control-group:has(.control-btn:not(.mobile-filter-toggle)) {
        display: none;
    }
}

/* Tablet */

@media (min-width: 768px) and (max-width: 1024px) {
    .control-select {
        min-width: 100px;
        font-size: 12px;
    }

    .control-label {
        font-size: 12px;
    }

    .control-btn {
        padding: 7px 12px;
        font-size: 12px;
    }

    .context-bar-row {
        gap: 12px;
    }
}

/* Desktop - Large */

@media (min-width: 1441px) {
    .control-select {
        min-width: 140px;
    }

    .control-group {
        gap: 10px;
    }
}

/* ============================================================================
   VIEW TAB LABELS (RESPONSIVE)
   ============================================================================ */

/* Hide labels on small screens, show icons only */

@media (max-width: 1024px) {
    .view-tab-label {
        display: none;
    }

    .view-tab {
        padding: 8px 12px;
    }
}

@media (min-width: 1025px) {
    .view-tab-label {
        display: inline;
    }
}

/* ============================================================================
   ANIMATION & TRANSITIONS
   ============================================================================ */

.context-bar-section {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Smooth transitions when switching views */

.context-bar-row {
    transition: all 0.3s ease;
}

/* ============================================================================
   LOADING & EMPTY STATES
   ============================================================================ */

.control-select:disabled,
.control-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.control-group.loading {
    opacity: 0.6;
    pointer-events: none;
}

.control-group.loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(234, 91, 12, 0.3);
    border-top-color: #ea5b0c;
    border-radius: 50%;
    margin-left: 8px;
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus visible for keyboard navigation */

.control-select:focus-visible,
.control-btn:focus-visible {
    outline: 2px solid #ea5b0c;
    outline-offset: 2px;
}

/* High contrast mode */

@media (prefers-contrast: high) {

    .control-select,
    .control-btn {
        border-width: 2px;
    }

    .control-select:focus,
    .control-btn:focus {
        border-color: #ea5b0c;
        box-shadow: 0 0 0 4px rgba(234, 91, 12, 0.2);
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .control-select,
    .control-btn,
    .context-bar-section,
    .context-bar-row {
        animation: none;
        transition: none;
    }
}

/* ============================================================================
   TOOLTIPS
   ============================================================================ */

.control-btn[title],
.control-select[title] {
    position: relative;
}

.control-btn[title]:hover::after,
.control-select[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 6px;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.light-theme .control-btn[title]:hover::after,
body.light-theme .control-select[title]:hover::after {
    background: rgba(0, 0, 0, 0.85);
}

/* Arrow for tooltip */

.control-btn[title]:hover::before,
.control-select[title]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    pointer-events: none;
    z-index: 1001;
}

body.light-theme .control-btn[title]:hover::before,
body.light-theme .control-select[title]:hover::before {
    border-top-color: rgba(0, 0, 0, 0.85);
}

/* ============================================
   VARIANTE 2: VERTIKALE KARTEIKARTEN-REITER
   
   Diese Variante zeigt die Tabs wie echte Karteikarten-
   Reiter, die seitlich aus einem "Ordner" herausragen.
   
   Um diese Variante zu aktivieren:
   1. In index.html: <link rel="stylesheet" href="assets/css/section-nav-variant2.css">
   2. Oder in main.css: @import url('./section-nav-variant2.css');
   
   WICHTIG: Diese Datei überschreibt section-nav.css Stile
============================================ */

.section-nav {
  /* DIE AKTE - Nahtlos mit Site Header verbunden */
  position: relative; /* NICHT sticky - Teil vom Flow */
  z-index: 50; /* Unter Site Header */
  width: 100%;
  max-width: 1800px;
  margin: -1px auto 0; /* Negative margin überlappt Header-Border */
  background: transparent; /* Durchsichtig - nur Tabs sichtbar */
  padding: 24px 40px 0; /* Gleiche Padding wie header-inner */
  display: flex;
  align-items: flex-end; /* Tabs am Boden */
  gap: 0;
  min-height: 80px;
}

/* Zellidentität LINKS - Erster Tab (hinter Explorer-Button) */

.section-nav-cell-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px 16px;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.28) 0%, rgba(234, 91, 12, 0.18) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  border: 2px solid rgba(234, 91, 12, 0.65);
  border-bottom: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  min-width: 360px;
  max-width: 360px;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  margin-left: 0; /* Links bündig */
  box-shadow: 
    0 -8px 32px rgba(234, 91, 12, 0.4),
    0 0 28px rgba(234, 91, 12, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 50px rgba(234, 91, 12, 0.12);
}

/* Glühende Oberkante - wie herausgezogene Karteikarte */

.section-nav-cell-identity::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ea5b0c 20%, #ea5b0c 80%, transparent);
  border-radius: 2px 2px 0 0;
  box-shadow: 
    0 0 20px rgba(234, 91, 12, 0.9),
    0 -2px 8px rgba(234, 91, 12, 0.6);
}

/* Nahtlose Verbindung nach unten */

.section-nav-cell-identity::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -2px;
  right: -2px;
  height: 4px;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.25) 0%, rgba(234, 91, 12, 0.15) 100%);
  z-index: 11;
  border-left: 2px solid rgba(234, 91, 12, 0.6);
  border-right: 2px solid rgba(234, 91, 12, 0.6);
}

.section-nav-cell-image {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(39, 39, 39, 0.7) 0%, rgba(39, 39, 39, 0.8) 100%);
  padding: 10px;
  border: 2px solid rgba(234, 91, 12, 0.4);
  cursor: zoom-in;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.section-nav-cell-image:hover {
  transform: scale(1.05);
  box-shadow: 
    0 6px 20px rgba(234, 91, 12, 0.4),
    0 0 24px rgba(234, 91, 12, 0.3);
  border-color: rgba(234, 91, 12, 0.7);
}

.section-nav-cell-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  justify-content: center;
}

.section-nav-cell-name {
  font-family: 'Big John', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  
  line-height: 1.3;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-nav-cell-meta {
  font-size: 11px;
  color: #ddd;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  display: flex;
  gap: 8px;
  align-items: center;
  opacity: 0.95;
  white-space: nowrap;
}

/* Back Button - REMOVED (use Site Header navigation instead) */

/* Tabs RECHTS - Karteikarten-Reiter */

.section-nav-track {
  display: flex;
  align-items: flex-end; /* Tabs am Boden */
  justify-content: flex-end; /* Tabs nach RECHTS */
  gap: 4px;
  padding: 0;
  flex: 1;
  overflow-x: auto;
  overflow-y: visible; /* WICHTIG: Tabs nicht abschneiden */
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: transparent;
  margin-left: auto; /* Push nach rechts */
  height: 100%; /* Volle Höhe nutzen */
}

.section-nav-track::-webkit-scrollbar {
  display: none;
}

.section-nav-item {
  /* Karteikarten-Reiter - inaktive Tabs */
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.85) 0%, rgba(45, 45, 45, 0.9) 100%);
  backdrop-filter: blur(80px);
  border: 1px solid rgba(234, 91, 12, 0.2);
  border-bottom: none;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 12px 22px 14px; /* Weniger Padding für inaktive */
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-family: 'Big John', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  
  white-space: nowrap;
  box-shadow: 
    0 -2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  min-width: 120px;
  flex-shrink: 0;
  overflow: visible; /* WICHTIG: Nicht abschneiden */
}

.section-nav-item:hover {
  background: linear-gradient(135deg, rgba(55, 55, 55, 0.95) 0%, rgba(50, 50, 50, 0.98) 100%);
  border-color: rgba(234, 91, 12, 0.35);
  color: #ddd;
  transform: translateY(-3px) scale(1.02);
  z-index: 2;
  box-shadow: 
    0 -4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.section-nav-item.active {
  /* Aktiver Reiter - gleiche Höhe wie Cell Identity */
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.28) 0%, rgba(234, 91, 12, 0.18) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  border: 2px solid rgba(234, 91, 12, 0.65);
  border-bottom: none;
  color: #fff;
  box-shadow: 
    0 -8px 32px rgba(234, 91, 12, 0.4),
    0 0 28px rgba(234, 91, 12, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.15),
    inset 0 0 50px rgba(234, 91, 12, 0.12);
  transform: translateY(0) scale(1.0); /* Keine Transform - gleiche Baseline */
  z-index: 10;
  padding: 14px 24px 16px; /* Gleiche wie Cell Identity */
  font-size: 12px;
  font-weight: 500;
  
}

/* Nahtlose Verbindung nach unten - verschmilzt mit Content-Bereich */

.section-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: -2px;
  right: -2px;
  height: 4px;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.28) 0%, rgba(234, 91, 12, 0.18) 100%);
  z-index: 11;
  border-left: 2px solid rgba(234, 91, 12, 0.65);
  border-right: 2px solid rgba(234, 91, 12, 0.65);
}

/* Glühende Oberkante - wie eine herausgezogene Karteikarte */

.section-nav-item.active::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 10%;
  right: 10%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ea5b0c 20%, #ea5b0c 80%, transparent);
  border-radius: 2px 2px 0 0;
  box-shadow: 
    0 0 20px rgba(234, 91, 12, 0.9),
    0 -2px 8px rgba(234, 91, 12, 0.6);
}

/* Container nach section-nav - verbindet sich nahtlos mit aktivem Tab */

.section-nav ~ .container,
body:has(.section-nav) .container {
  margin-top: -2px; /* Überlappt mit Tab-Border */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 2px 8px rgba(234, 91, 12, 0.08);
}

/* Container Content - nahtlos verbunden */

body:has(.section-nav) .container-content {
  border-top: 2px solid rgba(234, 91, 12, 0.2);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Responsive */

@media (max-width: 1200px) {
  .section-nav {
    flex-direction: column;
    min-height: auto;
  }
  
  .section-nav-cell-identity {
    border-right: none;
    border-bottom: 1px solid rgba(234, 91, 12, 0.4);
    min-width: 100%;
    padding: 16px 20px;
  }
  
  .section-nav-cell-identity::after {
    display: none; /* Kein Schatten im gestackten Layout */
  }
  
  .section-nav-cell-image {
    width: 56px;
    height: 56px;
  }
  
  .section-nav-cell-name {
    font-size: 16px;
  }
  
  .section-nav-track {
    padding: 0 16px 0;
  }
  
  .section-nav-item {
    min-width: 110px;
    padding: 12px 18px 14px;
  }
}

/* Light Theme */

[data-theme="light"] .section-nav {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 250, 0.99) 100%);
  border-color: rgba(234, 91, 12, 0.25);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .section-nav-cell-identity {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.2) 0%, rgba(234, 91, 12, 0.12) 100%);
  border-color: rgba(234, 91, 12, 0.5);
  box-shadow: 
    0 -10px 40px rgba(234, 91, 12, 0.25),
    0 0 30px rgba(234, 91, 12, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 50px rgba(234, 91, 12, 0.06);
}

[data-theme="light"] .section-nav-cell-identity::before {
  box-shadow: 
    0 0 20px rgba(234, 91, 12, 0.7),
    0 -2px 8px rgba(234, 91, 12, 0.4);
}

[data-theme="light"] .section-nav-cell-identity::after {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.2) 0%, rgba(234, 91, 12, 0.12) 100%);
  border-left-color: rgba(234, 91, 12, 0.5);
  border-right-color: rgba(234, 91, 12, 0.5);
}

[data-theme="light"] .section-nav-cell-image {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.98) 100%);
  border-color: rgba(234, 91, 12, 0.4);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .section-nav-cell-name {
  color: #1a1a1a;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .section-nav-cell-meta {
  color: #555;
}

[data-theme="light"] .section-nav-item {
  background: linear-gradient(135deg, rgba(250, 250, 250, 0.95) 0%, rgba(245, 245, 245, 0.98) 100%);
  border-color: rgba(234, 91, 12, 0.25);
  color: #666;
  box-shadow: 
    0 -3px 12px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .section-nav-item:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 250, 0.99) 100%);
  border-color: rgba(234, 91, 12, 0.35);
  color: #1a1a1a;
}

[data-theme="light"] .section-nav-item.active {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.18) 0%, rgba(234, 91, 12, 0.1) 100%);
  border-color: rgba(234, 91, 12, 0.55);
  color: #1a1a1a;
  box-shadow: 
    0 -10px 40px rgba(234, 91, 12, 0.25),
    0 0 30px rgba(234, 91, 12, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 50px rgba(234, 91, 12, 0.06);
}

[data-theme="light"] .section-nav-item.active::after {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.18) 0%, rgba(234, 91, 12, 0.1) 100%);
  border-left-color: rgba(234, 91, 12, 0.55);
  border-right-color: rgba(234, 91, 12, 0.55);
}

[data-theme="light"] .section-nav-item.active::before {
  box-shadow: 
    0 0 20px rgba(234, 91, 12, 0.7),
    0 -2px 8px rgba(234, 91, 12, 0.4);
}

/* ===== STEP 6: Components ===== */

/* ============================================
   ADAPTIVE COMMAND BAR SYSTEM
   Two-tier sticky header matching Batemo design
   ============================================ */

/* ===== MAIN COMMAND BAR (70px) ===== */

.cmdbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    /* Glassmorphism matching key-spec-card tiles */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.95) 0%, rgba(45, 42, 38, 0.98) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cmdbar__main {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 2rem;
    max-width: 100%;
}

.cmdbar__left {
    display: flex;
    align-items: center;
    /* Yield space first so the right cluster (tools + user menu) is never
       pushed off-screen on narrow viewports. Nav tabs scroll as a last
       resort (see .cmdbar-nav-tabs). */
    flex: 0 1 auto;
    min-width: 0;
}

/* Logo Group - Combined Logo + Nav Tabs */

.cmdbar-logo-group {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 1.5rem;
    /* Logo + tabs in tile like tools */
    background: linear-gradient(135deg, rgba(60, 58, 55, 0.9) 0%, rgba(50, 47, 43, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    height: 54px;
    /* Fixed height for alignment */
}

.cmdbar__right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    /* Tools in tile on right */
    background: linear-gradient(135deg, rgba(60, 58, 55, 0.9) 0%, rgba(50, 47, 43, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    height: 54px;
    /* Fixed height matching left & center */
}

/* Keep the basis/domain switchers side by side in the header. The shared
   .global-controls class is forced to flex-direction:column at <=1100px by
   preact-kpi.css (meant for the KPI sidebar); scope a row override to the
   command bar so the two icons never stack vertically on narrow screens.
   Higher specificity (.cmdbar__right .global-controls) wins regardless of
   import order. */

.cmdbar__right .global-controls {
    flex-direction: row;
    flex-wrap: nowrap;
}

.cmdbar__center {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Kachel-Design wie key-spec-card */
    background: linear-gradient(135deg, rgba(60, 58, 55, 0.9) 0%, rgba(50, 47, 43, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    height: 54px;
    /* Fixed height matching left & right */
}

/* ===== LOGO ===== */

.cmdbar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    /* Never shrink the logo+wordmark — the nav tabs absorb the squeeze
       instead (they scroll). Prevents the wordmark from being compressed
       into two lines when .cmdbar__left shrinks on narrow viewports. */
    flex-shrink: 0;
}

.cmdbar-logo:hover {
    opacity: 0.8;
}

.cmdbar-logo img {
    width: 40px;
    height: 40px;
}

.cmdbar-logo-text {
    font-family: var(--font-display, 'Big John', sans-serif);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    padding-top: 5px;
    /* Keep the wordmark on one line — never let it wrap out of the 54px tile. */
    white-space: nowrap;
    /* Orange gradient */
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== NAVIGATION TABS (IN LOGO GROUP) ===== */

.cmdbar-nav-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    /* Last-resort overflow guard: at extreme narrow widths the tabs scroll
       horizontally instead of pushing the right cluster off-screen. The
       breakpoint ladder below keeps this from being needed at normal sizes. */
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.cmdbar-nav-tabs::-webkit-scrollbar {
    display: none;
}

.cmdbar-nav-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-family: var(--font-display, 'Big John', sans-serif);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cmdbar-nav-tab:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
}

.cmdbar-nav-tab:hover .cmdbar-badge {
    background: rgba(234, 91, 12, 0.25);
    border-color: rgba(234, 91, 12, 0.5);
}

.cmdbar-nav-tab--active {
    color: #fff;
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.4);
    box-shadow: 0 0 12px rgba(234, 91, 12, 0.3);
}

.cmdbar-nav-tab--active .cmdbar-badge {
    color: #fff;
    background: rgba(234, 91, 12, 0.35);
    border-color: rgba(234, 91, 12, 0.7);
    box-shadow: 0 0 8px rgba(234, 91, 12, 0.4);
}

/* Compare Tab Badge (inline) */

.cmdbar-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(234, 91, 12, 0.6);
    border: 1px solid rgba(234, 91, 12, 0.8);
    border-radius: 9px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.cmdbar-nav-tab:hover .cmdbar-nav-badge {
    background: rgba(234, 91, 12, 0.7);
    border-color: rgba(234, 91, 12, 1);
    box-shadow: 0 0 8px rgba(234, 91, 12, 0.5);
}

.cmdbar-nav-tab--active .cmdbar-nav-badge {
    background: rgba(234, 91, 12, 0.9);
    border-color: #ea5b0c;
    box-shadow: 0 0 12px rgba(234, 91, 12, 0.6);
}

.cmdbar-nav-tab:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cmdbar-nav-tab:disabled:hover {
    color: rgba(255, 255, 255, 0.5);
    background: transparent;
}

/* ===== OLD CENTERED NAVIGATION TABS (DEPRECATED) ===== */

.cmdbar-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-family: var(--font-display, 'Big John', sans-serif);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;

    color: #999;
    /* Matching view-tab: rgba(255,255,255,0.5) → #999 */
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Faster: 0.3s → 0.2s */
}

.cmdbar-badge {
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;

    color: #ea5b0c;
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.cmdbar-tab:hover .cmdbar-badge {
    background: rgba(234, 91, 12, 0.25);
    border-color: rgba(234, 91, 12, 0.5);
}

.cmdbar-tab--active .cmdbar-badge {
    color: #fff;
    background: rgba(234, 91, 12, 0.35);
    border-color: rgba(234, 91, 12, 0.7);
    box-shadow: 0 0 8px rgba(234, 91, 12, 0.4);
}

.cmdbar-tab:hover {
    color: #ccc;
    /* Matching view-tab */
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(234, 91, 12, 0.2);
    /* Added border like view-tab */
}

.cmdbar-tab--active {
    color: #fff;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
    /* Matching view-tab gradient */
    border-color: #ea5b0c;
    /* Matching view-tab */
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
    /* Matching view-tab: 12px → 20px */
}

/* ===== TOOL ICONS ===== */

.cmdbar-tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    /* Kachel-Design wie key-spec-card */
    background: linear-gradient(135deg, rgba(60, 58, 55, 0.8) 0%, rgba(50, 47, 43, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cmdbar-tool-icon:hover {
    background: linear-gradient(135deg, rgba(70, 68, 65, 0.9) 0%, rgba(60, 57, 53, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.9);
}

.cmdbar-tool-icon.is-active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.25) 0%, rgba(234, 91, 12, 0.15) 100%);
    border-color: rgba(234, 91, 12, 0.4);
    color: #ea5b0c;
    box-shadow: 0 0 16px rgba(234, 91, 12, 0.4);
}

/* ===== USER SECTION ===== */

.cmdbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 0.85rem;
}

.user-name {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-size: 13px;
    font-family: 'Big John', sans-serif;
    padding: 0 4px;
}

.user-exp {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

.user-exp.exp-soon {
    color: #ff6b6b;
}

.cmdbar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #999;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cmdbar-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(234, 91, 12, 0.2);
    color: #ccc;
}

.cmdbar-btn.is-active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
    border-color: #ea5b0c;
    color: #fff;
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
}

.cmdbar-btn--small {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
}

/* ===== SCROLL ENHANCEMENTS ===== */

body.scrolled .cmdbar {
    backdrop-filter: blur(50px) saturate(200%);
    -webkit-backdrop-filter: blur(50px) saturate(200%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* ===== Z-INDEX FIX ===== */

.cmdbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* ===== RESPONSIVE =====
   Breakpoint ladder ordered widest → narrowest so the tighter rules win at
   smaller sizes. Combined with the flex safety net above (.cmdbar__left
   shrinks, nav tabs scroll), the right cluster can never overflow the viewport. */

/* First step (common laptops): tighten gaps and collapse the RIGHT cluster —
   basis/domain become icon-only and the user trigger becomes an avatar-only
   circle (user-dropdown-menu.css @1440). This frees enough room that the
   wordmark + full nav stay visible well below this width. */

@media (max-width: 1440px) {
    .cmdbar__main {
        gap: 1rem;
    }

    .cmdbar-logo-group {
        gap: 1rem;
    }

    .cmdbar__right {
        gap: 0.6rem;
    }

    .global-controls {
        gap: 4px;
    }

    .cmdbar__right .global-control-btn .control-label {
        display: none;
    }

    .cmdbar__right .global-control-btn {
        padding: 0 10px;
    }
}

/* Next, drop the wordmark (the biggest remaining width hog) so the nav tabs
   never need to scroll at normal widths. Raised to 1600px so 14-inch
   notebooks (~1280-1536px logical) drop it too — the nav tabs were still
   clipping the last tab on those widths. */

@media (max-width: 1600px) {
    .cmdbar-logo-text {
        display: none;
    }
}

/* Tablet — Nav-Tabs und rechte Kachel enger. */

@media (max-width: 1024px) {
    .cmdbar-nav-tab {
        padding: 8px 10px;
    }

    .cmdbar-logo-group {
        padding: 8px 12px;
    }

    .cmdbar__right {
        padding: 6px 8px;
    }
}

@media (max-width: 768px) {
    .cmdbar__main {
        padding: 0 1rem;
        gap: 0.75rem;
        height: 60px;
        /* Smaller on mobile */
    }

    .cmdbar-logo-text {
        display: none;
    }

    .cmdbar-tab {
        padding: 8px 12px;
        font-size: 12px;
    }

    .cmdbar__right {
        padding: 6px 8px;
    }
}

@media (max-width: 480px) {
    .cmdbar__center {
        display: none;
        /* Hide nav tabs on mobile */
    }

    .cmdbar-user .user-name {
        display: none;
    }
}

/* ============================================
   SINGLE CELL MODE - Cell Detail View
   ============================================ */

.cmdbar--cells-single .cmdbar__main {
    height: 70px;
}

.cmdbar--cells-single .cmdbar__left {
    gap: 1rem;
}

.cmdbar-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(234, 91, 12, 0.1);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 8px;
    color: #ea5b0c;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cmdbar-back-btn:hover {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.5);
}

.cmdbar-cell-image {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cmdbar-cell-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cmdbar-cell-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cmdbar-cell-name {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
    text-transform: uppercase;

}

.cmdbar-cell-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #94a3b8;
}

.cmdbar-cell-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Subheader with constrained width matching content area */

.cmdbar__subheader--cell-detail {
    display: flex;
    justify-content: center;
    padding: 0 20px;
    background: rgba(26, 26, 26, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cmdbar-subheader-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 1400px;
    height: 60px;
}

/* 1. Back Button */

.cmdbar-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(234, 91, 12, 0.1);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 8px;
    color: #ea5b0c;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.cmdbar-back-btn:hover {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.5);
}

/* 2. Cell Info Tile with view-switcher design */

.cmdbar-cell-info-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.cmdbar-cell-image {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cmdbar-cell-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cmdbar-cell-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cmdbar-cell-name {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0;
    text-transform: uppercase;

}

.cmdbar-cell-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #94a3b8;
}

.cmdbar-cell-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 3. Section Tabs with view-switcher design */

.cmdbar-section-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.cmdbar-section-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #999;
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cmdbar-section-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(234, 91, 12, 0.2);
    color: #ccc;
}

.cmdbar-section-tab.is-active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
    border-color: #ea5b0c;
    color: #fff;
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
}

/* 4. Compare Button */

.cmdbar-compare-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: #999;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.cmdbar-compare-btn:hover {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.1) 0%, rgba(234, 91, 12, 0.05) 100%);
    border-color: rgba(234, 91, 12, 0.3);
    color: #ea5b0c;
}

.cmdbar-compare-btn.in-cart {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
    border-color: #ea5b0c;
    color: #ea5b0c;
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
}

/* ============================================
   MINIMAL MODE - For users without subscription
   Only logo and user menu, no navigation
   ============================================ */

.cmdbar--minimal .cmdbar__main {
    justify-content: space-between;
}

.cmdbar--minimal .cmdbar-logo-group {
    /* Keep the tile style but only for logo */
}

.cmdbar--minimal .cmdbar__right {
    /* Smaller right section with just user menu */
    gap: 0.5rem;
    padding: 8px 12px;
}

/* Adaptive command bar system with glassmorphism tiles */

/* ===================================================
   Command Bar — Technology Radar "New" badge modifier
   =================================================== */

/**
 * .cmdbar-nav-badge--new
 * Overrides the base badge style for the "New" label on the Technology Radar tab.
 * Base .cmdbar-nav-badge is defined in command-bar-adaptive.css.
 */

.cmdbar-nav-badge--new {
  background: #ea5b0c;
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Technology Radar "New" badge modifier for CommandBar nav tabs */

/* =============================================
   Story Card — Colored Glassmorphism Radar cards
   Each card gets a colored tint from --section-accent
   ============================================= */

.story-card {
  position: relative;
  /* Base dark glass — the accent color is mixed in via pseudo-element */
  background: linear-gradient(160deg, rgba(50, 48, 45, 0.92) 0%, rgba(40, 38, 35, 0.98) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  padding: 28px 28px 20px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

/* Colored gradient overlay — subtle accent tint */

.story-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at 20% 0%,
    color-mix(in srgb, var(--section-accent) 12%, transparent) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}

/* Bottom accent glow line */

.story-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--section-accent) 40%, transparent) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
  opacity: 0.5;
}

.story-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 40px color-mix(in srgb, var(--section-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--section-accent) 20%, rgba(255, 255, 255, 0.06));
}

.story-card:hover::before {
  background: radial-gradient(
    ellipse at 20% 0%,
    color-mix(in srgb, var(--section-accent) 20%, transparent) 0%,
    transparent 65%
  );
}

.story-card:hover::after {
  opacity: 1;
  left: 10%;
  right: 10%;
}

.story-card:focus-visible {
  outline: 2px solid var(--section-accent, #0d7c99);
  outline-offset: 2px;
}

/* Stacked mini-chart cards — flex item fills space between content and footer */

.story-card__stack {
  position: relative;
  flex: 1;
  z-index: 0;
  pointer-events: none;
  min-height: 0;
}

.story-card__mini-card {
  position: absolute;
  /* Center within the stack container (= free zone between text and footer) */
  top: 40%;
  left: 50%;
  translate: -50% -50%;
  width: 78%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(55, 53, 50, 0.95) 0%, rgba(45, 42, 38, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.35s ease;
}

/* On hover: fan out wider using CSS custom properties set by JS */

.story-card:hover .story-card__mini-card {
  transform: translate(var(--x-hov), var(--y-hov)) !important;
}

.story-card__mini-chart {
  width: 100%;
  height: 100%;
}

/* Content stacking */

.story-card__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.story-card__plot-count {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  background: color-mix(in srgb, var(--section-accent) 12%, rgba(255, 255, 255, 0.04));
  color: var(--section-accent, #ea5b0c);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.story-card__title {
  margin: 4px 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary, rgba(255, 255, 255, 0.95));
  font-family: var(--font-heading, 'Big John', sans-serif);
  letter-spacing: 0.02em;
}

.story-card__teaser {
  margin: 0;
  font-style: italic;
  color: var(--text-secondary, rgba(255, 255, 255, 0.65));
  font-size: 0.95rem;
  line-height: 1.5;
}

.story-card__description {
  margin: 0;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.45));
  font-size: 0.875rem;
  line-height: 1.6;
  flex: 1;
}

/* Footer — gradient fade above the divider so overlapping mini-cards look intentional */

.story-card__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 16px 28px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(40, 38, 35, 1);
  margin-left: -28px;
  margin-right: -28px;
  margin-bottom: -20px;
  border-radius: 0 0 16px 16px;
}

/* Gradient extends upward from the divider line */

.story-card__footer::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(40, 38, 35, 0.85) 60%,
    rgba(40, 38, 35, 1) 100%
  );
  pointer-events: none;
}

.story-card__cta {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--section-accent, #ea5b0c);
  letter-spacing: 0.03em;
  transition: opacity 0.2s ease;
}

.story-card:hover .story-card__cta {
  opacity: 0.85;
}

.story-card__arrow {
  color: var(--section-accent, #ea5b0c);
  font-size: 1.2rem;
  opacity: 0.6;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.story-card:hover .story-card__arrow {
  transform: translateX(6px);
  opacity: 1;
}

/* Story cards for Technology Radar overview */

/* ===================================================
   Key Insight Block — Glassmorphism accent-bordered callout
   =================================================== */

.key-insight {
  border-left: 4px solid var(--accent-color, #ea5b0c);
  background: linear-gradient(135deg, rgba(55, 53, 50, 0.75) 0%, rgba(45, 42, 38, 0.9) 100%);
  backdrop-filter: blur(60px) saturate(220%);
  -webkit-backdrop-filter: blur(60px) saturate(220%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 4px solid var(--accent-color, #ea5b0c);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 16px 20px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.75));
  font-size: 0.93rem;
  line-height: 1.7;
}

.key-insight__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-color, #ea5b0c);
  margin-bottom: 8px;
}

.key-insight strong {
  color: var(--accent-color, #ea5b0c);
  font-weight: 700;
}

.key-insight p {
  margin: 0;
}

/* Key Insight blocks with accent left border */

/* ===================================================
   QA Insight Block — Gradient Glassmorphism Q&A
   =================================================== */

.qa-insight {
  position: relative;
  background: linear-gradient(135deg, rgba(55, 53, 50, 0.75) 0%, rgba(45, 42, 38, 0.9) 100%);
  backdrop-filter: blur(60px) saturate(220%);
  -webkit-backdrop-filter: blur(60px) saturate(220%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 20px;
  overflow: hidden;
  isolation: isolate;
}

/* Accent gradient overlay — like StoryCard ::before */

.qa-insight__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at 20% 0%,
    color-mix(in srgb, var(--qa-accent, #ea5b0c) 15%, transparent) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

/* Question */

.qa-insight__question {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--qa-accent, #ea5b0c);
  font-family: 'Big John', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.4;
}

.qa-insight__q-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 4px;
  color: #fff;
  font-family: 'Big John', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Divider */

.qa-insight__divider {
  position: relative;
  z-index: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 14px 0;
}

/* Answer */

.qa-insight__answer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.qa-insight__a-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary, rgba(255, 255, 255, 0.65));
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-top: 1px;
}

.qa-insight__answer-text {
  color: var(--text-secondary, rgba(255, 255, 255, 0.75));
  font-size: 0.88rem;
  line-height: 1.7;
}

.qa-insight__answer-text strong {
  color: var(--qa-accent, #ea5b0c);
  font-weight: 700;
}

.qa-insight__answer-text p {
  margin: 0;
}

/* Bottom glow line — like StoryCard ::after */

.qa-insight__bottom-glow {
  position: absolute;
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--qa-accent, #ea5b0c) 35%, transparent) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* Export buttons row below insight */

.radar-export-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.radar-export-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.7) 0%, rgba(40, 40, 40, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.65);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.radar-export-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.08) 100%);
  border-color: rgba(234, 91, 12, 0.4);
  color: #ea5b0c;
  box-shadow: 0 4px 12px rgba(234, 91, 12, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.radar-export-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.radar-export-btn--accent {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.06) 100%);
  border-color: rgba(234, 91, 12, 0.35);
  color: #ea5b0c;
}

.radar-export-btn--accent:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.25) 0%, rgba(234, 91, 12, 0.12) 100%);
  border-color: rgba(234, 91, 12, 0.5);
  box-shadow: 0 4px 16px rgba(234, 91, 12, 0.25);
}

.radar-export-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Next Section / Back to Overview row */

.radar-next-section-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  justify-content: flex-end;
}

.radar-next-section-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.06) 100%);
  border: 1px solid rgba(234, 91, 12, 0.35);
  border-radius: 8px;
  color: #ea5b0c;
  font-family: 'Big John', sans-serif;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(234, 91, 12, 0.15);
}

.radar-next-section-btn:hover {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.25) 0%, rgba(234, 91, 12, 0.12) 100%);
  border-color: rgba(234, 91, 12, 0.5);
  box-shadow: 0 4px 16px rgba(234, 91, 12, 0.25);
  transform: translateX(2px);
}

.radar-next-section-btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.radar-back-overview-link {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0;
}

.radar-back-overview-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Q&A insight blocks with gradient design */

/* ===================================================
   Slide Progress Bar — 3px animated bar at top
   =================================================== */

.slide-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 10;
  display: flex;
  gap: 3px;
  padding: 0 12px;
}

.slide-progress__segment {
  flex: 1;
  height: 100%;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.06);
  transition: background-color 0.3s ease;
}

.slide-progress__segment--active {
  opacity: 0.7;
}

/* ===================================================
   Slide Dots Navigation
   =================================================== */

.slide-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slide-dots__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.slide-dots__dot:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.2);
}

.slide-dots__dot--active {
  width: 10px;
  height: 10px;
  background: var(--dot-accent, #ea5b0c);
}

.slide-dots__dot--active:hover {
  background: var(--dot-accent, #ea5b0c);
}

/* Tooltip via title attribute — native browser tooltips */

/* Slide Navigation wrapper with arrows */

.slide-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slide-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.slide-nav__arrow:hover:not(:disabled) {
  border-color: rgba(234, 91, 12, 0.4);
  background: rgba(234, 91, 12, 0.06);
  color: rgba(255, 255, 255, 0.9);
}

.slide-nav__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

/* ===================================================
   Zoom Toggle Button
   =================================================== */

.zoom-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.zoom-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.zoom-toggle__btn:hover {
  border-color: rgba(234, 91, 12, 0.4);
  background: rgba(234, 91, 12, 0.06);
  color: rgba(255, 255, 255, 0.9);
}

.zoom-toggle__btn--active {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.2), rgba(234, 91, 12, 0.08));
  border-color: rgba(234, 91, 12, 0.5);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 12px rgba(234, 91, 12, 0.15);
}

/* ===================================================
   Radar Slide — Layout variants
   =================================================== */

.radar-slide {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.radar-slide__plots {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
  /* Review fix (Bug E, WS 1.5): containing block for `.radar-demo-overlay`
     (position: absolute; bottom: 0), which now renders as a child of this
     wrapper instead of `.radar-slide`, so it anchors to the plots area only
     and no longer overlaps `.radar-slide__insight` below it. */
  position: relative;
}

/* Single plot layout */

.radar-slide__plots--single {
  flex-direction: column;
}

.radar-slide__plots--single .radar-plot-container {
  flex: 1;
  min-height: 0;
}

/* Dual plot layout */

.radar-slide__plots--dual .radar-plot-container {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* Complex layout: 1 large + 2 stacked small */

.radar-slide__plots--complex {
  flex-direction: row;
}

.radar-slide__plots--complex .radar-slide__plot-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.radar-slide__plots--complex .radar-slide__plot-stack {
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.radar-slide__plots--complex .radar-slide__plot-stack .radar-plot-container {
  flex: 1;
  min-height: 0;
}

/* Single with toggle: plot + toggle button overlay */

.radar-slide__plots--single-with-toggle {
  flex-direction: column;
  position: relative;
}

.radar-slide__plots--single-with-toggle .radar-plot-container {
  flex: 1;
  min-height: 0;
}

/* Per-chart PNG download button (top-right corner of each chart) */

.radar-plot-container {
  position: relative;
}

.radar-chart-download-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(39, 39, 39, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 4;
  opacity: 0.6;
}

.radar-plot-container:hover .radar-chart-download-btn {
  opacity: 1;
}

.radar-chart-download-btn:hover {
  background: rgba(39, 39, 39, 0.9);
  border-color: rgba(234, 91, 12, 0.4);
  color: #ea5b0c;
}

/* Chart info icon + tooltip (? button on every chart) */

.chart-info {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}

.chart-info__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(39, 39, 39, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
}

.radar-plot-container:hover .chart-info__btn {
  opacity: 1;
}

.chart-info__btn:hover {
  background: rgba(39, 39, 39, 0.9);
  border-color: rgba(234, 91, 12, 0.4);
  color: #ea5b0c;
}

.chart-info__tooltip {
  position: absolute;
  top: 34px;
  right: 0;
  width: 280px;
  padding: 12px 14px;
  background: rgba(39, 39, 39, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

.chart-info__tooltip strong {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 13px;
}

.chart-info__tooltip p {
  margin: 0 0 6px;
}

.chart-info__tooltip p:last-child {
  margin-bottom: 0;
}

.radar-slide__toggle-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}

.radar-slide__envelope-legend-overlay {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

/* Envelope custom HTML legend */

.envelope-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
}

.envelope-legend__item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  cursor: default;
  transition: all 0.2s ease;
  user-select: none;
}

.envelope-legend__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 1);
}

.envelope-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Insight panel below plots */

.radar-slide__insight {
  position: relative;
  flex-shrink: 0;
  margin-top: 12px;
}

/* Year toggle row */

.radar-slide__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* Responsive: dual plots stack vertically under 1024px */

@media (max-width: 1024px) {
  .radar-slide__plots--dual {
    flex-direction: column;
  }

  .radar-slide__plots--complex {
    flex-direction: column;
  }

  .radar-slide__plots--complex .radar-slide__plot-stack {
    width: 100%;
    flex-direction: row;
  }
}

/* Slide transition animation classes */

.radar-slide--enter {
  animation: slideEnter 0.3s ease forwards;
}

.radar-slide--exit {
  animation: slideExit 0.2s ease forwards;
}

@keyframes slideEnter {
  from {
    opacity: 0;
    transform: translateX(var(--slide-direction, 30px));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideExit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(calc(var(--slide-direction, 30px) * -1));
  }
}

/* Slide progress bar, dots nav, zoom toggle, radar slide layout */

/* radar-breadcrumb.css, scroll-fade-in.css, dot-nav.css removed — radar now uses Context Bar navigation */

/**
 * Unified Context Bar Styles
 * Adaptive context bar that changes based on view mode
 */

/* ============================================
   BASE CONTEXT BAR STYLES
   ============================================ */

.context-bar-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 0 20px;
    height: 100%;
    transition: all 0.3s ease;
}

.context-bar-inner>* {
    flex-shrink: 0;
}

/* ============================================
   VIEW SWITCHER (Grid/Ragone/Table)
   ============================================ */

.view-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.view-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #999;
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.view-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(234, 91, 12, 0.2);
    color: #ccc;
}

.view-tab.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
    border-color: #ea5b0c;
    color: #fff;
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
}

.view-tab svg {
    stroke: currentColor;
    transition: stroke 0.2s ease;
}

.view-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    margin-left: 4px;
    background: rgba(251, 146, 60, 0.2);
    border: 1px solid rgba(251, 146, 60, 0.4);
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;

    color: #fb923c;
}

.view-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.view-tab:disabled:hover {
    background: transparent;
    border-color: transparent;
    color: #999;
}

/* View Toggle Mini (for compare mode) */

.view-toggle-mini {
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;

    white-space: nowrap;
    gap: 4px;
}

.view-toggle-btn:hover {
    border-color: rgba(234, 91, 12, 0.4);
    background: rgba(234, 91, 12, 0.06);
    color: rgba(255, 255, 255, 0.9);
}

.view-toggle-btn.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.2), rgba(234, 91, 12, 0.08));
    border-color: rgba(234, 91, 12, 0.5);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 12px rgba(234, 91, 12, 0.15);
}

.view-toggle-btn svg {
    stroke: currentColor;
}

/* ============================================
   CONTEXT CONTROLS (Right side)
   ============================================ */

.context-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.context-control-group {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.6) 0%, rgba(45, 42, 38, 0.8) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.context-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.context-control-label {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #999;
    white-space: nowrap;
}

.context-control-select {
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(50, 50, 50, 0.7) 0%, rgba(40, 40, 40, 0.9) 100%);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.context-control-select:hover {
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.8) 0%, rgba(50, 50, 50, 0.95) 100%);
    border-color: rgba(234, 91, 12, 0.4);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.context-control-select:focus {
    outline: none;
    border-color: #ea5b0c;
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.25), 0 4px 16px rgba(234, 91, 12, 0.2);
}

/* Select Options Dropdown */

.context-control-select optgroup {
    background: rgba(26, 26, 26, 0.98);
    color: #ea5b0c;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.3px;
    padding: 8px 4px 4px 4px;
}

.context-control-select option {
    background: #1a1a1a;
    color: #fff;
    padding: 8px 12px;
    font-weight: 400;
}

.context-control-select option:hover {
    background: #2a2a2a;
}

.context-control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(50, 50, 50, 0.7) 0%, rgba(40, 40, 40, 0.9) 100%);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #ccc;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.context-control-btn:hover {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.08) 100%);
    border-color: rgba(234, 91, 12, 0.4);
    color: #ea5b0c;
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.context-control-btn.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.25) 0%, rgba(234, 91, 12, 0.15) 100%);
    border-color: #ea5b0c;
    color: #ea5b0c;
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.4), 0 4px 12px rgba(234, 91, 12, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.context-control-btn svg {
    stroke: currentColor;
}

/* Context Dropdown Menu */

.context-control--menu {
    position: relative;
}

.context-control--menu:hover .context-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.context-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.98) 100%);
    backdrop-filter: blur(60px) saturate(200%);
    -webkit-backdrop-filter: blur(60px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.2s ease;
    z-index: 1000;
}

/* Free Plot Advanced Dropdown - Corporate Design */

.free-plot-advanced-dropdown {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(13, 13, 13, 0.98) 100%);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 12px 48px rgba(234, 91, 12, 0.2), 0 0 0 1px rgba(234, 91, 12, 0.1);
}

.free-plot-advanced-dropdown label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 4px 0;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.free-plot-advanced-dropdown label:hover {
    background: rgba(234, 91, 12, 0.12);
    color: #ea5b0c;
}

.free-plot-advanced-dropdown input[type="checkbox"] {
    accent-color: #ea5b0c;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.free-plot-advanced-dropdown select {
    background: rgba(234, 91, 12, 0.08);
    border: 1px solid rgba(234, 91, 12, 0.25);
    color: #e2e8f0;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.free-plot-advanced-dropdown select:hover {
    background: rgba(234, 91, 12, 0.12);
    border-color: rgba(234, 91, 12, 0.35);
}

.free-plot-advanced-dropdown select:focus {
    background: rgba(234, 91, 12, 0.15);
    border-color: #ea5b0c;
    outline: none;
}

.context-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.context-dropdown-item:hover {
    background: rgba(234, 91, 12, 0.15);
    color: #ea5b0c;
}

.context-dropdown-item input[type="checkbox"] {
    accent-color: #ea5b0c;
    width: 16px;
    height: 16px;
}

.context-dropdown-item--small {
    font-size: 12px;
    padding: 8px 14px;
}

.context-dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
}

/* Row Height Select - Dark Background */

.context-dropdown-select {
    width: 100%;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
}

.context-dropdown-select:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
}

.context-dropdown-select:focus {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(234, 91, 12, 0.3);
    outline: none;
}

.context-dropdown-select option {
    background: #1a1a1a;
    color: rgba(255, 255, 255, 0.9);
}

/* Row Height Label */

.context-dropdown-label-small {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;

    margin-bottom: 6px;
}

/* Select Container */

.context-dropdown-item--select-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 14px;
}

/* Context Divider */

.context-divider {
    width: 1px;
    height: 24px;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.15) 20%,
            rgba(255, 255, 255, 0.15) 80%,
            transparent 100%);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ============================================
   SINGLE CELL MODE
   ============================================ */

.context-bar-single-cell {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Left: Back Button + Cell Info */

.cell-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Compare Mode: Back Button + Section Tabs */

.compare-left-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.compare-left-controls .section-tabs {
    margin-left: 0;
}

.back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: linear-gradient(135deg, rgba(50, 50, 50, 0.7) 0%, rgba(40, 40, 40, 0.9) 100%);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.back-button:hover {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.08) 100%);
    border-color: rgba(234, 91, 12, 0.4);
    color: #ea5b0c;
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateX(-2px);
}

.back-button svg {
    stroke: currentColor;
    transition: stroke 0.2s ease;
}

/* Cell Info Card - Detailed version with image */

.cell-info-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    min-width: 0;
    height: 48px;
}

.context-bar-cell-image {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.context-bar-cell-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain;
    display: block;
}

.cell-info-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.cell-name {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.cell-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1;
    font-weight: 500;
}

.cell-meta>span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cell-meta>span:not(:last-child)::after {
    content: '·';
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.3);
}

.country-flag {
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1;
}

.country-flag img,
.country-flag span {
    display: inline-block;
    vertical-align: middle;
}

.country-flag img {
    width: 14px;
    height: 11px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.meta-country,
.meta-year,
.meta-chemistry,
.meta-cathode {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Section Tabs */

.section-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.6) 0%, rgba(45, 42, 38, 0.8) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    overflow-x: auto;
    scrollbar-width: none;
    flex: 0 1 auto;
}

.section-tabs::-webkit-scrollbar {
    display: none;
}

.section-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.section-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
}

.section-tab.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.2), rgba(234, 91, 12, 0.08));
    border-color: rgba(234, 91, 12, 0.5);
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 12px rgba(234, 91, 12, 0.15);
}

/* Cell Actions */

.cell-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Compare button uses same styles as back-button */

.cell-actions .back-button {
    pointer-events: auto !important;
}

.cell-actions .back-button.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.2) 0%, rgba(234, 91, 12, 0.1) 100%);
    border-color: rgba(234, 91, 12, 0.5);
    color: #ea5b0c;
}

.cell-actions .back-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none !important;
}

/* ============================================
   BENCHMARKING MODE
   ============================================ */

.plot-type-switcher {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    height: 50px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.workflow-indicator {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.workflow-label {
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #ea5b0c;
    text-transform: uppercase;

}

/* Workflow Steps Indicator */

.workflow-steps-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
}

.step-dot-mini {
    position: relative;
    width: auto;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #999;
    transition: all 0.2s ease;
}

.step-dot-mini[data-active="true"] {
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
    border: 1px solid #ea5b0c;
    color: #fff;
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
    cursor: pointer;
}

.step-dot-mini[data-active="true"]:hover {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.2), rgba(234, 91, 12, 0.08));
    border-color: rgba(234, 91, 12, 0.8);
}

.step-dot-mini[data-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.step-dot-mini .step-name {
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.plot-tab {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #999;
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.plot-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(234, 91, 12, 0.2);
    color: #ccc;
}

.plot-tab.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
    border-color: #ea5b0c;
    color: #fff;
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
}

.plot-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.6) 0%, rgba(45, 42, 38, 0.8) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
    .context-bar-single-cell {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .cell-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .context-bar-inner {
        padding: 0 1rem;
        gap: 1rem;
    }

    .view-switcher,
    .plot-type-switcher {
        padding: 4px;
        gap: 2px;
    }

    .view-tab,
    .plot-tab,
    .section-tab {
        padding: 6px 12px;
        font-size: 12px;
    }

    .view-tab span,
    .back-button span {
        display: none;
    }

    .context-control-label {
        display: none;
    }

    .section-tabs {
        padding: 4px;
        gap: 4px;
    }

    .context-bar-single-cell {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0 1rem;
    }

    .cell-actions {
        justify-content: flex-start;
    }
}

/* ===== Radar Export Dropdown ===== */

.radar-export-dropdown {
    position: relative;
}

.radar-export-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.radar-export-trigger:hover {
    border-color: rgba(234, 91, 12, 0.4);
    background: rgba(234, 91, 12, 0.06);
    color: #ea5b0c;
}

.radar-export-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: linear-gradient(135deg, rgba(50, 50, 50, 0.95) 0%, rgba(40, 40, 40, 0.98) 100%);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 4px;
    z-index: 100;
}

.radar-export-menu--open {
    display: block;
}

.radar-export-menu__item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.radar-export-menu__item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.95);
}

.radar-export-menu__item--accent {
    color: #ea5b0c;
    font-weight: 500;
}

.radar-export-menu__item--accent:hover {
    background: rgba(234, 91, 12, 0.08);
    color: #ea5b0c;
}

.radar-export-menu__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 4px 8px;
}

/* Unified adaptive context bar for all modes (cells/benchmarking/single-cell) */

/**
 * Loading Spinner - Centralized Modern High-Tech Design
 * Used across entire application for consistent loading states
 * 
 * Usage:
 * <div class="loading-spinner">
 *   <div class="loading-spinner__animation">
 *     <div class="loading-spinner__ring"></div>
 *     <div class="loading-spinner__core"></div>
 *     <div class="loading-spinner__icon">
 *       <IconBattery size={28} />
 *     </div>
 *   </div>
 *   <div class="loading-spinner__text">Loading...</div>
 *   <div class="loading-spinner__subtext">Optional subtitle</div>
 * </div>
 */

/* ============================================================================
   BASE LOADING SPINNER CONTAINER
   ============================================================================ */

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    flex: 1;
    gap: 24px;
    padding: 48px;
    /* Override any old spinner animations */
    animation: none !important;
    transform: none !important;
}

.loading-spinner * {
    /* Prevent inheritance of old spinner animations */
    animation: inherit;
}

/* ============================================================================
   ANIMATION CONTAINER
   ============================================================================ */

.loading-spinner__animation {
    position: relative;
    width: 80px;
    height: 80px;
    /* Ensure no rotation on container */
    animation: none !important;
    transform: none !important;
}

/* Rotating outer ring */

.loading-spinner__ring {
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-top-color: #ea5b0c;
    border-right-color: #ea5b0c;
    border-radius: 50%;
    animation: spin-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Inner pulsing circle */

.loading-spinner__core {
    position: absolute;
    inset: 12px;
    background: radial-gradient(circle, rgba(234, 91, 12, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-core 1.5s ease-in-out infinite;
}

/* Center icon - NO ROTATION */

.loading-spinner__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ea5b0c;
    font-size: 28px;
    opacity: 0.9;
    /* Icon stays still */
    animation: none !important;
    transform: none !important;
}

/* ============================================================================
   TEXT ELEMENTS
   ============================================================================ */

.loading-spinner__text {
    font-family: 'Big John', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 500;

    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
}

.loading-spinner__subtext {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: -8px;
}

/* ============================================================================
   OPTIONAL PROGRESS BAR
   ============================================================================ */

.loading-spinner__progress {
    width: 200px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.loading-spinner__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ea5b0c 0%, #ff7733 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(234, 91, 12, 0.5);
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes spin-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse-core {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* ============================================================================
   SIZE VARIANTS
   ============================================================================ */

/* Compact size for sidebars and small spaces */

.loading-spinner--compact .loading-spinner__animation {
    width: 60px;
    height: 60px;
}

.loading-spinner--compact .loading-spinner__icon {
    font-size: 20px;
}

.loading-spinner--compact .loading-spinner__text {
    font-size: 14px;
}

.loading-spinner--compact {
    min-height: 200px;
    gap: 20px;
    padding: 40px 20px;
}

/* Small size for inline loading */

.loading-spinner--small .loading-spinner__animation {
    width: 40px;
    height: 40px;
}

.loading-spinner--small .loading-spinner__ring {
    border-width: 2px;
}

.loading-spinner--small .loading-spinner__core {
    inset: 8px;
}

.loading-spinner--small .loading-spinner__icon {
    font-size: 16px;
}

.loading-spinner--small {
    min-height: 100px;
    gap: 12px;
    padding: 20px;
}

/* ============================================================================
   CONTEXT-SPECIFIC OVERRIDES
   ============================================================================ */

/* Full width centering for view containers */

.cells-grid-view>.loading-spinner,
.cells-graph-view>.loading-spinner,
.cells-table-view>.loading-spinner {
    width: 100%;
}

/* Filter panel loading - compact variant */

.filter-panel-loading .loading-spinner__animation {
    width: 60px;
    height: 60px;
}

.filter-panel-loading .loading-spinner__text {
    font-size: 14px;
}

/* ============================================================================
   LIGHT THEME
   ============================================================================ */

body.light-theme .loading-spinner__ring,
:root[data-theme="light"] .loading-spinner__ring {
    border-top-color: #ea5b0c;
    border-right-color: #ea5b0c;
}

body.light-theme .loading-spinner__core,
:root[data-theme="light"] .loading-spinner__core {
    background: radial-gradient(circle, rgba(234, 91, 12, 0.2) 0%, transparent 70%);
}

body.light-theme .loading-spinner__icon,
:root[data-theme="light"] .loading-spinner__icon {
    color: #ea5b0c;
}

body.light-theme .loading-spinner__text,
:root[data-theme="light"] .loading-spinner__text {
    color: rgba(26, 26, 26, 0.9);
}

body.light-theme .loading-spinner__subtext,
:root[data-theme="light"] .loading-spinner__subtext {
    color: rgba(26, 26, 26, 0.6);
}

body.light-theme .loading-spinner__progress,
:root[data-theme="light"] .loading-spinner__progress {
    background: rgba(0, 0, 0, 0.08);
}

/* Centralized loading animations */

/* Compare Badge - Header component showing selected cells count */

.compare-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.3);
    position: relative;
}

.compare-badge:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.4);
}

.compare-badge:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(234, 91, 12, 0.3);
}

.compare-badge__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.compare-badge__label {
    font-weight: 500;
}

/* Pulse animation when items are added */

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.compare-badge--pulse {
    animation: badgePulse 0.3s ease;
}

/* Mobile responsive */

@media (max-width: 640px) {
    .compare-badge__label {
        display: none;
    }

    .compare-badge {
        padding: 0.5rem 0.75rem;
    }
}

/* Compare badge in header */

/* ========================================
   BREADCRUMB NAVIGATION
   ======================================== */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    animation: slideInFromTop 0.3s ease;
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.breadcrumb-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.breadcrumb-back:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateX(-2px);
}

.breadcrumb-back:active {
    transform: translateX(-4px);
}

.breadcrumb-trail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.breadcrumb-item {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.breadcrumb-item:not(.breadcrumb-current):hover {
    color: var(--primary-color);
    background: rgba(234, 91, 12, 0.1);
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 600;
    cursor: default;
}

.breadcrumb-separator {
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

/* ========================================
   FLIP ANIMATION SUPPORT
   ======================================== */

.cell-card-flip-source {
    /* Marker class for FLIP animation source */
    will-change: transform;
}

.cell-detail-flip-target {
    /* Marker class for FLIP animation target */
    will-change: transform;
}

/* Smooth transition for layout mode changes */

[data-layout-mode="cells-single"] .app-content {
    animation: fadeIn 0.4s ease;
}

[data-layout-mode="cells-grid"] .cells-grid {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ========================================
   CENTERED LAYOUT FOR SINGLE CELL
   ======================================== */

[data-layout-mode="cells-single"] .app-content {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 20px;
}

[data-layout-mode="cells-single"] .filter-panel {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .breadcrumb {
        padding: 0.75rem 1rem;
    }

    .breadcrumb-back {
        width: 32px;
        height: 32px;
    }

    .breadcrumb-item {
        font-size: 0.8125rem;
    }

    [data-layout-mode="cells-single"] .app-content {
        padding-top: 10px;
    }
}

/* ========================================
   LIGHT THEME
   ======================================== */

[data-theme="light"] .breadcrumb {
    background: rgba(0, 0, 0, 0.02);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .breadcrumb-back {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .breadcrumb-back:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* Breadcrumb navigation with back button */

/* Score Plot View - Chart + Weight Sliders Layout */

.score-plot-view {
    display: flex;
    flex-direction: row;
    /* Plot container + Settings drawer side-by-side */
    gap: 16px;
    width: 100%;
    min-height: calc(100vh - 160px);
    /* Match FilterPanel height */
    height: 100%;
    overflow: hidden;
}

/* Fullscreen mode: remove gap */

.score-plot-view.plot-fullscreen {
    gap: 0;
}

/* ============================================
   MAIN CHART AREA
   ============================================ */

.score-plot-main {
    flex: 1;
    /* Glassmorphism matching key-spec-card tiles */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 1rem;
    width: 100%;
    min-width: 0;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

/* ============================================
   WEIGHT CONTROLS SIDEBAR
   ============================================ */

.score-plot-controls {
    flex-shrink: 0;
    width: 320px;
    /* Glassmorphism matching key-spec-card tiles */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    overflow-y: auto;
}

.weight-sliders {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.weight-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.weight-header h3 {
    font-family: 'Big John', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0;
}

.weight-total {
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.weight-total.valid {
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
}

.weight-total.invalid {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
}

.error-icon {
    font-size: 0.875rem;
}

/* ============================================
   WEIGHT SLIDER
   ============================================ */

.weight-slider {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.slider-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.slider-icon {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
}

.slider-label {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.slider-value {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 45px;
    text-align: right;
}

.slider-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--slider-color, var(--primary-color));
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.slider-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--slider-color, var(--primary-color));
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.slider-input:hover::-webkit-slider-thumb {
    transform: scale(1.2);
    box-shadow: 0 3px 10px rgba(234, 91, 12, 0.5);
}

.slider-input:hover::-moz-range-thumb {
    transform: scale(1.2);
    box-shadow: 0 3px 10px rgba(234, 91, 12, 0.5);
}

.slider-input:active::-webkit-slider-thumb {
    transform: scale(1.1);
}

.slider-input:active::-moz-range-thumb {
    transform: scale(1.1);
}

/* Filled track effect */

.slider-input {
    background: linear-gradient(to right,
            var(--slider-color, var(--primary-color)) 0%,
            var(--slider-color, var(--primary-color)) var(--slider-percent, 50%),
            var(--bg-tertiary) var(--slider-percent, 50%),
            var(--bg-tertiary) 100%);
}

/* ============================================
   WARNING & RESET
   ============================================ */

.weight-warning {
    padding: 0.75rem 1rem;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 8px;
    color: #f87171;
    font-size: 0.875rem;
    text-align: center;
}

.btn-reset {
    padding: 0.75rem 1rem;
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reset:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .score-plot-view {
        flex-direction: column;
    }

    .score-plot-controls {
        width: 100%;
        max-height: 400px;
    }
}

@media (max-width: 768px) {
    .score-plot-view {
        padding: 1rem;
    }

    .score-plot-main,
    .score-plot-controls {
        padding: 1rem;
    }
}

/* Score plot with weight sliders */

/* My Plot View - Requirements Input + Chart Layout */

.my-plot-view {
    display: flex;
    flex-direction: row;
    /* Plot container + Settings drawer side-by-side */
    gap: 16px;
    width: 100%;
    min-height: calc(100vh - 160px);
    /* Match FilterPanel height */
    height: 100%;
    overflow: hidden;
}

/* Fullscreen mode: remove gap */

.my-plot-view.plot-fullscreen {
    gap: 0;
}

/* ============================================
   MAIN CHART AREA
   ============================================ */

.my-plot-main {
    flex: 1;
    /* Glassmorphism matching key-spec-card tiles */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 1rem;
    width: 100%;
    min-width: 0;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

/* ============================================
   REQUIREMENTS CONTROLS SIDEBAR
   ============================================ */

.my-plot-controls {
    flex-shrink: 0;
    width: 320px;
    /* Glassmorphism matching key-spec-card tiles */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    overflow-y: auto;
}

.requirement-inputs {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.requirement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.requirement-header h3 {
    font-family: 'Big John', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0;
}

.matching-badge {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
}

.requirement-info {
    padding: 1rem;
    background: rgba(234, 91, 12, 0.05);
    border-left: 3px solid var(--primary-color);
    border-radius: 6px;
}

.requirement-info p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ============================================
   INPUT GROUPS
   ============================================ */

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.input-icon {
    font-size: 1.125rem;
    width: 24px;
    text-align: center;
}

.input-label {
    flex: 1;
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.25rem 0.75rem;
    transition: all 0.2s ease;
}

.input-with-unit:focus-within {
    border-color: var(--primary-color);
    background: var(--bg-primary);
}

.requirement-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 0.5rem 0;
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    width: 100%;
}

.requirement-input::-webkit-inner-spin-button,
.requirement-input::-webkit-outer-spin-button {
    opacity: 1;
    height: 24px;
}

.input-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* ============================================
   REQUIREMENT ZONE INFO
   ============================================ */

.requirement-zone {
    padding: 1rem;
    background: rgba(74, 222, 128, 0.05);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 8px;
}

.zone-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #4ade80;
    margin-bottom: 0.5rem;
}

.zone-icon {
    font-size: 1.125rem;
}

.zone-description {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-add-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.3);
}

.btn-add-all:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.4);
}

.btn-add-all:active:not(:disabled) {
    transform: translateY(0);
}

.btn-add-all:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-icon {
    font-size: 1.125rem;
    font-weight: bold;
}

.btn-reset {
    padding: 0.75rem 1rem;
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reset:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .my-plot-view {
        flex-direction: column;
    }

    .my-plot-controls {
        width: 100%;
        max-height: 500px;
    }
}

@media (max-width: 768px) {
    .my-plot-view {
        padding: 1rem;
    }

    .my-plot-main,
    .my-plot-controls {
        padding: 1rem;
    }
}

/* My plot with requirements input */

/* ========================================
   FREE PLOT - Fully Customizable Analysis
   ======================================== */

.free-plot-view {
    display: flex;
    gap: 1rem;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 140px);
}

.free-plot-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Glassmorphism matching key-spec-card tiles */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 1rem;
    width: 100%;
    min-height: 500px;
}

/* ========================================
   PLOT CONTROLS
   ======================================== */

.free-plot-controls {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}

.plot-controls {
    /* Glassmorphism matching key-spec-card tiles */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}

.controls-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ========================================
   CONTROL SECTIONS
   ======================================== */

.control-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.control-section h4 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;

    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.control-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.control-icon {
    font-size: 1rem;
}

/* Only apply to control items in free plot, not global controls */

.control-item .control-label {
    flex: 1;
}

.control-value {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.8125rem;
}

/* ========================================
   SELECT INPUTS
   ======================================== */

.control-select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.control-select:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.control-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

/* ========================================
   SLIDER INPUT
   ======================================== */

.control-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0.1) 0%,
            var(--primary-color) 100%);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.control-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary-color);
    border: 2px solid var(--bg-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.4);
}

.control-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.6);
}

.control-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary-color);
    border: 2px solid var(--bg-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.4);
}

.control-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.6);
}

/* ========================================
   COLOR LEGEND
   ======================================== */

.color-legend {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.legend-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Gradient legend (for year) */

.legend-gradient {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gradient-bar {
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(to right,
            hsl(210, 70%, 60%),
            hsl(30, 70%, 60%));
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.gradient-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ========================================
   RESET BUTTON
   ======================================== */

.btn-reset {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reset:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.btn-reset:active {
    transform: translateY(0);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .free-plot-view {
        flex-direction: column;
    }

    .free-plot-controls {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .control-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .control-section h4 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .free-plot-view {
        padding: 1rem;
        gap: 1rem;
    }

    .free-plot-main {
        min-height: 400px;
        padding: 1rem;
    }

    .control-section {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   LIGHT THEME
   ======================================== */

[data-theme="light"] .free-plot-main,
[data-theme="light"] .plot-controls {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .control-select {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .control-select:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .control-slider {
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.1) 0%,
            var(--primary-color) 100%);
}

[data-theme="light"] .legend-color,
[data-theme="light"] .gradient-bar {
    border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .btn-reset {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .btn-reset:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .control-section h4 {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* Free plot with customizable axes */

/* Enhanced KPI Grid & Detail Panel CSS - Liquid Glass Morphing Design */

/* ================================
   KPI GRID - ENHANCED
================================= */

.kpi-grid-enhanced {
  display: contents;  /* Let parent control layout */
}

.kpi-tile-enhanced {
  position: relative;
  perspective: 1000px;
  height: 100%;
  min-height: 200px;
}

/* Flipper Container */

.kpi-tile-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.kpi-tile-enhanced.flipped .kpi-tile-flipper {
  transform: rotateY(180deg);
}

/* Front and Back Sides */

.kpi-tile-front,
.kpi-tile-back {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 24px;
  background: linear-gradient(135deg, rgba(50, 48, 45, 0.8) 0%, rgba(40, 38, 35, 0.95) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(234, 91, 12, 0.12);
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kpi-tile-front {
  transform: rotateY(0deg);
}

.kpi-tile-back {
  transform: rotateY(180deg);
  cursor: default;
}

.kpi-tile-front:hover {
  transform: translateY(-6px) scale(1.02) rotateY(0deg);
  border-color: rgba(234, 91, 12, 0.3);
  box-shadow: 
    0 12px 40px rgba(234, 91, 12, 0.5),
    0 0 0 1px rgba(234, 91, 12, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.kpi-tile-front:active {
  transform: translateY(-4px) scale(1.01) rotateY(0deg);
}

.kpi-tile-enhanced.active .kpi-tile-front,
.kpi-tile-enhanced.active .kpi-tile-front,
.kpi-tile-enhanced.active .kpi-tile-back {
  border-color: rgba(234, 91, 12, 0.6);
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.25) 0%, rgba(234, 91, 12, 0.12) 100%);
  box-shadow: 
    0 0 30px rgba(234, 91, 12, 0.5),
    0 0 60px rgba(234, 91, 12, 0.2),
    inset 0 1px 0 rgba(234, 91, 12, 0.3);
}

/* Radar Chart Hover Highlight */

.kpi-tile-enhanced.radar-hovered .kpi-tile-front {
  transform: scale(1.05);
  border-color: rgba(234, 91, 12, 0.5);
  box-shadow: 
    0 8px 32px rgba(234, 91, 12, 0.4),
    0 0 60px rgba(234, 91, 12, 0.25),
    0 0 0 2px rgba(234, 91, 12, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 10;
}

/* Flip Button - RUND */

.tile-flip-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(234, 91, 12, 0.2);
  border: 1px solid rgba(234, 91, 12, 0.3);
  border-radius: 50%;
  color: #ea5b0c;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(234, 91, 12, 0.2);
}

.tile-flip-btn:hover {
  background: rgba(234, 91, 12, 0.4);
  border-color: rgba(234, 91, 12, 0.6);
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(234, 91, 12, 0.4);
}

.tile-flip-back {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Tile Definition (Back Side) */

.kpi-tile-definition {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.kpi-tile-definition h4 {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: #999;
  margin-bottom: 12px;
  text-transform: uppercase;
  margin-top: 0;
}

.kpi-tile-definition p {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #ccc;
}

/* Tile Icon */

.kpi-tile-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand);
  opacity: 0.9;
}

.kpi-tile-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 2;
}

.kpi-tile-enhanced:hover .kpi-tile-icon {
  opacity: 1;
  transform: scale(1.1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kpi-tile-enhanced.active .kpi-tile-icon {
  color: #fff;
  opacity: 1;
}

/* Tile Label */

.kpi-tile-label {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 400;
}

/* Tile Value */

.kpi-tile-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}

.kpi-value-number {
  font-family: 'Big John', sans-serif;
  font-size: 32px;
  color: #fff;
  font-weight: 400;
  line-height: 1;
}

.kpi-tile-unit {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #999;
  font-weight: 500;
}

/* Tile Rank Info */

.kpi-tile-rank {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(45, 45, 45, 0.5);
  border-radius: 8px;
  font-size: 11px;
  margin-top: auto;
}

.kpi-tile-trend {
  font-size: 14px;
}

/* Light Theme - Rank Text */

[data-theme="light"] .kpi-tile-rank {
  background-color: transparent;
}

.kpi-tile-percentile {
  color: #bbb;
  
}

/* Light Theme - Percentile Text */

[data-theme="light"] .kpi-tile-percentile {
  color: #666;
}

/* Hover Hint */

.kpi-tile-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kpi-tile-enhanced:hover .kpi-tile-hint {
  opacity: 1;
}

/* Active Indicator */

.kpi-tile-active-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #ea5b0c;
  font-size: 18px;
  animation: pulse 2s infinite;
}

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

/* ================================
   DETAIL PANEL
================================= */

.detail-panel {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, rgba(60, 58, 55, 0.8) 0%, rgba(50, 48, 45, 0.95) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(234, 91, 12, 0.15);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  transform-origin: top left;
  will-change: transform;
  visibility: visible;
  opacity: 1;
}

/* Panel Header */

.detail-panel-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(234, 91, 12, 0.15);
}

.detail-back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 8px;
  background: rgba(50, 50, 50, 0.5);
  border: 1px solid rgba(234, 91, 12, 0.2);
  border-radius: 10px;
  color: #ea5b0c;
  font-family: 'Big John', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.detail-back-btn:hover {
  background: rgba(234, 91, 12, 0.15);
  border-color: rgba(234, 91, 12, 0.4);
  transform: translateX(-4px);
}

.detail-back-icon {
  font-size: 16px;
}

.detail-panel-title {
  flex: 1;
  font-family: 'Big John', sans-serif;
  font-size: 24px;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  
  margin: 0;
}

.detail-panel-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.detail-value-number {
  font-family: 'Big John', sans-serif;
  font-size: 36px;
  color: #ea5b0c;
  font-weight: 400;
}

.detail-value-unit {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  color: #999;
}

/* ================================
   DETAIL TABS
================================= */

.detail-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px;
  background: rgba(45, 45, 45, 0.6);
  border-radius: 12px;
}

.detail-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px 12px;
  background: transparent;
  border: 1px solid rgba(234, 91, 12, 0.1);
  border-radius: 8px;
  color: #999;
  font-family: 'Big John', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.detail-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.18), rgba(234, 91, 12, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.detail-tab:hover {
  background: rgba(234, 91, 12, 0.08);
  border-color: rgba(234, 91, 12, 0.3);
  color: #ccc;
  transform: translateY(-2px);
}

.detail-tab.active {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.35), rgba(234, 91, 12, 0.22));
  border-color: rgba(234, 91, 12, 0.5);
  color: #ea5b0c;
  box-shadow: 
    0 4px 16px rgba(234, 91, 12, 0.3),
    0 0 24px rgba(234, 91, 12, 0.2);
}

.detail-tab.active::before {
  opacity: 1;
}

.detail-tab-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.3s ease, fill 0.3s ease;
}

.detail-tab:hover .detail-tab-icon {
  opacity: 0.9;
}

.detail-tab.active .detail-tab-icon {
  opacity: 1;
}

.detail-tab-label {
  flex: 1;
}

/* ================================
   DETAIL CONTENT
================================= */

/* ================================
   DETAIL CONTENT
================================= */

.detail-content {
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Definition View */

.definition-view h4,
.trend-view h4,
.distribution-view h4,
.methodology-view h4 {
  font-family: 'Big John', sans-serif;
  font-size: 18px;
  color: #ea5b0c;
  text-transform: uppercase;
  
  margin-bottom: 12px;
  font-weight: 400;
}

.definition-view h5,
.trend-view h5,
.distribution-view h5,
.methodology-view h5 {
  font-family: 'Big John', sans-serif;
  font-size: 14px;
  color: #ccc;
  text-transform: uppercase;
  
  margin: 24px 0 12px;
  font-weight: 400;
}

.definition-description,
.trend-view p,
.distribution-view p,
.methodology-view p {
  font-size: 14px;
  color: #999;
  line-height: 1.6;
  margin-bottom: 16px;
}

.definition-formula {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(45, 45, 45, 0.6);
  border: 1px solid rgba(234, 91, 12, 0.2);
  border-radius: 12px;
  margin: 16px 0;
}

.formula-label {
  font-family: 'Big John', sans-serif;
  font-size: 12px;
  color: #ea5b0c;
  text-transform: uppercase;
  
}

.formula-code {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  color: #fff;
  background: rgba(234, 91, 12, 0.1);
  padding: 8px 12px;
  border-radius: 6px;
}

.definition-details ul,
.methodology-protocol ol {
  list-style-position: inside;
  padding-left: 0;
}

.definition-details li,
.methodology-protocol li,
.trend-insights li,
.methodology-standards li {
  font-size: 13px;
  color: #bbb;
  line-height: 1.8;
  margin-bottom: 8px;
}

/* Values Table */

.definition-values table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.definition-values th,
.definition-values td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(234, 91, 12, 0.1);
}

.definition-values th {
  font-family: 'Big John', sans-serif;
  font-size: 11px;
  color: #ea5b0c;
  text-transform: uppercase;
  
  font-weight: 400;
}

.definition-values td {
  font-size: 14px;
  color: #ccc;
}

/* Chart Placeholders */

.trend-chart-placeholder,
.distribution-chart-placeholder {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 45, 45, 0.4);
  border: 1px dashed rgba(234, 91, 12, 0.3);
  border-radius: 16px;
  margin: 20px 0;
}

.placeholder-content {
  text-align: center;
}

.placeholder-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
  filter: grayscale(80%);
  opacity: 0.6;
}

.placeholder-content p {
  font-family: 'Big John', sans-serif;
  font-size: 14px;
  color: #999;
  text-transform: uppercase;
  
  margin-bottom: 4px;
}

.placeholder-content small {
  font-size: 11px;
  color: #666;
}

/* Stats Grid */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.stat-card {
  padding: 16px;
  background: rgba(45, 45, 45, 0.5);
  border: 1px solid rgba(234, 91, 12, 0.15);
  border-radius: 12px;
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  
  margin-bottom: 8px;
}

.stat-value {
  display: block;
  font-family: 'Big John', sans-serif;
  font-size: 24px;
  color: #ea5b0c;
  font-weight: 400;
}

/* ================================
   KEYBOARD SHORTCUTS
================================= */

kbd {
  display: inline-block;
  padding: 4px 8px;
  background: rgba(234, 91, 12, 0.2);
  border: 1px solid rgba(234, 91, 12, 0.4);
  border-radius: 4px;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  color: #ea5b0c;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Help Overlay */

.keyboard-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(80px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

.keyboard-help-dialog {
  max-width: 600px;
  width: 90%;
  padding: 32px;
  background: linear-gradient(135deg, rgba(60, 58, 55, 0.98) 0%, rgba(50, 48, 45, 0.99) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(234, 91, 12, 0.3);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.keyboard-help-dialog h3 {
  font-family: 'Big John', sans-serif;
  font-size: 24px;
  color: #ea5b0c;
  text-transform: uppercase;
  
  margin-bottom: 24px;
  font-weight: 400;
}

.shortcut-section {
  margin-bottom: 24px;
}

.shortcut-section h4 {
  font-family: 'Big John', sans-serif;
  font-size: 14px;
  color: #ccc;
  text-transform: uppercase;
  
  margin-bottom: 12px;
  font-weight: 400;
}

.shortcut-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(234, 91, 12, 0.1);
}

.shortcut-row:last-child {
  border-bottom: none;
}

.shortcut-row span {
  flex: 1;
  font-size: 13px;
  color: #bbb;
}

.keyboard-help-close {
  width: 100%;
  padding: 12px 24px;
  margin-top: 24px;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.42), rgba(234, 91, 12, 0.32));
  border: 1px solid rgba(234, 91, 12, 0.5);
  border-radius: 10px;
  color: #ea5b0c;
  font-family: 'Big John', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  
  cursor: pointer;
  transition: all 0.3s ease;
}

.keyboard-help-close:hover {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.5), rgba(234, 91, 12, 0.4));
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(234, 91, 12, 0.4);
}

/* LIGHT THEME OVERRIDES
================================= */

[data-theme="light"] .kpi-tile-front,
[data-theme="light"] .kpi-tile-back {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 250, 250, 0.98) 100%);
  border: 1px solid rgba(234, 91, 12, 0.15);
  box-shadow: 
    0 2px 12px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .kpi-tile-front:hover {
  border-color: rgba(234, 91, 12, 0.4);
  box-shadow: 
    0 8px 24px rgba(234, 91, 12, 0.15),
    0 0 30px rgba(234, 91, 12, 0.08),
    0 0 0 1px rgba(234, 91, 12, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

[data-theme="light"] .kpi-tile-enhanced.active .kpi-tile-front,
[data-theme="light"] .kpi-tile-enhanced.active .kpi-tile-back {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.08) 0%, rgba(234, 91, 12, 0.04) 100%);
  border-color: rgba(234, 91, 12, 0.5);
  box-shadow: 
    0 0 20px rgba(234, 91, 12, 0.2),
    0 0 40px rgba(234, 91, 12, 0.1),
    inset 0 1px 0 rgba(234, 91, 12, 0.15);
}

[data-theme="light"] .kpi-tile-label {
  color: #666;
}

[data-theme="light"] .kpi-value-number {
  color: #1a1a1a;
}

[data-theme="light"] .kpi-tile-hint {
  color: #999;
}

[data-theme="light"] .tile-flip-btn {
  background: rgba(234, 91, 12, 0.1);
  border-color: rgba(234, 91, 12, 0.2);
  color: #ea5b0c;
}

[data-theme="light"] .tile-flip-btn:hover {
  background: rgba(234, 91, 12, 0.15);
  border-color: rgba(234, 91, 12, 0.4);
}

/* Detail Panel */

[data-theme="light"] .detail-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 250, 0.99) 100%);
  border: 1px solid rgba(234, 91, 12, 0.2);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .detail-panel-header {
  border-bottom: 1px solid rgba(234, 91, 12, 0.2);
}

[data-theme="light"] .detail-panel-title {
  color: #1a1a1a;
}

[data-theme="light"] .detail-panel-subtitle {
  color: #666;
}

[data-theme="light"] .detail-value-number {
  color: #1a1a1a;
}

/* Detail Tabs Container */

[data-theme="light"] .detail-tabs {
  background: rgba(245, 245, 245, 0.6);
  border: 1px solid #e8e8e8;
}

[data-theme="light"] .detail-tab {
  background: #f5f5f5;
  border-color: #e0e0e0;
  color: #666;
}

[data-theme="light"] .detail-tab:hover {
  background: rgba(234, 91, 12, 0.08);
  border-color: rgba(234, 91, 12, 0.3);
  color: #1a1a1a;
}

[data-theme="light"] .detail-tab.active {
  background: rgba(234, 91, 12, 0.12);
  border-color: rgba(234, 91, 12, 0.5);
  color: #1a1a1a;
}

/* Tab Icons - Ensure they're visible in light theme */

[data-theme="light"] .detail-tab svg {
  opacity: 0.7;
}

[data-theme="light"] .detail-tab:hover svg {
  opacity: 0.9;
}

[data-theme="light"] .detail-tab.active svg {
  opacity: 1;
  fill: #ea5b0c;
}

/* Definition Tabs */

[data-theme="light"] .definition-tabs {
  background: rgba(245, 245, 245, 0.6);
  border: 1px solid #e8e8e8;
}

[data-theme="light"] .definition-tabs button {
  background: #f5f5f5;
  border-color: #e0e0e0;
  color: #666;
}

[data-theme="light"] .definition-tabs button:hover {
  background: rgba(234, 91, 12, 0.08);
  border-color: rgba(234, 91, 12, 0.3);
  color: #1a1a1a;
}

[data-theme="light"] .definition-tabs button.active {
  background: rgba(234, 91, 12, 0.12);
  border-color: rgba(234, 91, 12, 0.5);
  color: #1a1a1a;
}

/* Definition Values Table */

[data-theme="light"] .definition-values table {
  background: #ffffff;
}

[data-theme="light"] .definition-values th,
[data-theme="light"] .definition-values td {
  border-bottom-color: rgba(234, 91, 12, 0.15);
}

[data-theme="light"] .definition-values th {
  color: #ea5b0c;
}

[data-theme="light"] .definition-values td {
  color: #4a4a4a;
}

[data-theme="light"] .detail-section-title {
  color: #1a1a1a;
}

[data-theme="light"] .detail-section-text {
  color: #4a4a4a;
}

[data-theme="light"] .stat-card {
  background: #f8f8f8;
  border-color: #ebebeb;
}

[data-theme="light"] .stat-card:hover {
  background: #ffffff;
  border-color: rgba(234, 91, 12, 0.2);
}

[data-theme="light"] .stat-label {
  color: #666;
}

[data-theme="light"] .stat-value {
  color: #1a1a1a;
}

/* ================================
   RESPONSIVE
================================= */

@media (max-width: 768px) {
  .kpi-grid-enhanced {
    grid-template-columns: 1fr;
  }
  
  .detail-tabs {
    flex-wrap: wrap;
  }
  
  .detail-tab {
    flex: 1 1 calc(50% - 4px);
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Info Button Component */

.info-button-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.6);
}

.info-button:hover {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.4);
    color: #ea5b0c;
    transform: scale(1.1);
}

.info-button svg {
    width: 14px;
    height: 14px;
}

/* Tooltip */

.info-tooltip {
    position: absolute;
    z-index: 10000;
    min-width: 300px;
    max-width: 500px;
    padding: 16px;
    background: rgba(20, 20, 20, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: fadeInTooltip 0.2s ease;
}

@keyframes fadeInTooltip {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Positioning variants */

.info-tooltip-bottom {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.info-tooltip-top {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

.info-tooltip-right {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

.info-tooltip-left {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}

/* Tooltip arrow (optional) */

.info-tooltip-bottom::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(234, 91, 12, 0.3);
}

.info-tooltip-top::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(234, 91, 12, 0.3);
}

.info-tooltip-title {
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #ea5b0c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(234, 91, 12, 0.2);
}

.info-tooltip-content {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.info-tooltip-content p {
    margin: 0 0 10px 0;
}

.info-tooltip-content p:last-child {
    margin-bottom: 0;
}

.info-tooltip-content strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

/* Responsive adjustments */

@media (max-width: 768px) {
    .info-tooltip {
        min-width: 250px;
        max-width: calc(100vw - 40px);
    }
}

/* Info button with tooltip for definitions */

/* Premium KPI Grid & Detail View Styles */

/* App Top Bar */

.app-topbar {
  background: #0d0d0d;
  border-bottom: 1px solid #2a2a2a;
  padding: 0 40px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-content {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 60px;
}

.topbar-logo {
  height: 28px;
}

.topbar-logo img {
  height: 100%;
}

.topbar-link {
  background: transparent;
  border: none;
  color: #ea5b0c;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.2s;
}

.topbar-link:hover {
  background: rgba(234, 91, 12, 0.1);
}

.app-content {
  min-height: calc(100vh - 60px);
  background: linear-gradient(135deg, rgba(50, 48, 45, 0.6) 0%, rgba(45, 42, 38, 0.8) 100%);
  /* backdrop-filter removed — it creates a containing block that breaks
     position:fixed for descendants like UnifiedContextBar */
}

/* Premium KPI Grid */

.kpi-grid-premium {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  max-width: 1600px;
}

.kpi-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

/* Detail Layout with Sidebar */

.kpi-detail-layout {
  display: block;
  max-width: 1600px;
  position: relative;
}

.kpi-sidebar {
  position: absolute;
  left: calc(50% - var(--container-w / 2) - 180px - 20px);
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 140px;
  margin-left: -70px;
}

.kpi-sidebar-tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kpi-mini-tile {
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.7) 0%, rgba(39, 39, 39, 0.9) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateX(-120px);
}

.kpi-mini-tile:nth-child(1) {
  animation: flyIn 0.5s ease-out 0.1s forwards;
}

.kpi-mini-tile:nth-child(2) {
  animation: flyIn 0.5s ease-out 0.2s forwards;
}

.kpi-mini-tile:nth-child(3) {
  animation: flyIn 0.5s ease-out 0.3s forwards;
}

.kpi-mini-tile:nth-child(4) {
  animation: flyIn 0.5s ease-out 0.4s forwards;
}

.kpi-mini-tile:nth-child(5) {
  animation: flyIn 0.5s ease-out 0.5s forwards;
}

.kpi-mini-tile:nth-child(6) {
  animation: flyIn 0.5s ease-out 0.6s forwards;
}

.kpi-mini-tile:nth-child(7) {
  animation: flyIn 0.5s ease-out 0.7s forwards;
}

.kpi-mini-tile:nth-child(8) {
  animation: flyIn 0.5s ease-out 0.8s forwards;
}

.kpi-mini-tile:nth-child(9) {
  animation: flyIn 0.5s ease-out 0.9s forwards;
}

.kpi-mini-tile:nth-child(10) {
  animation: flyIn 0.5s ease-out 1.0s forwards;
}

@keyframes flyIn {
  from {
    opacity: 0;
    transform: translateX(-120px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.kpi-mini-tile:hover {
  transform: translateX(20px) scale(1.05);
  box-shadow: 0 6px 20px rgba(234, 91, 12, 0.5);
  border-color: rgba(234, 91, 12, 0.4);
}

.kpi-mini-tile.active {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.3), rgba(234, 91, 12, 0.1));
  border-color: #ea5b0c;
  box-shadow: 0 6px 24px rgba(234, 91, 12, 0.8),
    300px 0 100px rgba(234, 91, 12, 0.15);
  transform: translateX(20px) scale(1.25);
  padding: 12px 14px;
  width: 180px;
  margin-left: -40px;
}

.kpi-mini-label {
  font-family: 'Big John', sans-serif;
  font-size: 9px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 2px;
  text-transform: uppercase;
  
}

.kpi-mini-tile.active .kpi-mini-label {
  font-size: 11px;
  margin-bottom: 4px;
}

.kpi-mini-value {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-mini-tile.active .kpi-mini-value {
  font-size: 18px;
  white-space: normal;
  overflow: visible;
}

.kpi-detail-content {
  min-height: 600px;
  margin-left: 100px;
}

.kpi-tile {
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.7) 0%, rgba(39, 39, 39, 0.9) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.kpi-tile:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 28px rgba(234, 91, 12, 0.6), 0 0 0 1px rgba(234, 91, 12, 0.4);
  border-color: rgba(234, 91, 12, 0.6);
  background: linear-gradient(135deg, rgba(60, 60, 60, 0.8) 0%, rgba(45, 45, 45, 1) 100%);
}

.kpi-tile-label {
  font-family: 'Big John', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.kpi-tile-value {
  font-family: 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #fff;
}

.kpi-tile-unit {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
}

.chemistry-value {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 18px;
}

.chemistry-vs {
  font-size: 13px;
  color: #aaa;
  font-weight: 400;
  margin: 2px 0;
}

.kpi-radar {
  background: #1a1a1a;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Detail View */

.detail-view {
  width: 100%;
  background: #1f1f1f;
  animation: slideInRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.detail-header {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background: #101010;
  border-bottom: 1px solid #2a2a2a;
}

.detail-header h2 {
  font-size: 16px;
  color: #fff;
  margin: 0;
}

.btn-back-detail {
  background: #2a2a2a;
  border: 1px solid #343434;
  color: #ddd;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.btn-back-detail:hover {
  background: #ea5b0c;
  border-color: #ea5b0c;
  color: #fff;
}

.detail-controls {
  display: inline-flex;
  background: #222;
  border: 1px solid #343434;
  border-radius: 999px;
  padding: 3px;
  gap: 0;
  position: relative;
}

.detail-controls::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  width: calc(50% - 3px);
  background: #ea5b0c;
  border-radius: 999px;
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
}

.detail-controls:has(.chip:nth-child(1).active)::before {
  left: 3px;
}

.detail-controls:has(.chip:nth-child(2).active)::before {
  left: calc(50%);
}

.detail-controls .chip {
  padding: 6px 14px;
  background: transparent;
  border: none;
  color: #cfd2d6;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
}

.detail-controls .chip.active {
  color: #fff;
}

.detail-body {
  padding: 24px;
  position: relative;
}

.plots-2d {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.plot-container h3,
.plot-3d h3 {
  color: #f2f2f2;
  margin-bottom: 12px;
}

.plot {
  height: 400px;
  background: #101010;
  border-radius: 12px;
  overflow: hidden;
}

.plot .js-plotly-plot .plotly .main-svg {
  border-radius: 12px;
}

@media (max-width: 1400px) {
  .kpi-tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Global Controls in Topbar */

.global-controls {
  display: flex;
  gap: 20px;
  align-items: center;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-group label {
  font-size: 13px;
  color: #aaa;
}

.chip-group {
  display: inline-flex;
  background: #222;
  border: 1px solid #343434;
  border-radius: 999px;
  padding: 3px;
  gap: 0;
  position: relative;
}

.chip-group::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  background: #ea5b0c;
  border-radius: 999px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
}

/* 2-button groups (2D/3D) */

.chip-group:has(.chip:nth-child(2):last-child)::before {
  width: calc(50% - 3px);
}

.chip-group:has(.chip:nth-child(1).active):has(.chip:nth-child(2):last-child)::before {
  left: 3px;
}

.chip-group:has(.chip:nth-child(2).active:last-child)::before {
  left: calc(50%);
}

/* 3-button groups (abs/grav/vol, energy/capacity) */

.chip-group:has(.chip:nth-child(3):last-child)::before {
  width: calc(33.333% - 2px);
}

.chip-group:has(.chip:nth-child(1).active):has(.chip:nth-child(3):last-child)::before {
  left: 3px;
}

.chip-group:has(.chip:nth-child(2).active):has(.chip:nth-child(3):last-child)::before {
  left: calc(33.333% + 1px);
}

.chip-group:has(.chip:nth-child(3).active:last-child)::before {
  left: calc(66.666% - 1px);
}

.chip-group .chip {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: #cfd2d6;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
}

.chip-group .chip.active {
  color: #fff;
}

.chip-group .chip:hover:not(.active) {
  color: #fff;
}

.spacer {
  flex: 1;
}

/* Cell Explorer Page */

.explorer-page {
  padding: 40px;
  max-width: var(--container-w);
  margin: 0 auto;
}

.explorer-header {
  margin-bottom: 40px;
}

.explorer-header h1 {
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.explorer-header p {
  font-size: 16px;
  color: #aaa;
}

.cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
}

/* cell-card styles moved to explorer.css - using key-spec-card glassmorphism design */

/* .cell-image styles moved to unified-context-bar.css */

.cell-placeholder {
  color: #555;
  font-size: 14px;
}

.cell-info {
  padding: 16px;
  flex: 1;
}

.cell-id {
  font-size: 18px;
  font-weight: 600;
  color: #ea5b0c;
  margin-bottom: 8px;
}

.cell-manufacturer {
  font-size: 13px;
  color: #aaa;
  margin-bottom: 4px;
}

.cell-name {
  font-size: 15px;
  color: #ddd;
  font-weight: 500;
}

.cell-loading {
  font-size: 13px;
  color: #777;
  font-style: italic;
}

.btn-cell-details {
  margin: 0 16px 16px 16px;
  padding: 10px 16px;
  background: #ea5b0c;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cell-details:hover:not(:disabled) {
  background: #ff6b1a;
  transform: translateY(-1px);
}

.btn-cell-details:disabled {
  background: #555;
  color: #888;
  cursor: not-allowed;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #2a2a2a;
}

.pagination-btn {
  padding: 10px 20px;
  background: #2a2a2a;
  border: 1px solid #343434;
  border-radius: 8px;
  color: #ddd;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
  background: #ea5b0c;
  border-color: #ea5b0c;
  color: #fff;
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-info {
  color: #aaa;
  font-size: 14px;
}

@media (max-width: 1100px) {
  .kpi-tiles {
    grid-template-columns: repeat(3, 1fr);
  }

  .kpi-grid-premium {
    grid-template-columns: 1fr;
  }

  .kpi-detail-layout {
    grid-template-columns: 1fr;
  }

  .kpi-sidebar {
    position: relative;
    flex-direction: row;
    overflow-x: auto;
  }

  .kpi-sidebar-tiles {
    flex-direction: row;
    min-width: max-content;
  }

  .kpi-mini-tile {
    min-width: 140px;
  }

  .global-controls {
    flex-direction: column;
    gap: 8px;
  }
}

/* Chemistry Diagram Component Styles */

/* Used by ChemistryDiagram.jsx in FactSheet and Chemical sections */

.chemistry-diagram-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 10px;
    min-height: 50px;
}

.chemistry-diagram-compact .electrode-with-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.chemistry-diagram-compact .electrode {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.chemistry-diagram-compact .electrode.anode {
    background: linear-gradient(135deg, #0d7c99, #0a5f75);
}

.chemistry-diagram-compact .electrode.cathode {
    background: linear-gradient(135deg, #ea5b0c, #c74a09);
}

.chemistry-diagram-compact .electrode-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    text-align: center;
    max-width: 90px;
    line-height: 1.2;
}

.chemistry-diagram-compact .ion-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
}

.chemistry-diagram-compact .ion-flow svg {
    width: 180px;
    height: 60px;
}

.chemistry-diagram-compact .li-ion-label {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 700;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Header mit Combine/Split Button */

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 20px 0;
  background: transparent;
}

.detail-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-title {
  font-family: 'Big John', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
  
}

.detail-subtitle {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* 2D Plots Side-by-Side - Direkt ohne Container */

.detail-2d-plots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  min-height: 500px;
  animation: fadeIn 0.5s ease-out;
}

/* 3D Plot Full Width - Direkt ohne Container */

.detail-3d-plot {
  width: 100%;
  min-height: 500px;
  margin-top: 20px;
  animation: fadeIn 0.5s ease-out 0.3s backwards;
}

.detail-merge-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px 10px;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.05) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(234, 91, 12, 0.3);
  border-radius: 16px;
  color: #fff;
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
    0 4px 16px rgba(234, 91, 12, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
}

.detail-merge-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.25) 0%, rgba(234, 91, 12, 0.15) 100%);
  border-color: rgba(234, 91, 12, 0.5);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 24px rgba(234, 91, 12, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.detail-merge-btn:active:not(:disabled) {
  transform: translateY(0);
}

.detail-merge-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.detail-merge-btn.morphing {
  pointer-events: none;
}

.btn-icon {
  font-size: 18px;
  line-height: 1;
}

/* Individual Plot Cards - Liquid Glass */

.detail-plot-card {
  position: relative;
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.7) 0%, rgba(39, 39, 39, 0.9) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border-radius: 16px;
  border: 1px solid rgba(234, 91, 12, 0.1);
  padding: 16px;
  box-shadow: 
    0 2px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.detail-plot-card > div:last-child {
  flex: 1;
  min-height: 400px;
}

/* Plotly chart inner divs */

.detail-plot-card > div,
.detail-3d-plot > div {
  border-radius: 12px;
  overflow: hidden;
}

.detail-plot-card:hover {
  transform: translateY(-4px);
  border-color: rgba(234, 91, 12, 0.15);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Plot Labels */

.plot-label,
.plot-label-3d {
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  padding: 0 0 12px 0;
  pointer-events: none;
}

.plot-label-3d {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  padding-bottom: 16px;
}

/* Footer Info */

.detail-footer {
  padding: 20px 0 0 0;
  border-top: 1px solid rgba(234, 91, 12, 0.08);
  margin-top: 20px;
}

.detail-info-text {
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  padding-top: 3px;
}

.detail-info-text strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
}

/* Morphing Animation */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mode-specific animations - Legacy (not used) */

/* Can be removed if no components use .energy-plots-container */

@keyframes slideIn {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes expandIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Responsive */

@media (max-width: 1200px) {
  .detail-2d-plots {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .detail-merge-btn {
    padding: 12px 20px 8px;
    font-size: 13px;
  }
}

/* ============================================
   FLIP CARD ANIMATION FOR METHODOLOGY
   ============================================ */

/* Detail View - The Card Container (transparent) */

.detail-view {
  position: relative;
  width: 100%;
  perspective: 1500px;
}

/* Flipper - This rotates */

.detail-flipper {
  position: relative;
  width: 100%;
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform-style: preserve-3d;
}

/* Flip State - Rotate the flipper */

.detail-view.flipped .detail-flipper {
  transform: rotateY(180deg);
}

/* Front Side (Charts) - faces forward */

.detail-front {
  position: relative;
  width: 100%;
  transform: rotateY(0deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.8) 0%, rgba(45, 45, 45, 0.9) 100%);
  backdrop-filter: blur(80px) saturate(140%);
  border: 1px solid rgba(234, 91, 12, 0.15);
  border-radius: 16px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Back Side (Methodology) - faces backward (pre-flipped) */

.detail-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 700px;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  overflow-y: auto;
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.8) 0%, rgba(45, 45, 45, 0.9) 100%);
  backdrop-filter: blur(80px) saturate(140%);
  border: 1px solid rgba(234, 91, 12, 0.15);
  border-radius: 16px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  scrollbar-width: thin;
  scrollbar-color: rgba(234, 91, 12, 0.4) transparent;
}

.detail-back::-webkit-scrollbar {
  width: 8px;
}

.detail-back::-webkit-scrollbar-track {
  background: transparent;
}

.detail-back::-webkit-scrollbar-thumb {
  background: rgba(234, 91, 12, 0.4);
  border-radius: 4px;
}

.detail-back::-webkit-scrollbar-thumb:hover {
  background: rgba(234, 91, 12, 0.6);
}

/* Header Actions Container */

.detail-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Info Button (Question Mark) */

.detail-info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.12) 0%, rgba(234, 91, 12, 0.05) 100%);
  backdrop-filter: blur(80px);
  border: 1px solid rgba(234, 91, 12, 0.25);
  border-radius: 12px;
  color: var(--brand);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(234, 91, 12, 0.15);
}

.detail-info-btn:hover {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.20) 0%, rgba(234, 91, 12, 0.10) 100%);
  border-color: rgba(234, 91, 12, 0.4);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 16px rgba(234, 91, 12, 0.25);
}

.detail-info-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Back Button - styled like Combine button */

.detail-back-btn {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px 10px;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.05) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(234, 91, 12, 0.3);
  border-radius: 16px;
  color: #fff;
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 
    0 4px 16px rgba(234, 91, 12, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  margin-bottom: 20px;
}

.detail-back-btn:hover {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.25) 0%, rgba(234, 91, 12, 0.15) 100%);
  border-color: rgba(234, 91, 12, 0.5);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 24px rgba(234, 91, 12, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.detail-back-btn:active {
  transform: translateY(0);
}

/* Methodology Content */

.detail-methodology {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--ink);
  overflow: visible;
}

.detail-methodology h3 {
  font-family: 'Big John', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--brand);
  margin: 0 0 10px 0;
  text-transform: uppercase;
  
}

.methodology-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: rgba(234, 91, 12, 0.05);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
}

.methodology-section h4 {
  font-family: 'Big John', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--brand);
  margin: 0;
  text-transform: uppercase;
  
}

.methodology-section p {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.methodology-section ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
  list-style: none;
}

.methodology-section ul li {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  position: relative;
  padding-left: 16px;
}

.methodology-section ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--brand);
  font-size: 12px;
}

.methodology-section ul li strong {
  color: var(--ink);
  font-weight: 600;
}

.methodology-formula {
  display: block;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(234, 91, 12, 0.2);
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  color: var(--brand);
  text-align: center;
  margin: 10px 0;
}

.methodology-note {
  font-size: 13px;
  font-style: italic;
  color: var(--muted-more);
  margin-top: 4px;
}

/* Light Theme Overrides */

[data-theme="light"] .detail-view {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 250, 250, 0.95) 100%);
  border: 1px solid rgba(234, 91, 12, 0.15);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .methodology-section {
  background: rgba(234, 91, 12, 0.08);
}

[data-theme="light"] .methodology-formula {
  background: rgba(234, 91, 12, 0.05);
  border-color: rgba(234, 91, 12, 0.15);
}

[data-theme="light"] .detail-info-btn {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.10) 0%, rgba(234, 91, 12, 0.03) 100%);
}

[data-theme="light"] .detail-back-btn {
  background: rgba(234, 91, 12, 0.10);
}

/* ========== NEW: Energy Detail View Styles ========== */

.energy-detail-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.energy-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.energy-detail-title {
  font-family: 'Big John', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
  
  flex: 1;
}

.energy-view-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.05) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(234, 91, 12, 0.25);
  border-radius: 12px;
  color: #fff;
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-transform: uppercase;
  
}

.energy-view-toggle:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.25) 0%, rgba(234, 91, 12, 0.15) 100%);
  border-color: rgba(234, 91, 12, 0.4);
  transform: translateY(-2px);
}

.energy-view-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle-icon {
  font-size: 16px;
  line-height: 1;
}

.toggle-label {
  font-size: 12px;
}

.toggle-hint {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}

.detail-help-btn {
  width: 32px;
  height: 32px;
  background: rgba(234, 91, 12, 0.12);
  border: 1px solid rgba(234, 91, 12, 0.25);
  border-radius: 50%;
  color: #ea5b0c;
  font-family: 'Big John', sans-serif;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.detail-help-btn:hover {
  background: rgba(234, 91, 12, 0.3);
  border-color: rgba(234, 91, 12, 0.5);
  transform: scale(1.15);
}

.energy-detail-footer {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.energy-info-text {
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  text-align: justify;
}

.energy-info-text strong {
  color: #ea5b0c;
  font-weight: 500;
}

.plot-label,
.plot-label-3d {
  font-family: 'Roboto', sans-serif !important;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.energy-2d-plots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  min-height: 400px;
}

.energy-3d-plot {
  width: 100%;
  min-height: 500px;
}

.energy-plot-card {
  background: rgba(55, 55, 55, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* ========================================
   MECHANICAL DETAIL PAGE - OPTION 3
   Horizontal Hero Layout with Corporate Design
   ======================================== */

.mechanical-detail-page {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px
}

/* ========================================
   HEADER
   ======================================== */

.detail-header {
    border-bottom: 2px solid rgba(234, 91, 12, 0.3);
    padding-bottom: 20px;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.header-title h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    
    color: var(--brand);
    margin: 0;
    text-transform: uppercase;
}

.format-badge {
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    color: var(--brand);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    
}

.header-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-style: italic;
}

/* ========================================
   VISUAL SECTION - Two Cards Side by Side
   ======================================== */

.visual-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.visual-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 24px;
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
}

.visual-card:hover {
    border-color: rgba(234, 91, 12, 0.3);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 8px 32px rgba(234, 91, 12, 0.1);
}

.visual-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.drawing-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 20px;
}

.drawing-container svg {
    max-width: 100%;
    max-height: 450px;
    width: 100%;
    height: auto;
}

.photo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 20px;
}

.photo-container img {
    max-width: 100%;
    max-height: 450px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

.photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.3);
}

.photo-placeholder svg {
    stroke: rgba(255, 255, 255, 0.2);
}

.photo-placeholder p {
    margin: 0;
    font-size: 14px;
    font-style: italic;
}

/* ========================================
   DATA SECTION - Two Columns
   ======================================== */

.data-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.data-column {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 24px;
    backdrop-filter: blur(20px);
}

.column-header {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    
    color: var(--brand);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(234, 91, 12, 0.2);
}

.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.data-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
}

.data-item:hover {
    background: rgba(234, 91, 12, 0.05);
    border-color: rgba(234, 91, 12, 0.2);
    transform: translateY(-2px);
}

.data-item.full-width {
    grid-column: 1 / -1;
}

.data-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.data-value {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

/* ========================================
   GEOMETRY SECTION - Bottom Row
   ======================================== */

.geometry-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 24px;
    backdrop-filter: blur(20px);
}

.geometry-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.geometry-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.geometry-stat:hover {
    background: rgba(234, 91, 12, 0.05);
    border-color: rgba(234, 91, 12, 0.2);
    transform: translateY(-2px);
}

.stat-label {
    font-size: 10px;
    text-transform: uppercase;
    
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--brand);
    line-height: 1.2;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1400px) {
    .geometry-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .mechanical-detail-page {
        padding: 24px;
        gap: 24px;
    }

    .visual-section {
        grid-template-columns: 1fr;
    }

    .data-section {
        grid-template-columns: 1fr;
    }

    .geometry-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .drawing-container,
    .photo-container {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .header-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-title h2 {
        font-size: 22px;
    }

    .data-grid {
        grid-template-columns: 1fr;
    }

    .geometry-grid {
        grid-template-columns: 1fr;
    }
}

/* Simplified Detail Panel - Clean analysis view with help button */

.simplified-detail-panel {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 500px;
  background: transparent;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  perspective: 1500px;
  overflow: visible;
}

[data-theme="light"] .simplified-detail-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 250, 250, 0.95) 100%);
  border: 1px solid rgba(234, 91, 12, 0.15);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Close Button */

.detail-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(234, 91, 12, 0.1);
  border: 1px solid rgba(234, 91, 12, 0.3);
  color: #ea5b0c;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.detail-close-btn:hover {
  background: rgba(234, 91, 12, 0.2);
  border-color: rgba(234, 91, 12, 0.5);
  transform: scale(1.1);
}

/* Help Button (?) */

.detail-help-btn {
  position: absolute;
  top: 20px;
  right: 66px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(13, 124, 153, 0.15);
  border: 1px solid rgba(13, 124, 153, 0.3);
  color: #0d7c99;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.detail-help-btn:hover {
  background: rgba(13, 124, 153, 0.25);
  border-color: rgba(13, 124, 153, 0.5);
  transform: scale(1.1);
}

.detail-help-btn svg {
  width: 20px;
  height: 20px;
}

/* Analysis Content Area - NO SCROLLBAR HERE */

.detail-analysis-content {
  flex: 1;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.detail-analysis-content::-webkit-scrollbar {
  width: 6px;
}

.detail-analysis-content::-webkit-scrollbar-track {
  background: transparent;
}

.detail-analysis-content::-webkit-scrollbar-thumb {
  background: rgba(234, 91, 12, 0.3);
  border-radius: 3px;
}

.detail-analysis-content::-webkit-scrollbar-thumb:hover {
  background: rgba(234, 91, 12, 0.5);
}

/* Generic Analysis View */

.generic-analysis {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.analysis-header {
  text-align: center;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .analysis-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.analysis-title {
  font-family: 'Big John', sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 16px 0;
  
}

[data-theme="light"] .analysis-title {
  color: #1a1a1a;
}

.analysis-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.analysis-number {
  font-family: 'Big John', sans-serif;
  font-size: 48px;
  color: #ea5b0c;
  line-height: 1;
}

.analysis-unit {
  font-size: 24px;
  color: #999;
}

[data-theme="light"] .analysis-unit {
  color: #666;
}

.analysis-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.analysis-placeholder {
  text-align: center;
  padding: 60px 20px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px dashed rgba(234, 91, 12, 0.2);
}

[data-theme="light"] .analysis-placeholder {
  background: rgba(0, 0, 0, 0.02);
}

.analysis-placeholder p {
  margin: 8px 0;
  color: #ccc;
  font-size: 14px;
}

[data-theme="light"] .analysis-placeholder p {
  color: #666;
}

.text-muted {
  color: #999 !important;
  font-size: 13px !important;
}

[data-theme="light"] .text-muted {
  color: #999 !important;
}

/* Trend Display */

.analysis-trend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}

[data-theme="light"] .analysis-trend {
  background: rgba(0, 0, 0, 0.03);
}

.trend-label {
  font-size: 13px;
  color: #999;
  text-transform: uppercase;
  
}

.trend-value {
  font-family: 'Big John', sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.trend-value.positive {
  color: #34a853;
}

.trend-value.negative {
  color: #ff5733;
}

/* Percentile Display */

.analysis-percentile {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.percentile-label {
  font-size: 13px;
  color: #999;
  text-transform: uppercase;
  
}

.percentile-bar {
  position: relative;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

[data-theme="light"] .percentile-bar {
  background: rgba(0, 0, 0, 0.05);
}

.percentile-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(234, 91, 12, 0.6), rgba(234, 91, 12, 0.8));
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.percentile-text {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Big John', sans-serif;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Documentation Modal */

.documentation-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(80px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

[data-theme="light"] .documentation-modal-overlay {
  background: rgba(0, 0, 0, 0.4);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.documentation-modal {
  width: 90%;
  max-width: 700px;
  max-height: 80vh;
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.98) 0%, rgba(45, 45, 45, 0.99) 100%);
  backdrop-filter: blur(80px);
  border: 1px solid rgba(234, 91, 12, 0.25);
  border-radius: 20px;
  box-shadow: 
    0 24px 80px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] .documentation-modal {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 250, 0.99) 100%);
  border-color: rgba(234, 91, 12, 0.3);
  box-shadow: 
    0 24px 80px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(234, 91, 12, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.documentation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .documentation-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.documentation-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Big John', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  margin: 0;
  
}

[data-theme="light"] .documentation-title {
  color: #1a1a1a;
}

.documentation-icon {
  color: #0d7c99;
  width: 24px;
  height: 24px;
}

.documentation-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(234, 91, 12, 0.1);
  border: 1px solid rgba(234, 91, 12, 0.3);
  color: #ea5b0c;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.documentation-close:hover {
  background: rgba(234, 91, 12, 0.2);
  transform: scale(1.1);
}

.documentation-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  color: #ccc;
  line-height: 1.7;
  scrollbar-width: thin;
  scrollbar-color: rgba(234, 91, 12, 0.3) transparent;
}

[data-theme="light"] .documentation-content {
  color: #4a4a4a;
}

.documentation-content::-webkit-scrollbar {
  width: 6px;
}

.documentation-content::-webkit-scrollbar-track {
  background: transparent;
}

.documentation-content::-webkit-scrollbar-thumb {
  background: rgba(234, 91, 12, 0.3);
  border-radius: 3px;
}

.documentation-content h4 {
  font-family: 'Big John', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #ea5b0c;
  margin: 0 0 16px 0;
  
}

.documentation-content h5 {
  font-size: 14px;
  color: #fff;
  margin: 24px 0 12px 0;
  text-transform: uppercase;
  
}

[data-theme="light"] .documentation-content h5 {
  color: #1a1a1a;
}

.documentation-content p {
  margin: 0 0 16px 0;
  font-size: 14px;
}

.documentation-content ul {
  margin: 12px 0;
  padding-left: 24px;
}

.documentation-content li {
  margin: 8px 0;
  font-size: 14px;
}

.documentation-content code {
  display: block;
  background: rgba(234, 91, 12, 0.1);
  border: 1px solid rgba(234, 91, 12, 0.2);
  border-radius: 6px;
  padding: 12px 16px;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  color: #ea5b0c;
  margin: 16px 0;
  
}

.documentation-footer {
  padding: 20px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-end;
}

[data-theme="light"] .documentation-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.btn-secondary {
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  font-family: 'Big John', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-theme="light"] .btn-secondary {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
  color: #1a1a1a;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

[data-theme="light"] .btn-secondary:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.3);
}

/* Responsive */

@media (max-width: 768px) {
  .simplified-detail-panel {
    min-height: 400px;
  }
  
  .detail-analysis-content {
    padding: 20px;
  }
  
  .documentation-modal {
    width: 95%;
    max-height: 85vh;
  }
  
  .documentation-content {
    padding: 20px;
  }
}

/* Floating Control Panel - Links oben im Container Grid */

.floating-controls {
  grid-column: 1;
  grid-row: 1;
  position: sticky;

  width: 100%;
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.4) 0%, rgba(39, 39, 39, 0.6) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(234, 91, 12, 0.15);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  z-index: 10;
}

.floating-controls-section {
  margin-bottom: 20px;
}

.floating-controls-section:last-child {
  margin-bottom: 0;
}

.floating-controls-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  
  margin-bottom: 12px;
  padding-top: 2px;
  font-family: 'Big John', sans-serif;
  font-weight: 400;
}

.floating-controls-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.floating-control-btn {
  background: rgba(31, 31, 31, 0.6);
  border: 1px solid rgba(234, 91, 12, 0.2);
  color: #bbb;
  padding: 15px 14px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: 'Big John', sans-serif;
  font-weight: 400;
  text-align: left;
}

.floating-control-btn:hover {
  background: rgba(31, 31, 31, 0.9);
  border-color: rgba(234, 91, 12, 0.4);
  color: #fff;
  transform: translateX(-2px);
}

.floating-control-btn.active {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.25) 0%, rgba(234, 91, 12, 0.15) 100%);
  border-color: rgba(234, 91, 12, 0.6);
  color: #ea5b0c;
  box-shadow:
    0 0 20px rgba(234, 91, 12, 0.3),
    inset 0 1px 0 rgba(234, 91, 12, 0.2);
  transform: translateX(-4px);
}

.floating-control-btn.active:hover {
  border-color: rgba(234, 91, 12, 0.8);
  box-shadow:
    0 0 24px rgba(234, 91, 12, 0.4),
    inset 0 1px 0 rgba(234, 91, 12, 0.3);
}

/* ============================================================================
   PARETO FRONT EXPLANATION PANEL
   FLIP-style explanation overlay (like Fact Sheet tiles)
   ============================================================================ */

.pareto-explanation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.pareto-explanation-panel {
    background: rgba(26, 26, 26, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header */

.pareto-explanation-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.1), transparent);
}

.pareto-explanation-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 8px;
    color: #ea5b0c;
}

.pareto-explanation-title {
    flex: 1;
}

.pareto-explanation-title h3 {
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #f1f5f9;
    text-transform: uppercase;
    
    margin: 0 0 4px 0;
}

.pareto-explanation-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

.pareto-explanation-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

.pareto-explanation-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}

/* Content */

.pareto-explanation-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.pareto-explanation-section {
    margin-bottom: 24px;
}

.pareto-explanation-section:last-child {
    margin-bottom: 0;
}

.pareto-explanation-section h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #cbd5e1;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pareto-explanation-section h4 svg {
    color: #ea5b0c;
}

.pareto-explanation-section p {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 12px 0;
}

.pareto-explanation-section p:last-child {
    margin-bottom: 0;
}

.pareto-explanation-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pareto-explanation-section li {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.pareto-explanation-section li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #ea5b0c;
    font-weight: 600;
}

.pareto-explanation-section li:last-child {
    margin-bottom: 0;
}

/* Visual */

.pareto-explanation-visual {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 20px;
    margin: 12px 0;
    display: flex;
    justify-content: center;
}

.pareto-explanation-caption {
    text-align: center;
    font-size: 12px !important;
    color: #64748b !important;
}

/* Use Cases */

.pareto-explanation-usecases {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
}

.pareto-usecase {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 12px;
}

.pareto-usecase strong {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 4px;
}

.pareto-usecase p {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin: 0 !important;
}

/* Math Section */

.pareto-explanation-math {
    background: rgba(234, 91, 12, 0.05);
    border: 1px solid rgba(234, 91, 12, 0.2);
    border-radius: 8px;
    padding: 16px;
}

.pareto-math-formula {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 12px;
    margin-top: 12px;
    color: #cbd5e1;
    text-align: center;
    line-height: 1.6;
}

.pareto-math-formula strong {
    color: #ea5b0c;
}

/* Footer */

.pareto-explanation-footer {
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
}

.pareto-explanation-btn {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 24px;
    background: rgba(234, 91, 12, 0.2);
    border: 1px solid rgba(234, 91, 12, 0.5);
    border-radius: 6px;
    color: #ea5b0c;
    cursor: pointer;
    transition: all 0.2s;
}

.pareto-explanation-btn:hover {
    background: rgba(234, 91, 12, 0.3);
    border-color: #ea5b0c;
}

/* Scrollbar */

.pareto-explanation-content::-webkit-scrollbar {
    width: 8px;
}

.pareto-explanation-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.pareto-explanation-content::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.5);
    border-radius: 4px;
}

.pareto-explanation-content::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.7);
}

/* Responsive */

@media (max-width: 768px) {
    .pareto-explanation-panel {
        max-width: 100%;
        max-height: 95vh;
        margin: 10px;
    }

    .pareto-explanation-header {
        padding: 16px;
    }

    .pareto-explanation-content {
        padding: 16px;
    }

    .pareto-explanation-title h3 {
        font-size: 16px;
    }
}

/**
 * Footer Component Styles
 * 
 * Glassmorphism footer with Batemo branding
 */

.app-footer {
    position: static;
    width: 100%;
    margin-top: 0;
    padding: 12px 20px;
    /* Same glassmorphism as CommandBar */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.95) 0%, rgba(45, 42, 38, 0.98) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 -4px 16px rgba(0, 0, 0, 0.2);
    z-index: 50;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-logo:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.footer-logo img {
    width: 20px;
    height: 20px;
}

.footer-logo span:last-child {
    font-family: var(--font-display, 'Big John', sans-serif);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    /* Orange gradient matching CommandBar */
    background: linear-gradient(135deg, #ea5b0c 0%, #ff7a33 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    
}

.footer-brand {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

.footer-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-copyright,
.footer-version {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #94a3b8;
    
}

.footer-link {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

.footer-link:hover {
    color: #ea5b0c;
    background: rgba(234, 91, 12, 0.1);
}

.footer-separator {
    color: rgba(255, 255, 255, 0.2);
    font-size: 10px;
}

.footer-version {
    padding: 4px 10px;
    background: rgba(234, 91, 12, 0.1);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 6px;
    color: #ea5b0c;
    font-weight: 600;
    font-family: 'Big John', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    
}

/* Responsive */

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .footer-left,
    .footer-right {
        justify-content: center;
    }

    .footer-center {
        flex-wrap: wrap;
    }
}

/**
 * Pagination Component Styles
 * 
 * Glassmorphism pagination controls for Grid and Table views
 */

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

}

.pagination-btn {
    padding: 8px 16px;
    background: rgba(50, 50, 50, 0.7);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    min-width: 80px;
}

.pagination-btn--first,
.pagination-btn--last {
    min-width: 50px;
    font-size: 16px;
    font-weight: 700;
}

.pagination-btn:hover:not(:disabled) {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.5);
    color: #ea5b0c;
    box-shadow: 0 4px 16px rgba(234, 91, 12, 0.3);
    transform: translateY(-2px);
}

.pagination-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.2);
}

.pagination-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: rgba(50, 50, 50, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
}

.pagination-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
}

.pagination-current {
    font-size: 14px;
    font-weight: 700;
    color: #ea5b0c;
    font-family: 'Big John', sans-serif;
    text-transform: uppercase;
    
}

.pagination-divider {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
}

.pagination-total {
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
}

.pagination-count {
    font-size: 11px;
    font-weight: 400;
    color: #64748b;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Grid Footer - Cell count */

.grid-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 8px;
}

.grid-footer-info {
    font-size: 12px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    color: #94a3b8;
    
}

/* Responsive */

@media (max-width: 768px) {
    .pagination-controls {
        flex-wrap: wrap;
        gap: 8px;
        padding: 20px 16px;
    }

    .pagination-btn {
        min-width: 60px;
        padding: 6px 12px;
        font-size: 12px;
    }

    .pagination-btn--first,
    .pagination-btn--last {
        min-width: 40px;
    }

    .pagination-info {
        width: 100%;
        justify-content: center;
        order: -1;
        margin-bottom: 8px;
    }

    .pagination-count {
        display: none;
    }
}

/**
 * Factsheet Grid Cards
 * 
 * Cell cards in grid view styled like factsheet tiles
 * Glassmorphism, Big John font, basis-aware values
 */

/* ============================================================================
   BASE CARD STYLE
   ============================================================================ */

.factsheet-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(50, 50, 50, 0.7) 0%, rgba(30, 30, 30, 0.9) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
    min-height: 420px;
    height: auto;
}

.factsheet-card:hover {
    transform: translateY(-4px);
    border-color: rgba(234, 91, 12, 0.4);
    box-shadow: 0 8px 32px rgba(234, 91, 12, 0.2),
        0 0 0 1px rgba(234, 91, 12, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.8) 0%, rgba(40, 40, 40, 0.95) 100%);
}

.factsheet-card.in-compare {
    border-color: rgba(234, 91, 12, 0.6);
    box-shadow: 0 0 0 2px rgba(234, 91, 12, 0.4),
        0 8px 24px rgba(234, 91, 12, 0.3);
}

/* ============================================================================
   LOCKED / SHADOW CARD
   ============================================================================ */

.factsheet-card--locked {
    opacity: 0.5;
    filter: grayscale(40%);
    cursor: not-allowed;
}

.factsheet-card--locked:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    background: linear-gradient(135deg, rgba(50, 50, 50, 0.7) 0%, rgba(30, 30, 30, 0.9) 100%);
}

.factsheet-card__lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    z-index: 5;
    border-radius: 8px;
}

.factsheet-card__lock-overlay svg {
    padding: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ============================================================================
   DAILY DEEP-DIVE LIMIT LOCK (Bug B — distinct from the shadow-lock above:
   this cell IS in the user's plan, it's just not opened yet today at limit.
   Still clickable — it opens the DailyLimitModal, so keep the pointer cursor.)
   ============================================================================ */

.factsheet-card--limit-locked {
    opacity: 0.55;
}

/* ============================================================================
   COMPARE BUTTON
   ============================================================================ */

.factsheet-card__compare {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 10;
    padding: 0;
}

.factsheet-card__compare:hover {
    background: rgba(234, 91, 12, 0.2);
    border-color: #ea5b0c;
    color: #ea5b0c;
    transform: scale(1.1);
}

.factsheet-card__compare.active {
    background: rgba(234, 91, 12, 0.3);
    border-color: #ea5b0c;
    color: #ea5b0c;
}

/* ============================================================================
   IMAGE
   ============================================================================ */

.factsheet-card__image {
    position: relative;
    align-self: center;
    aspect-ratio: 1/1;
    /* Smaller rectangular format for comfortable */
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.5) 0%, rgba(20, 20, 20, 0.8) 100%);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.factsheet-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.factsheet-card__image-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
}

/* ============================================================================
   HEADER
   ============================================================================ */

.factsheet-card__header {
    margin-bottom: 16px;
}

.factsheet-card__title {
    font-family: 'Big John', 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;

    margin: 0 0 6px 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.factsheet-card__subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ============================================================================
   SPEC ROWS - EXACT FACTSHEET STYLE
   ============================================================================ */

.factsheet-card__specs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    flex: 1;
}

/* EXACT copy from fact-sheet-v2.css */

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.spec-label {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    /* NO uppercase, NO letter-spacing */
}

.spec-value {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 3px;
}

/* Value number in Big John */

.spec-number {
    font-family: 'Big John', sans-serif;
    color: rgba(255, 255, 255, 0.9);
}

/* Value unit in Roboto */

.spec-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.factsheet-card__footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.factsheet-badge {
    display: inline-block;
    padding: 4px 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    text-transform: uppercase;

}

.factsheet-badge--chemistry {
    background: rgba(234, 91, 12, 0.15);
    color: #ea5b0c;
    border: 1px solid rgba(234, 91, 12, 0.3);
}

.factsheet-badge--format {
    background: rgba(234, 91, 12, 0.15);
    color: #ea5b0c;
    border: 1px solid rgba(234, 91, 12, 0.3);
}

/* ============================================================================
   DISPLAY MODE VARIANTS
   ============================================================================ */

/* Compact Mode - Minimal, dense layout */

.factsheet-card--compact {
    padding: 10px;
    min-height: 170px;
}

.factsheet-card--compact .factsheet-card__title {
    font-size: 13px;
    margin-bottom: 4px;
}

.factsheet-card--compact .factsheet-card__subtitle {
    font-size: 11px;
}

.factsheet-card--compact .factsheet-card__specs {
    gap: 2px;
}

.factsheet-card--compact .spec-row {
    padding: 5px 8px;
}

.factsheet-card--compact .spec-label {
    font-size: 11px;
}

.factsheet-card--compact .spec-number {
    font-size: 13px;
}

.factsheet-card--compact .spec-unit {
    font-size: 11px;
}

.factsheet-card--compact .factsheet-badge {
    font-size: 10px;
    padding: 3px 8px;
}

/* Comfortable Mode - Default, balanced */

.factsheet-card--comfortable {
    /* All default styles from base */
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .factsheet-card {
        padding: 14px;
    }

    .factsheet-card__title {
        font-size: 14px;
    }

    .spec-number {
        font-size: 16px;
    }

    .factsheet-card__image {
        height: 120px;
    }
}

/* Factsheet-styled grid cards with glassmorphism */

/**
 * Toast Notification
 * Snackbar-style notification at bottom center
 */

.toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  pointer-events: auto;
  animation: toast-slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: #e0e0e0;
  font-size: 14px;
  max-width: 480px;
  white-space: nowrap;
}

.toast__message {
  flex: 1;
}

.toast__action {
  color: #0d7c99;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.toast__action:hover {
  color: #10a0c2;
  text-decoration: underline;
}

.toast__dismiss {
  background: none;
  border: none;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.2s;
}

.toast__dismiss:hover {
  color: #ccc;
}

@keyframes toast-slide-up {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Toast notification snackbar */

/* =========================================
   FREE PLOT TILE + SETTINGS DRAWER SYSTEM
   Similar to Ragone Plot with sliding drawer
   ========================================= */

/* Container: Flex layout for plot + drawer */

.free-plot-container {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 16px;
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* Fullscreen Mode - Sidebars slide out smoothly, Context Bar stays */

.free-plot-container.fullscreen,
.plot-fullscreen {
    gap: 0;
    padding: 0;
}

.free-plot-container.fullscreen .free-plot-tile,
.plot-fullscreen .free-plot-tile,
.plot-fullscreen .ragone-plot-container,
.plot-fullscreen .score-plot-container,
.plot-fullscreen .my-plot-container {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 100%;
}

/* Common header styles for all plot types */

.score-plot-header,
.my-plot-header {
    padding: 12px 20px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.score-plot-title,
.my-plot-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.score-plot-icon,
.my-plot-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.8;
}

.score-plot-icon svg,
.my-plot-icon svg {
    stroke: #ea5b0c;
    stroke-width: 2;
}

.score-plot-label,
.my-plot-label {
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;

    color: #f1f5f9;
}

.score-plot-count,
.my-plot-count {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    padding: 2px 8px;
    background: rgba(234, 91, 12, 0.15);
    border-radius: 4px;
    border: 1px solid rgba(234, 91, 12, 0.3);
}

/* Score/My plot containers */

.score-plot-container,
.my-plot-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.6) 0%, rgba(45, 42, 38, 0.8) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.free-plot-container.fullscreen .settings-drawer,
.plot-fullscreen .settings-drawer {
    transform: translateX(calc(100% + 20px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.8s ease-in-out, opacity 0.6s ease;
}

/* Hide adaptive sidebar when any plot is in fullscreen */

body:has(.free-plot-container.fullscreen) .adaptive-sidebar,
body:has(.plot-fullscreen) .adaptive-sidebar {
    transform: translateX(calc(-100% - 40px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.8s ease-in-out, opacity 0.6s ease !important;
}

/* Main Plot Tile (fills remaining space after drawer) */

.free-plot-tile {
    flex: 1 1 0;
    min-width: 0;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.6) 0%, rgba(45, 42, 38, 0.8) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: flex 0.8s ease-in-out,
        min-width 0.8s ease-in-out,
        max-width 0.8s ease-in-out;
}

/* Plot Header (like Ragone Plot) */

.free-plot-header {
    padding: 12px 20px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.free-plot-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.free-plot-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.8;
}

.free-plot-icon svg {
    stroke: #ea5b0c;
    stroke-width: 2;
}

.free-plot-label {
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;

    color: #f1f5f9;
}

.free-plot-count {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    padding: 2px 8px;
    background: rgba(234, 91, 12, 0.15);
    border-radius: 4px;
    border: 1px solid rgba(234, 91, 12, 0.3);
}

/* Chart Container (takes full available space) */

.free-plot-chart {
    flex: 1;
    display: flex;
    padding: 20px;
    width: 100%;
    height: 100%;
    min-height: 0;
    position: relative;
    transition: width 0.4s ease-out;
}

/* Maximize Button (top-right of header) */

.free-plot-maximize-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(13, 13, 13, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.3s ease-out;
    margin-left: auto;
}

.free-plot-maximize-btn:hover {
    background: rgba(234, 91, 12, 0.15);
    border-color: #ea5b0c;
    color: #ea5b0c;
    transform: scale(1.1);
}

.free-plot-maximize-btn:active {
    transform: scale(0.95);
}

/* Settings Drawer (always visible) - GLASSMORPHISM with sidebar color */

.settings-drawer {
    flex: 0 0 320px;
    min-width: 320px;
    max-width: 320px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.6) 0%, rgba(45, 42, 38, 0.8) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.4s ease-out;
}

/* Collapsed State - Narrow Drawer (60px) */

.settings-drawer--collapsed {
    flex: 0 0 60px;
    min-width: 60px;
    max-width: 60px;
    cursor: pointer;
}

.settings-drawer--collapsed:hover {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.1) 0%, rgba(234, 91, 12, 0.05) 100%);
}

/* Collapsed Content - Vertical Text + Icon */

.settings-drawer__collapsed-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 32px;
    gap: 24px;
    height: 100%;
}

.settings-drawer__collapsed-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 91, 12, 0.1);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.settings-drawer__collapsed-icon:hover {
    background: rgba(234, 91, 12, 0.2);
    border-color: #ea5b0c;
    box-shadow: 0 0 12px rgba(234, 91, 12, 0.3);
}

.settings-drawer__collapsed-icon svg {
    stroke: #ea5b0c;
    stroke-width: 2.5;
}

.settings-drawer__collapsed-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    user-select: none;
    transition: color 0.3s ease;
}

.settings-drawer--collapsed:hover .settings-drawer__collapsed-text {
    color: #ea5b0c;
}

/* Header — scoped to .settings-drawer to beat theme.css / settings-dialog.css */

.settings-drawer .settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    background: rgba(234, 91, 12, 0.08);
    border-bottom: 1px solid rgba(234, 91, 12, 0.25);
    backdrop-filter: blur(20px);
    position: relative;
    z-index: 2;
}

.settings-drawer .settings-title {
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #f1f5f9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    flex: 1;
    text-align: center;
}

/* Collapse Button in Header */

.settings-collapse-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.settings-collapse-btn:hover {
    background: rgba(234, 91, 12, 0.3);
    border-color: rgba(234, 91, 12, 0.5);
}

.settings-collapse-btn svg {
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 2;
    transition: all 0.3s ease;
}

.settings-collapse-btn:hover svg {
    stroke: #ea5b0c;
}

/* Body */

.settings-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    flex: 1;
    position: relative;
    z-index: 2;
}

.settings-body::-webkit-scrollbar {
    width: 8px;
}

.settings-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin: 8px 0;
}

.settings-body::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.4);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background 0.2s ease;
}

.settings-body::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.6);
    background-clip: padding-box;
}

/* Settings Groups */

.settings-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: fadeInUp 0.4s ease;
    animation-fill-mode: backwards;
}

.settings-group:nth-child(1) {
    animation-delay: 0.1s;
}

.settings-group:nth-child(2) {
    animation-delay: 0.15s;
}

.settings-group:nth-child(3) {
    animation-delay: 0.2s;
}

.settings-group:nth-child(4) {
    animation-delay: 0.25s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.settings-label {
    font-family: 'Big John', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 2px;
}

.settings-label.settings-label--axis {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    flex-wrap: nowrap;
    white-space: nowrap;
    line-height: 1;
    width: 100%;
    flex: none;
}

/* ── Axis KPI info tooltip ── */

.axis-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(234, 91, 12, 0.15);
    border: 1px solid var(--brand, #ea5b0c);
    color: var(--brand, #ea5b0c);
    font-family: 'Roboto', sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}

.axis-info-icon:hover {
    background: var(--brand, #ea5b0c);
    color: #fff;
    transform: scale(1.15);
}

.axis-info-tooltip-portal {
    width: 260px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(45, 42, 38, 0.98), rgba(35, 32, 28, 0.98));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 8px rgba(234, 91, 12, 0.08);
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

.settings-select {
    width: 100%;
    padding: 10px 14px;
    background: rgba(13, 13, 13, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    color: #e2e8f0;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.settings-select--kpi,
.settings-select--kpi option {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: -0.3px;
}

.settings-select--kpi optgroup {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 11px;
    color: #ea5b0c;
}

.settings-select:hover {
    background: rgba(13, 13, 13, 0.85);
    border-color: rgba(234, 91, 12, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.settings-select:focus {
    outline: none;
    background: rgba(13, 13, 13, 0.95);
    border-color: #ea5b0c;
    box-shadow:
        0 0 0 3px rgba(234, 91, 12, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

/* Optgroup styling for better contrast */

.settings-select optgroup {
    background: rgba(13, 13, 13, 0.95);
    color: #ea5b0c;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
    padding: 8px 4px 4px 4px;
}

.settings-select option {
    background: rgba(26, 26, 26, 0.95);
    color: #e2e8f0;
    padding: 8px 12px;
    font-weight: 400;
}

/* Plot Type Indicator */

.settings-group--plot-type {
    padding: 16px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.plot-type-indicator {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.plot-type-badge {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(13, 13, 13, 0.3);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    transition: all 0.3s ease;
}

.plot-type-badge.active {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.4);
    color: #ea5b0c;
    font-weight: 500;
}

.plot-type-hint {
    margin-top: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    text-align: center;
}

/* Regression Controls */

.regression-controls {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.settings-select--small {
    flex: 1;
    padding: 8px 10px;
    font-size: 12px;
}

/* Checkbox Group */

.settings-group--checkboxes {
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    gap: 4px;
}

.settings-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.3s ease-out;
    border-radius: 8px;
    background: rgba(13, 13, 13, 0.3);
    border: 1px solid transparent;
}

.settings-checkbox:hover {
    background: rgba(234, 91, 12, 0.08);
    border-color: rgba(234, 91, 12, 0.2);
    transform: translateX(3px);
}

.settings-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: #ea5b0c;
}

.settings-checkbox span {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #cbd5e1;
    transition: color 0.2s ease;
}

.settings-checkbox:hover span {
    color: #ea5b0c;
}

/* Advanced Toggle */

.settings-advanced-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    margin-top: 8px;
    background: rgba(234, 91, 12, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 10px;
    color: #ea5b0c;
    font-family: 'Big John', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;

    cursor: pointer;
    transition: all 0.3s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.settings-advanced-toggle:hover {
    background: rgba(234, 91, 12, 0.15);
    border-color: #ea5b0c;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.2);
}

.settings-advanced-toggle:active {
    transform: translateY(0);
}

.settings-advanced-toggle .toggle-arrow {
    margin-left: auto;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 11px;
}

.settings-advanced-toggle.expanded .toggle-arrow {
    transform: rotate(180deg);
}

/* Advanced Options */

.settings-advanced {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
    animation: expandDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes expandDown {
    from {
        opacity: 0;
        transform: translateY(-15px) scaleY(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

.advanced-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: rgba(13, 13, 13, 0.4);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 8px;
}

.advanced-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Big John', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;

    color: #cbd5e1;
    margin-bottom: 6px;
}

.advanced-section-title svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.advanced-help-text,
.settings-info-text {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    color: #94a3b8;
    margin-top: 6px;
    font-style: italic;
    opacity: 0.9;
}

.advanced-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.advanced-row label {
    flex: 1;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #94a3b8;
}

.advanced-row select {
    flex: 1.5;
    padding: 8px 12px;
    background: rgba(13, 13, 13, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 6px;
    color: #e2e8f0;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.advanced-row select:hover {
    background: rgba(13, 13, 13, 0.85);
    border-color: rgba(234, 91, 12, 0.4);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.advanced-row select:focus {
    outline: none;
    border-color: #ea5b0c;
    box-shadow:
        0 0 0 2px rgba(234, 91, 12, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 3D Mode Indicator in Context Bar */

.mode-indicator {
    display: inline-block;
    padding: 3px 8px;
    margin-left: 8px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;

    border-radius: 4px;
    background: rgba(234, 91, 12, 0.15);
    color: #ea5b0c;
    border: 1px solid rgba(234, 91, 12, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.mode-indicator--3d {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.2), rgba(13, 124, 153, 0.2));
    border-color: rgba(234, 91, 12, 0.4);
}

/* Responsive Adjustments */

@media (max-width: 1200px) {
    .free-plot-tile {
        flex: 0 0 calc(100% - 300px);
    }

    .settings-drawer {
        flex: 0 0 280px;
        min-width: 280px;
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .free-plot-container {
        flex-direction: column;
        padding: 12px;
        gap: 12px;
    }

    .free-plot-tile {
        flex: 1 1 auto;
        border-radius: 12px;
    }

    .free-plot-header {
        padding: 12px 16px;
    }

    .free-plot-label {
        font-size: 12px;
    }

    .free-plot-count {
        font-size: 10px;
    }

    .free-plot-chart {
        padding: 16px;
    }

    .free-plot-tile {
        flex: 0 0 50%;
    }

    .settings-drawer {
        flex: 0 0 auto;
        min-width: 100%;
        max-width: 100%;
        max-height: 50vh;
    }
}

/* Plot Controls in Context Bar - Remove double wrapper */

.plot-controls--axes {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.plot-controls--axes .context-control-group {
    gap: 12px;
    display: flex;
    flex-direction: row;
}

/* Plot expands when settings collapsed (60px instead of 320px) */

.free-plot-container:has(.settings-drawer--collapsed) .free-plot-tile {
    flex: 1;
    max-width: calc(100% - 60px - 16px);
}

/* Hide show button in fullscreen mode */

.plot-fullscreen .settings-show-btn {
    display: none;
}

.plot-controls--axes .context-control {
    min-width: 160px;
}

/* ============================================================================
   SETTINGS SECTIONS - My Plot & Score Plot
   ============================================================================ */

/* Settings Section with Header */

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: rgba(13, 13, 13, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 12px;
    animation: fadeInUp 0.4s ease;
}

.settings-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Big John', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;

    color: #cbd5e1;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(234, 91, 12, 0.2);
}

.settings-section-header svg {
    color: #ea5b0c;
    stroke-width: 2;
}

/* Input Groups */

.settings-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-input-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #cbd5e1;
}

.settings-input-unit {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;

}

.settings-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    color: #e2e8f0;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s ease;
}

.settings-input:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(234, 91, 12, 0.3);
}

.settings-input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.6);
    border-color: #ea5b0c;
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.15);
}

/* Buttons */

.settings-btn {
    width: 100%;
    padding: 10px 16px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;

    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.settings-btn--secondary {
    background: rgba(234, 91, 12, 0.1);
    border-color: rgba(234, 91, 12, 0.3);
    color: #ea5b0c;
}

.settings-btn--secondary:hover {
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.2);
}

.settings-btn--secondary:active {
    transform: translateY(0);
}

/* Weight Sliders (Score Plot) */

.settings-weight-total {
    font-family: 'Big John', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    margin-left: auto;
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.settings-weight-slider {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-weight-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #64748b;
    padding: 0 4px;
    margin-bottom: -4px;
}

.settings-slider-labels span:first-child,
.settings-slider-labels span:last-child {
    color: #94a3b8;
}

.settings-slider-labels span:nth-child(2) {
    color: #ea5b0c;
    font-weight: 600;
}

.settings-weight-icon {
    font-size: 16px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-weight-label {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #cbd5e1;
    flex: 1;
}

.settings-weight-value {
    font-family: 'Big John', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #ea5b0c;
    padding: 2px 8px;
    background: rgba(234, 91, 12, 0.1);
    border-radius: 4px;
}

/* Range Slider */

.settings-range {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.2);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.settings-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--slider-color, #ea5b0c);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.settings-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.settings-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--slider-color, #ea5b0c);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.settings-range::-moz-range-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Warning Message */

.settings-warning {
    padding: 10px 12px;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 8px;
    color: #f87171;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Free Plot settings overlay (top-right corner controls) */

/* =========================================
   QUICK ANALYSIS PRESETS
   Pre-configured plot views with guided insights
   ========================================= */

/* ===== CARD CONTAINER ===== */

.settings-section--card {
    background: rgba(30, 27, 24, 0.95);
    border: 1px solid rgba(100, 116, 139, 0.15);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.settings-section--card .settings-section-header {
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: none;
}

/* ===== MODE TOGGLE (User/Expert) - Matches Header View Toggle ===== */

.plot-mode-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.plot-mode-toggle__label {
    font-family: 'Big John', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plot-mode-toggle__switch {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 2px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

.plot-mode-toggle__option {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 28px;
    height: 28px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #999;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    gap: 4px;
}

.plot-mode-toggle__option:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(234, 91, 12, 0.2);
    color: #ccc;
}

.plot-mode-toggle__option.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.25), rgba(234, 91, 12, 0.15));
    border-color: #ea5b0c;
    color: #ea5b0c;
}

/* ===== INSIGHTS TOGGLE (Compact checkbox) ===== */

.insights-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(100, 116, 139, 0.2);
    transition: all 0.2s ease;
}

.insights-toggle:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(234, 91, 12, 0.3);
}

.insights-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid #64748b;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.insights-toggle input[type="checkbox"]:checked {
    background: #ea5b0c;
    border-color: #ea5b0c;
}

.insights-toggle input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: -1px;
    left: 1px;
    font-size: 10px;
    color: white;
    font-weight: 700;
}

.insights-toggle__label {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.insights-toggle:hover .insights-toggle__label {
    color: #cbd5e1;
}

/* ===== QUICK ANALYSIS SECTION ===== */

.quick-analysis-section {
    /* Uses .settings-section--card for card styling */
}

.quick-analysis-section .preset-categories {
    margin-top: 0;
}

.quick-analysis-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    padding: 4px 0;
}

.quick-analysis-header:hover .quick-analysis-title {
    color: #f1f5f9;
}

.quick-analysis-icon {
    width: 16px;
    height: 16px;
    color: #ea5b0c;
}

.quick-analysis-title {
    font-family: 'Big John', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #cbd5e1;
    transition: color 0.2s ease;
}

.quick-analysis-toggle {
    margin-left: auto;
    color: #64748b;
    transition: transform 0.3s ease;
}

.quick-analysis-toggle.expanded {
    transform: rotate(180deg);
}

/* ===== PRESET CATEGORIES - Dropdown Style ===== */

.preset-categories {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.preset-category {
    background: rgba(30, 27, 24, 0.95);
    border-radius: 8px;
    border: 1px solid rgba(100, 116, 139, 0.15);
    overflow: hidden;
    transition: all 0.2s ease;
}

.preset-category:hover {
    border-color: rgba(234, 91, 12, 0.4);
}

.preset-category.expanded {
    border-color: rgba(234, 91, 12, 0.5);
}

.preset-category__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.2s ease;
}

.preset-category__header:hover {
    background: rgba(234, 91, 12, 0.05);
}

.preset-category__icon {
    width: 16px;
    height: 16px;
    color: #ea5b0c;
    flex-shrink: 0;
}

.preset-category__icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.preset-category__label {
    flex: 1;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #e2e8f0;
}

.preset-category__arrow {
    color: #64748b;
    font-size: 10px;
    transition: transform 0.3s ease;
}

.preset-category.expanded .preset-category__arrow {
    transform: rotate(180deg);
}

/* ===== PRESET LIST ===== */

.preset-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.15);
}

.preset-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(30, 30, 30, 0.4);
    border: 1px solid rgba(100, 116, 139, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
}

.preset-item:hover {
    background: rgba(40, 40, 40, 0.6);
    border-color: rgba(234, 91, 12, 0.3);
}

.preset-item.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.05) 100%);
    border-color: rgba(234, 91, 12, 0.5);
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.15);
}

.preset-item__indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #64748b;
    margin-top: 6px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.preset-item.active .preset-item__indicator {
    background: #ea5b0c;
    box-shadow: 0 0 8px rgba(234, 91, 12, 0.5);
}

.preset-item__content {
    flex: 1;
    min-width: 0;
}

.preset-item__question {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #e2e8f0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.preset-item.active .preset-item__question {
    color: #fff;
    font-weight: 500;
}

/* ===== ACTIVE PRESET INFO BAR ===== */

.preset-info-bar {
    position: relative;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.12) 0%, rgba(234, 91, 12, 0.04) 100%);
    border: 1px solid rgba(234, 91, 12, 0.25);
    border-radius: 10px;
    margin-bottom: 16px;
}

.preset-info-bar__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 4px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.preset-info-bar__close:hover {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.preset-info-bar__question {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #ea5b0c;
    margin-bottom: 8px;
    padding-right: 24px;
    line-height: 1.4;
}

.preset-info-bar__explanation {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #cbd5e1;
    line-height: 1.5;
}

/* ===== PRESET INSIGHT ===== */

.preset-insight {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.15) 100%);
    animation: fadeIn 0.4s ease-out;
    width: 100%;
    box-sizing: border-box;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.preset-insight.positive {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.06) 100%);
}

.preset-insight.negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(239, 68, 68, 0.06) 100%);
}

.preset-insight.neutral {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.18) 0%, rgba(100, 116, 139, 0.06) 100%);
}

.preset-insight.neutral .preset-insight__icon {
    color: #94a3b8;
}

.preset-insight__icon {
    font-size: 14px;
    line-height: 1;
}

.preset-insight.positive .preset-insight__icon {
    color: #22c55e;
}

.preset-insight.negative .preset-insight__icon {
    color: #ef4444;
}

.preset-insight__content {
    flex: 1;
}

.preset-insight__text {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #f1f5f9;
    line-height: 1.4;
}

.preset-insight__confidence {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
    opacity: 0.8;
}

/* Cluster insights (chemistry/technology/supplier) */

.preset-insight.cluster {
    background: linear-gradient(135deg, rgba(13, 124, 153, 0.18) 0%, rgba(13, 124, 153, 0.06) 100%);
}

.preset-insight.cluster .preset-insight__icon {
    color: #0d7c99;
}

.preset-insight__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 4px;
}

.preset-insight__detail {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #cbd5e1;
    padding-left: 12px;
    position: relative;
}

.preset-insight__detail::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #0d7c99;
}

/* ===== CHART INFO OVERLAY ===== */

.chart-preset-overlay {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: 600px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.98) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 10px;
    z-index: 50;
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chart-preset-overlay__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.chart-preset-overlay__icon {
    width: 22px;
    height: 22px;
    color: #ea5b0c;
    flex-shrink: 0;
    margin-top: 1px;
}

.chart-preset-overlay__icon svg {
    width: 22px;
    height: 22px;
}

.chart-preset-overlay__question {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    flex: 1;
    line-height: 1.4;
}

.chart-preset-overlay__close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 4px;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.chart-preset-overlay__close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.chart-preset-overlay__explanation {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #cbd5e1;
    line-height: 1.6;
}

/* ===== RESET BUTTON ===== */

.preset-reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    margin-top: 10px;
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.2);
    border-radius: 6px;
    color: #94a3b8;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preset-reset-btn:hover {
    background: rgba(100, 116, 139, 0.2);
    color: #e2e8f0;
    border-color: rgba(100, 116, 139, 0.4);
}

/* ===== PRESET ITEM WRAPPER ===== */

.preset-item-wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ===== INLINE PRESET INFO (Below Selected Question) ===== */

.preset-info-inline {
    position: relative;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.12) 0%, rgba(234, 91, 12, 0.04) 100%);
    border: 1px solid rgba(234, 91, 12, 0.25);
    border-radius: 8px;
    margin-left: 0;
    animation: fadeIn 0.3s ease-out;
}

.preset-info-inline__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 4px;
    color: #94a3b8;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
}

.preset-info-inline__close:hover {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.preset-info-inline__explanation {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #cbd5e1;
    line-height: 1.5;
    padding-right: 20px;
}

/* Disclaimer label above insights */

.preset-insight__disclaimer {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0;
    margin-bottom: 6px;
}

.preset-info-inline .preset-insight {
    margin-top: 10px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1200px) {
    .preset-item__question {
        font-size: 11px;
    }

    .preset-category__label {
        font-size: 12px;
    }
}

/* Quick Analysis presets for guided plot exploration */

/* Settings Dialog - Global App Settings */

.settings-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9998;
    animation: fadeIn 0.2s ease;
}

.settings-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    background: linear-gradient(135deg, rgba(50, 50, 50, 0.85) 0%, rgba(30, 30, 30, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Header */

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-title {
    font-family: 'Big John', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.settings-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.settings-close-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
}

/* Content */

.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

.settings-content::-webkit-scrollbar {
    width: 8px;
}

.settings-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.settings-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.settings-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Sections */

.settings-section {
    margin-bottom: 2rem;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section-title {
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ea5b0c;
    margin: 0 0 1rem 0;
}

.settings-section-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: -0.5rem 0 1rem 0;
    line-height: 1.5;
}

/* Guided Tours List */

.settings-tours-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.settings-tour-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.settings-tour-btn:hover {
    background: rgba(234, 91, 12, 0.1);
    border-color: rgba(234, 91, 12, 0.3);
    transform: translateX(4px);
    box-shadow: 0 2px 12px rgba(234, 91, 12, 0.15);
}

.settings-tour-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 91, 12, 0.15);
    border-radius: 6px;
    color: #ea5b0c;
}

.settings-tour-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.settings-tour-name {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-transform: none;
}

.settings-tour-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: none;
}

.settings-tour-action {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
}

.settings-tour-btn:hover .settings-tour-action {
    color: #ea5b0c;
    transform: translateX(2px);
}

/* Tour rows (new implementation: row with info + badge + replay btn) */

.settings-tour-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-tour-row:last-child {
    border-bottom: none;
}

/* Override .settings-tour-info flex direction for the row layout */

.settings-tour-row .settings-tour-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

/* Override .settings-tour-name / .settings-tour-desc inside the row */

.settings-tour-row .settings-tour-name {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-transform: none;
}

.settings-tour-row .settings-tour-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #94a3b8;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status badge pill */

.settings-tour-status {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    line-height: 1.5;
}

.settings-tour-status--unseen {
    background: rgba(234, 91, 12, 0.2);
    color: #ea5b0c;
    border: 1px solid rgba(234, 91, 12, 0.3);
}

.settings-tour-status--dismissed {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.settings-tour-status--completed {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Reset All Tours footer area */

.settings-tours-reset {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
}

/* Options */

.settings-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    gap: 2rem;
}

.settings-option:last-child {
    border-bottom: none;
}

.settings-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.settings-label-text {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.settings-label-desc {
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    text-transform: none !important;
}

.settings-control {
    flex-shrink: 0;
}

/* Theme Selector */

.theme-selector {
    display: flex;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.25rem;
    border-radius: 8px;
}

.theme-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
    text-transform: none !important;
}

.theme-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
}

.theme-btn.active {
    color: #ea5b0c;
    background: rgba(234, 91, 12, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(234, 91, 12, 0.3);
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    margin: -1px;
}

.theme-btn svg {
    flex-shrink: 0;
}

/* Select */

.settings-select {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    color: #fff;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 180px;
    text-transform: none !important;
}

.settings-select:hover {
    border-color: rgba(234, 91, 12, 0.4);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.15);
}

.settings-select:focus {
    outline: none;
    border-color: #ea5b0c;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 2px rgba(234, 91, 12, 0.2),
        0 2px 8px rgba(234, 91, 12, 0.15);
}

.settings-select option {
    background: #1a1a1a;
    color: #fff;
}

/* Action Buttons */

.settings-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: #fff;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none !important;
}

.settings-action-btn:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(234, 91, 12, 0.4);
    color: #ea5b0c;
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.settings-action-btn--danger:hover {
    border-color: rgba(220, 38, 38, 0.3);
    color: #dc2626;
}

.settings-action-btn svg {
    flex-shrink: 0;
}

/* Info Text */

.settings-info-text {
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    text-transform: none !important;
}

/* Footer */

.settings-footer {
    display: flex;
    justify-content: flex-end;
    padding: 1.75rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-footer-btn {
    padding: 0.75rem 2rem;
    background: #ea5b0c;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-footer-btn:hover {
    background: #ff6b1c;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(234, 91, 12, 0.4),
        0 8px 32px rgba(234, 91, 12, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.settings-footer-btn:active {
    transform: translateY(0);
}

/* Responsive */

@media (max-width: 640px) {
    .settings-dialog {
        width: 95%;
        max-height: 90vh;
    }

    .settings-header,
    .settings-content,
    .settings-footer {
        padding: 1rem 1.5rem;
    }

    .settings-option {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .settings-select {
        width: 100%;
    }

    .theme-selector {
        width: 100%;
    }

    .theme-btn {
        flex: 1;
        justify-content: center;
    }
}

/* Global app settings dialog */

/**
 * User Dropdown Menu Styles
 * Modern dropdown with smooth animations and glass morphism
 */

.user-dropdown-container {
    position: relative;
    display: flex;
    align-items: center;
}

.user-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    background: rgba(50, 50, 50, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    color: #fff;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.2s ease;
    height: 40px;
}

.user-dropdown-trigger:hover {
    background: rgba(50, 50, 50, 0.5);
    border-color: rgba(234, 91, 12, 0.3);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ea5b0c, #ff8c42);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Big John', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.user-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-arrow {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Dropdown Menu */

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    background: linear-gradient(135deg, rgba(35, 35, 35, 0.97) 0%, rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
    z-index: 10000;
    animation: dropdownFadeIn 0.2s ease;
    overflow: hidden;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Header */

.dropdown-header {
    padding: 16px;
    background: rgba(234, 91, 12, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.user-info-large {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-large {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ea5b0c, #ff8c42);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-full-name {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-email {
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Divider */

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0;
}

/* Menu Items */

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: #ccc;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dropdown-item:hover {
    background: rgba(234, 91, 12, 0.1);
    color: #fff;
}

.dropdown-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.7;
}

.dropdown-item:hover .dropdown-item-icon {
    opacity: 1;
}

.dropdown-item-label {
    flex: 1;
}

/* Admin Portal Highlight */

.dropdown-item--highlight {
    color: #ea5b0c;
    font-weight: 500;
}

.dropdown-item--highlight:hover {
    background: rgba(234, 91, 12, 0.15);
    color: #ff8c42;
}

.dropdown-item--highlight .dropdown-item-icon {
    opacity: 1;
    color: #ea5b0c;
}

/* Logout Danger Style */

.dropdown-item--danger {
    color: #f44336;
}

.dropdown-item--danger:hover {
    background: rgba(244, 67, 54, 0.1);
    color: #ff5252;
}

.dropdown-item--danger .dropdown-item-icon {
    color: #f44336;
}

/* Responsive — collapse to an avatar-only circle when the header gets tight.
   Matches the command-bar's @1600 wordmark collapse (command-bar-adaptive.css)
   so the brandmark and the company name disappear together on 14-inch
   notebooks. */

@media (max-width: 1600px) {
    .user-name {
        display: none;
    }

    .dropdown-arrow {
        display: none;
    }

    .user-dropdown-trigger {
        gap: 0;
        padding: 6px;
        border-radius: 50%;
        width: 40px;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .user-dropdown-menu {
        right: -10px;
        min-width: 260px;
    }
}

/* Dark mode specific adjustments */

[data-theme="dark"] .user-dropdown-menu {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(15, 15, 15, 0.99) 100%);
}

[data-theme="light"] .user-dropdown-menu {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 245, 245, 0.99) 100%);
    border-color: rgba(234, 91, 12, 0.3);
}

[data-theme="light"] .dropdown-header {
    background: rgba(234, 91, 12, 0.08);
}

[data-theme="light"] .user-full-name {
    color: #1a1a1a;
}

[data-theme="light"] .user-email {
    color: #666;
}

[data-theme="light"] .dropdown-item {
    color: #333;
}

[data-theme="light"] .dropdown-item:hover {
    color: #1a1a1a;
}

/* User dropdown menu with profile, settings, admin access */

/**
 * Terms Modal Styles
 * Glassmorphism modal for Terms and Conditions display
 */

/* ============================================
   Modal Overlay
   ============================================ */

.terms-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 2000;
    padding: 80px 20px 20px;
    overflow-y: auto;
}

/* ============================================
   Modal Container
   ============================================ */

.terms-modal {
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ============================================
   Header
   ============================================ */

.terms-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.terms-modal-header h2 {
    font-family: 'Big John', sans-serif;
    font-size: 24px;
    margin: 0;
    color: #fff;
}

.terms-version {
    font-size: 12px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 12px;
}

/* ============================================
   Key Summary
   ============================================ */

.terms-summary {
    padding: 16px 24px;
    background: rgba(234, 91, 12, 0.08);
    border-bottom: 1px solid rgba(234, 91, 12, 0.2);
    flex-shrink: 0;
}

.terms-summary h3 {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ea5b0c;
    margin: 0 0 12px 0;
}

.terms-summary ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}

.terms-summary li {
    font-size: 13px;
    color: #94a3b8;
    padding-left: 20px;
    position: relative;
}

.terms-summary li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #ea5b0c;
}

/* ============================================
   Content Area
   ============================================ */

.terms-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.7;
}

/* Scrollbar styling */

.terms-modal-content::-webkit-scrollbar {
    width: 8px;
}

.terms-modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.terms-modal-content::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.4);
    border-radius: 4px;
}

.terms-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.6);
}

/* Content Typography */

.terms-h1 {
    font-family: 'Big John', sans-serif;
    font-size: 28px;
    color: #fff;
    margin: 0 0 24px 0;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.terms-h2 {
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    color: #ea5b0c;
    margin: 32px 0 16px 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.terms-h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.terms-paragraph {
    margin: 0 0 16px 0;
    text-align: justify;
}

/* ============================================
   Scroll Indicator
   ============================================ */

.terms-scroll-indicator {
    text-align: center;
    padding: 8px;
    background: linear-gradient(to top, rgba(26, 26, 26, 1) 0%, transparent 100%);
    color: #ea5b0c;
    font-size: 13px;
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ============================================
   Footer
   ============================================ */

.terms-modal-footer {
    padding: 20px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}

/* Checkbox Label */

.terms-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 16px;
}

.terms-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: #ea5b0c;
    cursor: pointer;
    flex-shrink: 0;
}

.terms-checkbox-label input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.terms-checkbox-label span {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.5;
    user-select: none;
}

/* Button Group */

.terms-button-group {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Buttons */

.terms-btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid;
}

.terms-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.terms-btn-primary {
    background: linear-gradient(135deg, #ea5b0c 0%, #d14e09 100%);
    border-color: #ea5b0c;
    color: #fff;
}

.terms-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #d14e09 0%, #b84308 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.3);
}

.terms-btn-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: #94a3b8;
}

.terms-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
    .terms-modal {
        max-height: 100vh;
        border-radius: 0;
    }

    .terms-modal-header h2 {
        font-size: 20px;
    }

    .terms-summary ul {
        grid-template-columns: 1fr;
    }

    .terms-button-group {
        flex-direction: column;
    }

    .terms-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Terms and Conditions modal with scrollable content */

/**
 * Demo Usage Meter (Slice B)
 * ===========================
 * Persistent "X of N cell deep dives today" bar shown in the command bar for
 * DEMO-tier users. Goal-gradient / Zeigarnik: the user sees the wall coming.
 * Theme-aware (uses theme CSS vars); cyan normally, orange near the cap.
 */

.demo-usage-meter {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  max-width: 240px;
  padding: 0;
  background: none;
  border: none;
  font-family: 'Roboto', sans-serif;
}

/* Chevron toggle for the "unlocked today" list. */

.demo-usage-meter__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  background: rgba(234, 91, 12, 0.15);
  border: 1px solid rgba(234, 91, 12, 0.45);
  border-radius: 5px;
  color: #ea5b0c;
  cursor: pointer;
  vertical-align: middle;
}

.demo-usage-meter__toggle:hover {
  background: rgba(234, 91, 12, 0.28);
  border-color: rgba(234, 91, 12, 0.7);
}

.demo-usage-meter__toggle svg {
  transition: transform 0.2s ease;
}

.demo-usage-meter__toggle.is-open svg {
  transform: rotate(180deg);
}

/* Popover list of cells unlocked today — overlays, doesn't reflow the bar. */

.demo-usage-meter__unlocked {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  min-width: 220px;
  max-width: 320px;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.96) 0%, rgba(30, 30, 30, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.demo-usage-meter__unlocked-item a,
.demo-usage-meter__unlocked-item span {
  display: block;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink, #f0f1f3);
  text-decoration: none;
  white-space: normal;
}

.demo-usage-meter__unlocked-item a:hover {
  background: rgba(234, 91, 12, 0.15);
  color: #ea5b0c;
}

.demo-usage-meter__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.demo-usage-meter__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #f0f1f3);
  white-space: nowrap;
}

.demo-usage-meter__count {
  font-variant-numeric: tabular-nums;
}

.demo-usage-meter__reset {
  font-size: 11px;
  color: var(--muted, #b5bac0);
  white-space: nowrap;
}

.demo-usage-meter__track {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: var(--line, rgba(255, 255, 255, 0.12));
  overflow: hidden;
}

.demo-usage-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 3px;
  background: #0d7c99; /* Batemo cyan */
  transition: width 0.4s ease, background-color 0.4s ease;
}

/* Near / at the cap → warm orange to signal urgency. */

.demo-usage-meter--warn .demo-usage-meter__fill {
  background: #ea5b0c; /* Batemo orange */
}

.demo-usage-meter__reassure {
  font-size: 11px;
  color: var(--muted, #b5bac0);
  white-space: nowrap;
}

/* Respect reduced-motion (also globally enforced in main.css). */

@media (prefers-reduced-motion: reduce) {
  .demo-usage-meter__fill {
    transition: none;
  }
}

/* Tighten on narrow command bars. */

@media (max-width: 900px) {
  .demo-usage-meter {
    min-width: 120px;
  }
  .demo-usage-meter__reassure {
    display: none;
  }
}

/* DEMO daily view-limit meter shown in the command bar */

/**
 * Ion Usage Meter (WS 2.2 Task A)
 * ================================
 * Insights-token budget bars for the Ion chat, shown on /assistant and in the
 * slide-over next to the deep-dive meter. Seamless by design — no standalone
 * tile/background/border, mirroring the de-tiled `.demo-usage-meter`.
 * Styled with the canonical Ion design-system tokens (--ion-*): calm cyan
 * (--accent) fill normally, brand orange (--ion-marker) near the cap;
 * theme-aware via --ion-text / --ion-border.
 */

/* Group container — the three token windows (day/week/month) + the pacing
   line, stacked as ONE separated tile directly under the Ion header. Replaces
   the old single-row layout that crammed the three meters into one line and
   let their labels overlap. */

.ion-usage-meter-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 12px;
  padding: 12px 14px;
  background: var(--ion-tile-grad), var(--ion-surface);
  border: 1px solid var(--ion-tile-border);
  border-radius: var(--ion-tile-radius);
}

/* Inside the tile the bars span its full width — no longer competing for a
   single shared row, so the 240px cap that kept them narrow is dropped. */

.ion-usage-meter-group .ion-usage-meter {
  max-width: none;
}

.ion-usage-meter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
  max-width: 240px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-body, 'Roboto', sans-serif);
}

.ion-usage-meter__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ion-usage-meter__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ion-text);
  white-space: nowrap;
}

.ion-usage-meter__count {
  font-variant-numeric: tabular-nums;
}

.ion-usage-meter__track {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: var(--ion-border);
  overflow: hidden;
}

.ion-usage-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 3px;
  background: var(--accent, #0d7c99); /* Batemo cyan — calm */
  transition: width 0.4s ease, background-color 0.4s ease;
}

/* Near / at the cap → warm orange to signal urgency. */

.ion-usage-meter--warn .ion-usage-meter__fill {
  background: var(--ion-marker); /* Batemo orange — urgent */
}

/* Respect reduced-motion (also globally enforced in main.css). */

@media (prefers-reduced-motion: reduce) {
  .ion-usage-meter__fill {
    transition: none;
  }
}

/* Tighten on narrow surfaces (matches .demo-usage-meter's breakpoint). */

@media (max-width: 900px) {
  .ion-usage-meter {
    min-width: 120px;
  }
}

/**
 * PRO-editable vs DEMO-fixed info line (Ion AI limits system, 2026-07-17).
 * Quiet, single-line caption above the pacing editor (PRO/batemo) or in its
 * place (DEMO, no editor to show).
 */

.ion-usage-meter__pacing-note {
  margin: 4px 0 0;
  font-size: 11px;
  font-family: var(--font-body, 'Roboto', sans-serif);
  color: var(--ion-text-muted);
}

.ion-usage-meter__pacing-note--fixed {
  font-style: italic;
}

/**
 * Self-service pacing editor (Ion AI limits system, 2026-07). Collapsed
 * link-style toggle by default; expands into a compact inline form. Kept
 * visually quiet — this is a power-user control, not a primary CTA.
 */

.ion-usage-meter__pacing-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin-top: 2px;
  font-size: 11px;
  font-family: var(--font-body, 'Roboto', sans-serif);
  color: var(--ion-marker);
  text-decoration: underline;
  cursor: pointer;
}

.ion-usage-meter__pacing-toggle:hover {
  color: var(--ion-text);
}

.ion-usage-meter__pacing-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding: 8px;
  border-radius: var(--ion-radius-sm);
  background: var(--ion-surface-2);
  border: 1px solid var(--ion-border);
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-size: 12px;
}

.ion-usage-meter__pacing-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ion-usage-meter__pacing-row label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ion-text);
  font-size: 11px;
}

.ion-usage-meter__pacing-row input[type='number'] {
  width: 80px;
  padding: 2px 4px;
  font-size: 12px;
}

.ion-usage-meter__pacing-checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: 4px !important;
}

.ion-usage-meter__pacing-error {
  color: var(--ion-marker);
  font-size: 11px;
}

.ion-usage-meter__pacing-actions {
  display: flex;
  gap: 8px;
}

/* DEMO Ion "X of N questions today" chat-request meter */

/**
 * Daily Limit Modal (Slice B) — the conversion event.
 * ====================================================
 * The limit-moment is the Peak-End of a demo session and the one self-standing
 * conversion lever. It must read as a reward + a launch, never a paywall.
 * On-brand (orange #ea5b0c / cyan #0d7c99), premium, focus-trapped, and
 * reduced-motion-safe (entrance also globally neutralized in main.css).
 */

.daily-limit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2100; /* above TermsModal (2000) and command bar */
  padding: 40px 20px;
  overflow-y: auto;
  animation: daily-limit-overlay-in 0.2s ease;
}

.daily-limit-modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: rgba(26, 26, 26, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(234, 91, 12, 0.35);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 60px rgba(234, 91, 12, 0.15);
  color: #cbd5e1;
  overflow: hidden;
  animation: daily-limit-modal-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Warm accent ribbon at the very top — signals "reward", not "block". */

.daily-limit-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ea5b0c 0%, #0d7c99 100%);
}

.daily-limit-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 20px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.2s, color 0.2s;
}

.daily-limit-modal__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.daily-limit-modal__body {
  padding: 32px 32px 28px;
}

/* ── 1. Peak / Ownership ─────────────────────────────── */

.daily-limit-modal__eyebrow {
  font-family: 'Big John', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ea5b0c;
  margin: 0 0 8px;
}

.daily-limit-modal__title {
  font-family: 'Big John', sans-serif;
  font-size: 26px;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 14px;
}

.daily-limit-modal__summary {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(13, 124, 153, 0.1);
  border: 1px solid rgba(13, 124, 153, 0.25);
}

.daily-limit-modal__summary-lead {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 8px;
}

.daily-limit-modal__cells {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.daily-limit-modal__cell-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  white-space: nowrap;
}

/* ── 2. Reframe / Loss ───────────────────────────────── */

.daily-limit-modal__reframe {
  font-size: 15px;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0 0 24px;
}

.daily-limit-modal__reframe strong {
  color: #fff;
}

/* ── 3. Primary CTA + risk-off microcopy ─────────────── */

.daily-limit-modal__cta {
  display: block;
  width: 100%;
  padding: 15px 24px;
  border-radius: 10px;
  /* Win over the legacy global `button { font-family: 'Big John' }` rule so the
     CTAs render Roboto (BA live-test). Scoped to this one selector — never
     touch the global rule (app-wide regression). */
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #ea5b0c 0%, #d14e09 100%);
  border: 1px solid #ea5b0c;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}

.daily-limit-modal__cta:hover {
  background: linear-gradient(135deg, #d14e09 0%, #b84308 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(234, 91, 12, 0.35);
}

.daily-limit-modal__risk-off {
  font-size: 12.5px;
  color: #94a3b8;
  text-align: center;
  margin: 10px 0 0;
}

/* Secondary CTA — self-serve "Get PRO" purchase path. Visually subordinate to
   the primary (outlined cyan, not the filled orange) but clearly a real button,
   distinct from the plain-text tertiary link. */

.daily-limit-modal__cta-secondary {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 12px 24px;
  border-radius: 10px;
  /* See primary CTA above — win over the legacy global button font rule,
     scoped to this selector only. */
  font-family: 'Roboto', sans-serif !important;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: #0d7c99;
  background: rgba(13, 124, 153, 0.08);
  border: 1px solid rgba(13, 124, 153, 0.5);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}

.daily-limit-modal__cta-secondary:hover {
  background: rgba(13, 124, 153, 0.16);
  border-color: #0d7c99;
  color: #12a3c9;
  transform: translateY(-1px);
}

/* ── 4. Social proof ─────────────────────────────────── */

.daily-limit-modal__proof {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin: 22px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  color: #94a3b8;
}

.daily-limit-modal__proof svg {
  color: #0d7c99;
  flex-shrink: 0;
}

/* ── 5 + 6. Secondary + tertiary ─────────────────────── */

.daily-limit-modal__secondary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 0;
}

.daily-limit-modal__reminder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #cbd5e1;
}

.daily-limit-modal__link-btn {
  color: #0d7c99;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  transition: color 0.2s;
}

.daily-limit-modal__link-btn:hover:not(:disabled) {
  color: #12a3c9;
}

.daily-limit-modal__link-btn:disabled {
  color: #64748b;
  text-decoration: none;
  cursor: default;
}

/* Inline confirmation after the reminder opt-in succeeds. */

.daily-limit-modal__reminder-done {
  color: #0d7c99;
  font-weight: 600;
}

/* Inline notice when the reminder opt-in fails or is declined — visible
   feedback so the link never reads as "does nothing" (Fix-Paket 2, Punkt 9). */

.daily-limit-modal__reminder-error {
  flex-basis: 100%;
  text-align: center;
  color: #f0a868;
  font-size: 12.5px;
}

.daily-limit-modal__tertiary {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px;
  font-size: 13px;
  color: #94a3b8;
  background: none;
  transition: color 0.2s;
}

.daily-limit-modal__tertiary:hover {
  color: #fff;
}

/* Entrance animations (neutralized under prefers-reduced-motion via main.css). */

@keyframes daily-limit-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes daily-limit-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
  .daily-limit-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .daily-limit-modal {
    max-width: 100%;
    border-radius: 18px 18px 0 0;
  }
  .daily-limit-modal__body {
    padding: 28px 20px 24px;
  }
  .daily-limit-modal__title {
    font-size: 22px;
  }
}

/* DEMO daily-limit conversion overlay (Peak-End moment) */

/* ============================================================================
   LOCKED METRIC TOKEN — per-value PRO lock / teaser-band chips (metric-tiering)
   ============================================================================
   Shown in place of premium measured values (impedance, thermal, batch & aging,
   DC25) for DEMO users, instead of a bare "—". Clicking opens the metric upsell.
   Base performance stays exact; only these tiered values become tokens. */

.locked-metric {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.locked-metric:focus-visible {
  outline: 2px solid rgba(234, 91, 12, 0.6);
  outline-offset: 2px;
}

.locked-metric__lock {
  flex-shrink: 0;
  opacity: 0.85;
}

/* --- Gated (locked-value) chip: "🔒 PRO mΩ" --- */

.locked-metric--gated {
  color: #ea5b0c;
  background: rgba(234, 91, 12, 0.1);
  border: 1px solid rgba(234, 91, 12, 0.28);
}

.locked-metric--gated:hover {
  background: rgba(234, 91, 12, 0.18);
  border-color: rgba(234, 91, 12, 0.45);
  box-shadow: 0 2px 8px rgba(234, 91, 12, 0.18);
}

.locked-metric__pro {
  font-family: 'Big John', 'Roboto', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

.locked-metric__unit {
  color: rgba(234, 91, 12, 0.7);
  font-weight: 500;
}

/* Visible "· 1 deep dive" cost hint — Deep-Dive unlock chips only (Grid/Table).
   Deliberately not relying on title/aria alone: invisible on touch, needs a
   hover on desktop, and the whole point is warning before a token is spent. */

.locked-metric__cost {
  color: rgba(234, 91, 12, 0.65);
  font-weight: 500;
  font-size: 0.66rem;
}

/* --- Teaser band chip: "Spread  High 🔒" --- */

.locked-metric--band {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.locked-metric--band:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(234, 91, 12, 0.4);
}

.locked-metric--band .locked-metric__lock {
  color: #ea5b0c;
}

.locked-metric__label {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.locked-metric__band-value {
  font-weight: 700;
}

/* Band severity accent on the value text (subtle — warm→teal, no neon). */

.locked-metric--band-low .locked-metric__band-value {
  color: #0d7c99;
}

.locked-metric--band-medium .locked-metric__band-value {
  color: #d9a441;
}

.locked-metric--band-high .locked-metric__band-value {
  color: #ea5b0c;
}

/* --- Aggregate "+N more measured metrics with PRO" cue --- */

.locked-metric-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(234, 91, 12, 0.08);
  border: 1px solid rgba(234, 91, 12, 0.22);
  color: #ea5b0c;
  font-family: 'Roboto', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.locked-metric-more:hover {
  background: rgba(234, 91, 12, 0.16);
  border-color: rgba(234, 91, 12, 0.4);
}

.locked-metric-more:focus-visible {
  outline: 2px solid rgba(234, 91, 12, 0.6);
  outline-offset: 2px;
}

/* --- Light-theme adjustments (theme-aware; app is dark-first) --- */

[data-theme='light'] .locked-metric--band {
  color: rgba(20, 20, 20, 0.8);
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

[data-theme='light'] .locked-metric__label {
  color: rgba(20, 20, 20, 0.5);
}

/* Reduced-motion: no hover elevation transitions. */

@media (prefers-reduced-motion: reduce) {
  .locked-metric,
  .locked-metric-more {
    transition: none;
  }
}

/* DEMO metric-tiering — per-value PRO lock/teaser chips + banner */

/**
 * Admin Demo Settings tab (Slice C+)
 * ==================================
 * Config editor + conversion funnel. Reuses the admin dashboard visual
 * language (.admin-* alerts/buttons/tables); adds a few demo-specific pieces.
 * Brand: #ea5b0c (orange) / #0d7c99 (cyan).
 */

.admin-demo-hint {
  font-size: 13px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0 0 20px;
  max-width: 720px;
}

/* env-default vs DB-override pill */

.admin-demo-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  vertical-align: middle;
}

.admin-demo-badge--override {
  color: #ea5b0c;
  background: rgba(234, 91, 12, 0.12);
  border-color: rgba(234, 91, 12, 0.35);
}

/* Config editor rows */

.admin-demo-config-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.admin-demo-config-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-demo-config-labels {
  flex: 1 1 260px;
  min-width: 220px;
}

.admin-demo-config-label {
  margin-bottom: 4px;
  color: #e2e8f0;
  font-size: 14px;
}

.admin-demo-config-help {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
}

.admin-demo-config-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-demo-input {
  width: 92px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.admin-demo-input:focus {
  outline: none;
  border-color: rgba(234, 91, 12, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

/* The default-model <select> holds long Bedrock inference-profile ids
   (e.g. eu.anthropic.claude-haiku-4-5-20251001-v1:0) — the 92px numeric
   width truncated the selected value so you couldn't read it. Size it to
   its content instead. */

.admin-demo-input--model {
  width: auto;
  min-width: 280px;
  max-width: 100%;
}

/* Read-only Insights-Token equivalent next to a $ field (Ion limits UX pass,
   2026-07-17) — admin-only convenience, $0.25/token (chat/token_units.py). */

.admin-demo-config-token-hint {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}

.admin-demo-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Ion (AI chat) demo limits — reuses .admin-demo-config-* rows via
   IonTierLimitsPanel. Separated from the demo_config grid above with a rule. */

.admin-demo-ion-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Anti-scraping controls (strict_mode + plot_bin_granularity, B7) */

.admin-demo-antiscrape-section {
  margin-bottom: 28px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-demo-antiscrape-heading {
  margin: 0 0 12px;
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 700;
}

.admin-demo-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e2e8f0;
  font-size: 14px;
  cursor: pointer;
}

.admin-demo-textarea {
  width: 100%;
  max-width: 480px;
  margin: 8px 0 4px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-family: 'Roboto Mono', 'Roboto', monospace, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.admin-demo-textarea:focus {
  outline: none;
  border-color: rgba(234, 91, 12, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.admin-demo-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-demo-bin-error {
  margin: 4px 0 12px;
  font-size: 12px;
  color: #ef4444;
}

/* Funnel */

.admin-demo-funnel-header {
  margin-top: 8px;
}

.admin-demo-funnel-table th:not(:first-child),
.admin-demo-funnel-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-demo-funnel-totals td {
  font-weight: 700;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.admin-demo-funnel-caption {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #64748b;
  max-width: 720px;
}

.admin-demo-funnel-caption strong {
  color: #0d7c99;
}

@media (max-width: 640px) {
  .admin-demo-config-row {
    flex-direction: column;
  }
  .admin-demo-config-controls {
    width: 100%;
  }
}

/* Admin Demo Settings tab (limit config editor + conversion funnel) */

/**
 * Quote Request CSS Styles
 * Styles for B2B quote request form, confirmation page, and admin quote review
 */

/* ============================================
   QUOTE REQUEST FORM
   ============================================ */

.quote-request-form {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.quote-request-form .form-section {
    margin-bottom: var(--spacing-lg);
}

.quote-request-form .form-section h3 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Country Selector */

.country-selector {
    width: 100%;
}

.country-selector__select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.country-selector__select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(234, 91, 12, 0.2);
    outline: none;
}

.country-selector__tax-hint {
    margin-top: 8px;
    font-size: 12px;
}

.country-selector__eu-hint {
    color: #81c784;
    background: rgba(76, 175, 80, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

.country-selector__non-eu-hint {
    color: #999;
}

/* Tax ID Input */

.vat-input-group {
    position: relative;
}

.vat-input-group .input-with-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.vat-input-group .validation-indicator {
    font-size: 0.85rem;
    white-space: nowrap;
}

.vat-input-group .validation-indicator.valid {
    color: var(--color-success, #4CAF50);
}

.vat-input-group .validation-indicator.invalid {
    color: var(--color-warning, #ff9800);
}

.vat-input-group .validation-indicator.pending {
    color: var(--text-secondary);
}

/* ============================================
   QUOTE CONFIRMATION PAGE
   ============================================ */

.quote-confirmation {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
}

.quote-confirmation__content {
    position: relative;
    z-index: 10;
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.quote-confirmation__icon {
    margin-bottom: var(--spacing-lg);
    animation: quote-icon-pop 0.5s ease-out;
}

@keyframes quote-icon-pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.quote-confirmation__title {
    font-family: 'Big John', sans-serif;
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.quote-confirmation__subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xl);
}

.quote-confirmation__card {
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid rgba(234, 91, 12, 0.2);
    border-radius: 16px;
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
    text-align: left;
}

.quote-confirmation__card-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-lg);
}

.quote-confirmation__card-icon {
    font-size: 1.4rem;
}

.quote-confirmation__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: steps;
}

.quote-confirmation__step {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.quote-confirmation__step:last-child {
    margin-bottom: 0;
}

.quote-confirmation__step-number {
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.quote-confirmation__step-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quote-confirmation__step-content strong {
    color: var(--text-primary);
}

.quote-confirmation__step-content span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.quote-confirmation__contact {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.quote-confirmation__email {
    color: var(--primary-color);
    text-decoration: none;
}

.quote-confirmation__email:hover {
    text-decoration: underline;
}

.quote-confirmation__actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.quote-confirmation__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 8px;
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.quote-confirmation__btn--primary {
    background: var(--primary-color);
    color: white;
}

.quote-confirmation__btn--primary:hover {
    background: #ff6a1a;
    transform: translateY(-2px);
}

.quote-confirmation__btn--secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.quote-confirmation__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   PROFILE PAGE - QUOTE STATUS
   ============================================ */

.profile-quote-status {
    background: rgba(234, 91, 12, 0.05);
    border: 1px solid rgba(234, 91, 12, 0.2);
    border-radius: 12px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.profile-quote-status-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.profile-quote-status-header h3 {
    margin: 0;
    font-size: 1rem;
}

.profile-quote-status-header svg {
    color: var(--primary-color);
}

.profile-quote-badge {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: var(--spacing-md);
}

.profile-quote-badge-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.profile-quote-badge-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-quote-badge-label {
    font-weight: 600;
    color: var(--text-primary);
}

.profile-quote-badge-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Status colors */

.profile-quote-badge--orange {
    border-left: 4px solid #ff9800;
}

.profile-quote-badge--blue {
    border-left: 4px solid #2196f3;
}

.profile-quote-badge--cyan {
    border-left: 4px solid #00bcd4;
}

.profile-quote-badge--green {
    border-left: 4px solid #4caf50;
}

.profile-quote-badge--red {
    border-left: 4px solid #f44336;
}

.profile-quote-details {
    margin-top: var(--spacing-md);
}

.profile-quote-action {
    background: rgba(234, 91, 12, 0.1);
    border-radius: 8px;
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.profile-quote-action p {
    margin: 0;
    color: var(--text-primary);
}

.profile-quote-email-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ============================================
   ADMIN - QUOTE REVIEW MODAL
   ============================================ */

.admin-quote-info {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.admin-quote-info h4 {
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-quote-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.admin-quote-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-quote-info-item--full {
    grid-column: 1 / -1;
}

.admin-quote-info-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-quote-info-value {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.admin-vat-status {
    margin-left: 8px;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.admin-vat-status--valid {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
}

.admin-vat-status--invalid,
.admin-vat-status--not_checked {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
}

/* Action Toggle */

.admin-action-toggle {
    display: flex;
    gap: var(--spacing-md);
}

.admin-action-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-action-option input {
    display: none;
}

.admin-action-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.admin-action-option--active {
    border-color: var(--primary-color);
    background: rgba(234, 91, 12, 0.1);
}

.admin-action-option--danger.admin-action-option--active {
    border-color: #f44336;
    background: rgba(244, 67, 54, 0.1);
}

/* Approve Options */

.admin-approve-options {
    background: rgba(76, 175, 80, 0.05);
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: 8px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.admin-approve-options h4 {
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
    font-size: 0.9rem;
}

/* Decline Options */

.admin-decline-options {
    background: rgba(244, 67, 54, 0.05);
    border: 1px solid rgba(244, 67, 54, 0.2);
    border-radius: 8px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* Price Preview */

.admin-price-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: var(--spacing-md) var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.admin-price-preview-amount {
    font-family: 'Big John', sans-serif;
    font-size: 1.5rem;
    color: var(--primary-color);
}

/* Admin icon button variants */

.admin-icon-btn--primary {
    background: rgba(234, 91, 12, 0.1);
    color: var(--primary-color);
    border-color: rgba(234, 91, 12, 0.3);
}

.admin-icon-btn--primary:hover {
    background: rgba(234, 91, 12, 0.2);
}

/* Price Display Component */

.price-display {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.price-display .price-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    color: var(--text-secondary);
}

.price-display .price-row.vat-row {
    font-size: 0.9rem;
}

.price-display .price-row.total-row {
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-md);
    color: var(--text-primary);
    font-weight: 600;
}

.price-display .total-price {
    color: var(--primary-color);
    font-size: 1.25rem;
}

.price-display .vat-note {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin-top: var(--spacing-md);
    font-style: italic;
}

/* Status Badges */

.status-badge {
    display: inline-flex;
    flex-direction: column;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
}

.status-badge.status-orange {
    border-left: 4px solid #ff9800;
}

.status-badge.status-blue {
    border-left: 4px solid #2196f3;
}

.status-badge.status-green {
    border-left: 4px solid #4caf50;
}

.status-badge.status-red {
    border-left: 4px solid #f44336;
}

.status-badge .status-label {
    font-weight: 600;
    color: var(--text-primary);
}

.status-badge .status-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .quote-confirmation__title {
        font-size: 1.5rem;
    }

    .quote-confirmation__actions {
        flex-direction: column;
    }

    .quote-confirmation__btn {
        width: 100%;
    }

    .admin-quote-info-grid {
        grid-template-columns: 1fr;
    }

    .admin-action-toggle {
        flex-direction: column;
    }

    .admin-form-row {
        flex-direction: column;
    }
}

/* B2B Quote Request form styles, country selector, VAT display */

/* Nurture Consent Banner - subtle top bar for demo users */

.nurture-consent-banner {
    background: var(--card-bg, #1a1a1a);
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    padding: 12px 24px;
}

.nurture-consent-banner__content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.nurture-consent-banner__text {
    font-size: 14px;
    color: var(--text-secondary, #ccc);
}

.nurture-consent-banner__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.nurture-consent-banner__btn {
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s;
}

.nurture-consent-banner__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nurture-consent-banner__btn--accept {
    background: #ea5b0c;
    color: #fff;
}

.nurture-consent-banner__btn--accept:hover:not(:disabled) {
    background: #d4520b;
}

.nurture-consent-banner__btn--decline {
    background: transparent;
    color: var(--text-secondary, #999);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
}

.nurture-consent-banner__btn--decline:hover:not(:disabled) {
    border-color: var(--text-secondary, #999);
}

/* Nurture consent banner for demo users to opt-in to product tips */

/* =========================================
   Admin AI Tab — dev sandbox chat UI
   Lives inside the Admin Portal content pane.
   Visual language: Batemo dark theme + orange doc-marker from Ion design lock.
   ========================================= */

.admin-ai-tab {
  --ai-border: var(--border-light);
  --ai-border-strong: var(--border-medium);
  --ai-pad: var(--space-xl);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: calc(100vh - 180px);
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---------- Header ---------- */

.admin-ai-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--ai-pad);
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border-bottom: 1px solid var(--ai-border);
}

.admin-ai-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
}

.admin-ai-header-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand), #ff7a2f);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(234, 91, 12, 0.25);
  flex-shrink: 0;
}

.admin-ai-header-title {
  margin: 0 0 2px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.1px;
}

.admin-ai-header-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
  max-width: 640px;
}

.admin-ai-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* ---------- Health pill ---------- */

.admin-ai-health {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15px;
  color: var(--text-secondary);
  background: var(--glass-bg);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-full);
}

.admin-ai-health-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.admin-ai-health.is-ok .admin-ai-health-dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-light); }

.admin-ai-health.is-ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); }

.admin-ai-health.is-warn .admin-ai-health-dot { background: var(--warning); }

.admin-ai-health.is-warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }

.admin-ai-health.is-error .admin-ai-health-dot { background: var(--error); }

.admin-ai-health.is-error { color: var(--error); border-color: color-mix(in srgb, var(--error) 35%, transparent); }

.admin-ai-health.is-loading .admin-ai-health-dot { animation: admin-ai-pulse 1.3s ease-in-out infinite; }

/* ---------- Buttons ---------- */

.admin-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  /* Filled brand primary by DEFAULT — a bare `.admin-ai-btn` (the Knowledge
     subtab's "New entry" / "Save") must read as a real button, not floating
     text on the dark background. The --ghost / --danger / --stop variants
     override the fill below. */
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast);
}

.admin-ai-btn:not(:disabled):hover {
  background: var(--brand-hover);
}

.admin-ai-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.admin-ai-btn--ghost {
  background: transparent;
  border-color: var(--ai-border);
  color: var(--text-secondary);
}

.admin-ai-btn--ghost:not(:disabled):hover {
  border-color: var(--ai-border-strong);
  color: var(--text-primary);
  background: var(--glass-bg-hover);
}

.admin-ai-btn--send {
  background: var(--brand);
  color: #fff;
  padding-inline: 18px;
}

.admin-ai-btn--send:not(:disabled):hover {
  background: var(--brand-hover);
  transform: translateY(-1px);
}

.admin-ai-btn--send:not(:disabled):active {
  background: var(--brand-active);
  transform: translateY(0);
}

.admin-ai-btn--stop {
  background: rgba(239, 68, 68, 0.12);
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
  color: var(--error);
  padding-inline: 14px;
}

.admin-ai-btn--stop:hover {
  background: rgba(239, 68, 68, 0.2);
}

.admin-ai-stop-icon {
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 1px;
  display: inline-block;
}

/* ---------- Body ---------- */

.admin-ai-body {
  display: grid;
  grid-template-columns: 0 1fr;
  grid-template-rows: 1fr;
  flex: 1;
  min-height: 0;
  transition: grid-template-columns var(--transition-slow);
}

.admin-ai-tab.has-history .admin-ai-body {
  grid-template-columns: 280px 1fr;
}

.admin-ai-conversation {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* ---------- History sidebar ---------- */

.admin-ai-history {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg-0);
  border-right: 1px solid var(--ai-border);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  overflow: hidden;
}

.admin-ai-history.is-open {
  opacity: 1;
  pointer-events: auto;
}

.admin-ai-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px 14px;
  border-bottom: 1px solid var(--ai-border);
}

.admin-ai-history-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.admin-ai-history-header-actions {
  display: flex;
  gap: 4px;
}

.admin-ai-icon-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.admin-ai-icon-btn:hover {
  color: var(--text-primary);
  background: var(--glass-bg-hover);
  border-color: var(--ai-border);
}

.admin-ai-history-open {
  margin-right: 6px;
}

.admin-ai-history-new {
  margin: 10px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand);
  background: rgba(234, 91, 12, 0.08);
  border: 1px dashed color-mix(in srgb, var(--brand) 40%, transparent);
  border-radius: var(--radius);
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.admin-ai-history-new:hover {
  background: rgba(234, 91, 12, 0.14);
  border-color: var(--brand);
}

.admin-ai-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-ai-history-list::-webkit-scrollbar { width: 8px; }

.admin-ai-history-list::-webkit-scrollbar-thumb {
  background: var(--ai-border);
  border-radius: 4px;
  border: 2px solid var(--bg-0);
}

.admin-ai-history-empty {
  padding: 20px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.admin-ai-history-error { color: var(--error); }

.admin-ai-link {
  font: inherit;
  color: var(--brand);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.admin-ai-history-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.admin-ai-history-row:hover {
  background: var(--glass-bg-hover);
  border-color: var(--ai-border);
}

.admin-ai-history-row.is-active {
  background: rgba(234, 91, 12, 0.1);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}

.admin-ai-history-row.is-active .admin-ai-history-row-title {
  color: var(--text-primary);
}

.admin-ai-history-row-main {
  font: inherit;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-ai-history-row-title {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.admin-ai-history-row-untitled {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}

.admin-ai-history-row-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}

.admin-ai-history-row-delete {
  font: inherit;
  font-size: 14px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  padding: 0 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.admin-ai-history-row:hover .admin-ai-history-row-delete {
  opacity: 1;
}

.admin-ai-history-row-delete:hover {
  color: var(--error);
}

.admin-ai-conversation-loading {
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  margin: auto 0;
  align-self: center;
  width: 100%;
}

.admin-ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--ai-pad);
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-behavior: smooth;
}

.admin-ai-messages::-webkit-scrollbar { width: 10px; }

.admin-ai-messages::-webkit-scrollbar-track { background: transparent; }

.admin-ai-messages::-webkit-scrollbar-thumb {
  background: var(--ai-border);
  border-radius: 6px;
  border: 2px solid var(--bg-1);
}

/* ---------- Empty state ---------- */

.admin-ai-empty {
  margin: auto 0;
  text-align: center;
  max-width: 540px;
  align-self: center;
  padding: var(--space-2xl) var(--space-xl);
}

.admin-ai-empty-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  background: linear-gradient(90deg, var(--brand), #ff9250);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.admin-ai-empty-sub {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-tertiary);
  margin-bottom: var(--space-xl);
}

.admin-ai-empty-sub code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  background: var(--bg-3);
  border-radius: 3px;
  color: var(--text-secondary);
}

.admin-ai-empty-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.admin-ai-chip {
  font: inherit;
  font-size: 12px;
  padding: 7px 12px;
  background: var(--glass-bg);
  border: 1px solid var(--ai-border);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.admin-ai-chip:hover {
  background: var(--glass-bg-hover);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--ai-border));
  color: var(--text-primary);
}

/* ---------- User bubble ---------- */

.admin-ai-user-row {
  display: flex;
  justify-content: flex-end;
}

.admin-ai-user-bubble {
  max-width: min(72%, 680px);
  padding: 10px 14px;
  background: var(--bg-3);
  border: 1px solid var(--glass-border);
  border-radius: 14px 14px 4px 14px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ---------- Assistant doc-block ---------- */

.admin-ai-doc-block {
  position: relative;
  padding: 14px 18px 14px 22px;
  border-left: 2px solid var(--brand);
  background: linear-gradient(90deg, rgba(234, 91, 12, 0.04) 0%, transparent 60%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  max-width: 100%;
}

.admin-ai-doc-block--error {
  border-left-color: var(--error);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, transparent 60%);
}

.admin-ai-doc-block--aborted {
  border-left-color: var(--warning);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.05) 0%, transparent 60%);
}

.admin-ai-doc-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.admin-ai-doc-marker {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.18);
}

.admin-ai-doc-name {
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.15em;
}

.admin-ai-streaming-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--brand);
  text-transform: none;
  letter-spacing: 0.15px;
  margin-left: auto;
}

.admin-ai-streaming-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  animation: admin-ai-pulse 1.2s ease-in-out infinite;
}

.admin-ai-doc-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.admin-ai-streaming-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--brand);
  animation: admin-ai-blink 1s steps(2, start) infinite;
}

.admin-ai-doc-body--skeleton {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-ai-skeleton-line {
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: admin-ai-shimmer 1.6s ease-in-out infinite;
  width: 92%;
}

.admin-ai-skeleton-line--short { width: 58%; }

/* Tool-call card container — a small stack of expandable cards rendered
   between the doc body and the per-message stats. The cards themselves
   come from ion.css (.ion-tool-card …) so they look identical on the
   admin sandbox and on BA's customer surfaces. */

.admin-ai-tool-calls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.admin-ai-doc-error {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--error-light);
  border: 1px solid color-mix(in srgb, var(--error) 40%, transparent);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--error);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-ai-doc-error strong {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
}

.admin-ai-message-stats {
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-ai-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-ai-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 11px;
  background: var(--glass-bg);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  line-height: 1.4;
}

.admin-ai-stat-pill-label {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.admin-ai-stat-pill-value {
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-ai-stat-sep {
  color: var(--text-muted);
}

.admin-ai-stat-cache {
  color: var(--brand);
}

.admin-ai-stat-pill--cost {
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  background: rgba(234, 91, 12, 0.08);
}

.admin-ai-stat-pill--cost .admin-ai-stat-pill-value {
  color: var(--brand);
  font-weight: 600;
}

.admin-ai-stats-timing {
  font-size: 11px;
  color: var(--text-muted);
}

/* ---------- Composer ---------- */

.admin-ai-composer {
  padding: var(--space-md) var(--ai-pad) var(--space-lg);
  border-top: 1px solid var(--ai-border);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.admin-ai-input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-1);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  resize: none;
  outline: none;
  max-height: 180px;
  min-height: 40px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-ai-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.15);
}

.admin-ai-input::placeholder {
  color: var(--text-muted);
}

.admin-ai-input:disabled {
  color: var(--text-tertiary);
  background: var(--bg-2);
}

.admin-ai-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.admin-ai-composer-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.admin-ai-model-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 12px;
  background: var(--glass-bg);
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-full);
  font-size: 11px;
  letter-spacing: 0.15px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.admin-ai-model-select:hover {
  border-color: var(--ai-border-strong);
  background: var(--glass-bg-hover);
}

.admin-ai-model-select-label {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.18em;
}

.admin-ai-model-select-input {
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
  padding-right: 4px;
}

.admin-ai-model-select-input:disabled {
  cursor: not-allowed;
  color: var(--text-tertiary);
}

.admin-ai-model-select-input option {
  background: var(--bg-2);
  color: var(--text-primary);
}

.admin-ai-quota {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.admin-ai-quota-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.12);
}

.admin-ai-quota strong {
  color: var(--brand);
  font-weight: 600;
}

/* ---------- Animations ---------- */

@keyframes admin-ai-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

@keyframes admin-ai-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

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

@media (prefers-reduced-motion: reduce) {
  .admin-ai-streaming-cursor,
  .admin-ai-streaming-dot,
  .admin-ai-quota-dot,
  .admin-ai-skeleton-line,
  .admin-ai-health-dot {
    animation: none;
  }
  .admin-ai-btn--send:not(:disabled):hover { transform: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .admin-ai-tab { --ai-pad: var(--space-md); }
  .admin-ai-header {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-ai-header-right { justify-content: flex-start; flex-wrap: wrap; }
  .admin-ai-header-sub { max-width: none; }
  /* On narrow viewports the sidebar becomes an overlay, not a column. */
  .admin-ai-tab.has-history .admin-ai-body { grid-template-columns: 1fr; }
  .admin-ai-history.is-open {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(85vw, 320px);
    z-index: 10;
    box-shadow: var(--shadow-xl);
  }
  .admin-ai-body { position: relative; }
}

/* Admin AI tab — dev-sandbox chat surface for Bedrock pipeline testing */

/* =========================================
   Admin AI Management tab — per-user chat config + kill-switch
   Visual language matches AdminAiTab (Batemo dark + brand accents).
   ========================================= */

.admin-aim-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  min-height: calc(100vh - 180px);
}

.admin-aim-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* Export / Import (full-admin only) + New-entry, grouped at the header's right. */

.admin-aim-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.admin-aim-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-aim-sub {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: var(--text-tertiary);
  max-width: 640px;
  line-height: 1.5;
}

/* PRO tier-limits panel (IonTierLimitsPanel; reuses .admin-demo-config-* rows
   from admin-demo-tab.css). Sits between the header and the users table. */

.admin-aim-tier-section {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.admin-aim-tier-hint {
  margin: 0 0 var(--space-md);
}

/* ── Tier-limits matrix (Budgets × Tiers) ──────────────────────────────── */

.ion-matrix-header {
  margin-bottom: var(--space-md);
}

/* Horizontal scroll on narrow viewports rather than squashing the columns. */

.ion-matrix-scroll {
  overflow-x: auto;
}

.ion-matrix-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) repeat(4, minmax(140px, 1fr));
  gap: 1px;                               /* the gap IS the grid lines */
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 720px;
}

.ion-matrix-corner,
.ion-matrix-tier-head,
.ion-matrix-row-label {
  background: var(--bg-3);
}

.ion-matrix-tier-head {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}

.ion-matrix-tier-name {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ion-matrix-tier-sub {
  font-size: 10px;
  color: var(--text-tertiary);
}

.ion-matrix-row-label {
  padding: 12px;
}

.ion-matrix-row-title {
  display: block;
  font-weight: 600;
  font-size: 12.5px;
}

.ion-matrix-row-help {
  margin: 4px 0 0;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-tertiary);
}

.ion-matrix-cell {
  background: var(--glass-bg);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ion-matrix-cell--na {
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}

.ion-matrix-cell-input {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ion-matrix-cell-input .admin-demo-input {
  width: 5rem;
  min-width: 0;
}

.ion-matrix-save {
  padding: 4px 10px;
}

.ion-matrix-cell-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ion-matrix-tokens {
  font-size: 10.5px;
  color: var(--text-tertiary);
}

.ion-matrix-reset {
  background: none;
  border: none;
  padding: 0;
  font-size: 10.5px;
  color: var(--text-tertiary);
  text-decoration: underline;
  cursor: pointer;
}

.ion-matrix-reset:disabled {
  opacity: 0.5;
  cursor: default;
}

.admin-aim-killswitch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--glass-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  flex-wrap: wrap;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.admin-aim-killswitch.is-active {
  border-color: color-mix(in srgb, var(--error) 50%, transparent);
  background: rgba(239, 68, 68, 0.08);
}

.admin-aim-killswitch-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.admin-aim-killswitch-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.admin-aim-killswitch-state.is-on { color: var(--error); }

.admin-aim-killswitch-state.is-off { color: var(--text-tertiary); }

.admin-aim-killswitch-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.admin-aim-killswitch-state.is-on .admin-aim-killswitch-dot {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
  animation: admin-aim-pulse 1.6s ease-in-out infinite;
}

@keyframes admin-aim-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.admin-aim-killswitch-btn {
  font: inherit;
  font-size: 11px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.admin-aim-killswitch-btn:hover {
  background: var(--glass-bg-hover);
  color: var(--text-primary);
}

.admin-aim-killswitch-btn.is-danger {
  border-color: color-mix(in srgb, var(--error) 50%, transparent);
  color: var(--error);
}

.admin-aim-killswitch-btn.is-danger:hover {
  background: rgba(239, 68, 68, 0.12);
}

/* ---------- Toolbar ---------- */

.admin-aim-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-aim-search {
  font: inherit;
  font-size: 13px;
  padding: 7px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-primary);
  min-width: 240px;
  outline: none;
}

.admin-aim-search:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.15);
}

.admin-aim-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.admin-aim-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}

.admin-aim-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

.admin-aim-error-banner {
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--error-light);
  border: 1px solid color-mix(in srgb, var(--error) 40%, transparent);
  color: var(--error);
  font-size: 12px;
}

/* ---------- Table ---------- */

.admin-aim-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.admin-aim-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.admin-aim-table th {
  position: sticky;
  top: 0;
  background: var(--bg-2);
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
}

.admin-aim-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: middle;
}

.admin-aim-table tr:hover td {
  background: var(--glass-bg-hover);
}

.admin-aim-table tr.is-admin td {
  background: rgba(234, 91, 12, 0.04);
}

.admin-aim-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 24px;
}

.admin-aim-user-cell {
  display: flex;
  flex-direction: column;
}

.admin-aim-user-email {
  color: var(--text-primary);
  font-weight: 500;
}

.admin-aim-user-name {
  font-size: 11px;
  color: var(--text-muted);
}

/* ---------- Pills ---------- */

.admin-aim-tier-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.admin-aim-tier-free { background: var(--bg-3); color: var(--text-tertiary); }

.admin-aim-tier-demo { background: rgba(13, 124, 153, 0.18); color: #5ec3da; }

.admin-aim-tier-pro  { background: rgba(234, 91, 12, 0.20); color: var(--brand-hover); }

.admin-aim-state-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-medium);
  color: var(--text-tertiary);
}

.admin-aim-state-pill.is-on      { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); background: rgba(16, 185, 129, 0.10); }

.admin-aim-state-pill.is-off     { color: var(--error);   border-color: color-mix(in srgb, var(--error) 35%, transparent);   background: rgba(239, 68, 68, 0.10); }

.admin-aim-state-pill.is-inherit { color: var(--text-tertiary); }

.admin-aim-state-pill.is-admin   { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: rgba(234, 91, 12, 0.12); }

/* Effective chat-limit profile in the CHAT column. UNLIMITED = privileged role
   or internal-tester flag (amber, distinct from the tier pills); PRO/DEMO mirror
   the tier colours so "which limits apply" reads at a glance. */

.admin-aim-state-pill.is-unlimited { color: #e0a53b; border-color: color-mix(in srgb, #e0a53b 45%, transparent); background: rgba(224, 165, 59, 0.12); }

.admin-aim-state-pill.is-tier-pro  { color: var(--brand-hover); border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: rgba(234, 91, 12, 0.12); }

.admin-aim-state-pill.is-tier-demo { color: #5ec3da; border-color: color-mix(in srgb, #0d7c99 40%, transparent); background: rgba(13, 124, 153, 0.14); }

/* Resolved tier/profile column (Ion AI limits system, 2026-07) — 'pro' /
   'demo' / 'batemo' / 'none'. Mirrors the tier-pill palette; batemo gets its
   own amber-adjacent tone so it reads distinct from plain PRO at a glance. */

.admin-aim-profile-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.admin-aim-profile-pill.is-pro    { color: var(--brand-hover); border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: rgba(234, 91, 12, 0.12); }

.admin-aim-profile-pill.is-demo   { color: #5ec3da; border-color: color-mix(in srgb, #0d7c99 40%, transparent); background: rgba(13, 124, 153, 0.14); }

.admin-aim-profile-pill.is-batemo { color: #c9a53b; border-color: color-mix(in srgb, #c9a53b 40%, transparent); background: rgba(201, 165, 59, 0.14); }

.admin-aim-profile-pill.is-none   { color: var(--text-tertiary); }

/* Small helper text under a drawer field (e.g. the unlimited-tester toggle). */

.admin-aim-field-hint {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-tertiary);
}

/* Section header inside a drawer, grouping fields under a badge (e.g. the
   Eval Cases editor's Deterministic / Probabilistic / metadata groups —
   see AdminIonEvalCasesSubtab.jsx). Reuses .admin-badge for the pill. */

.admin-aim-field-group-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: var(--space-md);
  border-top: 1px dashed var(--border-medium);
}

.admin-aim-field-group-header:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.admin-aim-field-group-desc {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* "AI Flow" type tag next to a proposal topic (Review + My Submissions) so a
   reviewer knows the body diff is a structured flow spec, not prose. */

.admin-aim-flow-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  color: #5ec3da;
  background: rgba(13, 124, 153, 0.14);
  border: 1px solid color-mix(in srgb, #0d7c99 40%, transparent);
}

/* ---------- Progress bars ---------- */

.admin-aim-bar {
  position: relative;
  width: 120px;
  height: 8px;
  background: var(--bg-3);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.admin-aim-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition);
}

.admin-aim-bar-fill.is-ok       { background: var(--success); }

.admin-aim-bar-fill.is-warn     { background: var(--warning); }

.admin-aim-bar-fill.is-critical { background: var(--error); }

.admin-aim-bar-unlimited        { background: var(--brand); }

.admin-aim-bar-label {
  position: absolute;
  top: -16px;
  left: 0;
  font-size: 10px;
  color: var(--text-muted);
}

.admin-aim-bar-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.admin-aim-rel {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Edit drawer (modal) ---------- */

.admin-aim-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  animation: admin-aim-fade-in 0.18s ease;
}

/* Centered dialog (was a right-edge slide-over that read as "stuck to the
   top" of the panel). Auto-height card, capped at 90vh with its body
   scrolling. */

.admin-aim-drawer {
  width: min(680px, 100%);
  max-height: 90vh;
  background: var(--bg-1);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  animation: admin-aim-pop-in 0.2s ease;
}

@keyframes admin-aim-fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes admin-aim-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.admin-aim-drawer-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
}

.admin-aim-drawer-headinfo {
  min-width: 0;
}

.admin-aim-drawer-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
}

.admin-aim-drawer-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-aim-icon-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-size: 16px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
}

.admin-aim-icon-btn:hover {
  color: var(--text-primary);
  background: var(--glass-bg-hover);
}

.admin-aim-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.admin-aim-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.admin-aim-field label {
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}

.admin-aim-field input[type='number'],
.admin-aim-field input[type='text'],
.admin-aim-field select,
.admin-aim-field textarea {
  font: inherit;
  font-size: 14px;
  padding: 8px 11px;
  background: var(--bg-2);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  border-radius: var(--radius);
  outline: none;
}

/* Textareas were unstyled → browser-default WHITE on the dark theme.
   Inherit the dark field look; allow vertical resize. */

.admin-aim-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.admin-aim-field input:focus,
.admin-aim-field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.15);
}

.admin-aim-field input::placeholder,
.admin-aim-field textarea::placeholder {
  color: var(--text-tertiary);
}

.admin-aim-field input:disabled {
  opacity: 0.5;
}

.admin-aim-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* Segmented control for chat-access — replaces vertical radios. */

.admin-aim-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--bg-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 2px;
  gap: 2px;
}

.admin-aim-seg {
  font: inherit;
  font-size: 12px;
  padding: 7px 8px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.admin-aim-seg:hover {
  background: var(--glass-bg-hover);
}

.admin-aim-seg.is-active {
  background: var(--brand);
  color: #fff;
}

.admin-aim-admin-note {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(234, 91, 12, 0.08);
  border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

.admin-aim-error {
  padding: 8px 12px;
  background: var(--error-light);
  border: 1px solid color-mix(in srgb, var(--error) 40%, transparent);
  border-radius: var(--radius);
  color: var(--error);
  font-size: 12px;
}

.admin-aim-success {
  padding: 8px 12px;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
  border-radius: var(--radius);
  color: var(--success);
  font-size: 12px;
}

/* Grant-top-up mini-form in the edit drawer (Ion AI limits system, 2026-07) —
   visually separated from the base-limit fields above it since it's a
   different kind of action (one-off cycle bump, not a persistent setting). */

.admin-aim-topup-section {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--border-medium);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-aim-drawer-footer {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-light);
  background: var(--bg-2);
}

/* ============================================================
   Sub-tabs (Usages | Knowledge) — top-of-tab pills
   ============================================================ */

.admin-aim-subtabs {
  display: flex;
  gap: 4px;
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-light);
}

.admin-aim-subtab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: -1px;
}

.admin-aim-subtab:hover {
  color: var(--text-primary);
}

.admin-aim-subtab.is-active {
  color: var(--brand, #ea5b0c);
  border-bottom-color: var(--brand, #ea5b0c);
}

.admin-aim-subtab-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ============================================================
   Knowledge sub-tab specifics
   ============================================================ */

.admin-aim-summary {
  color: var(--text-muted, #888);
  font-size: 12px;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-aim-table tr.is-inactive {
  opacity: 0.55;
}

.admin-aim-meta code,
.admin-aim-table code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
}

.admin-aim-warning {
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(220, 160, 50, 0.4);
  background: rgba(220, 160, 50, 0.08);
  color: #b07a14;
  font-size: 12px;
  border-radius: 4px;
}

.admin-aim-field-help {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, #888);
}

.admin-aim-monospace {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13.5px;
  line-height: 1.55;
}

.admin-aim-drawer--wide {
  width: min(820px, 100%);
}

.admin-ai-btn--danger:not(:disabled):hover {
  background: rgba(220, 60, 60, 0.2);
}

.admin-aim-spacer {
  flex: 1;
}

.admin-ai-btn--danger {
  background: rgba(220, 60, 60, 0.12);
  border-color: rgba(220, 60, 60, 0.4);
  color: #cc4040;
}

.admin-aim-field input.is-invalid,
.admin-aim-field textarea.is-invalid {
  border-color: rgba(220, 60, 60, 0.6);
}

/* ============================================================
   Knowledge Review subtab (approval queue)
   ============================================================ */

.admin-aim-section-title {
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.admin-aim-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--brand);
  border-radius: 9px;
}

.admin-aim-proposal-action {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  background: var(--bg-2);
}

.admin-aim-proposal-action.is-create {
  color: #2f8f4e;
  border-color: rgba(47, 143, 78, 0.4);
  background: rgba(47, 143, 78, 0.1);
}

.admin-aim-proposal-action.is-deactivate {
  color: #cc4040;
  border-color: rgba(220, 60, 60, 0.4);
  background: rgba(220, 60, 60, 0.1);
}

.admin-aim-proposal-warn {
  color: #b07a14;
  font-weight: 600;
}

.admin-aim-diff-field {
  margin-bottom: var(--space-md);
}

.admin-aim-diff-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 4px;
}

.admin-aim-diff-field.is-changed .admin-aim-diff-label {
  color: var(--brand);
}

.admin-aim-diff-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.admin-aim-diff-col-head {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-bottom: 3px;
}

.admin-aim-diff-pre {
  margin: 0;
  padding: 8px 10px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}

.admin-aim-diff-field.is-changed .admin-aim-diff-cols
  .admin-aim-diff-col:last-child .admin-aim-diff-pre {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}

.admin-aim-editors {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}

/* =========================================
   AI Flows editor (Sales-Selection flow editor)
   ========================================= */

.admin-flow-table code,
.admin-flow-detail code {
  font-size: 0.85em;
  color: var(--text-secondary);
}

.admin-flow-row--off {
  opacity: 0.55;
}

.admin-flow-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  margin-right: var(--space-sm);
  background: var(--text-tertiary);
}

.admin-flow-dot.is-on {
  background: var(--success);
}

.admin-flow-dot.is-off {
  background: var(--text-tertiary);
}

.admin-flow-badge {
  display: inline-block;
  margin-left: var(--space-sm);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
}

.admin-flow-badge--err {
  background: var(--error-light);
  color: var(--error);
}

/* --- Detail / editor --- */

.admin-flow-detail__bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--space-sm) 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-light);
}

.admin-flow-detail__title {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
}

.admin-flow-dirty {
  color: var(--warning);
  font-size: 0.8rem;
}

.admin-flow-saved {
  color: var(--success);
  font-size: 0.8rem;
}

.admin-flow-note {
  margin: var(--space-sm) 0;
  font-size: 0.85rem;
}

.admin-flow-note--muted {
  color: var(--text-muted);
}

.admin-flow-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}

.admin-flow-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.admin-flow-hint {
  margin: 4px 0 var(--space-sm);
  font-size: 0.82rem;
  color: var(--text-muted);
}

.admin-flow-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.admin-flow-list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.admin-flow-row-controls {
  display: inline-flex;
  gap: 2px;
}

.admin-flow-remove {
  color: var(--error);
}

/* Constraints / weights rows: metric + inputs + controls on one line. */

.admin-flow-constraint-row,
.admin-flow-weight-row,
.admin-flow-opt-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.admin-flow-metric {
  min-width: 220px;
  flex: 1 1 220px;
}

/* The metric picker carries `flex: 1 1 220px` for the horizontal constraint /
   weight rows. Inside the vertical .admin-aim-field (Plot axes) that flex-basis
   becomes a 220px HEIGHT — neutralize it and give the axis dropdowns the same
   dark, normal-height look as the Identity fields. */

.admin-aim-field .admin-flow-metric {
  flex: none;
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  padding: 8px 11px;
  background: var(--bg-2);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  border-radius: var(--radius);
  outline: none;
}

/* Defaults / Disclaimers textareas were unstyled → browser-default white and
   only ~20 cols wide. Make them full-width, dark, and comfortably tall. */

.admin-flow-detail .admin-aim-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 14px;
  padding: 8px 11px;
  background: var(--bg-2);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  border-radius: var(--radius);
  outline: none;
  resize: vertical;
  line-height: 1.5;
  min-height: 84px;
}

.admin-flow-detail .admin-aim-textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.15);
}

.admin-flow-detail .admin-aim-textarea::placeholder {
  color: var(--text-tertiary);
}

.admin-flow-num {
  width: 90px;
}

.admin-flow-unit {
  width: 80px;
}

.admin-flow-op,
.admin-flow-kind {
  width: auto;
}

.admin-flow-list-vals {
  flex: 1 1 240px;
}

.admin-flow-slider {
  flex: 1 1 140px;
}

.admin-flow-min {
  white-space: nowrap;
}

.admin-flow-weights-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.admin-flow-sum {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.admin-flow-sum.is-ok {
  color: var(--success);
}

.admin-flow-sum.is-warn {
  color: var(--warning);
}

/* Questions */

.admin-flow-q-card {
  padding: var(--space-md);
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.admin-flow-q-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.admin-flow-q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
  flex: none;
}

.admin-flow-q-slug {
  flex: 1;
}

.admin-flow-q-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.admin-flow-options {
  margin-top: var(--space-sm);
  padding-left: var(--space-md);
  border-left: 2px solid var(--border-light);
}

.admin-flow-options__label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.admin-flow-add {
  margin-top: var(--space-sm);
}

/* =========================================
   Flow-Schema v2 — intro, per-question phase/input, weighting questions,
   weight rules (advanced JSON), system requirements map.
   ========================================= */

.admin-flow-intro {
  margin-top: var(--space-md);
}

.admin-flow-q-v2-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm);
}

.admin-flow-q-phase,
.admin-flow-q-input-type {
  min-width: 140px;
}

.admin-flow-q-input-unit {
  min-width: 90px;
}

.admin-flow-q-input-bound {
  min-width: 90px;
}

.admin-flow-wq-mapsto {
  margin-top: var(--space-sm);
  padding-left: var(--space-md);
  border-left: 2px solid var(--border-light);
}

.admin-flow-wq-mapsto__label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.admin-flow-wq-mapsto-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.admin-flow-sr-enabled {
  margin: var(--space-sm) 0;
}

.admin-flow-sr-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.admin-flow-sr-row select {
  min-width: 220px;
}

.admin-flow-sr-mapping__label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: var(--space-sm) 0 4px;
}

/* Info-icons (FlowHelp) inline in the AI Flows editor.
   The ⓘ + popover itself is styled in components/info-button.css (always a
   dark near-black tooltip, so it stays legible regardless of the admin
   panel's own light/dark theme). These are placement-only overrides: keep
   the icon glued to the title/label baseline instead of floating above or
   below it, and shrink it a notch next to the small uppercase field labels
   so it doesn't outweigh them. */

.admin-aim-section-title .info-button-container,
.admin-flow-wq-mapsto__label .info-button-container,
.admin-flow-sr-mapping__label .info-button-container {
  vertical-align: middle;
  margin-left: 4px;
}

.admin-aim-label .info-button-container {
  vertical-align: middle;
  margin-left: 3px;
}

.admin-aim-label .info-button-container .info-button {
  width: 15px;
  height: 15px;
}

.admin-aim-label .info-button-container .info-button svg {
  width: 11px;
  height: 11px;
}

/* =========================================
   Knowledge review — submit notice + My Submissions status pills
   ========================================= */

/* Non-blocking confirmation after a queued knowledge submission. */

.admin-aim-notice-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 8px 12px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text-primary);
  font-size: 12px;
}

.admin-aim-notice-text {
  flex: 1;
}

.admin-aim-notice-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}

.admin-aim-notice-close {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

/* Status pills in the My Submissions table. */

.admin-aim-sub-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}

.admin-aim-sub-pill.is-pending {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.admin-aim-sub-pill.is-approved {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}

.admin-aim-sub-pill.is-rejected {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 35%, transparent);
  background: color-mix(in srgb, var(--error) 10%, transparent);
}

.admin-aim-sub-pill.is-superseded {
  color: var(--text-muted);
  border-color: var(--border-light);
  background: transparent;
}

/* Validation checklist above the editor footer — explains a disabled submit. */

.admin-aim-validation {
  flex-shrink: 0;
  padding: 10px var(--space-lg);
  border-top: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--warning) 8%, transparent);
  font-size: 12px;
  color: var(--text-secondary);
}

.admin-aim-validation-title {
  font-weight: 600;
  color: var(--warning);
}

.admin-aim-validation ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.admin-aim-validation li {
  margin: 2px 0;
}

/* Batemo Insights uses subtle rounding. The admin AI surfaces inherited the
   legacy global `--radius: 20px`, which reads as pill/stadium-shaped on small
   boxes (diff cells, inputs, notices). Re-scope a subtle radius set to the AI
   Management tab AND the modals (which portal to <body>, outside the tab).
   Small status/nav badges keep --radius-full intentionally. */

.admin-analytics-tab,
.admin-aim-drawer-overlay {
  --radius: 8px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* Superseded submissions (an author resubmitted, so the old rejected row is
   history) are de-emphasised in the My Submissions table. */

.admin-aim-row--muted {
  opacity: 0.5;
}

/* Body/summary diffs get a comfortable min-height so a reviewer sees more than
   one line at a glance (short content used to collapse to a tiny box). Content
   still grows to the 260px max + scrolls. */

.admin-aim-diff-pre--tall {
  min-height: 120px;
}

/* Admin AI Management tab — per-user chat enablement + limits + kill-switch */

/*
 * Ion — AI assistant component styles.
 *
 * Token strategy: Ion-scoped variables alias existing brand tokens so a
 * future rebrand (e.g. China fork) updates Ion automatically. See
 * .planning/ion-design-lock.md §2.
 *
 * Layout strategy:
 *   - .ion-launcher: floating button bottom-right, always-on-top
 *   - .ion-panel:    fixed slide-over, mounted via portal to <body>
 *   - .ion-fullpage: route-level layout for /assistant, 40/60 split
 *
 * This file is intentionally a skeleton — enough fidelity to validate the
 * structure visually. Polish (typography rhythm, micro-interactions,
 * breakpoints) lands in a follow-up.
 */

/* ───────────────────────────────────────────────────────────────────────
 * Tokens
 * ─────────────────────────────────────────────────────────────────────── */

:root {
  --ion-slide-over-width: 720px;
  --ion-launcher-size: 56px;
  --ion-launcher-offset: 28px;
  /* Floating "Kachel" inset — the docked slide-over hovers as a card with a
     small margin on every side (like the filter / graph tiles) instead of
     spanning the full viewport height flush to the edges. */
  --ion-panel-inset: 8px;
  /* Above .command-bar (z-index: 1000 in unified-app-layout.css) so the
     slide-over's own header isn't hidden behind the main app top bar.
     Below user-dropdown-menu (10000) and toast (10000) which are
     genuine "always-on-top" surfaces. */
  --ion-slide-over-z: 1100;
  --ion-expand-duration: 240ms;
  --ion-expand-easing: cubic-bezier(0.22, 1, 0.36, 1);
  /* Circular-reveal entrance (see .ion-panel__surface): a clip-path circle
     wipes out from the FAB. Longer than the scrim fade so the spread reads. */
  --ion-grow-duration: 850ms;
  --ion-grow-easing: cubic-bezier(0.2, 0.7, 0.3, 1);

  --ion-marker: var(--brand, #ea5b0c);
  --ion-marker-soft: rgba(234, 91, 12, 0.12);
  --ion-source-color: var(--brand, #ea5b0c);
  --ion-artifact-bg: var(--bg-2, #1a1a1a);
  --ion-canvas-bg: var(--bg-0, #0c0c0c);

  --ion-chat-col: 40fr;
  --ion-canvas-col: 60fr;

  --ion-cursor-color: var(--brand, #ea5b0c);
  --ion-skeleton-shimmer: linear-gradient(
    90deg,
    var(--bg-3, #222) 0%,
    var(--bg-4, #2a2a2a) 50%,
    var(--bg-3, #222) 100%
  );

  --ion-radius: 10px;
  --ion-radius-sm: 6px;
  --ion-pad: 16px;
  --ion-pad-sm: 8px;
  /* Theme-aware text — repointed to the real token names (--text-primary /
     --text-secondary). The old --text-1/--text-2 don't exist, so chat text used
     to fall back to hardcoded light and never flipped in light mode. */
  --ion-text: var(--text-primary, #f0f0f0);
  --ion-text-muted: var(--text-secondary, #a0a0a0);
  --ion-border: var(--glass-border, rgba(255, 255, 255, 0.08));
  --ion-surface: var(--bg-1, #141414);
  --ion-surface-2: var(--bg-2, #1a1a1a);

  /* Batemo "Kachel" gradient tile — the app's signature surface (see
     kpi-enhanced.css / factsheet-grid-cards.css). Reused across the chat so
     Ion reads as part of the tool, not a generic AI panel. */
  --ion-tile-grad: linear-gradient(
    135deg,
    rgba(55, 53, 50, 0.8) 0%,
    rgba(45, 42, 38, 0.95) 100%
  );
  --ion-tile-border: var(--border-light, rgba(255, 255, 255, 0.08));
  --ion-tile-shadow: 0 2px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --ion-tile-radius: 12px;
  --ion-tile-blur: blur(80px) saturate(250%);
  /* Plots always sit on a dark "stage" (Decision: dark like the factsheet) —
     this one intentionally does NOT flip with the theme. */
  --ion-plot-stage: linear-gradient(
    135deg,
    rgba(40, 40, 40, 0.96) 0%,
    rgba(26, 26, 26, 0.98) 100%
  );

  /* Motion system — entrances tight (≤300ms); only the one-shot logo strike is
     longer. Easings reuse the app's existing curves so Ion feels native. */
  --ion-dur-xs: 120ms;
  --ion-dur-sm: 180ms;
  --ion-dur-md: 260ms;
  --ion-dur-lg: 420ms;
  --ion-stagger: 45ms;
  --ion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* entrances / elevation */
  --ion-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); /* content / data (= expand easing) */
  --ion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* crossfade decel */
}

/* Light-theme tile variants — the gradient + shadow are tuned for dark, so
   provide light glass values. (--ion-tile-border flips automatically via
   --border-light.) The plot stage stays dark on purpose. */

[data-theme='light'] {
  --ion-tile-grad: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(245, 245, 245, 0.95) 100%
  );
  --ion-tile-shadow: 0 2px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ───────────────────────────────────────────────────────────────────────
 * Generic small bits (buttons, error boundary)
 * ─────────────────────────────────────────────────────────────────────── */

.ion-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--ion-radius-sm);
  border: 1px solid var(--ion-marker);
  background: var(--ion-marker);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 120ms ease;
}

.ion-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.ion-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ion-btn--small {
  padding: 6px 10px;
  font-size: 13px;
}

.ion-btn--ghost {
  background: transparent;
  color: var(--ion-text);
  border-color: var(--ion-border);
}

.ion-error-boundary {
  padding: 32px 24px;
  text-align: center;
  color: var(--ion-text);
}

.ion-error-boundary__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--ion-marker-soft);
  color: var(--ion-marker);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
}

.ion-error-boundary__title {
  font-size: 16px;
  margin: 0 0 8px;
}

.ion-error-boundary__body {
  font-size: 14px;
  color: var(--ion-text-muted);
  max-width: 36ch;
  margin: 0 auto 16px;
}

.ion-error-boundary__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ───────────────────────────────────────────────────────────────────────
 * Launcher (bottom-right FAB)
 * ─────────────────────────────────────────────────────────────────────── */

.ion-launcher {
  position: fixed;
  right: var(--ion-launcher-offset);
  bottom: var(--ion-launcher-offset);
  z-index: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  height: var(--ion-launcher-size);
  border-radius: 10px;
  border: 1px solid var(--ion-border);
  background: var(--ion-marker);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  /* Soft orange glow halo so the entry point reads clearly against the grid. */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32),
    0 0 0 1px var(--ion-marker-soft),
    0 0 24px 4px rgba(234, 91, 12, 0.45);
  transition: transform 160ms var(--ion-expand-easing),
    filter 160ms ease, box-shadow 160ms ease;
}

.ion-launcher:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  /* Intensify the glow on hover. */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34),
    0 0 0 1px var(--ion-marker-soft),
    0 0 34px 7px rgba(234, 91, 12, 0.6);
}

.ion-launcher__label {
  white-space: nowrap;
}

/* Active state — a chat is minimized and waiting to be re-opened. A soft glow
   ring distinguishes it from the idle launcher. */

.ion-launcher--active {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32),
    0 0 0 2px var(--ion-marker),
    0 0 0 6px var(--ion-marker-soft),
    0 0 28px 5px rgba(234, 91, 12, 0.5);
}

/* Completion badge — a dot top-right of the FAB when Ion finished while the
   chat was minimized. */

.ion-launcher__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ion-marker);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}

/* "Ion is ready" toast — sits just above the FAB. */

.ion-toast {
  position: fixed;
  right: var(--ion-launcher-offset);
  bottom: calc(var(--ion-launcher-offset) + var(--ion-launcher-size) + 12px);
  z-index: 801;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 280px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ion-surface);
  border: 1px solid var(--ion-border);
  color: var(--ion-text);
  font-size: 13px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36);
  cursor: pointer;
  animation: ion-rise-in var(--ion-dur-md) var(--ion-ease-spring) both;
}

.ion-toast__bolt {
  color: var(--ion-marker);
  flex: none;
}

.ion-toast__label {
  white-space: nowrap;
  font-weight: 600;
}

.ion-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  padding: 2px;
  background: none;
  border: none;
  color: var(--ion-text-muted);
  cursor: pointer;
  border-radius: 4px;
}

.ion-toast__close:hover {
  color: var(--ion-text);
}

@media (prefers-reduced-motion: reduce) {
  .ion-toast {
    animation: none;
  }
}

/* ───────────────────────────────────────────────────────────────────────
 * Slide-over panel
 * ─────────────────────────────────────────────────────────────────────── */

.ion-panel {
  position: fixed;
  inset: 0;
  z-index: var(--ion-slide-over-z);
  pointer-events: none;
}

.ion-panel--open {
  pointer-events: auto;
}

.ion-panel__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  transition: opacity var(--ion-expand-duration) var(--ion-expand-easing);
}

.ion-panel--open .ion-panel__scrim {
  opacity: 1;
}

.ion-panel__surface {
  position: absolute;
  /* Float as a Kachel: a small margin on every side, anchored bottom-right to
     the FAB spot. No longer flush top-to-bottom against the viewport edges. */
  top: var(--ion-panel-inset);
  bottom: var(--ion-panel-inset);
  right: var(--ion-panel-inset);
  width: min(var(--ion-slide-over-width), calc(100vw - var(--ion-panel-inset) * 2));
  /* Same warm "Kachel" gradient the suggestion chips / context card use, laid
     over an opaque base so the semi-transparent gradient stays solid. */
  background: var(--ion-tile-grad), var(--ion-surface);
  border: 1px solid var(--ion-tile-border);
  border-radius: var(--ion-tile-radius);
  /* Clip the header/footer/history-drawer to the rounded corners. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Reveal the panel as a circle wiping OUT from the launcher FAB (a "circular
     reveal" / ripple — the technique behind Material's expand-from-button and
     Magic UI's animated-theme-toggler) rather than scaling the whole tall slab.
     Uniformly scaling a narrow full-height rectangle reads as a stretching blob,
     never a droplet. The clip circle is centred on the FAB; closed it has 0
     radius (panel fully clipped = invisible), open it grows to --ion-reveal-r
     — the EXACT distance to the panel's farthest corner, computed in JS via
     Math.hypot (see ChatPanel.jsx). A CSS-only over-large radius (e.g.
     100vw+100vh) would finish the visible reveal at ~40% of the duration and
     look far too fast. Closing reverses the same transition. Because the surface
     is now inset from the viewport corner, the FAB centre sits (offset + half
     size − inset) in from the surface edge — the JS radius adds the same inset. */
  --ion-fab-origin-x: calc(100% - var(--ion-launcher-offset) - (var(--ion-launcher-size) / 2) + var(--ion-panel-inset));
  --ion-fab-origin-y: calc(100% - var(--ion-launcher-offset) - (var(--ion-launcher-size) / 2) + var(--ion-panel-inset));
  clip-path: circle(0px at var(--ion-fab-origin-x) var(--ion-fab-origin-y));
  opacity: 0;
  transition: clip-path var(--ion-grow-duration) var(--ion-grow-easing),
    opacity 140ms ease;
  /* Depth + orange glow live on .ion-panel__surface-wrap — a box-shadow here
     would be clipped away by the clip-path above. */
}

.ion-panel--open .ion-panel__surface {
  clip-path: circle(var(--ion-reveal-r, 150vmax) at var(--ion-fab-origin-x) var(--ion-fab-origin-y));
  opacity: 1;
}

/* Orange "halo" that rides the reveal edge — same colour as the Ask-Ion FAB
   glow. A drop-shadow on the UNCLIPPED wrapper follows the clipped circle's
   silhouette, so the button's halo appears to expand with the reveal, then
   settles into a subtle edge glow on the open panel. The wrapper is
   pointer-events:none so clicks fall through to the scrim; the surface re-enables
   pointer events for itself. */

.ion-panel__surface-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Resting orange halo hugging the floating panel. Set as a BASE filter (not
     only via the animation) so reduced-motion — which disables the animation —
     still keeps the glow. drop-shadow (not box-shadow) because the surface's
     clip-path would clip a box-shadow away. */
  filter: drop-shadow(0 0 40px rgba(234, 91, 12, 0.42));
}

.ion-panel__surface-wrap > .ion-panel__surface {
  pointer-events: auto;
}

.ion-panel--open .ion-panel__surface-wrap {
  animation: ion-glow-reveal var(--ion-grow-duration) var(--ion-grow-easing) forwards;
}

@keyframes ion-glow-reveal {
  0% {
    filter: drop-shadow(0 0 10px rgba(234, 91, 12, 0));
  }
  30% {
    filter: drop-shadow(0 0 52px rgba(234, 91, 12, 0.9));
  }
  100% {
    filter: drop-shadow(0 0 40px rgba(234, 91, 12, 0.42));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ion-panel__scrim {
    transition: none;
  }
  /* Reduced-motion: skip the circular reveal — the clip-path no longer animates,
     so the panel just fades in/out via opacity. A fade is not vestibular motion,
     so reduced-motion users still get a gentle entrance instead of a hard pop.
     NB: the general reduced-motion block further down deliberately OMITS
     .ion-panel__surface so this 150ms fade is not zeroed to 0ms. */
  .ion-panel__surface {
    clip-path: none;
    transition: opacity 150ms ease;
  }
  /* No glow pulse under reduced-motion — the calm fade carries the entrance. */
  .ion-panel--open .ion-panel__surface-wrap {
    animation: none;
  }
}

.ion-panel__usage-meter {
  /* Full-width container under the header; the IonUsageMeter group owns its
     own tile styling and spacing (margin). Empty (0-height) for every tier
     but DEMO/PRO/batemo, since IonUsageMeter self-guards its render to null. */
  display: block;
}

.ion-panel__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ion-panel__footer {
  border-top: 1px solid var(--ion-border);
  padding: 12px 16px;
}

/* ───────────────────────────────────────────────────────────────────────
 * Header (shared between slide-over and fullpage left column)
 * ─────────────────────────────────────────────────────────────────────── */

.ion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ion-border);
  gap: 12px;
}

.ion-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ion-header__mark {
  /* The lightning-bolt ION mark (IconIonBolt) — currentColor → brand orange. */
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--ion-marker);
}

.ion-header__titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ion-header__title {
  /* BATEMO ION wordmark — brand display face, uppercase. The i18n string stays
     "Batemo Ion"; text-transform renders it BATEMO ION. */
  margin: 0 0 -0.18em; /* Big John runs tall — pull the baseline back in */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ion-text);
}

.ion-header__subtitle {
  font-size: 11px;
  color: var(--ion-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* SNEAK PREVIEW pill — soft-launch marker beside the ION lockup, gated by the
   ION_SNEAK_PREVIEW flag. One quiet brand accent; no other decoration. */

.ion-header__preview-badge {
  flex: none;
  align-self: center;
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ion-marker);
  background: var(--ion-marker-soft);
  border: 1px solid color-mix(in srgb, var(--ion-marker) 40%, transparent);
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.ion-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ion-header__btn {
  padding: 6px;
  border: none;
  background: transparent;
  color: var(--ion-text-muted);
  border-radius: var(--ion-radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ion-header__btn:hover {
  background: var(--ion-marker-soft);
  color: var(--ion-text);
}

/* ───────────────────────────────────────────────────────────────────────
 * Message list
 * ─────────────────────────────────────────────────────────────────────── */

.ion-msglist {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-behavior: smooth;
}

.ion-msglist--empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ───────────────────────────────────────────────────────────────────────
 * Message variants
 * ─────────────────────────────────────────────────────────────────────── */

.ion-msg {
  display: block;
}

.ion-msg--user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.ion-msg__time {
  font-size: 11px;
  color: var(--ion-text-muted, #888);
  font-variant-numeric: tabular-nums;
}

.ion-msg__bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px 12px 4px 12px;
  /* Kachel tile — no backdrop-filter here (perf: a long transcript would have
     dozens of these; heavy blur is reserved for the large card surfaces). */
  background: var(--ion-tile-grad);
  border: 1px solid var(--ion-tile-border);
  box-shadow: var(--ion-tile-shadow);
  color: var(--ion-text);
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.ion-msg--user .ion-msg__bubble {
  border-color: rgba(234, 91, 12, 0.28);
}

.ion-msg--system {
  font-size: 12px;
  color: var(--ion-text-muted);
  text-align: center;
  padding: 4px 8px;
}

.ion-msg--error {
  padding: 10px 14px;
  border-radius: var(--ion-radius-sm);
  background: rgba(220, 60, 60, 0.08);
  border-left: 2px solid #dc3c3c;
  color: var(--ion-text);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ───────────────────────────────────────────────────────────────────────
 * Doc block
 * ─────────────────────────────────────────────────────────────────────── */

.ion-doc-block {
  position: relative;
  padding: 14px 16px;
  background: var(--ion-tile-grad);
  border: 1px solid var(--ion-tile-border);
  border-radius: var(--ion-tile-radius);
  box-shadow: var(--ion-tile-shadow);
}

/* State now reads from the tile border tint + the brand author-dot — the old
   AI-style orange left accent bar is gone. */

.ion-doc-block--streaming {
  border-color: rgba(234, 91, 12, 0.35);
}

.ion-doc-block--aborted {
  border-color: var(--ion-border);
  opacity: 0.85;
}

.ion-doc-block--error {
  border-color: rgba(220, 60, 60, 0.5);
  background: rgba(220, 60, 60, 0.06);
}

/* Author header */

.ion-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ion-text-muted);
  margin-bottom: 6px;
}

.ion-author__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ion-marker);
  display: inline-block;
}

/* ION author mark — the lightning bolt replaces the old orange dot. */

.ion-author__bolt {
  color: var(--ion-marker);
  flex: none;
  /* Nudge the diagonal bolt up so it sits optically on the Big John "ION"
     cap-line instead of dropping below it (matches the header lockup fix). */
  position: relative;
  top: -1px;
}

.ion-author__name {
  /* "ION" wordmark in the brand display face (Big John), uppercase. */
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ion-text);
}

/* ───────────────────────────────────────────────────────────────────────
 * BATEMO ION logo — lightning-bolt mark (IconIonBolt) + wordmark lockup
 * ─────────────────────────────────────────────────────────────────────── */

.ion-bolt {
  display: inline-block;
  vertical-align: middle;
}

@keyframes ion-bolt-strike {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    filter: brightness(1);
  }
  55% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: brightness(1.7);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: brightness(1);
  }
}

.ion-bolt--animated {
  animation: ion-bolt-strike var(--ion-dur-lg) var(--ion-ease-out) 1 both;
}

.ion-bolt--animated:hover {
  filter: brightness(1.25);
}

.ion-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ion-text);
}

.ion-lockup__mark {
  display: inline-flex;
  align-items: center;
}

.ion-lockup__bolt {
  /* Sized to read against Big John's cap-height (which has headroom above the
     caps) and nudged up so the diagonal bolt sits optically on the wordmark
     baseline rather than dropping below it. em-based → scales at every size
     the lockup is used (header 16px, launcher 22px, hero larger). */
  width: 1.24em;
  height: 1.24em;
  color: var(--ion-marker);
  transform: translateY(-0.06em);
}

.ion-lockup__wordmark {
  /* clean Big John wordmark — inherits the lockup font/spacing/color */
  display: inline-block;
}

.ion-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ion-empty__lockup {
  margin-bottom: 16px;
}

/* ───────────────────────────────────────────────────────────────────────
 * Motion — shared entrances + surface choreography (bold but professional)
 * ─────────────────────────────────────────────────────────────────────── */

@keyframes ion-rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ion-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ion-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Chat messages rise + fade as they append (plays once per message mount —
   streaming deltas don't replay it because the element persists). */

.ion-msg {
  animation: ion-rise-in var(--ion-dur-md) var(--ion-ease-out) both;
}

/* Canvas artifact crossfade — keyed by TAB (table↔plot↔report), NOT by artifact
   id, so live re-ranks update the chart in place (no re-init flash). Opacity
   only → safe over the Plotly/ECharts canvas. */

.ion-canvas__pane {
  animation: ion-fade-in var(--ion-dur-sm) var(--ion-ease-out) both;
  /* Fill the body and own the scroll: the plot figure inside stretches to full
     height, while a tall table/report scrolls here instead. */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

/* Working cue + "Updating…" overlay fade in rather than pop. */

.ion-working,
.ion-canvas__updating {
  animation: ion-fade-in var(--ion-dur-sm) var(--ion-ease-out) both;
}

/* Empty-state suggestion chips cascade in (fixed 3 → nth-child is safe;
   `backwards` fill so the hover-lift transition still works afterwards). */

.ion-empty__prompts .ion-empty__prompt {
  animation: ion-rise-in var(--ion-dur-md) var(--ion-ease-spring) backwards;
}

.ion-empty__prompts li:nth-child(1) .ion-empty__prompt {
  animation-delay: var(--ion-stagger);
}

.ion-empty__prompts li:nth-child(2) .ion-empty__prompt {
  animation-delay: calc(var(--ion-stagger) * 2);
}

.ion-empty__prompts li:nth-child(3) .ion-empty__prompt {
  animation-delay: calc(var(--ion-stagger) * 3);
}

@media (prefers-reduced-motion: reduce) {
  .ion-bolt--animated,
  .ion-msg,
  .ion-canvas__pane,
  .ion-working,
  .ion-canvas__updating,
  .ion-empty__prompts .ion-empty__prompt {
    animation: none;
  }
}

/* Single "Ion is working…" cue (replaces per-tool status chatter for customers).
   Bound to the streaming state in ChatMessage; clears when the turn ends. */

.ion-working {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ion-text-muted);
}

.ion-working__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ion-marker);
  animation: ion-working-pulse 1.4s ease-in-out infinite;
}

/* "Ion is working…" — the pulsing bolt (replaces the pulsing dot). */

.ion-working__bolt {
  color: var(--ion-marker);
  flex: none;
  /* Nudge up via position (NOT transform — the pulse animation owns transform). */
  position: relative;
  top: -1px;
  animation: ion-working-pulse 1.4s ease-in-out infinite;
}

@keyframes ion-working-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animated ellipsis trailing the label ("Selecting candidate cells…") — sits
   INSIDE the label span so the flex gap doesn't split it off. Base content is a
   static "…" so it still reads correctly if content-animation isn't applied. */

.ion-working__dots::after {
  content: '…';
}

.ion-working__label {
  white-space: nowrap;
}

/* Live elapsed counter ("· 4s") — quiet, tabular so it doesn't jitter as the
   seconds tick. */

.ion-working__elapsed {
  flex: none;
  color: var(--ion-text-muted);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
  .ion-working__dots::after {
    animation: ion-working-dots 1.4s steps(1, end) infinite;
  }
}

@keyframes ion-working-dots {
  0% {
    content: '.';
  }
  33% {
    content: '..';
  }
  66%,
  100% {
    content: '…';
  }
}

@media (prefers-reduced-motion: reduce) {
  .ion-working__dot,
  .ion-working__bolt {
    animation: none;
    opacity: 0.8;
  }
  .ion-working__dots::after {
    content: '…';
  }
}

/* Body of the doc-block */

.ion-msg__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ion-text);
}

.ion-md p {
  margin: 0 0 10px;
}

.ion-md p:last-child {
  margin-bottom: 0;
}

.ion-md ul,
.ion-md ol {
  padding-left: 22px;
  margin: 0 0 10px;
}

.ion-md li {
  margin: 2px 0;
}

.ion-md h1,
.ion-md h2,
.ion-md h3 {
  margin: 14px 0 6px;
  font-weight: 600;
}

.ion-md table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 13px;
}

.ion-md th,
.ion-md td {
  border: 1px solid var(--ion-border);
  padding: 6px 10px;
  text-align: left;
}

.ion-md th {
  background: var(--ion-marker-soft);
  font-weight: 600;
}

.ion-md code {
  background: var(--bg-3, #222);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}

.ion-md pre {
  background: var(--bg-3, #222);
  padding: 12px;
  border-radius: var(--ion-radius-sm);
  overflow: auto;
  font-size: 12.5px;
}

.ion-md a {
  color: var(--ion-marker);
  text-decoration: underline;
}

/* Source chip */

.ion-src {
  display: inline;
}

.ion-src__chip {
  display: inline;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ion-marker-soft);
  color: var(--ion-source-color);
  border: none;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 500;
  white-space: nowrap;
}

.ion-src__chip--synthetic {
  background: rgba(160, 160, 160, 0.14);
  color: var(--ion-text-muted);
  cursor: default;
}

.ion-src__tip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: var(--bg-3, #222);
  border: 1px solid var(--ion-border);
  border-radius: var(--ion-radius-sm);
  color: var(--ion-text);
  font-size: 12px;
  max-width: 240px;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.ion-src__tip-cell {
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--ion-marker);
  font-size: 11px;
}

.ion-src__tip-hint {
  color: var(--ion-text-muted);
  font-size: 10.5px;
}

/* Streaming cursor */

.ion-cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--ion-cursor-color);
  margin-left: 2px;
  animation: ion-cursor-blink 1.05s steps(2, start) infinite;
}

@keyframes ion-cursor-blink {
  to {
    visibility: hidden;
  }
}

/* Tool status inline */

.ion-tool-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ion-marker-soft);
  color: var(--ion-marker);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}

.ion-tool-status__spinner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--ion-marker);
  border-right-color: transparent;
  animation: ion-spin 0.9s linear infinite;
}

.ion-tool-status__more {
  background: var(--ion-marker);
  color: #fff;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 11px;
}

@keyframes ion-spin {
  to { transform: rotate(360deg); }
}

/* Reasoning toggle */

.ion-reasoning {
  margin-top: 10px;
}

.ion-reasoning__toggle {
  background: transparent;
  border: 1px solid var(--ion-border);
  color: var(--ion-text-muted);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ion-reasoning__toggle:hover {
  color: var(--ion-text);
}

.ion-reasoning__body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Tools-used footer (customer chat — minimal pill listing tool names,
   no expand-to-debug. Admin chat uses the full ReasoningToggle/ToolCallCard
   stack instead.) */

.ion-tools-used {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ion-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ion-tools-used__label {
  font-weight: 500;
}

.ion-tools-used__name {
  font-family: var(--ion-font-mono, ui-monospace, SFMono-Regular, monospace);
  background: var(--ion-surface-2, rgba(0, 0, 0, 0.04));
  padding: 1px 6px;
  border-radius: 4px;
}

/* Inline tool marker — small pill on its own line at the assistant
   text position the tool was invoked. Customer-facing only. Visual
   style intentionally subdued so the marker doesn't outshine the
   surrounding prose. Status conveyed by the dot color. Block-level
   so a chain of tool calls each get their own line. */

.ion-inline-tool {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin: 6px 0;
  font-family: var(--ion-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 11px;
  background: var(--ion-surface-2, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--ion-border, rgba(0, 0, 0, 0.08));
  border-radius: 4px;
  color: var(--ion-text-muted, #555);
  white-space: nowrap;
  line-height: 1.4;
}

.ion-inline-tool__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ion-inline-tool--running {
  color: var(--ion-accent, #ea5b0c);
}

.ion-inline-tool--running .ion-inline-tool__dot {
  animation: ion-inline-tool-pulse 1.2s ease-in-out infinite;
}

.ion-inline-tool--done {
  color: var(--ion-text-muted, #555);
}

.ion-inline-tool--error {
  color: #b04040;
  background: rgba(176, 64, 64, 0.06);
  border-color: rgba(176, 64, 64, 0.25);
}

@keyframes ion-inline-tool-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Expandable pill (admin / dev mode): chevron + click to reveal raw
   input + output JSON. Hidden in default customer mode — backend
   redaction sends empty {} so the marker has nothing to expand.

   Margins matter for the team-lead-reported "tool card visually
   collapses against the surrounding sentences" bug. The marker is a
   block-level element interrupting prose paragraphs; without
   generous vertical breathing room it reads as part of the
   preceding sentence and the post-tool prose looks like it clings
   to the marker. 14px top + 10px bottom gives clear separation
   without making chains of consecutive tool calls feel sparse. */

.ion-inline-tool-wrap {
  display: block;
  margin: 14px 0 10px;
}

.ion-inline-tool-wrap > .ion-inline-tool {
  margin: 0;
}

/* When two tool markers are adjacent (AI chained calls), tighten
   the gap so the pair reads as a sequence rather than two big
   stand-alone blocks. */

.ion-inline-tool-wrap + .ion-inline-tool-wrap {
  margin-top: 4px;
}

/* Markdown-it renders the text around the placeholder as <p> tags;
   the default browser styling collapses adjacent <p> margins, which
   together with the tool-wrap margin USUALLY gives ~14px of
   separation. But when the AI emits text WITHOUT a blank line
   between paragraphs (e.g. "durchsuchen:Ausgezeichnet — ..."),
   markdown-it produces a single <p> that wraps onto the visible
   line after the tool card. Force a small top margin on any <p>
   that follows a tool wrap so the post-tool prose never visually
   sticks to the marker even when the AI forgets its newlines. */

.ion-inline-tool-wrap + p,
.ion-inline-tool-wrap + .ion-msg__body p:first-of-type {
  margin-top: 8px;
}

.ion-inline-tool {
  background: var(--ion-surface-2, rgba(0, 0, 0, 0.04));
}

.ion-inline-tool--expandable {
  cursor: pointer;
}

.ion-inline-tool--expandable:hover {
  background: var(--ion-surface, rgba(0, 0, 0, 0.08));
}

.ion-inline-tool__chevron {
  font-size: 9px;
  margin-left: 2px;
  opacity: 0.7;
}

.ion-inline-tool__detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--ion-surface, #1f2025);
  border: 1px solid var(--ion-border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  max-width: 100%;
}

.ion-inline-tool__pane-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ion-text-muted, #888);
  margin-bottom: 2px;
}

.ion-inline-tool__pane-body {
  margin: 0;
  font-family: var(--ion-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ion-text, #f5f5f5);
  background: rgba(0, 0, 0, 0.25);
  padding: 6px 8px;
  border-radius: 4px;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Ask-user dialog — inline question with clickable option buttons +
   optional freeform input. Used by ask_user tool. */

.ion-ask {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  margin: 8px 0;
  background: var(--ion-surface-2, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--ion-border, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
}

.ion-ask--locked {
  opacity: 0.65;
}

/* Answered card — collapsed to the question + a compact "✓ pick" (no echoed
   user bubble). Tighter than the full dialog, slightly recessed. */

.ion-ask--answered {
  gap: 4px;
  padding: 10px 14px;
}

.ion-ask__question--answered {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ion-text-muted, #8a8a8a);
}

.ion-ask__question {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--ion-text, #f5f5f5);
}

/* Vertical, numbered, radio-or-checkbox options. */

.ion-ask__options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ion-ask__option-row {
  margin: 0;
  padding: 0;
}

.ion-ask__option-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--ion-border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  background: var(--ion-surface, #1f2025);
  color: var(--ion-text, #f5f5f5);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.ion-ask__option-label:hover {
  background: color-mix(in srgb, var(--brand, #ea5b0c) 10%, var(--ion-surface, #1f2025));
  border-color: color-mix(in srgb, var(--brand, #ea5b0c) 35%, transparent);
}

.ion-ask--locked .ion-ask__option-label {
  cursor: not-allowed;
}

.ion-ask__option-index {
  font-family: var(--ion-font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 12px;
  color: var(--ion-text-muted, #888);
  min-width: 18px;
  font-variant-numeric: tabular-nums;
}

.ion-ask__option-input {
  margin: 0;
  accent-color: var(--brand, #ea5b0c);
  flex-shrink: 0;
}

.ion-ask__option-text {
  flex: 1;
  line-height: 1.4;
}

/* Visual selected state — picked option gets the orange tint */

.ion-ask__option-input:checked + .ion-ask__option-text,
.ion-ask__option-label:has(.ion-ask__option-input:checked) {
  color: var(--brand, #ea5b0c);
}

.ion-ask__option-label:has(.ion-ask__option-input:checked) {
  border-color: var(--brand, #ea5b0c);
  background: color-mix(in srgb, var(--brand, #ea5b0c) 14%, transparent);
}

/* Multi-select Send button — shown only when multi_select=true */

.ion-ask__multi-send {
  align-self: flex-start;
  padding: 6px 14px;
  background: var(--brand, #ea5b0c);
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.ion-ask__multi-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ion-ask__freeform {
  display: flex;
  gap: 6px;
}

.ion-ask__freeform-input {
  flex: 1;
  padding: 6px 10px;
  background: var(--ion-surface, #1f2025);
  border: 1px solid var(--ion-border, rgba(0, 0, 0, 0.12));
  border-radius: 6px;
  color: var(--ion-text, #f5f5f5);
  font-size: 13px;
}

.ion-ask__freeform-input:focus {
  outline: none;
  border-color: var(--brand, #ea5b0c);
}

.ion-ask__freeform-send {
  padding: 6px 12px;
  background: var(--brand, #ea5b0c);
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  cursor: pointer;
}

.ion-ask__freeform-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ion-ask__sent {
  margin: 0;
  font-size: 12px;
  color: var(--brand, #ea5b0c);
}

/* Tool call card */

.ion-tool-card {
  border: 1px solid var(--ion-border);
  border-radius: var(--ion-radius-sm);
  background: var(--ion-surface-2);
  font-size: 13px;
}

.ion-tool-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--ion-text);
  cursor: pointer;
  text-align: left;
}

.ion-tool-card__chevron {
  color: var(--ion-text-muted);
  width: 12px;
  display: inline-block;
}

.ion-tool-card__name {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12.5px;
}

.ion-tool-card__status {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
}

.ion-tool-card__status--running {
  color: var(--ion-marker);
  background: var(--ion-marker-soft);
}

.ion-tool-card__status--error {
  color: #ff7171;
  background: rgba(220, 60, 60, 0.12);
}

.ion-tool-card__duration {
  margin-left: auto;
  color: var(--ion-text-muted);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.ion-tool-card__body {
  padding: 8px 10px 12px 28px;
  border-top: 1px dashed var(--ion-border);
}

.ion-tool-card__section + .ion-tool-card__section {
  margin-top: 8px;
}

.ion-tool-card__section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ion-text-muted);
  margin: 0 0 4px;
}

.ion-tool-card__code {
  background: var(--bg-3, #222);
  border-radius: 4px;
  padding: 8px;
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  overflow: auto;
  margin: 0;
  max-height: 220px;
}

/* data_values artifact (get_cell_metrics) — admin view lists each value
 * row with its [[V:N]] ref so debugging citations is one glance. */

.ion-tool-card__data-values {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ion-tool-card__data-values-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.ion-tool-card__data-values-label {
  color: var(--ion-text-muted);
}

.ion-tool-card__data-values-ref {
  font-size: 10.5px;
  opacity: 0.7;
}

.ion-tool-card__data-values-na {
  color: var(--ion-text-muted);
}

.ion-tool-card__data-values-skipped {
  font-size: 11px;
  color: var(--ion-text-muted);
  margin: 4px 0 0;
}

/* Nav-link artifact — primary-action button rendered for view_in_explorer
 * / compare_cells / view_cell_detail tool outputs. */

.ion-nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.ion-nav-link__button {
  background: var(--brand-primary, #ea5b0c);
  color: #fff;
  border: 0;
  border-radius: var(--ion-radius-sm, 6px);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 120ms ease;
}

.ion-nav-link__button:hover {
  filter: brightness(1.08);
}

.ion-nav-link__summary {
  margin: 0;
  font-size: 12px;
  color: var(--ion-text-muted);
}

/* Figures inside a doc-block */

.ion-msg__figures {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.ion-msg__figure img {
  max-width: 100%;
  border-radius: var(--ion-radius-sm);
  background: var(--bg-3, #222);
}

.ion-msg__figcaption {
  font-size: 12px;
  color: var(--ion-text-muted);
  margin-top: 4px;
}

.ion-msg__abort-note,
.ion-msg__error-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ion-text-muted);
}

.ion-msg__error-note {
  color: #ff7171;
}

/* Ion quota-exhausted conversion card (WS 2.2) — replaces the generic error
   note on quota_exceeded. Same Kachel + orange-CTA language as the
   deep-dive DailyLimitModal so both conversion moments read as one system. */

.ion-quota-card {
  margin-top: 10px;
  padding: 16px 18px;
  border-radius: var(--ion-tile-radius);
  background: var(--ion-tile-grad), var(--ion-surface);
  border: 1px solid rgba(234, 91, 12, 0.35);
  box-shadow: var(--ion-tile-shadow);
}

.ion-quota-card__title {
  margin: 0 0 6px;
  font-family: 'Big John', sans-serif;
  font-size: 15px;
  color: var(--ion-text);
}

.ion-quota-card__body {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ion-text-muted);
}

.ion-quota-card__cta {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #ea5b0c 0%, #d14e09 100%);
  border: 1px solid #ea5b0c;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}

.ion-quota-card__cta:hover {
  background: linear-gradient(135deg, #d14e09 0%, #b84308 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(234, 91, 12, 0.35);
}

/* KPI group */

.ion-kpi-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 10px 0 8px;
}

.ion-kpi {
  background: var(--ion-surface-2);
  border: 1px solid var(--ion-border);
  border-radius: var(--ion-radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ion-kpi__label {
  font-size: 11px;
  color: var(--ion-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ion-kpi__value {
  font-size: 20px;
  font-weight: 600;
  color: var(--ion-text);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ion-kpi__unit {
  font-size: 12px;
  color: var(--ion-text-muted);
  font-weight: 400;
}

.ion-kpi__source {
  font-size: 10.5px;
  color: var(--ion-marker);
  font-family: ui-monospace, SFMono-Regular, monospace;
}

/* Skeleton */

.ion-skeleton {
  position: relative;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ion-skeleton__row {
  height: 14px;
  border-radius: 4px;
  background: var(--ion-skeleton-shimmer);
  background-size: 220% 100%;
  animation: ion-shimmer 1.4s linear infinite;
}

.ion-skeleton__row--head {
  width: 40%;
  height: 16px;
}

.ion-skeleton__block {
  height: 220px;
  border-radius: var(--ion-radius-sm);
  background: var(--ion-skeleton-shimmer);
  background-size: 220% 100%;
  animation: ion-shimmer 1.4s linear infinite;
}

.ion-skeleton__label {
  font-size: 12px;
  color: var(--ion-text-muted);
  align-self: center;
  margin-top: 4px;
}

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

/* Context card */

.ion-context-card {
  background: var(--ion-tile-grad);
  -webkit-backdrop-filter: var(--ion-tile-blur);
  backdrop-filter: var(--ion-tile-blur);
  border: 1px solid var(--ion-tile-border);
  border-radius: var(--ion-tile-radius);
  box-shadow: var(--ion-tile-shadow);
  padding: 12px 14px;
  margin: 16px 0;
}

.ion-context-card__title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #a0a0a0);
  margin-bottom: 4px;
}

.ion-context-card__body {
  margin: 0;
  font-size: 13px;
  color: var(--ion-text);
}

.ion-context-card__tags {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ion-context-card__tag {
  font-size: 11px;
  background: var(--bg-3, #222);
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-flex;
  gap: 4px;
}

.ion-context-card__tag-label {
  color: var(--ion-text-muted);
}

/* Empty state / welcome */

.ion-empty {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  padding: 24px;
}

.ion-empty__hero {
  margin-bottom: 24px;
}

.ion-empty__mark {
  position: relative;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ion-empty__mark-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ion-marker);
}

.ion-empty__mark-line {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 2px;
  background: var(--ion-marker);
  opacity: 0.3;
  border-radius: 1px;
}

.ion-empty__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--ion-text);
  margin: 0 0 8px;
}

.ion-empty__subtitle {
  font-size: 14px;
  color: var(--ion-text-muted);
  margin: 0 auto;
  max-width: 44ch;
}

.ion-empty__demo-budget {
  font-size: 12px;
  color: var(--ion-text-muted);
  opacity: 0.85;
  margin: 6px auto 0;
  max-width: 44ch;
}

.ion-empty__prompts {
  list-style: none;
  padding: 0;
  margin: 24px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ion-empty__prompt {
  display: block;
  width: 100%;
  background: var(--ion-tile-grad);
  -webkit-backdrop-filter: var(--ion-tile-blur);
  backdrop-filter: var(--ion-tile-blur);
  border: 1px solid var(--ion-tile-border);
  box-shadow: var(--ion-tile-shadow);
  color: var(--ion-text);
  border-radius: var(--ion-tile-radius);
  padding: 12px 14px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease,
    box-shadow 160ms ease;
}

.ion-empty__prompt:hover {
  border-color: rgba(234, 91, 12, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(234, 91, 12, 0.18);
}

.ion-empty__hint {
  font-size: 12px;
  color: var(--ion-text-muted);
  margin-top: 12px;
}

.ion-empty__hint kbd {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-3, #222);
  border: 1px solid var(--ion-border);
  font-family: inherit;
}

/* Input field */

.ion-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.ion-input__field {
  flex: 1;
  resize: none;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--ion-radius-sm);
  border: 1px solid var(--ion-border);
  background: var(--ion-surface-2);
  color: var(--ion-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  outline: none;
  transition: border-color 120ms ease;
}

.ion-input__field:focus {
  border-color: var(--ion-marker);
}

.ion-input__field:disabled {
  opacity: 0.55;
}

.ion-input__btn {
  flex: none;
  min-width: 64px;
  padding: 10px 14px;
  border-radius: var(--ion-radius-sm);
  border: 1px solid var(--ion-marker);
  background: var(--ion-marker);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}

.ion-input__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ion-input__btn--stop {
  background: transparent;
  color: var(--ion-marker);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ion-input__stop-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: currentColor;
  border-radius: 1px;
}

/* ───────────────────────────────────────────────────────────────────────
 * Fullpage /assistant route
 * ─────────────────────────────────────────────────────────────────────── */

.ion-fullpage {
  /* Sits inside .app-content, below the fixed 70px CommandBar — subtract it so
     100vh doesn't overflow the viewport and push the chat input below the fold. */
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  background: var(--ion-canvas-bg);
}

.ion-fullpage__usage-meter {
  /* Deep-dive + Ion-chat quota meters stacked full-width (WS 1.2 Decision 3 /
     WS 2.2). Column so the two meters never cram into one row; each self-guards
     to null when not applicable. The Ion group carries its own tile styling. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 16px 0;
}

.ion-fullpage__split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--ion-chat-col) var(--ion-canvas-col);
  /* Float the two columns as separate Kacheln on the dark page (matching the
     docked panel's floating-tile design) — gutter around and between them. */
  gap: var(--ion-pad);
  padding: var(--ion-pad);
}

.ion-fullpage__chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Warm "Kachel" surface + orange halo, exactly like the docked Ion panel. */
  background: var(--ion-tile-grad), var(--ion-surface);
  border: 1px solid var(--ion-tile-border);
  border-radius: var(--ion-tile-radius);
  overflow: hidden;
  /* Depth + orange glow. No clip-path on this element, so a box-shadow works
     directly (unlike the slide-over surface). */
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4),
    0 0 44px -6px rgba(234, 91, 12, 0.4);
}

.ion-fullpage__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.ion-fullpage__input {
  border-top: 1px solid var(--ion-tile-border);
  padding: 12px 16px;
}

.ion-fullpage__canvas {
  /* A shade lighter than the page void so the canvas reads as a framed Kachel;
     stays dark so the factsheet-style plots keep their contrast. */
  background: var(--ion-artifact-bg);
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ion-tile-border);
  border-radius: var(--ion-tile-radius);
  overflow: hidden;
}

/* Canvas */

.ion-canvas {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Container-query layout wrapper — owns the containment context the rail
   split queries. It is NOT the flex parent of the split (a container query
   can't restyle its own container element), so it just fills the remaining
   canvas height and lets the split inside it reshape. */

.ion-canvas__layout {
  container-type: inline-size;
  flex: 1;
  min-height: 0;
  display: flex;
}

.ion-canvas__split {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column; /* NARROW default: rail strip on top, stage below */
}

/* Controls rail. NARROW: a compact collapsible strip above the stage.
   WIDE (@container below): a fixed-width column on the left. */

.ion-canvas__rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-bottom: 1px solid var(--ion-tile-border);
}

.ion-canvas__rail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
}

.ion-canvas__rail-title {
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ion-text-muted);
}

.ion-canvas__rail-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--ion-text-muted);
  background: var(--ion-surface-2);
  border: 1px solid var(--ion-tile-border);
  border-radius: 7px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.ion-canvas__rail-toggle:hover {
  color: var(--ion-text);
  border-color: var(--ion-marker);
}

.ion-canvas__rail-toggle:focus-visible {
  outline: 2px solid var(--ion-marker);
  outline-offset: 2px;
}

/* Rail body carries the persistent Application-Profile control surface
   (chatStore.latestApplicationProfile). NARROW: capped height so a long
   constraint/weight list never starves the plot below; WIDE: full rail
   height with its own scroll. */

.ion-canvas__rail-body {
  min-height: 0;
  overflow-y: auto;
  max-height: 42vh;
}

.ion-canvas__stage {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ion-canvas__body {
  position: relative;
  flex: 1;
  min-height: 0;
  /* Flex column so the active artifact pane can fill the height (the plot
     stretches to the CTA bar); scrolling moves into the pane so a tall
     table/report scrolls without the plot leaving empty space. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px;
}

/* WIDE canvas — controls move into a left rail, stage takes the rest at full
   height. Breakpoint mirrors RAIL_WIDE_MIN in ArtifactCanvas.jsx. */

@container (min-width: 760px) {
  .ion-canvas__split {
    flex-direction: row;
  }
  .ion-canvas__rail {
    width: 320px;
    flex: none;
    height: 100%;
    border-bottom: none;
    border-right: 1px solid var(--ion-tile-border);
    transition: width var(--ion-dur-md) var(--ion-ease-smooth);
  }
  .ion-canvas__rail-body {
    flex: 1;
    max-height: none;
  }
  /* Collapsed: the rail shrinks to a thin handle showing only the toggle. */
  .ion-canvas__split--collapsed .ion-canvas__rail {
    width: 44px;
  }
  .ion-canvas__split--collapsed .ion-canvas__rail-title {
    display: none;
  }
  .ion-canvas__split--collapsed .ion-canvas__rail-head {
    padding: 8px 0;
    justify-content: center;
  }
  .ion-canvas__split--collapsed .ion-canvas__rail-toggle {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ion-canvas__rail {
    transition: none;
  }
}

/* "Updating…" cue shown while a re-rank turn refreshes the live shortlist. */

.ion-canvas__updating {
  position: absolute;
  top: 14px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--ion-text-muted);
  background: var(--ion-tile-grad);
  border: 1px solid var(--ion-tile-border);
  border-radius: 8px;
  box-shadow: var(--ion-tile-shadow);
  z-index: 3;
  pointer-events: none;
}

/* Persistent Application-Profile control surface (chatStore.latestApplicationProfile).
   Now lives inside the controls rail (.ion-canvas__rail-body owns scroll +
   height), so this class only carries the flex behaviour that lets the card
   fill the rail — the framing moved to the rail. */

.ion-canvas__profile-panel {
  flex: 1;
  min-height: 0;
}

/* "Updating…" cue gets a subtle shimmer sweep when the update is a
   slider-triggered deterministic re-rank (reRankPending) — reuses the same
   ion-shimmer keyframe the loading skeletons use, just as a background
   sweep behind the pill so the text stays fully legible. */

.ion-canvas__updating--live {
  background: linear-gradient(
    90deg,
    var(--ion-tile-grad) 0%,
    rgba(234, 91, 12, 0.22) 50%,
    var(--ion-tile-grad) 100%
  );
  background-size: 220% 100%;
  animation: ion-fade-in var(--ion-dur-sm) var(--ion-ease-out) both,
    ion-shimmer 1.3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ion-canvas__updating--live {
    animation: none;
    background: var(--ion-tile-grad);
  }
}

.ion-canvas-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ion-border);
}

.ion-canvas-header__source {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ion-text-muted);
}

.ion-canvas-header__pin {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ion-marker);
}

.ion-canvas-header__source-label--muted {
  opacity: 0.7;
}

.ion-canvas-header__tabs {
  display: inline-flex;
  background: var(--ion-surface-2);
  border: 1px solid var(--ion-tile-border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.ion-canvas-header__tab {
  background: transparent;
  border: none;
  color: var(--ion-text-muted);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background 120ms ease, color 120ms ease;
}

.ion-canvas-header__tab:hover {
  color: var(--ion-text);
}

.ion-canvas-header__tab--active {
  background: var(--ion-marker);
  color: #fff;
}

.ion-canvas-header__tab--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ion-canvas-header__tab--disabled:hover {
  color: var(--ion-text-muted);
}

.ion-canvas-header__actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.ion-canvas-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ion-text-muted);
  text-align: center;
  padding: 32px;
}

.ion-canvas-empty__icon {
  margin-bottom: 12px;
  opacity: 0.4;
}

.ion-canvas-empty__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ion-text);
  margin: 0 0 6px;
}

.ion-canvas-empty__body {
  max-width: 36ch;
  font-size: 13px;
  margin: 0 0 12px;
}

.ion-canvas-empty__hint kbd {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-3, #222);
  border: 1px solid var(--ion-border);
}

/* Table artifact */

.ion-table-artifact__caption {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ion-text-muted);
}

.ion-table-artifact__scroll {
  overflow: auto;
  border: 1px solid var(--ion-border);
  border-radius: var(--ion-radius-sm);
}

.ion-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ion-table th,
.ion-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ion-border);
  text-align: left;
}

.ion-table th {
  background: var(--ion-surface-2);
  font-weight: 600;
}

.ion-table tr:last-child td {
  border-bottom: none;
}

.ion-table-artifact__raw,
.ion-plot-artifact__raw {
  background: var(--bg-3, #222);
  padding: 10px;
  border-radius: var(--ion-radius-sm);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  overflow: auto;
  max-height: 400px;
}

.ion-plot-artifact img {
  max-width: 100%;
  border-radius: var(--ion-radius-sm);
}

.ion-plot-artifact__caption {
  font-size: 12px;
  color: var(--ion-text-muted);
  margin-top: 6px;
  text-align: center;
}

.ion-canvas-report-stub {
  color: var(--ion-text-muted);
  font-size: 13px;
  text-align: center;
  padding: 40px;
}

/* ───────────────────────────────────────────────────────────────────────
 * PlotlyChartRender — interactive Plotly chart used by both the customer
 * artifact canvas (via PlotArtifact) and the admin sandbox tool card.
 * Sized to fill the available width; min-height keeps small charts
 * legible while letting Plotly auto-resize as the container changes.
 * ─────────────────────────────────────────────────────────────────── */

.ion-plot-render {
  position: relative;
  margin: 0;
  padding: 12px;
  /* Fixed dark stage in both themes so the transparent-bg Plotly chart reads
     like the factsheet "Discharge characteristics" plot. Child text is forced
     light below since the stage never flips. */
  background: var(--ion-plot-stage);
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--ion-tile-border);
  border-radius: var(--ion-tile-radius);
  box-shadow: var(--ion-tile-shadow);
}

.ion-plot-render__plot {
  width: 100%;
  min-height: 360px;
}

.ion-plot-render__caption {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.ion-plot-render__notice {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--warning, #d97706);
  text-align: center;
}

/* Server-built spec / comparison table (compare_cells_table). */

.ion-compare-table {
  margin: 10px 0;
  overflow-x: auto;
}

.ion-compare-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

.ion-compare-table th,
.ion-compare-table td {
  border: 1px solid var(--ion-border, #ececec);
  padding: 7px 10px;
  text-align: left;
  vertical-align: middle;
}

.ion-compare-table thead th {
  background: rgba(234, 91, 12, 0.06);
  font-weight: 600;
  color: var(--ion-text, #333);
}

.ion-compare-table__metric {
  font-weight: 500;
}

.ion-compare-table__unit {
  color: var(--ion-text-muted, #999);
  font-weight: 400;
}

.ion-compare-table__na {
  color: var(--ion-text-muted, #bbb);
}

/* Inline nav-link button (view_cell_detail / view_in_explorer results). */

.ion-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0;
  padding: 7px 14px;
  border: 1px solid var(--brand, #ea5b0c);
  border-radius: 8px;
  background: rgba(234, 91, 12, 0.08);
  color: var(--brand, #ea5b0c);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ion-nav-link:hover {
  background: var(--brand, #ea5b0c);
  color: #fff;
}

/* Build-chain provenance panel ("How this chart was built"). Collapsed
   by default — a quiet, full-width affordance beneath the caption. */

.ion-plot-chain {
  margin-top: 8px;
  /* On the fixed dark plot stage — divider + text are light in both themes. */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
}

.ion-plot-chain__toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 2px 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  text-align: left;
}

.ion-plot-chain__toggle:hover {
  color: var(--brand, #ea5b0c);
}

.ion-plot-chain__steps {
  margin: 6px 0 2px;
  padding-left: 22px;
  list-style: decimal;
}

.ion-plot-chain__step {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

/* Symbolic formula appended to a build-chain step ("Vᵢ(Q) at 1C …").
   Monospace so the maths reads as a formula, mirroring the scalar
   data-chip expression treatment (.ion-data-value-chip__tooltip-expr). */

.ion-plot-chain__formula {
  display: inline-block;
  margin-left: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--ion-text-muted, #999);
  word-break: break-word;
}

/* Toolbar pinned top-right of the chart card; absolute so it overlays
   the modeBar's normal position and feels native. */

.ion-plot-render__toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.ion-plot-render__download-btn {
  background: var(--bg-3, #2a2a2a);
  color: var(--text-primary, #fff);
  border: 1px solid var(--border-light, rgba(255, 255, 255, 0.12));
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ion-plot-render__download-btn:hover {
  background: var(--bg-4, #333);
}

.ion-plot-render__download-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background: var(--bg-3, #2a2a2a);
  border: 1px solid var(--border-light, rgba(255, 255, 255, 0.12));
  border-radius: 4px;
  min-width: 100px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.ion-plot-render__download-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: none;
  border: none;
  text-align: left;
  color: var(--text-primary, #fff);
  font-size: 13px;
  cursor: pointer;
}

.ion-plot-render__download-item:hover {
  background: var(--bg-4, #333);
}

.ion-plot-render--error {
  padding: 16px;
  text-align: center;
}

.ion-plot-render__error {
  color: var(--error, #dc2626);
  font-size: 13px;
}

/* ───────────────────────────────────────────────────────────────────────
 * DataValueChip — inline "verified data" badge for get_cell_metric.
 * Visually distinct from regular text so the user knows the figure
 * came from the database, not from the LLM's prose.
 *
 * Three slots: check icon (provenance), value+unit (the number), cell
 * label (the source). Tooltip exposes the metric label + chemistry +
 * basis for context the chip doesn't have room for.
 * ─────────────────────────────────────────────────────────────────── */

/* Wrapper anchors the absolutely-positioned tooltip to the chip. */

.ion-data-value-chip-wrap {
  position: relative;
  display: inline-block;
}

/* Minimal pill: tick + value + unit, all in Batemo orange. The cell
   name is in the hover tooltip below — it would clutter the prose
   inline. Pure inline behaviour so it sits cleanly in a sentence. */

.ion-data-value-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--brand, #ea5b0c);
  background: color-mix(in srgb, var(--brand, #ea5b0c) 10%, transparent);
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.4;
  cursor: help;
  vertical-align: baseline;
  white-space: nowrap;
  outline: none;
}

.ion-data-value-chip:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand, #ea5b0c) 50%, transparent);
}

/* Verified mark. A CSS-drawn check (::before) so the hydrated DataValueChip
   and the [[V:N]] streaming pre-fill in MarkdownRenderer are byte-identical —
   the chip used to draw an SVG while the pre-fill drew a glyph, so the
   checkmark visibly changed on hydration (the streaming blink). Both now use
   THIS rule (the pre-fill icon span carries the same base class), so there is
   nothing to swap. The --prefill modifier is kept only as a marker class. */

.ion-data-value-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  font-size: 11px;
  line-height: 1;
  color: var(--brand, #ea5b0c);
}

.ion-data-value-chip__icon::before {
  content: '✓';
}

/* AI-provided estimate from general knowledge — NOT a Batemo measurement.
   Deliberately distinct from the orange verified chip: amber + dashed border
   + a leading "~" so the user can tell at a glance it is not tool-backed.
   Rendered inline from a [[UNVERIFIED:value]] marker (no tooltip component —
   the title attribute carries the explanation). */

.ion-unverified-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 5px;
  border-radius: 4px;
  color: #d9a72a;
  background: color-mix(in srgb, #d9a72a 12%, transparent);
  border: 1px dashed color-mix(in srgb, #d9a72a 55%, transparent);
  font-weight: 600;
  font-size: 0.95em;
  line-height: 1.4;
  cursor: help;
  white-space: nowrap;
  vertical-align: baseline;
}

.ion-unverified-chip::before {
  content: '~';
  opacity: 0.7;
  font-weight: 400;
}

.ion-data-value-chip__value {
  font-variant-numeric: tabular-nums;
}

.ion-data-value-chip__unit {
  font-weight: 400;
  opacity: 0.9;
}

/* Plot-level verified badge — corner pill rendered inside the
 * Plotly chart's container. Tells the user "every datapoint in this
 * chart came from Batemo data" vs "this chart includes AI-provided
 * values". The PlotlyChartRender reads is_verified from the figure
 * artifact and toggles the class. */

.ion-plot-badge {
  position: absolute;
  /* Bottom-right so it doesn't cover the download button in the top-right
     toolbar (ion-plot-render__toolbar). */
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  pointer-events: auto;
  cursor: help;
  z-index: 2;
}

.ion-plot-badge--verified {
  color: #fff;
  background: var(--brand, #ea5b0c);
}

.ion-plot-badge--unverified {
  color: #5a3d00;
  background: #f5b041;
}

/* Tooltip — portalled to document.body with position: fixed (set in
   DataValueChip JS). Survives any ancestor `overflow: hidden` and
   won't clip at the chat panel's edges. CSS owns appearance only;
   top/left/position come from the inline style on the element.
   z-index sits above the slide-over (--ion-slide-over-z = 1100) so
   it's never behind the chat surface itself. */

.ion-data-value-chip__tooltip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  max-width: 260px;
  padding: 8px 10px;
  background: var(--ion-surface, #1f2025);
  color: var(--ion-text, #f5f5f5);
  border: 1px solid var(--ion-border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  white-space: normal;
  z-index: 1200;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

.ion-data-value-chip__tooltip-cell {
  font-weight: 600;
  color: var(--ion-text, #f5f5f5);
}

.ion-data-value-chip__tooltip-metric {
  color: var(--ion-text, #f5f5f5);
}

.ion-data-value-chip__tooltip-basis {
  color: var(--ion-text-muted, #999);
}

.ion-data-value-chip__tooltip-chem {
  color: var(--ion-text-muted, #999);
  font-size: 11px;
}

.ion-data-value-chip__tooltip-source {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--ion-border, rgba(255, 255, 255, 0.08));
  color: var(--brand, #ea5b0c);
  font-size: 11px;
}

/* Rescue note — shown when the backend repaired the AI's marker id. */

.ion-data-value-chip__tooltip-rescue {
  margin-top: 4px;
  color: var(--ion-text-muted, #b8b8b8);
  font-size: 10.5px;
  font-style: italic;
}

/* ---------------------------------------------------------------------
 * Broken-reference chip — a value reference the value-guard could NOT
 * resolve. Deliberately neutral (grey, dashed) — NOT the orange verified
 * style and NOT a yellow warning. It stays visible + hoverable so the
 * failure is traceable rather than collapsing to a silent "[?]".
 * ------------------------------------------------------------------- */

.ion-broken-chip-wrap {
  position: relative;
  display: inline-block;
}

.ion-broken-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ion-text-muted, #999);
  background: color-mix(in srgb, #888 8%, transparent);
  border: 1px dashed color-mix(in srgb, #888 45%, transparent);
  font-size: 0.95em;
  line-height: 1.4;
  cursor: help;
  vertical-align: baseline;
  white-space: nowrap;
  outline: none;
}

.ion-broken-chip:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, #888 45%, transparent);
}

.ion-broken-chip__icon {
  display: inline-flex;
  align-items: center;
}

.ion-broken-chip__label {
  font-style: italic;
  opacity: 0.85;
}

.ion-broken-chip__tooltip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 300px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--ion-surface-2, #1f1f1f);
  border: 1px solid var(--ion-border, rgba(255, 255, 255, 0.12));
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  font-size: 11.5px;
  color: var(--ion-text, #f5f5f5);
  z-index: 1200;
  pointer-events: none;
}

.ion-broken-chip__tooltip-title {
  font-weight: 700;
  color: #d9a441;
}

.ion-broken-chip__tooltip-row {
  color: var(--ion-text-muted, #bbb);
}

.ion-broken-chip__tooltip-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  word-break: break-all;
}

.ion-broken-chip__tooltip-reason {
  margin-top: 2px;
  color: var(--ion-text-muted, #aaa);
  line-height: 1.45;
}

/* ---------------------------------------------------------------------
 * Table-compact chips. Inside a markdown table cell, drop the pill
 * background / padding so chips read as plain text and don't blow out
 * column widths (full pills + bare cells side-by-side made columns
 * drift). The check icon + hover tooltip are preserved.
 * ------------------------------------------------------------------- */

.ion-md__seg td .ion-data-value-chip,
.ion-md__seg th .ion-data-value-chip,
.ion-md__seg td .ion-broken-chip,
.ion-md__seg th .ion-broken-chip {
  background: none;
  border: none;
  padding: 0;
  white-space: normal;
}

/* Provenance trail — ordered list of steps that produced the chip's value
 * (fetched cell / aggregate / cohort / input / computed). Lets the user
 * trace a verified-data chip back to the exact tool-call chain. */

.ion-data-value-chip__tooltip-trail {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px 0 0;
  border-top: 1px solid var(--ion-border, rgba(255, 255, 255, 0.08));
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--ion-text-muted, #bbb);
  counter-reset: ion-trail-step;
}

.ion-data-value-chip__tooltip-trail li {
  counter-increment: ion-trail-step;
  position: relative;
  padding-left: 18px;
  line-height: 1.4;
}

.ion-data-value-chip__tooltip-trail li::before {
  content: counter(ion-trail-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand, #ea5b0c);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ion-data-value-chip__tooltip-trail strong {
  color: var(--ion-text, #f5f5f5);
  font-weight: 600;
}

.ion-data-value-chip__tooltip-trail code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ion-text, #f5f5f5);
}

.ion-data-value-chip__tooltip-expr {
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--ion-text-muted, #999);
  word-break: break-word;
}

/* ───────────────────────────────────────────────────────────────────────
 * Reduced motion
 * ─────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* .ion-panel__surface intentionally omitted — it keeps a gentle opacity
     fade (see the reduced-motion block near .ion-panel__surface above). */
  .ion-panel__scrim,
  .ion-launcher,
  .ion-empty__prompt {
    transition-duration: 0ms;
  }
  .ion-cursor,
  .ion-skeleton__row,
  .ion-skeleton__block,
  .ion-tool-status__spinner {
    animation: none;
  }
}

/* ─── Access banner (kill-switch / disabled / network) ────────────────── */

.ion-access-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  background: linear-gradient(90deg, rgba(234, 91, 12, 0.18), rgba(13, 124, 153, 0.18));
  border-bottom: 1px solid rgba(234, 91, 12, 0.4);
  color: var(--text-primary, rgba(255, 255, 255, 0.95));
  font-size: 14px;
}

.ion-access-banner__content {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.ion-access-banner__content strong {
  font-weight: 600;
}

.ion-access-banner__retry {
  flex-shrink: 0;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ion-access-banner__retry:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ─── Conversation history drawer ─────────────────────────────────────── */

.ion-history {
  position: absolute;
  inset: 0;
  background: var(--bg-1, #323232);
  border-left: 1px solid var(--border-light, rgba(255, 255, 255, 0.08));
  display: flex;
  flex-direction: column;
  z-index: 5;
  animation: ion-history-in 180ms ease-out;
}

@keyframes ion-history-in {
  from {
    transform: translateX(8px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.ion-history__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.08));
}

.ion-history__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, rgba(255, 255, 255, 0.95));
}

.ion-history__close {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.6));
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.ion-history__close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary, #fff);
}

/* "+ New conversation" affordance — primary action inside the drawer.
   Uses Batemo orange to be unmissable; collapsing into the header
   list flow so it sits right above the conversation entries. */

.ion-history__new {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  margin: 0 0 8px;
  background: color-mix(in srgb, var(--brand, #ea5b0c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand, #ea5b0c) 35%, transparent);
  border-radius: 8px;
  color: var(--brand, #ea5b0c);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ion-history__new:hover {
  background: color-mix(in srgb, var(--brand, #ea5b0c) 22%, transparent);
}

.ion-history__new span:first-child {
  font-size: 16px;
  line-height: 1;
}

/* Streaming-stable markdown segments. Each TextSegment is its own
   block so tool-marker siblings don't get unmounted on re-render of
   later segments. Default browser margins on inner <p>/<ul>/<table>
   would compound across segments — collapse them so the prose reads
   continuously across tool markers. */

.ion-md__seg > :first-child { margin-top: 0; }

.ion-md__seg > :last-child { margin-bottom: 0; }

.ion-md__seg + .ion-md__seg { margin-top: 0.4em; }

.ion-history__state {
  padding: 24px;
  text-align: center;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.6));
  font-size: 14px;
}

.ion-history__state--error {
  color: #f48a4f;
}

.ion-history__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
}

.ion-history__item {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
}

.ion-history__item--active {
  background: rgba(234, 91, 12, 0.08);
}

.ion-history__row {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 18px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  min-width: 0;
}

.ion-history__row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ion-history__row-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary, rgba(255, 255, 255, 0.95));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ion-history__row-meta {
  font-size: 12px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.55));
}

.ion-history__delete {
  background: transparent;
  border: none;
  font-size: 14px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.45));
  cursor: pointer;
  padding: 0 14px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ion-history__item:hover .ion-history__delete,
.ion-history__delete:focus-visible {
  opacity: 1;
}

.ion-history__delete:hover {
  color: #ff6b6b;
}

/* ───────────────────────────────────────────────────────────────────────
 * Admin feedback — per-message affordance + capture modal
 * ─────────────────────────────────────────────────────────────────────── */

.ion-msg__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.ion-msg__feedback-btn {
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--ion-text-muted);
  border-radius: var(--ion-radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}

.ion-msg__feedback-btn:hover {
  opacity: 1;
  color: var(--ion-marker);
  background: var(--ion-marker-soft);
}

.ion-fb-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001; /* above the slide-over + canvas */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 16px;
}

.ion-fb-modal {
  width: 100%;
  max-width: 520px;
  background: var(--ion-surface);
  border: 1px solid var(--ion-border);
  border-radius: var(--ion-radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

.ion-fb-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ion-border);
}

.ion-fb-modal__title {
  margin: 0;
  font-size: 15px;
  color: var(--ion-text);
}

.ion-fb-modal__close {
  border: none;
  background: transparent;
  color: var(--ion-text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ion-fb-modal__close:hover {
  color: var(--ion-text);
}

.ion-fb-modal__body {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ion-fb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ion-fb-field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ion-text-muted);
}

.ion-fb-field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.ion-fb-field--checkbox input[type='checkbox'] {
  width: 16px;
  height: 16px;
  flex: none;
}

.ion-fb-field select,
.ion-fb-field textarea {
  background: var(--ion-surface-2);
  border: 1px solid var(--ion-border);
  border-radius: var(--ion-radius-sm);
  color: var(--ion-text);
  padding: 8px 10px;
  font: inherit;
  width: 100%;
}

.ion-fb-field textarea {
  resize: vertical;
  min-height: 92px;
}

.ion-fb-segmented {
  display: inline-flex;
  border: 1px solid var(--ion-border);
  border-radius: var(--ion-radius-sm);
  overflow: hidden;
}

.ion-fb-seg {
  border: none;
  background: var(--ion-surface-2);
  color: var(--ion-text-muted);
  padding: 7px 14px;
  cursor: pointer;
  font: inherit;
}

.ion-fb-seg.is-active {
  background: var(--ion-marker);
  color: #fff;
}

.ion-fb-error {
  color: #ff7171;
  font-size: 13px;
}

.ion-fb-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}

.ion-fb-btn {
  padding: 8px 16px;
  border-radius: var(--ion-radius-sm);
  border: 1px solid var(--ion-border);
  cursor: pointer;
  font: inherit;
}

.ion-fb-btn--ghost {
  background: transparent;
  color: var(--ion-text-muted);
}

.ion-fb-btn--ghost:hover {
  color: var(--ion-text);
}

.ion-fb-btn--primary {
  background: var(--ion-marker);
  border-color: var(--ion-marker);
  color: #fff;
}

.ion-fb-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ion-fb-nudge {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--ion-marker);
}

.ion-fb-dropzone {
  border: 1px dashed var(--ion-border);
  border-radius: var(--ion-radius-sm);
  padding: 14px;
  font-size: 12px;
  color: var(--ion-text-muted);
  background: var(--ion-surface-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ion-fb-dropzone__hint {
  flex: 1;
}

.ion-fb-dropzone__pick {
  flex: none;
  border: 1px solid var(--ion-border);
  border-radius: var(--ion-radius-sm);
  background: transparent;
  color: var(--ion-text);
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
}

.ion-fb-dropzone__pick:hover {
  border-color: var(--ion-marker);
  color: var(--ion-marker);
}

.ion-fb-shot {
  position: relative;
  display: inline-block;
}

.ion-fb-shot__img {
  max-width: 100%;
  max-height: 220px;
  border-radius: var(--ion-radius-sm);
  border: 1px solid var(--ion-border);
  display: block;
}

.ion-fb-shot__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  border: none;
  border-radius: var(--ion-radius-sm);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
}

.ion-fb-shot__remove:hover {
  background: rgba(0, 0, 0, 0.85);
}

/* ---- Web search: consent control + unverified results ------------------- */

.ion-webconsent {
  border: 1px solid var(--ion-marker, #ea5b0c);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0;
  background: var(--ion-marker-soft, rgba(234, 91, 12, 0.12));
}

.ion-webconsent__title {
  font-weight: 600;
  margin: 0 0 4px;
}

.ion-webconsent__msg {
  margin: 0 0 10px;
  font-size: 0.9em;
  opacity: 0.9;
}

.ion-webconsent__actions {
  display: flex;
  gap: 8px;
}

.ion-webconsent__enable {
  background: var(--ion-marker, #ea5b0c);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-weight: 600;
}

.ion-webconsent__decline {
  background: transparent;
  border: 1px solid rgba(128, 128, 128, 0.5);
  color: inherit;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
}

.ion-webconsent__status {
  margin: 4px 0 0;
  font-size: 0.9em;
}

.ion-webconsent__status--error {
  color: #e88;
}

.ion-webresults {
  border: 1px solid rgba(180, 0, 0, 0.45);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
}

.ion-webresults__badge {
  margin: 0 0 8px;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #d6692e;
  text-transform: uppercase;
}

.ion-webresults__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ion-webresults__item {
  padding: 4px 0;
  border-top: 1px solid rgba(128, 128, 128, 0.15);
}

.ion-webresults__item:first-child {
  border-top: none;
}

.ion-webresults__link {
  font-weight: 600;
  color: var(--ion-source-color, #ea5b0c);
  text-decoration: none;
}

.ion-webresults__link:hover {
  text-decoration: underline;
}

.ion-webresults__snippet {
  display: block;
  font-size: 0.85em;
  opacity: 0.8;
  margin-top: 2px;
}

/* Ion AI assistant — launcher, slide-over, fullpage split, doc-block, canvas */

/**
 * IonHeroEntry — alternative Sales-Selection entry above the /explorer grid.
 * See frontend/assets/js/components/chat/IonHeroEntry.jsx and F1-PLAN §6.1.
 *
 * Visual goals:
 *   - "Wow"-moment on landing: clear AI-affordance, brand orange marker
 *   - Not a banner ad: glassmorphism + restrained scale, doesn't dominate the
 *     grid below
 *   - Mobile-friendly: chips wrap, textarea grows
 */

.ion-hero-entry {
  position: relative;
  margin: 16px 0 24px;
  padding: 0;
  display: flex;
  justify-content: center;
}

.ion-hero-inner {
  width: 100%;
  max-width: 880px;
  padding: 20px 24px;
  background: var(--glass-bg, rgba(28, 28, 28, 0.55));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-left: 2px solid var(--brand, #ea5b0c);
  border-radius: var(--r-lg, 12px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.ion-hero-title {
  margin: 0 0 4px;
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary, #f4f4f4);
}

.ion-hero-sub {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, #b8b8b8);
}

/* Input row ─────────────────────────────────────────────────────────────── */

.ion-hero-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
  background: var(--bg-3, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--r-md, 8px);
  padding: 8px 10px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ion-hero-form:focus-within {
  border-color: var(--brand-soft, rgba(234, 91, 12, 0.35));
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.10);
}

.ion-hero-input {
  flex: 1;
  min-width: 0;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary, #f4f4f4);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  padding: 6px 4px;
  min-height: 32px;
  max-height: 120px;
}

.ion-hero-input::placeholder {
  color: var(--text-tertiary, #8a8a8a);
}

.ion-hero-send {
  flex-shrink: 0;
  background: var(--brand, #ea5b0c);
  color: #fff;
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  border-radius: var(--r-sm, 6px);
  padding: 0 16px;
  cursor: pointer;
  transition: background-color 120ms ease, transform 80ms ease;
}

.ion-hero-send:hover:not(:disabled) {
  background: var(--brand-hover, #d24f08);
}

.ion-hero-send:active:not(:disabled) {
  transform: translateY(1px);
}

.ion-hero-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Branch chips row ─────────────────────────────────────────────────────── */

.ion-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.ion-hero-chips-label {
  font-size: 11px;
  color: var(--text-tertiary, #8a8a8a);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}

.ion-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--bg-2, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--r-pill, 999px);
  color: var(--text-secondary, #b8b8b8);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ion-hero-chip:hover {
  background: var(--brand-soft, rgba(234, 91, 12, 0.12));
  border-color: rgba(234, 91, 12, 0.35);
  color: var(--text-primary, #f4f4f4);
}

.ion-hero-chip:active {
  transform: translateY(1px);
}

.ion-hero-chip-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary, #b9b9bc);
}

/* Brand accent on the branch icon only on hover (Treatment A). */

.ion-hero-chip:hover .ion-hero-chip-icon {
  color: var(--brand, #ea5b0c);
}

.ion-hero-chip-label {
  white-space: nowrap;
}

/* Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .ion-hero-entry {
    margin: 12px 0 20px;
  }

  .ion-hero-inner {
    padding: 16px 16px;
  }

  .ion-hero-title {
    font-size: 19px;
  }

  .ion-hero-form {
    flex-direction: column;
    align-items: stretch;
  }

  .ion-hero-send {
    padding: 10px 16px;
  }

  .ion-hero-chips-label {
    width: 100%;
    margin-bottom: 2px;
  }
}

/* Reduced motion: kill micro-animations */

@media (prefers-reduced-motion: reduce) {
  .ion-hero-form,
  .ion-hero-send,
  .ion-hero-chip {
    transition: none;
  }

  .ion-hero-send:active:not(:disabled),
  .ion-hero-chip:active {
    transform: none;
  }
}

/* Ion Sales-Selection Hero on /explorer (F1 Power-Tool pilot) */

/* ===========================================================================
   Cell Selection — entry landing (the front door of /cell-selection)
   Two equal-dignity "doors": guided Ion (primary) + advanced filter wizard.
   Layout-only CSS; visual language (orange primary, ghost outline, dark cards,
   line-icon chips) reuses the app's brand tokens so it reads as native tool UI.
   =========================================================================== */

.cell-selection-entry {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

.cell-selection-entry__head {
  margin-bottom: 22px;
}

.cell-selection-entry__crumb {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.cell-selection-entry__title {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* Two doors: Ion guided (wider) + Advanced (equal dignity, narrower). */

.cell-selection-entry__doors {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 18px;
  align-items: stretch;
}

.cell-selection-entry__door {
  background: var(--bg-1);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 22px 24px;
}

.cell-selection-entry__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand);
}

.cell-selection-entry__label--muted {
  color: var(--text-tertiary);
}

.cell-selection-entry__label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.cell-selection-entry__heading {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.cell-selection-entry__sub {
  margin: 0 0 16px;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Ion input row + primary "Ask Ion" button (orange, reuses brand tokens). */

.cell-selection-entry__form {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.cell-selection-entry__input {
  flex: 1;
  min-width: 0;
  background: var(--bg-0);
  border: 1px solid var(--border-light);
  border-radius: 9px;
  padding: 12px 14px;
  color: var(--text-primary);
  font-size: 13px;
}

.cell-selection-entry__input::placeholder {
  color: var(--text-tertiary);
}

.cell-selection-entry__input:focus {
  outline: none;
  border-color: var(--brand);
}

.cell-selection-entry__primary {
  flex-shrink: 0;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 0 18px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.cell-selection-entry__primary:hover:not(:disabled) {
  background: var(--brand-hover);
}

.cell-selection-entry__primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Advanced ghost button. */

.cell-selection-entry__ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: 9px;
  padding: 11px 16px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cell-selection-entry__ghost:hover {
  border-color: var(--brand);
  background: var(--brand-soft, rgba(234, 91, 12, 0.12));
}

/* Branch quick-start chips — monochrome line-icons, accent only on hover. */

.cell-selection-entry__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.cell-selection-entry__chips-label {
  width: 100%;
  margin-bottom: 2px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.cell-selection-entry__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  background: var(--bg-2);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cell-selection-entry__chip:hover {
  border-color: var(--brand);
  background: var(--brand-soft, rgba(234, 91, 12, 0.12));
}

.cell-selection-entry__chip:active {
  transform: translateY(1px);
}

.cell-selection-entry__chip-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
}

.cell-selection-entry__chip:hover .cell-selection-entry__chip-icon {
  color: var(--brand);
}

.cell-selection-entry__chip-label {
  white-space: nowrap;
}

/* Stack the doors on narrow viewports. */

@media (max-width: 860px) {
  .cell-selection-entry__doors {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cell-selection-entry__primary,
  .cell-selection-entry__ghost,
  .cell-selection-entry__chip {
    transition: none;
  }
  .cell-selection-entry__chip:active {
    transform: none;
  }
}

/* Quiet guided-selection link on Cell Explorer (replaces the old Ion hero). */

.cells-guided-hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.cells-guided-hint__link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--brand);
  cursor: pointer;
}

.cells-guided-hint__link:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}

/* Cell Selection entry landing — guided Ion + advanced filter doors (/cell-selection) */

/**
 * WorkflowProgress — Sales-Selection breadcrumb in the canvas header.
 * See frontend/assets/js/components/chat/canvas/WorkflowProgress.jsx and
 * F1-PLAN §6.3.
 *
 * Visual goals:
 *   - Subtle, indicates progress without dominating the canvas
 *   - Brand-orange marks the active stage; cyan marks completed (mirrors
 *     the source-chip / brand-marker semantic split elsewhere in Ion)
 *   - Mobile: labels hide under 720px, dots stay
 */

.ion-workflow-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--bg-1, rgba(20, 20, 20, 0.6));
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  font-size: 12px;
  color: var(--text-tertiary, #8a8a8a);
}

.ion-workflow-progress__branch {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--brand-soft, rgba(234, 91, 12, 0.12));
  border: 1px solid rgba(234, 91, 12, 0.35);
  border-radius: 8px;
  color: var(--brand, #ea5b0c);
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Stages list — horizontal stepper ──────────────────────────────────── */

.ion-workflow-progress__stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.ion-workflow-progress__stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  white-space: nowrap;
}

.ion-workflow-progress__stage:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  margin-left: 6px;
  background: var(--glass-border, rgba(255, 255, 255, 0.12));
}

.ion-workflow-progress__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--text-quaternary, #555);
  color: var(--text-quaternary, #555);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ion-workflow-progress__label {
  color: var(--text-tertiary, #8a8a8a);
  font-family: var(--font-display, 'Big John', sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 160ms ease;
}

/* States ─────────────────────────────────────────────────────────────── */

.ion-workflow-progress__stage--completed .ion-workflow-progress__dot {
  background: rgba(13, 124, 153, 0.18);
  border-color: var(--accent, #0d7c99);
  color: var(--accent, #0d7c99);
}

.ion-workflow-progress__stage--completed .ion-workflow-progress__label {
  color: var(--text-secondary, #b8b8b8);
}

.ion-workflow-progress__stage--completed::after {
  background: var(--accent, #0d7c99) !important;
  opacity: 0.5;
}

.ion-workflow-progress__stage--active .ion-workflow-progress__dot {
  background: var(--brand, #ea5b0c);
  border-color: var(--brand, #ea5b0c);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.18);
  animation: ion-workflow-pulse 1.6s ease-in-out infinite;
}

.ion-workflow-progress__stage--active .ion-workflow-progress__label {
  color: var(--text-primary, #f4f4f4);
  font-weight: 600;
}

@keyframes ion-workflow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.18);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(234, 91, 12, 0.08);
  }
}

/* Skip button ──────────────────────────────────────────────────────── */

.ion-workflow-progress__skip {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--r-sm, 6px);
  color: var(--text-secondary, #b8b8b8);
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}

.ion-workflow-progress__skip:hover {
  background: var(--bg-3, rgba(255, 255, 255, 0.04));
  border-color: var(--glass-border-hover, rgba(255, 255, 255, 0.20));
  color: var(--text-primary, #f4f4f4);
}

/* Mobile: hide stage labels under 720px, keep dots for orientation */

@media (max-width: 720px) {
  .ion-workflow-progress {
    gap: 10px;
    padding: 8px 12px;
  }

  .ion-workflow-progress__label {
    display: none;
  }

  .ion-workflow-progress__stage:not(:last-child)::after {
    width: 16px;
  }

  .ion-workflow-progress__branch {
    font-size: 10px;
    padding: 3px 8px;
  }

  .ion-workflow-progress__skip {
    padding: 6px 10px;
    font-size: 11px;
  }
}

/* Reduced motion: kill the active-stage pulse */

@media (prefers-reduced-motion: reduce) {
  .ion-workflow-progress__stage--active .ion-workflow-progress__dot {
    animation: none;
  }

  .ion-workflow-progress__dot,
  .ion-workflow-progress__label,
  .ion-workflow-progress__skip {
    transition: none;
  }
}

/* Ion Sales-Selection workflow breadcrumb in the canvas header (F1) */

/**
 * ApplicationProfileCard — canvas renderer for the apply_application_profile
 * artifact. See WorkflowProgress for the breadcrumb that sits above it and
 * F1-PLAN §6.4 for the design rationale.
 */

.ion-app-profile {
  padding: 20px 24px;
  margin: 16px;
  /* Batemo Kachel tile (matches the chat surfaces) — the orange "AI" left bar
     is gone; theme-aware via the --ion-tile-* tokens in ion.css. */
  background: var(--ion-tile-grad);
  -webkit-backdrop-filter: var(--ion-tile-blur);
  backdrop-filter: var(--ion-tile-blur);
  border: 1px solid var(--ion-tile-border);
  border-radius: var(--ion-tile-radius);
  box-shadow: var(--ion-tile-shadow);
}

.ion-app-profile__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
}

.ion-app-profile__title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-primary, #f4f4f4);
}

.ion-app-profile__icon {
  display: inline-flex;
  align-items: center;
  color: var(--brand, #ea5b0c);
}

.ion-app-profile__header-actions {
  display: flex;
  gap: 8px;
}

.ion-app-profile__btn {
  font-size: 11.5px;
  font-weight: 500;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--r-sm, 6px);
  color: var(--text-secondary, #b8b8b8);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ion-app-profile__btn:hover:not(:disabled) {
  background: var(--bg-3, rgba(255, 255, 255, 0.04));
  color: var(--text-primary, #f4f4f4);
}

.ion-app-profile__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Section heading ─────────────────────────────────────────────────── */

.ion-app-profile__section {
  margin-bottom: 18px;
}

.ion-app-profile__section:last-child {
  margin-bottom: 0;
}

.ion-app-profile__section-title {
  margin: 0 0 10px;
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary, #8a8a8a);
}

/* Intro (v2) ──────────────────────────────────────────────────────── */

.ion-app-profile__intro {
  margin-bottom: 16px;
}

.ion-app-profile__intro-para {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, #c8c8c8);
}

.ion-app-profile__intro-para:last-child {
  margin-bottom: 0;
}

/* Hard-constraint pills ───────────────────────────────────────────── */

.ion-app-profile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ion-app-profile__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--bg-2, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  /* Rounded rectangle, not a full pill — reads as a clean technical spec chip. */
  border-radius: 7px;
  color: var(--text-primary, #f4f4f4);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Provenance badges (v2) — 'suggested' (AI proposed, unconfirmed) vs
   'user_confirmed' (the user explicitly confirmed it). Absent → no badge. */

.ion-app-profile__chip-confirmed {
  color: var(--success, #10b981);
  font-weight: 700;
}

.ion-app-profile__chip-badge {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(234, 91, 12, 0.14);
  color: var(--brand, #ea5b0c);
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Interactive hard-constraint rows (editable — rail, stacked) ───────── */

.ion-app-profile__constraints {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ion-app-profile__constraint {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-2, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
}

.ion-app-profile__constraint-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ion-app-profile__constraint-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--text-primary, #f4f4f4);
  margin-right: auto;
}

/* Numeric editor (op + threshold, or min ≤ label ≤ max). */

.ion-app-profile__constraint-numeric {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.ion-app-profile__constraint-op {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--text-secondary, #b8b8b8);
}

.ion-app-profile__constraint-unit {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
  color: var(--text-tertiary, #8a8a8a);
}

.ion-app-profile__constraint-input {
  width: 72px;
  padding: 4px 8px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--text-primary, #f4f4f4);
  background: var(--bg-1, rgba(0, 0, 0, 0.25));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--r-sm, 6px);
}

.ion-app-profile__constraint-input--text {
  width: auto;
  min-width: 84px;
  flex: 1 1 84px;
}

.ion-app-profile__constraint-input:focus-visible {
  outline: none;
  border-color: var(--brand, #ea5b0c);
}

.ion-app-profile__constraint-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Allow-list / not-in chip editors. */

.ion-app-profile__constraint-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ion-app-profile__constraint-prefix {
  font-size: 11px;
  color: var(--text-tertiary, #8a8a8a);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ion-app-profile__toggle-chip {
  padding: 3px 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
  color: var(--text-tertiary, #8a8a8a);
  background: transparent;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.ion-app-profile__toggle-chip:hover:not(:disabled) {
  color: var(--text-primary, #f4f4f4);
  border-color: var(--brand, #ea5b0c);
}

.ion-app-profile__toggle-chip--on {
  color: var(--brand, #ea5b0c);
  background: rgba(234, 91, 12, 0.14);
  border-color: rgba(234, 91, 12, 0.5);
}

.ion-app-profile__toggle-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ion-app-profile__value-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
  color: var(--text-primary, #f4f4f4);
  background: var(--bg-1, rgba(0, 0, 0, 0.25));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
}

.ion-app-profile__value-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--text-tertiary, #8a8a8a);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.ion-app-profile__value-chip-x:hover:not(:disabled) {
  color: var(--danger, #ef4444);
}

.ion-app-profile__constraint-raw {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--text-secondary, #b8b8b8);
}

.ion-app-profile__constraint-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Push the remove × to the trailing edge when a Confirm button precedes it. */

.ion-app-profile__constraint-actions .ion-app-profile__btn {
  margin-right: auto;
}

.ion-app-profile__constraint-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--text-tertiary, #8a8a8a);
  background: transparent;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--r-sm, 6px);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.ion-app-profile__constraint-remove:hover:not(:disabled) {
  color: var(--danger, #ef4444);
  border-color: var(--danger, #ef4444);
}

.ion-app-profile__constraint-remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Collapsible "what Ion can't check" caveats (default closed) ───────── */

.ion-app-profile__caveats {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
}

.ion-app-profile__caveats-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary, #8a8a8a);
}

.ion-app-profile__caveats-summary::-webkit-details-marker {
  display: none;
}

.ion-app-profile__caveats-icon {
  color: var(--text-secondary, #b8b8b8);
}

/* When open, the disclaimers footer inside drops its own top border/margin —
   the <details> already provides the separator. */

.ion-app-profile__caveats .ion-app-profile__disclaimers {
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
}

/* Scoring-weight bars ─────────────────────────────────────────────── */

.ion-app-profile__weights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ion-app-profile__weights-header .ion-app-profile__section-title {
  margin: 0;
}

.ion-app-profile__weight-resets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ion-app-profile__btn--tiny {
  padding: 4px 8px;
  font-size: 10.5px;
}

.ion-app-profile__weights {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ion-app-profile__weight-row {
  display: grid;
  grid-template-columns: 180px 1fr 48px;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.ion-app-profile__weight-row:not(:last-child) {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}

/* Interactive rows add a 4th column for the provenance badge. */

.ion-app-profile__weight-row--interactive {
  grid-template-columns: 150px 1fr 40px auto;
}

.ion-app-profile__weight-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  color: var(--text-secondary, #b8b8b8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ion-app-profile__weight-bar {
  position: relative;
  display: block;
  height: 8px;
  background: var(--bg-3, rgba(255, 255, 255, 0.05));
  border-radius: var(--r-sm, 4px);
  overflow: hidden;
}

.ion-app-profile__weight-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand, #ea5b0c) 0%, rgba(234, 91, 12, 0.7) 100%);
  border-radius: var(--r-sm, 4px);
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Editable slider (Slice A5) — replaces the read-only fill bar. Custom track/
   thumb styling for both engines so it reads as a calm datasheet control, not
   a default OS widget. */

.ion-app-profile__weight-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: var(--bg-3, rgba(255, 255, 255, 0.05));
  border-radius: var(--r-sm, 4px);
  cursor: pointer;
}

.ion-app-profile__weight-slider:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ion-app-profile__weight-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: var(--r-sm, 4px);
  background: linear-gradient(
    90deg,
    var(--brand, #ea5b0c) 0%,
    var(--brand, #ea5b0c) calc(var(--_pct, 0) * 1%),
    var(--bg-3, rgba(255, 255, 255, 0.05)) calc(var(--_pct, 0) * 1%)
  );
}

.ion-app-profile__weight-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand, #ea5b0c);
  border: 2px solid var(--bg-1, #1a1a1a);
  box-shadow: 0 0 0 1px rgba(234, 91, 12, 0.4);
}

.ion-app-profile__weight-slider::-moz-range-track {
  height: 8px;
  border-radius: var(--r-sm, 4px);
  background: var(--bg-3, rgba(255, 255, 255, 0.05));
}

.ion-app-profile__weight-slider::-moz-range-progress {
  height: 8px;
  border-radius: var(--r-sm, 4px);
  background: var(--brand, #ea5b0c);
}

.ion-app-profile__weight-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand, #ea5b0c);
  border: 2px solid var(--bg-1, #1a1a1a);
}

.ion-app-profile__weight-pct {
  text-align: right;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand, #ea5b0c);
}

/* Weight-provenance badges — mirrors the constraint-chip badges. */

.ion-app-profile__weight-badge {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(234, 91, 12, 0.14);
  color: var(--brand, #ea5b0c);
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ion-app-profile__weight-badge--user-set {
  background: transparent;
  color: var(--success, #10b981);
  padding-left: 0;
}

.ion-app-profile__weight-status {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--text-tertiary, #8a8a8a);
}

.ion-app-profile__weight-status--error {
  color: var(--danger, #ef4444);
}

.ion-app-profile__weight-why {
  margin-top: 10px;
}

.ion-app-profile__weight-why summary {
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary, #b8b8b8);
}

.ion-app-profile__weight-why-list {
  margin: 8px 0 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--text-secondary, #c8c8c8);
}

.ion-app-profile__weight-why-item {
  margin-bottom: 8px;
}

.ion-app-profile__weight-why-item p {
  margin: 4px 0 0;
}

/* Disclaimers ─────────────────────────────────────────────────────── */

.ion-app-profile__disclaimers {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
}

.ion-app-profile__disclaimer {
  margin: 0 0 6px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-tertiary, #8a8a8a);
  line-height: 1.5;
}

.ion-app-profile__disclaimer:last-child {
  margin-bottom: 0;
}

/* Mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .ion-app-profile {
    padding: 16px;
    margin: 12px;
  }

  .ion-app-profile__title {
    font-size: 16px;
  }

  .ion-app-profile__weight-row {
    grid-template-columns: 110px 1fr 44px;
    gap: 8px;
  }

  .ion-app-profile__weight-row--interactive {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
  }

  .ion-app-profile__weight-row--interactive .ion-app-profile__weight-label {
    flex: 1 1 100%;
    white-space: normal;
  }

  .ion-app-profile__weight-row--interactive .ion-app-profile__weight-slider {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ion-app-profile__weight-fill,
  .ion-app-profile__btn {
    transition: none;
  }
}

/* ── Canvas variant (persistent panel) ────────────────────────────────────
   Mounted by ArtifactCanvas above the Table/Plot/Report tabs for the whole
   selection flow (see chatStore.latestApplicationProfile). Deliberately
   compact and un-cardy — it's a control surface embedded in a panel that
   already has its own tile chrome (.ion-canvas__profile-panel), not a
   standalone card, so the outer border/shadow/blur are stripped here and the
   intro collapses by default to leave room for the constraints/weights. */

.ion-app-profile--canvas {
  margin: 0;
  padding: 14px 20px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ion-app-profile__header--canvas {
  margin-bottom: 10px;
  padding-bottom: 8px;
}

.ion-app-profile__intro-toggle {
  margin: 0 0 12px;
}

.ion-app-profile__intro-toggle summary {
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary, #b8b8b8);
}

.ion-app-profile__intro-toggle summary::-webkit-details-marker {
  display: none;
}

.ion-app-profile__intro-toggle .ion-app-profile__intro {
  margin-top: 8px;
  margin-bottom: 0;
}

/* ── Chat variant ──────────────────────────────────────────────────────────
   The profile now renders INLINE in the chat (the canvas shows the live Ragone
   instead). A calm, compact, collapsible <details> block that sits in the
   message flow and matches the doc-block surface. */

.ion-app-profile--chat {
  margin: 10px 0 0;
  padding: 12px 14px;
  /* Slightly inset from the message bubble so it reads as a sub-block. */
  border-radius: 10px;
}

.ion-app-profile--chat .ion-app-profile__section {
  margin-bottom: 12px;
}

.ion-app-profile__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, #c8c8c8);
  margin-bottom: 4px;
}

/* Hide the default disclosure triangle; use a rotating chevron via ::after. */

.ion-app-profile__summary::-webkit-details-marker {
  display: none;
}

.ion-app-profile__summary::after {
  content: '';
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-tertiary, #8a8a8a);
  border-bottom: 2px solid var(--text-tertiary, #8a8a8a);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.ion-app-profile--chat[open] .ion-app-profile__summary::after {
  transform: rotate(-135deg);
}

.ion-app-profile__summary-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* In the narrower chat column the weight grid needs a tighter label column. */

.ion-app-profile--chat .ion-app-profile__weight-row {
  grid-template-columns: 130px 1fr 44px;
  gap: 8px;
}

.ion-app-profile--chat .ion-app-profile__weight-row--interactive {
  grid-template-columns: 110px 1fr 36px auto;
}

/* In the narrow canvas rail the 4-column weight grid squeezes the slider down
   to a few pixels — and the mobile stack rule is viewport-gated, so it never
   fires on a wide 16:9 screen where the rail is narrow only because of the
   container-query split. Stack the row here: label on its own line, then a
   full-width slider + % below, so the thumb is actually grabbable. */

.ion-app-profile--canvas .ion-app-profile__weight-row--interactive {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.ion-app-profile--canvas .ion-app-profile__weight-row--interactive
  .ion-app-profile__weight-label {
  flex: 1 1 100%;
  white-space: normal;
}

.ion-app-profile--canvas .ion-app-profile__weight-row--interactive
  .ion-app-profile__weight-slider {
  flex: 1 1 auto;
  min-width: 0;
}

.ion-app-profile--canvas .ion-app-profile__weight-row--interactive
  .ion-app-profile__weight-pct {
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .ion-app-profile__summary::after {
    transition: none;
  }
}

/* Ion Sales-Selection ApplicationProfileCard canvas renderer (F1) */

/**
 * RankedCellsTable — canvas renderer for the rank_cells_for_application
 * artifact. See frontend/assets/js/components/chat/canvas/RankedCellsTable.jsx
 * and F1-PLAN §6.4.
 */

.ion-ranked-cells {
  margin: 16px;
  padding: 0;
  /* Batemo Kachel tile — theme-aware via ion.css --ion-tile-* tokens. */
  background: var(--ion-tile-grad);
  -webkit-backdrop-filter: var(--ion-tile-blur);
  backdrop-filter: var(--ion-tile-blur);
  border: 1px solid var(--ion-tile-border);
  border-radius: var(--ion-tile-radius);
  box-shadow: var(--ion-tile-shadow);
  overflow: hidden;
}

.ion-ranked-cells--empty {
  padding: 20px 24px;
  color: var(--text-tertiary, #8a8a8a);
  font-size: 13px;
  font-style: italic;
}

/* Header ────────────────────────────────────────────────────────── */

.ion-ranked-cells__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
  background: var(--bg-2, rgba(255, 255, 255, 0.02));
}

.ion-ranked-cells__title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ion-ranked-cells__title {
  margin: 0;
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-primary, #f4f4f4);
}

.ion-ranked-cells__subtitle {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-tertiary, #8a8a8a);
}

/* Confidence indicator ──────────────────────────────────────────── */

.ion-ranked-cells__confidence {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 6px 12px;
  border-radius: var(--r-md, 8px);
  border: 1px solid;
  background: var(--bg-3, rgba(255, 255, 255, 0.03));
  white-space: nowrap;
}

.ion-ranked-cells__confidence-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-quaternary, #555);
}

.ion-ranked-cells__confidence-value {
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ion-ranked-cells__confidence--high {
  border-color: rgba(13, 124, 153, 0.45);
  background: rgba(13, 124, 153, 0.10);
}

.ion-ranked-cells__confidence--high .ion-ranked-cells__confidence-value {
  color: var(--accent, #0d7c99);
}

.ion-ranked-cells__confidence--medium {
  border-color: rgba(234, 91, 12, 0.45);
  background: rgba(234, 91, 12, 0.08);
}

.ion-ranked-cells__confidence--medium .ion-ranked-cells__confidence-value {
  color: var(--brand, #ea5b0c);
}

.ion-ranked-cells__confidence--low,
.ion-ranked-cells__confidence--unknown {
  border-color: rgba(255, 255, 255, 0.12);
}

.ion-ranked-cells__confidence--low .ion-ranked-cells__confidence-value,
.ion-ranked-cells__confidence--unknown .ion-ranked-cells__confidence-value {
  color: var(--text-tertiary, #8a8a8a);
}

/* Table ─────────────────────────────────────────────────────────── */

.ion-ranked-cells__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ion-ranked-cells__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}

.ion-ranked-cells__table th {
  text-align: left;
  padding: 12px 14px;
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary, #8a8a8a);
  background: var(--bg-2, rgba(255, 255, 255, 0.02));
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
  white-space: nowrap;
}

.ion-ranked-cells__table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: var(--text-secondary, #b8b8b8);
  vertical-align: middle;
}

.ion-ranked-cells__row {
  cursor: pointer;
  transition: background-color 120ms ease;
}

.ion-ranked-cells__row:hover {
  background: rgba(234, 91, 12, 0.04);
}

.ion-ranked-cells__row:focus-visible {
  outline: 2px solid var(--brand, #ea5b0c);
  outline-offset: -2px;
}

.ion-ranked-cells__row:last-child td {
  border-bottom: none;
}

/* Columns ──────────────────────────────────────────────────────── */

.ion-ranked-cells__rank-col {
  width: 36px;
}

.ion-ranked-cells__score-col {
  width: 160px;
}

.ion-ranked-cells__pass-col {
  width: 48px;
  text-align: center;
}

.ion-ranked-cells__rank {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text-tertiary, #8a8a8a);
}

.ion-ranked-cells__cell {
  display: flex;
  flex-direction: column;
}

.ion-ranked-cells__manufacturer {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #8a8a8a);
}

.ion-ranked-cells__name {
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #f4f4f4);
  margin-top: 2px;
}

/* Favorite star — toggles the shared manualPicks (synced with the plot pin). */

.ion-ranked-cells__fav-col {
  width: 30px;
}

.ion-ranked-cells__fav {
  text-align: center;
}

.ion-ranked-cells__fav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--text-tertiary, #8a8a8a);
  padding: 2px;
  transition: color 120ms ease, transform 80ms ease;
}

.ion-ranked-cells__fav-btn:hover {
  color: var(--brand-orange, #ea5b0c);
  transform: scale(1.15);
}

.ion-ranked-cells__fav-btn--on {
  color: var(--brand-orange, #ea5b0c);
}

/* Sortable column headers. */

.ion-ranked-cells__th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.ion-ranked-cells__th-sort:hover {
  color: var(--text-primary, #f4f4f4);
}

/* Manual pick (user added a cell from the plot, possibly one Ion ruled out). */

.ion-ranked-cells__rank-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(234, 91, 12, 0.15);
  color: var(--brand-orange, #ea5b0c);
  font-weight: 700;
}

.ion-ranked-cells__manual-badge {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 7px;
  background: rgba(234, 91, 12, 0.12);
  border: 1px solid rgba(234, 91, 12, 0.35);
  color: var(--brand-orange, #ea5b0c);
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Score column ─────────────────────────────────────────────────── */

/* Keep the cell a real table-cell (vertical-align middle, aligned borders);
   the flex layout lives on an inner wrapper so it doesn't break row alignment. */

.ion-ranked-cells__score-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ion-ranked-cells__score-bar {
  position: relative;
  display: block;
  flex: 1;
  height: 6px;
  background: var(--bg-3, rgba(255, 255, 255, 0.05));
  border-radius: var(--r-sm, 4px);
  overflow: hidden;
}

.ion-ranked-cells__score-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand, #ea5b0c) 0%, rgba(234, 91, 12, 0.7) 100%);
  border-radius: var(--r-sm, 4px);
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ion-ranked-cells__score-pct {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary, #f4f4f4);
  min-width: 36px;
  text-align: right;
}

/* Constraint pass column ───────────────────────────────────────── */

.ion-ranked-cells__pass {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.ion-ranked-cells__pass--ok {
  color: #5cb85c;
}

.ion-ranked-cells__pass--fail {
  color: #e15554;
}

/* Reason / weak ─────────────────────────────────────────────────── */

.ion-ranked-cells__reason {
  color: var(--text-secondary, #b8b8b8);
  font-size: 12.5px;
  line-height: 1.4;
  max-width: 280px;
}

.ion-ranked-cells__weak-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ion-ranked-cells__weak-empty {
  color: var(--text-quaternary, #555);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

.ion-ranked-cells__weak-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--bg-3, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--r-sm, 4px);
  color: var(--text-tertiary, #8a8a8a);
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
}

/* Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .ion-ranked-cells {
    margin: 12px;
  }

  .ion-ranked-cells__header {
    padding: 12px 16px;
  }

  .ion-ranked-cells__title {
    font-size: 14px;
  }

  .ion-ranked-cells__table th,
  .ion-ranked-cells__table td {
    padding: 10px 8px;
    font-size: 12px;
  }

  .ion-ranked-cells__score-col {
    width: 110px;
  }

  .ion-ranked-cells__reason {
    max-width: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ion-ranked-cells__score-fill,
  .ion-ranked-cells__row {
    transition: none;
  }
}

/* Ion Sales-Selection RankedCellsTable canvas renderer (F1) */

/**
 * ReportArtifact — the canvas "Report" tab: config-driven supervisor report.
 * See frontend/assets/js/components/chat/canvas/ReportArtifact.jsx.
 * Matches the ion-ranked-cells design language (glass cards, Big John
 * headings, Batemo orange accents).
 */

.ion-report {
  position: relative; /* anchor for the PDF-export status overlay */
  margin: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* Batemo Kachel tile — theme-aware via ion.css --ion-tile-* tokens. */
  background: var(--ion-tile-grad);
  -webkit-backdrop-filter: var(--ion-tile-blur);
  backdrop-filter: var(--ion-tile-blur);
  border: 1px solid var(--ion-tile-border);
  border-radius: var(--ion-tile-radius);
  box-shadow: var(--ion-tile-shadow);
  color: var(--text-secondary, #c8c8c8);
  font-size: 13px;
  line-height: 1.5;
}

.ion-report--empty {
  color: var(--text-tertiary, #8a8a8a);
  font-style: italic;
}

.ion-report__header {
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
  padding-bottom: 12px;
}

.ion-report__title {
  margin: 0;
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-primary, #f4f4f4);
}

.ion-report__subtitle {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--text-tertiary, #8a8a8a);
}

.ion-report__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ion-report__heading {
  margin: 0;
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-orange, #ea5b0c);
}

.ion-report__confidence {
  color: var(--text-tertiary, #8a8a8a);
  font-family: var(--font-body, 'Roboto', sans-serif);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.ion-report__block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ion-report__label {
  font-size: 11px;
  color: var(--text-tertiary, #8a8a8a);
}

.ion-report__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ion-report__pill {
  padding: 4px 10px;
  background: var(--bg-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: 999px;
  font-size: 11.5px;
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  color: var(--text-secondary, #c8c8c8);
}

.ion-report__weights {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ion-report__weight {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.ion-report__weight span:last-child {
  color: var(--brand-orange, #ea5b0c);
  font-weight: 600;
}

.ion-report__cells {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ion-report__cell {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.05));
}

.ion-report__cell-rank {
  grid-row: span 2;
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-orange, #ea5b0c);
}

.ion-report__cell-name {
  font-weight: 600;
  color: var(--text-primary, #f4f4f4);
}

.ion-report__cell-fail {
  color: var(--danger, #e0533d);
  font-weight: 400;
  font-size: 11.5px;
}

.ion-report__cell-reason {
  grid-column: 2;
  font-size: 11.5px;
  color: var(--text-tertiary, #8a8a8a);
}

.ion-report__pending {
  margin: 0;
  color: var(--text-tertiary, #8a8a8a);
  font-style: italic;
}

.ion-report__disclaimers ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ion-report__disclaimers li {
  font-size: 11.5px;
  color: var(--text-tertiary, #9a9a9a);
}

/* ── Toolbar: section toggle chips + export button ─────────────────────── */

.ion-report__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
}

.ion-report__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}

.ion-report__toggle {
  padding: 4px 10px;
  background: var(--bg-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  /* Rounded rectangle, not a full pill — reads as a section switch in the same
     family as the toolbar buttons (6px). The status-label `.ion-report__pill`
     stays a capsule on purpose. */
  border-radius: 7px;
  font-size: 11.5px;
  font-family: var(--font-body, 'Roboto', sans-serif);
  color: var(--text-tertiary, #8a8a8a);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ion-report__toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, #c8c8c8);
}

.ion-report__toggle--active {
  background: rgba(234, 91, 12, 0.12);
  border-color: rgba(234, 91, 12, 0.4);
  color: var(--brand-orange, #ea5b0c);
}

.ion-report__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.ion-report__btn {
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.ion-report__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ion-report__btn--primary {
  background: var(--brand-orange, #ea5b0c);
  border: none;
  color: #fff;
}

.ion-report__btn--primary:hover:not(:disabled) {
  background: #d44f0a;
}

.ion-report__btn--ghost {
  background: transparent;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  color: var(--text-secondary, #c8c8c8);
}

.ion-report__btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

/* ── PDF export status overlay ─────────────────────────────────────────────
   Covers the whole report surface while the server renders the PDF (a few
   seconds) so the action reads as "in progress", and shows an error+retry
   state on failure. */

.ion-report__pdf-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: var(--ion-tile-radius);
  background: var(--ion-tile-grad);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: ion-fade-in var(--ion-dur-sm, 180ms) var(--ion-ease-out, ease) both;
}

.ion-report__pdf-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  padding: 22px 26px;
  text-align: center;
  background: var(--bg-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--ion-tile-radius);
  box-shadow: var(--ion-tile-shadow);
}

.ion-report__pdf-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid var(--glass-border, rgba(255, 255, 255, 0.18));
  border-top-color: var(--brand-orange, #ea5b0c);
  animation: ion-spin 0.9s linear infinite;
}

.ion-report__pdf-title {
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary, #f4f4f4);
}

.ion-report__pdf-hint {
  font-size: 12px;
  color: var(--text-tertiary, #8a8a8a);
}

.ion-report__pdf-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.ion-report__pdf-overlay--error .ion-report__pdf-title {
  color: var(--brand-orange, #ea5b0c);
}

@media (prefers-reduced-motion: reduce) {
  .ion-report__pdf-overlay {
    animation: none;
  }
  .ion-report__pdf-spinner {
    animation-duration: 1.6s;
  }
}

/* ── Exec-summary / rationale editor ───────────────────────────────────── */

.ion-report__rationale {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ion-report__rationale-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--bg-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  color: var(--text-primary, #f4f4f4);
  font-size: 13px;
  font-family: var(--font-body, 'Roboto', sans-serif);
  line-height: 1.55;
  resize: vertical;
}

.ion-report__rationale-textarea:focus {
  outline: none;
  border-color: rgba(234, 91, 12, 0.4);
}

.ion-report__rationale-textarea:disabled {
  opacity: 0.5;
}

.ion-report__rationale-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ion-report__rationale-badge {
  font-size: 10.5px;
  color: var(--text-tertiary, #8a8a8a);
  font-style: italic;
}

/* ── Inline error ───────────────────────────────────────────────────────── */

.ion-report__inline-error {
  margin: 0;
  font-size: 11.5px;
  color: var(--danger, #e0533d);
}

/* ── Provenance ─────────────────────────────────────────────────────────── */

.ion-report__provenance-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary, #c8c8c8);
}

.ion-report__disclaimers-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ion-report__disclaimers-item {
  font-size: 11.5px;
  color: var(--text-tertiary, #9a9a9a);
}

/* ── Per-cell rationale ─────────────────────────────────────────────────── */

.ion-report__per-cell-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ion-report__per-cell-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.05));
}

.ion-report__per-cell-name {
  font-weight: 600;
  color: var(--text-primary, #f4f4f4);
  font-size: 12.5px;
}

.ion-report__per-cell-reason {
  font-size: 11.5px;
  color: var(--text-secondary, #c8c8c8);
}

.ion-report__per-cell-weak {
  margin: 2px 0 0;
  padding-left: 16px;
  font-size: 11px;
  color: var(--text-tertiary, #8a8a8a);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Pack sizing ────────────────────────────────────────────────────────── */

.ion-report__pack-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ion-report__pack-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-secondary, #c8c8c8);
}

/* ── Next steps ─────────────────────────────────────────────────────────── */

.ion-report__next-steps-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary, #c8c8c8);
}

/* ── Loading skeleton ───────────────────────────────────────────────────── */

.ion-report--skeleton {
  pointer-events: none;
}

.ion-report__skeleton-header,
.ion-report__skeleton-toolbar,
.ion-report__skeleton-block {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: ion-report-shimmer 1.4s ease-in-out infinite;
}

.ion-report__skeleton-header {
  height: 28px;
  width: 55%;
}

.ion-report__skeleton-toolbar {
  height: 32px;
}

.ion-report__skeleton-block {
  height: 80px;
}

.ion-report__skeleton-block--tall {
  height: 130px;
}

.ion-report__skeleton-block--short {
  height: 48px;
}

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

/* Ion Sales-Selection ReportArtifact canvas tab — sales one-pager (F1) */

/**
 * CanvasHandoffCTAs — final hand-off bar at the bottom of the artifact canvas.
 * See frontend/assets/js/components/chat/canvas/CanvasHandoffCTAs.jsx and
 * F1-PLAN §6.6.
 */

.ion-handoff-ctas {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-2, rgba(255, 255, 255, 0.02));
  border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  flex-wrap: wrap;
  align-items: center;
}

.ion-handoff-ctas__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.14));
  border-radius: var(--r-sm, 6px);
  color: var(--text-primary, #f4f4f4);
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}

.ion-handoff-ctas__btn:hover:not(:disabled) {
  background: var(--bg-3, rgba(255, 255, 255, 0.05));
  border-color: var(--glass-border-hover, rgba(255, 255, 255, 0.24));
}

.ion-handoff-ctas__btn:active:not(:disabled) {
  transform: translateY(1px);
}

.ion-handoff-ctas__btn:focus-visible {
  outline: 2px solid var(--brand, #ea5b0c);
  outline-offset: 2px;
}

.ion-handoff-ctas__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Primary = orange-filled (Open in Compare; the recommended exit per UX). */

.ion-handoff-ctas__btn--primary {
  background: var(--brand, #ea5b0c);
  border-color: var(--brand, #ea5b0c);
  color: #fff;
}

.ion-handoff-ctas__btn--primary:hover:not(:disabled) {
  background: var(--brand-hover, #d24f08);
  border-color: var(--brand-hover, #d24f08);
  color: #fff;
}

/* Ghost = explicitly muted (PDF stub for F1; will become primary when
 *  backend endpoint ships in F2). */

.ion-handoff-ctas__btn--ghost {
  border-style: dashed;
  color: var(--text-tertiary, #8a8a8a);
}

@media (max-width: 720px) {
  .ion-handoff-ctas {
    padding: 10px 12px;
    gap: 8px;
  }

  .ion-handoff-ctas__btn {
    padding: 8px 12px;
    font-size: 11.5px;
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ion-handoff-ctas__btn {
    transition: none;
  }

  .ion-handoff-ctas__btn:active:not(:disabled) {
    transform: none;
  }
}

/* ── Validation next-steps bar (ValidationNextSteps.jsx) ───────────────────
   "Take it further with Batemo" — the expert/upsell exit shown alongside the
   hand-off bar once a shortlist exists. */

.ion-nextsteps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  background: var(--bg-2, rgba(255, 255, 255, 0.02));
}

.ion-nextsteps__title {
  margin: 0;
  font-family: var(--font-display, 'Big John', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-orange, #ea5b0c);
}

.ion-nextsteps__lead {
  margin: 0;
  font-size: 12px;
  color: var(--text-tertiary, #8a8a8a);
}

.ion-nextsteps__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ion-nextsteps__btn {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.14));
  border-radius: var(--r-sm, 6px);
  color: var(--text-primary, #f4f4f4);
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.ion-nextsteps__btn:hover:not(:disabled) {
  background: var(--bg-3, rgba(255, 255, 255, 0.05));
  border-color: var(--glass-border-hover, rgba(255, 255, 255, 0.24));
}

.ion-nextsteps__btn:disabled {
  cursor: default;
}

.ion-nextsteps__btn--done {
  color: var(--brand-orange, #ea5b0c);
  border-color: rgba(234, 91, 12, 0.4);
  background: rgba(234, 91, 12, 0.1);
  opacity: 1;
}

.ion-nextsteps__btn--primary {
  background: var(--brand, #ea5b0c);
  border-color: var(--brand, #ea5b0c);
  color: #fff;
}

.ion-nextsteps__btn--primary:disabled {
  opacity: 0.45;
}

.ion-nextsteps__profile {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ion-nextsteps__profile-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  background: var(--bg-2, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--r-sm, 6px);
  color: var(--text-primary, #f4f4f4);
  font-family: var(--font-body, 'Roboto', sans-serif);
  font-size: 12.5px;
}

.ion-nextsteps__thanks {
  margin: 0;
  font-size: 12px;
  color: var(--brand-orange, #ea5b0c);
}

.ion-nextsteps__error {
  margin: 0;
  font-size: 12px;
  color: #ef4444;
}

@media (prefers-reduced-motion: reduce) {
  .ion-nextsteps__btn {
    transition: none;
  }
}

/* Ion Sales-Selection canvas footer hand-off CTAs (F1) */

/**
 * SalesRagonePlot — ECharts scatter on the artifact canvas Plot tab.
 * See frontend/assets/js/components/chat/canvas/SalesRagonePlot.jsx.
 */

.ion-ragone-plot {
  position: relative;
  margin: 16px;
  padding: 16px;
  /* Fixed dark "stage" (like the factsheet plots) framed by the Kachel border
     — the ECharts scatter reads best on dark, so this does NOT flip in light. */
  background: var(--ion-plot-stage);
  border: 1px solid var(--ion-tile-border);
  border-radius: var(--ion-tile-radius);
  box-shadow: var(--ion-tile-shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Fill the canvas pane down to the CTA bar (toolbar + caption stay their
     natural height; the plot stage below takes the rest). */
  flex: 1;
  min-height: 0;
}

/* Loading/retry layer — shown while the full catalogue (~315 cells) hasn't
   arrived yet, even if a backend overlay (~22 demo cells) already has. Covers
   the whole figure so the user never mistakes the overlay-only render for the
   final plot (Bug D). The ECharts canvas stays mounted underneath. */

.ion-ragone-plot__catalogue-state {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 20px 24px;
  text-align: center;
  background: var(--ion-plot-stage);
  border-radius: var(--ion-tile-radius);
  color: var(--text-tertiary, #8a8a8a);
  font-size: 13px;
  font-style: italic;
}

.ion-ragone-plot__retry {
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand, #ea5b0c);
  background: rgba(234, 91, 12, 0.1);
  border: 1px solid rgba(234, 91, 12, 0.35);
  border-radius: var(--ion-tile-radius, 8px);
  padding: 8px 14px;
  cursor: pointer;
  transition: background 150ms ease-out;
}

.ion-ragone-plot__retry:hover {
  background: rgba(234, 91, 12, 0.18);
}

/* Toolbar above the plot — pin hint (left) + Focus-View toggle (right). */

.ion-ragone-plot__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.ion-ragone-plot__hint {
  font-size: 11.5px;
  color: var(--text-tertiary, #8a8a8a);
  font-style: italic;
}

.ion-ragone-plot__focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary, #c8c8c8);
  cursor: pointer;
  user-select: none;
}

.ion-ragone-plot__focus input {
  accent-color: var(--brand-orange, #ea5b0c);
  cursor: pointer;
}

.ion-ragone-plot__focus input:disabled {
  cursor: not-allowed;
}

.ion-ragone-plot__focus:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

/* The canvas is always mounted; the empty message overlays it (so the ECharts
   instance survives a points → empty → points cycle). */

.ion-ragone-plot__stage {
  position: relative;
  /* Grow to fill the figure between the toolbar and the caption. */
  flex: 1;
  min-height: 0;
}

.ion-ragone-plot__canvas {
  width: 100%;
  /* Fill the stage (was a fixed 420px, which left empty space below the plot
     on tall/16:9 canvases). The ECharts ResizeObserver auto-resizes. */
  height: 100%;
  min-height: 300px;
}

.ion-ragone-plot__empty-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px 24px;
  color: var(--text-tertiary, #8a8a8a);
  font-size: 13px;
  font-style: italic;
  text-align: center;
}

.ion-ragone-plot__axis-note {
  font-size: 11px;
  color: var(--text-tertiary, #8a8a8a);
  text-align: center;
  margin: 0;
  opacity: 0.85;
  font-style: italic;
}

.ion-ragone-plot__caption {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-tertiary, #8a8a8a);
  text-align: center;
  margin: 0;
}

.ion-ragone-plot__caption-text {
  /* The live exclusion summary (counts + reasons) updates after every answer —
     the JSX keys this span by its text, so re-mounting replays the fade. The
     parent <figcaption aria-live> stays put so screen readers still announce. */
  display: inline-block;
  animation: ion-fade-in var(--ion-dur-sm, 180ms) var(--ion-ease-out, ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .ion-ragone-plot__caption-text {
    animation: none;
  }
}

.ion-ragone-plot--empty {
  padding: 20px 24px;
  color: var(--text-tertiary, #8a8a8a);
  font-size: 13px;
  font-style: italic;
  text-align: center;
}

@media (max-width: 720px) {
  .ion-ragone-plot {
    margin: 12px;
    padding: 12px;
  }
  .ion-ragone-plot__canvas {
    height: 320px;
  }
}

/* Reduction funnel under the plot — how the whole catalogue narrows to the
   shortlist (phase-aligned with the breadcrumb). Compact rows: label · bar ·
   count. Bars are proportional to the catalogue size. */

.ion-ragone-funnel {
  list-style: none;
  margin: 4px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--ion-tile-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ion-ragone-funnel__row {
  display: grid;
  grid-template-columns: 128px 1fr auto;
  align-items: center;
  gap: 10px;
}

.ion-ragone-funnel__label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--text-tertiary, #8a8a8a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ion-ragone-funnel__track {
  position: relative;
  height: 8px;
  background: var(--bg-3, rgba(255, 255, 255, 0.05));
  border-radius: var(--r-sm, 4px);
  overflow: hidden;
}

.ion-ragone-funnel__fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand, #ea5b0c) 0%, rgba(234, 91, 12, 0.65) 100%);
  border-radius: var(--r-sm, 4px);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ion-ragone-funnel__count {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #c8c8c8);
  min-width: 3ch;
  text-align: right;
}

/* Top-picks row: brand-orange count + a filled dot feel via a stronger label. */

.ion-ragone-funnel__row--top .ion-ragone-funnel__count {
  color: var(--brand, #ea5b0c);
}

.ion-ragone-funnel__row--top .ion-ragone-funnel__label {
  color: var(--text-secondary, #c8c8c8);
}

@media (prefers-reduced-motion: reduce) {
  .ion-ragone-funnel__fill {
    transition: none;
  }
}

/* Ion Sales-Selection Ragone scatter on the Plot tab (F1) */

/**
 * IonDemoBanner — subtle but unmistakable strip shown when `?ion_demo=`
 * is active. Designed to read as "this is a presentation" without being
 * obnoxious enough to detract from the demo itself.
 */

.ion-demo-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(234, 91, 12, 0.12);
  border-bottom: 1px solid rgba(234, 91, 12, 0.30);
  color: var(--brand, #ea5b0c);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.ion-demo-banner__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand, #ea5b0c);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.25);
  animation: ion-demo-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.ion-demo-banner__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes ion-demo-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.25); }
  50%      { box-shadow: 0 0 0 5px rgba(234, 91, 12, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
  .ion-demo-banner__dot {
    animation: none;
  }
}

/* Ion Sales-Selection demo-mode banner (?ion_demo=...) */

/* ===== STEP 7: Features ===== */

/**
 * Compare Panel Styles
 * Shows list of cells selected for comparison with smooth animations
 */

.compare-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
}

/* Header */

.compare-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.compare-panel__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.compare-icon {
    font-size: 1.5rem;
}

.compare-panel__title h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.compare-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    background: rgba(234, 91, 12, 0.2);
    border: 1px solid rgba(234, 91, 12, 0.4);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ea5b0c;
}

.compare-clear-btn {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.compare-clear-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
}

/* Empty State */

.compare-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.compare-empty__icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.compare-empty__text {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
}

.compare-empty__hint {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin: 0;
}

.compare-empty__hint strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(234, 91, 12, 0.2);
    border: 1px solid rgba(234, 91, 12, 0.4);
    border-radius: 4px;
    color: #ea5b0c;
    font-weight: 600;
    margin: 0 0.25rem;
}

/* Cell List */

.compare-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.compare-cell {
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.2s ease;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.compare-cell:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(2px);
}

/* Image */

.compare-cell__image {
    width: 4rem;
    height: 4rem;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-cell__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-cell__placeholder {
    font-size: 1.5rem;
    opacity: 0.3;
}

.compare-cell__skeleton {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

    100% {
        background-position: -200% 0;
    }
}

/* Info */

.compare-cell__info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.compare-cell__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compare-cell__meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compare-cell__specs {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-family: 'Roboto Mono', monospace;
}

.compare-cell__skeleton-text {
    height: 0.875rem;
    width: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.compare-cell__skeleton-text.short {
    width: 60%;
}

/* Remove Button */

.compare-cell__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.3);
    border-radius: 6px;
    color: #ff3b30;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.compare-cell__remove:hover {
    background: rgba(255, 59, 48, 0.2);
    border-color: rgba(255, 59, 48, 0.5);
    transform: scale(1.1);
}

/* Footer */

.compare-panel__footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.compare-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 0 0 0.75rem 0;
    text-align: center;
}

/* View Comparison Button */

.compare-view-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #ea5b0c 0%, #d64a0a 100%);
    border: 1px solid rgba(234, 91, 12, 0.5);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.2);
}

.compare-view-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff6a1a 0%, #e55512 100%);
    border-color: rgba(234, 91, 12, 0.7);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.3);
    transform: translateY(-1px);
}

.compare-view-btn:active:not(:disabled) {
    transform: translateY(0);
}

.compare-view-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.3);
    box-shadow: none;
}

.compare-view-btn__icon {
    font-size: 1.125rem;
}

/* Scrollbar styling */

.compare-list::-webkit-scrollbar {
    width: 6px;
}

.compare-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.compare-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.compare-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/**
 * Compare System Styles
 * Styles for compare panel, cell chips, table view, and checkboxes
 */

/* ============================================================================
   COMPARE PANEL
   ============================================================================ */

.compare-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Panel Header */

.compare-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(26, 26, 26, 0.7);
    border-bottom: 1px solid rgba(234, 91, 12, 0.15);
    flex-shrink: 0;
}

.compare-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.compare-title {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
    color: var(--text-primary);
}

.compare-count {
    color: var(--accent);
    font-weight: 400;
    margin-left: 10px;
}

.compare-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Quick Add Search */

.compare-quick-add {
    position: relative;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.quick-add-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.quick-add-search:focus-within {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(234, 91, 12, 0.4);
    box-shadow: 0 0 0 2px rgba(234, 91, 12, 0.1);
}

.quick-add-search svg {
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.quick-add-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #fff;
    padding: 0;
}

.quick-add-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.quick-add-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.quick-add-clear:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* Search Results Dropdown */

.quick-add-results {
    position: absolute;
    top: calc(100% - 4px);
    left: 12px;
    right: 12px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.95) 0%, rgba(45, 42, 38, 0.98) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quick-add-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.quick-add-result:last-child {
    border-bottom: none;
}

.quick-add-result:hover {
    background: rgba(234, 91, 12, 0.1);
}

.quick-add-result svg {
    color: #ea5b0c;
    flex-shrink: 0;
}

.result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.result-name {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    overflow: hidden;
}

.result-model {
    font-family: 'Big John', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);

}

/* No Results State */

.quick-add-no-results {
    padding: 16px 12px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Cell List */

.compare-cell-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    max-height: calc(100vh - 300px);
}

/* Empty State */

.compare-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.compare-empty-state svg {
    width: 48px;
    height: 48px;
    opacity: 0.3;
    margin-bottom: 12px;
}

.empty-state-title {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 4px 0;
}

.empty-state-hint {
    font-size: 12px;
    opacity: 0.7;
    margin: 0;
}

/* Clear All Button */

.compare-clear-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    background: rgba(234, 91, 12, 0.1);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 6px;
    color: var(--primary);
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.compare-clear-all:hover {
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.5);
}

/* Mode Selector */

/* Compare Action Section (View Comparison Button) */

.compare-action-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 12px;
    background: rgba(26, 26, 26, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.compare-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.25), rgba(234, 91, 12, 0.15));
    border: 1px solid rgba(234, 91, 12, 0.5);
    border-radius: 8px;
    color: #ea5b0c;
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;

    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.2);
}

.compare-view-btn:hover {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.35), rgba(234, 91, 12, 0.25));
    border-color: rgba(234, 91, 12, 0.7);
    box-shadow: 0 4px 16px rgba(234, 91, 12, 0.3);
    transform: translateY(-1px);
    color: #fff;
}

.compare-view-btn svg {
    stroke: currentColor;
}

.compare-hint {
    margin: 0;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.4;
}

/* Content Area */

.compare-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.coming-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ============================================================================
   COMPARE CELL CHIP
   ============================================================================ */

.compare-cell-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: all 0.2s;
    cursor: pointer;
}

.compare-cell-chip:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateX(2px);
}

.compare-cell-chip.loading {
    opacity: 0.6;
}

/* Chip Image */

.chip-image-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

/* Bug B: not-yet-opened cell at today's deep-dive limit — still clickable
   (opens the DailyLimitModal), so keep it distinct from the hidden-cell
   dimming above (which mutes a cell from plots, unrelated to the limit). */

.compare-cell-chip--limit-locked {
    opacity: 0.55;
}

.chip-image__lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.8);
    z-index: 1;
}

.chip-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.chip-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
}

.chip-image-placeholder svg {
    opacity: 0.5;
}

/* Chip Content */

.chip-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chip-manufacturer {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: rgba(234, 91, 12, 0.9);
    text-transform: uppercase;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-name {
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-primary);
    text-transform: uppercase;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-details {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}

.chip-chemistry,
.chip-format {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-separator {
    color: rgba(255, 255, 255, 0.3);
}

.chip-energy {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}

/* Chip Warning */

.chip-warning {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.3);
    border-radius: 4px;
    font-size: 10px;
    color: #fb923c;
}

/* Chip Hidden Badge */

.chip-hidden-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(136, 162, 170, 0.15);
    border: 1px solid rgba(136, 162, 170, 0.3);
    border-radius: 4px;
    font-size: 10px;
    color: #88a2aa;
    text-transform: uppercase;

    font-weight: 600;
}

/* Hidden Cell State */

.compare-cell-chip.hidden-cell {
    opacity: 0.5;
    border-color: rgba(136, 162, 170, 0.2);
}

.compare-cell-chip.hidden-cell .chip-index {
    background: rgba(136, 162, 170, 0.15);
    border-color: rgba(136, 162, 170, 0.3);
    color: #88a2aa;
}

/* Chip Action Buttons */

.chip-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.chip-visibility-btn,
.chip-remove-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.chip-visibility-btn {
    color: var(--text-secondary);
}

.chip-visibility-btn.hidden {
    background: rgba(136, 162, 170, 0.15);
    border-color: rgba(136, 162, 170, 0.3);
    color: #88a2aa;
}

.chip-visibility-btn:hover {
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.4);
    color: var(--accent);
}

.chip-remove-btn {
    color: #ef4444;
}

.chip-remove-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

/* ============================================================================
   COMPARE TABLE VIEW
   ============================================================================ */

/* Glassmorphism Container (matches fact sheet design) */

.compare-table-container {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 600px;
    max-height: calc(100vh - 110px);
    /* Glassmorphism matching fact sheet tiles */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header (matches Ragone plot header) */

.compare-table-header {
    padding: 12px 20px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.compare-table-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.compare-table-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.8;
}

.compare-table-icon svg {
    stroke: #ea5b0c;
    stroke-width: 2;
}

.compare-table-label {
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;

    color: var(--text-primary);
}

.compare-table-count {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 2px 8px;
    background: rgba(234, 91, 12, 0.15);
    border-radius: 8px;
}

/* Content Area */

.compare-table-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.compare-table-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
}

/* Loading State */

.compare-table-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-table-loading .loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.compare-table-loading .loading-spinner__text {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Empty State */

.compare-table-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-table-empty .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 300px;
    padding: 40px 20px;
}

.compare-table-empty .empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.compare-table-empty .empty-state-title {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;

    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.compare-table-empty .empty-state-description {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}

/* Sticky Table Headers with Glassmorphism */

.compare-table thead.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.compare-table thead.sticky-header th {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 12px 8px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.92) 0%, rgba(45, 42, 38, 0.96) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;

    font-size: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.property-col {
    background: rgba(26, 26, 26, 0.95);
    color: var(--text-secondary);
    min-width: 140px;
}

.cell-col {
    text-align: center;
    color: var(--text-primary);
    min-width: 100px;
}

/* Cell Header Card (with image) */

.cell-header-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
}

.cell-image-wrapper {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.cell-image-wrapper:hover {
    border-color: rgba(234, 91, 12, 0.4);
    box-shadow: 0 2px 8px rgba(234, 91, 12, 0.2);
}

.compare-cell-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cell-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
}

.cell-image-placeholder svg {
    opacity: 0.5;
}

.cell-header-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    flex: 1;
    min-width: 0;
}

.cell-manufacturer {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(234, 91, 12, 0.9);
    text-transform: uppercase;

}

.cell-name {
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
    text-transform: uppercase;

}

/* Category Headers (Collapsible with Icons) */

.category-header-row {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.08) 100%);
    border: 1px solid rgba(234, 91, 12, 0.3) !important;
    transition: all 0.2s ease;
}

.category-header-row.clickable {
    cursor: pointer;
}

.category-header-row.clickable:hover {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.25) 0%, rgba(234, 91, 12, 0.15) 100%);
    border-color: rgba(234, 91, 12, 0.5) !important;
}

.category-header-row td {
    padding: 0 !important;
}

.category-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    user-select: none;
}

.category-icon {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    filter: grayscale(0.3) brightness(1.2);
}

.category-name {
    flex: 1;
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;

}

.category-header-content svg {
    color: var(--primary-color);
    transition: transform 0.2s ease;
}

/* Table Body - Spec Row Style */

.compare-table td {
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.2s ease;
}

.compare-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.05);
}

.property-label {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    text-transform: none;
    padding: 8px 12px !important;
}

.value-cell {
    text-align: center;
    font-family: 'Big John', sans-serif;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 400;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.2s ease;
}

.value-cell .unit {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    text-transform: none;
    margin-left: 4px;
}

.value-na {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    font-weight: 400;
}

/* Best Value Highlighting - Green */

.highlight-best {
    background: rgba(76, 175, 80, 0.15) !important;
    border-left: 2px solid rgba(76, 175, 80, 0.9) !important;
    border-color: rgba(76, 175, 80, 0.3) !important;
    color: #4CAF50 !important;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.2);
    position: relative;
}

.highlight-best::after {
    content: '▲';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 8px;
    color: #4CAF50;
    opacity: 0.8;
}

/* Worst Value Highlighting - Red */

.highlight-worst {
    background: rgba(244, 67, 54, 0.12) !important;
    border-left: 2px solid rgba(244, 67, 54, 0.8) !important;
    border-color: rgba(244, 67, 54, 0.25) !important;
    color: #f44336 !important;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(244, 67, 54, 0.15);
    position: relative;
}

.highlight-worst::after {
    content: '▼';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 8px;
    color: #f44336;
    opacity: 0.8;
}

/* ============================================================================
   COMPARE CHECKBOXES (Grid & Table)
   ============================================================================ */

/* Grid View Compare Button */

.factsheet-card__compare {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.factsheet-card__compare:hover {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.4);
    color: var(--primary);
    transform: scale(1.05);
}

.factsheet-card__compare.active {
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.5);
    color: var(--accent);
}

/* Table View Compare Column (for Compare Table View only) */

.compare-table .compare-column-header {
    width: 40px;
    text-align: center !important;
}

.compare-table .compare-column-cell {
    width: 40px;
    text-align: center;
    padding: 4px !important;
}

.compare-table .compare-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    margin: 0 auto;
}

.compare-table .compare-checkbox:hover {
    background: rgba(234, 91, 12, 0.1);
    border-color: rgba(234, 91, 12, 0.3);
    color: var(--primary);
}

.compare-table .compare-checkbox.active {
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.4);
    color: var(--accent);
}

/* ============================================================================
   COMPARE CART BUTTON (Header Badge)
   ============================================================================ */

.compare-cart-btn {
    position: relative;
}

.compare-cart-btn.has-items {
    color: var(--accent);
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: var(--accent);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    line-height: 1;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .compare-panel-header {
        padding: 12px 16px;
    }

    .compare-title {
        font-size: 14px;
    }

    .compare-cell-list {
        max-height: 50%;
    }

    .chip-name {
        font-size: 12px;
    }

    .compare-table {
        font-size: 11px;
    }

    .compare-table th,
    .compare-table td {
        padding: 6px 4px;
    }

    .property-col {
        min-width: 100px;
    }

    .cell-col {
        min-width: 80px;
    }
}

/* Compare Plots View - 3D Analysis Section */

.compare-plots-view {
    display: flex;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    overflow: hidden;
}

/* Loading/Empty States */

.compare-plots-view.loading,
.compare-plots-view.empty {
    justify-content: center;
    align-items: center;
}

.loading-spinner {
    text-align: center;
    color: var(--text-secondary);
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(234, 91, 12, 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

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

.empty-state {
    text-align: center;
    color: var(--text-secondary);
}

.empty-state p {
    margin: 8px 0;
}

.empty-state .hint {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Left Sidebar Navigation */

.compare-plots-nav {
    width: 280px;
    min-width: 280px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.compare-plots-nav .nav-header {
    padding: 24px 20px;
    border-bottom: 1px solid var(--border-color);
}

.compare-plots-nav .nav-header h3 {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.compare-plots-nav .nav-subtitle {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    
}

/* Hierarchical Navigation */

.hierarchical-nav {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-category {
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.nav-category.active {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.08) 0%, rgba(234, 91, 12, 0.03) 100%);
}

/* Category Header */

.category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.category-header:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-category.active .category-header {
    color: var(--primary-color);
}

.category-header .cat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.category-header .cat-label {
    flex: 1;
    text-align: left;
}

.collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.collapse-toggle:hover {
    color: var(--text-secondary);
}

.collapse-toggle.collapsed {
    transform: rotate(-90deg);
}

/* Sub Categories */

.sub-category-list {
    padding: 4px 8px 8px 48px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sub-category-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 6px;
}

.sub-category-btn .sub-indicator {
    font-size: 16px;
    line-height: 1;
    color: var(--text-tertiary);
    transition: color 0.15s ease;
}

.sub-category-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sub-category-btn:hover .sub-indicator {
    color: var(--primary-color);
}

.sub-category-btn.active {
    background: rgba(234, 91, 12, 0.12);
    color: var(--primary-color);
    font-weight: 500;
}

.sub-category-btn.active .sub-indicator {
    color: var(--primary-color);
}

/* Main Content Area */

.compare-plots-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Simplified Header - No controls (handled by UnifiedContextBar) */

.compare-plots-header {
    padding: 20px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.compare-plots-header .plot-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.compare-plots-header .plot-subtitle {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0;
}

/* Plot Area */

.compare-plots-area {
    flex: 1;
    padding: 24px;
    overflow: auto;
    background: var(--bg-primary);
}

/* Legend */

.compare-plots-legend {
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 16px;
}

.compare-plots-legend .legend-title {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
}

.compare-plots-legend .legend-items {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.legend-label {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Hidden legend items */

.legend-item.legend-hidden {
    opacity: 0.4;
}

.legend-item.legend-hidden .legend-label {
    text-decoration: line-through;
    color: var(--text-tertiary);
}

.legend-hidden-badge {
    font-size: 10px;
    color: #88a2aa;
    font-style: italic;
}

/* Responsive */

@media (max-width: 1200px) {
    .compare-plots-nav {
        width: 240px;
        min-width: 240px;
    }

    .compare-plots-area {
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .compare-plots-view {
        flex-direction: column;
    }

    .compare-plots-nav {
        width: 100%;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .main-category-list {
        flex-direction: row;
    }

    .main-category-btn .cat-label {
        display: none;
    }

    .compare-plots-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .compare-plots-header .header-right {
        width: 100%;
        justify-content: flex-end;
    }

    .compare-plots-legend {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Compare Section Views - Integrated plot views within sections */

/* Main container for section views */

.compare-section-view {
    display: flex;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    overflow: hidden;
    gap: 20px;
}

/* Split layout: Nav and Content as separate cards */

.compare-section-view-split {
    display: flex;
    gap: 20px;
}

/* Loading/Empty States */

.compare-section-view.loading,
.compare-section-view.empty {
    justify-content: center;
    align-items: center;
}

/* Unified Card Container - Nav + Content in one glassmorphism card */

.electrical-view,
.thermal-view,
.mechanical-view {
    display: flex;
    flex: 1;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Left Sidebar Sub-Navigation - As separate card */

.compare-subsection-nav-card {
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.compare-subsection-nav-card .compare-subsection-nav {
    border-right: none;
}

/* Left Sidebar Sub-Navigation (inside unified card) */

.compare-subsection-nav {
    width: 280px;
    min-width: 280px;
    background: transparent;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px;
}

.compare-subsection-nav .nav-header {
    padding: 0 0 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 16px;
}

.compare-subsection-nav .nav-header h3 {
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 5px 0;
}

.compare-subsection-nav .nav-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #999;
}

/* Sub-section list - Category card style */

.subsection-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.subsection-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px;
    min-height: 80px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.subsection-btn .category-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 91, 12, 0.1);
    border-radius: 8px;
    flex-shrink: 0;
}

.subsection-btn .category-icon svg {
    width: 20px;
    height: 20px;
    color: #ea5b0c;
    stroke-width: 2;
}

.subsection-btn .category-info {
    flex: 1;
}

.subsection-btn .category-label {
    font-family: 'Big John', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0;
}

.subsection-btn .subsection-indicator {
    display: none;
}

.subsection-btn:hover {
    border-color: rgba(234, 91, 12, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    transform: translateX(4px);
}

.subsection-btn.active {
    background: linear-gradient(135deg, rgba(75, 73, 70, 0.9) 0%, rgba(65, 62, 58, 1) 100%);
    border-color: rgba(234, 91, 12, 0.6);
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.2);
}

.subsection-btn.active .category-icon {
    background: rgba(234, 91, 12, 0.2);
}

.subsection-btn.active::before {
    display: none;
}

/* Main Content Area (inside unified card) */

.compare-subsection-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
}

/* ===== GUIDE QUESTION (Prominent Header) ===== */

.compare-subsection-content>.subsection-guide-question {
    font-family: 'Big John', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 24px 24px 0 24px;
    padding: 0;
    background: transparent;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== INFO BANNER (Electrical/Thermal Compare Views) ===== */

.compare-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    margin: 12px 24px 0 24px;
    background: linear-gradient(135deg, rgba(13, 124, 153, 0.08) 0%, rgba(13, 124, 153, 0.04) 100%);
    border: 1px solid rgba(13, 124, 153, 0.2);
    border-left: 3px solid #0d7c99;
    border-radius: 8px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.compare-info-banner svg {
    flex-shrink: 0;
    color: #0d7c99;
    margin-top: 2px;
}

.compare-info-banner .info-banner-content {
    flex: 1;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.compare-info-banner .info-banner-content strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

/* Expanded Info Banner for full definitions */

.compare-info-banner-expanded {
    max-height: 200px;
    overflow-y: auto;
}

.compare-info-banner-expanded .info-banner-content {
    font-size: 12px;
    line-height: 1.6;
}

.compare-info-banner-expanded .info-banner-content p {
    margin: 0 0 10px 0;
}

.compare-info-banner-expanded .info-banner-content p:last-child {
    margin-bottom: 0;
}

.compare-info-banner-expanded .info-banner-content sub {
    font-size: 10px;
}

/* Header */

.subsection-header {
    padding: 20px 24px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.subsection-header .subsection-title {
    font-family: 'Big John';
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.subsection-header .subsection-subtitle {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0;
}

.subsection-header .subsection-subtitle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.subsection-header .subsection-guide-question {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(234, 91, 12, 0.9);
    /* Batemo Orange */
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(234, 91, 12, 0.08);
    border-left: 2px solid rgba(234, 91, 12, 0.5);
    border-radius: 4px;
}

/* Plot Type Toggle (Nyquist/Bode) */

.plot-type-toggle {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 4px;
}

.plot-type-toggle .toggle-btn {
    padding: 6px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-family: 'Big John', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.plot-type-toggle .toggle-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
}

.plot-type-toggle .toggle-btn.active {
    background: rgba(234, 91, 12, 0.2);
    color: #ea5b0c;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Plot/Content Area */

.subsection-plot-area {
    flex: 1;
    padding: 24px;
    overflow: auto;
    background: transparent;
}

/* Legend (same as compare-plots) */

.subsection-legend {
    padding: 16px 24px;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Dimension View Containers (from electrical-section-new.css) */

.dimension-view-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    gap: 20px;
}

.dimension-2d {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    width: 100%;
}

/* When there's only one plot (voltage, ac-impedance), take full height */

.dimension-2d:has(.plot-2d-container:only-child) .plot-2d-container {
    min-height: 600px;
}

.plot-2d-container {
    flex: 1;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.plot-2d-chart {
    width: 100%;
    height: 100%;
    min-height: 380px;
}

.dimension-3d {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.plot-3d-container {
    flex: 1;
    min-height: 600px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.plot-3d-chart {
    width: 100%;
    height: 100%;
    min-height: 580px;
}

.subsection-legend .legend-title {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
}

.subsection-legend .legend-items {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* === MECHANICAL VIEW === */

.mechanical-content {
    padding: 0;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    padding: 24px;
}

/* Dimension Cards */

.dimension-card,
.drawing-card,
.quality-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.dimension-card:hover,
.drawing-card:hover,
.quality-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.15);
}

.dimension-header,
.drawing-header,
.quality-header {
    padding: 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.dimension-header h4,
.drawing-header h4,
.quality-header h4 {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Dimension Values */

.dimension-values,
.quality-values {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dimension-item,
.quality-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.dimension-item:last-child,
.quality-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dim-label,
.quality-label {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 400;
}

.dim-value,
.quality-value {
    font-family: var(--font-heading);
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
}

/* Drawing Placeholder */

.drawing-placeholder {
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    background: var(--bg-primary);
}

.drawing-placeholder .placeholder-content {
    text-align: center;
    color: var(--text-tertiary);
}

.drawing-placeholder svg {
    opacity: 0.3;
    margin-bottom: 12px;
}

.drawing-placeholder p {
    margin: 4px 0;
    font-size: 12px;
}

.drawing-placeholder .hint {
    font-size: 11px;
    font-style: italic;
}

/* === QUALITY VIEW === */

.quality-content {
    padding: 0;
}

/* === SIDE-BY-SIDE CARD COMPARISON (Mechanical/Chemical) === */

.compare-mechanical-cards,
.compare-chemical-cards {
    width: 100%;
    padding: 24px;
    background: var(--bg-primary);
    overflow-y: auto;
}

.compare-section-header {
    margin-bottom: 32px;
    text-align: center;
}

.compare-section-header h2 {
    font-family: 'Big John', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.compare-section-header .section-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Each row of cards */

.compare-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* Column for each cell */

.compare-cell-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Cell header (manufacturer + name) */

.cell-column-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    text-align: center;
}

.cell-column-header h3 {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.cell-column-header p {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 0;
}

/* Cards inherit styles from fact-sheet and chemical section */

.compare-cell-column .fact-card,
.compare-cell-column .key-spec-card {
    margin: 0;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

/* Remove orange blur/border from mechanical cards in compare view */

.compare-mechanical-cards .fact-card:hover,
.compare-mechanical-cards .key-spec-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Visual cards (drawings) */

.compare-cell-column .visual-card {
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 20px;
}

.compare-cell-column .visual-card .card-title {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    text-align: center;
}

/* Responsive adjustments for compare cards */

@media (max-width: 1400px) {
    .compare-cards-row {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .compare-cards-row {
        grid-template-columns: 1fr;
    }

    .compare-mechanical-cards,
    .compare-chemical-cards {
        padding: 16px;
    }
}

/* Responsive */

@media (max-width: 1200px) {
    .compare-subsection-nav {
        width: 240px;
        min-width: 240px;
    }

    .subsection-plot-area {
        padding: 16px;
    }

    .comparison-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .compare-section-view {
        flex-direction: column;
    }

    .compare-subsection-nav {
        width: 100%;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .subsection-list {
        flex-direction: row;
        overflow-x: auto;
    }

    .subsection-btn {
        white-space: nowrap;
    }

    .comparison-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .subsection-legend {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== COMPARE TABLE VIEW (Chemical & Mechanical) ===== */

.compare-table-view {
    flex-direction: column;
    overflow: auto;
}

/* Chemical table: no padding */

.compare-chemical-table {
    padding: 0;
}

.compare-table-container {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    font-family: 'Roboto', sans-serif;
    table-layout: fixed;
}

.compare-table th:first-child,
.compare-table td:first-child {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
}

.compare-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.98) 0%, rgba(45, 42, 38, 1) 100%);
}

.compare-table th,
.compare-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.compare-table-header-label {
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 200px;
    min-width: 200px;
}

.compare-table-header-cell {
    min-width: 160px;
    text-align: center;
}

.compare-table-header-cell .cell-header-name {
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.compare-table-header-cell .cell-header-model {
    font-size: 11px;
    color: var(--text-tertiary);
}

.compare-table-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.compare-table-value {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.compare-table-value .country-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Section Header Row */

.section-header-row td {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.08) 0%, rgba(234, 91, 12, 0.04) 100%);
    border-bottom: 2px solid rgba(234, 91, 12, 0.3);
    padding: 10px 16px;
}

.section-header-row .section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(234, 91, 12, 0.15);
    border-radius: 6px;
    margin-right: 10px;
    vertical-align: middle;
}

.section-header-row .section-icon svg {
    color: #ea5b0c;
    stroke: #ea5b0c;
}

.section-header-row .section-title {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #ea5b0c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.section-info-btn,
.info-btn-inline {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.4);
    padding: 4px;
    margin-left: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.section-info-btn:hover,
.info-btn-inline:hover {
    color: #0d7c99;
    background: rgba(13, 124, 153, 0.1);
}

/* Definition Tooltip Overlay */

.definition-tooltip-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.definition-tooltip-content {
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.98) 0%, rgba(35, 32, 28, 0.99) 100%);
    border: 1px solid rgba(13, 124, 153, 0.3);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.definition-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(13, 124, 153, 0.1);
    border-bottom: 1px solid rgba(13, 124, 153, 0.2);
}

.definition-tooltip-header h4 {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0d7c99;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.definition-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.definition-close-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.definition-tooltip-body {
    padding: 20px;
    overflow-y: auto;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.definition-tooltip-body p {
    margin: 0 0 12px 0;
}

.definition-tooltip-body p:last-child {
    margin-bottom: 0;
}

.definition-tooltip-body strong {
    color: #ea5b0c;
    font-weight: 600;
}

.definition-tooltip-body ul {
    margin: 8px 0;
    padding-left: 20px;
}

.definition-tooltip-body li {
    margin-bottom: 4px;
}

/* Compare Table Responsive */

@media (max-width: 1200px) {
    .compare-table-header-label {
        width: 160px;
        min-width: 160px;
    }

    .compare-table-header-cell {
        min-width: 140px;
    }
}

@media (max-width: 768px) {
    .compare-table-container {
        overflow-x: auto;
    }

    .compare-table {
        min-width: 600px;
    }

    .compare-table-header-label {
        width: 140px;
        min-width: 140px;
    }
}

/* ===== MECHANICAL TABLE WITH DRAWINGS ===== */

.compare-mechanical-table {
    flex-direction: column;
    gap: 0;
    padding: 0;
}

/* Drawing row inside table */

.compare-mechanical-table .drawing-row td {
    vertical-align: top;
    padding: 16px;
}

.compare-mechanical-table .drawing-cell {
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.5) 0%, rgba(45, 42, 38, 0.5) 100%);
}

.compare-mechanical-table .drawing-container-inline {
    width: 100%;
    min-height: 200px;
    max-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-mechanical-table .drawing-container-inline img {
    max-width: 100%;
    max-height: 260px;
    height: auto;
    object-fit: contain;
}

.compare-mechanical-table .lazy-drawing-wrapper {
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-mechanical-table .drawing-img {
    max-width: 100%;
    height: auto;
    max-height: 260px;
}

/* ===== FORM FACTOR SILHOUETTES ===== */

.compare-mechanical-table .form-factor-row {
    display: table-row;
}

.compare-mechanical-table .form-factor-row td {
    display: table-cell;
    vertical-align: middle;
    padding: 20px 16px;
    text-align: center;
}

.compare-mechanical-table .form-factor-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.compare-mechanical-table .form-factor-silhouette {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px;
    width: 100%;
    height: 100px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.6) 0%, rgba(20, 20, 20, 0.8) 100%);
    border: 1px solid rgba(234, 91, 12, 0.15);
    transition: all 0.3s ease;
}

.compare-mechanical-table .form-factor-silhouette:hover {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.7) 0%, rgba(25, 25, 25, 0.9) 100%);
    border-color: rgba(234, 91, 12, 0.4);
    box-shadow: 0 0 20px rgba(234, 91, 12, 0.15), inset 0 0 15px rgba(234, 91, 12, 0.05);
    transform: translateY(-2px);
}

.compare-mechanical-table .silhouette-icon {
    opacity: 0.95;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 3px rgba(234, 91, 12, 0.3));
}

.compare-mechanical-table .form-factor-silhouette:hover .silhouette-icon {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(234, 91, 12, 0.5));
}

.compare-mechanical-table .silhouette-label {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: rgba(234, 91, 12, 0.85);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    background: rgba(234, 91, 12, 0.08);
    border-radius: 3px;
    border: 1px solid rgba(234, 91, 12, 0.15);
}

.compare-mechanical-table .silhouette-unknown {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #666;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

/* Safety indicator styles */

.compare-table .safety-yes {
    color: #4ade80;
    font-size: 16px;
    font-weight: 700;
}

.compare-table .safety-no {
    color: #999;
    font-size: 16px;
}

.compare-table .analysis-pending {
    color: #ea5b0c;
    font-style: italic;
    font-size: 12px;
}

/* ===== COMPARE SUBSECTION FLIPCARD (Electrical/Thermal) ===== */

.compare-subsection-flipcard {
    flex: 1;
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    perspective: 1000px;
    min-height: 500px;
}

.compare-subsection-flipcard .flipcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}

.compare-subsection-flipcard.flipped .flipcard-inner {
    transform: rotateY(180deg);
}

.compare-flipcard-front,
.compare-flipcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    padding: 12px;
    overflow: auto;
}

.compare-flipcard-front {
    background: transparent;
}

.compare-flipcard-back {
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.98) 0%, rgba(35, 32, 28, 0.99) 100%);
    transform: rotateY(180deg);
    border-radius: 12px;
}

.compare-flipcard-front .column-title,
.compare-flipcard-back .column-title {
    font-family: 'Big John', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-right: 40px;
}

.compare-flipcard-front .flip-btn,
.compare-flipcard-back .flip-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(234, 91, 12, 0.2);
    border: 1px solid #ea5b0c;
    color: #ea5b0c;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.compare-flipcard-front .flip-btn:hover,
.compare-flipcard-back .flip-btn:hover {
    background: #ea5b0c;
    color: white;
    transform: scale(1.1);
}

.compare-flipcard-back .flip-btn-back {
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.4);
    color: #ea5b0c;
}

.compare-flipcard-back .flip-content {
    flex: 1;
    overflow-y: auto;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.compare-flipcard-back .flip-content p {
    margin: 0 0 12px 0;
}

.compare-flipcard-back .flip-content p:last-child {
    margin-bottom: 0;
}

.compare-flipcard-back .flip-content strong {
    color: #ea5b0c;
    font-weight: 600;
}

/* Plot area in flipcard front */

.compare-flipcard-front .subsection-plot-area {
    flex: 1;
    min-height: 300px;
    margin: 0 0 16px 0;
    padding: 0;
}

.compare-flipcard-front .subsection-legend {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== QUALITY VIEW - TWO CARD LAYOUT ===== */

.compare-quality-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0;
}

.compare-quality-card {
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    min-height: 480px;
    perspective: 1000px;
}

.compare-quality-card .flipcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 480px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.compare-quality-card.flipped .flipcard-inner {
    transform: rotateY(180deg);
}

.compare-quality-card .flipcard-front,
.compare-quality-card .flipcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 16px;
    overflow-y: auto;
}

.compare-quality-card .flipcard-back {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.98) 0%, rgba(35, 32, 28, 0.99) 100%);
    border-radius: 12px;
}

/* Card Header with Icon */

.quality-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding-right: 36px;
}

.quality-card-header .header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 91, 12, 0.15);
    border-radius: 8px;
    color: #ea5b0c;
    flex-shrink: 0;
}

.quality-card-header .header-text {
    flex: 1;
}

.compare-quality-card .card-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.compare-quality-card .card-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Cell Legend - Horizontal scrollable */

.quality-cell-legend {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    overflow-x: auto;
    flex-wrap: wrap;
}

.quality-cell-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.quality-cell-legend .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.quality-cell-legend .legend-name {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

/* Metric Section */

.quality-metric-section {
    margin-bottom: 14px;
}

.quality-metric-section:last-child {
    margin-bottom: 0;
}

.quality-metric-section .metric-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    font-family: 'Big John', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.quality-metric-section .metric-header svg {
    color: rgba(255, 255, 255, 0.6);
    opacity: 0.7;
}

/* Mini plots */

.quality-plot-mini {
    width: 100%;
    height: 140px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 6px;
}

/* Quality Stats Table - Responsive layout */

.quality-stats-compact {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
}

.quality-stats-compact th {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 10px;
    text-align: center;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.3px;
    font-size: 11px;
}

.quality-stats-compact th:first-child {
    text-align: left;
}

.quality-stats-compact td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.quality-stats-compact tbody tr:last-child td {
    border-bottom: none;
}

.quality-stats-compact .cell-name-col {
    font-family: 'Big John', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    width: 160px;
    min-width: 160px;
    line-height: 1.3;
}

.quality-stats-compact .metric-col {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

.quality-stats-compact .stat-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.quality-stats-compact .stat-value .value-num {
    font-family: 'Big John', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.quality-stats-compact .stat-value .value-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 9px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
}

.quality-stats-compact .best-icon {
    color: #4ade80;
    margin-left: 4px;
}

/* Quality row highlighting - Best and Worst (using same style as highlight-best/highlight-worst) */

.quality-stats-compact tbody tr.highlight-best {
    background: rgba(76, 175, 80, 0.15) !important;
    border-left: 2px solid rgba(76, 175, 80, 0.9) !important;
    color: #4CAF50 !important;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.2);
    position: relative;
}

.quality-stats-compact tbody tr.highlight-best td {
    color: #4CAF50 !important;
}

.quality-stats-compact tbody tr.highlight-best .value-num {
    color: #4CAF50 !important;
    font-weight: 600;
}

.quality-stats-compact tbody tr.highlight-best::after {
    content: '▲';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 8px;
    color: #4CAF50;
    opacity: 0.8;
}

.quality-stats-compact tbody tr.highlight-worst {
    background: rgba(244, 67, 54, 0.12) !important;
    border-left: 2px solid rgba(244, 67, 54, 0.8) !important;
    color: #f44336 !important;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(244, 67, 54, 0.15);
    position: relative;
}

.quality-stats-compact tbody tr.highlight-worst td {
    color: #f44336 !important;
}

.quality-stats-compact tbody tr.highlight-worst .value-num {
    color: #f44336 !important;
    font-weight: 600;
}

.quality-stats-compact tbody tr.highlight-worst::after {
    content: '▼';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 8px;
    color: #f44336;
    opacity: 0.8;
}

/* Flip content styling */

.compare-quality-card .flip-content {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.compare-quality-card .flip-content h4 {
    font-family: 'Big John', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #ea5b0c;
    margin: 14px 0 6px 0;
    text-transform: uppercase;
}

.compare-quality-card .flip-content p {
    margin: 0 0 8px 0;
}

/* Responsive - Stack cards vertically on smaller screens */

@media (max-width: 1400px) {
    .compare-quality-layout {
        grid-template-columns: 1fr;
    }

    .compare-quality-card {
        min-height: auto;
    }

    .compare-quality-card .flipcard-inner {
        min-height: auto;
    }

    .compare-quality-card .flipcard-front,
    .compare-quality-card .flipcard-back {
        position: relative;
        height: auto;
    }

    .compare-quality-card .flipcard-back {
        position: absolute;
        height: 100%;
    }
}

@media (max-width: 900px) {
    .quality-cell-legend {
        gap: 8px;
    }

    .quality-cell-legend .legend-name {
        font-size: 9px;
    }

    .quality-stats-compact .cell-name-col {
        font-size: 10px;
    }
}

@media (max-width: 600px) {

    .compare-quality-card .flipcard-front,
    .compare-quality-card .flipcard-back {
        padding: 12px;
    }

    .quality-plot-mini {
        height: 100px;
    }

    .quality-card-header .header-icon {
        width: 32px;
        height: 32px;
    }

    .compare-quality-card .card-title {
        font-size: 13px;
    }

    .quality-stats-compact th,
    .quality-stats-compact td {
        padding: 6px 8px;
        font-size: 10px;
    }

    .quality-stats-compact .cell-name-col {
        font-size: 8px;
        width: 100px;
        min-width: 100px;
    }
}

/* Compare Chemical View - Compact Layout for Better Readability */

.compare-chemical-cards {
    padding: 1.5rem;
    max-width: 100%;
}

/* Compact header */

.compare-chemical-cards .compare-section-header {
    margin-bottom: 1.5rem;
}

.compare-chemical-cards .compare-section-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.compare-chemical-cards .section-subtitle {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Compact rows */

.compare-cards-row.compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Compact cell column header */

.cell-column-header.compact {
    padding: 0.75rem;
    background: rgba(13, 124, 153, 0.1);
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid #0d7c99;
    margin-bottom: 0;
}

.cell-column-header.compact h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: #0d7c99;
}

.cell-column-header.compact p {
    font-size: 0.75rem;
    margin: 0;
    opacity: 0.8;
}

/* Compact info cards */

.chem-info-card.compact {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 8px 8px;
    padding: 1rem;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.card-title-compact {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* Chemistry badge */

.chem-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #0d7c99, #0a4d68);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(13, 124, 153, 0.3);
}

/* Specs grid - 2 columns */

.chem-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.chem-spec {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border-left: 2px solid rgba(13, 124, 153, 0.5);
}

.chem-spec.full-width {
    grid-column: 1 / -1;
}

.chem-spec .label {
    font-size: 0.65rem;
    text-transform: uppercase;
    
    opacity: 0.6;
    font-weight: 500;
}

.chem-spec .value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.chem-spec .value.country-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Responsive adjustments */

@media (max-width: 1400px) {
    .compare-cards-row.compact {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 1024px) {
    .compare-cards-row.compact {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .compare-cards-row.compact {
        grid-template-columns: 1fr;
    }

    .chem-specs-grid {
        grid-template-columns: 1fr;
    }
}

/* Fix old flipcards to be less prominent */

.compare-chemical-cards .key-spec-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.compare-chemical-cards .flip-btn {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.compare-chemical-cards .key-spec-card:hover .flip-btn {
    opacity: 1;
}

/**
 * Filter Panel Components - Individual filter elements
 *
 * Range sliders, multi-select checkboxes, presets, sections
 */

/* ============================================================================
   FILTER SECTIONS (Collapsible Accordion)
   ============================================================================ */

.filter-section {
    margin-bottom: var(--filter-section-gap);
    border-radius: 12px;
    /* Glassmorphism matching key-spec-card */
    background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
}

.filter-section:hover {
    border-color: rgba(234, 91, 12, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(234, 91, 12, 0.15);
}

/* Section header */

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.filter-header:hover {
    background: var(--filter-hover);
}

.filter-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.filter-header-icon {
    font-size: 16px;
    opacity: 0.8;
}

.filter-header-title {
    font-family: 'Big John', sans-serif;
    /* Heading font */
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;

    color: var(--filter-text-primary);
    padding-top: 0.1rem;
}

.filter-header-unit {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
    margin-left: 4px;
    text-transform: none;

}

/* Info Icon and Tooltip */

.filter-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: rgba(234, 91, 12, 0.2);
    border: 1px solid var(--brand);
    color: var(--brand);
    font-size: 10px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    cursor: help;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.filter-info-icon:hover {
    background: var(--brand);
    color: white;
    transform: scale(1.1);
}

/* Tooltip - hidden by default, shown on hover */

.filter-info-tooltip {
    display: none;
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    width: 280px;
    max-width: 280px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(45, 42, 38, 0.98) 0%, rgba(35, 32, 28, 0.98) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(234, 91, 12, 0.1);
    z-index: 99999;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    text-transform: none;
    text-align: left;
    white-space: normal;
    pointer-events: none;
}

/* Show tooltip on hover */

.filter-info-icon:hover .filter-info-tooltip {
    display: block;
}

/* Portal-based tooltip (rendered directly in body) */

.filter-info-tooltip-portal {
    width: 280px;
    max-width: 280px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(45, 42, 38, 0.98) 0%, rgba(35, 32, 28, 0.98) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(234, 91, 12, 0.1);
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    text-transform: none;
    text-align: left;
    white-space: normal;
    pointer-events: none;
}

.filter-info-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(234, 91, 12, 0.3);
}

.filter-info-tooltip::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(45, 42, 38, 0.98);
}

.filter-collapse-btn {
    background: none;
    border: none;
    color: var(--filter-text-tertiary);
    font-size: 12px;
    font-weight: bold;
    padding: 4px;
    cursor: pointer;
    transform: rotate(0deg);
    transition: all 0.3s;
    line-height: 1;
}

.filter-section.collapsed .filter-collapse-btn {
    transform: rotate(-90deg);
}

/* Section content */

.filter-content {
    padding: 0 16px 16px;
    opacity: 1;
    transition: opacity 0.3s ease, padding 0.3s ease;
}

.filter-section.collapsed .filter-content {
    display: none;
    padding: 0 16px;
    opacity: 0;
}

/* Filter Subgroups (e.g., Cathode/Anode within Chemistry) */

.filter-subgroup {
    margin-bottom: 12px;
}

.filter-subgroup:last-child {
    margin-bottom: 0;
}

.filter-subgroup-label {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand);
    margin-bottom: 8px;
    padding-left: 2px;
    opacity: 0.9;
}

/* Always expanded sections */

.filter-section.always-expanded .filter-collapse-btn {
    display: none;
}

.filter-section.always-expanded .filter-header {
    cursor: default;
}

.filter-section.always-expanded .filter-header:hover {
    background: transparent;
}

/* ============================================================================
   MULTI-SELECT CHECKBOXES
   ============================================================================ */

/* Scrollable container for long lists */

.filter-options-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(234, 91, 12, 0.5) rgba(255, 255, 255, 0.05);
}

.filter-options-scrollable::-webkit-scrollbar {
    width: 6px;
}

.filter-options-scrollable::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.filter-options-scrollable::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.5);
    border-radius: 3px;
    transition: background 0.2s;
}

.filter-options-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.8);
}

body.light-theme .filter-options-scrollable {
    scrollbar-color: rgba(234, 91, 12, 0.5) rgba(0, 0, 0, 0.1);
}

body.light-theme .filter-options-scrollable::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

body.light-theme .filter-options-scrollable::-webkit-scrollbar-thumb {
    background: rgba(234, 91, 12, 0.5);
}

body.light-theme .filter-options-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 91, 12, 0.8);
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: var(--filter-option-gap);
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.filter-option:hover {
    background: var(--filter-hover);
}

/* Custom checkbox */

.filter-option input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    background: transparent;
}

body.light-theme .filter-option input[type="checkbox"] {
    border-color: rgba(0, 0, 0, 0.3);
}

.filter-option input[type="checkbox"]:checked {
    background: var(--filter-selected);
    border-color: #ea5b0c;
}

.filter-option input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 2px;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.filter-option input[type="checkbox"]:hover {
    border-color: #ea5b0c;
}

/* Option label */

.option-label {
    flex: 1;
    font-family: 'Roboto', sans-serif;
    /* Body font */
    font-size: 14px;
    color: var(--filter-text-primary);
    font-weight: 400;
}

/* Option count badge */

.option-count {
    font-family: 'Roboto', sans-serif;
    /* Body font */
    font-size: 11px;
    color: var(--filter-count-text);
    background: var(--filter-count-bg);
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 500;
}

/* Zero count badge (faceted search - no matching cells) */

.option-count--zero {
    opacity: 0.5;
}

/* Disabled filter option (faceted search - no matching cells) */

.filter-option--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.filter-option--disabled:hover {
    background: transparent;
}

.filter-option--disabled .option-label {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}

body.light-theme .filter-option--disabled .option-label {
    text-decoration-color: rgba(0, 0, 0, 0.3);
}

.filter-option--disabled .option-count {
    opacity: 0.5;
}

.filter-option--disabled input[type="checkbox"] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Select all/none actions */

.filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--filter-border);
}

.filter-select-all,
.filter-select-none {
    flex: 1;
    padding: 6px 10px;
    /* Kleiner: 8px 12px → 6px 10px */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--filter-border);
    border-radius: 5px;
    /* Kleiner: 6px → 5px */
    color: var(--filter-text-secondary);
    font-family: 'Roboto', sans-serif;
    /* Body font */
    font-size: 11px;
    /* Kleiner: 12px → 11px */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

body.light-theme .filter-select-all,
body.light-theme .filter-select-none {
    background: rgba(0, 0, 0, 0.04);
}

.filter-select-all:hover,
.filter-select-none:hover {
    background: var(--filter-hover);
    color: var(--filter-text-accent);
    border-color: rgba(234, 91, 12, 0.3);
}

/* Show more button */

.filter-show-more {
    width: 100%;
    padding: 6px 10px;
    /* Kleiner: 8px 12px → 6px 10px */
    background: rgba(234, 91, 12, 0.08);
    /* Weniger dominant: 0.1 → 0.08 */
    border: 1px solid rgba(234, 91, 12, 0.15);
    /* Weniger dominant: 0.2 → 0.15 */
    border-radius: 5px;
    /* Kleiner: 6px → 5px */
    color: var(--filter-text-accent);
    font-family: 'Roboto', sans-serif;
    /* Body font */
    font-size: 11px;
    /* Kleiner: 12px → 11px */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 6px;
    /* Kleiner: 8px → 6px */
}

.filter-show-more:hover {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.3);
}

/* ============================================================================
   RANGE SLIDERS (Dual-Handle)
   ============================================================================ */

.filter-range-slider {
    padding: 8px 0;
}

/* Range header */

.range-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.range-label {
    font-family: 'Roboto', sans-serif;
    /* Body font */
    font-size: 13px;
    color: var(--filter-text-secondary);
    font-weight: 500;
}

.range-reset {
    background: none;
    border: none;
    color: var(--filter-text-tertiary);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.range-reset:hover {
    color: var(--filter-text-accent);
    background: var(--filter-hover);
}

/* Histogram background */

.range-histogram {
    height: 32px;
    margin-bottom: 12px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.1);
}

body.light-theme .range-histogram {
    background: rgba(0, 0, 0, 0.03);
}

.range-histogram svg {
    width: 100%;
    height: 100%;
    display: block;
}

.range-histogram path {
    fill: rgba(234, 91, 12, 0.2);
    transition: fill 0.2s;
}

.range-histogram:hover path {
    fill: rgba(234, 91, 12, 0.3);
}

/* Slider track container */

.range-track {
    position: relative;
    height: 40px;
    margin: 16px 0;
}

/* Background track */

.range-track::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

body.light-theme .range-track::before {
    background: rgba(0, 0, 0, 0.1);
}

/* Active progress */

.range-progress {
    position: absolute;
    height: 4px;
    top: 18px;
    background: var(--filter-selected);
    border-radius: 2px;
    pointer-events: none;
    transition: all 0.1s;
}

/* Range inputs (invisible, used for interaction) */

.range-min,
.range-max {
    position: absolute;
    width: 100%;
    height: 40px;
    top: 0;
    background: transparent;
    pointer-events: none;
    /* Disabled for the track, but thumbs enable it */
    appearance: none;
    margin: 0;
    padding: 0;
}

/* Thumb styling - WebKit (Chrome, Safari, Edge) - Enable pointer events for thumb */

.range-min::-webkit-slider-thumb,
.range-max::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ea5b0c;
    border: 3px solid #2c2c2c;
    cursor: grab;
    pointer-events: auto;
    /* Enable for thumb specifically */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
}

body.light-theme .range-min::-webkit-slider-thumb,
body.light-theme .range-max::-webkit-slider-thumb {
    border-color: white;
}

.range-min::-webkit-slider-thumb:hover,
.range-max::-webkit-slider-thumb:hover {
    background: #ff7733;
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.5);
    transform: scale(1.1);
}

.range-min::-webkit-slider-thumb:active,
.range-max::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
    box-shadow: 0 6px 16px rgba(234, 91, 12, 0.6);
}

/* Thumb styling - Firefox */

.range-min::-moz-range-thumb,
.range-max::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ea5b0c;
    border: 3px solid #2c2c2c;
    cursor: grab;
    pointer-events: auto;
    /* Enable for thumb specifically */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
}

body.light-theme .range-min::-moz-range-thumb,
body.light-theme .range-max::-moz-range-thumb {
    border-color: white;
}

.range-min::-moz-range-thumb:hover,
.range-max::-moz-range-thumb:hover {
    background: #ff7733;
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.5);
    transform: scale(1.1);
}

.range-min::-moz-range-thumb:active,
.range-max::-moz-range-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}

/* Hide default track */

.range-min::-webkit-slider-runnable-track,
.range-max::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}

.range-min::-moz-range-track,
.range-max::-moz-range-track {
    background: transparent;
    border: none;
}

/* Value display with inputs */

.range-values {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.range-input-min,
.range-input-max {
    width: 70px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--filter-border);
    border-radius: 6px;
    color: var(--filter-text-primary);
    font-family: 'Roboto', sans-serif;
    /* Body font - monospace removed */
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s;
}

body.light-theme .range-input-min,
body.light-theme .range-input-max {
    background: rgba(0, 0, 0, 0.04);
}

.range-input-min:focus,
.range-input-max:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(234, 91, 12, 0.5);
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

body.light-theme .range-input-min:focus,
body.light-theme .range-input-max:focus {
    background: rgba(0, 0, 0, 0.06);
}

.range-separator {
    font-family: 'Roboto', sans-serif;
    /* Body font */
    color: var(--filter-text-tertiary);
    font-weight: 600;
}

.range-unit {
    font-family: 'Roboto', sans-serif;
    /* Body font */
    color: var(--filter-text-secondary);
    font-size: 12px;
    font-weight: 500;
}

/* Quick preset buttons */

.range-presets {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.range-preset {
    flex: 1;
    min-width: fit-content;
    padding: 5px 8px;
    /* Kleiner: 7px 10px → 5px 8px */
    background: rgba(234, 91, 12, 0.08);
    /* Weniger dominant: 0.1 → 0.08 */
    border: 1px solid rgba(234, 91, 12, 0.15);
    /* Weniger dominant: 0.2 → 0.15 */
    border-radius: 5px;
    /* Kleiner: 6px → 5px */
    color: var(--filter-text-accent);
    font-family: 'Roboto', sans-serif;
    /* Body font */
    font-size: 10px;
    /* Kleiner: 11px → 10px */
    font-weight: 600;
    text-transform: uppercase;

    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.range-preset:hover {
    background: rgba(234, 91, 12, 0.2);
    border-color: rgba(234, 91, 12, 0.4);
    transform: translateY(-1px);
}

.range-preset:active {
    transform: translateY(0);
}

/* ============================================================================
   SEARCH INPUT
   ============================================================================ */

.filter-search {
    position: relative;
    margin-bottom: 12px;
}

.filter-search-input {
    width: 100%;
    padding: 10px 36px 10px 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--filter-border);
    border-radius: 8px;
    color: var(--filter-text-primary);
    font-family: 'Roboto', sans-serif;
    /* Body font */
    font-size: 14px;
    transition: all 0.2s;
}

body.light-theme .filter-search-input {
    background: rgba(0, 0, 0, 0.04);
}

.filter-search-input::placeholder {
    color: var(--filter-text-tertiary);
}

.filter-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(234, 91, 12, 0.5);
    box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

body.light-theme .filter-search-input:focus {
    background: rgba(0, 0, 0, 0.06);
}

.filter-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--filter-text-tertiary);
    font-size: 16px;
    pointer-events: none;
}

/* Clear button (X) */

.filter-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--filter-text-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}

.filter-search-clear:hover {
    background: rgba(234, 91, 12, 0.3);
    color: var(--filter-text-primary);
}

body.light-theme .filter-search-clear {
    background: rgba(0, 0, 0, 0.1);
}

body.light-theme .filter-search-clear:hover {
    background: rgba(234, 91, 12, 0.2);
}

/* ============================================================================
   SAVED SEARCH TERMS
   ============================================================================ */

.saved-search-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding: 0 12px;
}

.search-term-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.15) 0%, rgba(234, 91, 12, 0.08) 100%);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 12px;
    font-size: 11px;
    font-family: 'Roboto', sans-serif;
    color: #ea5b0c;
    font-weight: 500;
    transition: all 0.2s ease;
    animation: fadeInScale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.search-term-tag:hover {
    background: linear-gradient(135deg, rgba(234, 91, 12, 0.2) 0%, rgba(234, 91, 12, 0.12) 100%);
    border-color: rgba(234, 91, 12, 0.4);
}

.search-term-text {
    user-select: none;
}

.search-term-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: rgba(234, 91, 12, 0.2);
    border: none;
    border-radius: 50%;
    color: #ea5b0c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-term-remove:hover {
    background: rgba(234, 91, 12, 0.3);
    transform: scale(1.1);
}

/* ============================================================================
   PRESET LIST
   ============================================================================ */

.filter-presets {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preset-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--filter-bg-tertiary);
    border: 1px solid var(--filter-border);
    border-radius: 8px;
    color: var(--filter-text-primary);
    font-family: 'Roboto', sans-serif;
    /* Body font */
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.preset-item:hover {
    background: var(--filter-hover);
    border-color: rgba(234, 91, 12, 0.3);
    transform: translateX(2px);
}

.preset-item.active {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.4);
    color: var(--filter-text-accent);
}

.preset-icon {
    font-size: 18px;
    line-height: 1;
}

.preset-name {
    flex: 1;
}

/* Save preset button */

.preset-save {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: rgba(234, 91, 12, 0.1);
    border: 1px dashed rgba(234, 91, 12, 0.3);
    border-radius: 8px;
    color: var(--filter-text-accent);
    font-family: 'Roboto', sans-serif;
    /* Body font */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 4px;
}

.preset-save:hover {
    background: rgba(234, 91, 12, 0.15);
    border-color: rgba(234, 91, 12, 0.5);
    border-style: solid;
}

/* ============================================================================
   ADVANCED FILTERS (Checkboxes)
   ============================================================================ */

.filter-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-checkbox-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.filter-checkbox-option:hover {
    background: var(--filter-hover);
}

.filter-checkbox-option input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

body.light-theme .filter-checkbox-option input[type="checkbox"] {
    border-color: rgba(0, 0, 0, 0.3);
}

.filter-checkbox-option input[type="checkbox"]:checked {
    background: var(--filter-selected);
    border-color: #ea5b0c;
}

.filter-checkbox-option input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: -2px;
    left: 2px;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.filter-checkbox-label {
    flex: 1;
    font-family: 'Roboto', sans-serif;
    /* Body font */
    font-size: 14px;
    color: var(--filter-text-primary);
}

/* ============================================================================
   FILTER BADGE (Count indicator)
   ============================================================================ */

.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--filter-selected);
    border-radius: 10px;
    color: white;
    font-family: 'Roboto', sans-serif;
    /* Body font */
    font-size: 11px;
    font-weight: 700;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
    }

    to {
        max-height: 1000px;
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        max-height: 1000px;
        opacity: 1;
    }

    to {
        max-height: 0;
        opacity: 0;
    }
}

.filter-section.expanding .filter-content {
    animation: slideDown 0.3s ease;
}

.filter-section.collapsing .filter-content {
    animation: slideUp 0.3s ease;
}

/* ========================================
   DRAWER CONCEPT CSS
   - Compare Cart Dropdown
   - Drawer Header
   - Cell Cards with Compare Buttons
   ======================================== */

/* ====== COMPARE CART BUTTON & DROPDOWN ====== */

.compare-cart-wrapper {
  position: relative;
}

.compare-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.compare-cart-btn.has-items {
  color: var(--brand);
}

.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--brand);
  color: white;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: cart-badge-pop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes cart-badge-pop {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.compare-cart-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: linear-gradient(135deg, rgba(50, 50, 50, 0.7) 0%, rgba(39, 39, 39, 0.95) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(234, 91, 12, 0.3);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  animation: dropdown-slide 0.2s ease-out;
}

@keyframes dropdown-slide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(234, 91, 12, 0.2);
}

.cart-header h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
  margin: 0;
}

.cart-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.cart-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.cart-empty {
  padding: 32px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.cart-empty p {
  margin: 0 0 8px 0;
  font-size: 14px;
}

.cart-empty small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.cart-items {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(234, 91, 12, 0.2);
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.2s;
}

.cart-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(234, 91, 12, 0.4);
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-title {
  font-size: 13px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cart-item-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cart-item-remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  margin-left: 8px;
  transition: all 0.2s;
}

.cart-item-remove:hover {
  background: rgba(234, 91, 12, 0.2);
  color: var(--brand);
}

.cart-footer {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid rgba(234, 91, 12, 0.2);
}

.cart-footer .btn-secondary,
.cart-footer .btn-primary {
  flex: 1;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.cart-footer .btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.cart-footer .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

.cart-footer .btn-primary {
  background: linear-gradient(135deg, var(--brand), #d84a00);
  color: white;
}

.cart-footer .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234, 91, 12, 0.4);
}

.cart-footer .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ====== DRAWER HEADER ====== */

.drawer-header {
  position: sticky;
  top: 56px;
  /* Below CommandBar (56px) */
  z-index: 899;
  /* Below Context Bar (900) but above content */
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 2rem 16px;
  /* Gleicher Background wie cmdbar */
  background: linear-gradient(180deg,
      rgba(44, 44, 44, 0.92) 0%,
      rgba(44, 44, 44, 0.85) 100%);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  min-height: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Back Button */

.drawer-back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-right: 12px;
}

.drawer-back-button:hover {
  background: rgba(234, 91, 12, 0.1);
  border-color: rgba(234, 91, 12, 0.3);
  transform: translateX(-2px);
}

.drawer-back-button svg {
  stroke: #ccc;
  transition: stroke 0.2s ease;
}

.drawer-back-button:hover svg {
  stroke: #ea5b0c;
}

/* Scrolled state - verschmilzt optisch mit cmdbar */

.drawer-header.scrolled {
  padding: 8px 2rem 12px;
  background: linear-gradient(180deg,
      rgba(44, 44, 44, 0.92) 0%,
      rgba(44, 44, 44, 0.85) 100%);
  backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
}

/* Kompakter Modus (Explorer) - sehr minimalistisch */

.drawer-header.compact {
  padding: 8px 2rem 12px;
  gap: 12px;
}

/* Voller Modus (Cell Detail Page) */

.drawer-header.full {
  padding: 12px 2rem 16px;
}

.drawer-header-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
  transition: all 0.3s ease;
}

.drawer-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  min-width: 0;
  flex: 0 1 auto;
  /* Kachel-Design */
  background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  padding: 16px 20px;
  transition: all 0.3s ease;
  opacity: 1;
  transform: translateY(0);
}

/* Ausblenden im Compact Mode */

.drawer-header.compact .drawer-left {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.drawer-cell-image {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.drawer-cell-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.drawer-cell-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.drawer-cell-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: white;
  margin: 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Elegantes Abschneiden langer Namen */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.harvested-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.2), rgba(234, 91, 12, 0.1));
  border: 1px solid rgba(234, 91, 12, 0.5);
  border-radius: 14px;
  color: #ea5b0c;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;

  font-family: var(--font-body);
  box-shadow: 0 0 12px rgba(234, 91, 12, 0.2);
}

.drawer-cell-meta {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1;
  font-weight: 500;
}

.drawer-cell-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.drawer-cell-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 10px;
  color: rgba(255, 255, 255, 0.3);
}

.country-flag {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  vertical-align: middle;
  font-size: 16px;
  line-height: 1;
}

.country-flag img,
.country-flag span {
  display: inline-block;
  vertical-align: middle;
}

.country-flag img {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.harvested-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 8px;
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.25));
  border: 1px solid rgba(234, 91, 12, 0.4);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;

  color: #ff9955;
  font-family: var(--font-body);
}

.meta-country,
.meta-year {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Section Tabs in Header */

.drawer-sections {
  display: flex;
  gap: 0;
  flex: 1;
  justify-content: center;
  min-width: 0;
  align-self: stretch;
  /* Dimension Stepper Style */
  background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  padding: 8px 12px;
  /* Responsive overflow handling */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(234, 91, 12, 0.5) transparent;
  transition: all 0.3s ease;
}

/* Minimierter Modus im Explorer */

.drawer-header.compact .drawer-sections {
  padding: 6px 10px;
}

.drawer-header.compact .drawer-section-tab {
  padding: 10px 16px;
  font-size: 12px;
}

.drawer-sections::-webkit-scrollbar {
  height: 3px;
}

.drawer-sections::-webkit-scrollbar-track {
  background: transparent;
}

.drawer-sections::-webkit-scrollbar-thumb {
  background: rgba(234, 91, 12, 0.5);
  border-radius: 3px;
}

.drawer-section-tab {
  position: relative;
  padding: 19px 24px 16px 24px;
  color: #999;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;

  white-space: nowrap;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  gap: 8px;
}

.drawer-section-tab::after {
  content: none;
  /* Remove bottom border */
}

.drawer-section-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(234, 91, 12, 0.2);
}

.drawer-section-tab:hover::after {
  background: transparent;
}

.drawer-section-tab.is-active {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
  border-color: #ea5b0c;
  color: #fff;
  box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
}

.drawer-section-tab.is-active::after {
  background: transparent;
  height: 0;
  box-shadow: none;
}

.drawer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* Kachel-Design */
  background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  padding: 8px 12px;
  transition: all 0.3s ease;
}

/* Kompakter im Explorer Mode */

.drawer-header.compact .drawer-actions {
  padding: 6px 10px;
}

.drawer-header.compact .btn-compare-toggle {
  padding: 8px 12px;
  font-size: 12px;
  gap: 6px;
}

/* OPTIMIERT: Minimalistischer Compare Button - nur Icon im compact mode */

.btn-compare-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  /* Explore-Button Gradient Style */
  background: linear-gradient(135deg, #ea5b0c, #ff7733);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: 'Big John', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(234, 91, 12, 0.3);
  position: relative;
}

/* Icon-only im compact mode */

.drawer-header.compact .btn-compare-toggle .btn-text {
  display: none;
}

.drawer-header.compact .btn-compare-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  /* Runder Button */
}

/* Tooltip für Icon-only Button */

.btn-compare-toggle::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.drawer-header.compact .btn-compare-toggle:hover::before {
  opacity: 1;
}

.btn-compare-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(234, 91, 12, 0.5);
}

.btn-compare-toggle.is-active {
  background: linear-gradient(135deg, #ff7733, #ea5b0c);
  box-shadow: 0 0 30px rgba(234, 91, 12, 0.6);
}

/* ====== CONTEXT-SPECIFIC MODES ====== */

/* Explorer Mode: Minimale UI */

body[data-page="explorer"] .drawer-header {
  padding: 8px 2rem;
  gap: 12px;
}

/* Cell Detail Mode: Volle UI mit Cell Info */

body[data-page="cell-detail"] .drawer-header {
  padding: 12px 2rem;
}

/* Compare Mode: Spezielle Compare Toolbar */

body[data-page="compare"] .drawer-header {
  padding: 12px 2rem;
}

body[data-page="compare"] .drawer-sections {
  display: none;
  /* Keine Section Tabs im Compare Mode */
}

body[data-page="compare"] .drawer-actions {
  flex: 1;
  /* Compare Actions nehmen mehr Platz */
  justify-content: flex-end;
}

/* Scrolled state on any page */

body.scrolled .drawer-header {
  padding: 8px 2rem;
}

/* cmdbar scrolled handled in command-bar-adaptive.css */

/* ====== CELL CARDS WITH COMPARE BUTTONS ====== */

.cell-card {
  position: relative;
}

.cell-compare-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(45, 42, 38, 0.8);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(234, 91, 12, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s;
  z-index: 10;
}

.cell-card:hover .cell-compare-btn {
  opacity: 1;
  transform: scale(1);
}

.cell-compare-btn:hover {
  background: rgba(234, 91, 12, 0.2);
  border-color: var(--brand);
  transform: scale(1.1);
}

.cell-compare-btn.is-active {
  opacity: 1;
  transform: scale(1);
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 12px rgba(234, 91, 12, 0.6);
}

.cell-card.in-cart {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 4px 12px rgba(234, 91, 12, 0.3);
}

.cell-card.in-cart .cell-compare-btn {
  opacity: 1;
  transform: scale(1);
}

/* ====== DRAWER CONTENT ====== */

/* Cell Detail Page - Full width content without drawer concept */

.cell-detail-page {
  background: transparent;
}

.cell-detail-content {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* ====== COMMAND BAR ADJUSTMENTS ====== */

.cmdbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Kachel */
  background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  padding: 8px 12px;
}

.cmdbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Kachel */
  background: linear-gradient(135deg, rgba(55, 53, 50, 0.8) 0%, rgba(45, 42, 38, 0.95) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  padding: 8px 12px;
}

.cmdbar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #999;
  font-family: 'Big John', sans-serif;
  font-size: 13px;
  font-weight: 700;

  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cmdbar-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(234, 91, 12, 0.2);
  color: white;
}

.cmdbar-btn.is-active {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.05));
  border-color: #ea5b0c;
  color: #fff;
  box-shadow: 0 0 20px rgba(234, 91, 12, 0.3);
}

/* Light theme adjustments for cmdbar */

[data-theme="light"] .cmdbar-left,
[data-theme="light"] .cmdbar-right {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 250, 250, 0.95) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .cmdbar-btn {
  color: #666;
}

[data-theme="light"] .cmdbar-btn svg {
  stroke: #666;
}

[data-theme="light"] .cmdbar-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(234, 91, 12, 0.3);
  color: #1a1a1a;
}

[data-theme="light"] .cmdbar-btn:hover svg {
  stroke: var(--brand);
}

[data-theme="light"] .cmdbar-btn.is-active {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.08));
  border-color: rgba(234, 91, 12, 0.4);
  color: var(--brand);
  box-shadow: 0 0 20px rgba(234, 91, 12, 0.2);
}

[data-theme="light"] .cmdbar-btn.is-active svg {
  stroke: var(--brand);
}

/* ====== EXPLORER HEADER BAR ====== */

.explorer-header-bar {
  position: sticky;
  top: var(--h);
  z-index: 950;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0;
  background: linear-gradient(135deg, rgba(50, 45, 40, 0.5) 0%, rgba(45, 42, 38, 0.7) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border-bottom: 1px solid rgba(234, 91, 12, 0.2);
  min-height: 80px;
}

.explorer-header-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.explorer-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.explorer-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(234, 91, 12, 0.1);
  border: 1px solid rgba(234, 91, 12, 0.2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}

/* Light theme adjustments for explorer header */

[data-theme="light"] .explorer-header-bar {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(234, 91, 12, 0.15);
}

[data-theme="light"] .explorer-icon svg {
  stroke: var(--brand);
}

.explorer-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.explorer-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: white;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.explorer-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1;
}

.explorer-controls {
  display: flex;
  gap: 12px;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.explorer-search-wrapper {
  position: relative;
  flex: 1;
  max-width: 400px;
  display: flex;
  align-items: center;
}

.explorer-search-icon {
  position: absolute;
  left: 14px;
  color: rgba(234, 91, 12, 0.6);
  pointer-events: none;
  z-index: 1;
}

.explorer-search {
  flex: 1;
  width: 100%;
  padding: 10px 42px 10px 42px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(234, 91, 12, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.explorer-search::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.explorer-search:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.explorer-search:focus+.explorer-search-clear {
  opacity: 1;
}

.explorer-search-clear {
  position: absolute;
  right: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(234, 91, 12, 0.2);
  border: 1px solid rgba(234, 91, 12, 0.3);
  border-radius: 50%;
  color: #ea5b0c;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.7;
  z-index: 1;
}

.explorer-search-clear:hover {
  background: rgba(234, 91, 12, 0.3);
  border-color: #ea5b0c;
  opacity: 1;
  transform: scale(1.1);
}

.explorer-search:focus+.explorer-search-icon {
  color: var(--brand);
}

.explorer-sort {
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(234, 91, 12, 0.2);
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.explorer-sort:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--brand);
}

.explorer-sort:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, 0.1);
}

.explorer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.explorer-selected {
  font-size: 13px;
  color: var(--brand);
  font-weight: 600;
}

/* ====== RESPONSIVE DESIGN ====== */

/* Laptop: 1024px - 1200px */

@media (max-width: 1200px) {
  .drawer-header-inner {
    gap: 14px;
  }

  .drawer-section-tab {
    padding: 0 18px;
    font-size: 12px;
  }
}

/* Tablet: 768px - 1024px */

@media (max-width: 1024px) {
  .drawer-header {
    padding: 10px 12px;
    gap: 12px;
  }

  .drawer-header-inner {
    gap: 12px;
  }

  .drawer-left {
    gap: 10px;
  }

  .drawer-cell-name {
    font-size: 16px;
  }

  .drawer-section-tab {
    padding: 0 14px;
    font-size: 11px;
  }
}

/* Mobile: < 768px */

@media (max-width: 768px) {
  .drawer-header {
    padding: 8px 10px;
    min-height: 64px;
  }

  .drawer-header-inner {
    gap: 10px;
    flex-wrap: wrap;
  }

  .drawer-left {
    gap: 8px;
    flex: 1 1 100%;
  }

  .drawer-cell-image {
    width: 40px;
    height: 40px;
  }

  .drawer-cell-name {
    font-size: 14px;
  }

  .drawer-cell-meta {
    font-size: 11px;
  }

  .drawer-sections {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .drawer-section-tab {
    padding: 0 12px;
    font-size: 10px;
    min-height: 48px;
  }

  .drawer-actions {
    order: 2;
    flex-shrink: 0;
  }

  .btn-compare-toggle {
    padding: 8px 12px;
    font-size: 11px;
  }
}

/* Very small screens: < 600px */

@media (max-width: 600px) {
  .drawer-cell-meta span {
    font-size: 10px;
  }

  .drawer-section-tab {
    padding: 0 10px;
  }
}

/* ====== LIGHT THEME ====== */

[data-theme="light"] .compare-cart-dropdown {
  background: rgba(255, 250, 245, 0.95);
  border-color: rgba(234, 91, 12, 0.3);
}

[data-theme="light"] .cart-item {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(234, 91, 12, 0.2);
}

[data-theme="light"] .cart-item:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(234, 91, 12, 0.4);
}

[data-theme="light"] .cart-item-title {
  color: #2c1810;
}

[data-theme="light"] .cart-item-meta {
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .drawer-header {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.65) 100%);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .drawer-header.scrolled {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 0.75) 100%);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .drawer-left,
[data-theme="light"] .drawer-actions {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 250, 250, 0.95) 100%);
  backdrop-filter: blur(80px) saturate(250%);
  -webkit-backdrop-filter: blur(80px) saturate(250%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .drawer-sections {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(250, 250, 250, 0.95) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .drawer-cell-image {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.05) 0%, rgba(234, 91, 12, 0.02) 100%);
  border: 1px solid rgba(234, 91, 12, 0.15);
}

[data-theme="light"] .drawer-cell-name {
  color: #2c1810;
  text-shadow: none;
}

[data-theme="light"] .drawer-cell-meta {
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .drawer-section-tab {
  color: #666;
  border-color: transparent;
}

[data-theme="light"] .drawer-section-tab:hover {
  color: #1a1a1a;
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(234, 91, 12, 0.2);
}

[data-theme="light"] .drawer-section-tab:hover::after {
  background: transparent;
}

[data-theme="light"] .drawer-section-tab.is-active {
  background: linear-gradient(135deg, rgba(234, 91, 12, 0.15), rgba(234, 91, 12, 0.08));
  border-color: rgba(234, 91, 12, 0.4);
  color: var(--brand);
  box-shadow: 0 0 20px rgba(234, 91, 12, 0.2);
}

[data-theme="light"] .drawer-section-tab.is-active::after {
  background: transparent;
}

[data-theme="light"] .btn-compare-toggle {
  background: linear-gradient(135deg, #ea5b0c, #ff7733);
  box-shadow: 0 4px 20px rgba(234, 91, 12, 0.25);
}

[data-theme="light"] .btn-compare-toggle:hover {
  box-shadow: 0 6px 30px rgba(234, 91, 12, 0.4);
}

[data-theme="light"] .btn-compare-toggle.is-active {
  box-shadow: 0 0 30px rgba(234, 91, 12, 0.5);
}

/* Tooltip im Light Mode */

[data-theme="light"] .btn-compare-toggle::before {
  background: rgba(0, 0, 0, 0.85);
  color: white;
}

[data-theme="light"] .cell-compare-btn {
  background: rgba(255, 250, 245, 0.95);
  border-color: rgba(234, 91, 12, 0.3);
  color: #2c1810;
}

[data-theme="light"] .explorer-header-bar {
  background: rgba(255, 250, 245, 0.8);
  border-bottom-color: rgba(234, 91, 12, 0.2);
}

[data-theme="light"] .explorer-title {
  color: #2c1810;
}

[data-theme="light"] .explorer-subtitle {
  color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .explorer-search,
[data-theme="light"] .explorer-sort {
  background: rgba(234, 91, 12, 0.1);
  border-color: rgba(234, 91, 12, 0.3);
  color: #2c1810;
}

[data-theme="light"] .explorer-search::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .explorer-search:focus,
[data-theme="light"] .explorer-sort:focus {
  background: rgba(234, 91, 12, 0.15);
}

[data-theme="light"] .explorer-sort:hover {
  background: rgba(234, 91, 12, 0.15);
}

/* ====== DETAIL VIEW COMPARE BUTTON ====== */

.detail-compare-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: rgba(44, 44, 44, 0.95);
  backdrop-filter: blur(30px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.detail-compare-btn:hover {
  background: rgba(234, 91, 12, 0.2);
  border-color: rgba(234, 91, 12, 0.5);
  color: #ea5b0c;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(234, 91, 12, 0.3);
}

.detail-compare-btn.active {
  background: linear-gradient(135deg, #ea5b0c 0%, #d64a0a 100%);
  border-color: #ea5b0c;
  color: white;
}

.detail-compare-btn.active:hover {
  background: linear-gradient(135deg, #ff6a1a 0%, #e55512 100%);
  border-color: #ff6a1a;
  transform: translateY(-2px) scale(1.05);
}

.detail-compare-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.25rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.detail-compare-btn.active .detail-compare-btn__icon {
  background: rgba(255, 255, 255, 0.2);
}

.detail-compare-btn__text {
  font-size: 0.9375rem;

}

/* Responsive adjustments */

@media (max-width: 768px) {
  .detail-compare-btn {
    bottom: 1rem;
    right: 1rem;
    padding: 0.875rem 1.25rem;
  }

  .detail-compare-btn__text {
    display: none;
  }

  .detail-compare-btn__icon {
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
  }
}

/* Guided Tour System Styles */

/* ===== Tour Overlay ===== */

.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50000;
    pointer-events: none;
}

/* SVG Overlay with click-through cutout */

.tour-overlay-svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50001;
    pointer-events: none;
    animation: tourFadeIn 0.3s ease-out;
}

.tour-overlay-svg path {
    pointer-events: all;
}

/* Interactive mode: only the filled (dark) area catches events; the cutout passes clicks through */

.tour-overlay-svg--interactive path {
    pointer-events: visibleFill;
}

/* ===== Tour Tooltip ===== */

.tour-tooltip {
    position: fixed;
    z-index: 50003;
    pointer-events: all;
    max-width: 400px;
    min-width: 320px;
    background: rgba(20, 20, 20, 0.98);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 12px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(234, 91, 12, 0.15);
    animation: tourSlideIn 0.4s ease-out;
    overflow: hidden;
}

/* Tooltip Header */

.tour-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(234, 91, 12, 0.05);
}

.tour-tooltip-title h3 {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ea5b0c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.tour-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.tour-close-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

/* Progress Indicator */

.tour-progress {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tour-progress-text {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 6px;
    display: block;
}

.tour-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.tour-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ea5b0c, #ff7a33);
    transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Tooltip Content */

.tour-tooltip-content {
    padding: 20px;
    font-family: 'Roboto', sans-serif;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
}

.tour-tooltip-content p {
    margin: 0 0 12px 0;
}

.tour-tooltip-content p:last-child {
    margin-bottom: 0;
}

.tour-tooltip-content strong {
    color: #fff;
    font-weight: 600;
}

.tour-tooltip-content ul {
    margin: 8px 0;
    padding-left: 20px;
    list-style: disc;
}

.tour-tooltip-content li {
    margin-bottom: 6px;
}

/* Tooltip Actions */

.tour-tooltip-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    gap: 12px;
}

.tour-actions-left,
.tour-actions-right {
    display: flex;
    gap: 8px;
}

/* Tour Buttons */

.tour-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tour-btn-primary {
    background: linear-gradient(135deg, #ea5b0c, #ff7a33);
    color: #fff;
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.3);
}

.tour-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(234, 91, 12, 0.4);
}

.tour-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.tour-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.tour-btn-ghost {
    background: transparent;
    color: #94a3b8;
}

.tour-btn-ghost:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

/* Disabled Next button for gated interactive steps */

.tour-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: auto;
}

.tour-btn-primary:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Skip-filter escape link */

.tour-skip-filter-row {
    padding: 0 20px 12px;
    text-align: right;
}

.tour-skip-filter {
    background: none;
    border: none;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.2s ease;
}

.tour-skip-filter:hover {
    color: #94a3b8;
    text-decoration: underline;
}

/* Tooltip Arrow — positioned by @floating-ui/dom arrow middleware */

.tour-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    pointer-events: none;
}

.tour-tooltip-arrow-top {
    border-top-color: rgba(20, 20, 20, 0.98);
}

.tour-tooltip-arrow-bottom {
    border-bottom-color: rgba(20, 20, 20, 0.98);
}

.tour-tooltip-arrow-left {
    border-left-color: rgba(20, 20, 20, 0.98);
}

.tour-tooltip-arrow-right {
    border-right-color: rgba(20, 20, 20, 0.98);
}

/* ===== Tour Prompt (First-Time Banner) ===== */

.tour-prompt {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 49999;
    animation: tourPromptSlide 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tour-prompt-content {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(20, 20, 20, 0.98);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 12px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(234, 91, 12, 0.2);
    max-width: 420px;
}

.tour-prompt-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 91, 12, 0.15);
    border-radius: 8px;
    color: #ea5b0c;
}

.tour-prompt-text {
    flex: 1;
    min-width: 0;
}

.tour-prompt-text h4 {
    font-family: 'Big John', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #ea5b0c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 4px 0;
}

.tour-prompt-text p {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

.tour-prompt-actions {
    display: flex;
    gap: 8px;
}

.tour-prompt-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tour-prompt-btn-primary {
    background: linear-gradient(135deg, #ea5b0c, #ff7a33);
    color: #fff;
    box-shadow: 0 4px 12px rgba(234, 91, 12, 0.3);
}

.tour-prompt-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(234, 91, 12, 0.4);
}

.tour-prompt-btn-ghost {
    background: transparent;
    color: #94a3b8;
    padding: 8px;
}

.tour-prompt-btn-ghost:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

/* ===== Animations ===== */

@keyframes tourFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes tourSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tourPromptSlide {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== Help Menu Dropdown ===== */

.help-menu-container {
    position: relative;
}

.help-menu-trigger {
    /* inherits cmdbar-btn styles */
}

.help-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: linear-gradient(135deg, rgba(35, 35, 35, 0.97) 0%, rgba(20, 20, 20, 0.99) 100%);
    backdrop-filter: blur(80px) saturate(250%);
    -webkit-backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
    z-index: 50001;
    overflow: hidden;
    animation: helpMenuFadeIn 0.2s ease;
}

@keyframes helpMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.help-menu-header {
    padding: 12px 16px 8px;
    font-family: 'Big John', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ea5b0c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.help-menu-list {
    padding: 6px 0;
}

.help-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.help-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Contextual highlight: left orange border for the tour relevant to current page */

.help-menu-item--relevant {
    border-left: 3px solid #ea5b0c;
    padding-left: 13px; /* compensate for border width */
    background: rgba(234, 91, 12, 0.06);
}

.help-menu-item--relevant:hover {
    background: rgba(234, 91, 12, 0.1);
}

.help-menu-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.help-menu-item-name {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-menu-item-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status badges */

.help-menu-badge {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

/* New: unseen — accent orange */

.help-menu-badge--unseen {
    background: rgba(234, 91, 12, 0.2);
    color: #ea5b0c;
    border: 1px solid rgba(234, 91, 12, 0.3);
}

/* Paused: dismissed — muted gray */

.help-menu-badge--dismissed {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

/* Done: completed — soft green */

.help-menu-badge--completed {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Wide tooltip variant — horizontal layout to avoid overlapping content below */

.tour-tooltip--wide {
    max-width: 700px;
    min-width: 500px;
}

.tour-tooltip--wide .tour-tooltip-content {
    padding-top: 4px;
    padding-bottom: 4px;
}

.tour-tooltip--wide .tour-tooltip-content p {
    margin-bottom: 6px;
}

/* ===== Responsive ===== */

@media (max-width: 768px) {
    .tour-tooltip {
        max-width: calc(100vw - 40px);
        min-width: auto;
        left: 20px !important;
        right: 20px !important;
        width: auto !important;
    }

    .tour-prompt {
        bottom: 10px;
        right: 10px;
        left: 10px;
    }

    .tour-prompt-content {
        max-width: none;
        flex-wrap: wrap;
    }

    .tour-tooltip-actions {
        flex-direction: column;
        gap: 8px;
    }

    .tour-actions-left,
    .tour-actions-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* ===== Accessibility ===== */

.tour-btn:focus,
.tour-close-btn:focus,
.tour-prompt-btn:focus {
    outline: 2px solid #ea5b0c;
    outline-offset: 2px;
}

/* High contrast mode support */

@media (prefers-contrast: high) {
    .tour-tooltip,
    .tour-prompt-content {
        border-width: 2px;
        border-color: #ea5b0c;
    }
}

/* ===== Tour Pulse Highlight ===== */

/* Applied dynamically to elements the user should click during interactive steps */

.tour-pulse-highlight {
    position: relative;
    z-index: 50002;
    animation: tourPulseGlow 1.5s ease-in-out infinite;
    border-radius: 6px;
    background-color: rgba(234, 91, 12, 0.12) !important;
}

@keyframes tourPulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(234, 91, 12, 0.4), 0 0 8px rgba(234, 91, 12, 0.2);
        background-color: rgba(234, 91, 12, 0.12);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(234, 91, 12, 0.7), 0 0 20px rgba(234, 91, 12, 0.4);
        background-color: rgba(234, 91, 12, 0.2);
    }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {

    .tour-overlay,
    .tour-tooltip,
    .tour-prompt,
    .tour-overlay-svg,
    .tour-progress-fill,
    .tour-whats-next-overlay,
    .tour-suggestion-card,
    .tour-pulse-highlight {
        animation: none;
        transition: none;
    }
}

/* ===== What's Next Panel ===== */

.tour-whats-next-overlay {
    position: fixed;
    inset: 0;
    z-index: 50000;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tour-fade-in 0.3s ease;
}

.tour-whats-next-panel {
    background: rgba(20, 20, 20, 0.98);
    backdrop-filter: blur(80px) saturate(250%);
    border: 1px solid rgba(234, 91, 12, 0.3);
    border-radius: 12px;
    padding: 0;
    max-width: 640px;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(234, 91, 12, 0.15);
}

.tour-whats-next-panel h2 {
    font-family: 'Big John', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #ea5b0c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(234, 91, 12, 0.05);
}

.tour-whats-next-panel > p {
    font-family: 'Roboto', sans-serif;
    color: #94a3b8;
    font-size: 14px;
    margin: 0;
    padding: 16px 20px 12px;
}

.tour-whats-next-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 20px 16px;
}

.tour-suggestion-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tour-suggestion-card:hover {
    border-color: rgba(234, 91, 12, 0.5);
    background: rgba(234, 91, 12, 0.08);
    transform: translateY(-1px);
}

.tour-suggestion-card h3 {
    font-family: 'Roboto', sans-serif;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.tour-suggestion-card p {
    font-family: 'Roboto', sans-serif;
    color: #94a3b8;
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
}

.tour-suggestion-card .completed-badge {
    display: inline-block;
    color: #22c55e;
    font-size: 11px;
    font-weight: 500;
    margin-top: 4px;
}

.tour-suggestion-card.completed {
    opacity: 0.5;
}

.tour-whats-next-dismiss {
    display: block;
    width: calc(100% - 40px);
    margin: 0 20px 16px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-family: 'Roboto', sans-serif;
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.tour-whats-next-dismiss:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

@keyframes tour-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== Tour Step Content Classes ===== */

.tour-step-highlight {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(234, 91, 12, 0.1);
    border-left: 3px solid #ea5b0c;
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    line-height: 1.5;
}

.tour-step-list {
    margin: 8px 0;
    padding-left: 20px;
    color: #cbd5e1;
    line-height: 1.6;
}

.tour-step-hint {
    color: #94a3b8;
    font-size: 12px;
    margin-top: 10px;
    font-style: italic;
}

.tour-transition-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(13, 124, 153, 0.15);
    border-radius: 6px;
    color: #7dd3fc;
    font-size: 13px;
}

/* ===== What's Next Responsive ===== */

@media (max-width: 600px) {
    .tour-whats-next-grid {
        grid-template-columns: 1fr;
    }

    .tour-whats-next-panel {
        padding: 24px 20px;
    }
}

/* Guided tour system with spotlight overlays and tooltips */

/* ===== STEP 8: Responsive ===== */

/* ========================================
   RESPONSIVE BREAKPOINTS & UTILITIES
   ======================================== */

/* Breakpoint definitions matching adaptive-layout.css */

:root {
    --breakpoint-mobile: 640px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1440px;
}

/* ========================================
   MOBILE (< 640px)
   ======================================== */

@media (max-width: 640px) {

    /* Filter panel becomes full-screen overlay */
    .filter-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        transform: translateX(-100%);
    }

    .filter-panel.is-open {
        transform: translateX(0);
    }

    /* cmdbar responsive styles in command-bar-adaptive.css */

    /* Stack grid cards single column */
    .cells-grid--card {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    /* Benchmarking plots stack vertically */
    .score-plot-view,
    .my-plot-view,
    .free-plot-view {
        flex-direction: column;
    }

    .score-plot-controls,
    .my-plot-controls,
    .free-plot-controls {
        width: 100%;
        max-width: none;
    }

    /* ECharts responsive sizing */
    .ragone-plot-container,
    .score-plot-main,
    .my-plot-main,
    .free-plot-main {
        min-height: 350px;
    }

    /* Compare table horizontal scroll */
    .compare-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .compare-table {
        min-width: 600px;
    }
}

/* ========================================
   TABLET (640px - 1024px)
   ======================================== */

@media (min-width: 641px) and (max-width: 1024px) {

    /* 2-column grid on tablets */
    .cells-grid--card {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Benchmarking controls adjust */
    .score-plot-controls,
    .my-plot-controls,
    .free-plot-controls {
        width: 280px;
    }

    /* Filter panel narrower */
    .filter-panel {
        width: 280px;
    }

}

/* ========================================
   DESKTOP (> 1024px)
   ======================================== */

@media (min-width: 1025px) {

    /* 3-column grid default */
    .cells-grid--card {
        grid-template-columns: repeat(3, 1fr);
    }

    /* 4-column grid on wide screens */
    @media (min-width: 1440px) {
        .cells-grid--card {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    /* Full-width benchmarking controls */
    .score-plot-controls,
    .my-plot-controls,
    .free-plot-controls {
        width: 320px;
    }

    /* Smooth hover effects */
    .cell-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .cell-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    }
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */

@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    .cmdbar-btn,
    .btn,
    button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Disable hover effects */
    .cell-card:hover {
        transform: none;
    }

    /* Larger filter checkboxes */
    input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    /* Easier to tap sliders */
    input[type="range"] {
        height: 40px;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {

    .cmdbar,
    .filter-panel,
    .breadcrumb,
    .floating-controls,
    .compare-badge {
        display: none !important;
    }

    .app-content {
        max-width: none;
        padding: 0;
    }

    .cells-grid--card {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Disable FLIP animations */
    .cell-card-flip-source,
    .cell-detail-flip-target {
        will-change: auto !important;
    }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

@media (prefers-contrast: high) {

    .cell-card,
    .compare-table,
    .breadcrumb {
        border: 2px solid currentColor;
    }

    .btn,
    .cmdbar-btn {
        border: 2px solid currentColor;
    }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */

@media (orientation: landscape) and (max-height: 600px) {

    /* Compact vertical spacing on short landscape screens - cmdbar handled in command-bar-adaptive.css */

    .breadcrumb {
        padding: 0.5rem 1rem;
    }

    .cells-grid-view {
        padding: 1rem;
    }
}

/* Mobile/Tablet/Desktop breakpoints, touch optimizations, reduced motion */

/* =========================================
   CRITICAL DEFAULT STYLES
   Minimal fallbacks - Section CSS takes precedence
   ========================================= */

/* Only for elements without section-specific styling */

.flipcard {
  perspective: 1000px;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spec-list,
.spec-list-minimal {
  display: flex;
  flex-direction: column;
}

/* =========================================
   GLOBAL OVERRIDES & LEGACY SUPPORT
   ========================================= */

/* Global Box Model */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth Scrolling */

html {
  scroll-behavior: smooth;
  background: var(--bg-0, #2c2c2c);
}

/* Body Base Styles */

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg-0, #2c2c2c);
  color: var(--text-primary, rgba(255, 255, 255, 0.95));
  font-family: var(--font-body, 'Roboto', sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent over-scroll showing wrong background */
  overscroll-behavior: none;
}

/* Remove default list styles */

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Remove default link styles */

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition, 0.2s ease);
}

a:hover {
  opacity: 0.8;
}

/* Button Reset */

button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  transition: var(--transition, 0.2s ease);
}

/* Image Reset */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* SVG Reset */

svg {
  display: block;
}

/* Selection Styles */

::selection {
  background: var(--brand, #ea5b0c);
  color: white;
}

::-moz-selection {
  background: var(--brand, #ea5b0c);
  color: white;
}

/* Scrollbar Styles (Dark Theme) */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-1, #323232);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-3, #3e3e3e);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bg-4, #444444);
}

/* Focus Visible (Accessibility) */

*:focus-visible {
  outline: 2px solid var(--primary-color, #0d7c99);
  outline-offset: 2px;
}

/* Reduced Motion (Accessibility) */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print Styles */

@media print {
  body {
    background: white;
    color: black;
  }

  .no-print {
    display: none !important;
  }
}

/* ===== LEGACY SUPPORT (Deprecated - akan dihapus) ===== */

/* Diese Variablen werden noch von alten Komponenten verwendet */

:root {
  /* Legacy color variables */
  --ink: var(--text-primary);
  --muted: var(--text-tertiary);
  --card: var(--bg-2);
  --card-border: var(--border-light);
  --card-border-strong: var(--border-medium);
  --card-glass: var(--glass-bg);
  --chip: var(--bg-3);
  --chip-border: var(--border-light);
  --line: var(--border-light);

  /* Legacy shadows */
  --shadow: var(--glass-shadow);
  --shadow-strong: var(--shadow-lg);
  --inset: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Legacy blur */
  --blur: blur(80px) saturate(250%);

  /* Legacy sizes */
  --radius: 20px;
  --radius-sm: 14px;
  --header-h: 64px;
  --container-w: 1800px;
  --hero-h: 360px;
  --kpi-h: 120px;
  --tile-h: auto;
  --chart-h: 355px;
  --def-btn-offset: 10px;
  --def-font-size: 12.5px;
  --def-line: 1.4;
  --noise-opacity: .04;
}