/* ================================================================
   ESPRESSO COMMAND CENTER - Global Stylesheet
   Dark aerospace theme with amber/green/red accent system
   ================================================================ */

:root {
    /* Backgrounds */
    --bg-primary:        #0a0b0d;
    --bg-panel:          #111318;
    --bg-panel-hover:    #14161e;
    --bg-input:          #161820;
    --border-panel:      #1e2028;
    --border-subtle:     #252830;

    /* Text */
    --text-primary:      #e8eaf0;
    --text-secondary:    #7a7f8e;
    --text-muted:        #4a4f60;

    /* Accents */
    --accent-amber:      #f59e0b;
    --accent-amber-dim:  #b45309;
    --accent-amber-glow: rgba(245, 158, 11, 0.15);

    /* Semantic colors */
    --color-sweet:       #22c55e;
    --color-sweet-glow:  rgba(34, 197, 94, 0.15);
    --color-danger:      #ef4444;
    --color-danger-glow: rgba(239, 68, 68, 0.12);
    --color-warn:        #f59e0b;
    --color-warn-glow:   rgba(245, 158, 11, 0.12);
    --color-info:        #3b82f6;

    /* Compass zone fill colors */
    --zone-under-strong: rgba(245, 158, 11, 0.10);
    --zone-over:         rgba(239,  68, 68, 0.10);
    --zone-under-weak:   rgba( 99, 102, 241, 0.10);
    --zone-sweet:        rgba( 34, 197,  94, 0.18);

    /* UI */
    --radius-sm:         4px;
    --radius-md:         8px;
    --radius-lg:         12px;
    --radius-pill:       9999px;
    --shadow-panel:      0 4px 24px rgba(0,0,0,0.5);
    --shadow-glow-amber: 0 0 20px rgba(245,158,11,0.12);

    /* Slider */
    --slider-track:      #2a2d3a;
    --slider-thumb:      var(--accent-amber);

    /* Fonts */
    --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Consolas', 'Courier New', monospace;

    /* Transitions */
    --transition-fast:   0.15s ease;
    --transition-std:    0.25s ease;
    --transition-slow:   0.4s ease;
}

/* ── Light Theme ─────────────────────────────────────────────── */
html.theme-light {
    /* Backgrounds */
    --bg-primary:        #f4f1ec;
    --bg-panel:          #ffffff;
    --bg-panel-hover:    #f9f7f4;
    --bg-input:          #f0ede8;
    --border-panel:      #ddd9d3;
    --border-subtle:     #e8e4de;

    /* Text */
    --text-primary:      #1a1a1a;
    --text-secondary:    #5a5550;
    --text-muted:        #9a9590;

    /* Accents — keep amber identity */
    --accent-amber:      #c47a0a;
    --accent-amber-dim:  #a36308;
    --accent-amber-glow: rgba(196, 122, 10, 0.15);

    /* Semantic */
    --color-sweet:       #16a34a;
    --color-sweet-glow:  rgba(22, 163, 74, 0.15);
    --color-danger:      #dc2626;
    --color-danger-glow: rgba(220, 38, 38, 0.12);
    --color-warn:        #c47a0a;
    --color-warn-glow:   rgba(196, 122, 10, 0.12);
    --color-info:        #2563eb;

    /* Compass zones */
    --zone-under-strong: rgba(196, 122, 10, 0.10);
    --zone-over:         rgba(220,  38, 38, 0.10);
    --zone-under-weak:   rgba( 99, 102, 241, 0.10);
    --zone-sweet:        rgba( 22, 163,  74, 0.18);

    /* Shadows */
    --shadow-panel:      0 4px 24px rgba(0,0,0,0.10);
    --shadow-glow-amber: 0 0 20px rgba(196,122,10,0.15);

    /* Slider */
    --slider-track:      #ddd9d3;
    --slider-thumb:      var(--accent-amber);
}

/* Scanline hidden in light mode */
html.theme-light body::before {
    display: none;
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Scanline overlay ─────────────────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    );
    pointer-events: none;
    z-index: 9999;
}

/* ── Header ──────────────────────────────────────────────────── */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--border-panel);
    background: var(--bg-panel);
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.app-title .accent { color: var(--accent-amber); }

.app-subtitle {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 2px;
}

.app-title-link {
    text-decoration: none !important;
    text-decoration-color: inherit !important;
    color: inherit;
    display: block;
}

.app-title {
    text-decoration: none !important;
    text-decoration-color: inherit !important;
}

.app-title-link:hover .app-title {
    color: var(--accent-amber);
}

/* ── Mode Toggle ─────────────────────────────────────────────── */
.mode-toggle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mode-toggle {
    display: flex;
    background: var(--bg-input);
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-pill);
    padding: 3px;
}

.mode-toggle button {
    padding: 6px 20px;
    border-radius: var(--radius-pill);
    border: none;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition-std), color var(--transition-std),
                box-shadow var(--transition-std);
    background: transparent;
    color: var(--text-secondary);
}

.mode-toggle button.active {
    background: var(--accent-amber);
    color: #000;
    box-shadow: 0 0 12px var(--accent-amber-glow);
}

.mode-toggle-subtitle {
    font-size: 0.68rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* ── Panel ───────────────────────────────────────────────────── */
.cmd-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-panel);
}

.cmd-panel-header {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

/* ── Slider ──────────────────────────────────────────────────── */
.cmd-slider-wrapper {
    margin-bottom: 1.25rem;
}

.cmd-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.cmd-slider-label-text {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-primary);
}

.cmd-slider-value {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-amber);
}

.cmd-slider-sublabel {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    line-height: 1.4;
}

input[type="range"].cmd-range {
    width: 100%;
    height: 6px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: var(--radius-pill);
    outline: none;
    cursor: pointer;
    background: linear-gradient(
        to right,
        var(--accent-amber) 0%,
        var(--accent-amber) calc(var(--progress, 50) * 1%),
        var(--slider-track) calc(var(--progress, 50) * 1%),
        var(--slider-track) 100%
    );
}

input[type="range"].cmd-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-amber);
    box-shadow: 0 0 8px var(--accent-amber-glow);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    cursor: pointer;
}

