/* ==========================================================================
   style.css
   Calm, Didactic 3-Column Scientific UI for the Hematite (alpha-Fe2O3)
   Spin-Wave (CPW) & SAW (IDT) Coordinate Calculator.
   ========================================================================== */

:root {
    --bg-app: #080d19;
    --bg-panel: #0f172a;
    --bg-card: #162138;
    --bg-input: #1e293b;
    --border-color: #293852;
    --border-highlight: #38bdf8;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --accent-primary: #0ea5e9;
    --accent-purple: #a855f7;
    --accent-amber: #f59e0b;
    --accent-rose: #f43f5e;
    --accent-emerald: #10b981;
    --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.3);
    --radius-sm: 8px;
    --radius-md: 12px;
}

body.theme-light {
    --bg-app: #f1f5f9;
    --bg-panel: #ffffff;
    --bg-card: #f8fafc;
    --bg-input: #f1f5f9;
    --border-color: #cbd5e1;
    --border-highlight: #0284c7;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --accent-primary: #0284c7;
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-app);
    color: var(--text-primary);
    line-height: 1.5;
    font-size: 13.5px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

code, pre, .num-unit input, .matrix-grid, .vector-table td, .compare-table td {
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

/* ==========================================================================
   Top Header & Guided Scenarios Bar
   ========================================================================== */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
    flex-wrap: wrap;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-icon {
    background: linear-gradient(135deg, #991b1b, #dc2626);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
    white-space: nowrap;
}

.app-header h1 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.app-header .subtitle {
    font-size: 12.5px;
    color: var(--text-muted);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Guided Learning Scenarios Bar */
.scenarios-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.scenarios-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.scenarios-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.scenario-chip {
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.scenario-chip small {
    color: var(--text-muted);
    font-size: 11px;
}
.scenario-chip:hover {
    border-color: var(--border-highlight);
    color: var(--text-primary);
}
.scenario-chip.active {
    background: rgba(14, 165, 233, 0.16);
    border-color: var(--border-highlight);
    color: var(--text-primary);
}

/* ==========================================================================
   Buttons & Badges
   ========================================================================== */
.ui-icon {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -2px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    text-decoration: none;
    color: var(--text-primary);
}

.btn-primary {
    background: linear-gradient(135deg, #0284c7, #2563eb);
    color: #fff;
}
.btn-primary:hover { filter: brightness(1.1); }

.btn-secondary {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.btn-secondary:hover { border-color: var(--border-highlight); }

.btn-outline {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.btn-outline.active {
    background: rgba(168, 85, 247, 0.15);
    border-color: #a855f7;
    color: var(--text-primary);
}

.btn-ghost {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.btn-ghost:hover {
    color: var(--text-primary);
    border-color: var(--border-highlight);
}

.btn-xs {
    padding: 4px 9px;
    font-size: 11.5px;
}

.btn-icon {
    padding: 7px 10px;
    background: var(--bg-card);
    border-color: var(--border-color);
}

.btn-block { width: 100%; }

.dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64748b;
    display: inline-block;
}
.btn-outline.active .dot-indicator {
    background: #c084fc;
    box-shadow: 0 0 6px #c084fc;
}

.badge-a, .badge-b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}
.badge-a {
    background: rgba(14, 165, 233, 0.2);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
}
.badge-b {
    background: rgba(244, 63, 94, 0.2);
    color: #fb7185;
    border: 1px solid rgba(251, 113, 133, 0.4);
}

/* ==========================================================================
   Main 3-Column Workspace Layout: Setup | 3D stage | Overview
   ========================================================================== */

.workspace-3col {
    display: grid;
    grid-template-columns: 380px minmax(560px, 1fr) 460px;
    gap: 16px;
    padding: 12px 18px;
    max-width: 2400px;
    width: 100%;
    margin: 0 auto;
    align-items: start;
}

/* The 3D stage stays in view while the side columns scroll */
.workspace-3col > .main-stage {
    position: sticky;
    top: 12px;
}

/* Laptops: keep all three columns, just narrower */
@media (max-width: 1500px) {
    .workspace-3col {
        grid-template-columns: 340px minmax(0, 1fr) 380px;
        gap: 12px;
        padding: 10px 12px;
    }
}

/* Too narrow for three: the overview moves below. The stage must not stay pinned then, it would cover the overview while scrolling */
@media (max-width: 1180px) {
    .workspace-3col {
        grid-template-columns: 340px minmax(0, 1fr);
    }
    .workspace-3col > .main-stage {
        position: static;
    }
    .workspace-3col > .overview-col {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        align-items: start; /* cards keep their own height instead of stretching to their row neighbour */
    }
}

@media (max-width: 1060px) {
    .workspace-3col {
        grid-template-columns: 1fr;
    }
    .workspace-3col > .main-stage {
        position: static;
    }
}

/* ==========================================================================
   Left Sidebar: presets · setup tabs · magnet dock
   Sticky; the tab card is as high as its tallest panel, so switching tabs never moves the dock.
   ========================================================================== */
.workflow-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
}

.setup-switcher-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 13px 15px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 9px;
}

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

.preset-manager-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.preset-delete-btn:hover {
    color: #fb7185;
    border-color: rgba(244, 63, 94, 0.45);
    background: rgba(244, 63, 94, 0.1);
}

.preset-dropdown-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preset-dropdown-row .select-input {
    width: 100%;
}

.save-preset-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
}

.save-preset-row .input-text {
    flex: 1;
    padding: 5px 8px;
    font-size: 12px;
}

.preset-dropdown-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.compare-setup-box {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--border-color);
}

.setup-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.setup-tab {
    flex: 1;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.setup-tab.active {
    background: rgba(14, 165, 233, 0.16);
    border-color: var(--border-highlight);
    color: var(--text-primary);
}

.setup-name-row {
    display: flex;
    gap: 6px;
}

.input-text, .select-input {
    width: 100%;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 12.5px;
}

/* Setup tabs: the tab bar stays put, only the panel below changes (it scrolls on its own) */
.side-tabs-card {
    flex: 0 1 auto;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.side-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.side-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 9px 10px 7px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
}
.side-tab + .side-tab {
    border-left: 1px solid var(--border-color);
}
.side-tab:hover {
    color: var(--text-primary);
    background: rgba(56, 189, 248, 0.06);
}
.side-tab.active {
    color: var(--text-primary);
    background: var(--bg-panel);
    border-bottom-color: var(--accent-primary);
}
.side-tab:focus-visible {
    outline: 2px solid var(--border-highlight);
    outline-offset: -2px;
}

.side-tab-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
}

.side-tab-num {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    font-size: 10.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.side-tab.active .side-tab-num {
    background: var(--accent-primary);
    border-color: var(--border-highlight);
    color: #fff;
}
.side-tab-sum {
    max-width: 100%;
    min-height: 16px;
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.side-tab-sum .katex {
    font-size: 1.05em;
}

/* All panels share one grid cell: the inactive ones stay invisible but keep their height */
.side-panels {
    display: grid;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding: 14px 14px 16px 16px;
}
.side-panel {
    grid-area: 1 / 1;
    min-width: 0;
}
.side-panel[hidden] {
    display: block;
    visibility: hidden;
}
/* Hide at once: children with transition: all would otherwise fade their inherited visibility, mixing both tabs for a moment */
.side-panel[hidden],
.side-panel[hidden] * {
    transition: none !important;
}
.side-panel > .field-label:first-child {
    margin-top: 0;
}
.field-label.section-start {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Single column or a short window: the sidebar flows with the page again (a sticky one would squeeze the tabs) */
@media (max-width: 1060px), (max-height: 820px) {
    .workflow-sidebar {
        position: static;
        max-height: none;
    }
    .side-panels {
        overflow: visible;
    }
}

.field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 12px 0 7px;
}

/* Cut Preset Grid */
.cut-preset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.cut-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}
.cut-btn strong {
    display: block;
    font-size: 12.5px;
    color: var(--text-primary);
}
.cut-btn small {
    font-size: 10.5px;
    color: var(--text-muted);
}
.cut-btn.cut-btn-wide {
    grid-column: 1 / -1;
    text-align: center;
}
.cut-btn.active {
    background: rgba(168, 85, 247, 0.18);
    border-color: #c084fc;
}

.info-callout {
    font-size: 11.5px;
    color: var(--text-secondary);
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(192, 132, 252, 0.25);
    border-radius: 6px;
    padding: 9px 11px;
    margin-bottom: 12px;
}

/* Segmented Controls */
.segmented-control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.seg-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 11px;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}
.seg-btn strong {
    display: block;
    font-size: 12.5px;
    color: var(--text-primary);
}
.seg-btn small {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.35;
    display: block;
    margin-top: 3px;
}
.seg-btn.active {
    background: rgba(14, 165, 233, 0.16);
    border-color: var(--border-highlight);
}

.helper-note {
    font-size: 11.5px;
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.35);
    padding: 9px 11px;
    border-radius: 6px;
    border-left: 3px solid var(--accent-primary);
    margin-bottom: 12px;
}

/* Sliders */
.slider-block {
    margin-bottom: 14px;
}
.slider-block.compact-top {
    margin-top: 10px;
}

.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}

