/* ====================================================================
   THEME 1 (DEFAULT): WORKSHOP — warm beige maker bench, brown/orange
   ==================================================================== */
:root {
    --bg-color: #f5ecd8;
    --panel-bg: #fffbf2;
    --card-bg: #fffbf2;
    --card-border: rgba(120, 70, 30, 0.18);
    --accent: #c2410c;
    --accent-soft: rgba(194, 65, 12, 0.10);
    --accent-strong: rgba(194, 65, 12, 0.7);
    --accent2: #b45309;
    --danger: #b91c1c;
    --muted: #78603e;
    --text: #2a1a08;
    --text-secondary: #5a4327;
    --border: #d8c5a3;
    --pill-bg: #fffbf2;
    --pill-border: rgba(120, 70, 30, 0.25);
    --input-bg: #fef9eb;
    --glow1: rgba(194, 65, 12, 0.08);
    --glow2: rgba(180, 83, 9, 0.06);
    --body-glow1: rgba(194, 65, 12, 0.10);
    --body-glow2: rgba(250, 204, 21, 0.10);
    --btn-primary-bg: linear-gradient(135deg, #d97706, #b45309);
    --btn-primary-text: #fff;
    --btn-primary-border: rgba(217, 119, 6, 0.7);
    --connected-bg: rgba(22, 163, 74, 0.12);
    --connected-border: rgba(22, 163, 74, 0.6);
    --connected-text: #15803d;
    --connected-dot: #16a34a;
    --disconnected-bg: rgba(185, 28, 28, 0.10);
    --disconnected-border: rgba(185, 28, 28, 0.5);
    --disconnected-dot: #b91c1c;
    --shadow-color: rgba(80, 50, 20, 0.18);
    --log-info: #e2e8f0;
    --log-tx: #6ee7b7;
    --log-rx: #93c5fd;
    --log-error: #fca5a5;
    --log-success: #fde047;
    --log-warning: #fdba74;
    /* Maqueen card surfaces — light cream layered for depth */
    --card-bg-2: #fef6e4;
    --bg-deep:   #fdf0d4;
    /* 3D card depth (used by every card) */
    --card-grad: linear-gradient(180deg, #fffdf6 0%, #fbf3df 100%);
    --card-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 6px 16px rgba(80,50,20,0.10), 0 1px 3px rgba(80,50,20,0.06);
    --log-bg: #3d2817;
    --log-fg: #fef9eb;
}

/* ===== THEMES ===== */

/* ====================================================================
   THEME 2: SKY — calm classroom blue, light, focused
   ==================================================================== */
[data-theme="sky"] {
    --bg-color: #eaf3fb;
    --panel-bg: #ffffff;
    --card-bg: #ffffff;
    --card-border: rgba(37, 99, 235, 0.15);
    --accent: #2563eb;
    --accent-soft: rgba(37, 99, 235, 0.08);
    --accent-strong: rgba(37, 99, 235, 0.6);
    --accent2: #0891b2;
    --danger: #dc2626;
    --muted: #64748b;
    --text: #0f1f3a;
    --text-secondary: #3a5170;
    --border: #c7daee;
    --pill-bg: #ffffff;
    --pill-border: rgba(37, 99, 235, 0.22);
    --input-bg: #f3f8fd;
    --glow1: rgba(37, 99, 235, 0.08);
    --glow2: rgba(8, 145, 178, 0.06);
    --body-glow1: rgba(37, 99, 235, 0.10);
    --body-glow2: rgba(125, 211, 252, 0.10);
    --btn-primary-bg: linear-gradient(135deg, #2563eb, #1e40af);
    --btn-primary-text: #fff;
    --btn-primary-border: rgba(37, 99, 235, 0.7);
    --connected-bg: rgba(22, 163, 74, 0.10);
    --connected-border: rgba(22, 163, 74, 0.5);
    --connected-text: #15803d;
    --connected-dot: #16a34a;
    --disconnected-bg: rgba(220, 38, 38, 0.08);
    --disconnected-border: rgba(220, 38, 38, 0.4);
    --disconnected-dot: #dc2626;
    --shadow-color: rgba(37, 99, 235, 0.12);
    --log-info: #e2e8f0;
    --log-tx: #6ee7b7;
    --log-rx: #93c5fd;
    --log-error: #fca5a5;
    --log-success: #fde047;
    --log-warning: #fdba74;
    --card-bg-2: #f5f9fd;
    --bg-deep:   #e8f1fa;
    --card-grad: linear-gradient(180deg, #ffffff 0%, #f0f6fc 100%);
    --card-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 6px 16px rgba(37,99,235,0.10), 0 1px 3px rgba(37,99,235,0.06);
    --log-bg: #0f2547;
    --log-fg: #dbeafe;
}

/* ====================================================================
   THEME 3: MINT — soft sage green, gentle learning playground
   ==================================================================== */
[data-theme="mint"] {
    --bg-color: #ecf6ec;
    --panel-bg: #ffffff;
    --card-bg: #ffffff;
    --card-border: rgba(22, 163, 74, 0.18);
    --accent: #16a34a;
    --accent-soft: rgba(22, 163, 74, 0.10);
    --accent-strong: rgba(22, 163, 74, 0.7);
    --accent2: #0d9488;
    --danger: #dc2626;
    --muted: #4d6b53;
    --text: #112317;
    --text-secondary: #2d4a37;
    --border: #c4dfca;
    --pill-bg: #ffffff;
    --pill-border: rgba(22, 163, 74, 0.22);
    --input-bg: #f4faf5;
    --glow1: rgba(22, 163, 74, 0.08);
    --glow2: rgba(13, 148, 136, 0.06);
    --body-glow1: rgba(22, 163, 74, 0.10);
    --body-glow2: rgba(134, 239, 172, 0.10);
    --btn-primary-bg: linear-gradient(135deg, #16a34a, #15803d);
    --btn-primary-text: #fff;
    --btn-primary-border: rgba(22, 163, 74, 0.7);
    --connected-bg: rgba(22, 163, 74, 0.18);
    --connected-border: rgba(22, 163, 74, 0.6);
    --connected-text: #14532d;
    --connected-dot: #16a34a;
    --disconnected-bg: rgba(220, 38, 38, 0.10);
    --disconnected-border: rgba(220, 38, 38, 0.5);
    --disconnected-dot: #dc2626;
    --shadow-color: rgba(22, 163, 74, 0.14);
    --log-info: #e2e8f0;
    --log-tx: #6ee7b7;
    --log-rx: #93c5fd;
    --log-error: #fca5a5;
    --log-success: #fde047;
    --log-warning: #fdba74;
    --card-bg-2: #f3faf4;
    --bg-deep:   #e6f3e8;
    --card-grad: linear-gradient(180deg, #ffffff 0%, #f1f8f2 100%);
    --card-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 6px 16px rgba(22,163,74,0.10), 0 1px 3px rgba(22,163,74,0.06);
    --log-bg: #16302a;
    --log-fg: #dcfce7;
}

/* ====================================================================
   THEME 4: NIGHT — refined deep navy. Cards LIFT off the page (lighter
   than the bg, not darker), borders catch a soft cyan rim-light, text
   is bright enough to read on every surface.
   ==================================================================== */
[data-theme="night"] {
    /* Hierarchy (darkest → lightest): bg-color < bg-deep < card-bg < card-bg-2
       Cards should feel like glowing slabs floating on the dark page. */
    --bg-color:  #0a1322;   /* page   — darkest */
    --bg-deep:   #122036;   /* scope/inset bg — slightly lifted */
    --card-bg:   #1b2c47;   /* main card surface — clearly above page */
    --card-bg-2: #213655;   /* nested surface — even brighter */
    --panel-bg:  #1b2c47;
    --card-border: rgba(125, 211, 252, 0.32);   /* visible cyan rim */
    --border:      rgba(125, 211, 252, 0.22);
    /* Accents */
    --accent: #7dd3fc;
    --accent-soft: rgba(125, 211, 252, 0.18);
    --accent-strong: rgba(125, 211, 252, 0.75);
    --accent2: #60a5fa;
    --danger: #fca5a5;
    --muted: #b8c5d9;
    /* Text — bright + high-contrast. Secondary now near-white, not gray. */
    --text: #ffffff;
    --text-secondary: #e2e8f0;
    --pill-bg: #213655;
    --pill-border: rgba(125, 211, 252, 0.4);
    --input-bg: #122036;
    --glow1: rgba(125, 211, 252, 0.18);
    --glow2: rgba(96, 165, 250, 0.12);
    --body-glow1: rgba(125, 211, 252, 0.18);
    --body-glow2: rgba(96, 165, 250, 0.14);
    --btn-primary-bg: linear-gradient(135deg, #7dd3fc, #38bdf8);
    --btn-primary-text: #0a1322;
    --btn-primary-border: rgba(125, 211, 252, 0.8);
    --connected-bg: rgba(34, 197, 94, 0.25);
    --connected-border: rgba(34, 197, 94, 0.8);
    --connected-text: #bbf7d0;
    --connected-dot: #22c55e;
    --disconnected-bg: rgba(239, 68, 68, 0.18);
    --disconnected-border: rgba(239, 68, 68, 0.6);
    --disconnected-dot: #fca5a5;
    --shadow-color: rgba(0, 0, 0, 0.55);
    --log-info: #e2e8f0;
    --log-tx: #6ee7b7;
    --log-rx: #93c5fd;
    --log-error: #fca5a5;
    --log-success: #fde047;
    --log-warning: #fdba74;
    /* Cards: subtle top-light gradient + rim glow + drop shadow.
       Gives every card a 'glowing slab' feel against the dark page. */
    --card-grad: linear-gradient(180deg, #213655 0%, #1b2c47 70%, #182846 100%);
    --card-shadow:
        0 1px 0 rgba(255,255,255,0.10) inset,
        0 0 0 1px rgba(125,211,252,0.10) inset,
        0 8px 24px rgba(0,0,0,0.5),
        0 2px 6px rgba(0,0,0,0.35);
    --log-bg: #050b18;
    --log-fg: #e0f2fe;
}

/* ====================================================================
   THEME 5: COSMOS — deep galaxy navy + electric cyan
   (Re-tuned away from lavender → modest, serious, boy-friendly maker
   audience. Same 🌌 chip, fully different soul.)
   ==================================================================== */
[data-theme="cosmos"] {
    --bg-color:  #0b1730;       /* deep navy night sky */
    --bg-deep:   #0f1f3f;
    --card-bg:   #142848;       /* cards lift off the night */
    --card-bg-2: #1a3258;
    --panel-bg:  #142848;
    --card-border: rgba(56, 189, 248, 0.30);
    --border:      rgba(56, 189, 248, 0.20);
    --accent: #38bdf8;          /* electric cyan, not lavender */
    --accent-soft: rgba(56, 189, 248, 0.16);
    --accent-strong: rgba(56, 189, 248, 0.7);
    --accent2: #818cf8;         /* steel-indigo secondary */
    --danger: #fca5a5;
    --muted: #94a3b8;
    --text: #ffffff;
    --text-secondary: #dbeafe;
    --pill-bg: #1a3258;
    --pill-border: rgba(56, 189, 248, 0.36);
    --input-bg: #0f1f3f;
    --glow1: rgba(56, 189, 248, 0.18);
    --glow2: rgba(129, 140, 248, 0.12);
    --body-glow1: rgba(56, 189, 248, 0.20);
    --body-glow2: rgba(129, 140, 248, 0.14);
    --btn-primary-bg: linear-gradient(135deg, #38bdf8, #0284c7);
    --btn-primary-text: #0b1730;
    --btn-primary-border: rgba(56, 189, 248, 0.8);
    --connected-bg: rgba(34, 197, 94, 0.22);
    --connected-border: rgba(34, 197, 94, 0.7);
    --connected-text: #bbf7d0;
    --connected-dot: #22c55e;
    --disconnected-bg: rgba(252, 165, 165, 0.18);
    --disconnected-border: rgba(252, 165, 165, 0.5);
    --disconnected-dot: #fca5a5;
    --shadow-color: rgba(11, 23, 48, 0.55);
    --log-info: #e2e8f0;
    --log-tx: #6ee7b7;
    --log-rx: #93c5fd;
    --log-error: #fca5a5;
    --log-success: #fde047;
    --log-warning: #fdba74;
    --card-grad: linear-gradient(180deg, #1a3258 0%, #142848 70%, #0f1f3f 100%);
    --card-shadow:
        0 1px 0 rgba(255,255,255,0.10) inset,
        0 0 0 1px rgba(56,189,248,0.12) inset,
        0 8px 24px rgba(11,23,48,0.5),
        0 2px 6px rgba(0,0,0,0.30);
    --log-bg: #061226;
    --log-fg: #dbeafe;
}

/* ====================================================================
   THEME 6: FOREST — deep treehouse green, slightly darker, kid-friendly
   ==================================================================== */
[data-theme="forest"] {
    --bg-color:  #0f2415;
    --bg-deep:   #173324;
    --card-bg:   #1d4030;       /* cards = lit clearing */
    --card-bg-2: #234d3a;
    --panel-bg:  #1d4030;
    --card-border: rgba(134, 239, 172, 0.30);
    --border:      rgba(134, 239, 172, 0.20);
    --accent: #86efac;          /* fresh-leaf green */
    --accent-soft: rgba(134, 239, 172, 0.16);
    --accent-strong: rgba(134, 239, 172, 0.7);
    --accent2: #fbbf24;         /* sunlight through canopy */
    --danger: #fca5a5;
    --muted: #b1c8b8;
    --text: #f0fdf4;
    --text-secondary: #d1fae5;
    --pill-bg: #234d3a;
    --pill-border: rgba(134, 239, 172, 0.36);
    --input-bg: #173324;
    --glow1: rgba(134, 239, 172, 0.16);
    --glow2: rgba(251, 191, 36, 0.10);
    --body-glow1: rgba(134, 239, 172, 0.18);
    --body-glow2: rgba(251, 191, 36, 0.12);
    --btn-primary-bg: linear-gradient(135deg, #86efac, #4ade80);
    --btn-primary-text: #0f2415;
    --btn-primary-border: rgba(134, 239, 172, 0.8);
    --connected-bg: rgba(34, 197, 94, 0.28);
    --connected-border: rgba(34, 197, 94, 0.8);
    --connected-text: #bbf7d0;
    --connected-dot: #22c55e;
    --disconnected-bg: rgba(252, 165, 165, 0.16);
    --disconnected-border: rgba(252, 165, 165, 0.5);
    --disconnected-dot: #fca5a5;
    --shadow-color: rgba(15, 36, 21, 0.55);
    --log-info: #e2e8f0;
    --log-tx: #6ee7b7;
    --log-rx: #93c5fd;
    --log-error: #fca5a5;
    --log-success: #fde047;
    --log-warning: #fdba74;
    --card-grad: linear-gradient(180deg, #234d3a 0%, #1d4030 70%, #173324 100%);
    --card-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 0 0 1px rgba(134,239,172,0.10) inset,
        0 8px 24px rgba(15,36,21,0.5),
        0 2px 6px rgba(0,0,0,0.28);
    --log-bg: #0a1f12;
    --log-fg: #bbf7d0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, var(--body-glow1), transparent 50%),
        radial-gradient(circle at bottom right, var(--body-glow2), transparent 55%),
        var(--bg-color);
    background-attachment: fixed;
    color: var(--text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 16px;
}

.app {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    width: 100%;
    background:
        radial-gradient(circle at top left, var(--glow1), transparent 55%),
        radial-gradient(circle at bottom right, var(--glow2), transparent 60%),
        var(--panel-bg);
    border-radius: 16px;
    box-shadow:
        0 24px 60px var(--shadow-color),
        0 0 0 1px var(--card-border);
    position: relative;
    overflow: hidden;
}

.app::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(130deg, var(--glow1), transparent 60%),
        radial-gradient(circle at 20% 10%, var(--glow2), transparent 50%);
    opacity: 0.5;
    mix-blend-mode: soft-light;
}

.rows-container {
    position: relative;
    z-index: 1;
}

/* Header */

.header {
    padding: 12px 18px 8px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "title robot actions";
    align-items: center;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
.header .title-block   { grid-area: title; }
.header-actions        { grid-area: actions; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
#headerHiddenStash     { display: none !important; }

.title-block h1 {
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
}

.title-block .subtitle {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 2px;
    letter-spacing: 0.08em;
}

/* Status chip */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid var(--accent-strong);
    padding: 4px 10px;
    background:
        radial-gradient(circle at top left, var(--accent-soft), transparent 60%),
        var(--pill-bg);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #bbf7d0;
    box-shadow:
        0 0 0 1px rgba(30,64,175,0.3),
        0 0 16px rgba(34,197,94,0.6);
}

.chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow:
        0 0 0 3px var(--accent-soft),
        0 0 14px var(--accent-strong);
}

/* Layout */

.row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.row:last-child {
    margin-bottom: 0;
}

/* columns flex so cards can stretch */
.col-left,
.col-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Make left + right cards in first row equal height */
.row-top {
    align-items: stretch;
}

/* Generic card */

.card {
    border-radius: 12px;
    border: 1px solid var(--card-border);
    background: var(--card-grad, var(--card-bg));
    box-shadow: var(--card-shadow, 0 4px 12px rgba(0,0,0,0.10));
    padding: 10px 12px 11px 12px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(15,23,42,0.7), transparent 60%);
    mix-blend-mode: soft-light;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 6px;
}

.card-title {
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-title .icon {
    font-size: 1.05rem;
}

.card-subtitle {
    font-size: 0.76rem;
    color: var(--muted);
    margin-top: 3px;
}

/* Status & badges */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1.5px solid var(--disconnected-border);
    color: var(--text);
    background: var(--disconnected-bg);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--disconnected-dot);
    box-shadow:
        0 0 0 2px rgba(248, 113, 113, 0.4),
        0 0 12px rgba(248, 113, 113, 0.6);
}

.status-pill.connected {
    border-color: var(--connected-border);
    background: var(--connected-bg);
    color: var(--connected-text);
}

.status-pill.connected .status-dot {
    background: var(--connected-dot);
    box-shadow:
        0 0 0 2px rgba(34,197,94,0.5),
        0 0 12px rgba(22,163,74,0.8);
}

/* Generic badge */

.badge {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--pill-border);
    color: var(--text-secondary);
    background: var(--pill-bg);
}

.badge strong {
    color: var(--text);
}

/* Connection layout */

.connection-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 10px;
}

@media (max-width: 900px) {
    .connection-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.connection-section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 6px;
}

.button-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 8px;
}

/* Buttons */

button {
    border: none;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pill-bg);
    color: var(--text-secondary);
    border: 1.5px solid var(--pill-border);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    /* Subtle 3D highlight */
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.06) inset,
        0 3px 8px rgba(0,0,0,0.15);
}

button.primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-border);
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.15) inset,
        0 6px 20px var(--accent-soft),
        0 0 0 1px var(--accent-strong);
    animation: btn-glow 2.5s ease-in-out infinite;
}

@keyframes btn-glow {
    0%, 100% { box-shadow: 0 1px 0 0 rgba(255,255,255,0.15) inset, 0 6px 20px var(--accent-soft), 0 0 0 1px var(--accent-strong); }
    50% { box-shadow: 0 1px 0 0 rgba(255,255,255,0.15) inset, 0 8px 28px var(--accent-strong), 0 0 0 2px var(--accent); }
}

button.secondary {
    background: var(--pill-bg);
    border-color: var(--pill-border);
    color: var(--text-secondary);
}

button.small {
    padding: 5px 9px;
    font-size: 0.72rem;
}

button .btn-icon {
    font-size: 1rem;
}

/* Hover: bounce up + glow */
button:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.08) inset,
        0 10px 25px rgba(0,0,0,0.25),
        0 0 0 1px var(--accent-soft);
    filter: brightness(1.08);
}

/* Click: press down */
button:active:not(:disabled) {
    transform: translateY(0px) scale(0.97);
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.04) inset,
        0 2px 6px rgba(0,0,0,0.2);
    transition-duration: 0.08s;
}

/* Ripple effect */
button::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), var(--accent) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

button:active::after {
    opacity: 0.15;
    transition-duration: 0.05s;
}

button:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
    transform: none;
    filter: none;
}

/* Hint text */

.hint {
    font-size: 0.74rem;
    color: var(--muted);
    margin-top: 3px;
}
.hint-title {
    font-weight: 500;
    margin-bottom: 2px;
}
.hint ol {
    margin: 0;
    padding-left: 16px;
}
.hint li {
    margin-bottom: 2px;
}

/* Mode pills */

.pill-group {
    display: inline-flex;
    gap: 6px;
    margin: 4px 0 8px;
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--pill-bg);
    border: 1px solid var(--pill-border);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
}
.pill.big {
    padding: 5px 12px;
    font-size: 0.78rem;
}
.pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--muted);
    transition: all 0.25s ease;
}
.pill.active {
    background: var(--connected-bg);
    border-color: var(--accent);
    color: var(--connected-text);
    box-shadow:
        0 0 0 1px var(--accent-strong),
        0 0 16px var(--accent-soft);
}
.pill.active .pill-dot {
    background: var(--accent);
    box-shadow:
        0 0 0 2px var(--accent-soft),
        0 0 10px var(--accent-strong);
}

/* Device row */