input[type="range"].cmd-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(245,158,11,0.25), 0 0 14px var(--accent-amber-glow);
    transform: scale(1.15);
}

input[type="range"].cmd-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-amber);
    border: none;
    box-shadow: 0 0 8px var(--accent-amber-glow);
    cursor: pointer;
}

/* ── Gauge Bar ───────────────────────────────────────────────── */
.gauge-bar-wrapper {
    margin-bottom: 1rem;
}

.gauge-bar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.gauge-bar-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.gauge-bar-value-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gauge-bar-track {
    position: relative;
    height: 20px;
    border-radius: var(--radius-pill);
    overflow: visible;
}

.gauge-bar-track.extraction-gradient {
    background: linear-gradient(to right, #3b82f6, #22c55e 50%, #ef4444);
}

.gauge-bar-track.strength-gradient {
    background: linear-gradient(to right, #6366f1, #22c55e 50%, #f59e0b);
}

.gauge-bar-track.score-gradient {
    background: linear-gradient(to right, #ef4444, #f59e0b 50%, #22c55e);
}

.gauge-bar-track.body-gradient {
    background: linear-gradient(to right, #3b82f6, #22c55e);
}

.gauge-bar-track.caffeine-gradient {
    background: linear-gradient(to right, #22c55e, #f59e0b 60%, #ef4444);
}

.gauge-bar-indicator {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 0 8px rgba(0,0,0,0.6);
    transition: left 0.3s ease-out;
}

.gauge-bar-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
    font-size: 0.62rem;
    color: var(--text-muted);
}

/* ── Flavor Badge ────────────────────────────────────────────── */
.flavor-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid;
    transition: all var(--transition-std);
    width: 100%;
    justify-content: center;
}

.badge-green {
    background: var(--color-sweet-glow);
    color: var(--color-sweet);
    border-color: var(--color-sweet);
    box-shadow: 0 0 20px var(--color-sweet-glow);
}

.badge-amber {
    background: var(--color-warn-glow);
    color: var(--accent-amber);
    border-color: var(--accent-amber);
    box-shadow: 0 0 20px var(--color-warn-glow);
}

.badge-red {
    background: var(--color-danger-glow);
    color: var(--color-danger);
    border-color: var(--color-danger);
    box-shadow: 0 0 20px var(--color-danger-glow);
}

/* ── Tips Panel ──────────────────────────────────────────────── */
.tips-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-top: 0;
}

.tips-panel-header {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.tip-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-primary);
}

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

.tip-item.advanced { font-family: var(--font-mono); font-size: 0.78rem; }

.tip-severity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.tip-severity-dot.info    { background: var(--color-sweet); }
.tip-severity-dot.caution { background: var(--accent-amber); }
.tip-severity-dot.warning { background: var(--color-danger); }

/* ── Toggle Button Group ─────────────────────────────────────── */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 6px;
}

.toggle-label {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-primary);
}

.toggle-group {
    display: flex;
    gap: 3px;
    background: var(--bg-input);
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-pill);
    padding: 3px;
    width: fit-content;
}

.toggle-option {
    padding: 4px 14px;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.toggle-option.active {
    background: var(--accent-amber);
    color: #000;
}

/* ── Reset Button ────────────────────────────────────────────── */
.btn-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 0.5rem;
}

.btn-reset:hover {
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    background: var(--accent-amber-glow);
}

/* ── Mode Enter Animation ────────────────────────────────────── */
.mode-enter {
    animation: mode-enter-anim 0.35s ease-out;
}

@keyframes mode-enter-anim {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Simple Compass ──────────────────────────────────────────── */
.simple-compass {
    display: flex;
    align-items: center;
    position: relative;
    height: 48px;
    border-radius: var(--radius-pill);
    overflow: visible;
    margin: 1rem 0 0.25rem;
    background: linear-gradient(to right, #3b82f6 0%, #22c55e 50%, #ef4444 100%);
}

.simple-compass-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #000;
    box-shadow: 0 0 12px rgba(255,255,255,0.6);
    transform: translate(-50%, -50%);
    top: 50%;
    transition: left 0.3s ease-out;
}

.simple-compass-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.simple-compass-labels .sour  { color: #3b82f6; }
.simple-compass-labels .sweet { color: #22c55e; text-align: center; flex: 1; }
.simple-compass-labels .bitter{ color: #ef4444; }

/* ── Brew Ratio Display ──────────────────────────────────────── */
.brew-ratio-display {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.brew-ratio-value {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-amber);
}

.brew-ratio-category {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* ── Compass SVG ─────────────────────────────────────────────── */
.compass-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.compass-container svg {
    width: 100%;
    height: auto;
    font-family: var(--font-display);
}

.compass-crosshair,
.crosshair-hline,
.crosshair-vline {
    transition: all 0.3s ease-out;
}

.compass-zone-label {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 0.75rem;
    padding: 8px;
    border-radius: var(--radius-md);
}

.compass-zone-label small {
    font-size: 0.78rem;
    font-weight: 400;
    display: block;
    margin-top: 2px;
}

.compass-zone-label.sweet-spot {
    color: var(--color-sweet);
    background: var(--color-sweet-glow);
}

.compass-zone-label.over {
    color: var(--color-danger);
    background: var(--color-danger-glow);
}

.compass-zone-label.under {
    color: var(--accent-amber);
    background: var(--accent-amber-glow);
}

/* ── Advanced 3-column Layout ────────────────────────────────── */
.advanced-layout {
    display: grid;
    grid-template-columns: minmax(290px, 360px) minmax(440px, 1fr) minmax(300px, 360px);
    gap: 1.25rem;
    padding: 1.25rem 1.5rem 2rem;
    align-items: start;
    max-width: 1680px;
    margin: 0 auto;
}

.advanced-left,
.advanced-center,
.advanced-right {
    min-width: 0;
    width: 100%;
}

.advanced-left   { grid-column: 1; }
.advanced-center { grid-column: 2; }
.advanced-right  { grid-column: 3; }
.advanced-bottom { grid-column: 1 / -1; }

.advanced-left > .cmd-panel,
.advanced-right > .cmd-panel,
.advanced-center > .cmd-panel {
    height: 100%;
}

.taste-flow-stack,
.insight-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.params-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

.params-show-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    padding: 0.55rem 0.9rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.params-show-all-btn:hover {
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    background: var(--accent-amber-glow);
}

/* ── Simple Mode Layout ──────────────────────────────────────── */
.simple-layout {
    display: flex;
    flex-direction: column;
    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    gap: 1rem;
}

/* ── Settings Panel ──────────────────────────────────────────── */
.settings-trigger-wrapper {
    display: flex;
    align-items: center;
}

.settings-btn {
    background: var(--bg-input);
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    padding: 7px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), border-color var(--transition-fast),
                background var(--transition-fast);
}

.settings-btn:hover {
    color: var(--accent-amber);
    border-color: var(--accent-amber);
    background: var(--accent-amber-glow);
}

.settings-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
    animation: fade-in 0.2s ease;
}

.settings-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 320px;
    max-width: 90vw;
    background: var(--bg-panel);
    border-left: 1px solid var(--border-panel);
    box-shadow: -4px 0 32px rgba(0,0,0,0.6);
    z-index: 201;
    display: flex;
    flex-direction: column;
    animation: slide-in-right 0.28s cubic-bezier(0.32,0.72,0,1) forwards;
    overflow-y: auto;
}

@keyframes slide-in-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

.settings-panel-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.settings-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.settings-close-btn:hover { color: var(--text-primary); }

.settings-section {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}

.settings-section-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.settings-option-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-option-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.84rem;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
}

.settings-option-btn:hover {
    border-color: var(--accent-amber);
    color: var(--text-primary);
}

.settings-option-btn.active {
    background: var(--accent-amber-glow);
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    font-weight: 600;
}

.settings-lang-flag { font-size: 1.1rem; }

.settings-toggle-pair {
    display: flex;
    gap: 6px;
}

.settings-toggle-btn {
    flex: 1;
    padding: 8px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all var(--transition-fast);
}

.settings-toggle-btn:hover {
    border-color: var(--accent-amber);
    color: var(--text-primary);
}

.settings-toggle-btn.active {
    background: var(--accent-amber-glow);
    border-color: var(--accent-amber);
    color: var(--accent-amber);
}

/* ── Blazor Error UI ─────────────────────────────────────────── */
#blazor-error-ui {
    background: var(--color-danger);
    bottom: 0;
    box-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #fff;
    font-size: 0.85rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .advanced-layout {
        grid-template-columns: 260px 1fr 260px;
    }
}