.num-unit {
    display: inline-flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 3px 7px;
}
.num-unit input {
    width: 58px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    text-align: right;
    font-size: 12.5px;
    font-weight: 600;
    outline: none;
}
.num-unit-lg input {
    font-size: 14px;
    width: 64px;
    color: var(--border-highlight);
}
.num-unit span {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 3px;
}

input[type="range"] {
    width: 100%;
    accent-color: var(--accent-primary);
    cursor: pointer;
    height: 6px;
}
.range-lg {
    height: 8px;
}

.quick-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 7px;
}
.quick-chips button {
    flex: 1;
    min-width: 42px;
    padding: 4px 7px;
    font-size: 11px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 5px;
    cursor: pointer;
}
.quick-chips button:hover {
    border-color: var(--border-highlight);
    color: var(--text-primary);
}
.quick-chips button.active {
    background: rgba(14, 165, 233, 0.18);
    border-color: #38bdf8;
    color: var(--text-primary);
    font-weight: 600;
}

.calm-inline-status {
    margin-top: 9px;
    padding: 7px 10px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.calm-inline-status strong {
    color: #38bdf8;
}
.status-sep {
    color: var(--text-muted);
}

/* Magnet dock: always visible at the bottom of the left column */
.magnet-dock {
    flex-shrink: 0;
    background: var(--bg-panel);
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-left: 4px solid var(--accent-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 11px 14px 12px;
}

.magnet-dock-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.magnet-dock-title {
    margin-right: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.magnet-dock-b0 {
    margin-left: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}
.magnet-dock .num-unit:last-child input {
    width: 44px;
}

/* Mounting Presets & IP Calibration */
.mounting-preset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 10px;
}

.mount-preset-btn {
    padding: 7px 9px;
    font-size: 11.5px;
    font-weight: 500;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}
.mount-preset-btn:hover {
    border-color: #c084fc;
    color: var(--text-primary);
}
.mount-preset-btn.mount-preset-wide {
    grid-column: 1 / -1;
}

.ip-calib-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-secondary);
    background: var(--bg-card);
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px dashed var(--border-color);
    margin-bottom: 10px;
}
.ip-calib-row input {
    width: 52px;
    padding: 3px 5px;
    text-align: right;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
}