.device-row {
    font-size: 0.74rem;
    color: var(--muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.device-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.device-value {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Message log */

.log-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.log-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}
.log {
    flex: 1 1 auto;
    padding: 8px 10px;
    overflow-y: auto;
    min-height: 0;
    max-height: 260px; /* scrollbar appears when content taller than this */
    font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.78rem;
    line-height: 1.25;
    border-radius: 10px;
    border: 1px solid rgba(31,41,55,0.95);
    background: rgba(15,23,42,0.98);
}
.log-line {
    margin-bottom: 2px;
    white-space: pre-wrap;
    word-break: break-word;
}
.log-line.info    { color: var(--muted); }
.log-line.success { color: #bbf7d0; }
.log-line.error   { color: #f97373; }
.log-line.tx      { color: #a5b4fc; }
.log-line.rx      { color: #7dd3fc; }

/* Fix: JS creates elements with class="log-info", "log-tx", etc. */
.log-info    { color: var(--log-info); }
.log-success { color: var(--log-success); font-weight: 500; }
.log-error   { color: var(--log-error); font-weight: 600; }
.log-tx      { color: var(--log-tx); }
.log-rx      { color: var(--log-rx); }
.log-warning { color: var(--log-warning); }

.log-footer {
    padding-top: 5px;
    font-size: 0.7rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Mode selector (tabs) */

.mode-selector-container {
    padding: 6px 18px 0;
}
.mode-selector {
    display: flex;
    background: var(--input-bg);
    border-radius: 999px;
    border: 1px solid var(--pill-border);
    padding: 4px;
    margin-bottom: 8px;
}
.mode-btn {
    flex: 1;
    text-align: center;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 999px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.mode-btn .mode-icon {
    font-size: 1.1rem;
}
.mode-btn.active {
    background: var(--connected-bg);
    color: var(--connected-text);
    box-shadow:
        0 0 0 1px var(--accent-strong),
        0 0 18px var(--accent-soft);
}

/* Tab pages */

.tab-pages {
    padding: 0 18px 16px;
}
.tab-page { display: none; }
.tab-page.active { display: block; }

.controls-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Control sections */

.control-section {
    border-radius: 10px;
    border: 1px solid rgba(31,41,55,0.9);
    padding: 8px 10px;
    background: rgba(15,23,42,0.95);
}
.section-header { margin-bottom: 6px; }
.section-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.section-icon { font-size: 1rem; }
.section-subtitle {
    font-size: 0.74rem;
    color: var(--muted);
    margin-top: 2px;
}
.form-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* Inputs */

input[type="text"],
textarea {
    border-radius: 999px;
    border: 1px solid var(--card-border);
    background: var(--input-bg);
    color: var(--text);
    padding: 6px 10px;
    font-size: 0.8rem;
    font-family: inherit;
    flex: 1;
}
textarea {
    border-radius: 8px;
    min-height: 80px;
    resize: vertical;
}
input::placeholder,
textarea::placeholder {
    color: var(--muted);
}
input:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--accent-strong);
    box-shadow:
        0 0 0 1px var(--accent-strong),
        0 0 14px var(--accent-soft);
}

/* LED matrix */

.microbit-matrix-wrapper {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
.microbit-outline {
    border-radius: 14px;
    border: 1px solid rgba(31,41,55,0.95);
    padding: 8px 10px 10px;
    background:
        radial-gradient(circle at top left, rgba(30,64,175,0.2), transparent 60%),
        rgba(15,23,42,1);
}
.microbit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}
.microbit-chip {
    width: 34px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #020617, #111827);
    border: 1px solid rgba(148,163,184,0.5);
}
.microbit-ears {
    display: flex;
    gap: 4px;
}
.microbit-ear {
    width: 6px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(145deg, #4b5563, #9ca3af);
    border: 1px solid rgba(209,213,219,0.9);
}
.led-matrix {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: radial-gradient(circle at top left, #020617, #020617);
}
.led-cell {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(31,41,55,1);
    background: radial-gradient(circle at 30% 30%, #020617, #020617);
    box-shadow:
        0 2px 4px rgba(15,23,42,0.9),
        inset 0 0 0 1px rgba(15,23,42,1);
    cursor: pointer;
    transition: all 0.12s ease;
}
.led-cell.on {
    background: radial-gradient(circle at 30% 30%, #fef9c3, #facc15);
    border-color: rgba(250,204,21,1);
    box-shadow:
        0 0 8px rgba(250,204,21,0.9),
        0 0 16px rgba(250,204,21,0.8),
        0 2px 6px rgba(15,23,42,0.9);
}
.drawing-mode-hint {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 4px;
}
.matrix-controls { flex: 1; min-width: 0; }

/* Chip buttons */

.chip-btn {
    border-radius: 999px;
    border: 1px solid var(--pill-border);
    background: var(--pill-bg);
    color: var(--text-secondary);
    padding: 5px 10px;
    font-size: 0.74rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.chip-btn:hover {
    background:
        radial-gradient(circle at top left, rgba(34,197,94,0.3), rgba(15,23,42,0.95));
    border-color: rgba(34,197,94,0.9);
}

/* --- SENSES GRID IMPROVED LAYOUT --- */

/* Full-width responsive grid */
.sensor-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    width: 100%;
    margin-top: 10px;
}

/* Each sensor block = container for value + chart */
.sensor-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(15,23,42,0.94);
    border: 1px solid rgba(31,41,55,0.85);
    border-radius: 10px;
    padding: 10px;
}

/* Sensor card */
.sensor-card {
    border-radius: 8px;
    border: 1px solid rgba(51,65,85,0.7);
    padding: 6px 8px;
    background:
        radial-gradient(circle at top left, rgba(30,64,175,0.2), transparent 60%),
        rgba(15,23,42,0.98);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sensor-label {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
}
.sensor-value {
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.sensor-unit {
    font-size: 0.7rem;
    color: var(--muted);
}
.sensor-hint {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 2px;
}

/* Charts */

.chart-container {
    border-radius: 8px;
    border: 1px solid rgba(31,41,55,0.95);
    padding: 6px 8px;
    background: rgba(15,23,42,0.98);
}

.chart-container.small {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-container.small canvas {
    width: 100% !important;
    height: 100% !important;
}

.chart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.chart-placeholder-text {
    font-size: 0.75rem;
    color: var(--muted);
}

/* Beginner / expert visibility */

.beginner-only {
    display: block;
}
.app.beginner-mode .expert-only {
    display: none !important;
}
.app:not(.beginner-mode) .beginner-only {
    display: none !important;
}

/* Responsive tweaks */

@media (max-width: 700px) {
    body {
        padding: 8px;
    }
    .app {
        border-radius: 12px;
    }
    .header {
        padding: 10px 12px 8px;
        grid-template-columns: 1fr auto;
        grid-template-areas: "title actions" "robot robot";
    }
    #mqHeaderRobot { justify-content: flex-start; }
    .tab-pages {
        padding: 0 12px 12px;
    }
}
/* ================================
   Kid-friendly visual upgrade 💫
   (CSS-only: no HTML/JS changes)
   ================================ */

/* Fun animations */
@keyframes float-soft {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

@keyframes pulse-soft {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}


@keyframes twinkle {
    0%, 100% { opacity: 0; transform: translateY(-1px) scale(0.9); }
    40%      { opacity: 1; transform: translateY(0) scale(1); }
    60%      { opacity: 0; transform: translateY(-2px) scale(0.8); }
}

/* Title: more colorful + “logo” feeling */
.title-block h1 {
    font-size: 1.35rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: linear-gradient(120deg, #f97316, #22c55e, #38bdf8);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 18px rgba(56,189,248,0.4);
    animation: float-soft 4s ease-in-out infinite;
}

.title-block .subtitle {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* Status chip: floaty + twinkling sparkles */
.chip {
    position: relative;
    animation: float-soft 5s ease-in-out infinite;
}

.chip::after {
    content: "✨";
    position: absolute;
    right: -4px;
    top: -6px;
    font-size: 0.8rem;
    opacity: 0;
    animation: twinkle 2.8s ease-in-out infinite;
}



/* Mode tabs: game-style active state */
.mode-btn {
    font-size: 0.8rem;
    position: relative;
}

/* Active tab: glowing underline + lift */
.mode-btn.active {
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        0 0 0 1px var(--accent-strong),
        0 0 18px var(--accent-soft);
}

/* Glowing underline on active tab */
.mode-btn.active::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 20%;
    right: 20%;
    height: 3px;
    border-radius: 3px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-strong), 0 0 20px var(--accent-soft);
    animation: tab-underline-glow 1.8s ease-in-out infinite;
}

@keyframes tab-underline-glow {
    0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--accent-strong), 0 0 20px var(--accent-soft); }
    50% { opacity: 0.7; box-shadow: 0 0 6px var(--accent-soft); }
}

/* Inactive tabs: subtle transparency, pop on hover */
.mode-btn:not(.active) {
    opacity: 0.75;
}

.mode-btn:not(.active):hover {
    opacity: 1;
    transform: translateY(-2px) scale(1.03);
}

/* Cards: slightly brighter and more “card game” feel */
.card {
    border-radius: 14px;
}

.card:hover {
    border-color: rgba(148,163,184,0.8);
    box-shadow:
        0 10px 30px rgba(15,23,42,0.9),
        0 0 18px rgba(34,197,94,0.25);
    transform: translateY(-1px);
    transition: all 0.18s ease;
}

/* Sensor cards: more colorful and fun */
.sensor-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.sensor-card::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at top left, rgba(34,197,94,0.18), transparent 60%),
        radial-gradient(circle at bottom right, rgba(59,130,246,0.18), transparent 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.sensor-card:hover {
    transform: translateY(-1px);
    border-color: rgba(96,165,250,0.9);
    box-shadow: 0 8px 20px rgba(15,23,42,0.9);
}

.sensor-card:hover::before {
    opacity: 1;
}

.sensor-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.sensor-hint {
    font-size: 0.76rem;
    color: #a5b4fc;
}


/* Small tweak to make the whole app feel softer */
.app {
    border-radius: 18px;
}
/* (SUPER FUNNY MODE removed — was unscoped, broke all button/card colors with !important) */
/* ======================
   GamePad Button Styling
   ====================== */

.gp-btn {
    width: 110px;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 12px !important;
    padding: 8px 0;
}

/* Glow effect while keeping edges clean */
.gp-btn {
    box-shadow:
        0 0 10px rgba(34, 197, 94, 0.4),
        0 0 20px rgba(34, 197, 94, 0.2);
}

.gp-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}
/* ===========================
   GAMEPAD D-PAD LAYOUT
   =========================== */

.dpad-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.dpad-middle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* Center circle (non-interactive) */
.dpad-center {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(148,163,184,0.5);
    box-shadow:
        0 0 10px rgba(148,163,184,0.2),
        inset 0 0 6px rgba(148,163,184,0.3);
}

/* Buttons */
.dpad-btn {
    width: 60px;
    height: 48px;
    font-size: 1.25rem;
    text-align: center;
    justify-content: center;
    border-radius: 12px !important;
    font-weight: 700;
}

/* Fire button */
.fire-btn {
    margin-top: 4px;
    width: 110px;
    font-size: 1rem;
    padding: 10px 0;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #f87171, #fb923c) !important;
    color: #111 !important;
    box-shadow:
        0 0 10px rgba(252, 165, 165, 0.4),
        0 0 20px rgba(251, 146, 60, 0.4);
}

.fire-btn:hover {
    transform: scale(1.07);
}

/* Hover animations for D-Pad arrows */
.dpad-btn:hover {
    transform: scale(1.12);
    filter: brightness(1.1);
}
/* ==========================
   LED Drawing Board – groups
   ========================== */

.matrix-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.matrix-group {
    flex: 1 1 160px;
    border-radius: 10px;
    border: 1px solid rgba(31,41,55,0.8);
    background: rgba(15,23,42,0.9);
    padding: 6px 8px;
}

.matrix-group-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 4px;
}

.button-row.compact {
    gap: 6px;
    flex-wrap: wrap;
}

.button-row.compact .chip-btn.small {
    padding-inline: 8px;
    font-size: 0.72rem;
}

.title-block {
    display: flex;
    align-items: center; /* vertically center logo and text */
    gap: 12px;           /* space between logo and text */
}

.site-logo {
    width: 80px;   /* adjust size */
    height: auto;
	color: #ffffff; /* logo will take this color */
}

.animated-logo {
  width: 80px;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.animated-logo:hover {
  transform: rotate(15deg) scale(1.1);
  filter: drop-shadow(0 0 6px #ff6600);
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.animated-logo {
  width: 80px;
  animation: pulse 2s infinite;
}

/* Kids Mode Theme */
.app.kids-mode {
  --bg-color: #fff7ed;        /* soft cream background */
  --panel-bg: #fde68a;        /* pastel yellow panels */
  --accent: #fb923c;          /* cheerful orange */
  --accent-soft: rgba(251, 146, 60, 0.25);
  --accent-strong: rgba(251, 146, 60, 0.7);
  --danger: #f87171;          /* friendly red */
  --muted: #6b7280;           /* softer gray */
  --border: #fcd34d;          /* golden border */
  color: #3f3f46;             /* softer text color */
}

.app.kids-mode h1,
.app.kids-mode .card-title {
  color: #fb923c; /* warm orange titles */
}

.app.kids-mode button.primary {
  background: linear-gradient(135deg, #f97316, #facc15);
  color: #fff;
  border-color: #fb923c;
  box-shadow: 0 6px 18px rgba(251, 146, 60, 0.4);
}

/* Kids Mode – playful animations */
.app.kids-mode {
  animation: backgroundShift 12s infinite alternate ease-in-out;
}

/* Background gently shifts colors */
@keyframes backgroundShift {
  0%   { background-color: #fff7ed; }
  25%  { background-color: #fde68a; }
  50%  { background-color: #fbcfe8; }
  75%  { background-color: #93c5fd; }
  100% { background-color: #86efac; }
}

/* Buttons bounce like bubbles */
.app.kids-mode button {
  animation: bubbleBounce 3s infinite ease-in-out;
}

@keyframes bubbleBounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12) rotate(2deg); }
}

/* Titles green glow pulse */
.app.kids-mode h1 {
  animation: greenGlowPulse 3s infinite ease-in-out;
}

@keyframes greenGlowPulse {
  0%   { color: #22c55e; text-shadow: 0 0 8px rgba(34, 197, 94, 0.4); }
  50%  { color: #4ade80; text-shadow: 0 0 16px rgba(74, 222, 128, 0.6); }
  100% { color: #22c55e; text-shadow: 0 0 8px rgba(34, 197, 94, 0.4); }
}

/* Chips sparkle */
.app.kids-mode .chip::after {
  content: "✨";
  position: absolute;
  right: -8px;
  top: -8px;
  font-size: 1rem;
  animation: sparklePop 2.5s infinite ease-in-out;
}

@keyframes sparklePop {
  0%   { opacity: 0; transform: scale(0.6) rotate(0deg); }
  50%  { opacity: 1; transform: scale(1.2) rotate(20deg); }
  100% { opacity: 0; transform: scale(0.6) rotate(0deg); }
}

/* LED cells wiggle when on */
.app.kids-mode .led-cell.on {
  animation: candyGlow 1.5s infinite alternate ease-in-out;
}

@keyframes candyGlow {
  0%   { transform: scale(1); box-shadow: 0 0 8px #facc15; }
  100% { transform: scale(1.15); box-shadow: 0 0 16px #f97316; }
}

/* Bench tab custom style */
.tab-page[data-page="bench"] .card-title {
    color: #facc15; /* golden accent */
}

.tab-page[data-page="bench"] .section-title {
    color: #f97316; /* orange highlight */
}

.bench-response {
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid rgba(31,41,55,0.9);
  background: rgba(15,23,42,0.95);
  padding: 6px 10px;
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* =========================
   OTHERS TAB – compact grid
   ========================= */

.tab-page[data-page="others"] .tool-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Style the <details> containers */
.tab-page[data-page="others"] .tool-group {
    border-radius: 10px;
    border: 1px solid rgba(31,41,55,0.8);
    background: rgba(15,23,42,0.95);
    padding: 4px 6px 8px;
}

/* Make the summary look like a header row */
.tab-page[data-page="others"] .tool-group > summary {
    list-style: none;
    cursor: pointer;
    padding: 4px 2px 4px;
}

/* Hide default triangle */
.tab-page[data-page="others"] .tool-group > summary::-webkit-details-marker {
    display: none;
}

/* Add our own small indicator */
.tab-page[data-page="others"] .tool-group > summary::before {
    content: "▸";
    margin-right: 6px;
    font-size: 0.7rem;
    color: var(--muted);
}
.tab-page[data-page="others"] .tool-group[open] > summary::before {
    content: "▾";
}

/* Turn controls-grid into a horizontal mini-card grid */
.tab-page[data-page="others"] .controls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

/* Make each tool more compact */
.tab-page[data-page="others"] .control-section {
    padding: 6px 7px;
}

.tab-page[data-page="others"] .section-header {
    margin-bottom: 4px;
}

.tab-page[data-page="others"] .section-title {
    font-size: 0.74rem;
}

/* Slightly smaller form-row spacing in Others tab */
.tab-page[data-page="others"] .form-row {
    gap: 6px;
    margin-top: 3px;
}
/* ============================================
   OTHERS TAB — strict 1–2 items per row layout
   ============================================ */

.tab-page[data-page="others"] .controls-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 per row */
    gap: 8px;
}

/* On narrow screens → only 1 per row */
@media (max-width: 600px) {
    .tab-page[data-page="others"] .controls-grid {
        grid-template-columns: 1fr; /* 1 per row */
    }
}

/* Make cards compact */
.tab-page[data-page="others"] .control-section {
    padding: 8px 10px;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* ====================================
   STRONGER CARD SEPARATION (bold look)
   ==================================== */

.tab-page[data-page="others"] .control-section {
    background: rgba(255,255,255,0.08); /* brighter block */
    border: 1.5px solid rgba(255,255,255,0.25); /* stronger border */
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.7);
}

.tab-page[data-page="others"] .control-section:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.35);
    transform: translateY(-1px);
    transition: 0.15s ease;
}
/* ===========================================
   COLORED BORDER PER CATEGORY (clean + clear)
   =========================================== */

/* BASIC CONTROLS */
.tool-group:nth-child(1) .control-section {
    border-left: 4px solid #3b82f6; /* blue */
}

/* INDICATORS & OUTPUTS */
.tool-group:nth-child(2) .control-section {
    border-left: 4px solid #14b8a6; /* teal */
}

/* AUDIO, TIME & RANDOM */
.tool-group:nth-child(3) .control-section {
    border-left: 4px solid #f59e0b; /* amber */
}

/* ADVANCED CONTROLS */
.tool-group:nth-child(4) .control-section {
    border-left: 4px solid #f59e0b; /* amber/orange */
}

/* SIMULATORS & HARDWARE */
.tool-group:nth-child(5) .control-section {
    border-left: 4px solid #0ea5e9; /* sky blue */
}
/* ============================================
   BIG / STYLED expand arrows for <details>
   ============================================ */

/* Make summary area larger + easier to click */
.tool-group > summary {
    padding: 10px 4px;              /* larger tap zone */
    font-size: 1rem;                /* slightly bigger text */
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Remove default marker */
.tool-group > summary::-webkit-details-marker {
    display: none;
}

/* Big arrow icon */
.tool-group > summary::before {
    content: "▸";                   /* closed arrow */
    font-size: 24px;                /* MUCH bigger arrow */
    font-weight: bold;
    margin-right: 10px;
    transition: transform 0.2s ease;
}

/* =============================
   Neon arrow color per category
   ============================= */

/* BASIC CONTROLS — neon blue */
.tool-group:nth-child(1) > summary::before {
    color: #00e5ff;
    text-shadow: 0 0 6px #00e5ff;
}

/* OUTPUTS — neon aqua */
.tool-group:nth-child(2) > summary::before {
    color: #00ffc8;
    text-shadow: 0 0 6px #00ffc8;
}

/* AUDIO/TIME — neon purple */
.tool-group:nth-child(3) > summary::before {
    color: #c77dff;
    text-shadow: 0 0 6px #c77dff;
}

/* ADVANCED — neon orange */
.tool-group:nth-child(4) > summary::before {
    color: #ff9d00;
    text-shadow: 0 0 6px #ff9d00;
}

/* SIMULATORS — neon cyan */
.tool-group:nth-child(5) > summary::before {
    color: #0ea5e9;
    text-shadow: 0 0 6px #0ea5e9;
}
/* ==============================================
   NEON CIRCULAR EXPAND ICONS FOR <details> 
   ============================================== */

/* Bigger summary area */
.tool-group > summary {
    padding: 10px 6px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

/* Remove default triangle */
.tool-group > summary::-webkit-details-marker {
    display: none;
}

/* Create the circle */
.tool-group > summary::before {
    content: ""; /* content updated per category below */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: black;  /* arrow color */
    background: #fff; /* temporary, replaced below */
    box-shadow: 0 0 10px currentColor;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Rotate arrow when opened */
.tool-group[open] > summary::before {
    transform: rotate(90deg);
}

/* =============================
   Neon circle per category
   ============================= */

/* BASIC CONTROLS — Neon Blue */
.tool-group:nth-child(1) > summary::before {
    content: "▶";
    background: #00e5ff;
    color: #00151a;
    box-shadow: 0 0 12px #00e5ff, 0 0 22px #00e5ff80;
}

/* OUTPUTS — Neon Aqua */
.tool-group:nth-child(2) > summary::before {
    content: "▶";
    background: #00ffc8;
    color: #002018;
    box-shadow: 0 0 12px #00ffc8, 0 0 22px #00ffc880;
}

/* AUDIO/TIME — Neon Purple */
.tool-group:nth-child(3) > summary::before {
    content: "▶";
    background: #c77dff;
    color: #1a0030;
    box-shadow: 0 0 12px #c77dff, 0 0 22px #c77dff80;
}

/* ADVANCED — Neon Orange */
.tool-group:nth-child(4) > summary::before {
    content: "▶";
    background: #ff9d00;
    color: #301a00;
    box-shadow: 0 0 12px #ff9d00, 0 0 22px #ff9d0080;
}

/* SIMULATORS — Neon Cyan */
.tool-group:nth-child(5) > summary::before {
    content: "▶";
    background: #0ea5e9;
    color: #082f49;
    box-shadow: 0 0 12px #0ea5e9, 0 0 22px #0ea5e980;
}

/* ============================================================
   BEGINNER MODE - Kid-friendly simplifications
   ============================================================ */

/* Hide expert-only elements in beginner mode */
.app.beginner-mode .expert-only {
    display: none !important;
}

/* Show beginner-show elements only in beginner mode */
.beginner-show {
    display: none;
}
.app.beginner-mode .beginner-show {
    display: block;
}
.app.beginner-mode .button-row.compact.beginner-show {
    display: flex;
}

/* Activity feed styles (simplified log for kids) */
.activity-card {
    display: none;
}
.app.beginner-mode .activity-card {
    display: flex;
    flex-direction: column;
}

.activity-feed {
    min-height: 150px;
    max-height: 250px;
    overflow-y: auto;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font-size: 0.9rem;
}

.activity-item {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 8px;
    border-left: 3px solid var(--accent);
    animation: slideIn 0.2s ease-out;
}

.activity-item.sent {
    background: rgba(59, 130, 246, 0.1);
    border-left-color: #3b82f6;
}

.activity-item.received {
    background: rgba(34, 197, 94, 0.1);
    border-left-color: #22c55e;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Hide log card in beginner mode */
.app.beginner-mode .log-card {
    display: none;
}

/* Larger touch targets for kids */
.app.beginner-mode .chip-btn {
    min-height: 44px;
    font-size: 1rem;
}

.app.beginner-mode .primary {
    min-height: 44px;
}

/* Make sensor cards more prominent for kids */
.app.beginner-mode .sensor-card.big {
    padding: 16px;
}

.app.beginner-mode .sensor-value {
    font-size: 2.5rem;
}


/* ============================================================
   🎨 FUN & PLAYFUL STYLES - Making widgets exciting! 🎮
   ============================================================ */

/* === STYLED SLIDERS === */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 14px;
    border-radius: 20px;
    background: linear-gradient(90deg,
        #0ea5e9 0%,
        #06b6d4 25%,
        #22c55e 50%,
        #f59e0b 75%,
        #0284c7 100%);
    outline: none;
    cursor: pointer;
    box-shadow: 
        0 4px 15px rgba(0,0,0,0.3),
        inset 0 2px 4px rgba(255,255,255,0.2),
        inset 0 -2px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

input[type="range"]:hover {
    transform: scaleY(1.2);
    box-shadow: 
        0 6px 20px rgba(0,0,0,0.4),
        0 0 20px rgba(107, 203, 119, 0.3);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff 0%, #f0f0f0 100%);
    cursor: grab;
    border: 4px solid #fff;
    box-shadow: 
        0 4px 15px rgba(0,0,0,0.4),
        0 0 0 4px rgba(255,255,255,0.3),
        inset 0 2px 5px rgba(255,255,255,1);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    cursor: grabbing;
    box-shadow: 
        0 6px 25px rgba(0,0,0,0.5),
        0 0 0 6px rgba(34, 197, 94, 0.4),
        0 0 30px rgba(34, 197, 94, 0.3);
}

input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.1);
    background: linear-gradient(145deg, #22c55e, #16a34a);
}

input[type="range"]::-moz-range-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff, #f0f0f0);
    cursor: grab;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

/* Servo sliders - cool blue wave */
#servo1Angle, #servo2Angle {
    background: linear-gradient(90deg, 
        #667eea 0%, 
        #64b5f6 25%,
        #4dd0e1 50%, 
        #64b5f6 75%,
        #667eea 100%);
    animation: wave-shift 3s ease-in-out infinite;
}

@keyframes wave-shift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(20deg); }
}

/* Buzzer slider - sound waves */
#buzzFreq {
    background: linear-gradient(90deg, 
        #5c6bc0 0%, 
        #7e57c2 25%, 
        #ab47bc 50%, 
        #ec407a 75%, 
        #ef5350 100%);
}

/* Other slider - blue-green gradient */
#otherSlider {
    background: linear-gradient(90deg,
        #0ea5e9 0%,
        #06b6d4 25%,
        #14b8a6 50%,
        #22c55e 75%,
        #3b82f6 100%);
}

/* === ⚙️ PLAYFUL SERVO GAUGES === */
.servo-gauge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: linear-gradient(180deg, 
        rgba(0,0,0,0.4) 0%, 
        rgba(0,0,0,0.1) 100%);
    border-radius: 20px;
    margin-bottom: 15px;
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: 
        0 8px 32px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.servo-gauge svg {
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

.servo-gauge svg line {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.5));
}

.gauge-value {
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, #a0a0a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 10px;
    letter-spacing: 1px;
}

/* === 📊 SENSOR CARDS === */
.sensor-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sensor-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.sensor-card.big {
    background: linear-gradient(145deg, 
        rgba(30, 41, 59, 0.9) 0%, 
        rgba(15, 23, 42, 0.9) 100%);
    border: 2px solid rgba(255,255,255,0.1);
}

.sensor-value {
    font-size: 2.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    transition: transform 0.2s ease;
}

.sensor-card:hover .sensor-value {
    transform: scale(1.05);
}

.sensor-label {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.sensor-hint {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 8px;
}

/* === 🔘 BOUNCY BUTTONS === */
.chip-btn, .primary, .secondary {
    position: relative;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chip-btn::after, .primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.chip-btn:active::after, .primary:active::after {
    width: 200px;
    height: 200px;
}

.chip-btn:hover, .primary:hover, .secondary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.chip-btn:active, .primary:active, .secondary:active {
    transform: translateY(1px) scale(0.98);
}

.primary {
    background: linear-gradient(145deg, #22c55e, #16a34a);
    border: none;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

.primary:hover {
    background: linear-gradient(145deg, #4ade80, #22c55e);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.5);
}

.secondary {
    background: linear-gradient(145deg, #475569, #334155);
    border: 2px solid rgba(255,255,255,0.1);
}

.secondary:hover {
    background: linear-gradient(145deg, #64748b, #475569);
}

/* === 🎮 GAMEPAD D-PAD === */
.dpad-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border-radius: 20px;
    border: 3px solid rgba(255,255,255,0.1);
    box-shadow: 
        0 10px 40px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.dpad-btn {
    width: 70px !important;
    height: 70px !important;
    font-size: 2rem !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #3b82f6, #1d4ed8) !important;
    border: 3px solid rgba(255,255,255,0.2) !important;
    box-shadow: 
        0 6px 20px rgba(59, 130, 246, 0.4),
        inset 0 2px 4px rgba(255,255,255,0.2) !important;
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.dpad-btn:hover {
    background: linear-gradient(145deg, #60a5fa, #3b82f6) !important;
    transform: scale(1.15) !important;
    box-shadow: 
        0 8px 30px rgba(59, 130, 246, 0.6),
        0 0 40px rgba(59, 130, 246, 0.4) !important;
}

.dpad-btn:active {
    transform: scale(0.95) !important;
    box-shadow: 
        0 2px 10px rgba(59, 130, 246, 0.4),
        inset 0 4px 8px rgba(0,0,0,0.3) !important;
}

.dpad-center {
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, #374151, #1f2937);
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.1);
    box-shadow: inset 0 4px 10px rgba(0,0,0,0.5);
}

.fire-btn {
    width: 120px !important;
    height: 60px !important;
    margin-top: 15px !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    background: linear-gradient(145deg, #ef4444, #b91c1c) !important;
    border-radius: 30px !important;
    animation: fire-pulse 1.5s infinite !important;
}

.fire-btn:hover {
    background: linear-gradient(145deg, #f87171, #ef4444) !important;
    box-shadow: 
        0 8px 30px rgba(239, 68, 68, 0.6),
        0 0 50px rgba(239, 68, 68, 0.4) !important;
    animation: none !important;
    transform: scale(1.1) !important;
}

@keyframes fire-pulse {
    0%, 100% { 
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    }
    50% { 
        box-shadow: 0 4px 25px rgba(239, 68, 68, 0.7),
                    0 0 40px rgba(239, 68, 68, 0.3);
    }
}

/* === 🎵 FUN BUZZER BUTTONS === */
#buzzLow, #buzzMid, #buzzHigh, #buzzMelody {
    min-width: 100px;
    padding: 12px 16px;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#buzzLow {
    background: linear-gradient(145deg, #86efac, #4ade80) !important;
    color: #14532d !important;
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.4);
}

#buzzLow:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.6);
}

#buzzMid {
    background: linear-gradient(145deg, #fde047, #facc15) !important;
    color: #713f12 !important;
    box-shadow: 0 4px 15px rgba(250, 204, 21, 0.4);
}

#buzzMid:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(250, 204, 21, 0.6);
}

#buzzHigh {
    background: linear-gradient(145deg, #fca5a5, #f87171) !important;
    color: #7f1d1d !important;
    box-shadow: 0 4px 15px rgba(248, 113, 113, 0.4);
}

#buzzHigh:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(248, 113, 113, 0.6);
}

#buzzMelody {
    background: linear-gradient(145deg, #c4b5fd, #a78bfa) !important;
    color: #4c1d95 !important;
    box-shadow: 0 4px 15px rgba(167, 139, 250, 0.4);
    animation: melody-glow 2s ease-in-out infinite;
}

#buzzMelody:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(167, 139, 250, 0.6);
    animation: none;
}

@keyframes melody-glow {
    0%, 100% { filter: hue-rotate(0deg) brightness(1); }
    50% { filter: hue-rotate(30deg) brightness(1.1); }
}

/* === 🔢 STYLED KEYPAD === */
.other-keypad-btn {
    width: 60px !important;
    height: 60px !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    border-radius: 15px !important;
    border: none !important;
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.other-keypad-btn:hover {
    transform: scale(1.2) rotate(5deg) !important;
}

.other-keypad-btn:active {
    transform: scale(0.9) !important;
}

/* Keypad colors */
.other-keypad-btn[data-key="1"] {
    background: linear-gradient(145deg, #ef4444, #dc2626) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(238, 90, 90, 0.4);
}
.other-keypad-btn[data-key="2"] {
    background: linear-gradient(145deg, #ffd93d, #f9c74f) !important;
    color: #5c4d00 !important;
    box-shadow: 0 4px 15px rgba(249, 199, 79, 0.4);
}
.other-keypad-btn[data-key="3"] {
    background: linear-gradient(145deg, #6bcb77, #4ade80) !important;
    color: #14532d !important;
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.4);
}
.other-keypad-btn[data-key="4"] {
    background: linear-gradient(145deg, #4d96ff, #3b82f6) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}
.other-keypad-btn[data-key="5"] {
    background: linear-gradient(145deg, #0ea5e9, #0284c7) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}
.other-keypad-btn[data-key="6"] {
    background: linear-gradient(145deg, #06b6d4, #0891b2) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
}
.other-keypad-btn[data-key="7"] {
    background: linear-gradient(145deg, #22d3ee, #06b6d4) !important;
    color: #083344 !important;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
}
.other-keypad-btn[data-key="8"] {
    background: linear-gradient(145deg, #fb923c, #f97316) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}
.other-keypad-btn[data-key="9"] {
    background: linear-gradient(145deg, #a3e635, #84cc16) !important;
    color: #365314 !important;
    box-shadow: 0 4px 15px rgba(132, 204, 22, 0.4);
}

/* === ⏻ FUN SWITCH TOGGLE === */
#otherSwitch {
    width: 60px;
    height: 32px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(145deg, #374151, #1f2937);
    border-radius: 16px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        inset 0 4px 10px rgba(0,0,0,0.4),
        0 2px 5px rgba(0,0,0,0.2);
}

#otherSwitch::before {
    content: '❌';
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    background: linear-gradient(145deg, #fff, #e5e7eb);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#otherSwitch:checked {
    background: linear-gradient(145deg, #22c55e, #16a34a);
    box-shadow: 
        inset 0 4px 10px rgba(0,0,0,0.2),
        0 0 20px rgba(34, 197, 94, 0.4);
}

#otherSwitch:checked::before {
    content: '✅';
    transform: translateX(28px);
    background: linear-gradient(145deg, #fff, #dcfce7);
}

/* === 🔘 FUN OTHER BUTTON === */
#otherButton {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 16px 24px;
    background: linear-gradient(145deg, #0ea5e9, #0369a1);
    border: none;
    border-radius: 16px;
    box-shadow:
        0 6px 20px rgba(3, 105, 161, 0.4),
        inset 0 2px 4px rgba(255,255,255,0.2);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#otherButton:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 10px 30px rgba(3, 105, 161, 0.5),
        0 0 40px rgba(14, 165, 233, 0.3);
}

#otherButton:active {
    transform: translateY(2px) scale(0.98);
}

/* === 📡 CONNECTION STATUS GLOW === */
#connectionStatus {
    transition: all 0.3s ease;
}

#connectionStatus.connected {
    animation: connected-pulse 2s ease-in-out infinite;
    background: rgba(34, 197, 94, 0.2);
}

@keyframes connected-pulse {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
    }
    50% { 
        box-shadow: 0 0 25px rgba(34, 197, 94, 0.6),
                    0 0 40px rgba(34, 197, 94, 0.2);
    }
}

/* === ⚡ ACTIVITY FEED === */
.activity-feed {
    background: linear-gradient(180deg, 
        rgba(0,0,0,0.4) 0%, 
        rgba(0,0,0,0.2) 100%);
    border: 2px solid rgba(255,255,255,0.1);
}

.activity-item {
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-weight: 500;
    animation: activity-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes activity-pop {
    from {
        opacity: 0;
        transform: translateX(-20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.activity-item.sent {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.2) 0%, 
        rgba(59, 130, 246, 0.05) 100%);
    border-left: 4px solid #3b82f6;
}

.activity-item.received {
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.2) 0%, 
        rgba(34, 197, 94, 0.05) 100%);
    border-left: 4px solid #22c55e;
}

/* === 🎨 LED MATRIX FUN === */
.led-cell {
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 4px;
}

.led-cell:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.led-cell.on {
    background: #ef4444 !important;
    box-shadow: 
        0 0 10px #ef4444,
        0 0 20px rgba(255, 107, 107, 0.5),
        0 0 30px rgba(255, 107, 107, 0.3);
    animation: led-glow 1s ease-in-out infinite alternate;
}

@keyframes led-glow {
    from { 
        box-shadow: 0 0 10px #ef4444, 0 0 20px rgba(255, 107, 107, 0.5);
    }
    to { 
        box-shadow: 0 0 15px #ef4444, 0 0 30px rgba(255, 107, 107, 0.7);
    }
}

/* === 🃏 CARD HOVERS === */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 
        0 20px 60px rgba(0,0,0,0.4),
        0 0 0 1px rgba(255,255,255,0.1);
}

/* === 📝 FUN INPUTS === */
input[type="text"], input[type="number"], textarea {
    background: var(--input-bg);
    border: 2px solid var(--card-border);
    border-radius: 12px;
    padding: 12px 16px;
    color: var(--text);
    font-size: 1rem;
    transition: all 0.2s ease;
}

input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 
        0 0 0 4px var(--accent-soft),
        0 0 20px rgba(0, 0, 0, 0.1);
}

input[type="text"]::placeholder {
    color: var(--muted);
}

/* === 🎯 TAB BUTTONS FUN === */
.tab-btn {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tab-btn:hover {
    transform: translateY(-2px);
}

.tab-btn.active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: 0 4px 20px var(--accent-soft);
}

/* === 🌟 SECTION TITLES === */
.section-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.section-icon {
    margin-right: 8px;
}

/* === 🎪 MICROBIT OUTLINE FUN === */
.microbit-outline {
    transition: transform 0.3s ease;
}

.microbit-outline:hover {
    transform: scale(1.02);
}

/* === ✨ GENERAL GLOW EFFECTS === */
.mode-icon {
    font-size: 1.3rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Icons in card headers */
.card-title .icon {
    font-size: 1.4rem;
    margin-right: 8px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* === 🎯 GAUGE EMOJI === */
.gauge-emoji {
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 1.5rem;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.servo-gauge:hover .gauge-emoji {
    transform: scale(1.3) rotate(15deg);
    opacity: 1;
}

/* === 🎨 MORE FUN HOVER EFFECTS === */
.control-section {
    transition: all 0.2s ease;
    border-radius: 16px;
    padding: 16px;
}

.control-section:hover {
    background: rgba(255,255,255,0.03);
    transform: translateY(-2px);
}

/* === 🌈 BUTTON ROW STYLING === */
.button-row {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.button-row .primary, .button-row .secondary {
    flex: 1;
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 12px;
}

/* === 🎪 MICROBIT BODY FUN === */
.microbit-outline {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 3px solid rgba(255,255,255,0.1);
    box-shadow: 
        0 10px 40px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.microbit-outline:hover {
    transform: scale(1.02);
    box-shadow: 
        0 15px 50px rgba(0,0,0,0.5),
        0 0 30px rgba(34, 197, 94, 0.2);
}

/* === 💡 LED CELL SUPER FUN === */
.led-cell {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    background: rgba(255,255,255,0.1);
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid transparent;
}

.led-cell:hover {
    transform: scale(1.15);
    background: rgba(255,107,107,0.3);
    border-color: rgba(255,107,107,0.5);
}

.led-cell.on {
    background: linear-gradient(145deg, #ef4444, #dc2626) !important;
    box-shadow: 
        0 0 15px #ef4444,
        0 0 30px rgba(255,107,107,0.6),
        inset 0 2px 4px rgba(255,255,255,0.3) !important;
    animation: led-pulse 1s ease-in-out infinite alternate;
    border-color: #ef4444;
}

@keyframes led-pulse {
    from { 
        box-shadow: 0 0 15px #ef4444, 0 0 30px rgba(255,107,107,0.6);
        transform: scale(1);
    }
    to { 
        box-shadow: 0 0 20px #ef4444, 0 0 40px rgba(255,107,107,0.8);
        transform: scale(1.05);
    }
}

/* === 📱 FORM INPUTS PLAYFUL === */
.form-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.form-row input[type="text"],
.form-row input[type="number"] {
    flex: 1;
}

/* === 🎭 HINTS AND SUBTITLES === */
.hint, .card-subtitle, .section-subtitle {
    color: #94a3b8;
    font-size: 0.85rem;
}

.drawing-mode-hint {
    text-align: center;
    margin-top: 10px;
    font-size: 0.9rem;
    color: #6bcb77;
    font-weight: 500;
}

/* === 🏷️ BADGES FUN === */
.badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: linear-gradient(145deg, rgba(34,197,94,0.2), rgba(34,197,94,0.1));
    border: 1px solid rgba(34,197,94,0.3);
    color: #4ade80;
}

/* === 🎨 QUICK SHAPES BUTTONS === */
.chip-btn[data-preset] {
    background: linear-gradient(145deg, #334155, #1e293b) !important;
    border: 2px solid rgba(255,255,255,0.1) !important;
}

.chip-btn[data-preset]:hover {
    background: linear-gradient(145deg, #475569, #334155) !important;
    border-color: rgba(34,197,94,0.4) !important;
}

/* === ✨ ICON COMMAND BUTTONS === */
.chip-btn[data-cmd] {
    font-size: 1.3rem !important;
    min-width: 50px;
    min-height: 50px;
}

.chip-btn[data-cmd="HEART"]:hover {
    background: linear-gradient(145deg, #f87171, #ef4444) !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.chip-btn[data-cmd="SMILE"]:hover {
    background: linear-gradient(145deg, #fbbf24, #f59e0b) !important;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
}

.chip-btn[data-cmd="SAD"]:hover {
    background: linear-gradient(145deg, #60a5fa, #3b82f6) !important;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.chip-btn[data-cmd="CLEAR"]:hover {
    background: linear-gradient(145deg, #a1a1aa, #71717a) !important;
}

/* ===== THEME PICKER ===== */

.theme-picker {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: auto;
}

.theme-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    background: var(--pill-bg);
    position: relative;
}

.theme-btn:hover {
    transform: scale(1.15);
}

.theme-btn.active {
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-soft);
}

.theme-btn[data-theme="stealth"] { background: #0f0f23; }
.theme-btn[data-theme="neon"]    { background: linear-gradient(135deg, #00d4ff, #0ea5e9); }
.theme-btn[data-theme="arctic"]  { background: linear-gradient(135deg, #e8eef4, #2563eb); }
.theme-btn[data-theme="blaze"]   { background: linear-gradient(135deg, #fef7f0, #ea580c); }

/* ===== THEME-AWARE OVERRIDES ===== */

/* Card backgrounds */
[data-theme] .card,
[data-theme] .connection-card {
    background: var(--card-bg);
    border-color: var(--card-border);
}

/* Primary buttons */
[data-theme] button.primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-border);
    box-shadow: 0 8px 24px var(--accent-soft);
}

[data-theme] button.primary:hover {
    filter: brightness(1.15);
}

/* Secondary buttons */
[data-theme] button.secondary {
    background: var(--pill-bg);
    border-color: var(--pill-border);
    color: var(--text-secondary);
}

/* Inputs */
[data-theme] input[type="text"],
[data-theme] input[type="number"],
[data-theme] input[type="range"],
[data-theme] select,
[data-theme] textarea {
    background: var(--input-bg);
    border-color: var(--pill-border);
    color: var(--text);
}

/* Card titles */
[data-theme] .card-title {
    color: var(--text);
}

[data-theme] .card-subtitle {
    color: var(--muted);
}

/* Tab buttons */
[data-theme] .tab-btn {
    color: var(--muted);
    border-color: var(--card-border);
    background: var(--pill-bg);
}

[data-theme] .tab-btn.active {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    box-shadow: 0 4px 20px var(--accent-soft);
}

/* Mode toggle (beginner/expert) */
[data-theme] .mode-btn {
    color: var(--muted);
}

[data-theme] .mode-btn.active {
    color: var(--connected-text);
    background: var(--connected-bg);
    box-shadow: 0 0 0 1px var(--accent-strong), 0 0 18px var(--accent-soft);
}

/* Chip buttons (presets, commands) */
[data-theme] .chip-btn {
    background: var(--pill-bg);
    border-color: var(--pill-border);
    color: var(--text-secondary);
}

/* Log area */
[data-theme] .log-area,
[data-theme] .activity-feed {
    background: var(--pill-bg);
    border-color: var(--card-border);
}

/* Scrollbar */
[data-theme] ::-webkit-scrollbar-thumb {
    background: var(--accent-soft);
}

/* Accent-colored text */
[data-theme] .accent-text,
[data-theme] a {
    color: var(--accent);
}

/* Servo gauges */
[data-theme] .gauge-value {
    fill: var(--accent);
}

/* ===== MODE TOGGLE FIX ===== */
/* Ensure beginner/expert active pill visually updates correctly */
.pill-group .pill {
    transition: all 0.25s ease;
}

/* Waiting badge with pulsing dot */
.badge .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse-dot 1.5s ease-in-out infinite;
    vertical-align: middle;
    margin-right: 4px;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* ===== BROAD THEME OVERRIDES for remaining hardcoded colors ===== */

/* Inputs, textareas, selects */
[data-theme] input,
[data-theme] textarea,
[data-theme] select {
    background: var(--input-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text) !important;
}

/* Log area, activity feed, bench response — apply on EVERY theme.
   The actual message-log element is <div id="log" class="log"> (the
   .log-output / .log-area selectors were misses). Logs intentionally
   stay on a SLIGHTLY DARKER inset surface than the card around them
   so they read as "console output" — terminals are dark, dashboards
   are light. We use a per-theme code-console color that contrasts
   with the card but stays in palette. */
.log,
.log-output,
.log-area,
.activity-feed,
#log,
#benchResponse {
    background: var(--log-bg, var(--input-bg)) !important;
    border-color: var(--card-border) !important;
    color: var(--log-fg, var(--text-secondary)) !important;
}

/* Chip buttons (presets, commands) */
[data-theme] .chip-btn {
    background: var(--pill-bg) !important;
    border-color: var(--pill-border) !important;
    color: var(--text-secondary) !important;
}

/* Tool groups in Others tab */
[data-theme] .tool-group {
    background: var(--input-bg) !important;
    border-color: var(--card-border) !important;
}

/* Sensor cards */
[data-theme] .sensor-card,
[data-theme] .mini-card {
    background: var(--input-bg) !important;
    border-color: var(--card-border) !important;
}

/* Card header gradient */
[data-theme] .card-header::after {
    background: linear-gradient(135deg, var(--glow1), transparent 60%) !important;
}

/* Connection section title */
[data-theme] .connection-section-title {
    color: var(--muted) !important;
}

/* Device row text */
[data-theme] .device-row {
    color: var(--muted) !important;
}

/* General text overrides */
[data-theme] .card-subtitle,
[data-theme] label,
[data-theme] .form-label {
    color: var(--muted) !important;
}

[data-theme] h1,
[data-theme] h2,
[data-theme] h3,
[data-theme] .card-title {
    color: var(--text) !important;
}

/* Sensor values */
[data-theme] .sensor-value {
    color: var(--accent) !important;
}

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

[data-theme="arctic"],
[data-theme="blaze"] {
    color-scheme: light;
}

[data-theme="arctic"] body,
[data-theme="blaze"] body {
    color: var(--text);
}

/* Light theme: fix all text that was hardcoded white/light */
[data-theme="arctic"] .connection-status-block,
[data-theme="blaze"] .connection-status-block,
[data-theme="arctic"] .how-to-connect,
[data-theme="blaze"] .how-to-connect,
[data-theme="arctic"] .pill-text,
[data-theme="blaze"] .pill-text {
    color: var(--text) !important;
}

/* Light theme: fix muted text areas */
[data-theme="arctic"] .log-footer,
[data-theme="blaze"] .log-footer {
    color: var(--muted) !important;
}

/* Light theme: card shadow lighter */
[data-theme="arctic"] .card,
[data-theme="blaze"] .card {
    box-shadow: 0 2px 12px var(--shadow-color);
}

/* Light theme: connect/disconnect buttons */
[data-theme="arctic"] button.secondary,
[data-theme="blaze"] button.secondary {
    color: var(--text-secondary) !important;
}

/* Light theme: mode-btn inactive should be darker text */
[data-theme="arctic"] .mode-btn,
[data-theme="blaze"] .mode-btn {
    color: var(--text-secondary) !important;
}

/* Light theme: mode-btn active text */
[data-theme="arctic"] .mode-btn.active,
[data-theme="blaze"] .mode-btn.active {
    color: var(--connected-text) !important;
}

/* Light theme: pill inactive */
[data-theme="arctic"] .pill,
[data-theme="blaze"] .pill {
    color: var(--text-secondary) !important;
    border-color: var(--pill-border) !important;
}

[data-theme="arctic"] .pill.active,
[data-theme="blaze"] .pill.active {
    color: var(--connected-text) !important;
}

/* Light theme: log output area */
[data-theme="arctic"] .log-output,
[data-theme="blaze"] .log-output {
    background: var(--input-bg) !important;
    color: var(--text) !important;
}

/* Light theme: status pill text */
[data-theme="arctic"] .status-pill,
[data-theme="blaze"] .status-pill {
    color: var(--text) !important;
}

[data-theme="arctic"] .status-pill.connected,
[data-theme="blaze"] .status-pill.connected {
    color: var(--connected-text) !important;
}

/* Light theme: sensor value text */
[data-theme="arctic"] .sensor-unit,
[data-theme="blaze"] .sensor-unit {
    color: var(--muted) !important;
}

/* Light theme: subtitle text */
[data-theme="arctic"] .subtitle,
[data-theme="blaze"] .subtitle {
    color: var(--muted) !important;
}

/* Light theme: scrollbar */
[data-theme="arctic"] ::-webkit-scrollbar-track,
[data-theme="blaze"] ::-webkit-scrollbar-track {
    background: var(--input-bg);
}

[data-theme="arctic"] ::-webkit-scrollbar-thumb,
[data-theme="blaze"] ::-webkit-scrollbar-thumb {
    background: var(--pill-border);
}

/* Light theme: chip-btn hover */
[data-theme="arctic"] .chip-btn:hover,
[data-theme="blaze"] .chip-btn:hover {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    color: var(--text) !important;
}

/* Light theme: header title */
[data-theme="arctic"] h1,
[data-theme="blaze"] h1 {
    color: var(--text) !important;
}

/* Light theme: tab-btn.active text guaranteed white */
[data-theme="arctic"] .tab-btn.active,
[data-theme="blaze"] .tab-btn.active {
    color: #fff !important;
}

/* Light theme: section titles in Others/Bench */
[data-theme="arctic"] .section-title,
[data-theme="blaze"] .section-title {
    color: var(--text) !important;
}

/* Light theme: summary (accordion) headers */
[data-theme="arctic"] summary,
[data-theme="blaze"] summary {
    color: var(--text) !important;
}

/* Light theme: form labels */
[data-theme="arctic"] .form-row label,
[data-theme="blaze"] .form-row label {
    color: var(--text-secondary) !important;
}

/* Light theme: fix general link / accent colors */
[data-theme="arctic"] .badge,
[data-theme="blaze"] .badge {
    color: var(--text-secondary) !important;
    background: var(--pill-bg) !important;
}

/* Light theme: theme picker active border */
[data-theme="arctic"] .theme-btn.active,
[data-theme="blaze"] .theme-btn.active {
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-soft);
}

/* ===== GRAPH TAB ===== */

.graph-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0;
}

.graph-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.graph-label {
    min-width: 60px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding-top: 6px;
}

.graph-type-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.graph-type-btn {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--pill-border);
    background: var(--pill-bg);
    color: var(--text-secondary);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.graph-type-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.graph-type-btn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.graph-sensor-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.graph-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.graph-toggle input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.graph-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.graph-option {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.graph-option select {
    padding: 3px 6px;
    border-radius: 6px;
    border: 1px solid var(--pill-border);
    background: var(--input-bg);
    color: var(--text);
    font-size: 0.72rem;
    cursor: pointer;
}

/* Chart container */
.graph-chart-wrap {
    position: relative;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--input-bg);
    padding: 8px;
    margin: 8px 0;
    min-height: 250px;
    height: 350px;
    resize: vertical;
    overflow: hidden;
}

.graph-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Action buttons row */
.graph-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    flex-wrap: wrap;
}

.graph-actions button {
    font-size: 0.72rem;
    padding: 5px 10px;
}

.graph-actions button.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Graph action buttons — colored per function */
#graphSimBtn {
    border-color: rgba(34, 197, 94, 0.5);
    color: #4ade80;
}
#graphSimBtn:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: #4ade80;
}
#graphSimBtn.active {
    background: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
    color: #22c55e;
    animation: sim-pulse 1.5s ease-in-out infinite;
}
@keyframes sim-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50% { box-shadow: 0 0 12px 2px rgba(34,197,94,0.3); }
}

#graphPauseBtn {
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}
#graphPauseBtn:hover {
    background: rgba(245, 158, 11, 0.15);
    border-color: #fbbf24;
}
#graphPauseBtn.active {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #f59e0b;
    animation: pause-glow 1.2s ease-in-out infinite;
}
@keyframes pause-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.3); }
    50% { box-shadow: 0 0 10px 2px rgba(245,158,11,0.25); }
}

#graphClearBtn {
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
}
#graphClearBtn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #f87171;
}

#graphExportPng {
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}
#graphExportPng:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: #60a5fa;
}

#graphExportCsv {
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}
#graphExportCsv:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: #60a5fa;
}

/* Clear button flash on click */
#graphClearBtn:active {
    background: rgba(239, 68, 68, 0.3) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.graph-point-count {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .graph-row {
        flex-direction: column;
        gap: 4px;
    }
    .graph-label {
        min-width: unset;
        padding-top: 0;
    }
    .graph-chart-wrap {
        min-height: 200px;
        height: 280px;
    }
}

/* Light theme: graph action buttons keep their colors */
[data-theme="arctic"] #graphSimBtn,
[data-theme="blaze"] #graphSimBtn {
    color: #16a34a !important;
    border-color: rgba(22, 163, 74, 0.5);
}
[data-theme="arctic"] #graphPauseBtn,
[data-theme="blaze"] #graphPauseBtn {
    color: #d97706 !important;
    border-color: rgba(217, 119, 6, 0.5);
}
[data-theme="arctic"] #graphClearBtn,
[data-theme="blaze"] #graphClearBtn {
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.5);
}
[data-theme="arctic"] #graphExportPng,
[data-theme="arctic"] #graphExportCsv,
[data-theme="blaze"] #graphExportPng,
[data-theme="blaze"] #graphExportCsv {
    color: #2563eb !important;
    border-color: rgba(37, 99, 235, 0.5);
}

/* ==================== TOAST NOTIFICATIONS ==================== */

.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    background: var(--card-bg, #1e293b);
    color: var(--text, #f9fafb);
    border: 1px solid var(--card-border, #334155);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%) scale(0.9);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 320px;
}

.toast-show {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.toast-hide {
    opacity: 0;
    transform: translateX(60px) scale(0.9);
    transition-duration: 0.3s;
}

.toast-icon { font-size: 1.1rem; }
.toast-msg { flex: 1; }

.toast-success { border-left: 4px solid #22c55e; }
.toast-error   { border-left: 4px solid #ef4444; }
.toast-warning { border-left: 4px solid #f59e0b; }
.toast-info    { border-left: 4px solid #3b82f6; }

/* ==================== OVERLAYS ==================== */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.overlay.visible {
    opacity: 1;
    visibility: visible;
}

.overlay-card {
    background: var(--card-bg, #1e293b);
    border: 1px solid var(--card-border, #334155);
    border-radius: 16px;
    padding: 28px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.overlay.visible .overlay-card {
    transform: scale(1);
}

.overlay-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text, #f9fafb);
}

/* Keyboard shortcuts */
.shortcut-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.shortcut-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary, #cbd5e1);
}

kbd {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--pill-bg, rgba(51,65,85,0.6));
    border: 1px solid var(--pill-border, rgba(148,163,184,0.3));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text, #f9fafb);
    min-width: 24px;
    text-align: center;
}

/* Onboarding */
.onboarding-card {
    text-align: center;
}

.onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
    text-align: left;
}

.ob-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--text-secondary, #cbd5e1);
}

.ob-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-soft, rgba(34,197,94,0.2));
    color: var(--accent, #22c55e);
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* ==================== FULLSCREEN GRAPH ==================== */

.graph-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 8000 !important;
    border-radius: 0 !important;
    height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-y: auto !important;
    background: var(--bg, #020617) !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.graph-fullscreen .graph-chart-wrap {
    resize: none !important;
}

/* ==================== CODE SNIPPETS ==================== */

.code-snippets {
    margin-top: 10px;
    border: 1px solid var(--card-border, #334155);
    border-radius: 10px;
    overflow: hidden;
}

.code-snippets summary {
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary, #cbd5e1);
    background: var(--pill-bg, rgba(51,65,85,0.6));
    user-select: none;
}

.code-snippets summary:hover {
    color: var(--text, #f9fafb);
}

.snippet {
    padding: 8px 12px;
    border-top: 1px solid var(--card-border, #334155);
}

.snippet-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.snippet pre {
    margin: 0;
    padding: 8px;
    border-radius: 6px;
    background: rgba(0,0,0,0.3);
    overflow-x: auto;
    font-size: 0.72rem;
    line-height: 1.5;
}

.snippet code {
    color: var(--accent, #4ade80);
    font-family: 'Fira Code', 'Cascadia Code', monospace;
}

/* ==================== GRAPH EXTRA BUTTONS ==================== */

#graphFullscreenBtn {
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}
#graphFullscreenBtn:hover { background: rgba(245, 158, 11, 0.15); }
#graphFullscreenBtn.active { background: rgba(245, 158, 11, 0.2); border-color: #f59e0b; }

#graphRecordBtn {
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
}
#graphRecordBtn:hover { background: rgba(239, 68, 68, 0.15); }
#graphRecordBtn.active {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    animation: rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
    50% { box-shadow: 0 0 10px 3px rgba(239,68,68,0.25); }
}

#graphRecordPlay {
    border-color: rgba(34, 197, 94, 0.5);
    color: #4ade80;
}
#graphRecordPlay:hover { background: rgba(34, 197, 94, 0.15); }

#graphRecordExport {
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}
#graphRecordExport:hover { background: rgba(59, 130, 246, 0.15); }

#graphAnnotateBtn {
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
}
#graphAnnotateBtn:hover { background: rgba(245, 158, 11, 0.15); }

/* ==================== MOBILE LAYOUT ==================== */

@media (max-width: 768px) {
    /* Tab bar: horizontal scroll */
    .mode-selector {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }
    .mode-selector::-webkit-scrollbar { display: none; }

    .mode-btn.tab-btn {
        flex: 0 0 auto !important;
        min-width: 80px;
        font-size: 0.7rem;
        padding: 6px 10px;
    }

    .mode-icon {
        font-size: 0.9rem !important;
    }

    /* Stack header */
    .row-top {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .col-left, .col-right {
        width: 100% !important;
    }

    /* Cards full width */
    .card {
        border-radius: 10px;
    }

    /* Graph actions wrap */
    .graph-actions {
        gap: 4px;
    }
    .graph-actions button {
        font-size: 0.65rem;
        padding: 4px 6px;
    }

    /* Sensor grid: single column */
    .sensor-grid {
        grid-template-columns: 1fr !important;
    }

    /* Theme picker smaller */
    .theme-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.9rem !important;
    }

    /* Toast position */
    .toast-container {
        right: 8px;
        left: 8px;
    }
    .toast { max-width: 100%; }
}

@media (max-width: 480px) {
    .mode-btn.tab-btn {
        min-width: 65px;
        font-size: 0.65rem;
        padding: 5px 6px;
        gap: 2px;
    }

    .title-block h1 {
        font-size: 1rem !important;
    }

    .graph-chart-wrap {
        min-height: 180px;
        height: 240px;
    }

    .graph-sensor-toggles {
        gap: 4px 8px;
        font-size: 0.68rem;
    }

    .graph-type-btn {
        font-size: 0.65rem;
        padding: 3px 6px;
    }
}

/* ==================== LIGHT THEME OVERLAY/TOAST FIXES ==================== */

[data-theme="arctic"] .overlay-card,
[data-theme="blaze"] .overlay-card {
    background: #fff;
    border-color: #d1d5db;
}

[data-theme="arctic"] .toast,
[data-theme="blaze"] .toast {
    background: #fff;
    color: #1f2937;
    border-color: #d1d5db;
}

[data-theme="arctic"] kbd,
[data-theme="blaze"] kbd {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #1f2937;
}

[data-theme="arctic"] .snippet pre,
[data-theme="blaze"] .snippet pre {
    background: rgba(0,0,0,0.05);
}

/* ==================== CALIBRATION SECTION ==================== */

.calibration-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--card-border, #334155);
}

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

.cal-item {
    padding: 12px;
    border-radius: 10px;
    background: var(--pill-bg, rgba(51,65,85,0.4));
    border: 1px solid var(--card-border, #334155);
}

.cal-label {
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 6px;
    color: var(--text, #f9fafb);
}

.cal-status {
    font-size: 0.72rem;
    color: var(--muted, #64748b);
    margin-bottom: 6px;
}

.cal-status.cal-ok {
    color: var(--accent, #22c55e);
}

.cal-values {
    font-size: 0.68rem;
    color: var(--text-secondary, #cbd5e1);
    font-family: monospace;
    margin-bottom: 4px;
}

.cal-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.cal-hint {
    font-size: 0.68rem;
    color: var(--muted, #64748b);
    margin-top: 6px;
    font-style: italic;
}

/* ==================== SERVO TRIM ==================== */

.servo-trim {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--pill-bg, rgba(51,65,85,0.4));
    border: 1px solid var(--card-border, #334155);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.trim-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary, #cbd5e1);
    white-space: nowrap;
}

.servo-trim input[type="range"] {
    flex: 1;
    min-width: 80px;
}

/* ==================== LIGHT THEME CALIBRATION FIXES ==================== */

[data-theme="arctic"] .cal-item,
[data-theme="blaze"] .cal-item {
    background: rgba(241, 245, 249, 0.6);
}

[data-theme="arctic"] .servo-trim,
[data-theme="blaze"] .servo-trim {
    background: rgba(241, 245, 249, 0.6);
}

/* ==================== 3D BOARD TAB ==================== */

.board3d-container {
    width: 100%;
    height: 450px;
    border-radius: 12px;
    overflow: hidden;
    background: radial-gradient(ellipse at center, rgba(30,41,59,0.8) 0%, rgba(10,15,25,1) 100%);
    position: relative;
    cursor: grab;
    touch-action: none;
}

.board3d-container:active {
    cursor: grabbing;
}

.board3d-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.board3d-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}

.board3d-controls button.active {
    border-color: var(--accent, #22c55e);
    color: var(--accent, #22c55e);
}

.board3d-info {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.board3d-pill {
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 20px;
    background: var(--pill-bg, rgba(51,65,85,0.4));
    border: 1px solid var(--card-border, #334155);
    color: var(--text-secondary, #cbd5e1);
    font-family: monospace;
    white-space: nowrap;
}

.board3d-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    font-size: 0.7rem;
    color: var(--muted, #64748b);
}

/* Light themes */
[data-theme="arctic"] .board3d-container,
[data-theme="blaze"] .board3d-container {
    background: radial-gradient(ellipse at center, rgba(226,232,240,0.8) 0%, rgba(203,213,225,1) 100%);
}

/* Mobile */
@media (max-width: 768px) {
    .board3d-container {
        height: 350px;
    }
    .board3d-info {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .board3d-container {
        height: 280px;
    }
}

/* ==================== 3D STYLE SELECTOR ==================== */

.board3d-select {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--card-border, #334155);
    background: var(--pill-bg, rgba(51,65,85,0.4));
    color: var(--text, #f9fafb);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

.board3d-select:focus {
    border-color: var(--accent, #22c55e);
}

.board3d-select option {
    background: var(--bg, #0f172a);
    color: var(--text, #f9fafb);
}

[data-theme="arctic"] .board3d-select,
[data-theme="blaze"] .board3d-select {
    background: rgba(241, 245, 249, 0.8);
}

[data-theme="arctic"] .board3d-select option,
[data-theme="blaze"] .board3d-select option {
    background: #f1f5f9;
}

/* ======== RTL (Arabic) Support ======== */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .header { direction: rtl; }
html[dir="rtl"] .card-header { flex-direction: row-reverse; }
html[dir="rtl"] .card-title { direction: rtl; }
html[dir="rtl"] .card-subtitle { text-align: right; }
html[dir="rtl"] .button-row { flex-direction: row-reverse; }
html[dir="rtl"] .form-row { flex-direction: row-reverse; }
html[dir="rtl"] .pill-group { flex-direction: row-reverse; }
html[dir="rtl"] .device-row { flex-direction: row-reverse; }
html[dir="rtl"] .hint ol { padding-left: 0; padding-right: 20px; }
html[dir="rtl"] .hint { text-align: right; }
html[dir="rtl"] .step-num { margin-right: 0; margin-left: 8px; }
html[dir="rtl"] .icon, html[dir="rtl"] .mode-icon, html[dir="rtl"] .section-icon { margin-right: 0; margin-left: 6px; }
html[dir="rtl"] .btn-icon { margin-right: 0; margin-left: 4px; }
html[dir="rtl"] .status-dot, html[dir="rtl"] .dot, html[dir="rtl"] .chip-dot { margin-right: 0; margin-left: 6px; }
html[dir="rtl"] .pill-dot { margin-right: 0; margin-left: 4px; }
html[dir="rtl"] .tab-bar { direction: rtl; }
html[dir="rtl"] .connection-grid { direction: rtl; }
html[dir="rtl"] .controls-grid { direction: rtl; }
html[dir="rtl"] .sensor-grid { direction: rtl; }
html[dir="rtl"] .shortcut-grid { direction: rtl; text-align: right; }
html[dir="rtl"] .shortcut-row { flex-direction: row-reverse; }
html[dir="rtl"] kbd { margin-right: 0; margin-left: 8px; }
html[dir="rtl"] .teacher-note, html[dir="rtl"] .warning { border-left: none; border-right: 4px solid; }
html[dir="rtl"] .badge { direction: rtl; }
html[dir="rtl"] .toast { direction: rtl; text-align: right; }
html[dir="rtl"] .overlay-card { direction: rtl; text-align: right; }
html[dir="rtl"] .onboarding-steps { text-align: right; }
html[dir="rtl"] .ob-step { flex-direction: row-reverse; }
html[dir="rtl"] .ob-num { margin-right: 0; margin-left: 12px; }
html[dir="rtl"] select { direction: rtl; }
html[dir="rtl"] input[type="text"], html[dir="rtl"] input[type="number"] { direction: rtl; text-align: right; }
html[dir="rtl"] .section-header { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .section-subtitle { text-align: right; }
html[dir="rtl"] .activity-feed { direction: rtl; text-align: right; }
html[dir="rtl"] .log-line { direction: rtl; text-align: right; }
html[dir="rtl"] .bench-response { direction: rtl; text-align: right; }
html[dir="rtl"] .graph-toggle { direction: rtl; }
html[dir="rtl"] .graph-toggle label { flex-direction: row-reverse; }
html[dir="rtl"] .lang-picker { margin-left: 0; margin-right: auto; }

/* ===========================================================
 * Drive sub-tab — KEYPAD ◀ MASCOT ▶ JOYSTICK triad
 * Three input methods flank the live mascot. Mascot stays the
 * subject; inputs come at it from both sides. <900px collapses
 * to single column with mascot first.
 * =========================================================== */
.mq-drive-triad {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 2fr) minmax(150px, 1fr);
  gap: 14px;
  align-items: center;
}
.mq-keypad-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.mq-keypad-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.mq-keypad-btn {
  width: 52px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: var(--card-bg-2, #0a1628);
  color: #fb923c;
  border: 1px solid #fb923c;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.08s ease-out, box-shadow 0.12s ease-out, background 0.12s ease-out;
}
.mq-keypad-btn .mq-keypad-glyph {
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
}
.mq-keypad-btn .mq-keypad-cap {
  font-size: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  opacity: 0.65;
  letter-spacing: 0.5px;
}
.mq-keypad-btn:hover {
  background: rgba(251, 146, 60, 0.12);
}
.mq-keypad-btn:active,
.mq-keypad-btn.mq-keypad-flash {
  background: rgba(251, 146, 60, 0.28);
  box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.45), 0 0 14px rgba(251, 146, 60, 0.45);
  transform: translateY(1px);
}
.mq-keypad-btn.mq-keypad-stop {
  color: #f87171;
  border-color: #f87171;
}
.mq-keypad-btn.mq-keypad-stop .mq-keypad-glyph {
  font-size: 11px;
  letter-spacing: 0.5px;
}
.mq-keypad-btn.mq-keypad-stop:hover {
  background: rgba(248, 113, 113, 0.12);
}
.mq-keypad-btn.mq-keypad-stop:active,
.mq-keypad-btn.mq-keypad-stop.mq-keypad-flash {
  background: rgba(248, 113, 113, 0.28);
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.45), 0 0 14px rgba(248, 113, 113, 0.45);
}
.mq-keypad-hint {
  margin-top: 4px;
  font-size: 9px;
  color: var(--text-secondary, #93a8c4);
  text-align: center;
  opacity: 0.85;
  line-height: 1.4;
}
.mq-keypad-hint kbd {
  background: var(--card-bg-2, #0a1628);
  border: 1px solid var(--border, #1d3556);
  padding: 0 4px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  color: var(--text, #b8c8e0);
}

/* Narrow viewports — stack so mascot leads, then inputs */
@media (max-width: 900px) {
  .mq-drive-triad {
    grid-template-columns: 1fr;
    grid-template-areas:
      "mascot"
      "keypad"
      "joystick";
    gap: 12px;
  }
  .mq-drive-triad > .mq-keypad-panel { grid-area: keypad; }
  /* The mascot wrapper is the second child (between keypad and joystick).
     Use :nth-child to target it without adding more class hooks. */
  .mq-drive-triad > div:nth-child(2) { grid-area: mascot; }
  .mq-drive-triad > div:nth-child(3) { grid-area: joystick; }
}

/* ===========================================================
 * 🧭 Odometry panel (Drive sub-tab) — dead-reckoning navigator
 * Two-column body: SVG map (left) + stats list (right). On
 * narrow viewports, stats fall under the map.
 * =========================================================== */
.mq-odo-panel {
  background: var(--card-bg-2, #0a1628);
  border: 1px solid var(--border, #1d3556);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  /* Reorder children: map canvas FIRST, controls below */
  display: flex;
  flex-direction: column;
}
/* 1st: the SVG map + stats sidebar — the visual centrepiece */
.mq-odo-panel .mq-odo-body   { order: 0; }
/* 2nd: slim toolbar (snap / timelaps / draw&go / AR / recap / reset) */
.mq-odo-panel .mq-odo-header { order: 1; margin-top: 8px; margin-bottom: 0; }
/* 3rd: challenge selector */
.mq-odo-panel .mq-chal-bar   { order: 2; }
/* 4th: SLAM + Drift game bars */
.mq-odo-panel #mqSlamBar,
.mq-odo-panel #mqDriftBar     { order: 3; }
/* ── Map panel header ───────────────────────────────────────── */
.mq-odo-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}
/* Legend + main buttons sit on one row inside the header */
.mq-odo-header-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Legend dots (trail / obstacles) */
.mq-odo-legend {
  display: inline-flex;
  gap: 8px;
  font-weight: 400;
  font-size: 10px;
  color: var(--text-secondary, #93a8c4);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.mq-odo-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mq-odo-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 5px currentColor;
}

/* Icon-only round action buttons */
.mq-map-btns {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
  flex-wrap: wrap;
}
.mq-map-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--bc,#facc15) 60%, transparent);
  background: color-mix(in srgb, var(--bc,#facc15) 12%, #071020);
  color: var(--bc, #facc15);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
  padding: 0;
  position: relative;
}
.mq-map-btn:hover {
  transform: scale(1.18);
  background: color-mix(in srgb, var(--bc,#facc15) 25%, #071020);
  box-shadow: 0 0 12px color-mix(in srgb, var(--bc,#facc15) 70%, transparent);
}
.mq-map-btn:active { transform: scale(0.96); }
/* Reset button — slightly larger, separated */
.mq-map-btn-reset {
  font-size: 20px;
  margin-left: 4px;
}
/* Generic busy state for any mq-map-btn doing async work */
.mq-map-btn.mq-btn-busy {
  animation: mq-autopilot-spin 1s linear infinite;
  opacity: 0.7;
}
/* label-based map button (file-input wrapper) — needs explicit flex so
   it looks identical to <button class="mq-map-btn"> elements */
label.mq-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* Autopilot save/replay/load sub-row — sits below the main button row,
   flush right, so it never crowds or wraps into the main row. */
.mq-ap-io-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.mq-ap-io-label {
  font-size: 10px;
  color: var(--text-secondary, #93a8c4);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-right: 2px;
}
/* Autopilot button states */
.mq-autopilot-active {
  background: color-mix(in srgb, var(--bc,#14b8a6) 30%, #071020) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--bc,#14b8a6) 80%, transparent) !important;
}
.mq-autopilot-drawing {
  animation: mq-autopilot-pulse 0.7s ease-in-out infinite alternate;
}
.mq-autopilot-running {
  animation: mq-autopilot-spin 1.2s linear infinite;
}
@keyframes mq-autopilot-pulse {
  from { box-shadow: 0 0 8px  color-mix(in srgb,#14b8a6 60%,transparent); }
  to   { box-shadow: 0 0 20px color-mix(in srgb,#14b8a6 100%,transparent); }
}
@keyframes mq-autopilot-spin {
  from { transform: rotate(0deg)   scale(1.1); }
  to   { transform: rotate(360deg) scale(1.1); }
}
.mq-odo-body {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(110px, auto);
  gap: 10px;
  align-items: stretch;
}
#mqOdoSvg {
  width: 100%;
  height: auto;
  cursor: default;
  transition: cursor 0s;
  max-height: 480px;
  background: var(--bg-deep, #061121);
  border: 1px solid var(--border, #1d3556);
  border-radius: 6px;
}
.mq-odo-stats {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.mq-odo-stat {
  display: flex;
  flex-direction: column;
  background: var(--bg-deep, #061121);
  border: 1px solid var(--border, #1d3556);
  border-left: 3px solid #4ade80;
  border-radius: 4px;
  padding: 4px 8px;
  line-height: 1.25;
}
.mq-odo-stat:nth-child(2) { border-left-color: #fb923c; }
.mq-odo-stat:nth-child(3) { border-left-color: #00d4ff; }
.mq-odo-stat:nth-child(4) { border-left-color: #facc15; }
.mq-odo-label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary, #93a8c4);
  opacity: 0.75;
}
.mq-odo-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #b8c8e0);
  font-variant-numeric: tabular-nums;
}
.mq-odo-foot {
  margin-top: 6px;
  font-size: 9px;
  font-family: inherit;
  color: var(--text-secondary, #93a8c4);
  opacity: 0.7;
  text-align: center;
  font-style: italic;
}
@media (max-width: 700px) {
  .mq-odo-body {
    grid-template-columns: 1fr;
  }
  .mq-odo-stats {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .mq-odo-stat { flex: 1 1 45%; }
}

/* ===========================================================
 * Sweep range preset chips — kid-friendly one-tap range presets
 * (Full / Front / Left / Right / Wide). Sit above the from/to
 * sliders. Click a chip → both sliders jump to that range.
 * =========================================================== */
.mq-sweep-preset {
  background: rgba(250, 204, 21, 0.08);
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.35);
  border-radius: 999px;
  padding: 2px 9px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease-out;
}
.mq-sweep-preset:hover {
  background: rgba(250, 204, 21, 0.18);
  border-color: rgba(250, 204, 21, 0.7);
  transform: translateY(-1px);
}
.mq-sweep-preset:active {
  transform: translateY(0);
}
.mq-sweep-preset.mq-sweep-preset-active {
  background: rgba(250, 204, 21, 0.25);
  color: #fef3c7;
  border-color: #facc15;
  box-shadow: 0 0 6px rgba(250, 204, 21, 0.4);
}

/* ===========================================================
 * 🎯 Sweep marker style chips — pick how detected obstacles are
 * rendered on the Sweep radar (dots / sectors / rays). Lives at
 * the top of the sweep-style radar panel.
 * =========================================================== */
.mq-sweep-mode-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.mq-sweep-mode-lbl {
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary, #93a8c4);
  opacity: 0.7;
  margin-right: 2px;
}
.mq-sweep-mode {
  background: rgba(34, 197, 94, 0.06);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.12s ease-out;
}
.mq-sweep-mode:hover {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.55);
}
.mq-sweep-mode.mq-sweep-mode-active {
  background: rgba(34, 197, 94, 0.22);
  color: #bbf7d0;
  border-color: #86efac;
  font-weight: 700;
  box-shadow: 0 0 6px rgba(134, 239, 172, 0.35);
}

/* ===========================================================
 * 🎯 Path challenges — selector + score badge in the path panel
 * Sits under the panel header. Selector picks a target shape;
 * the SVG draws a dashed outline; score updates live.
 * =========================================================== */
.mq-chal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 6px;
  padding: 4px 6px;
  background: var(--bg-deep, #061121);
  border: 1px solid var(--border, #1d3556);
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-secondary, #93a8c4);
}
.mq-chal-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.mq-chal-label select {
  background: var(--card-bg-2, #0a1628);
  color: #facc15;
  border: 1px solid var(--border, #1d3556);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.mq-chal-stats {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.mq-chal-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mq-chal-key {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.7;
}
.mq-chal-val {
  font-size: 13px;
  font-weight: 700;
  color: #facc15;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px rgba(250, 204, 21, 0.4);
}
/* New-best-score celebration: brief pulse when score climbs above old best */
.mq-chal-val.mq-chal-new-best {
  animation: mqChalBest 0.7s ease-out;
}
@keyframes mqChalBest {
  0%   { color: #facc15; transform: scale(1); }
  30%  { color: #4ade80; transform: scale(1.18); text-shadow: 0 0 12px #4ade80; }
  100% { color: #facc15; transform: scale(1); }
}

/* ===========================================================
 * 🎬 Macro recorder bar (Drive sub-tab) — record + replay
 * Sits below the speed/wander row. Two compact buttons (red
 * record / green play) + a status string with a live timer.
 * =========================================================== */
.mq-macro-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* two natural rows: dial | rec+replay */
  gap: 6px 8px;
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--bg-deep, #061121);
  border: 1px solid var(--border, #1d3556);
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-secondary, #93a8c4);
}
/* Row 1: mode dial takes the full width so it never shares a row */
.mq-macro-bar #mqModeDial {
  flex: 1 1 100%;
  margin-bottom: 0;
}
/* Row 2: Record + Replay + status sit on their own line */
.mq-macro-bar #mqMacroRec,
.mq-macro-bar #mqMacroPlay { flex-shrink: 0; }
.mq-macro-bar .mq-macro-status { flex: 1; }
.mq-macro-btn {
  background: var(--card-bg-2, #0a1628);
  border: 1px solid var(--border, #1d3556);
  border-radius: 4px;
  padding: 3px 9px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s ease-out;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mq-macro-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mq-macro-rec        { color: #f87171; border-color: #f87171; }
.mq-macro-rec:hover  { background: rgba(248, 113, 113, 0.12); }
.mq-macro-rec.mq-macro-active {
  background: rgba(248, 113, 113, 0.22);
  color: #fca5a5;
  border-color: #fca5a5;
  animation: mqMacroRecPulse 1s ease-in-out infinite;
}
@keyframes mqMacroRecPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(248, 113, 113, 0); }
}
.mq-macro-play       { color: #22c55e; border-color: #22c55e; }
.mq-macro-play:not(:disabled):hover { background: rgba(34, 197, 94, 0.12); }
.mq-macro-play.mq-macro-active {
  background: rgba(34, 197, 94, 0.22);
  color: #4ade80;
  border-color: #4ade80;
}
.mq-macro-status {
  flex: 1;
  font-size: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  color: var(--text-secondary, #93a8c4);
}
.mq-macro-status.mq-macro-status-rec  { color: #f87171; font-weight: 700; }
.mq-macro-status.mq-macro-status-play { color: #4ade80; font-weight: 700; }
/* ============================================================
 * 🖊️ PEN MODE
 * ============================================================ */
/* B — thick trail when pen mode is on */
#mqOdoSvg.mq-pen-mode #mqOdoTrail,
#mqOdoSvg.mq-pen-mode #mqOdoTrailSnap {
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Pen toggle button active state */
#mqPenToggle.mq-pen-active {
  background: rgba(250,204,21,0.15);
  color: #facc15;
  border-color: #facc15;
}
/* Mode tabs */
.mq-pen-tab {
  background: var(--card-bg-2,#0a1628);
  border: 1px solid var(--border,#1d3556);
  color: var(--text-secondary,#93a8c4);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mq-pen-tab.mq-pen-tab-active {
  background: rgba(250,204,21,0.12);
  color: #facc15;
  border-color: #facc15;
}
.mq-pen-export {
  background: var(--card-bg-2,#0a1628);
  border: 1px solid #38bdf8;
  color: #38bdf8;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
}
.mq-pen-export:hover { background: rgba(56,189,248,0.1); }

/* C — Turtle command buttons */
.mq-turtle-btn {
  background: var(--card-bg-2,#0a1628);
  border: 1px solid var(--border,#1d3556);
  color: var(--text-secondary,#93a8c4);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.mq-turtle-btn:hover  { background: rgba(250,204,21,0.08); }
.mq-turtle-btn-sel { background: rgba(250,204,21,0.15); color:#facc15; border-color:#facc15; }
.mq-turtle-input {
  width: 60px;
  background: var(--card-bg-2,#0a1628);
  border: 1px solid var(--border,#1d3556);
  color: var(--text,#e2e8f0);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
  -moz-appearance: textfield;
}
.mq-turtle-input::-webkit-outer-spin-button,
.mq-turtle-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mq-turtle-unit {
  font-size: 11px;
  color: var(--text-secondary,#93a8c4);
  min-width: 16px;
}
.mq-turtle-add {
  background: rgba(250,204,21,0.12);
  border: 1px solid #facc15;
  color: #facc15;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
.mq-turtle-add:hover { background: rgba(250,204,21,0.22); }
/* Command chip list */
.mq-turtle-cmds {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 32px;
  max-height: 90px;
  overflow-y: auto;
  padding: 4px;
  background: var(--card-bg,#071020);
  border: 1px solid var(--border,#1d3556);
  border-radius: 6px;
  font-size: 11px;
}
.mq-tcmd-empty { color: var(--text-secondary,#93a8c4); font-style: italic; align-self: center; }
.mq-tcmd-chip {
  background: color-mix(in srgb, var(--cc,#facc15) 15%, transparent);
  border: 1px solid var(--cc,#facc15);
  color: var(--cc,#facc15);
  border-radius: 6px;
  padding: 3px 10px 3px 7px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  white-space: nowrap;
  min-width: max-content;
  transition: opacity 0.12s;
}
.mq-tcmd-chip:hover { opacity: 0.6; }
.mq-tcmd-num {
  font-size: 8px;
  opacity: 0.65;
  margin-right: 2px;
  vertical-align: super;
  line-height: 1;
}
/* Run / Clear buttons */
.mq-turtle-run {
  background: rgba(34,197,94,0.12);
  border: 1px solid #22c55e;
  color: #22c55e;
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
.mq-turtle-run:hover     { background: rgba(34,197,94,0.22); }
.mq-turtle-running       { background: rgba(248,113,113,0.15) !important; border-color:#f87171 !important; color:#f87171 !important; }
.mq-turtle-clear {
  background: transparent;
  border: 1px solid var(--border,#1d3556);
  color: var(--text-secondary,#93a8c4);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s;
}
.mq-turtle-clear:hover { background: rgba(248,113,113,0.08); color:#f87171; border-color:#f87171; }

/* Home pin — draggable origin marker on the odometry map */
#mqHomePinGroup          { cursor: grab; }
#mqHomePinGroup:active   { cursor: grabbing; }
#mqHomePinGroup circle:first-child {
  transition: r 0.15s, fill 0.15s;
}
#mqHomePinGroup:hover circle:first-child {
  r: 9;
  fill: rgba(56, 189, 248, 0.2);
}

/* Replay timeline scrubber — lives below the map SVG */
.mq-replay-timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 2px;
}
.mq-rtl-label {
  font-size: 10px;
  font-weight: 700;
  color: #f97316;
  white-space: nowrap;
  letter-spacing: 0.4px;
}
.mq-rtl-scrubber {
  flex: 1;
  accent-color: #f97316;
  height: 4px;
  cursor: pointer;
}
.mq-rtl-time {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary, #93a8c4);
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}

/* Import / export icon buttons — compact, neutral */
.mq-macro-io {
  flex-shrink: 0;
  min-width: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  border-radius: 8px;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s;
}
.mq-macro-io:not(:disabled):hover { opacity: 1; background: rgba(255,255,255,0.08); }
.mq-macro-io:disabled { opacity: 0.25; }

/* ===========================================================
 * 🚦 Auto-wander button (Drive sub-tab) — toggles a closed-loop
 * drive-forward + obstacle-avoid demo. Pulses when active so the
 * user knows the robot is being driven by JS, not them.
 * =========================================================== */
.mq-wander-btn {
  background: var(--card-bg-2, #0a1628);
  color: #4ade80;
  border: 1px solid #4ade80;
  border-radius: 5px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease-out;
  white-space: nowrap;
}
.mq-wander-btn:hover {
  background: rgba(74, 222, 128, 0.12);
}
.mq-wander-btn.mq-wander-active {
  background: rgba(74, 222, 128, 0.18);
  color: #86efac;
  border-color: #86efac;
  animation: mqWanderPulse 1.4s ease-in-out infinite;
}
@keyframes mqWanderPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(74, 222, 128, 0);
  }
}

/* ===========================================================
 * 🏁 Tableau de bord (Drive sub-tab) — analog cockpit gauges
 * Four 270° SVG gauges (SPEED · POWER · HEADING · SONAR) +
 * LCD trip computer + warning cluster. Driven by the same
 * fireDrive / mqOdometry / setDist hooks as the rest of the
 * Drive sub-tab — zero new BLE traffic, just a cockpit-style
 * presentation of data already on the wire.
 * =========================================================== */
.mq-dash-panel {
  background: var(--card-bg-2, #0a1628);
  border: 1px solid var(--border, #1d3556);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.mq-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #fb923c;
  font-weight: 700;
  margin-bottom: 8px;
}
.mq-dash-warns {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.mq-dash-warn {
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(248, 113, 113, 0.05);
  border: 1px solid rgba(248, 113, 113, 0.2);
  color: rgba(248, 113, 113, 0.35);
  transition: color 0.15s ease-out, background 0.15s ease-out, border-color 0.15s ease-out;
}
/* Active state — pulses red. Apply via .mq-dash-warn-on */
.mq-dash-warn.mq-dash-warn-on {
  color: #f87171;
  background: rgba(248, 113, 113, 0.15);
  border-color: #f87171;
  animation: mqDashWarnPulse 1s ease-in-out infinite;
}
@keyframes mqDashWarnPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(248, 113, 113, 0); }
  50%      { box-shadow: 0 0 8px rgba(248, 113, 113, 0.5); }
}
/* Gear indicator — single letter D / N / R */
.mq-dash-gear {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-deep, #061121);
  border: 1px solid var(--border, #1d3556);
  color: #4ade80;
  font-size: 11px;
  font-weight: 700;
}
.mq-dash-gear[data-gear="N"] { color: var(--text-secondary, #93a8c4); }
.mq-dash-gear[data-gear="R"] { color: #fbbf24; }
.mq-dash-gear[data-gear="D"] { color: #4ade80; }

.mq-dash-reset {
  background: var(--bg-deep, #061121);
  color: var(--text-secondary, #93a8c4);
  border: 1px solid var(--border, #1d3556);
  border-radius: 3px;
  padding: 2px 7px;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.mq-dash-reset:hover {
  color: #fb923c;
  border-color: #fb923c;
}

/* Gauge row — auto-shrink to fit, 4 columns on desktop, 2 on narrow */
.mq-dash-gauges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mq-gauge {
  background: var(--bg-deep, #061121);
  border: 1px solid var(--border, #1d3556);
  border-radius: 6px;
  padding: 6px;
  text-align: center;
  position: relative;
}
.mq-gauge svg {
  width: 100%;
  height: auto;
  display: block;
  /* Subtle inner-shadow vibe via filter */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.mq-gauge-label {
  margin-top: 4px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text-secondary, #93a8c4);
  text-transform: uppercase;
}
.mq-gauge-unit {
  opacity: 0.6;
  font-weight: 400;
}
.mq-gauge-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--gauge-color, #fb923c);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  text-shadow: 0 0 8px var(--gauge-color, #fb923c);
}

/* LCD strip — 7-seg-style digital values, segregated by thin dividers */
.mq-dash-lcd {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 8px;
  background: var(--bg-deep, #061121);
  border: 1px solid var(--border, #1d3556);
  border-radius: 6px;
  padding: 6px 0;
}
.mq-lcd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-right: 1px solid var(--border, #1d3556);
  line-height: 1.2;
}
.mq-lcd-cell:last-child { border-right: none; }
.mq-lcd-key {
  font-size: 7.5px;
  letter-spacing: 0.7px;
  color: var(--text-secondary, #93a8c4);
  opacity: 0.65;
  text-transform: uppercase;
}
.mq-lcd-val {
  font-size: 12px;
  font-weight: 700;
  color: #fb923c;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px rgba(251, 146, 60, 0.5);
}

@media (max-width: 700px) {
  .mq-dash-gauges {
    grid-template-columns: repeat(2, 1fr);
  }
  .mq-dash-lcd {
    grid-template-columns: repeat(3, 1fr);
  }
  .mq-lcd-cell:nth-child(3) { border-right: none; }
}

/* ===========================================================
 * 📌 Log rail — MESSAGE LOG as a permanent right sidebar
 * js/log-rail.js wraps .app + a new <aside id="logRailAside">
 * in a 2-column grid (.app-shell). The log card lives in the
 * aside permanently — structurally independent from the rest
 * of the layout, not just visually pinned via position:fixed.
 *
 * Width is a CSS custom property (--log-rail-w) updated by the
 * resize handle. Below 1100 px the grid collapses to a single
 * column and the rail is hidden (raw UART log isn't useful on
 * a phone anyway).
 * =========================================================== */
:root { --log-rail-w: 380px; }

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--log-rail-w);
  align-items: stretch;
  min-height: 100vh;
  width: 100%;
  /* No outer max-width / margin auto — the SHELL spans the full viewport
     so the rail hugs the right edge on wide screens (no gap between
     journal panel and viewport edge). The main app re-acquires its
     centering inside its grid column instead (see .app-shell > .app). */
}
.app-shell > .app {
  /* Allow the main column to shrink when the rail is dragged wider —
     without `min-width: 0` on a grid item, fixed-width children would
     prevent the column from contracting. */
  min-width: 0;
  /* Default (rail visible): push the app HARD against the rail
     (margin-left: auto) so there's no gap between the journal and main
     content. Leftover space on wide screens lands on the LEFT side of
     the viewport; body bg fills it. */
  width: 100%;
  max-width: 1100px;
  margin: 0 0 0 auto;
}
/* Rail collapsed → no rail to butt against → CENTER the app instead.
   var(--log-rail-w) goes to 0 when collapsed, so the grid column expands
   to full viewport; right-aligning the 1100-px-capped app would shove it
   to the viewport's right edge with a big empty left gutter (which is
   what the user reported). Centering reads naturally. */
body.rail-collapsed .app-shell > .app {
  margin: 0 auto;
}

/* SPACE OPTIMIZATION: with CONNECT moved into the rail (above the
   log), the original .row-top layout is now empty in both modes:
   - Expert: col-left was CONNECT (gone), col-right was log (gone) →
     entire row hidden, tabs rise to the top.
   - Beginner: col-left empty; col-right has activity-card. Hide just
     col-left so the activity card claims the row. */
.app .row-top .col-left {
  display: none;
}
.app:not(.beginner-mode) .row-top {
  display: none;
}

aside.log-rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #0f1e35);
  border-left: 1px solid var(--border, #1d3556);
  box-shadow: -10px 0 28px rgba(0, 0, 0, 0.35);
  z-index: 50;
  /* Internal scroll if both CONNECT + LOG don't fit in viewport */
  overflow: hidden;
}
/* 🤖 Robot identity card — full consolidation. Stack:
     1. Title block (was main-page header)
     2. Anatomy SVG (clickable parts)
     3. Kit picker (was main-page right-side selector)
   The main-page Maqueen header now collapses entirely; this is the
   single 'what robot are we talking to' panel. */
aside.log-rail > .rail-robot {
  flex: 0 0 auto;
  margin: 8px 8px 0;
  padding: 8px 6px;
  background: var(--bg-deep, #061121);
  border: 1px solid var(--border, #1d3556);
  border-radius: 10px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
/* Title block (moved from main page card-header). The flex:1 inline
   style on the moved div is ignored here since we're a column stack. */
aside.log-rail > .rail-robot > div .card-title {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
aside.log-rail > .rail-robot > div .card-title .icon {
  font-size: 1.05em;
}
aside.log-rail > .rail-robot > div .card-subtitle {
  font-size: 0.7rem;
  line-height: 1.3;
  margin-top: 2px;
  opacity: 0.7;
}
aside.log-rail > .rail-robot > svg {
  width: 100% !important;
  /* ~2/3 of the edge-to-edge size. Bigger than the original 220 px,
     smaller than the full-width 360 px. Lands at a comfortable 240
     px max — robot reads as 'subject of the rail' without dominating. */
  max-width: 240px !important;
  height: auto !important;
  display: block;
  align-self: center;
}
/* Kit picker block (label + select) at the bottom of the card */
aside.log-rail > .rail-robot > .rail-robot-kit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #1d3556);
}
aside.log-rail > .rail-robot > .rail-robot-kit .rail-robot-kit-lbl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary, #93a8c4);
  opacity: 0.7;
  flex-shrink: 0;
}
aside.log-rail > .rail-robot > .rail-robot-kit > select {
  flex: 1;
  min-width: 0;
}

/* CONNECT card on top — auto height (sized to its own content).
   Heavy compaction for the narrow rail: we strip non-essential
   metadata (subtitle, Name row, dim version/build/commit lines)
   and tighten paddings + button sizes. The full build-info is
   still available in the Firmware popup.
   The card keeps proper rounded chrome and floats inside the rail
   with a small margin — reads as a real card, not a stripped panel. */
aside.log-rail > .connection-card {
  flex: 0 0 auto;
  margin: 8px 8px 0 8px;
  padding: 10px 14px 12px;
  background: var(--bg-deep, #061121);
  border: 1px solid var(--border, #1d3556);
  border-radius: 10px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  /* Override any beginner-mode hiding so CONNECT always shows in the rail */
  display: block !important;
}
/* Hide the redundant subtitle (the card-title already says "Connect") */
aside.log-rail > .connection-card .card-subtitle {
  display: none;
}
/* Tighten the header gap */
aside.log-rail > .connection-card .card-header {
  margin-bottom: 4px;
  padding: 0;
}
/* Compact buttons */
aside.log-rail > .connection-card .button-row {
  gap: 4px;
  margin: 4px 0 6px;
}
aside.log-rail > .connection-card .button-row button {
  padding: 5px 9px;
  font-size: 11px;
  min-width: 0;
}
aside.log-rail > .connection-card .button-row .btn-icon {
  font-size: 12px;
}
/* Hide the device-row ("Name: None") — uninformative when disconnected,
   and the status pill already says CONNECTED when it matters */
aside.log-rail > .connection-card .device-row {
  display: none;
}
/* The build-info block (Maqueen Lab / version / built / commit /
   firmware) — keep ONLY the firmware line, hide everything else.
   The full version info still lives one click away in the Firmware
   popup, so nothing's lost. */
aside.log-rail > .connection-card #appBuildInfo > div:not(#fwVersionLine) {
  display: none;
}
aside.log-rail > .connection-card #appBuildInfo {
  margin-top: 0 !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
}
aside.log-rail > .connection-card #appBuildInfo #fwVersionLine {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Footer pair (Firmware + Streams) — same SIZE as Connect/Disconnect
   so all 4 buttons in the CONNECT card share one visual family.
   Visual hierarchy is conveyed by COLOR/FILL, not size:
     1. Connect       — full cyan fill (loud, primary action)
     2. Disconnect    — outlined cyan (medium, opposite)
     3. Firmware      — outlined dim grey (discrete utility)
     4. Streams: ON   — outlined dim yellow (discrete + status tint)
   Same pill shape, same height, same font-weight — only paint differs. */
/* In the rail, force the connection-grid to stack vertically.
   Default is a 2-column grid (main | footer) which works on the
   wide page but in the narrow rail it puts Firmware + streams on
   the SAME row as Connect/Disconnect → 4 buttons squashed in one
   row, the right pair gets clipped off the rail edge. */
aside.log-rail > .connection-card .connection-grid {
  grid-template-columns: 1fr !important;
}
aside.log-rail > .connection-card .connection-footer {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
aside.log-rail > .connection-card .connection-footer button {
  /* Inherit base button sizing (8px 14px / 0.78rem / weight 600 /
     999px radius). Override ONLY the discrete paint scheme. */
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--text-secondary, #93a8c4) !important;
  transition: all 0.15s ease-out;
}
aside.log-rail > .connection-card .connection-footer button:hover {
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: var(--text, #e2e8f0) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
/* Streams keeps a subtle yellow tint on text+border — meaningful
   status cue (yellow = changes BLE traffic), still discrete. */
.mq-streams-in-connect {
  color: rgba(251, 191, 36, 0.75) !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
}
.mq-streams-in-connect:hover {
  color: #fbbf24 !important;
  background: rgba(251, 191, 36, 0.06) !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
}
/* maqueen-panel (live sensor strip) — sits between CONNECT and LOG
   in the rail. The panel was designed for full-page-width with
   inline styles (padding 10/16, margin 0/0/12, font 13 px) baked
   into the HTML; in the narrow rail those inline values overflow.
   Need !important to override the inline values from JS. */
aside.log-rail > #maqueen-panel.in-rail {
  flex: 0 0 auto !important;
  margin: 8px 8px 0 !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  gap: 6px 10px !important;
  border-radius: 10px !important;
  /* Make sure box-sizing is border-box so padding doesn't push
     the panel beyond the rail's available width. */
  box-sizing: border-box !important;
  /* Cap to the parent's content width — never overflow the rail. */
  max-width: calc(100% - 16px);
}
aside.log-rail > #maqueen-panel.in-rail > div {
  font-size: 11px;
}
aside.log-rail > #maqueen-panel.in-rail > div span:first-child {
  /* Sensor labels (LINE / DIST / IR / ACC / BLE) */
  font-size: 9px;
}
/* Compact poll buttons */
aside.log-rail > #maqueen-panel.in-rail button {
  font-size: 9px !important;
  padding: 3px 7px !important;
}
/* Hide the redundant 'Maqueen Lite v4' title (CONNECT above already
   says we're linked). Frees the first wrap row for sensor data. */
aside.log-rail > #maqueen-panel.in-rail > div:first-child {
  display: none !important;
}
/* BLE stats was floated to the right via margin-left:auto — that
   doesn't read well when wrapped. Remove the auto-margin in the rail
   so it flows naturally with the other items. */
aside.log-rail > #maqueen-panel.in-rail > div[title="BLE round-trip stats"] {
  margin-left: 0 !important;
  border-left: none !important;
  padding-left: 0 !important;
}
/* Compact ACC: 3 numbers in 120 px is too wide for the rail. Let it
   shrink naturally — the readout will line-wrap if needed. */
aside.log-rail > #maqueen-panel.in-rail #mq-acc {
  min-width: 0 !important;
}
/* Make sure all direct children can shrink to fit the column */
aside.log-rail > #maqueen-panel.in-rail > div {
  min-width: 0;
}

/* The log card fills the REMAINING vertical space below CONNECT.
   Same floating-card chrome as CONNECT for visual consistency —
   both panels look like proper rounded cards inside the rail. */
aside.log-rail > .log-card {
  /* Force visible regardless of .app.beginner-mode hiding — the rail
     is a deliberate, permanent fixture, so the log shows in any mode. */
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 10px 8px 8px 8px;
  background: var(--bg-deep, #061121);
  border: 1px solid var(--border, #1d3556);
  border-radius: 10px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  /* Inner content needs to round-clip to the card's curved corners,
     otherwise the log scroll area pokes past the rounded edges. */
  overflow: hidden;
}
/* Inner #log fills remaining height so the scroll area expands to the
   bottom of the rail instead of sitting short. */
aside.log-rail .log-card #log {
  flex: 1 1 auto;
  min-height: 0;
}

/* SPACE OPTIMIZATION: with CONNECT moved to the rail, .row-top has
   no children left (col-left was CONNECT, col-right was empty in
   expert mode). Hide the entire row so the tabs/main content rise up. */
.app .row-top:empty,
.app:not(.beginner-mode) .row-top {
  display: none;
}
/* Beginner mode: row-top still has the activity-card in col-right.
   Override the above with higher-specificity rule. */
.app.beginner-mode .row-top {
  display: flex;
}

/* Drag handle on the LEFT edge of the rail — transparent until
   hover/drag so it doesn't compete with the rail border. */
.log-rail-handle {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  background: transparent;
  z-index: 51;
  touch-action: none;
}
.log-rail-handle:hover,
.log-rail-handle.dragging {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--accent, #38bdf8) 45%,
    var(--accent, #38bdf8) 55%,
    transparent 100%
  );
}
.log-rail-handle.dragging {
  width: 10px;
  left: -5px;
}

/* Collapse / expand chevron — KID-FRIENDLY: big enough to spot,
   high contrast, clearly tappable. Sits on the rail's left edge
   like a tab. Cyan accent fill so it stands out against the dark
   rail without being garish. */
.log-rail-collapse-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: var(--log-rail-w, 380px);
  z-index: 100;
  width: 26px;
  height: 72px;
  gap: 4px;
  background: var(--accent, #38bdf8);
  color: var(--bg-deep, #061121);
  border: 2px solid var(--accent, #38bdf8);
  border-right: none;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  padding: 0 0 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Gentle outward shadow + glow so the tab clearly 'lifts' off
     the rail edge — instantly readable as a button, not a stripe. */
  box-shadow:
    -3px 0 8px rgba(0, 0, 0, 0.45),
    0 0 12px rgba(56, 189, 248, 0.35);
  transition: right 0.22s ease-out, transform 0.15s, background 0.12s,
              box-shadow 0.15s;
}
.log-rail-collapse-btn:hover {
  background: #7dd3fc;
  border-color: #7dd3fc;
  transform: translateY(-50%) scale(1.08);
  box-shadow:
    -3px 0 12px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(125, 211, 252, 0.6);
}
.log-rail-collapse-btn:active {
  transform: translateY(-50%) scale(0.96);
}
/* Connection-status pill, when relocated into the page header by
   log-rail.js. It needs to read as 'one of the header chips' (compact
   pill, sits inline) rather than a card-sized block. */
.header #connectionStatus.status-pill.in-header {
  margin: 0 4px;
  padding: 4px 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
  flex: 0 0 auto;
}
.header #connectionStatus.status-pill.in-header .status-dot {
  width: 8px;
  height: 8px;
}
/* Chevron + BLE status dot stack inside the collapse tab.
   When the rail is collapsed the CONNECT card is hidden, so this dot
   becomes the ONLY connection-state indicator on screen. Green pulse =
   linked, red = offline. Amber/grey is the unknown default before the
   first event fires. */
.log-rail-collapse-chev {
  display: block;
  line-height: 1;
}
.log-rail-status-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;            /* unknown / pre-init */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset;
  transition: background 0.2s, box-shadow 0.2s;
}
.log-rail-collapse-btn.is-connected .log-rail-status-dot {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.9),
              0 0 0 1px rgba(0,0,0,0.35) inset;
  animation: railStatusPulse 1.6s ease-in-out infinite;
}
.log-rail-collapse-btn.is-disconnected .log-rail-status-dot {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.85),
              0 0 0 1px rgba(0,0,0,0.35) inset;
}
@keyframes railStatusPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.78); }
}
/* COLLAPSED state — rail width snaps to 0, aside hidden, button at edge */
body.rail-collapsed {
  --log-rail-w: 0px !important;
}
body.rail-collapsed aside.log-rail {
  display: none;
}
body.rail-collapsed .log-rail-collapse-btn {
  right: 0;
}

.mq-copilot-btn { color: #38bdf8; border-color: rgba(56,189,248,0.4); }
.mq-copilot-btn.mq-copilot-on {
  background: #38bdf8; color: #01202b; border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56,189,248,0.5);
}
/* ============================================================
   WAVE 9.6 — Slide-out drawers for Settings & Help
   Pattern matches the message log rail: fixed right-edge panel
   that slides in/out. Triggered by ⚙ + 📖 header icon buttons.
   ============================================================ */
.mq-drawer-backdrop {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(6, 17, 33, 0.4);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.mq-drawer-backdrop.mq-backdrop-open {
  opacity: 1; pointer-events: auto;
}
.mq-drawer {
  position: fixed; top: 0; right: 0;
  width: 420px; max-width: 95vw; height: 100vh;
  min-width: 280px;
  z-index: 9995;
  background: linear-gradient(180deg, var(--card-bg, #0f1f3d), var(--bg, #0a0e2e));
  border-left: 2px solid var(--drawer-accent, #38bdf8);
  box-shadow: -10px 0 40px rgba(0,0,0,0.5);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex; flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  overflow: hidden;   /* keeps body scroll clean; handle is inside */
}
.mq-drawer.mq-drawer-open { transform: translateX(0); }
.mq-drawer-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(148,163,184,0.15);
  background: linear-gradient(180deg, rgba(56,189,248,0.06), transparent);
}
.mq-drawer-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--drawer-accent, #38bdf8);
  text-transform: uppercase;
}
.mq-drawer-close {
  margin-left: auto;
  background: none; border: none;
  color: var(--text-secondary, #94a3b8);
  font-size: 26px; line-height: 1; cursor: pointer;
  padding: 0 6px; border-radius: 6px;
  transition: color 0.12s, background 0.12s;
}
.mq-drawer-close:hover {
  color: var(--text, #e6eef9);
  background: rgba(255,255,255,0.06);
}
.mq-drawer-body {
  padding: 16px 18px;
  overflow-y: auto;
  overflow-x: hidden;   /* no x-clip artifacts; resize handle owns width */
  flex: 1;
  font-size: 14px;
  color: var(--text, #e6eef9);
}
/* Drag handle — 6px strip on the left edge */
.mq-drawer-resize-handle {
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 100%;
  cursor: ew-resize;
  z-index: 10;
  background: transparent;
  transition: background 0.15s;
}
.mq-drawer-resize-handle:hover,
.mq-drawer-resize-handle:active {
  background: rgba(56,189,248,0.18);
}
/* Header icon buttons (⚙ Settings + 📖 Help) — small, opacity 0.7,
   hover full opacity. Matches the Connect/Disconnect button pair
   in size so the row stays tidy. */
.mq-header-icon-btn {
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.25);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.85;
  margin-left: 4px;
  transition: opacity 0.12s, background 0.12s, transform 0.1s;
}
.mq-header-icon-btn:hover {
  opacity: 1;
  background: rgba(56,189,248,0.18);
  transform: scale(1.05);
}
.mq-header-icon-btn:active { transform: scale(0.95); }

/* On phones the drawer takes the full width */
@media (max-width: 480px) {
  .mq-drawer { width: 100vw; max-width: 100vw; border-left: none; }
}

/* ============================================================
   WAVE 9.4 — RADAR: GO BIG OR GO HOME.
   User: "we have place, bigger radar, it shall be impressionnant".
   Drop the size cap, beef up the phosphor, scale HUD text up,
   add a real CRT vibe. Distance sub-tab becomes a centerpiece.
   ============================================================ */

/* The Distance sub-tab has plenty of width; let radar fill it.
   Min height so even on tiny readings the dish stays substantial. */
[data-mq-sub="ultrasonic"] .mq-radar-style {
  padding: 22px 18px 18px !important;
  border-width: 2px !important;
  margin-bottom: 16px !important;
}
/* Scope: only the SVG inside the FIRST direct-child div of each
   .mq-radar-style block. The sparkline SVG (Bat-mode 'last 30
   pings') is in a SECOND direct-child div sibling — must NOT
   match this rule, or it gets stretched from 32 px → 360 px and
   becomes a giant black box. */
[data-mq-sub="ultrasonic"] .mq-radar-style > div:first-child > svg {
  width: 100% !important;
  min-height: 360px;
  max-height: 560px;
}

/* HUD text inside the SVG — viewBox-relative, but we boost the
   actual font-size attribute via raw CSS to keep it bold. */
[data-mq-sub="ultrasonic"] svg text {
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Marker chip bar (dots / sectors / rays / stars / emoji) — bigger,
   with bouncy hover. Five chips that decide the radar's personality. */
.mq-sweep-mode-bar {
  gap: 8px !important;
  padding: 12px 14px !important;
  flex-wrap: wrap;
}
.mq-sweep-mode-lbl {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em;
  color: #86efac;
}
.mq-sweep-mode {
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  transition: transform 0.12s, background 0.15s, box-shadow 0.18s !important;
}
.mq-sweep-mode:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 14px rgba(34,197,94,0.35);
}
.mq-sweep-mode-active {
  background: linear-gradient(135deg, #4ade80, #22c55e) !important;
  color: #052e16 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 16px rgba(34,197,94,0.6);
}

/* Distance band legend — bigger, more prominent */
.mq-radar-style > div:nth-child(2) {
  font-size: 12px !important;
  padding: 8px 14px !important;
  font-weight: 700;
}
.mq-radar-style > div:nth-child(2) span {
  font-size: 12px !important;
}

/* ✨ EXTRA PHOSPHOR GLOW — radial scanlines + drop-shadow
   for the beam itself. Pure CSS so no JS surgery needed. */
#mqSweepBeamG {
  filter: drop-shadow(0 0 6px rgba(187,247,208,0.65)) drop-shadow(0 0 14px rgba(34,197,94,0.45));
}

/* HUD title 'RADAR DISPLAY' — more heroic font-size via inline override
   would be needed; here we tweak letter-spacing. */
[id="mqSweepHudA"], [id="mqSweepHudD"] {
  font-size: 13px !important;
}

/* Sweep radar container — extra dramatic background gradient,
   subtle scanline texture overlay (CRT phosphor decay). */
.mq-radar-style[data-style="sweep"] {
  background:
    repeating-linear-gradient(0deg, rgba(34,197,94,0.04) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 100%, #0a1f0a 0%, #02080d 100%) !important;
}

/* Ping-now button + audio + auto + nolink row — wider chips */
[id="mqSweepPingNow"] {
  font-size: 14px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
}

/* "Ping rate" slider section — bigger labels */
[id="mqSweepPingRate"] {
  flex: 1; min-height: 28px;
}
[id="mqSweepPingRateRead"] {
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Distance readout below the radar — make it MASSIVE */
[id="mqSonarNum"], [id="mqLidarNum"], [id="mqHeatNum"], [id="mqSweepNum"], [id="mqBatNum"] {
  font-size: 36px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 16px currentColor;
  letter-spacing: 0.04em;
}

/* The single-shot dist tip line ('Tip — enable S1 Sweep ...') */
.mq-radar-style div[style*="border:1px solid"][style*="margin"] {
  font-size: 13px !important;
  padding: 10px 14px !important;
}

/* ============================================================
   WAVE 9.3 — KID-FRIENDLY TYPOGRAPHY (target age 10).
   User: "small fonts not very kids friendly (10 years old)".
   Every visible label in the servos panel gets BIGGER and BOLDER.
   No more 8 / 10 / 11 px text in kid-facing positions.
   ============================================================ */

/* MODE buttons (180° position / 360° speed) — these are PRIMARY
   mode switches, they should look like real chunky tabs. */
.mq-servo-mode {
  font-size: 14px !important;
  padding: 12px 8px !important;
  letter-spacing: 0.02em !important;
  min-height: 44px !important;
}

/* S1 / S2 port labels — primary identity */
#mqS1Label, #mqS2Label {
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
}

/* Readouts (+65 %, 90°, 0%) — the LIVE NUMBER, must be big */
#mqS1Readout, #mqS2Readout {
  font-size: 22px !important;
  font-weight: 900 !important;
  min-width: 56px !important;
  text-shadow: 0 0 14px currentColor;
}

/* Quick buttons (0°, 90°, 180°, ▶ Sweep) and 360-mode buttons
   (-100%, STOP, +100%, ▶ Sweep) — taller, bigger text */
.mq-servo-quick, .mq-servo-sweep {
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 11px 8px !important;
  min-height: 42px !important;
  letter-spacing: 0.04em;
}

/* Section labels (MODE / CONTROLS) — small but distinctly colored,
   positioned to read as a chip-tag, not body text */
.mq-servo-mode-group > div:first-child,
.mq-servo-controls-group > div:first-child {
  font-size: 11px !important;
  padding: 4px 10px !important;
  background: rgba(56,189,248,0.12);
  border-radius: 999px;
  display: inline-block !important;
  width: auto !important;
}

/* "Sweep speed slow ... fast 1.4 s/cycle" — bump those labels */
[id="mqServoSweepSpeed"] {
  flex: 1; min-height: 28px;
}
[id="mqServoSweepSpeedRead"] {
  font-size: 14px !important;
  font-weight: 800 !important;
  min-width: 80px !important;
}

/* The whole "Sweep speed + Sweep range" global panel — labels bumped */
[data-mq-sub="servos"] div[style*="font-family:'JetBrains Mono'"] {
  font-size: 13px !important;
  color: var(--text, #e6eef9) !important;
}
/* "▶ Sweep speed" / "↔ Sweep range" tags — make them real titles */
[data-mq-sub="servos"] div[style*="font-family:'JetBrains Mono'"] > div > span:first-child {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  letter-spacing: 0.04em;
}

/* "slow" / "fast" mini-labels around the speed slider */
[id="mqServoSweepSpeed"] ~ span,
span[style*="opacity:0.7"] {
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Sweep preset chips — already sized but the font was 11 px */
.mq-sweep-preset {
  font-size: 13px !important;
  padding: 8px 16px !important;
}

/* fine-tune disclosure — make it a real button, not gray fine print */
details summary {
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  background: rgba(250,204,21,0.08);
  border-radius: 8px;
  border: 1px solid rgba(250,204,21,0.25);
  display: inline-block;
  margin: 6px 0;
}
details summary:hover {
  background: rgba(250,204,21,0.18);
  border-color: rgba(250,204,21,0.5);
}
details[open] summary {
  background: rgba(250,204,21,0.2);
  border-color: rgba(250,204,21,0.6);
  margin-bottom: 12px;
}
details summary::-webkit-details-marker { color: #fbbf24; }

/* "view PWM signal · 1.83 ms HIGH every 20 ms" — make it a clear button */
[data-mq-sub="servos"] details > summary[style*="📟"],
details > summary:has(+ * #mqServoScopeInfoSummary),
[data-mq-sub="servos"] > details > summary {
  font-size: 14px !important;
  padding: 12px 16px !important;
  background: rgba(74,222,128,0.08) !important;
  border-color: rgba(74,222,128,0.3) !important;
  border-radius: 10px !important;
  width: 100%;
  display: block;
}
#mqServoScopeInfoSummary {
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* "Code that runs on the micro:bit" + the language tabs — bump */
[data-mq-sub="servos"] > div:last-child > div:first-child > span:first-child {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text, #e6eef9) !important;
}
.mq-servo-codetab {
  font-size: 12px !important;
  padding: 6px 12px !important;
}
#mqServoCodeView {
  font-size: 14px !important;
  line-height: 1.7 !important;
  padding: 14px 16px !important;
}
#mqServoCodeStatus {
  font-size: 12px !important;
}

/* PWM Lab card — bump game text */
#mqPwmLab > div:first-child > span:nth-child(2) {
  font-size: 16px !important;
}
#mqPwmTarget {
  font-size: 32px !important;
}
#mqPwmGuessRead {
  font-size: 18px !important;
}
#mqPwmSubmit, #mqPwmReset {
  font-size: 13px !important;
  padding: 10px 18px !important;
}
#mqPwmFeedback {
  font-size: 13px !important;
  font-weight: 600;
}
#mqPwmLab > div:last-child {
  font-size: 12px !important;
}

/* HIERARCHY divider — visually separate the "per-servo cards"
   block from the "global sweep" panel below. A subtle but
   clear bar with a label so kids see the boundary. */
[data-mq-sub="servos"] > div[style*="font-family:'JetBrains Mono'"]::before {
  content: '⚙ shared sweep settings';
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #fbbf24;
  text-transform: uppercase;
  padding: 6px 12px;
  background: rgba(251,191,36,0.1);
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 10px;
}

/* ============================================================
   WAVE 9.2 — BREATHING ROOM. User: "aere plus la page".
   Cumulative changes packed every section tight. This block
   increases padding, gaps, and margins across every major
   surface so the page can BREATHE.
   ============================================================ */

/* Sub-tab pages — generous interior padding */
.mq-sub-page {
  padding: 22px !important;
  margin-top: 8px;
}
/* Header zone of each sub-tab — breathe below it */
.mq-sub-page > div:first-child {
  margin-bottom: 16px !important;
}

/* Servo cards — bigger gap between S1 and S2, more inner padding */
[data-mq-sub="servos"] > div:first-of-type ~ div[style*="grid-template-columns"] {
  gap: 22px !important;
}
.mq-servo-mode-group,
.mq-servo-controls-group {
  padding: 14px !important;
}
.mq-servo-mode-group { margin-top: 14px !important; }
.mq-servo-controls-group { margin-top: 14px !important; }

/* MODE buttons row — taller pills */
.mq-servo-mode {
  padding: 10px 8px !important;
}

/* Quick-angle button row — taller, with breathing space */
#mqS1Quick, #mqS2Quick {
  gap: 8px !important;
  margin-top: 10px !important;
}
.mq-servo-quick {
  padding: 9px 6px !important;
  min-height: 36px;
}
.mq-servo-sweep {
  padding: 9px 6px !important;
  min-height: 36px;
}

/* Sweep speed + range bar — taller, more padding */
[data-mq-sub="servos"] > div[style*="font-family:'JetBrains Mono'"] {
  padding: 14px 16px !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

/* Sweep range chips — more spread */
.mq-sweep-preset {
  padding: 7px 14px !important;
  margin: 2px;
}

/* fine-tune disclosure spacing */
details {
  margin-top: 10px;
}
details[open] {
  padding-bottom: 6px;
}

/* PWM scope card — more padding inside */
[data-mq-sub="servos"] details[style*="background:var(--bg-deep"] {
  margin-top: 18px !important;
}

/* Code preview block — more breathing room */
[data-mq-sub="servos"] > div:last-child {
  margin-top: 18px !important;
}

/* PWM Lab game card — breathe before it */
#mqPwmLab {
  margin-top: 22px !important;
  padding: 18px !important;
}

/* Drive sub-tab — same generosity */
[data-mq-sub="drive"] > div[style*="display:flex"] {
  gap: 14px;
}
.mq-macro-bar {
  padding: 10px 12px !important;
  gap: 8px !important;
  margin-top: 14px !important;
}
.mq-mode-dial {
  padding: 6px 10px !important;
  gap: 6px !important;
  margin-bottom: 0 !important;  /* row-gap on .mq-macro-bar handles spacing */
}
.mq-mode-pill {
  padding: 7px 12px !important;
  font-size: 12.5px !important;
}
#mqPersonalityBar {
  padding: 10px 14px !important;
  margin-bottom: 14px !important;
  gap: 8px !important;
}
.mq-personality-btn {
  padding: 7px 14px !important;
  font-size: 12px !important;
}

/* Mini-games strip — air */
#mqMiniGames {
  padding: 14px 16px !important;
  margin-top: 14px !important;
}
#mqMiniGames > div:first-child {
  gap: 14px !important;
}

/* Math the Distance + Drift Champion + SLAM bar — all airier */
#mqMathGame, #mqDriftBar, #mqSlamBar {
  padding: 14px 16px !important;
  margin-top: 14px !important;
}
#mqMathGame > div:first-child,
#mqDriftBar,
#mqSlamBar {
  gap: 12px !important;
}

/* Path card — air around the buttons */
.mq-odo-header {
  gap: 8px !important;
  padding: 6px 4px !important;
}
/* round buttons ignore the old text-button override */
.mq-map-btn { padding: 0 !important; }
.mq-chal-bar {
  padding: 12px 16px !important;
  gap: 14px !important;
}

/* Dashboard cluster — gauges have room */
.mq-dashboard {
  padding: 22px !important;
}
.mq-gauges-grid {
  gap: 18px !important;
}

/* Top-level row container — bigger gap between rows */
.rows-container {
  gap: 24px !important;
}

/* Cards in general — softer hairline border instead of hard 1 px */
[data-mq-sub] {
  border-width: 1px !important;
}

/* Section headings inside cards — actual breathing room above */
[data-mq-sub] h3,
[data-mq-sub] > div[style*="font-weight:700"] {
  letter-spacing: 0.04em;
}

/* The buzzer / NeoPixel / line / etc. games inside their cards — air */
#mqMorseGame, #mqSimonGame, #mqTuneGame, #mqLineRace {
  padding: 18px !important;
  margin-top: 18px !important;
}
#mqMorseGame > div:first-child,
#mqSimonGame > div:first-child,
#mqTuneGame > div:first-child,
#mqLineRace > div:first-child {
  margin-bottom: 14px !important;
  gap: 12px !important;
}
#mqMorseGame > div:nth-child(2),
#mqLineRace > div:nth-child(2) {
  gap: 10px !important;
  margin-bottom: 10px !important;
}

/* Live sensor strip in the rail — slightly more breathing */
#maqueen-panel {
  padding: 12px 16px !important;
  gap: 14px !important;
}

/* CONNECT card — generous padding */
.connection-card {
  padding: 18px !important;
}
.connection-grid {
  gap: 14px !important;
}

/* Section divider — actual visible space + a hairline */
hr.div, .section-divider {
  margin: 36px 0 !important;
}

/* ============================================================
   WAVE 9.1 — SERVOS PANEL: typography + life.
   User feedback: "still overlapping, texts too small, no animations,
   boring not funny". Punchy hierarchy + micro-interactions on every
   clickable surface. Pure CSS.
   ============================================================ */

/* Bigger, brighter section labels — "MODE", "CONTROLS" etc. */
.mq-servo-mode-group > div:first-child,
.mq-servo-controls-group > div:first-child {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  color: #38bdf8 !important;
  margin-bottom: 8px !important;
  position: relative;
  padding-left: 14px;
}
.mq-servo-mode-group > div:first-child::before,
.mq-servo-controls-group > div:first-child::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
  box-shadow: 0 0 8px currentColor;
}

/* S1 / S2 labels — bigger, gradient, glowing */
#mqS1Label, #mqS2Label {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
}
#mqS1Readout, #mqS2Readout {
  font-size: 16px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px currentColor;
  transition: transform 0.12s, color 0.12s;
}

/* Slider thumb — glowing puck, scales on drag */
input[type="range"]#mqS1Slider::-webkit-slider-thumb,
input[type="range"]#mqS2Slider::-webkit-slider-thumb,
input[type="range"]#mqServoSweepSpeed::-webkit-slider-thumb,
input[type="range"]#mqServoSweepFrom::-webkit-slider-thumb,
input[type="range"]#mqServoSweepTo::-webkit-slider-thumb {
  box-shadow: 0 0 12px currentColor;
}

/* Quick angle buttons — bouncy hover, ripple on click */
.mq-servo-quick {
  position: relative;
  overflow: hidden;
  font-weight: 700 !important;
  font-size: 12px !important;
  transition: transform 0.12s, box-shadow 0.18s, background 0.15s, border-color 0.15s !important;
}
.mq-servo-quick:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 14px rgba(56,189,248,0.35);
  border-color: currentColor !important;
  background: rgba(56,189,248,0.08) !important;
}
.mq-servo-quick:active { transform: translateY(0) scale(0.97); }
.mq-servo-quick::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
  transition: opacity 0.4s, transform 0.4s;
}
.mq-servo-quick:active::after {
  opacity: 0.4;
  transform: scale(1.6);
  transition: 0s;
}

/* The ▶ Sweep button — visually DISTINCT (it's a toggle, not a snap).
   Filled-pill look with a constant subtle pulse, hot when active. */
.mq-servo-sweep {
  position: relative;
  font-weight: 800 !important;
  font-size: 12px !important;
  background: linear-gradient(135deg, #fbbf24, #fb923c) !important;
  color: #1a0e2a !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 10px rgba(251,191,36,0.35);
  transition: transform 0.12s, box-shadow 0.18s !important;
}
.mq-servo-sweep:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 18px rgba(251,191,36,0.55);
}
.mq-servo-sweep.mq-servo-sweep-active,
.mq-servo-sweep[aria-pressed="true"] {
  background: linear-gradient(135deg, #ef4444, #fb923c) !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  animation: mqSweepPulse 1.2s ease-in-out infinite;
}
@keyframes mqSweepPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(239,68,68,0.5); }
  50%      { box-shadow: 0 0 24px rgba(239,68,68,0.85), 0 0 0 6px rgba(239,68,68,0.15); }
}

/* MODE tabs (180° / 360°) — chunky, snappy, visible state */
.mq-servo-mode {
  position: relative;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  padding: 8px 4px !important;
  transition: background 0.15s, color 0.15s, transform 0.12s !important;
}
.mq-servo-mode:hover {
  transform: translateY(-1px);
  background: rgba(56,189,248,0.08) !important;
}
.mq-servo-mode.mq-servo-mode-active {
  background: rgba(56,189,248,0.18) !important;
  border-color: currentColor !important;
  font-weight: 800 !important;
  box-shadow: inset 0 0 10px rgba(56,189,248,0.2);
}

/* Sweep range preset chips — bouncy, with a sliding accent on active */
.mq-sweep-preset {
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  background: rgba(250,204,21,0.06) !important;
  color: #facc15 !important;
  border: 1px solid rgba(250,204,21,0.4) !important;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s, box-shadow 0.18s !important;
}
.mq-sweep-preset:hover {
  transform: translateY(-2px) scale(1.06);
  background: rgba(250,204,21,0.16) !important;
  box-shadow: 0 4px 12px rgba(250,204,21,0.3);
}
.mq-sweep-preset:active { transform: translateY(0) scale(0.96); }
.mq-sweep-preset.mq-sweep-preset-active {
  background: linear-gradient(135deg, #facc15, #fbbf24) !important;
  color: #1a0e2a !important;
  font-weight: 800 !important;
  box-shadow: 0 0 14px rgba(250,204,21,0.55), inset 0 -2px 4px rgba(0,0,0,0.15);
}

/* Sweep speed bar — bigger labels with character */
[id="mqServoSweepSpeed"] + span,
[id="mqServoSweepSpeedRead"] {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
}
.mq-servo-mode-group + .mq-servo-controls-group + div span:first-child,
.mq-servo-controls-group ~ div > div:first-child > span:first-child {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #facc15 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* fine-tune disclosure — bigger, more inviting */
details summary {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 4px 0;
  transition: color 0.15s;
}
details summary:hover { color: var(--accent, #38bdf8) !important; }
details[open] summary { color: var(--accent, #38bdf8) !important; }
details summary::marker { color: #facc15; }

/* PWM scope summary — bigger, with a wave-pulse animation indicator */
[id="mqServoScopeInfoSummary"] {
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.02em;
  position: relative;
  padding-right: 18px;
}
[id="mqServoScopeInfoSummary"]::after {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #facc15;
  margin-left: 8px;
  vertical-align: middle;
  animation: mqScopePulse 1s ease-in-out infinite;
}
@keyframes mqScopePulse {
  0%, 100% { transform: scale(1);   opacity: 1;   box-shadow: 0 0 0 0 rgba(250,204,21,0.7); }
  50%      { transform: scale(1.4); opacity: 0.7; box-shadow: 0 0 0 6px rgba(250,204,21,0); }
}

/* Servo-card itself — gentle hover lift so kids see it as alive */
[data-mq-sub="servos"] > div:nth-of-type(1) > div {
  transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s !important;
}
[data-mq-sub="servos"] > div:nth-of-type(1) > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 0 18px rgba(56,189,248,0.1);
}

/* Big arrow ▶ next to "Sweep speed" — animated bouncing */
[id*="mqServoSweepSpeed"] + span,
.mq-macro-bar { /* unused inheritance fix */ }
[for="mqServoSweepSpeed"],
div[style*="Sweep speed"] {
  /* If you find a precise hook, animate the play arrow */
}

/* ============================================================
   WAVE 9 — Mode dial · Floating STOP · Density profiles.
   See js/mode-dial.js + js/cockpit-redesign.js for behavior.
   ============================================================ */

/* --- MODE DIAL --- the segmented input selector ---------------- */
.mq-mode-dial {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
  padding: 4px 8px;
  background: rgba(56,189,248,0.04);
  border: 1px solid rgba(56,189,248,0.18);
  border-radius: 10px;
  width: 100%;
  margin-bottom: 6px;
}
.mq-mode-dial-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #94a3b8;
  padding: 0 8px 0 4px;
  text-transform: uppercase;
}
.mq-mode-pill {
  padding: 5px 10px;
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.mq-mode-pill:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text, #e6eef9);
}
.mq-mode-pill.mq-mode-pill-active {
  background: var(--mode-color, #38bdf8);
  color: #0a1628;
  border-color: var(--mode-color, #38bdf8);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mode-color, #38bdf8) 40%, transparent);
  font-weight: 800;
}

/* --- FLOATING STOP --- big red safety button ------------------- */
/* Shared base for all floating action buttons */
#mqFabStop, #mqFabConnect {
  position: fixed;
  bottom: 20px;
  z-index: 9000;
  width: 84px; height: 84px;
  border-radius: 50%;
  color: #fff;
  border: 4px solid #fff;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  transition: transform 0.1s, box-shadow 0.15s;
}
#mqFabStop {
  right: 20px;
  background: radial-gradient(circle at 30% 30%, #fca5a5, #dc2626 60%, #7f1d1d);
  box-shadow: 0 8px 28px rgba(220,38,38,0.55), 0 0 0 4px rgba(0,0,0,0.3);
  animation: mqFabPulse 2.4s ease-in-out infinite;
}
#mqFabConnect {
  left: 20px;
  background: radial-gradient(circle at 30% 30%, #67e8f9, #0284c7 60%, #0c4a6e);
  box-shadow: 0 8px 28px rgba(2,132,199,0.6), 0 0 0 4px rgba(0,0,0,0.3);
  animation: mqFabConnectPulse 1.8s ease-in-out infinite;
}
#mqFabStop:hover  { transform: scale(1.08); box-shadow: 0 12px 36px rgba(220,38,38,0.75), 0 0 0 4px rgba(0,0,0,0.3); }
#mqFabStop:active { transform: scale(0.94); }
#mqFabStop.mq-fab-flash {
  background: radial-gradient(circle at 30% 30%, #fff, #fca5a5 60%, #dc2626);
}
#mqFabStop .mq-fab-icon, #mqFabConnect .mq-fab-icon { font-size: 28px; line-height: 1; }
#mqFabStop .mq-fab-label, #mqFabConnect .mq-fab-label { font-size: 11px; letter-spacing: 0.12em; margin-top: 2px; }
#mqFabConnect:hover  { transform: scale(1.08); box-shadow: 0 12px 36px rgba(2,132,199,0.85), 0 0 0 4px rgba(0,0,0,0.3); }
#mqFabConnect:active { transform: scale(0.94); }
@keyframes mqFabPulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(220,38,38,0.55), 0 0 0 4px rgba(0,0,0,0.3); }
  50%      { box-shadow: 0 8px 28px rgba(220,38,38,0.55), 0 0 0 4px rgba(0,0,0,0.3), 0 0 0 14px rgba(220,38,38,0.18); }
}
@keyframes mqFabConnectPulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(2,132,199,0.6), 0 0 0 4px rgba(0,0,0,0.3); }
  50%      { box-shadow: 0 8px 28px rgba(2,132,199,0.6), 0 0 0 4px rgba(0,0,0,0.3), 0 0 0 18px rgba(2,132,199,0.22); }
}
@media (max-width: 640px) {
  #mqFabStop    { width: 72px; height: 72px; right: 12px; bottom: 12px; }
  #mqFabConnect { width: 72px; height: 72px; left:  12px; bottom: 12px; }
}

/* --- FLOATING LABS --- bottom-center shortcut to /labs/ hub.
   Same size as STOP/CONNECT (84 px) for visual parity; YELLOW radial
   gradient — clearly distinct from STOP (red) and CONNECT (cyan). */
#mqFabLabs {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fde68a, #f59e0b 60%, #78350f);
  color: #fff;
  border: 4px solid #fff;
  box-shadow: 0 8px 28px rgba(245,158,11,0.6), 0 0 0 4px rgba(0,0,0,0.3);
  cursor: pointer;
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  transition: transform 0.1s, box-shadow 0.15s;
}
#mqFabLabs .mq-fab-icon  { font-size: 28px; line-height: 1; }
#mqFabLabs .mq-fab-label { font-size: 11px; letter-spacing: 0.12em; margin-top: 2px; }
#mqFabLabs:hover  { transform: translateX(-50%) scale(1.08); box-shadow: 0 12px 36px rgba(245,158,11,0.85), 0 0 0 4px rgba(0,0,0,0.3); }
#mqFabLabs:active { transform: translateX(-50%) scale(0.94); }
@media (max-width: 640px) {
  #mqFabLabs { width: 72px; height: 72px; bottom: 12px; }
}

/* --- DENSITY PICKER MENU -------------------------------------- */
.mq-density-menu {
  background: var(--card-bg, #0f1f3d);
  border: 1px solid rgba(56,189,248,0.3);
  border-radius: 10px;
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.5);
  z-index: 9100;
}
.mq-density-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text, #e6eef9);
  font-family: inherit;
}
.mq-density-item:hover { background: rgba(56,189,248,0.12); }
.mq-density-item-label { font-size: 14px; font-weight: 700; }
.mq-density-item-desc {
  font-size: 11px; color: var(--text-secondary, #94a3b8);
  margin-top: 2px;
}
.mq-density-btn:hover { opacity: 1; }

/* --- DENSITY-PROFILE rules — what each level hides ------------ */
/* 🐣 BEGINNER: just keypad + speed + STOP. Hide everything advanced. */
body.mq-density-beginner #mqPersonalityBar,
body.mq-density-beginner #mqMiniGames,
body.mq-density-beginner #mqMathGame,
body.mq-density-beginner #mqSlamBar,
body.mq-density-beginner #mqDriftBar,
body.mq-density-beginner #mqMacroBar .mq-macro-rec,
body.mq-density-beginner #mqMacroBar .mq-macro-play,
body.mq-density-beginner .mq-mode-dial,
body.mq-density-beginner #mqHeadBlock,
body.mq-density-beginner #mqBatBlock,
body.mq-density-beginner #mqDashboardCard .mq-lcd-strip,
body.mq-density-beginner #mqDriveAutoWander,
body.mq-density-beginner #mqWanderObstacle,
body.mq-density-beginner [data-i18n="mq_wander_obstacle"] {
  display: none !important;
}

/* 🥷 HACKER: surface everything that's normally hidden — re-show
   the FX/hacker buttons that mode-dial.js stuffed away in the
   macro bar. */
body.mq-density-hacker #mqSynBtn,
body.mq-density-hacker #mqFuzzBtn,
body.mq-density-hacker #mqFencingBtn {
  display: inline-flex !important;
}

/* 🎬 DEMO: same as beginner but keep wander button visible (auto-
   armed by JS on profile switch). */
body.mq-density-demo #mqPersonalityBar,
body.mq-density-demo #mqMiniGames,
body.mq-density-demo #mqMathGame,
body.mq-density-demo #mqSlamBar,
body.mq-density-demo #mqDriftBar,
body.mq-density-demo #mqMacroBar .mq-macro-rec,
body.mq-density-demo #mqMacroBar .mq-macro-play,
body.mq-density-demo .mq-mode-dial {
  display: none !important;
}

.mq-claude-btn { color: #38bdf8; border-color: rgba(56,189,248,0.5); }
.mq-claude-btn.mq-claude-on {
  background: #38bdf8; color: #01202b; border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56,189,248,0.6);
}
.mq-fencing-btn { color: #ef4444; border-color: rgba(239,68,68,0.5); }
.mq-fencing-btn.mq-fencing-on {
  background: #ef4444; color: #fff; border-color: #ef4444;
  box-shadow: 0 0 12px rgba(239,68,68,0.6);
  animation: mqFencePulse 1.4s ease-in-out infinite;
}
@keyframes mqFencePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.mq-whistle-btn { color: #fbbf24; border-color: rgba(251,191,36,0.4); }
.mq-whistle-btn.mq-whistle-on {
  background: #fbbf24; color: #01202b; border-color: #fbbf24;
}
.mq-gesture-btn { color: #22d3ee; border-color: rgba(34,211,238,0.4); }
.mq-gesture-btn.mq-gesture-on {
  background: #22d3ee; color: #01202b; border-color: #22d3ee;
  box-shadow: 0 0 10px rgba(34,211,238,0.5);
}
.mq-fuzz-btn { color: #ef4444; border-color: rgba(239,68,68,0.5); }
.mq-fuzz-btn:hover {
  background: rgba(239,68,68,0.15); border-color: #ef4444;
}
.mq-syn-btn { color: #22d3ee; border-color: rgba(34,211,238,0.4); }
.mq-syn-btn.mq-syn-on {
  background: #22d3ee;
  color: #01202b;
  border-color: #22d3ee;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(34,211,238,0.5);
}
.mq-sniffer-btn.mq-sniffer-on {
  background: #38bdf8 !important;
  color: #01202b !important;
  border-color: #38bdf8 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 8px rgba(56,189,248,0.5);
}
.mq-headlock-btn.mq-headlock-on {
  background: #fbbf24 !important;
  color: #01202b !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 8px rgba(251,191,36,0.5);
}
/* Tilt-to-drive toggle — golden, pulses to signal 'sensor active'. */
.mq-tilt-btn { color: #fbbf24; border-color: rgba(251,191,36,0.4); }
.mq-tilt-btn.mq-tilt-on {
  color: #1a0e2a;
  background: #fbbf24;
  border-color: #fbbf24;
  animation: mqTiltPulse 1.4s ease-in-out infinite;
}
@keyframes mqTiltPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(251,191,36,0); }
}

/* Voice command toggle in the macro bar — pulses red when actively
   listening so the user can never miss that the mic is hot. */
.mq-voice-btn { color: #c084fc; border-color: rgba(192,132,252,0.4); }
.mq-voice-btn.mq-voice-on {
  color: #fff;
  background: #ef4444;
  border-color: #ef4444;
  animation: mqVoicePulse 1.4s ease-in-out infinite;
}
@keyframes mqVoicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ============================================================
   ROBOT PERSONALITY chips — purple-violet to read as 'character /
   personality' (vs the radar-style chips' green and the sweep-range
   chips' gold). Single tap = bundle of settings applied + persisted.
   ============================================================ */
.mq-personality-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  background: var(--card-bg-2, #0a1628);
  color: #c084fc;
  border: 1px solid rgba(192,132,252,0.3);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.08s;
}
.mq-personality-btn:hover {
  background: rgba(192,132,252,0.1);
  border-color: rgba(192,132,252,0.6);
}
.mq-personality-btn:active { transform: scale(0.96); }
.mq-personality-btn.mq-personality-active {
  background: rgba(192,132,252,0.18);
  border-color: #c084fc;
  color: #f3e8ff;
  box-shadow: 0 0 12px rgba(192,132,252,0.45);
}

/* Auto-stack on narrow viewports — single column. The rail flows
   ABOVE the main app so CONNECT (which lives in the rail) is the
   first thing visible. The drag-handle and collapse button are
   hidden — meaningless without the side-by-side grid. */
@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  aside.log-rail {
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    order: -1;                /* rail FIRST so Connect is visible */
    margin: 0 0 12px;
    padding: 8px;
    box-sizing: border-box;
  }
  aside.log-rail > * {
    width: 100%;
    box-sizing: border-box;
  }
  .log-rail-handle,
  .log-rail-collapse-btn {
    display: none !important;
  }
  /* Robot identity card: shrink the anatomy SVG so it doesn't dominate
     the phone fold; user wants Connect close to the top. */
  aside.log-rail > .rail-robot > svg {
    max-width: 180px !important;
  }
}

/* ============================================================
   PHONE LAYOUT — narrow-viewport polish.
   Targets ≤640 px (typical phone portrait). Goal: every control
   reachable, no horizontal scroll, tap targets ≥40 px.
   ============================================================ */
@media (max-width: 640px) {
  /* Tighter outer chrome — claw back every pixel. */
  body { font-size: 14px; }
  .app, .app-shell { padding: 8px !important; }

  /* HEADER — wrap chips, keep tappable, kill the centered bismillah's
     huge top padding so the page isn't pushed below the fold. */
  .header {
    grid-template-columns: 1fr auto;
    grid-template-areas: "title actions" "robot robot";
    gap: 4px;
    padding: 6px 8px !important;
  }
  .header .title-block h1 { font-size: 1.2rem; }
  .header .title-block .subtitle { font-size: 0.72rem; }
  .header .theme-picker,
  .header .lang-picker {
    gap: 2px;
  }
  .header .theme-btn,
  .header .lang-btn {
    padding: 4px 6px;
    min-width: 32px;
    min-height: 32px;
  }
  .header a, .header button {
    min-height: 32px;
    min-width: 32px;
  }

  /* TAB BAR — Maqueen / Playground big pills wrap naturally; bump
     touch height. */
  .mode-selector, .tab-buttons {
    flex-wrap: wrap;
  }
  .mode-selector button, .tab-buttons button, .tab-btn {
    min-height: 44px;
  }

  /* MAQUEEN SUB-TAB STRIP — wrap into 2 rows of bigger chips. */
  #mqSubTabBar {
    padding: 10px 10px 0 !important;
    gap: 5px !important;
  }
  #mqSubTabBar .mq-sub-btn {
    min-width: 0 !important;
    flex: 1 1 calc(33.333% - 5px) !important;
    font-size: 11px !important;
    padding: 8px 4px !important;
  }

  /* DRIVE COCKPIT — keypad / robot / joystick stack vertically. */
  .drive-grid, .drive-cockpit {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* DASHBOARD GAUGES — 4-up → 2-up on phone. */
  .dashboard-grid,
  .mq-dashboard-grid,
  [class*="dashboard"] [style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* CARDS — kill heavy padding. */
  .card { padding: 12px !important; }
  .card-header { padding: 10px 12px !important; }

  /* SENSOR STRIP — already wraps; tighten gaps. */
  #maqueen-panel {
    padding: 8px 10px !important;
    gap: 8px !important;
    font-size: 12px !important;
  }
  #maqueen-panel button {
    min-height: 32px;
    padding: 6px 10px !important;
  }

  /* CONNECTION GRID inside rail — single column on phone. */
  .connection-grid {
    grid-template-columns: 1fr !important;
  }

  /* QR MODAL — already responsive but cap dimensions. */
  #qrShareModal > div {
    max-width: 320px !important;
    padding: 16px !important;
  }
  #qrShareCanvas svg {
    width: 200px !important;
    height: 200px !important;
  }

  /* Bismillah ribbon at the top — reduce height on phone. */
  .header > div:first-child {
    font-size: 0.95rem !important;
    padding: 2px 0 4px !important;
  }
}

/* Very narrow (≤380 px, e.g. iPhone SE 1) — drop dashboard to 1-up. */
@media (max-width: 380px) {
  .dashboard-grid,
  .mq-dashboard-grid {
    grid-template-columns: 1fr !important;
  }
  #mqSubTabBar .mq-sub-btn {
    flex: 1 1 calc(50% - 5px) !important;
  }
}

/* ============================================================
   Wave 9.7 — Cockpit + Workbench (Drive sub-tab)
   See js/cockpit-workbench.js for runtime tagging.
   ============================================================ */
/* ── Workbench tab bar — fun, obvious, kid-friendly ───────────────── */
.mq-workbench-pills {
  display: flex;
  gap: 8px;
  margin: 14px 0 10px;
  padding: 0;
  background: none;
  border: none;
  flex-wrap: wrap;
}

.mq-wb-pill {
  flex: 1 1 0;
  min-width: 110px;
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(10,14,46,0.7);
  color: rgba(148,163,184,0.6);
  border: 2px solid rgba(148,163,184,0.14);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.18s ease,
              background 0.15s ease,
              color 0.15s ease,
              border-color 0.15s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  user-select: none;
}
/* Emoji icon inside the pill — give it room to breathe and scale */
.mq-wb-pill .mq-wb-icon {
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}

/* Hover: lift + colorize */
.mq-wb-pill:hover {
  transform: translateY(-3px) scale(1.03);
  color: var(--pill-color, #e6eef9);
  border-color: color-mix(in srgb, var(--pill-color) 50%, transparent);
  background: color-mix(in srgb, var(--pill-color) 8%, rgba(10,14,46,0.85));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--pill-color) 20%, transparent);
}
.mq-wb-pill:hover .mq-wb-icon { transform: scale(1.25) rotate(-6deg); }

/* Active: bright, glowing, obviously selected */
.mq-wb-pill-active {
  color: #fff;
  background: color-mix(in srgb, var(--pill-color) 22%, rgba(8,12,40,0.95));
  border-color: var(--pill-color);
  border-width: 2px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--pill-color) 18%, transparent),
    0 8px 28px color-mix(in srgb, var(--pill-color) 35%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--pill-color) 40%, transparent);
  transform: translateY(-4px) scale(1.04);
  z-index: 2;
}
.mq-wb-pill-active .mq-wb-icon {
  transform: scale(1.3);
  filter: drop-shadow(0 0 6px var(--pill-color));
}
/* Tiny "active" underline accent */
.mq-wb-pill-active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 20%; right: 20%;
  height: 3px;
  border-radius: 2px;
  background: var(--pill-color);
  box-shadow: 0 0 8px var(--pill-color);
}

.mq-wb-hidden { display: none !important; }

@media (max-width: 600px) {
  .mq-wb-pill {
    flex: 1 1 calc(50% - 4px);
    padding: 10px 12px;
    font-size: 13px;
  }
  .mq-wb-pill .mq-wb-icon { font-size: 17px; }
}

/* ============================================================
   Wave 9.8 — rail cleanup: telemetry chips into cockpit,
   robot+connect into Settings drawer.
   ============================================================ */

/* Telemetry strip inside the cockpit (above the workbench pill-bar) */
#maqueen-panel.in-cockpit {
  margin: 6px 0 8px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  gap: 10px !important;
  background: linear-gradient(90deg, rgba(0,212,255,0.06), rgba(56,189,248,0.04)) !important;
  border: 1px solid rgba(0,212,255,0.18) !important;
  border-radius: 9px !important;
}
#maqueen-panel.in-cockpit > div { font-size: 11.5px !important; }
#maqueen-panel.in-cockpit .mq-dot { width: 12px !important; height: 12px !important; }
/* In cockpit context the polling buttons make less sense — let them
   stay but compact them. They're useful for kids to test polling. */
#maqueen-panel.in-cockpit button {
  padding: 3px 7px !important;
  font-size: 10.5px !important;
}

/* Sections we inject into the Settings drawer body */
.mq-drawer-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,0.18);
}
.mq-drawer-section:first-child { border-top: none; padding-top: 0; }
.mq-drawer-section-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #93a8c4);
  margin-bottom: 10px;
}
/* The relocated cards are full-width inside the drawer */
.mq-drawer-section .rail-robot,
.mq-drawer-section .connection-card {
  margin: 0;
  width: 100%;
}

/* ── Compact always-visible connection bar (below .header) ────────────
   The full .connection-card is moved here by rail-cleanup.js.
   CSS strips the card chrome and lays out version + fw + action
   buttons + BLE stack-flow dots in a single tight flex row.       */
#mqConnectPanel {
  background: rgba(15,23,42,0.55);
  border-bottom: 1px solid rgba(56,189,248,0.12);
  padding: 0 18px;
}
/* Card is NOT a grid child — make it the outer flex row
   so .connection-grid (fw + buttons) and #mqStackFlow sit side-by-side */
#mqConnectPanel .connection-card {
  background: none !important; border: none !important;
  box-shadow: none !important; padding: 0 !important;
  margin: 0 !important;        border-radius: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
}
#mqConnectPanel .connection-grid {
  flex-shrink: 0 !important;
}
#mqConnectPanel .card-header { display: none !important; }
/* Two-row stack: top = device-name pill + version (compact info),
   bottom = Firmware button (the actionable thing). Mirrors the sketch:
     [ 🤖 [gutap]   v0.1.60 ]
     [    🚀 Firmware       ]
   The grid itself becomes a column container; the inner blocks become
   single rows that read across. */
#mqConnectPanel .connection-grid {
  display: flex !important; flex-direction: column !important;
  /* align-items: center — horizontally center the pills within the column.
     Was 'stretch' which made them all left-edge-aligned at column width. */
  align-items: center !important; gap: 4px !important;
  /* Vertically center the 3-row stack within the bar height. */
  justify-content: center !important;
  align-self: center !important;
}
/* Each pill stays content-sized (no full-width); but Firmware button
   visually wants to be a bit wider than the small chips above it. */
#mqConnectPanel .connection-status-block,
#mqConnectPanel .connection-details      { align-self: center !important; }
#mqConnectPanel .connection-footer       { align-self: center !important; }
#mqConnectPanel .connection-main        { display: contents !important; }
/* Visual order in the column stack: name first, version second, Firmware
   button last. The source-order opposite (version, then name) is dictated
   by index.html structure — flex `order` rewrites it without touching DOM. */
#mqConnectPanel .connection-details      { order: 1 !important; }  /* name pill on top */
#mqConnectPanel .connection-status-block { order: 2 !important; }  /* version below */
#mqConnectPanel .connection-footer       { order: 3 !important; }  /* Firmware bottom */
#mqConnectPanel .connection-status-block {
  /* Stack: name pill on top, version below — version no longer compete-
     ing for the same line as the name. */
  display: flex !important; flex-direction: column !important;
  align-items: stretch !important; gap: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  flex-shrink: 0 !important;
}
/* Bottom row: the Firmware button gets the full width. */
#mqConnectPanel .connection-footer {
  display: flex !important; justify-content: stretch !important;
  margin: 0 !important; padding: 0 !important;
}
#mqConnectPanel .connection-footer #firmwareBtn {
  flex: 1 !important;
  width: 100% !important;
}
#mqConnectPanel .button-row             { display: none !important; }
/* appBuildInfo hidden by JS (rail-cleanup.js rescues #fwVersionLine first) */
#mqConnectPanel #appBuildInfo           { display: none !important; }
#mqConnectPanel #fwVersionLine {
  /* Version chip — small, calm, monospace tag. Styled like a sibling of
     the device-name pill but in cyan instead of neon-green so the eye
     reads them as two related-but-different facts. */
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 4px !important;
  margin: 0 4px !important; padding: 1px 8px !important;
  border: 1px solid rgba(56,189,248,0.35) !important;
  border-radius: 999px !important;
  background: rgba(56,189,248,0.08) !important;
  font-size: 10px !important; white-space: nowrap !important; opacity: 1 !important;
  align-self: flex-start !important;
}
#mqConnectPanel #fwVersion {
  margin: 0 !important;
  color: var(--cyan, #38bdf8) !important;
  font-weight: 700 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
/* Hide the version-status badge ('✓ up to date' etc.) inside the compact
   bar — it's redundant once you have the version + can re-flash. Move
   the same info to a tooltip on the version pill via title attribute, but
   that's a JS task; for now just keep the badge visually quiet. */
#mqConnectPanel #fwVersionBadge {
  display: none !important;
}
/* The compact connect bar hides .connection-details by default — but we
   surface ONLY the device-id (the unique [xxxxx] code) as a tight pill so
   the user knows which physical robot is paired without the bar getting
   long. Label + "BBC micro:bit " prefix are stripped — the bracketed code
   is the only thing that distinguishes one robot from another. */
#mqConnectPanel .connection-details     { display: contents !important; }
#mqConnectPanel .connection-details .device-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  margin: 0 4px !important;
  border: 1px solid rgba(74,222,128,0.35) !important;
  border-radius: 999px !important;
  background: rgba(74,222,128,0.08) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  max-width: 140px;
}
/* Drop the "Name" label — emoji is enough */
#mqConnectPanel .connection-details .device-label { display: none !important; }
#mqConnectPanel .connection-details .device-row::before { content: '🤖'; font-size: 11px; }
#mqConnectPanel .connection-details .device-value {
  color: var(--neon, #4ade80) !important;
  font-weight: 700 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Streams toggle is now in the Settings drawer; the rule below is a
   dead-code candidate but kept harmless for any stragglers. */
#mqConnectPanel #mq-streams-toggle {
  padding: 3px 10px !important;
  font-size: 11px !important;
}
/* Firmware button — OUTSTANDING. Yellow gradient (matches the LABS FAB
   palette) with two discrete animations:
     • Soft 3.2 s glow pulse (calls a tiny bit of attention without bling)
     • 8 s 🤖 emoji "look-around" wiggle (playful, every-so-often)
   Both respect prefers-reduced-motion. */
#mqConnectPanel #firmwareBtn {
  padding: 8px 22px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 60%, #b45309 100%) !important;
  color: #78350f !important;                            /* dark amber text on yellow */
  text-shadow: 0 1px 0 rgba(255,255,255,0.45) !important;
  border: none !important;
  border-radius: 22px !important;
  box-shadow: 0 0 18px rgba(245,158,11,0.55), 0 2px 6px rgba(0,0,0,0.35) !important;
  position: relative;
  cursor: pointer;
  animation: mqFwPulse 3.2s ease-in-out infinite;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, filter 0.15s;
}
#mqConnectPanel #firmwareBtn:hover {
  transform: translateY(-1px) scale(1.04);
  filter: brightness(1.08);
  box-shadow: 0 0 26px rgba(245,158,11,0.85), 0 4px 12px rgba(0,0,0,0.4) !important;
}
#mqConnectPanel #firmwareBtn:active { transform: translateY(0) scale(0.97); }
/* The first child <span> is the 🤖 emoji wrapper. Wiggle every 8 s. */
#mqConnectPanel #firmwareBtn > span:first-child {
  display: inline-block;
  animation: mqFwWiggle 8s ease-in-out infinite;
  transform-origin: 50% 70%;
}
@keyframes mqFwPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(245,158,11,0.55), 0 2px 6px rgba(0,0,0,0.35); }
  50%      { box-shadow: 0 0 30px rgba(251,191,36,0.85), 0 2px 6px rgba(0,0,0,0.35); }
}
@keyframes mqFwWiggle {
  0%, 88%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(-12deg); }
  93% { transform: rotate( 14deg); }
  96% { transform: rotate( -8deg); }
  98% { transform: rotate(  4deg); }
}
@media (prefers-reduced-motion: reduce) {
  #mqConnectPanel #firmwareBtn,
  #mqConnectPanel #firmwareBtn > span:first-child { animation: none !important; }
}
/* Stack flow: compact + calm — scale down the SVG, suppress particles */
/* BLE stack flow — inline on the same row.
   Hide the text header/stats; keep only the scaled SVG nodes. */
#mqConnectPanel #mqStackFlow {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-left: 1px solid rgba(148,163,184,0.25) !important;
  padding: 0 0 0 12px !important;   /* zero vertical padding — shrinks the wrapper */
  margin: 0 0 0 6px !important;
  background: transparent !important; /* drop the box look — icons sit inline */
  border-top: 0 !important; border-bottom: 0 !important; border-right: 0 !important;
}
/* Hide the "📡 BLE stack flow" label + stats. The label lives in an
   unnamed wrapper div — the *first* child of #mqStackFlow — so we target
   it positionally rather than by id. */
#mqConnectPanel #mqStackFlow > div:first-child { display: none !important; }
#mqConnectPanel #mqStackFlowStats              { display: none !important; }
/* width:100% fills the flex container; bump min-height so the icon row
   reads bigger (was visually anaemic at the default 40-50 px). */
#mqConnectPanel #mqStackFlowSvg {
  width: 100% !important;
  height: auto !important;
  min-height: 60px !important;
  display: block !important;
}
/* BLE particle animations are visible in the connect panel */

/* ══════════════════════════════════════════════════════════════
   DASHBOARD GAUGE THEMES  v3
   Each non-dark theme hides the SVG and shows a .mq-alt widget
   with a completely different structure built by gauge-themes.js
   ══════════════════════════════════════════════════════════════ */

/* ── Picker buttons ─────────────────────────────────────────── */
.mq-gauge-theme-btn {
  background: none; border: 1px solid transparent; border-radius: 6px;
  padding: 2px 5px; font-size: 14px; cursor: pointer; opacity: 0.45;
  transition: opacity 0.15s, transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
  line-height: 1;
}
.mq-gauge-theme-btn:hover { opacity: 0.85; transform: scale(1.3) rotate(-5deg); }
.mq-gauge-theme-active {
  opacity: 1 !important;
  border-color: rgba(255,255,255,0.35) !important;
  background: rgba(255,255,255,0.07) !important;
}

/* ── Hide SVG + original labels for all alt themes ───────────── */
.mq-dash-panel:not([data-dash-theme="dark"]):not([data-dash-theme=""]) .mq-gauge svg,
.mq-dash-panel:not([data-dash-theme="dark"]):not([data-dash-theme=""]) .mq-gauge .mq-gauge-label,
.mq-dash-panel:not([data-dash-theme="dark"]):not([data-dash-theme=""]) .mq-gauge .mq-gauge-value {
  display: none !important;
}

/* ── Shared alt widget base ─────────────────────────────────── */
.mq-alt {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; width: 100%; height: auto;
  padding: 8px 4px;
  box-sizing: border-box;
  font-family: 'JetBrains Mono', monospace;
}

/* ════════════════════════════════════════════
   🏎️  RACE — Digital F1 LED cockpit
   Panel: carbon fibre, red stripe border
   Widget: 10-dot LED bar + giant number
   ════════════════════════════════════════════ */
.mq-dash-panel[data-dash-theme="race"] {
  background: repeating-linear-gradient(
    45deg, #090909 0, #090909 4px, #101010 4px, #101010 10px) !important;
  border: none !important;
  border-left: 4px solid #dc2626 !important;
  border-top: 2px solid #dc2626 !important;
  border-radius: 0 6px 6px 0 !important;
  box-shadow: -4px 0 0 #7f1d1d, 0 0 40px rgba(220,38,38,0.25) !important;
}
.mq-dash-panel[data-dash-theme="race"] .mq-dash-header {
  color: #fff !important; letter-spacing: 0.15em !important;
  border-bottom: 1px solid #dc262655 !important; padding-bottom: 6px !important;
}
.mq-dash-panel[data-dash-theme="race"] .mq-dash-gauges { gap: 4px !important; }
.mq-dash-panel[data-dash-theme="race"] .mq-gauge {
  background: #0a0000 !important; border: 1px solid #dc262633 !important;
  border-radius: 4px !important; padding: 6px !important; min-height: 100px;
}
.mq-alt-race { gap: 6px; }
.mq-alt-race-label {
  font-size: 8px; font-weight: 800; letter-spacing: 0.2em;
  color: #666; text-transform: uppercase;
}
.mq-alt-race-bar {
  display: flex; gap: 3px; align-items: center;
}
.mq-alt-race-bar span {
  width: 8px; height: 18px; border-radius: 2px;
  transition: background 0.1s, box-shadow 0.1s;
}
.mq-alt-race-val {
  font-size: 32px; font-weight: 900; letter-spacing: -0.02em;
  color: #ff3333; line-height: 1;
  text-shadow: 0 0 20px #ff000088, 0 0 40px #ff000044;
}
.mq-alt-race-unit {
  font-size: 8px; color: #555; letter-spacing: 0.15em; text-transform: uppercase;
}
.mq-dash-panel[data-dash-theme="race"] .mq-dash-lcd {
  background: #0a0000 !important; border: 1px solid #dc2626 !important;
  border-radius: 0 !important;
}
.mq-dash-panel[data-dash-theme="race"] .mq-dash-cell-val { color: #ff4444 !important; }

/* ════════════════════════════════════════════
   📻  RETRO — 1970s hi-fi VU meter
   Panel: wood-grain, inset bevel
   Widget: SVG kept + warm backlight overlay
   ════════════════════════════════════════════ */
.mq-dash-panel[data-dash-theme="retro"] {
  background:
    repeating-linear-gradient(90deg, rgba(255,160,50,0.03) 0, rgba(255,160,50,0.03) 1px, transparent 1px, transparent 20px),
    linear-gradient(180deg, #2a1500, #120800) !important;
  border: 3px solid #92400e !important; border-radius: 4px !important;
  box-shadow: inset 0 2px 4px rgba(255,200,100,0.1), 0 0 30px rgba(146,64,14,0.4) !important;
}
.mq-dash-panel[data-dash-theme="retro"] .mq-dash-header {
  color: #d97706 !important; font-family: Georgia, serif !important;
  font-style: italic !important; letter-spacing: 0.08em !important;
}
.mq-dash-panel[data-dash-theme="retro"] .mq-gauge {
  background: radial-gradient(circle at 38% 35%, #2a1400, #0d0600) !important;
  border: 4px solid #6b2e00 !important; border-radius: 50% !important;
  box-shadow: 0 0 0 2px #92400e, 0 0 0 4px #4a1500,
              inset 0 4px 12px rgba(255,160,50,0.1),
              0 6px 20px rgba(0,0,0,0.8) !important;
  aspect-ratio: 1 !important; overflow: hidden !important;
  display: flex; flex-direction: column; position: relative !important;
}
/* Show SVG in retro — we only add a glow overlay */
.mq-dash-panel[data-dash-theme="retro"] .mq-gauge svg { display: block !important; }
.mq-dash-panel[data-dash-theme="retro"] .mq-gauge .mq-gauge-label {
  display: block !important; color: #b45309 !important;
  font-family: Georgia, serif !important; font-style: italic !important;
}
.mq-dash-panel[data-dash-theme="retro"] .mq-gauge .mq-gauge-value {
  display: block !important; color: #fbbf24 !important;
  font-family: Georgia, serif !important; font-style: italic !important; font-size: 16px !important;
  text-shadow: 0 0 12px #f59e0b !important;
}
.mq-dash-panel[data-dash-theme="retro"] .mq-gauge svg {
  filter: sepia(0.7) brightness(0.85) drop-shadow(0 0 6px rgba(217,119,6,0.6)) !important;
}
.mq-dash-panel[data-dash-theme="retro"] .mq-gauge-ticks { stroke: #b45309 !important; }
.mq-alt-retro {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: 50%;
}
.mq-alt-retro-glow {
  position: absolute; inset: 0; border-radius: 50%;
  mix-blend-mode: screen; transition: opacity 0.3s, background 0.3s;
}
.mq-dash-panel[data-dash-theme="retro"] .mq-dash-lcd {
  background: #0d0600 !important; border: 2px solid #78350f !important;
}
.mq-dash-panel[data-dash-theme="retro"] .mq-dash-cell-val {
  color: #fbbf24 !important; font-family: Georgia, serif !important;
}

/* ════════════════════════════════════════════
   🌃  CYBER — Neon arc gauge
   Panel: grid-line, chamfered corners
   Widget: conic-gradient circle + glow value
   ════════════════════════════════════════════ */
.mq-dash-panel[data-dash-theme="cyber"] {
  background:
    linear-gradient(90deg, rgba(236,72,153,0.04) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(34,211,238,0.04) 1px, transparent 1px),
    linear-gradient(135deg, #0a0018, #000a12) !important;
  background-size: 24px 24px, 24px 24px, 100% !important;
  border: 1px solid #ec4899 !important; border-radius: 0 !important;
  clip-path: polygon(16px 0%,100% 0%,100% calc(100% - 16px),calc(100% - 16px) 100%,0% 100%,0% 16px) !important;
  box-shadow: 0 0 30px rgba(236,72,153,0.3), 0 0 60px rgba(34,211,238,0.1) !important;
}
.mq-dash-panel[data-dash-theme="cyber"] .mq-dash-header {
  color: #ec4899 !important; letter-spacing: 0.2em !important;
  text-shadow: 0 0 10px #ec4899 !important;
}
.mq-dash-panel[data-dash-theme="cyber"] .mq-gauge {
  background: #04000e !important; border: 1px solid rgba(236,72,153,0.5) !important;
  border-radius: 0 !important;
  clip-path: polygon(10px 0%,100% 0%,100% calc(100% - 10px),calc(100% - 10px) 100%,0% 100%,0% 10px) !important;
  min-height: 110px;
}
.mq-alt-cyber { position: relative; width: 100%; align-items: center; gap: 2px; }
.mq-alt-cyber-arc {
  width: 80px; height: 80px; border-radius: 50%;
  position: relative;
  /* JS sets conic-gradient here */
  background: conic-gradient(#38bdf8 0deg, rgba(255,255,255,0.06) 0deg);
  transition: background 0.2s;
}
/* Mask out center to make a donut */
.mq-alt-cyber-arc::before {
  content: ''; position: absolute; inset: 12px;
  border-radius: 50%; background: #04000e;
}
.mq-alt-cyber-center {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 80px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.mq-alt-cyber-val {
  font-size: 18px; font-weight: 900; color: #22d3ee; line-height: 1;
  transition: text-shadow 0.2s;
}
.mq-alt-cyber-unit {
  font-size: 7px; color: #ec489999; letter-spacing: 0.15em; text-transform: uppercase;
}
.mq-alt-cyber-label {
  font-size: 8px; color: #ec4899; letter-spacing: 0.2em;
  text-transform: uppercase; text-shadow: 0 0 6px #ec4899;
  margin-top: 4px;
}
.mq-dash-panel[data-dash-theme="cyber"] .mq-dash-lcd {
  background: #04000e !important; border: 1px solid #ec4899 !important; border-radius: 0 !important;
}
.mq-dash-panel[data-dash-theme="cyber"] .mq-dash-cell-val { color: #22d3ee !important; }

/* ════════════════════════════════════════════
   🎈  FUN — Floating bubble gauges
   Panel: 2×2 grid, double-ring
   Widget: big emoji + filled bar + value
   ════════════════════════════════════════════ */
.mq-dash-panel[data-dash-theme="fun"] {
  background: linear-gradient(135deg, #0a1535, #0f1f0f, #150a30) !important;
  border: 4px solid #a78bfa !important; border-radius: 24px !important;
  box-shadow: 0 0 0 2px #fbbf24, 0 0 0 6px rgba(167,139,250,0.3),
              0 12px 40px rgba(167,139,250,0.3) !important;
}
.mq-dash-panel[data-dash-theme="fun"] .mq-dash-header {
  color: #a78bfa !important; font-size: 14px !important;
}
.mq-dash-panel[data-dash-theme="fun"] .mq-dash-gauges {
  grid-template-columns: repeat(2,1fr) !important; gap: 16px !important; padding: 8px !important;
  justify-items: center !important;
}
.mq-dash-panel[data-dash-theme="fun"] .mq-gauge {
  border-radius: 50% !important; border: 5px solid !important;
  width: 120px !important; height: 120px !important;
  aspect-ratio: 1 !important; overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 -4px 8px rgba(0,0,0,0.4) !important;
  animation: mqFunFloat 3s ease-in-out infinite !important;
}
.mq-dash-panel[data-dash-theme="fun"] .mq-gauge:nth-child(1) {
  border-color: #38bdf8 !important;
  background: radial-gradient(circle at 35% 35%, #003a5c, #001a2e) !important;
}
.mq-dash-panel[data-dash-theme="fun"] .mq-gauge:nth-child(2) {
  border-color: #fb923c !important;
  background: radial-gradient(circle at 35% 35%, #3a1500, #1a0800) !important;
  animation-delay: 0.5s !important;
}
.mq-dash-panel[data-dash-theme="fun"] .mq-gauge:nth-child(3) {
  border-color: #4ade80 !important;
  background: radial-gradient(circle at 35% 35%, #003a16, #001a08) !important;
  animation-delay: 1s !important;
}
.mq-dash-panel[data-dash-theme="fun"] .mq-gauge:nth-child(4) {
  border-color: #fbbf24 !important;
  background: radial-gradient(circle at 35% 35%, #3a2800, #1a1400) !important;
  animation-delay: 1.5s !important;
}
@keyframes mqFunFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-6px) scale(1.03); }
}
.mq-alt-fun { gap: 4px; justify-content: center; }
.mq-alt-fun-emoji { font-size: 28px; line-height: 1; transition: all 0.3s; }
.mq-alt-fun-val {
  font-size: 22px; font-weight: 900; color: var(--fun-color, #fff);
  text-shadow: 0 0 12px var(--fun-color, #fff);
  animation: mqFunPop 1.5s ease-in-out infinite;
}
@keyframes mqFunPop {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.1) rotate(1deg); }
}
.mq-alt-fun-bar {
  width: 70%; height: 6px; background: rgba(255,255,255,0.1);
  border-radius: 3px; overflow: hidden;
}
.mq-alt-fun-fill {
  height: 100%; width: 0%; border-radius: 3px; transition: width 0.3s ease;
}
.mq-alt-fun-unit {
  font-size: 8px; color: rgba(255,255,255,0.4); letter-spacing: 0.1em;
}
.mq-dash-panel[data-dash-theme="fun"] .mq-dash-lcd {
  border-radius: 16px !important; border: 2px solid #a78bfa !important;
  background: rgba(167,139,250,0.06) !important;
}

/* ════════════════════════════════════════════
   🚀  SPACE — NASA CRT terminal
   Panel: scanlines + vignette, square cells
   Widget: ASCII bar + monospace readout
   ════════════════════════════════════════════ */
.mq-dash-panel[data-dash-theme="space"] {
  background: #000904 !important;
  border: 2px solid #00ff88 !important; border-radius: 2px !important;
  box-shadow: 0 0 40px rgba(0,255,136,0.2), inset 0 0 80px rgba(0,0,0,0.9) !important;
  position: relative !important; overflow: hidden !important;
}
.mq-dash-panel[data-dash-theme="space"]::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 10;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px,
    rgba(0,255,136,0.04) 2px, rgba(0,255,136,0.04) 4px);
}
.mq-dash-panel[data-dash-theme="space"]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 11;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.6) 100%);
}
.mq-dash-panel[data-dash-theme="space"] .mq-dash-header {
  color: #00ff88 !important; font-family: 'Courier New', monospace !important;
  letter-spacing: 0.15em !important; text-shadow: 0 0 8px #00ff88 !important;
  position: relative; z-index: 12;
}
.mq-dash-panel[data-dash-theme="space"] .mq-dash-gauges {
  gap: 3px !important; position: relative; z-index: 12;
}
.mq-dash-panel[data-dash-theme="space"] .mq-gauge {
  background: #000a04 !important; border: 1px solid rgba(0,255,136,0.45) !important;
  border-radius: 0 !important; min-height: 100px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8) !important;
}
.mq-alt-space {
  gap: 3px; align-items: flex-start; padding: 6px 8px;
  font-family: 'Courier New', monospace; width: 100%;
}
.mq-alt-space-prompt { font-size: 8px; color: #00ff8866; letter-spacing: 0.05em; }
.mq-alt-space-val {
  font-size: 24px; font-weight: 700; color: #00ff88; letter-spacing: 0.08em;
  text-shadow: 0 0 8px #00ff88, 0 0 20px rgba(0,255,136,0.4);
  animation: mqSpaceBlink 4s step-end infinite;
}
@keyframes mqSpaceBlink {
  0%,92%,100% { opacity:1; } 94%,98% { opacity:0.2; }
}
.mq-alt-space-bar {
  font-size: 9px; color: #00ff8899; letter-spacing: 0.01em; white-space: pre;
}
.mq-alt-space-status {
  font-size: 8px; color: #00ff8855; letter-spacing: 0.08em; text-transform: uppercase;
}
.mq-alt-space-status span { transition: color 0.3s; }
.mq-dash-panel[data-dash-theme="space"] .mq-dash-lcd {
  background: #000a04 !important; border: 1px solid rgba(0,255,136,0.45) !important;
  border-radius: 0 !important; position: relative; z-index: 12;
}
.mq-dash-panel[data-dash-theme="space"] .mq-dash-cell-val {
  color: #00ff88 !important; font-family: 'Courier New', monospace !important;
  text-shadow: 0 0 6px #00ff88 !important;
}

/* ── Robot anatomy SVG — grid centrepiece (column 2 of 3) ────────────────
   JS appends it as the last child of .header; grid-area places it in the
   middle column. position:static so it never bleeds into the side columns. */
#mqHeaderRobot {
  grid-area: robot;
  position: static !important;
  transform: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#mqHeaderRobot #mqAnatomy {
  height: 52px !important;
  width: auto !important;
  filter: drop-shadow(0 0 10px rgba(56,189,248,0.35));
}
@media (max-width: 600px) {
  #mqHeaderRobot { display: none; }
}

/* Header proxy buttons: hide the disabled one — no JS timing needed.
   disabled = disconnected → hide Disconnect; connected → hide Connect */
#headerDisconnectBtn:disabled { display: none !important; }
#headerConnectBtn:disabled    { display: none !important; }

/* ============================================================
   MISSING DYNAMIC CLASSES — used by JS classList but had no CSS.
   All 15 added here so state changes have visible feedback.
   ============================================================ */

/* Connection status — mirrors .connected counterpart */
#connectionStatus.disconnected {
  animation: disconnected-flash 1.4s ease-in-out infinite;
  background: var(--disconnected-bg, rgba(220,38,38,0.1));
  border-color: var(--disconnected-border, rgba(220,38,38,0.4));
}
@keyframes disconnected-flash {
  0%,100% { box-shadow: 0 0 8px rgba(220,38,38,0.25); }
  50%      { box-shadow: 0 0 22px rgba(220,38,38,0.5), 0 0 36px rgba(220,38,38,0.15); }
}

/* log-rail aside gains .has-connect when connect card is present */
aside.log-rail.has-connect > .log-rail-collapse-btn { display: flex; }

/* Servo explorer — brief flash when value changes */
.flash {
  animation: mq-flash-once 0.35s ease-out;
}
@keyframes mq-flash-once {
  0%  { background: rgba(250,204,21,0.35); }
  100%{ background: transparent; }
}

/* Generic active-highlight on sub-tab nav buttons (mq-workbench etc.) */
.mq-active {
  background: rgba(56,189,248,0.18) !important;
  color: #e2eaf5 !important;
  border-color: rgba(56,189,248,0.5) !important;
}

/* Algorithm-viz — selected algorithm button */
.mq-algo-active {
  background: rgba(56,189,248,0.18) !important;
  color: var(--accent, #38bdf8) !important;
  border-color: rgba(56,189,248,0.45) !important;
  box-shadow: 0 0 10px rgba(56,189,248,0.2);
}

/* Anatomy SVG group — active/highlighted part */
.mq-anat-active {
  opacity: 1 !important;
  filter: drop-shadow(0 0 6px rgba(56,189,248,0.7));
}

/* Short pulse on anatomy element (motor fire, LED blink, etc.) */
.mq-anat-pulse {
  animation: mq-anat-pulse-kf 0.5s ease-out;
}
@keyframes mq-anat-pulse-kf {
  0%   { filter: drop-shadow(0 0 12px rgba(250,204,21,0.9)); opacity:1; }
  100% { filter: none; opacity:0.55; }
}

/* Number display tick (battery %, sonar, lidar readings) */
.mq-num-tick {
  animation: mq-num-tick-kf 0.2s ease-out;
}
@keyframes mq-num-tick-kf {
  0%  { transform: scale(1.15); color: #facc15; }
  100%{ transform: scale(1);    color: inherit; }
}

/* Generic "on" toggle state (LED strip on, motor armed, etc.) */
.mq-on {
  color: #4ade80 !important;
  text-shadow: 0 0 8px rgba(74,222,128,0.6);
}

/* Orb indicator states */
.mq-orb-on {
  background: radial-gradient(circle at 35% 35%, #86efac, #16a34a) !important;
  box-shadow: 0 0 10px rgba(74,222,128,0.6) !important;
}
.mq-orb-warn {
  background: radial-gradient(circle at 35% 35%, #fde68a, #d97706) !important;
  box-shadow: 0 0 10px rgba(251,191,36,0.6) !important;
}
.mq-orb-err {
  background: radial-gradient(circle at 35% 35%, #fca5a5, #dc2626) !important;
  box-shadow: 0 0 10px rgba(220,38,38,0.6) !important;
  animation: mq-orb-err-pulse 0.8s ease-in-out infinite;
}
@keyframes mq-orb-err-pulse {
  0%,100%{ box-shadow: 0 0 10px rgba(220,38,38,0.6); }
  50%    { box-shadow: 0 0 20px rgba(220,38,38,0.9); }
}

/* Radar / sonar pick — active selection */
.mq-radar-pick-active {
  background: rgba(56,189,248,0.18) !important;
  border-color: rgba(56,189,248,0.55) !important;
  color: #e2eaf5 !important;
  box-shadow: 0 0 8px rgba(56,189,248,0.25);
}

/* Ripple animation on buttons (keypad press, etc.) */
.mq-rippling {
  animation: mq-ripple-kf 0.45s ease-out;
}
@keyframes mq-ripple-kf {
  0%  { box-shadow: 0 0 0 0 rgba(56,189,248,0.55); transform: scale(0.96); }
  60% { box-shadow: 0 0 0 10px rgba(56,189,248,0); transform: scale(1.04); }
  100%{ box-shadow: 0 0 0 14px rgba(56,189,248,0); transform: scale(1); }
}

/* Servo code-tab — active selection (siblings use .mq-servo-codetab base) */
.mq-servo-codetab-active {
  background: rgba(56,189,248,0.15) !important;
  color: var(--accent, #38bdf8) !important;
  border-color: rgba(56,189,248,0.45) !important;
  font-weight: 700;
}

/* Sub-page visibility — toggle between .mq-sub-page children */
.mq-sub-page { display: none; }
.mq-sub-page.mq-sub-active { display: block; }

/* Piano key press flash */
.mq-tune-active {
  background: rgba(56,189,248,0.35) !important;
  transform: scale(0.95) !important;
  transition: background 0.05s, transform 0.05s;
}

/* ─────────────────────────────────────────────────────────────
   Joystick skins — switch via #mqJoyZone[data-skin="..."].
   Geometry stays inline; visuals live here so each skin can
   restyle cleanly without inline overrides. All skins inherit
   the active theme through var(--accent).
   ───────────────────────────────────────────────────────────── */
#mqJoyZone .joy-disc    { position:absolute; inset:0; border-radius:50%; }
#mqJoyZone .joy-cross-v { position:absolute; left:50%; top:0; bottom:0; width:1px; }
#mqJoyZone .joy-cross-h { position:absolute; top:50%; left:0; right:0; height:1px; }
#mqJoyZone .joy-thumb {
  position:absolute; left:50%; top:50%;
  width:48px; height:48px; margin-left:-24px; margin-top:-24px;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,0.5), inset 0 -3px 6px rgba(0,0,0,0.3);
  cursor:grab;
  transition:transform 0.15s ease-out;
}

/* Classic — restore the previous look as the default skin. */
#mqJoyZone[data-skin="classic"] .joy-disc {
  background: radial-gradient(circle at 30% 30%, var(--bg-soft, #1d3556), var(--bg-card, #0a1628));
  border: 2px dashed var(--accent, #fb923c);
}
#mqJoyZone[data-skin="classic"] .joy-cross-v,
#mqJoyZone[data-skin="classic"] .joy-cross-h {
  background: color-mix(in srgb, var(--accent, #fb923c) 22%, transparent);
}
#mqJoyZone[data-skin="classic"] .joy-thumb {
  background: radial-gradient(circle at 30% 30%,
    color-mix(in srgb, var(--accent, #fb923c) 15%, #ffffff),
    var(--accent, #fb923c) 60%,
    color-mix(in srgb, var(--accent, #fb923c) 70%, #000000));
  border: 2px solid color-mix(in srgb, var(--accent, #fb923c) 65%, #000000);
}

/* Reactor — dark well, glowing accent orb, rotating containment ring. */
#mqJoyZone[data-skin="reactor"] .joy-disc {
  background: radial-gradient(circle at 50% 50%, #0a0a14 0%, #000 80%);
  border: 1px solid color-mix(in srgb, var(--accent, #fb923c) 40%, #000);
  overflow: hidden;
}
#mqJoyZone[data-skin="reactor"] .joy-disc::before {
  content:''; position:absolute; inset:6px; border-radius:50%;
  border: 2px dashed color-mix(in srgb, var(--accent, #fb923c) 60%, transparent);
  animation: joyReactorSpin 6s linear infinite;
  pointer-events:none;
}
#mqJoyZone[data-skin="reactor"] .joy-cross-v,
#mqJoyZone[data-skin="reactor"] .joy-cross-h { display:none; }
#mqJoyZone[data-skin="reactor"] .joy-thumb {
  background: radial-gradient(circle at 35% 35%, #ffffff,
    var(--accent, #fb923c) 50%,
    color-mix(in srgb, var(--accent, #fb923c) 50%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--accent, #fb923c) 70%, #000);
  animation: joyReactorPulse 1.6s ease-in-out infinite;
}
@keyframes joyReactorSpin { to { transform: rotate(360deg); } }
@keyframes joyReactorPulse {
  0%, 100% { box-shadow:
    0 0 10px var(--accent, #fb923c),
    0 0 20px color-mix(in srgb, var(--accent, #fb923c) 40%, transparent),
    inset 0 -3px 6px rgba(0,0,0,0.3);
  }
  50% { box-shadow:
    0 0 18px var(--accent, #fb923c),
    0 0 36px color-mix(in srgb, var(--accent, #fb923c) 60%, transparent),
    inset 0 -3px 6px rgba(0,0,0,0.3);
  }
}

/* Eye tracker — sclera + iris/pupil, periodic blink. */
#mqJoyZone[data-skin="eye"] .joy-disc {
  background: radial-gradient(circle at 50% 50%, #ffffff 60%, #e2e8f0 100%);
  border: 2px solid #1f2937;
  overflow: hidden;
}
#mqJoyZone[data-skin="eye"] .joy-cross-v,
#mqJoyZone[data-skin="eye"] .joy-cross-h { display:none; }
#mqJoyZone[data-skin="eye"] .joy-thumb {
  width:56px; height:56px; margin-left:-28px; margin-top:-28px;
  background: radial-gradient(circle at 50% 50%,
    #0a0a14 28%,
    var(--accent, #fb923c) 30%,
    var(--accent, #fb923c) 78%,
    color-mix(in srgb, var(--accent, #fb923c) 60%, #000) 100%);
  border: 1px solid #1f2937;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.45);
}
/* Eyelid — flesh-tone disc that flicks shut briefly. */
#mqJoyZone[data-skin="eye"]::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background: linear-gradient(180deg, #f5cf9c 0%, #e6b87a 100%);
  z-index: 4; pointer-events:none;
  transform: scaleY(0); transform-origin: center;
  animation: joyEyeBlink 4.5s ease-in-out infinite;
  border: 2px solid #1f2937;
}
@keyframes joyEyeBlink {
  0%, 95%, 100% { transform: scaleY(0); }
  97%, 98%      { transform: scaleY(1); }
}

/* Radar scope — concentric range rings + sweeping beam, reticle thumb. */
#mqJoyZone[data-skin="radar"] .joy-disc {
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0, transparent 23%,
      color-mix(in srgb, var(--accent, #fb923c) 28%, transparent) 23%,
      color-mix(in srgb, var(--accent, #fb923c) 28%, transparent) 24%,
      transparent 24%, transparent 46%,
      color-mix(in srgb, var(--accent, #fb923c) 28%, transparent) 46%,
      color-mix(in srgb, var(--accent, #fb923c) 28%, transparent) 47%,
      transparent 47%, transparent 70%,
      color-mix(in srgb, var(--accent, #fb923c) 28%, transparent) 70%,
      color-mix(in srgb, var(--accent, #fb923c) 28%, transparent) 71%,
      transparent 71%),
    radial-gradient(circle at 50% 50%, #021014 0%, #051d22 100%);
  border: 2px solid color-mix(in srgb, var(--accent, #fb923c) 60%, #000);
  overflow: hidden;
}
#mqJoyZone[data-skin="radar"] .joy-disc::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--accent, #fb923c) 65%, transparent) 25deg,
    transparent 60deg,
    transparent 360deg);
  animation: joyRadarSweep 3s linear infinite;
  mix-blend-mode: screen;
  pointer-events:none;
}
#mqJoyZone[data-skin="radar"] .joy-cross-v,
#mqJoyZone[data-skin="radar"] .joy-cross-h {
  background: color-mix(in srgb, var(--accent, #fb923c) 35%, transparent);
}
#mqJoyZone[data-skin="radar"] .joy-thumb {
  width:26px; height:26px; margin-left:-13px; margin-top:-13px;
  background: transparent;
  border: 2px solid var(--accent, #fb923c);
  box-shadow: 0 0 8px var(--accent, #fb923c), inset 0 0 0 1px rgba(255,255,255,0.2);
}
#mqJoyZone[data-skin="radar"] .joy-thumb::before {
  content:''; position:absolute; inset:8px; border-radius:50%;
  background: var(--accent, #fb923c);
}
@keyframes joyRadarSweep { to { transform: rotate(360deg); } }

/* Hex grid pad — industrial honeycomb tile + black knurled knob with accent dot. */
#mqJoyZone[data-skin="hex"] .joy-disc {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 32' fill='none' stroke='%23394150' stroke-width='1.2'><polygon points='14,2 26,9 26,23 14,30 2,23 2,9'/></svg>") 0 0/16px 18px,
    radial-gradient(circle at 50% 50%, #1a1d24, #0a0c10);
  border: 1px solid color-mix(in srgb, var(--accent, #fb923c) 35%, #000);
}
#mqJoyZone[data-skin="hex"] .joy-cross-v,
#mqJoyZone[data-skin="hex"] .joy-cross-h { display:none; }
#mqJoyZone[data-skin="hex"] .joy-thumb {
  background: radial-gradient(circle at 30% 30%, #4a4a52, #1a1a20 60%, #000);
  border: 2px solid #000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.7), inset 0 -3px 6px rgba(0,0,0,0.5);
}
#mqJoyZone[data-skin="hex"] .joy-thumb::before {
  content:''; position:absolute; left:50%; top:50%; width:10px; height:10px; margin:-5px;
  border-radius:50%; background: var(--accent, #fb923c);
  box-shadow: 0 0 8px var(--accent, #fb923c);
}

/* Crosshair scope — clean tactical look with inner reticle ring and accent crosshairs. */
#mqJoyZone[data-skin="crosshair"] .joy-disc {
  background: radial-gradient(circle, #0a0e12, #000);
  border: 2px solid color-mix(in srgb, var(--accent, #fb923c) 70%, #000);
}
#mqJoyZone[data-skin="crosshair"] .joy-disc::before {
  content:''; position:absolute; inset:30%; border-radius:50%;
  border: 1px solid color-mix(in srgb, var(--accent, #fb923c) 55%, transparent);
  pointer-events:none;
}
#mqJoyZone[data-skin="crosshair"] .joy-cross-v,
#mqJoyZone[data-skin="crosshair"] .joy-cross-h {
  background: color-mix(in srgb, var(--accent, #fb923c) 75%, transparent);
}
#mqJoyZone[data-skin="crosshair"] .joy-thumb {
  width:14px; height:14px; margin-left:-7px; margin-top:-7px;
  background: var(--accent, #fb923c);
  border: 1px solid #000;
  box-shadow: 0 0 8px var(--accent, #fb923c);
}

/* Gauge dial — speedometer face, accent zone arc, needle thumb. */
#mqJoyZone[data-skin="gauge"] .joy-disc {
  background:
    conic-gradient(from 225deg,
      transparent 0deg, transparent 235deg,
      color-mix(in srgb, var(--accent, #fb923c) 70%, transparent) 235deg,
      color-mix(in srgb, var(--accent, #fb923c) 70%, transparent) 270deg,
      transparent 270deg),
    radial-gradient(circle at 50% 50%, #f4f4f5 0%, #d4d4d8 100%);
  border: 4px solid #18181b;
  box-shadow: inset 0 0 0 2px #71717a;
}
#mqJoyZone[data-skin="gauge"] .joy-cross-v,
#mqJoyZone[data-skin="gauge"] .joy-cross-h { display:none; }
#mqJoyZone[data-skin="gauge"] .joy-thumb {
  width:8px; height:54px; margin-left:-4px; margin-top:-27px;
  background: linear-gradient(to top, #18181b 0%, #18181b 55%, #dc2626 55%, #dc2626 100%);
  border-radius: 4px;
  border: 1px solid #18181b;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
#mqJoyZone[data-skin="gauge"] .joy-thumb::before {
  content:''; position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px;
  border-radius:50%; background:#18181b;
  box-shadow: inset 0 0 0 2px var(--accent, #fb923c);
}

/* Holo-pad — translucent scanlines + accent glow + chrome puck thumb. */
#mqJoyZone[data-skin="holo"] .joy-disc {
  background:
    repeating-linear-gradient(0deg,
      transparent 0, transparent 4px,
      color-mix(in srgb, var(--accent, #fb923c) 14%, transparent) 4px,
      color-mix(in srgb, var(--accent, #fb923c) 14%, transparent) 5px),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent, #fb923c) 22%, transparent), transparent 70%),
    radial-gradient(circle at 50% 50%, #0a0f1f, #050810);
  border: 1px solid color-mix(in srgb, var(--accent, #fb923c) 50%, transparent);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--accent, #fb923c) 35%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--accent, #fb923c) 22%, transparent);
}
#mqJoyZone[data-skin="holo"] .joy-cross-v,
#mqJoyZone[data-skin="holo"] .joy-cross-h {
  background: color-mix(in srgb, var(--accent, #fb923c) 45%, transparent);
}
#mqJoyZone[data-skin="holo"] .joy-thumb {
  background: radial-gradient(circle at 30% 30%, #f4f4f5, #a1a1aa 60%, #52525b);
  border: 1px solid #71717a;
  box-shadow:
    0 0 14px color-mix(in srgb, var(--accent, #fb923c) 70%, transparent),
    0 4px 12px rgba(0,0,0,0.5);
}

/* Mech cockpit — square frame with corner brackets, caution-stripe knob. */
#mqJoyZone[data-skin="mech"] .joy-disc {
  background: linear-gradient(135deg, #1f2937, #0f1419);
  border: 2px solid #4b5563;
  border-radius: 12px;
}
#mqJoyZone[data-skin="mech"] .joy-disc::before {
  content:''; position:absolute; inset:6px; pointer-events:none;
  background:
    linear-gradient(to right, var(--accent, #fb923c) 0, var(--accent, #fb923c) 18px, transparent 18px) top left/100% 2px no-repeat,
    linear-gradient(to bottom, var(--accent, #fb923c) 0, var(--accent, #fb923c) 18px, transparent 18px) top left/2px 100% no-repeat,
    linear-gradient(to left, var(--accent, #fb923c) 0, var(--accent, #fb923c) 18px, transparent 18px) top right/100% 2px no-repeat,
    linear-gradient(to bottom, var(--accent, #fb923c) 0, var(--accent, #fb923c) 18px, transparent 18px) top right/2px 100% no-repeat,
    linear-gradient(to right, var(--accent, #fb923c) 0, var(--accent, #fb923c) 18px, transparent 18px) bottom left/100% 2px no-repeat,
    linear-gradient(to top, var(--accent, #fb923c) 0, var(--accent, #fb923c) 18px, transparent 18px) bottom left/2px 100% no-repeat,
    linear-gradient(to left, var(--accent, #fb923c) 0, var(--accent, #fb923c) 18px, transparent 18px) bottom right/100% 2px no-repeat,
    linear-gradient(to top, var(--accent, #fb923c) 0, var(--accent, #fb923c) 18px, transparent 18px) bottom right/2px 100% no-repeat;
}
#mqJoyZone[data-skin="mech"] .joy-cross-v,
#mqJoyZone[data-skin="mech"] .joy-cross-h { display:none; }
#mqJoyZone[data-skin="mech"] .joy-thumb {
  background:
    linear-gradient(to bottom,
      #4b5563 0%, #4b5563 35%,
      #fbbf24 35%, #fbbf24 38%,
      #18181b 38%, #18181b 42%,
      #fbbf24 42%, #fbbf24 45%,
      #4b5563 45%, #1f2937 100%);
  border: 2px solid #1f2937;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6), inset 0 -3px 6px rgba(0,0,0,0.4);
}

/* Arcade ball-top — black octagonal restrictor, glossy spherical thumb. */
#mqJoyZone[data-skin="arcade"] .joy-disc {
  background: #0a0a0a;
  border-radius: 0;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  box-shadow:
    inset 0 0 0 6px #1a1a1a,
    inset 0 0 0 8px var(--accent, #fb923c);
}
#mqJoyZone[data-skin="arcade"] .joy-cross-v,
#mqJoyZone[data-skin="arcade"] .joy-cross-h { display:none; }
#mqJoyZone[data-skin="arcade"] .joy-thumb {
  width:60px; height:60px; margin-left:-30px; margin-top:-30px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 28%),
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--accent, #fb923c) 30%, #fff),
      var(--accent, #fb923c) 50%,
      color-mix(in srgb, var(--accent, #fb923c) 50%, #000));
  border: 2px solid color-mix(in srgb, var(--accent, #fb923c) 60%, #000);
  box-shadow: 0 6px 14px rgba(0,0,0,0.7), inset 0 -6px 10px rgba(0,0,0,0.4);
}

/* D-pad cross — Nintendo-style + shape with accent center thumb. */
#mqJoyZone[data-skin="dpad"] .joy-disc {
  background: linear-gradient(180deg, #18181b, #0a0a0a);
  border-radius: 0;
  clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%);
  box-shadow: inset 0 0 0 2px var(--accent, #fb923c);
}
#mqJoyZone[data-skin="dpad"] .joy-cross-v,
#mqJoyZone[data-skin="dpad"] .joy-cross-h { display:none; }
#mqJoyZone[data-skin="dpad"] .joy-thumb {
  width:36px; height:36px; margin-left:-18px; margin-top:-18px;
  background: radial-gradient(circle at 35% 35%,
    color-mix(in srgb, var(--accent, #fb923c) 25%, #fff),
    var(--accent, #fb923c) 60%);
  border: 2px solid #fff;
  box-shadow: 0 0 12px var(--accent, #fb923c);
}

/* Pixel art — chunky 8-bit checkerboard, square sprite thumb. */
#mqJoyZone[data-skin="pixel"] .joy-disc {
  background: repeating-conic-gradient(#1a1a1a 0% 25%, #2a2a2a 0% 50%) 0 0/14px 14px;
  border-radius: 0;
  border: 3px solid var(--accent, #fb923c);
  image-rendering: pixelated;
}
#mqJoyZone[data-skin="pixel"] .joy-cross-v,
#mqJoyZone[data-skin="pixel"] .joy-cross-h { display:none; }
#mqJoyZone[data-skin="pixel"] .joy-thumb {
  width:24px; height:24px; margin-left:-12px; margin-top:-12px;
  background: var(--accent, #fb923c);
  border-radius: 0;
  border: 2px solid #fff;
  box-shadow: 4px 4px 0 #000;
}

/* Compass — brass/parchment face with N/E/S/W cardinal letters and red needle. */
#mqJoyZone[data-skin="compass"] .joy-disc {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g font-family='Georgia,serif' font-size='12' font-weight='bold' fill='%23451a03' text-anchor='middle'><text x='50' y='15'>N</text><text x='50' y='94'>S</text><text x='9' y='54'>W</text><text x='91' y='54'>E</text></g></svg>") 0 0/100% 100% no-repeat,
    radial-gradient(circle at 50% 50%, #fef3c7 0%, #d97706 100%);
  border: 4px solid #78350f;
  box-shadow: inset 0 0 0 2px #92400e;
}
#mqJoyZone[data-skin="compass"] .joy-cross-v,
#mqJoyZone[data-skin="compass"] .joy-cross-h { display:none; }
#mqJoyZone[data-skin="compass"] .joy-thumb {
  width:10px; height:64px; margin-left:-5px; margin-top:-32px;
  background: linear-gradient(to bottom, #dc2626 0%, #dc2626 50%, #f4f4f5 50%, #f4f4f5 100%);
  border-radius: 5px;
  border: 1px solid #18181b;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
#mqJoyZone[data-skin="compass"] .joy-thumb::before {
  content:''; position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px;
  border-radius:50%; background:#18181b;
  box-shadow: inset 0 0 0 2px #fbbf24;
}

/* Hover puck — chrome disc floating over a soft accent halo on the pad. */
#mqJoyZone[data-skin="puck"] .joy-disc {
  background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #050510 100%);
  border: 1px solid #1f2937;
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--accent, #fb923c) 28%, transparent);
}
#mqJoyZone[data-skin="puck"] .joy-disc::before {
  content:''; position:absolute; inset:38%; border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent, #fb923c) 60%, transparent), transparent 70%);
  filter: blur(4px);
  pointer-events:none;
}
#mqJoyZone[data-skin="puck"] .joy-cross-v,
#mqJoyZone[data-skin="puck"] .joy-cross-h { display:none; }
#mqJoyZone[data-skin="puck"] .joy-thumb {
  width:50px; height:50px; margin-left:-25px; margin-top:-25px;
  background: radial-gradient(circle at 30% 30%, #f4f4f5 0%, #a1a1aa 50%, #52525b 100%);
  border: 2px solid #71717a;
  box-shadow:
    0 12px 20px rgba(0,0,0,0.7),
    0 0 14px color-mix(in srgb, var(--accent, #fb923c) 70%, transparent);
}

/* ──────────────────────────────────────────────────────────────────
   PHONE-FRIENDLY POLISH (mobile audit P3 + P4)
   ─────────────────────────────────────────────────────────────────
   Two rules on small viewports:
     1. Touch-target floor — bump tiny chrome buttons to ≥32 px tap
        area (gauge theme picker, dashboard reset, log clear, etc.)
        so they're hittable with a finger. WCAG 2.5.5 AAA wants 44 px;
        we hit 32 here without breaking layout.
     2. Body overflow safety net — `overflow-x: hidden` on the root
        catches stray 5-15 px overflows from badges with shadows.
*/
@media (max-width: 520px) {
  /* 1. Touch-target floor */
  .mq-gauge-theme-btn { min-width: 32px !important; min-height: 32px !important; padding: 4px 6px !important; font-size: 16px !important; }
  .mq-dash-reset      { min-width: 32px !important; min-height: 32px !important; }
  button.secondary.small,
  button.small        { min-height: 32px !important; padding: 4px 10px !important; }
  /* 2. Body overflow safety net (catches 5-15 px shadow/border excess) */
  html, body          { overflow-x: hidden; }
}

/* ════════════════════════════════════════════════════════════════════
   MASCOT CONTROL HUB (Wave 10) — replaces 3 stacked FABs
   Single Maqueen-mascot floating button, bottom-right.
   Tap → 3 children fan out vertically with spring-bounce easing.
   Mascot face reflects BLE state (eyes green = connected).
   Head color matches the rail/header anatomy SVG (blue gradient).
   ════════════════════════════════════════════════════════════════════ */
/* Hide the header-lifted Maqueen anatomy — the FAB mascot is now THE
   only Maqueen face on the page. The original SVG (#mqAnatomy) lives
   in the rail (where it animates per-card state); rail-cleanup.js
   wraps it in .mq-header-robot to lift into the header. We just hide
   that lifted wrapper. The original rail anatomy keeps working. */
.mq-header-robot { display: none !important; }
#mqMascotHub {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9000;
  width: 140px;
  /* hub is anchored bottom-right by default; makeDraggable() may switch to
     absolute top/left if the user drags it elsewhere. */
}
#mqMascot {
  position: relative;
  display: grid;
  place-items: center;
  width: 140px;
  height: 100px;
  /* No background, no border — the anatomy SVG floats freely.
     'Tap me' affordance comes from the gentle bob animation +
     a soft drop-shadow under the SVG so it doesn't melt into the page. */
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: transform 0.12s, filter 0.15s;
  animation: mqMascotBob 3.4s ease-in-out infinite;
  touch-action: none;
}
#mqMascot:hover  { transform: scale(1.08); filter: drop-shadow(0 6px 14px rgba(59,130,246,0.5)); cursor: grab; }
#mqMascot:active { transform: scale(0.94); }
/* During drag — disable the bob animation so the mascot doesn't wobble
   while the user is repositioning it, and switch cursor to 'grabbing'
   so the drag feels intentional. The class is added in cockpit-redesign.js
   makeDraggable() once movement crosses DRAG_THRESHOLD. */
#mqMascotHub.mq-fab-dragging #mqMascot {
  animation-play-state: paused;
  cursor: grabbing;
  transform: scale(1.05);   /* freeze at a slightly raised state */
}
#mqMascotHub.mq-fab-dragging * { cursor: grabbing !important; }
#mqMascot svg    {
  display: block;
  pointer-events: none;
  width: 100%;
  height: 100%;
  /* Brighten the blue + add depth: drop-shadow for grounding +
     subtle bright glow around the robot to make it pop on dark themes. */
  filter:
    drop-shadow(0 5px 12px rgba(0,0,0,0.5))
    drop-shadow(0 0 12px rgba(96,165,250,0.55))
    brightness(1.15);
}
#mqMascotHub.mq-mascot-online #mqMascot svg {
  /* When connected: a stronger green glow around the floating robot */
  filter:
    drop-shadow(0 5px 12px rgba(0,0,0,0.5))
    drop-shadow(0 0 18px rgba(34,197,94,0.85))
    brightness(1.2);
}
@keyframes mqMascotBob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-5px) rotate(1.5deg); }
}
.mq-mascot-chevron {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #000;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

/* Fan container — column above the mascot, hidden by default */
#mqMascotFan {
  position: absolute;
  bottom: 112px;    /* lift above the 100-px mascot pill + 12-px gap */
  right: 38px;      /* center on the 140-px wide hub */
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}
#mqMascotFan .mq-fan-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #fff;
  cursor: pointer;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 3px rgba(0,0,0,0.25);
  /* Closed-state: collapsed below mascot, invisible, non-interactive */
  opacity: 0;
  transform: translateY(40px) scale(0.5);
  transition:
    opacity   0.22s ease,
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  padding: 0;
  /* Mobile: prevent touch from being claimed by the page (scroll/zoom)
     so dragging the hub from a fan button still works. The hub itself
     also has touch-action:none set inline by makeDraggable(). */
  touch-action: none;
}
#mqMascotFan .mq-fab-icon  { font-size: 22px; line-height: 1; }
#mqMascotFan .mq-fab-label { font-size: 9px;  letter-spacing: 0.10em; margin-top: 2px; }
.mq-fan-stop    { background: radial-gradient(circle at 30% 30%, #fca5a5, #dc2626 60%, #7f1d1d); }
.mq-fan-labs    { background: radial-gradient(circle at 30% 30%, #fed7aa, #fb923c 60%, #c2410c); }
.mq-fan-fit     { background: radial-gradient(circle at 30% 30%, #ddd6fe, #a78bfa 60%, #6d28d9); }
.mq-fan-fit.mq-fan-fit-active {
  background: radial-gradient(circle at 30% 30%, #fde68a, #fbbf24 60%, #a16207);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 3px rgba(0,0,0,0.25),
              0 0 0 8px rgba(251,191,36,0.35);
}
.mq-fan-connect { background: radial-gradient(circle at 30% 30%, #67e8f9, #0284c7 60%, #0c4a6e);
                  animation: mqFanConnectPulse 2s ease-in-out infinite; }
.mq-fan-connect.mq-fan-connected {
  background: radial-gradient(circle at 30% 30%, #bbf7d0, #22c55e 60%, #15803d);
  animation: none;
}
.mq-fan-btn:hover  { transform: translateY(0) scale(1.10); filter: brightness(1.08); }
.mq-fan-btn:active { transform: translateY(0) scale(0.92); }
.mq-fan-btn.mq-fab-flash { background: radial-gradient(circle at 30% 30%, #fff, #fca5a5 60%, #dc2626); }
@keyframes mqFanConnectPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 3px rgba(0,0,0,0.25); }
  50%      { box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 3px rgba(0,0,0,0.25), 0 0 0 14px rgba(56,189,248,0); }
}
/* Open state — fan items fade in + spring up, with stagger so they cascade */
#mqMascotFan.mq-fan-open       { pointer-events: auto; }
#mqMascotFan.mq-fan-open .mq-fan-btn { opacity: 1; transform: translateY(0) scale(1); }
#mqMascotFan.mq-fan-open .mq-fan-btn:nth-child(1) { transition-delay: 0.00s; }
#mqMascotFan.mq-fan-open .mq-fan-btn:nth-child(2) { transition-delay: 0.06s; }
#mqMascotFan.mq-fan-open .mq-fan-btn:nth-child(3) { transition-delay: 0.12s; }
#mqMascotFan.mq-fan-open .mq-fan-btn:nth-child(4) { transition-delay: 0.18s; }

/* HOVER-TO-PREVIEW fallback — if the user mouses over the hub area, the fan
   appears too. This guarantees button access regardless of click handler
   issues. The fan stays open as long as cursor is on hub OR fan.
   Suppressed while dragging so the fan doesn't flicker mid-grab. */
#mqMascotHub:not(.mq-fab-dragging):hover #mqMascotFan        { pointer-events: auto; }
#mqMascotHub:not(.mq-fab-dragging):hover #mqMascotFan .mq-fan-btn {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#mqMascotHub:not(.mq-fab-dragging):hover #mqMascotFan .mq-fan-btn:nth-child(1) { transition-delay: 0.00s; }
#mqMascotHub:not(.mq-fab-dragging):hover #mqMascotFan .mq-fan-btn:nth-child(2) { transition-delay: 0.06s; }
#mqMascotHub:not(.mq-fab-dragging):hover #mqMascotFan .mq-fan-btn:nth-child(3) { transition-delay: 0.12s; }
#mqMascotHub:not(.mq-fab-dragging):hover #mqMascotFan .mq-fan-btn:nth-child(4) { transition-delay: 0.18s; }

/* ── Fan flip-direction (added by makeDraggable when mascot is too close
   to the top of the viewport for the fan to open upward). Re-anchors the
   fan BELOW the mascot and reverses the stagger so the button nearest
   the mascot still animates in first. The hover-bridge ::before is also
   moved to the bottom so the gap between mascot and fan is hover-friendly
   regardless of direction. */
#mqMascotHub.mq-fan-flip #mqMascotFan {
  bottom: auto;
  top: 112px;             /* mascot ≈100px tall + 12 px gap */
  flex-direction: column; /* layout unchanged; only the order swaps */
}
#mqMascotHub.mq-fan-flip:not(.mq-fab-dragging):hover #mqMascotFan .mq-fan-btn:nth-child(4),
#mqMascotHub.mq-fan-flip                              #mqMascotFan.mq-fan-open .mq-fan-btn:nth-child(4) { transition-delay: 0.00s; }
#mqMascotHub.mq-fan-flip:not(.mq-fab-dragging):hover #mqMascotFan .mq-fan-btn:nth-child(3),
#mqMascotHub.mq-fan-flip                              #mqMascotFan.mq-fan-open .mq-fan-btn:nth-child(3) { transition-delay: 0.06s; }
#mqMascotHub.mq-fan-flip:not(.mq-fab-dragging):hover #mqMascotFan .mq-fan-btn:nth-child(2),
#mqMascotHub.mq-fan-flip                              #mqMascotFan.mq-fan-open .mq-fan-btn:nth-child(2) { transition-delay: 0.12s; }
#mqMascotHub.mq-fan-flip:not(.mq-fab-dragging):hover #mqMascotFan .mq-fan-btn:nth-child(1),
#mqMascotHub.mq-fan-flip                              #mqMascotFan.mq-fan-open .mq-fan-btn:nth-child(1) { transition-delay: 0.18s; }
#mqMascotHub.mq-fan-flip .mq-fan-btn {
  /* When flipped, the closed-state slide-in starts from above (negative Y) */
  transform: translateY(-40px) scale(0.5);
}
#mqMascotHub.mq-fan-flip #mqMascotFan.mq-fan-open .mq-fan-btn,
#mqMascotHub.mq-fan-flip:not(.mq-fab-dragging):hover #mqMascotFan .mq-fan-btn {
  transform: translateY(0) scale(1);
}
/* Make the hover area slightly bigger so the fan doesn't snap shut when
   the cursor crosses the gap between mascot and fan */
#mqMascotHub::before {
  content: '';
  position: absolute;
  bottom: 88px;
  right: -10px;
  width: 110px;
  height: 300px;  /* fits 4 items (76 px each incl. gap) instead of 3 */
  pointer-events: auto;
  z-index: -1;
}
/* Flipped variant — bridge sits below mascot instead of above so the
   hover-to-preview fallback continues to work after a flip. */
#mqMascotHub.mq-fan-flip::before {
  bottom: auto;
  top: 88px;
}

/* "NEW" badge on LABS button (smart-context placeholder for future use) */
.mq-fan-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #000;
}
.mq-fan-badge[hidden] { display: none; }

@media (max-width: 640px) {
  #mqMascotHub { right: 12px; bottom: 12px; width: 92px; }
  #mqMascot    { width: 92px; height: 66px; border-radius: 18px; }
  #mqMascot svg { width: 64px; height: 40px; }
  #mqMascotFan { bottom: 78px; right: 14px; gap: 10px; }
  #mqMascotFan .mq-fan-btn { width: 56px; height: 56px; }
}