@media (max-width: 1024px) {
    .advanced-layout {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: none;
        padding: 1rem;
    }

    .advanced-left,
    .advanced-center,
    .advanced-right,
    .advanced-bottom {
        grid-column: 1;
        width: 100%;
    }

    .advanced-left > .cmd-panel,
    .advanced-center > .cmd-panel,
    .advanced-right > .cmd-panel {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .app-header {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .app-header-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
    }

    .flavor-badge { font-size: 1.05rem; padding: 10px 16px; }

    .advanced-layout {
        gap: 0.85rem;
        padding: 0.75rem;
    }

    .cmd-panel {
        padding: 1rem;
    }
}

/* ── Footer ───────────────────────────────────────────────────── */
.app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem 2rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.app-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.app-footer a:hover {
    color: var(--accent-amber);
}
.app-footer-sep {
    color: var(--text-muted);
    user-select: none;
}

/* ── Legal pages ─────────────────────────────────────────────── */
.legal-page {
    min-height: 100vh;
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 2rem 1rem 4rem;
}
.legal-container {
    max-width: 760px;
    margin: 0 auto;
}
.legal-back {
    display: inline-block;
    color: var(--accent-amber);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 2rem;
    transition: opacity var(--transition-fast);
}
.legal-back:hover { opacity: 0.75; }
.legal-page h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-amber);
    margin: 0 0 0.25rem;
}
.legal-date {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}
.legal-page h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 2rem 0 0.5rem;
    border-bottom: 1px solid var(--border-panel);
    padding-bottom: 0.4rem;
}
.legal-page p,
.legal-page li {
    line-height: 1.7;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.legal-page ul {
    padding-left: 1.5rem;
}
.legal-page a {
    color: var(--accent-amber);
    text-decoration: none;
}
.legal-page a:hover {
    text-decoration: underline;
}
.legal-page code {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 0.1em 0.4em;
    font-size: 0.9em;
    color: var(--accent-amber);
}

/* ── Gear recommendations teaser banner (above footer on home page) ──── */
.gear-teaser {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.5rem 1rem 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(245,158,11,0.04) 100%);
    border: 1px solid rgba(245,158,11,0.2);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary, #e8eaf0);
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.gear-teaser:hover {
    border-color: rgba(245,158,11,0.45);
    background: linear-gradient(135deg, rgba(245,158,11,0.13) 0%, rgba(245,158,11,0.07) 100%);
    transform: translateY(-1px);
    color: var(--text-primary, #e8eaf0);
    text-decoration: none;
}
.gear-teaser-icon { font-size: 1.75rem; flex-shrink: 0; }
.gear-teaser-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}
.gear-teaser-text strong {
    font-size: 0.98rem;
    color: var(--accent-amber, #f59e0b);
}
.gear-teaser-text span {
    font-size: 0.87rem;
    color: var(--text-secondary, #9ca3af);
}
.gear-teaser-arrow {
    font-size: 1.3rem;
    color: var(--accent-amber, #f59e0b);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.gear-teaser:hover .gear-teaser-arrow { transform: translateX(4px); }

/* ── Homepage info / SEO section ─────────────────────────────── */
.home-info-section {
    max-width: 960px;
    margin: 3rem auto 0;
    padding: 0 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.home-info-block {
    background: var(--bg-panel);
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-lg);
    padding: 2rem 2.5rem;
    box-shadow: var(--shadow-panel);
}

.home-info-block-label {
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--accent-amber);
    margin-bottom: 0.6rem;
}

.home-info-block h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
    line-height: 1.35;
}

.home-info-block p {
    font-size: 0.93rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0 0 0.65rem;
}

.home-info-block p:last-child { margin-bottom: 0; }

/* Tutorial step cards */
.tutorial-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.tutorial-step {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.tutorial-step:hover {
    border-color: var(--accent-amber-dim);
    background: var(--bg-panel-hover);
}

.tutorial-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-amber-glow);
    border: 1px solid var(--accent-amber-dim);
    color: var(--accent-amber);
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0.15rem;
}

.tutorial-step-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.tutorial-step-desc {
    font-size: 0.81rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

@media (max-width: 800px) {
    .tutorial-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .tutorial-steps {
        grid-template-columns: 1fr;
    }
    .home-info-block {
        padding: 1.5rem 1.25rem;
    }
    .home-info-section {
        padding: 0 1rem 3rem;
    }
}

/* -------------------------------------------------------------------
   SHOT JOURNEY BAR
   ------------------------------------------------------------------- */
.shot-journey-bar {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0.25rem 0.25rem 0.5rem;
}
.shot-journey-step {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    flex: 1;
    position: relative;
    cursor: default;
}
.shot-journey-connector {
    height: 2px;
    flex: 0 0 48px;
    background: var(--border-subtle, rgba(255,255,255,0.12));
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast);
}
.shot-journey-connector--active {
    background: var(--accent-amber);
}
.shot-journey-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    border: 2px solid var(--border-subtle, rgba(255,255,255,0.15));
    background: var(--bg-surface, #1e2028);
    color: var(--text-secondary, #9ca3af);
    position: relative;
    z-index: 1;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.shot-journey-step-label {
    font-size: 0.72rem;
    color: var(--text-secondary, #9ca3af);
    text-align: center;
    white-space: nowrap;
    transition: color 0.25s;
}
/* active step */
.shot-journey-step--active .shot-journey-step-number {
    background: var(--accent-amber, #f59e0b);
    border-color: var(--accent-amber, #f59e0b);
    color: #111;
}
.shot-journey-step--active .shot-journey-step-label {
    color: var(--accent-amber, #f59e0b);
    font-weight: 600;
}
/* completed step */
.shot-journey-step--done .shot-journey-step-number {
    background: rgba(34,197,94,0.18);
    border-color: #22c55e;
    color: #22c55e;
}
.shot-journey-step--done .shot-journey-step-label { color: #22c55e; }
.shot-journey-step--pending .shot-journey-step-number {
    background: var(--bg-surface, #1e2028);
}

/* -------------------------------------------------------------------
   GRIND SIZE CONTROL
   ------------------------------------------------------------------- */
.grind-control { display: flex; flex-direction: column; gap: 0.5rem; }
.grind-main-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.grind-setting-input {
    width: 80px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.35rem 0.5rem;
    background: var(--bg-surface, #1e2028);
    border: 1.5px solid var(--border-subtle, rgba(255,255,255,0.15));
    border-radius: 8px;
    color: var(--text-primary, #e8eaf0);
    -moz-appearance: textfield;
}
.grind-setting-input::-webkit-inner-spin-button,
.grind-setting-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.grind-step-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border-subtle, rgba(255,255,255,0.15));
    background: rgba(255,255,255,0.05);
    color: var(--text-primary, #e8eaf0);
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.grind-step-btn:hover:not(:disabled) {
    background: rgba(245,158,11,0.15);
    border-color: var(--accent-amber, #f59e0b);
    color: var(--accent-amber, #f59e0b);
}
.grind-step-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.grind-direction-toggle {
    font-size: 0.75rem;
    color: var(--text-secondary, #9ca3af);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline dotted;
    padding: 0;
    margin-left: auto;
}
.grind-direction-toggle:hover { color: var(--accent-amber, #f59e0b); }
.grind-position-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--border-subtle, rgba(255,255,255,0.1));
    position: relative;
    margin-top: 0.25rem;
    overflow: visible;
}
.grind-position-thumb {
    position: absolute;
    top: -4px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--accent-amber, #f59e0b);
    transform: translateX(-50%);
    transition: left 0.15s;
}
.grind-range-toggle {
    font-size: 0.75rem;
    color: var(--accent-amber, #f59e0b);
    background: none; border: none;
    cursor: pointer; padding: 0;
    text-decoration: underline dotted;
    align-self: flex-start;
}
.grind-range-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.grind-range-field { display: flex; flex-direction: column; gap: 0.2rem; }
.grind-range-field label { font-size: 0.72rem; color: var(--text-secondary, #9ca3af); }
.grind-range-input {
    width: 100%;
    padding: 0.3rem 0.4rem;
    background: var(--bg-surface, #1e2028);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.12));
    border-radius: 6px;
    color: var(--text-primary, #e8eaf0);
    font-size: 0.9rem;
    -moz-appearance: textfield;
}
.grind-range-input::-webkit-inner-spin-button,
.grind-range-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.grind-range-error {
    grid-column: 1/-1;
    font-size: 0.75rem;
    color: #f87171;
    margin: 0;
}

/* -------------------------------------------------------------------
   REAL TASTE PANEL
   ------------------------------------------------------------------- */
.real-taste-panel {
    border-radius: 16px;
    border: 1px solid var(--border-panel);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.real-taste-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.real-taste-kicker {
    margin-bottom: 0.35rem;
    padding-bottom: 0;
    border-bottom: none;
}
.real-taste-header-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #e8eaf0);
    line-height: 1.35;
}
.real-taste-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}
.taste-recommend-bar {
    position: sticky;
    top: 0.35rem;
    z-index: 3;
    padding: 0.2rem 0 0.45rem;
    background: linear-gradient(180deg, rgba(12,14,20,0.96), rgba(12,14,20,0.82), rgba(12,14,20,0));
}
.taste-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}
.taste-undo-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px dashed rgba(245,158,11,0.28);
    background: rgba(245,158,11,0.06);
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.35;
}

html.theme-light .taste-undo-hint {
    background: rgba(196,122,10,0.07);
    border-color: rgba(180,104,7,0.24);
    color: #7a5a2d;
}
.taste-group--extended {
    padding-top: 0.25rem;
}
.taste-group-title {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.taste-table {
    display: grid;
    gap: 0.45rem;
    width: 100%;
}
.taste-table-header,
.taste-table-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) repeat(3, minmax(84px, 1fr));
    gap: 0.5rem;
    align-items: stretch;
}
.taste-table-header {
    padding: 0 0.25rem;
}
.taste-table-header span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-align: center;
}
.taste-table-header span:first-child {
    text-align: left;
}
.taste-table-row {
    padding: 0.7rem;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: rgba(255,255,255,0.025);
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
    width: 100%;
}
.taste-table-row--active {
    border-color: rgba(245,158,11,0.28);
    background: rgba(245,158,11,0.08);
}
.taste-table-row--meta {
    background: rgba(255,255,255,0.03);
}
.taste-table-name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}
.taste-property-btn {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: rgba(255,255,255,0.02);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.taste-property-btn:hover {
    border-color: rgba(245,158,11,0.3);
    background: rgba(245,158,11,0.06);
}
.taste-property-btn--active {
    border-color: var(--accent-amber);
    background: rgba(245,158,11,0.12);
}
.taste-activate-btn {
    grid-column: 2 / 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    border: 1px dashed rgba(245,158,11,0.35);
    background: rgba(245,158,11,0.05);
    color: var(--accent-amber);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.taste-activate-btn:hover {
    background: rgba(245,158,11,0.12);
    border-color: var(--accent-amber);
}
.taste-level-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.6rem 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.taste-level-btn:hover {
    border-color: rgba(245,158,11,0.28);
    color: var(--text-primary);
}
.taste-level-btn--active {
    background: var(--accent-amber);
    border-color: var(--accent-amber);
    color: #111;
    box-shadow: 0 10px 20px rgba(245,158,11,0.18);
}

@media (max-width: 768px) {
    .taste-table-header,
    .taste-table-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .taste-table-header {
        display: none;
    }

    .taste-table-row {
        gap: 0.65rem;
    }

    .taste-activate-btn {
        grid-column: auto;
    }

    .taste-property-btn,
    .taste-activate-btn,
    .taste-level-btn {
        width: 100%;
    }
}
.taste-clear-btn {
    align-self: flex-start;
    font-size: 0.78rem;
    color: var(--text-secondary, #9ca3af);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0;
}
.taste-clear-btn:hover { color: #f87171; }
.taste-show-all-btn {
    align-self: flex-start;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    padding: 0.55rem 0.95rem;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.taste-show-all-btn:hover {
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    background: var(--accent-amber-glow);
}
.taste-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.taste-recommend-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--accent-amber);
    background: rgba(245,158,11,0.14);
    color: var(--accent-amber);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-wrap: balance;
}
.taste-recommend-btn--hero {
    width: 100%;
    min-height: 52px;
    padding: 0.9rem 1.2rem;
    border-width: 1px;
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #fff7e6;
    background: linear-gradient(180deg, #d98c0a 0%, #b86e08 100%);
    box-shadow: 0 14px 32px rgba(245,158,11,0.22);
}
.taste-recommend-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #e59b1e 0%, #c77708 100%);
    color: #fffdf8;
    border-color: #e59b1e;
    box-shadow: 0 16px 30px rgba(245,158,11,0.24);
    transform: translateY(-1px);
}
.taste-recommend-btn:focus-visible {
    outline: 3px solid rgba(245,158,11,0.28);
    outline-offset: 2px;
}
.taste-recommend-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: var(--border-subtle);
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
}

html.theme-light .taste-recommend-bar {
    background: linear-gradient(180deg, rgba(244,241,236,0.98), rgba(244,241,236,0.88), rgba(244,241,236,0));
}

html.theme-light .taste-recommend-btn {
    border-color: #b86e08;
    background: rgba(196,122,10,0.08);
    color: #8f5506;
}

html.theme-light .taste-recommend-btn--hero {
    color: #fffdf9;
    background: linear-gradient(180deg, #cf840e 0%, #b46807 100%);
    border-color: #a76108;
    box-shadow: 0 14px 28px rgba(180,104,7,0.24);
}

html.theme-light .taste-recommend-btn:hover:not(:disabled) {
    color: #ffffff;
    background: linear-gradient(180deg, #dc9118 0%, #bf710a 100%);
    border-color: #b46807;
    box-shadow: 0 16px 30px rgba(180,104,7,0.2);
}

/* -- Taste Descriptor Button --------------------------------------- */
.taste-descriptor-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.65rem;
    border-radius: 20px;
    border: 1.5px solid var(--border-subtle, rgba(255,255,255,0.12));
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary, #9ca3af);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.taste-descriptor-btn:hover { border-color: rgba(245,158,11,0.35); color: var(--text-primary, #e8eaf0); }
.taste-descriptor-btn--selected {
    background: rgba(245,158,11,0.15);
    border-color: var(--accent-amber, #f59e0b);
    color: var(--accent-amber, #f59e0b);
    font-weight: 600;
}
.taste-intensity-row {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}
.taste-intensity-btn {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.1));
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
}
.taste-intensity-btn--active {
    background: rgba(245,158,11,0.2);
    border-color: var(--accent-amber, #f59e0b);
    color: var(--accent-amber, #f59e0b);
}

/* -------------------------------------------------------------------
   CORRECTION PANEL + STEP CARDS
   ------------------------------------------------------------------- */
.correction-panel {
    padding: 1rem;
    border-radius: 14px;
    border: 1.5px solid rgba(245,158,11,0.25);
    background: var(--bg-card, rgba(255,255,255,0.04));
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.correction-panel--good { border-color: rgba(34,197,94,0.3); }
.correction-panel--uneven { border-color: rgba(251,191,36,0.35); }
.correction-panel-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.correction-panel-icon { font-size: 1.35rem; }
.correction-panel-title { font-size: 1rem; font-weight: 700; color: var(--text-primary, #e8eaf0); }
.correction-panel .taste-clear-btn {
    align-self: flex-start;
}
.correction-diagnosis {
    font-size: 0.87rem;
    color: var(--text-secondary, #9ca3af);
    margin: 0;
    line-height: 1.55;
}
.correction-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #9ca3af);
    margin-top: 0.25rem;
}
.correction-steps { display: flex; flex-direction: column; gap: 0.5rem; }

/* Individual step card */
.correction-step {
    border-radius: 10px;
    border: 1.5px solid transparent;
    padding: 0.6rem 0.75rem;
    background: rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.correction-step-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}
.correction-try-first   { border-color: rgba(34,197,94,0.25); }
.correction-if-needed   { border-color: rgba(245,158,11,0.2); }
.correction-last-resort { border-color: rgba(251,113,133,0.2); }
.correction-redistributed { border-style: dashed; }
.correction-redistributed-note {
    font-size: 0.72rem;
    color: #fbbf24;
    margin-bottom: 0.2rem;
}
.correction-step-number {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary, #9ca3af);
    min-width: 18px;
    padding-top: 1px;
}
.correction-step-icon { font-size: 1.15rem; flex-shrink: 0; }
.correction-step-content { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.correction-step-action {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #e8eaf0);
    line-height: 1.4;
}
.correction-step-reasoning {
    font-size: 0.78rem;
    color: var(--text-secondary, #9ca3af);
    line-height: 1.45;
}
/* Priority badges */
.correction-priority-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}
.badge-green      { background: rgba(34,197,94,0.18);  color: #22c55e; }
.badge-amber      { background: rgba(245,158,11,0.18); color: #f59e0b; }
.badge-amber-dark { background: rgba(251,113,133,0.15); color: #fb7185; }

/* -- Mobile tweaks ------------------------------------------------- */
@media (max-width: 1200px) {
    .advanced-layout {
        grid-template-columns: minmax(260px, 460px) 1fr;
    }

    .advanced-right {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .params-footer-row {
        flex-direction: column;
        align-items: stretch;
    }
    .shot-journey-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .shot-journey-connector {
        display: none;
    }
    .shot-journey-step {
        justify-content: flex-start;
    }
    .taste-table-header {
        display: none;
    }
    .taste-table-row {
        grid-template-columns: 1fr;
    }
    .taste-activate-btn {
        grid-column: auto;
    }
    .taste-table-name {
        margin-bottom: 0.15rem;
    }
    .taste-level-btn {
        width: 100%;
    }
    .correction-step-action { font-size: 0.85rem; }
}

/* -------------------------------------------------------------------
   GRIND SIZE CONTROL V2
   ------------------------------------------------------------------- */
.grind-control-v2 {
    padding: 0.9rem 1rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
}
.grind-v2-current {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-amber);
}
.grind-v2-stepper {
    display: grid;
    grid-template-columns: minmax(92px, 1fr) minmax(92px, 112px) minmax(92px, 1fr);
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.6rem;
}
.grind-v2-btn {
    min-height: 54px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: var(--bg-input);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.grind-v2-btn:hover:not(:disabled) {
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    background: var(--accent-amber-glow);
}
.grind-v2-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.grind-v2-btn-symbol {
    font-size: 1.1rem;
    font-weight: 700;
}
.grind-v2-btn-text {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.grind-v2-value-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.grind-v2-input {
    width: 100%;
    min-height: 54px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 0.5rem 0.75rem;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    color: var(--text-primary);
    -moz-appearance: textfield;
}
.grind-v2-input::-webkit-inner-spin-button,
.grind-v2-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
.grind-v2-direction-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.grind-v2-track-wrap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.65rem;
    align-items: center;
    margin-top: 0.9rem;
}
.grind-v2-track-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.grind-v2-track {
    position: relative;
    height: 8px;
    border-radius: var(--radius-pill);
    background: linear-gradient(to right, rgba(59,130,246,0.35), rgba(34,197,94,0.35), rgba(245,158,11,0.35));
}
.grind-v2-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-amber);
    box-shadow: 0 0 0 4px rgba(245,158,11,0.18);
}
.grind-v2-error {
    margin-top: 0.7rem;
    color: #f87171;
    font-size: 0.76rem;
}
.grind-v2-range-toggle {
    margin-top: 0.9rem;
    border: none;
    background: none;
    padding: 0;
    color: var(--accent-amber);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}
.grind-v2-range-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.8rem;
    padding: 0.85rem;
    border-radius: 14px;
    border: 1px solid var(--border-subtle);
    background: rgba(255,255,255,0.02);
}
.grind-v2-range-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.grind-v2-range-field span,
.grind-v2-range-dir-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.grind-v2-range-input {
    width: 100%;
    min-height: 42px;
    padding: 0.45rem 0.6rem;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-primary);
}
.grind-v2-range-dir {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .grind-v2-stepper,
    .grind-v2-range-fields {
        grid-template-columns: 1fr;
    }

    .grind-v2-track-wrap {
        grid-template-columns: 1fr;
    }
}

/* ── Save Preset Panel ───────────────────────────────────────────────────── */
.params-save-preset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--accent-amber);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--accent-amber);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 0.75rem;
    width: 100%;
    justify-content: center;
}

.params-save-preset-btn:hover {
    background: var(--accent-amber-glow);
}

.save-preset-nudge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.save-preset-login-link {
    color: var(--accent-amber);
    text-decoration: none;
    font-weight: 600;
}

.save-preset-login-link:hover { text-decoration: underline; }

.save-preset-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.save-preset-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
}

.save-preset-input:focus { border-color: var(--accent-amber); }

.save-preset-confirm {
    padding: 6px 12px;
    border: 1px solid var(--accent-amber);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--accent-amber);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    transition: background var(--transition-fast);
}

.save-preset-confirm:hover { background: var(--accent-amber-glow); }
.save-preset-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

.save-preset-dismiss {
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.save-preset-dismiss:hover { color: var(--text-primary); }

.save-preset-success {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, #4caf50 15%, transparent);
    border: 1px solid #4caf50;
    color: #4caf50;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}

/* ── Header auth buttons ─────────────────────────────────────────────────── */
.header-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1.5px solid var(--accent-amber);
    color: var(--accent-amber);
    background: transparent;
    flex-shrink: 0;
}

.header-auth-btn:hover { background: var(--accent-amber-glow); }

.header-logout-btn {
    border-color: var(--border-subtle);
    color: var(--text-secondary);
    background: transparent;
}

.header-logout-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.header-username {
    font-size: 0.78rem;
    color: var(--text-secondary);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* ── Load Preset Panel ──────────────────────────────────────────────────── */
.params-load-preset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 0.4rem;
    width: 100%;
    justify-content: center;
}
.params-load-preset-btn:hover {
    border-color: var(--accent-amber);
    color: var(--accent-amber);
    background: var(--accent-amber-glow);
}

.lp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,11,13,0.7);
    z-index: 1299;
    animation: fadeIn 0.2s;
}
.lp-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 100vw;
    height: 100vh;
    background: var(--bg-panel);
    box-shadow: -4px 0 32px rgba(0,0,0,0.7);
    border-left: 1px solid var(--border-panel);
    z-index: 1300;
    transform: translateX(100%);
    transition: transform var(--transition-std);
    display: flex;
    flex-direction: column;
    padding: 0;
    /* needed for saving overlay */
    isolation: isolate;
}
.lp-drawer.open {
    transform: translateX(0);
}
.lp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid var(--border-panel);
    flex-shrink: 0;
    background: var(--bg-panel);
}
.lp-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent-amber);
}
.lp-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: var(--radius-pill);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast);
}
.lp-close:hover {
    background: var(--bg-panel-hover);
    color: var(--accent-amber);
}
.lp-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.lp-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.lp-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    overflow-y: visible;
}
.lp-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 1.5rem;
    transition: background var(--transition-fast);
    min-height: 52px;
}
.lp-item:hover { background: var(--bg-panel-hover); }
.lp-item-name {
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lp-item-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.lp-item-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.lp-delete-confirm {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding-right: 4px;
}
.lp-delete-yes, .lp-delete-no {
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    cursor: pointer;
    padding: 2px 7px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}
.lp-delete-yes:hover { color: #f87171; border-color: #f87171; }
.lp-delete-no:hover  { color: var(--text-primary); border-color: var(--text-secondary); }

/* ── Save Preset modal extras ────────────────────────────────────────────── */
.sp-new-row {
    display: flex;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem 0.75rem;
}
.sp-new-input {
    flex: 1;
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.18s;
}
.sp-new-input::placeholder { color: var(--text-muted); }
.sp-new-input:focus { border-color: var(--accent-amber); }
.sp-new-btn {
    padding: 0.65rem 1.1rem;
    background: var(--accent-amber);
    color: #0a0b0d;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    transition: background 0.18s;
}
.sp-new-btn:hover:not(:disabled) { background: var(--accent-amber-dim); }
.sp-new-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sp-error {
    padding: 0.25rem 1.5rem 0;
    font-size: 0.85rem;
    color: #f87171;
}
.sp-override-label {
    padding: 0.75rem 1.5rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-top: 1px solid var(--border-panel);
}

/* -------------------------------------------------------------------
   USERNAME SETUP PAGE
   Full-viewport centred card; footer still rendered by MainLayout.
   ------------------------------------------------------------------- */

/* Make the page body stretch so the footer is pushed to the bottom */
.username-setup-page {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      calc(100dvh - 130px); /* subtract header + footer */
    padding:         2rem 1rem;
}

/* Centered glass card */
.username-setup-card {
    background:    var(--bg-panel);
    border:        1px solid var(--border);
    border-radius: 20px;
    box-shadow:    0 8px 40px rgba(0,0,0,0.45);
    padding:       3rem 2.5rem 2.5rem;
    width:         100%;
    max-width:     440px;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           1.25rem;
    text-align:    center;
}

/* Brand mark at the top of the card */
.username-setup-brand {
    font-size:     1.5rem;
    font-weight:   700;
    letter-spacing: -0.02em;
    color:         var(--text-primary);
    line-height:   1;
}
.username-setup-brand .accent { color: var(--accent-amber); }

/* Wave emoji + heading */
.username-setup-title {
    font-size:   1.75rem;
    font-weight: 700;
    margin:      0;
    color:       var(--text-primary);
    line-height: 1.2;
}

.username-setup-subtitle {
    font-size:   1rem;
    color:       var(--text-secondary);
    margin:      0;
    max-width:   320px;
}

/* Input + button stack */
.username-setup-form {
    display:        flex;
    flex-direction: column;
    gap:            0.85rem;
    width:          100%;
    margin-top:     0.5rem;
}

.username-setup-input {
    width:         100%;
    padding:       0.85rem 1rem;
    font-size:     1.1rem;
    background:    var(--bg-input);
    border:        1.5px solid var(--border);
    border-radius: 10px;
    color:         var(--text-primary);
    outline:       none;
    transition:    border-color 0.18s, box-shadow 0.18s;
    box-sizing:    border-box;
}
.username-setup-input::placeholder { color: var(--text-muted); }
.username-setup-input:focus {
    border-color: var(--accent-amber);
    box-shadow:   0 0 0 3px var(--accent-amber-glow);
}

/* Primary CTA button */
.username-setup-btn {
    width:         100%;
    padding:       0.85rem 1rem;
    font-size:     1.05rem;
    font-weight:   600;
    background:    var(--accent-amber);
    color:         #0a0b0d;
    border:        none;
    border-radius: 10px;
    cursor:        pointer;
    transition:    background 0.18s, transform 0.1s, box-shadow 0.18s;
    box-shadow:    0 2px 12px var(--accent-amber-glow);
}
.username-setup-btn:hover:not(:disabled) {
    background:  var(--accent-amber-dim);
    box-shadow:  0 4px 20px var(--accent-amber-glow);
    transform:   translateY(-1px);
}
.username-setup-btn:active:not(:disabled) { transform: translateY(0); }
.username-setup-btn:disabled {
    opacity: 0.45;
    cursor:  not-allowed;
}

/* Inline error message */
.username-setup-error {
    font-size:   0.9rem;
    color:       #f87171;
    margin:      0;
    text-align:  center;
}

/* ── App Header Brand + User area ───────────────────────────────────────── */
.app-header-brand {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    flex-shrink:    0;
}

.app-header-user {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-top:  2px;
}

.header-username-link {
    font-size:      0.75rem;
    color:          var(--text-secondary);
    text-decoration: none;
    max-width:      100px;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    border-radius:  var(--radius-pill);
    padding:        3px 8px;
    transition:     all var(--transition-fast);
    border:         1px solid transparent;
}
.header-username-link:hover {
    color:            var(--accent-amber);
    border-color:     var(--accent-amber);
    background:       var(--accent-amber-glow);
}

.app-header-actions {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
}

/* ── Delete button — stronger contrast ──────────────────────────────────── */
.lp-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 6px;
    transition: color var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}
.lp-delete:hover {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
}

/* ── Save-preset: override button per row ───────────────────────────────── */
.lp-item-info {
    display:        flex;
    flex-direction: column;
    flex:           1;
    min-width:      0;
}

.lp-item-actions {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex-shrink: 0;
}

.sp-override-btn {
    background:    none;
    border:        1.5px solid var(--accent-amber-dim);
    color:         var(--accent-amber);
    border-radius: 6px;
    width:         30px;
    height:        30px;
    font-size:     1rem;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    all 0.18s;
    flex-shrink:   0;
}
.sp-override-btn:hover:not(:disabled) {
    background: var(--accent-amber-glow);
    border-color: var(--accent-amber);
}
.sp-override-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sp-override-btn--saving  { border-color: var(--accent-amber); background: var(--accent-amber-glow); }

.sp-override-spinner {
    width:  14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: var(--accent-amber);
    border-radius: 50%;
    animation: sp-spin 0.65s linear infinite;
}

/* ── Save-preset: saving overlay (for new-name save) ────────────────────── */
.sp-saving-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,11,13,0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    z-index: 10;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.sp-saving-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent-amber);
    border-radius: 50%;
    animation: sp-spin 0.7s linear infinite;
}

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

/* ── Preset drawer — mobile full-width ──────────────────────────────────── */
@media (max-width: 480px) {
    .lp-drawer {
        width: 100vw;
        border-left: none;
    }
}

/* ── Profile Page ───────────────────────────────────────────────────────── */
.profile-page {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      calc(100dvh - 130px);
    padding:         2rem 1rem;
}

.profile-card {
    background:    var(--bg-panel);
    border:        1px solid var(--border);
    border-radius: 20px;
    box-shadow:    0 8px 40px rgba(0,0,0,0.45);
    padding:       3rem 2.5rem 2.5rem;
    width:         100%;
    max-width:     480px;
    display:       flex;
    flex-direction: column;
    gap:           1.5rem;
}

.profile-brand {
    font-size:      1.2rem;
    font-weight:    700;
    letter-spacing: -0.02em;
    color:          var(--text-primary);
}
.profile-brand .accent { color: var(--accent-amber); }

.profile-back-link {
    font-size:       0.82rem;
    color:           var(--text-secondary);
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    padding:         4px 0;
    transition:      color 0.18s;
}
.profile-back-link:hover { color: var(--accent-amber); }

.profile-title {
    font-size:   1.6rem;
    font-weight: 700;
    margin:      0;
    color:       var(--text-primary);
}

.profile-section {
    display:        flex;
    flex-direction: column;
    gap:            0.65rem;
}

.profile-label {
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--text-muted);
}

.profile-row {
    display: flex;
    gap:     0.5rem;
}

.profile-input {
    flex:          1;
    padding:       0.75rem 1rem;
    font-size:     1rem;
    background:    var(--bg-input);
    border:        1.5px solid var(--border);
    border-radius: 10px;
    color:         var(--text-primary);
    outline:       none;
    transition:    border-color 0.18s;
    box-sizing:    border-box;
}
.profile-input::placeholder { color: var(--text-muted); }
.profile-input:focus { border-color: var(--accent-amber); }

.profile-save-btn {
    padding:       0.75rem 1.25rem;
    font-size:     0.9rem;
    font-weight:   600;
    background:    var(--accent-amber);
    color:         #0a0b0d;
    border:        none;
    border-radius: 10px;
    cursor:        pointer;
    flex-shrink:   0;
    transition:    background 0.18s;
}
.profile-save-btn:hover:not(:disabled) { background: var(--accent-amber-dim); }
.profile-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.profile-error   { font-size: 0.85rem; color: #f87171; margin: 0; }
.profile-success { font-size: 0.85rem; color: #4ade80; margin: 0; }

.profile-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 0;
}

.profile-danger-zone { gap: 0.75rem; }

.profile-danger-title {
    font-size:   1rem;
    font-weight: 700;
    color:       #f87171;
    margin:      0;
}

.profile-danger-desc {
    font-size: 0.88rem;
    color:     var(--text-secondary);
    margin:    0;
}

.profile-delete-btn {
    align-self:    flex-start;
    padding:       0.65rem 1.25rem;
    font-size:     0.9rem;
    font-weight:   600;
    background:    transparent;
    color:         #f87171;
    border:        1.5px solid #f87171;
    border-radius: 10px;
    cursor:        pointer;
    transition:    all 0.18s;
}
.profile-delete-btn:hover {
    background: rgba(248,113,113,0.12);
}

.profile-delete-confirm-box {
    background:    rgba(239,68,68,0.07);
    border:        1px solid rgba(239,68,68,0.25);
    border-radius: 12px;
    padding:       1rem 1.25rem;
    display:       flex;
    flex-direction: column;
    gap:           0.75rem;
}

.profile-delete-warning {
    font-size: 0.88rem;
    color:     #fca5a5;
    margin:    0;
    line-height: 1.5;
}

.profile-delete-actions {
    display: flex;
    gap:     0.5rem;
    flex-wrap: wrap;
}

.profile-delete-confirm-btn {
    padding:       0.6rem 1.25rem;
    font-size:     0.9rem;
    font-weight:   700;
    background:    #ef4444;
    color:         #fff;
    border:        none;
    border-radius: 8px;
    cursor:        pointer;
    transition:    background 0.18s;
}
.profile-delete-confirm-btn:hover:not(:disabled) { background: #dc2626; }
.profile-delete-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.profile-delete-cancel-btn {
    padding:       0.6rem 1.25rem;
    font-size:     0.9rem;
    font-weight:   600;
    background:    transparent;
    color:         var(--text-secondary);
    border:        1px solid var(--border-subtle);
    border-radius: 8px;
    cursor:        pointer;
    transition:    all 0.18s;
}
.profile-delete-cancel-btn:hover {
    color:        var(--text-primary);
    border-color: var(--text-secondary);
}