.mounting-summary-box {
    font-size: 11.5px;
    color: var(--text-secondary);
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(192, 132, 252, 0.22);
    border-radius: 6px;
    padding: 9px 11px;
    line-height: 1.5;
}
.mounting-summary-box code {
    color: #38bdf8;
    font-weight: 600;
}

/* Popular 0°-Edge Presets per Cut */
.edge-preset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.edge-preset-card {
    background: var(--bg-input);
    border: 1.5px solid var(--border-color);
    border-radius: 7px;
    padding: 9px 10px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.15s ease;
}

.edge-preset-card strong {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.3;
}

.edge-preset-card small {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.3;
}

.edge-preset-card:hover {
    border-color: rgba(56, 189, 248, 0.55);
}

.edge-preset-card.active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(59, 130, 246, 0.12));
    border-color: #38bdf8;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.14);
}

.mini-crystal-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
    background: var(--bg-panel);
    padding: 9px 8px;
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
}
.crystal-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.crystal-badge-item .badge-label {
    color: var(--text-muted);
    display: block;
    font-size: 10.5px;
    font-weight: 500;
}
.crystal-badge-item strong {
    color: #38bdf8;
    font-size: 12.5px;
}
.mini-crystal-badges code {
    color: var(--border-highlight);
    font-weight: 600;
}

.hkil-apply-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
}
.hkil-apply-row input {
    width: 42px;
    padding: 4px;
    text-align: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 5px;
}

/* Magnet dock: marks on the φ_M slider at the angles where B points along k̂, t̂, n̂ or a crystal axis */
.phi-track {
    margin-top: 2px;
}
.phi-ticks {
    position: relative;
    height: calc(20px + (var(--rows, 1) - 1) * 13px);
    margin: 0 8px; /* the range thumb's centre never gets closer to the ends than half its width */
}
.phi-tick {
    --row: 0;
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    cursor: pointer;
}
.phi-tick::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    width: 2px;
    height: calc(6px + var(--row) * 13px); /* reaches down to its angle when that moved a line lower */
    border-radius: 1px;
    background: var(--text-muted);
}
.phi-tick-deg {
    position: absolute;
    top: calc(7px + var(--row) * 13px);
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    line-height: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.phi-tick.on::before,
.phi-tick.hot::before {
    background: var(--border-highlight);
}
.phi-tick.on .phi-tick-deg,
.phi-tick.hot .phi-tick-deg {
    color: var(--border-highlight);
}
.phi-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.phi-pills:empty {
    display: none;
}
.phi-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 11.5px;
    white-space: nowrap;
    cursor: pointer;
}
.phi-pill:hover,
.phi-pill.hot,
.phi-pill:focus-visible {
    border-color: var(--border-highlight);
    outline: none;
}
.phi-pill.on {
    border-color: var(--border-highlight);
    background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-input));
}
.phi-pill-deg {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--text-muted);
}
.phi-pill.on .phi-pill-deg {
    color: var(--border-highlight);
}
.phi-mark-label {
    color: var(--tok);
    font-weight: 600;
}
.phi-mark-sep {
    margin: 0 4px;
    color: var(--text-muted);
}

/* Directions this mount cannot reach; one of them can open the mount that does */
.phi-off {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
    font-size: 11.5px;
}
.phi-off[hidden] {
    display: none;
}
.phi-off-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.phi-off-label {
    margin-right: 2px;
    color: var(--text-muted);
}
.phi-off-item {
    padding: 1px 7px;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}
.phi-off-item:hover,
.phi-off-item.active {
    border-style: solid;
    border-color: rgba(245, 158, 11, 0.6);
}
.phi-off-caret {
    margin-left: 4px;
    font-size: 9px;
    color: var(--text-muted);
}
.phi-remount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: var(--text-secondary);
}
.phi-remount b {
    color: var(--text-primary);
}
.phi-remount .btn {
    flex-shrink: 0;
}

/* ==========================================================================
   Right Column: Focus Stage & Single/Dual View Switcher
   ========================================================================== */
.main-stage {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Prominent 3D Frame Lock Bar directly below the 3D canvas */
.card-3d {
    display: flex;
    flex-direction: column;
}

.canvas-3d-viewport {
    position: relative;
    flex: 1;
    min-height: 440px;
    width: 100%;
}

/* Floating top-right corner buttons inside each 3D viewport */
.canvas-top-right-controls {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 6px;
}

.canvas-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

body.theme-light .canvas-pill-btn {
    background: rgba(255, 255, 255, 0.88);
}

.canvas-pill-btn:hover {
    border-color: var(--border-highlight);
    color: var(--text-primary);
}

.canvas-pill-btn.active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.28), rgba(37, 99, 235, 0.24));
    border-color: #38bdf8;
    color: var(--text-primary);
}

.frame-lock-bottom-bar {
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 11px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bottom-bar-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toolbar-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-secondary);
}

.frame-pills-lg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 760px) {
    .frame-pills-lg {
        grid-template-columns: 1fr 1fr;
    }
}

.frame-pill {
    padding: 8px 10px;
    border-radius: 7px;
    background: var(--bg-input);
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}
.frame-pill:hover {
    border-color: var(--border-highlight);
    color: var(--text-primary);
}
.frame-pill.active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.24), rgba(37, 99, 235, 0.22));
    border-color: #38bdf8;
    color: var(--text-primary);
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.18);
}

/* Stage Viewport Modes: Single 3D (default) vs. Optional Dual 3D Side-by-Side */
.stage-container {
    display: grid;
    gap: 12px;
}

/* Mode 1: Single 3D Full View (Default!) */
.stage-container.mode-3d {
    grid-template-columns: 1fr;
}
.stage-container.mode-3d .card-3d-secondary {
    display: none;
}
.stage-container.mode-3d .card-3d .canvas-3d-viewport {
    flex: none; /* flex:1 would replace the height with the canvas' intrinsic size */
    height: clamp(460px, calc(100vh - 110px), 1150px);
}

/* Mode 2: Dual 3D Side-by-Side */
.stage-container.mode-dual-3d {
    grid-template-columns: 1fr 1fr;
}
.stage-container.mode-dual-3d .card-3d .canvas-3d-viewport {
    flex: none;
    height: clamp(420px, calc(100vh - 190px), 900px);
}
.stage-container.mode-dual-3d .card-3d .frame-pills-lg {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 960px) {
    .stage-container.mode-dual-3d {
        grid-template-columns: 1fr;
    }
}

.stage-card {
    container-type: inline-size;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.stage-card canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.canvas-hint {
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.75);
    padding: 3px 9px;
    border-radius: 5px;
    pointer-events: none;
}
/* Narrow stage: lift the hint above the "Ansicht: …" line drawn into the canvas, side by side they overlap */
@container (max-width: 860px) {
    .canvas-hint {
        bottom: 34px;
    }
}

/* ==========================================================================
   Overview column: result tiles
   ========================================================================== */

.core-results-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 900px) {
    .core-results-strip {
        grid-template-columns: 1fr;
    }
}

.core-result-tile {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: var(--shadow-sm);
}

.core-result-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.legend-dot.dot-cyan { background: #38bdf8; }
.legend-dot.dot-rose { background: #fb7185; }
.legend-dot.dot-emerald { background: #34d399; }

.core-result-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    flex: 1;
}

.core-result-val {
    font-size: 14px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
}

.core-result-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    padding-left: 16px;
}

.opt-compare {
    margin-top: 4px;
    padding-top: 3px;
    border-top: 1px dashed var(--border-color);
    font-size: 10.5px;
    color: #fda4af;
    padding-left: 16px;
}

/* Device Miller-Bravais Live Readout Box in Step 1 */
.device-miller-live-box {
    margin-top: 7px;
    padding: 6px 9px;
    border-radius: 6px;
    background: rgba(168, 85, 247, 0.09);
    border: 1px solid rgba(192, 132, 252, 0.28);
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11.5px;
}

.device-miller-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-primary);
}

.device-miller-main strong {
    color: #f0abfc;
    font-weight: 700;
}

.device-miller-edges {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}

.quick-chips-miller {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px !important;
    margin-top: 7px !important;
}

.quick-chips-miller button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px !important;
    font-size: 11px !important;
}

.quick-chips-miller button.active {
    background: rgba(232, 121, 249, 0.18);
    border-color: #e879f9;
    color: var(--text-primary);
}

.opt-mini-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.opt-card-mini {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
}
.opt-card-mini .opt-title {
    font-size: 11.5px;
}

/* Miller-Bravais input rows (Eigene Richtung) */

.seg-xs {
    margin-bottom: 0;
}
.seg-xs .seg-btn {
    padding: 4px 10px;
    font-size: 11.5px;
}















/* Tables & 3x3 Matrix */
.select-xs {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11.5px;
}

.table-scroll { overflow-x: auto; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}
.data-table th, .data-table td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--border-color);
    text-align: right;
}
.data-table th:first-child, .data-table td:first-child {
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}
.data-table th {
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.3);
}

.matrix-selector-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}
.arrow-sep {
    color: var(--accent-primary);
    font-weight: 700;
}
.matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: var(--bg-panel);
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    text-align: center;
    font-size: 12px;
    margin-bottom: 8px;
}
.matrix-cell {
    padding: 4px;
    background: var(--bg-card);
    border-radius: 4px;
}

/* ==========================================================================
   Modals (SVG Generator & Python Snippet)
   ========================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.78);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}
.modal-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.modal-xl { max-width: 1160px; }
/* Export dialog: fixed size so the tab bar doesn't jump when switching tabs */
#modalExport .modal-card { height: min(820px, calc(100vh - 40px)); }
#modalExport .export-panel { flex: 1; min-height: 0; }
.modal-lg { max-width: 780px; }
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}
.modal-header h2 { font-size: 16px; }
.modal-header p { font-size: 12px; color: var(--text-muted); }
.btn-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
}
.modal-body {
    padding: 16px 18px;
    overflow-y: auto;
}
.svg-modal-grid {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 16px;
}
@media (max-width: 860px) {
    .svg-modal-grid { grid-template-columns: 1fr; }
}
.svg-chk-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 14px;
    font-size: 12px;
}
.svg-chk-list label {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}
.modal-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.svg-preview-box {
    background: #e2e8f0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 440px;
    overflow: auto;
}
.svg-preview-box svg {
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}
.svg-preview-col { min-height: 0; display: flex; }
/* The figure carries its print width (mm); the preview scales it up to the box */
#svgPreviewContainer svg {
    width: 100%;
    max-width: 640px;
    background: #ffffff;
}
.svg-preview-col .svg-preview-box { flex: 1; }
.png-preview-box canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}
/* Checkerboard behind a transparent PNG so the missing background is visible */
.png-preview-box.is-transparent canvas {
    background: repeating-conic-gradient(#cbd5e1 0% 25%, #f8fafc 0% 50%) 0 0 / 16px 16px;
}
.png-size {
    font-size: 11.5px;
    text-align: center;
}
.fig-note {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-secondary);
}
.fig-more {
    margin-bottom: 10px;
}
.fig-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 6px 10px;
}
.fig-grid .field-label {
    margin: 0;
}
.seg-xs.fig-seg {
    display: grid;
    grid-auto-columns: 1fr;
    gap: 5px;
}
.seg-xs.fig-seg .seg-btn {
    padding: 7px 8px;
    font-size: 12px;
    white-space: nowrap;
}
.fig-range {
    display: flex;
    gap: 6px;
}
.fig-range .num-unit {
    flex: 1;
    min-width: 0;
}
.fig-range .num-unit input {
    width: 100%;
}
.fig-chk {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin: 12px 0 14px;
}
.fig-style-editor {
    margin: 8px 0 14px;
}
/* SVG tab: a wider, roomier options column */
.fig-modal-grid {
    grid-template-columns: 360px 1fr;
    gap: 22px;
}
@media (max-width: 860px) {
    .fig-modal-grid { grid-template-columns: 1fr; }
}
.fig-modal-grid .export-intro {
    margin-bottom: 6px;
}
.fig-modal-grid .fig-more {
    margin-bottom: 16px;
}
.fig-modal-grid .fig-grid {
    gap: 10px 16px;
}
.fig-modal-grid .fig-grid .select-input,
.fig-modal-grid .fig-grid .input-text {
    padding-top: 7px;
    padding-bottom: 7px;
}
.fig-modal-grid .fig-range {
    gap: 8px;
}
.fig-modal-grid .fig-range .num-unit {
    padding: 6px 10px;
}
.fig-modal-grid .fig-chk {
    gap: 10px 16px;
    margin: 20px 0 20px;
}
.fig-modal-grid .preset-dropdown-row {
    margin-top: 6px;
}
.fig-modal-grid .fig-style-editor {
    margin: 12px 0 20px;
}
.fig-modal-grid .modal-actions-stack {
    gap: 10px;
}
.fig-style-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    font-size: 11.5px;
}
.fig-sub {
    margin-top: 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.fig-color-grid,
.fig-num-grid,
.fig-sym-grid {
    display: grid;
    gap: 5px 8px;
}
.fig-color-grid {
    grid-template-columns: 1fr 1fr;
}
.fig-color-grid label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.fig-color-grid input[type='color'] {
    width: 26px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: none;
    cursor: pointer;
}
.fig-num-grid {
    grid-template-columns: 1fr 1fr;
}
.fig-num-grid label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    color: var(--text-secondary);
}
.fig-num-grid label.wide {
    grid-column: 1 / -1;
}
.fig-num-grid input,
.fig-num-grid select,
.fig-sym-grid input {
    width: 64px;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 11.5px;
}
.fig-num-grid label.wide input {
    width: auto;
    flex: 1;
}
.fig-sym-grid {
    grid-template-columns: repeat(6, 1fr);
}
.fig-sym-grid input {
    width: 100%;
    text-align: center;
    font-style: italic;
}
.fig-style-io {
    display: flex;
    gap: 6px;
}
.code-block {
    background: #090d16;
    color: #e2e8f0;
    padding: 14px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 12px;
    overflow-x: auto;
    line-height: 1.5;
    margin-bottom: 12px;
}
.modal-footer-bar {
    display: flex;
    gap: 10px;
}
.hidden {
    display: none !important;
}

/* ==========================================================================
   Right Column: live overview cards
   ========================================================================== */
.overview-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.overview-col .core-results-strip {
    gap: 6px;
}
.overview-col .core-result-tile {
    padding: 9px 10px;
    gap: 2px;
}
.overview-col .core-result-top {
    flex-wrap: wrap;
    gap: 2px 6px;
}
.overview-col .core-result-val {
    flex-basis: 100%;
    font-size: 20px;
}
.overview-col .core-result-sub {
    padding-left: 0;
    font-size: 11px;
}

.core-result-tile[data-emph] {
    cursor: default;
    transition: border-color 0.15s ease;
}
.core-result-tile[data-emph]:hover {
    border-color: var(--border-highlight);
}

.overview-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.overview-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.overview-card-head h2 {
    font-size: 14px;
    font-weight: 700;
}
.overview-card-hint {
    font-size: 11px;
    color: var(--text-muted);
}
.overview-card-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}
.overview-card-foot {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
}

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

/* Segmented control, compact variant (overview cards) */
.seg-xs {
    margin-bottom: 0;
    display: inline-grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 3px;
}
.seg-xs .seg-btn {
    padding: 3px 9px;
    font-size: 11.5px;
    text-align: center;
    border-radius: 6px;
}

/* --- Colored, hoverable terms ------------------------------------------- */
.tok {
    color: var(--tok);
    font-weight: 600;
    border-bottom: 1px dotted color-mix(in srgb, var(--tok) 60%, transparent);
    cursor: help;
    border-radius: 3px;
    transition: background 0.12s ease;
}
.tok:hover {
    background: color-mix(in srgb, var(--tok) 18%, transparent);
}
.tok-inline {
    color: var(--tok);
    font-weight: 600;
}

/* --- "Was passiert hier?" story ---------------------------------------- */
.story {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.story-step {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.story-step-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    cursor: help;
}
.story-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.45);
    color: #7dd3fc;
    font-size: 10.5px;
}
.story-step p {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    padding-left: 25px;
}
.story-model-note {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
    border-top: 1px dashed var(--border-color);
    padding-top: 8px;
}

/* --- Vector table -------------------------------------------------------- */
.vector-table tbody tr {
    transition: background 0.12s ease;
}
.vector-table tbody tr:hover {
    background: rgba(56, 189, 248, 0.08);
}
.vector-table td.num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vector-table td:first-child {
    white-space: nowrap;
}
.vt-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: 1px;
}

/* --- Eigene Richtung ------------------------------------------------------ */
/* Mode switch: one row, underline style */
.cd-modes {
    display: grid;
    grid-template-columns: repeat(4, auto);
    border-bottom: 1px solid var(--border-color);
}
.cd-mode {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 6px 4px 7px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.cd-mode:hover {
    color: var(--text-secondary);
}
.cd-mode.active {
    color: #fdba74;
    border-bottom-color: #fb923c;
}

/* Miller(-Bravais) index input that looks like [u v t w] */
.mi-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 0 4px;
}
.mi-br {
    font-family: 'KaTeX_Main', 'Times New Roman', serif;
    font-size: 34px;
    line-height: 1;
    color: var(--text-muted);
    margin-top: -14px;
}
.mi-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.mi-cell span {
    font-size: 10.5px;
    font-style: italic;
    color: var(--text-muted);
}
.mi-input input {
    width: 54px;
    padding: 6px 2px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}
.mi-input input::-webkit-inner-spin-button,
.mi-input input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.mi-input input:focus {
    border-color: #fb923c;
}
.mi-input input:disabled {
    background: transparent;
    border-style: dashed;
    color: var(--text-muted);
}
.mi-sm {
    padding: 0;
    gap: 4px;
}
.mi-sm .mi-br {
    font-size: 24px;
    margin-top: -2px;
}
.mi-sm input {
    width: 44px;
    padding: 4px 2px;
    font-size: 13px;
}

/* "Senkrecht zu zwei" */
.cd-cross {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 8px;
}
.cd-cross-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: center;
    gap: 8px;
}
.cd-cross-row .mi-input {
    justify-content: flex-start;
}

/* Angle input */
.cd-angles {
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: 10px 0 4px;
}
.cd-ang {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}
.cd-ang > span {
    font-style: italic;
}

/* Result */
.custom-dir-result {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 12px;
    background: rgba(251, 146, 60, 0.06);
    border: 1px solid rgba(251, 146, 60, 0.28);
    border-radius: var(--radius-sm);
}
.cd-res-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    cursor: help;
}
.cd-res-idx {
    font-size: 17px;
    color: #fdba74;
}
.cd-res-class {
    font-size: 12.5px;
    color: var(--text-secondary);
}
.cd-res-sub {
    font-size: 11.5px;
    color: var(--text-muted);
}
.cd-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(251, 146, 60, 0.18);
}
.cd-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}
.cd-stat + .cd-stat {
    border-left: 1px solid var(--border-color);
}
.cd-stat strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: var(--text-primary);
}
/* Content of a <details> lives in ::details-content (a block box), so space it there */
#customDirCard[open] {
    gap: 14px;
}
#customDirCard::details-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cd-actions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
}
.cd-pin:disabled {
    opacity: 0.55;
    cursor: default;
}
.cd-pin:not(:disabled):hover,
.cd-drive:hover {
    border-color: #fb923c;
}

/* Pinned directions */
.pinned-dirs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}
.pinned-dirs[hidden] {
    display: none;
}
.pinned-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pinned-head .btn-link {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.pinned-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pin-item {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    font-size: 12px;
}
.pin-item:hover {
    border-color: var(--border-color);
}
.pin-item.active {
    border-color: rgba(251, 146, 60, 0.45);
}
.pin-item .vt-dot {
    margin-right: 0;
}
.pin-load {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 13.5px;
    color: var(--text-primary);
    cursor: pointer;
}
.pin-load:hover {
    color: #fdba74;
}
.pin-class {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pin-ang {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.pin-remove {
    background: none;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}
.pin-remove:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* ==========================================================================
   3D stage: legend chips, tour button & caption
   ========================================================================== */
.canvas-legend {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, var(--chip) 45%, transparent);
    color: var(--text-primary);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.legend-chip i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chip);
    box-shadow: 0 0 6px var(--chip);
}
.legend-chip:hover {
    border-color: var(--chip);
}
.legend-chip.off {
    color: var(--text-muted);
    border-color: var(--border-color);
    opacity: 0.6;
}
.legend-chip.off i {
    background: transparent;
    box-shadow: none;
    border: 1.5px solid var(--chip);
}
body.theme-light .legend-chip {
    background: rgba(255, 255, 255, 0.88);
}

.canvas-pill-accent {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.3), rgba(244, 63, 94, 0.24));
    border-color: rgba(251, 146, 60, 0.6);
    color: var(--text-primary);
}
.canvas-pill-accent:hover {
    border-color: #fb923c;
}

.tour-caption {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 7;
    width: min(640px, calc(100% - 28px));
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(251, 146, 60, 0.55);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 11px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
body.theme-light .tour-caption {
    background: rgba(255, 255, 255, 0.95);
}
.tour-caption-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tour-caption-head strong {
    font-size: 13.5px;
}
.tour-dots {
    display: inline-flex;
    gap: 5px;
    flex: 1;
}
.tour-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border-color);
}
.tour-dot.done {
    background: rgba(251, 146, 60, 0.5);
}
.tour-dot.active {
    background: #fb923c;
    box-shadow: 0 0 6px #fb923c;
}
.tour-caption p {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.tour-phi,
.tour-easy {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
}
.tour-caption-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
.btn-close-sm {
    padding: 2px;
    font-size: 14px;
}

/* ==========================================================================
   Export dialog (SVG · Python · Matrix)
   ========================================================================== */
.export-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.export-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 7px;
    background: var(--bg-input);
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.export-tab:hover {
    color: var(--text-primary);
    border-color: var(--border-highlight);
}
.export-tab.active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.24), rgba(37, 99, 235, 0.22));
    border-color: #38bdf8;
    color: var(--text-primary);
}
.export-intro {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.5;
}
.matrix-grid-labeled {
    grid-template-columns: auto repeat(3, 1fr);
    max-width: 520px;
}
.matrix-cell.matrix-head {
    background: transparent;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
}

/* Small notification (e.g. "Link kopiert") */
.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1100;
    background: var(--bg-card);
    border: 1px solid var(--border-highlight);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    font-size: 12.5px;
}

/* --- "Kurz gesagt" one-liners ------------------------------------------- */
.gist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gist li {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 8px;
    align-items: baseline;
    padding: 5px 6px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
}
.gist li:hover {
    background: rgba(56, 189, 248, 0.06);
}
.gist-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* --- Collapsible extras --------------------------------------------------- */
.more-details > summary,
.overview-details > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.more-details > summary::-webkit-details-marker,
.overview-details > summary::-webkit-details-marker {
    display: none;
}
.more-details > summary {
    font-size: 12px;
    color: var(--text-muted);
}
.more-details > summary::before,
.overview-details > summary h2::before {
    content: '▸';
    display: inline-block;
    width: 1em;
    transition: transform 0.15s ease;
}
.more-details[open] > summary::before,
.overview-details[open] > summary h2::before {
    transform: rotate(90deg);
}
.more-details > summary:hover {
    color: var(--text-secondary);
}
.more-details[open] > .story {
    margin-top: 10px;
}
.overview-details:not([open]) {
    gap: 0;
}

/* --- Vector table footer --------------------------------------------------- */
.vt-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.btn-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 11.5px;
    color: #7dd3fc;
    cursor: pointer;
}
.btn-link:hover {
    text-decoration: underline;
}
.legend-chip[hidden] {
    display: none;
}

/* ==========================================================================
   Share & export card (right column)
   ========================================================================== */
.export-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
}
.export-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.export-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.export-tile:hover {
    border-color: var(--border-highlight);
    background: var(--bg-card);
}
.export-tile .ui-icon {
    flex: none;
    color: var(--text-secondary);
}
.export-more {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Field sweep preview (export dialog) */
.sweep-plot {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sweep-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 11.5px;
    color: var(--text-secondary);
}
.sweep-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sweep-plot-wrap {
    position: relative;
}
.sweep-svg {
    display: block;
    width: 100%;
    height: auto;
    font-family: inherit;
}
.sweep-svg .sw-grid {
    stroke: var(--border-color);
    stroke-width: 1;
}
.sweep-svg .sw-grid-v {
    stroke-dasharray: 2 4;
}
.sweep-svg .sw-tick {
    font-size: 10px;
    fill: var(--text-muted);
}
.sweep-svg .sw-axis-title {
    font-size: 10.5px;
    fill: var(--text-muted);
}
.sweep-svg .sw-end {
    font-size: 11px;
    font-weight: 600;
    fill: var(--text-secondary);
}
.sweep-svg .sw-geo {
    fill: var(--bg-input);
}
.sweep-svg .sw-geo-strong {
    fill: var(--bg-card);
    stroke: var(--text-muted);
    stroke-opacity: 0.5;
    stroke-width: 1;
}
.sweep-svg .sw-geo-text {
    font-size: 10px;
    font-weight: 600;
    fill: var(--text-secondary);
}
.sweep-svg .sw-current {
    stroke: var(--text-secondary);
    stroke-width: 1.5;
}
.sweep-svg .sw-current-text {
    font-size: 10px;
    font-weight: 600;
    fill: var(--text-secondary);
}
.sweep-svg .sw-cross {
    stroke: var(--text-muted);
    stroke-width: 1;
}
.sweep-svg .sw-dot {
    stroke: var(--bg-panel);
    stroke-width: 2;
}
.sweep-svg .sw-hit {
    cursor: crosshair;
}
.sweep-tip {
    position: absolute;
    pointer-events: none;
    min-width: 170px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    box-shadow: var(--shadow-sm);
    font-size: 11.5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 2;
}
.sweep-tip-head {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.sweep-tip-row {
    display: grid;
    grid-template-columns: 12px auto 1fr;
    align-items: center;
    gap: 7px;
}
.sweep-tip-row strong {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.sweep-tip-row span {
    color: var(--text-muted);
}
.sweep-actions {
    display: flex;
    justify-content: flex-end;
}