/* ============================================================
   ExamItFixi v0.4 — Microsoft Practice Assessment inspired.
   White surface, MS blue, Segoe UI, minimal chrome.
   Darkmode via body.dark-mode class.
   ============================================================ */

:root {
    --bg:             #FFFFFF;
    --surface:        #FFFFFF;
    --surface-raised: #FAF9F8;
    --surface-sunken: #F3F2F1;

    --ink:            #323130;
    --ink-muted:      #605E5C;
    --ink-faint:      #A19F9D;

    --primary:        #0078D4;
    --primary-hover:  #106EBE;
    --primary-pressed:#005A9E;
    --primary-soft:   #DEECF9;
    --primary-faint:  #F3F9FD;

    --ok:             #107C10;
    --ok-hover:       #0B5A0B;
    --ok-soft:        #DFF6DD;
    --ok-faint:       #F1FAF1;

    --fail:           #D13438;
    --fail-hover:     #A4262C;
    --fail-soft:      #FDE7E9;
    --fail-faint:     #FEF6F7;

    --warn:           #F7630C;
    --warn-soft:      #FFF4CE;

    --border:         #EDEBE9;
    --border-strong:  #C8C6C4;
    --border-focus:   #0078D4;

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    --font-sans: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Segoe UI Variable Display', 'Segoe UI', -apple-system, system-ui, sans-serif;
    --font-mono:  'SF Mono', 'JetBrains Mono', 'Consolas', 'Menlo', monospace;

    --ease-out:   cubic-bezier(0.33, 0, 0.1, 1);
    --ease-in:    cubic-bezier(0.7, 0, 1, 0.5);
    --t-fast:     120ms;
    --t-med:      180ms;
    --t-slow:     280ms;

    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-pill: 999px;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.06),
                0 4px 8px rgba(0, 0, 0, 0.04);
}

body.dark-mode {
    --bg:             #1B1B1F;
    --surface:        #242428;
    --surface-raised: #2D2D31;
    --surface-sunken: #18181B;
    --ink:            #E5E5EA;
    --ink-muted:      #9E9EA5;
    --ink-faint:      #6D6D74;
    --primary:        #2B88D8;
    --primary-hover:  #3998E6;
    --primary-soft:   rgba(43, 136, 216, 0.18);
    --primary-faint:  rgba(43, 136, 216, 0.08);
    --ok-soft:        rgba(16, 124, 16, 0.22);
    --ok-faint:       rgba(16, 124, 16, 0.10);
    --fail-soft:      rgba(209, 52, 56, 0.22);
    --fail-faint:     rgba(209, 52, 56, 0.10);
    --warn-soft:      rgba(247, 99, 12, 0.18);
    --border:         #3A3A3E;
    --border-strong:  #4A4A4F;
    --shadow-1:       0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2:       0 4px 10px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--t-slow), color var(--t-slow);
}

button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
}

button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.4; }

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.boot {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.boot-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ink-faint);
    animation: boot-pulse 1.4s infinite ease-in-out both;
}

.boot-dot:nth-child(2) { animation-delay: 0.2s; }
.boot-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes boot-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
    40%           { opacity: 1;    transform: scale(1.0); }
}

.app {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--s-4);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .app { padding: var(--s-6); }
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-2) 0 var(--s-5);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--s-5);
    gap: var(--s-3);
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-2);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
}

.brand-mark {
    display: inline-block;
    width: 12px; height: 12px;
    background: var(--primary);
    border-radius: 2px;
    margin-right: var(--s-1);
}

.brand-suffix { color: var(--ink-faint); font-weight: 400; font-size: 0.8125rem; }

.topbar-meta {
    font-size: 0.8125rem;
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.topbar-back {
    color: var(--primary);
    font-size: 0.875rem;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--r-sm);
    transition: background var(--t-fast);
}

.topbar-back:hover { background: var(--primary-faint); }

/* Training-mode clock */
.training-clock {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 4px var(--s-2);
    font-size: 0.75rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    background: var(--surface-raised);
    border-radius: var(--r-pill);
    border: 1px solid var(--border);
}

.training-clock::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ok);
    animation: clock-tick 2s infinite;
}

@keyframes clock-tick {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.screen {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    flex: 1;
    animation: screen-in var(--t-slow) var(--ease-out);
}

@keyframes screen-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.section-sub { font-size: 0.875rem; color: var(--ink-muted); }

/* Filter bar */
.filter-bar {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    align-items: center;
    padding: var(--s-3) 0;
}

.filter-bar select,
.filter-bar input {
    padding: var(--s-2) var(--s-3);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    color: var(--ink);
    min-height: 32px;
}

.filter-bar input:focus, .filter-bar select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

/* Path cards */
.path-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.path-card {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-4) var(--s-5);
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-med);
    cursor: pointer;
    color: var(--ink);
    position: relative;
}

.path-card:hover {
    border-color: var(--primary);
    background: var(--primary-faint);
    box-shadow: var(--shadow-1);
}

.path-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s-3);
    gap: var(--s-3);
}

.path-card-title {
    font-size: 1rem;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.path-card-deck {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    padding: 2px var(--s-2);
    background: var(--primary-soft);
    border-radius: var(--r-sm);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* LEDs */
.led-row {
    display: flex;
    gap: var(--s-3);
    margin-top: var(--s-2);
    font-size: 0.75rem;
    color: var(--ink-muted);
    flex-wrap: wrap;
}

.led {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px var(--s-2);
    border-radius: var(--r-pill);
    background: var(--surface-sunken);
}

.led-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
    flex-shrink: 0;
}

.led--training .led-dot {
    background: var(--primary);
    box-shadow: 0 0 0 0 var(--primary);
    animation: led-pulse 2s infinite;
}

.led--simulation .led-dot { background: var(--fail); }

.led--off .led-dot { background: var(--border-strong); }

@keyframes led-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 120, 212, 0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(0, 120, 212, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 120, 212, 0); }
}

.path-progress-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-3);
}

.path-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--surface-sunken);
    border-radius: var(--r-pill);
    overflow: hidden;
    display: flex;
}

.path-progress-seg { height: 100%; transition: flex-basis var(--t-slow) var(--ease-out); }
.path-progress-seg--mastered { background: var(--ok); }
.path-progress-seg--learning { background: #FFB900; }
.path-progress-seg--due      { background: var(--fail); }

.path-progress-count {
    font-size: 0.8125rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    min-width: 72px;
    text-align: right;
}

.path-card-delete {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    background: transparent;
    color: var(--ink-faint);
    padding: 4px 8px;
    border-radius: var(--r-sm);
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity var(--t-fast), color var(--t-fast);
}

.path-card:hover .path-card-delete { opacity: 1; }
.path-card-delete:hover { color: var(--fail); background: var(--fail-soft); }

.path-card-empty {
    text-align: center;
    padding: var(--s-7) var(--s-5);
    color: var(--ink-muted);
    font-size: 0.9375rem;
    background: var(--surface-raised);
    border-radius: var(--r-lg);
    border: 1px dashed var(--border-strong);
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--s-2);
    background: var(--primary);
    color: #FFFFFF;
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    font-weight: 600;
    min-height: 40px;
    transition: background var(--t-fast), transform var(--t-fast);
}

.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--primary-pressed); transform: translateY(1px); }

.btn-primary-lg {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--s-2);
    background: var(--primary);
    color: #FFFFFF;
    padding: var(--s-4) var(--s-6);
    border-radius: var(--r-md);
    font-size: 1rem;
    font-weight: 600;
    min-height: 52px;
    width: 100%;
    transition: background var(--t-fast), box-shadow var(--t-med);
    box-shadow: var(--shadow-1);
}

.btn-primary-lg:hover:not(:disabled) {
    background: var(--primary-hover);
    box-shadow: var(--shadow-2);
}

.btn-secondary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--s-2);
    background: var(--surface);
    color: var(--ink);
    padding: var(--s-3) var(--s-5);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-size: 0.9375rem;
    font-weight: 500;
    min-height: 40px;
    transition: background var(--t-fast), border-color var(--t-fast);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--surface-raised);
    border-color: var(--ink-faint);
}

.btn-ghost {
    background: transparent;
    color: var(--primary);
    padding: var(--s-2) var(--s-3);
    font-size: 0.875rem;
    border-radius: var(--r-sm);
    transition: background var(--t-fast);
    font-weight: 500;
}

.btn-ghost:hover:not(:disabled) { background: var(--primary-faint); }

.btn-danger-ghost {
    background: transparent;
    color: var(--fail);
    padding: var(--s-2) var(--s-3);
    font-size: 0.875rem;
    border-radius: var(--r-sm);
    transition: background var(--t-fast);
    font-weight: 500;
}

.btn-danger-ghost:hover:not(:disabled) { background: var(--fail-soft); }

.btn-add {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s-2);
    background: var(--surface);
    color: var(--primary);
    padding: var(--s-4) var(--s-5);
    border: 1px dashed var(--primary);
    border-radius: var(--r-lg);
    font-size: 0.9375rem;
    font-weight: 500;
    min-height: 52px;
    width: 100%;
    transition: background var(--t-fast);
}

.btn-add:hover { background: var(--primary-faint); }

/* Path detail */
.path-detail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-5);
}

@media (min-width: 768px) { .path-detail { padding: var(--s-6); } }

.path-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--s-5);
    gap: var(--s-3);
}

.path-detail-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.path-detail-meta { font-size: 0.8125rem; color: var(--ink-muted); margin-top: var(--s-1); }

.deck-info {
    background: var(--surface-raised);
    border-radius: var(--r-md);
    padding: var(--s-4);
    font-size: 0.8125rem;
    color: var(--ink-muted);
    border-left: 3px solid var(--primary);
    margin-bottom: var(--s-5);
    line-height: 1.6;
}

.deck-info dt { display: inline; font-weight: 600; color: var(--ink); }
.deck-info dd { display: inline; margin-right: var(--s-4); }
.deck-info-row { display: block; margin-bottom: var(--s-1); }

.ampel { margin-bottom: var(--s-5); }

.ampel-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    margin-bottom: var(--s-2);
}

.ampel-bar {
    display: flex;
    height: 12px;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--surface-sunken);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    margin-bottom: var(--s-3);
}

.ampel-seg { height: 100%; transition: flex-basis var(--t-slow) var(--ease-out); }
.ampel-seg--mastered { background: var(--ok); }
.ampel-seg--learning { background: #FFB900; }
.ampel-seg--due      { background: var(--fail); }

.ampel-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2) var(--s-4);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

@media (min-width: 480px) { .ampel-legend { grid-template-columns: repeat(4, 1fr); } }

.legend-item { display: flex; align-items: center; gap: var(--s-2); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legend-dot--mastered { background: var(--ok); }
.legend-dot--learning { background: #FFB900; }
.legend-dot--due      { background: var(--fail); }
.legend-dot--fresh    { background: var(--border-strong); }
.legend-value { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.path-actions {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-top: var(--s-5);
}

.path-actions-row {
    display: flex;
    gap: var(--s-2);
    justify-content: space-between;
    margin-top: var(--s-2);
}

/* Question screen */
.q-progress {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
}

.q-progress-bar {
    flex: 1;
    min-width: 120px;
    height: 4px;
    background: var(--surface-sunken);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.q-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--r-pill);
    transition: width var(--t-slow) var(--ease-out);
}

.q-progress-count {
    font-size: 0.8125rem;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    min-width: 70px;
    text-align: right;
}

.q-close {
    background: transparent;
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    color: var(--ink-muted);
    font-size: 1rem;
    transition: background var(--t-fast), color var(--t-fast);
}

.q-close:hover { background: var(--fail-faint); color: var(--fail); }

.card { padding: 0; background: transparent; }

.card.pulse-ok { animation: pulse-ok 0.5s var(--ease-out); }

@keyframes pulse-ok {
    0%   { box-shadow: 0 0 0 0 rgba(16, 124, 16, 0); }
    40%  { box-shadow: 0 0 0 6px rgba(16, 124, 16, 0.25); }
    100% { box-shadow: 0 0 0 0 rgba(16, 124, 16, 0); }
}

.q-meta {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--ink-muted);
    margin-bottom: var(--s-4);
    letter-spacing: 0.02em;
}

.q-meta-dot { color: var(--border-strong); }

.q-text {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: var(--s-5);
    font-weight: 400;
}

@media (min-width: 768px) { .q-text { font-size: 1.125rem; } }

.q-hint {
    display: block;
    margin-top: var(--s-2);
    font-size: 0.8125rem;
    color: var(--ink-muted);
    font-style: italic;
}

.options { display: flex; flex-direction: column; gap: var(--s-2); }

.option {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    text-align: left;
    transition: border-color var(--t-fast), background var(--t-fast);
    min-height: 48px;
    width: 100%;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink);
}

.option:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-faint); }

.option--selected {
    border-color: var(--primary);
    background: var(--primary-faint);
    border-width: 2px;
    padding: calc(var(--s-3) - 1px) calc(var(--s-4) - 1px);
}

.option--correct {
    border-color: var(--ok);
    background: var(--ok-faint);
    border-width: 2px;
    padding: calc(var(--s-3) - 1px) calc(var(--s-4) - 1px);
}

.option--incorrect {
    border-color: var(--fail);
    background: var(--fail-faint);
    border-width: 2px;
    padding: calc(var(--s-3) - 1px) calc(var(--s-4) - 1px);
}

.option-radio {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    margin-top: 2px;
    transition: all var(--t-fast);
}

.option-radio::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0;
    transition: opacity var(--t-fast);
}

.option--selected .option-radio { border-color: var(--primary); }
.option--selected .option-radio::after { opacity: 1; }
.option--correct .option-radio { border-color: var(--ok); }
.option--correct .option-radio::after { opacity: 1; background: var(--ok); }
.option--incorrect .option-radio { border-color: var(--fail); }
.option--incorrect .option-radio::after { opacity: 1; background: var(--fail); }

.option--multi .option-radio { border-radius: var(--r-sm); }
.option--multi .option-radio::after {
    content: "\2713";
    background: transparent;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    width: auto;
    height: auto;
    line-height: 1;
}
.option--multi.option--selected .option-radio { background: var(--primary); border-color: var(--primary); }
.option--multi.option--correct  .option-radio { background: var(--ok);      border-color: var(--ok); }
.option--multi.option--incorrect .option-radio { background: var(--fail);   border-color: var(--fail); }

.option-key {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-faint);
    flex-shrink: 0;
    margin-top: 3px;
    min-width: 1.5em;
}

.option-text { flex: 1; color: inherit; }

.matrix { display: flex; flex-direction: column; gap: var(--s-2); }

.matrix-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-4);
    align-items: center;
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast);
}

.matrix-row--correct   { border-color: var(--ok);   background: var(--ok-faint);   border-width: 2px; padding: calc(var(--s-3) - 1px) calc(var(--s-4) - 1px); }
.matrix-row--incorrect { border-color: var(--fail); background: var(--fail-faint); border-width: 2px; padding: calc(var(--s-3) - 1px) calc(var(--s-4) - 1px); }

.matrix-statement { font-size: 0.9375rem; line-height: 1.5; }

.matrix-toggle {
    display: flex;
    gap: 2px;
    background: var(--surface-sunken);
    border-radius: var(--r-md);
    padding: 2px;
}

.matrix-toggle button {
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-muted);
    min-width: 50px;
    min-height: 32px;
    transition: background var(--t-fast), color var(--t-fast);
}

.matrix-toggle button[aria-pressed="true"] {
    background: var(--primary);
    color: #FFFFFF;
}

.completion {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
    padding: var(--s-4);
    background: var(--primary-faint);
    border: 1px solid var(--primary-soft);
    border-radius: var(--r-md);
    margin-bottom: var(--s-4);
}

.completion-slot {
    display: inline-block;
    min-width: 6em;
    padding: 2px var(--s-3);
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 600;
    text-align: center;
}

.completion-slot--empty::after {
    content: "\00b7\00b7\00b7\00b7\00b7";
    color: var(--ink-faint);
    letter-spacing: 0.1em;
    font-weight: 400;
}

.q-actions {
    margin-top: var(--s-5);
    display: flex;
    gap: var(--s-3);
    justify-content: flex-end;
}

.feedback {
    margin-top: var(--s-5);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
    animation: fb-in var(--t-slow) var(--ease-out);
}

@keyframes fb-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.feedback--ok   { background: var(--ok-faint);   border-left: 4px solid var(--ok); }
.feedback--fail { background: var(--fail-faint); border-left: 4px solid var(--fail); }

.feedback-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: var(--s-2);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.feedback--ok   .feedback-title { color: var(--ok); }
.feedback--fail .feedback-title { color: var(--fail); }

.feedback-icon {
    display: inline-grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 0.8125rem;
    color: #FFFFFF;
    font-weight: 700;
}

.feedback--ok   .feedback-icon { background: var(--ok); }
.feedback--fail .feedback-icon { background: var(--fail); }

.feedback-body {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink);
}

.feedback-body p + p { margin-top: var(--s-2); }

.feedback-reference {
    margin-top: var(--s-3);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.feedback-reference a { color: var(--primary); text-decoration: underline; }

.feedback-timing {
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--ink-faint);
    display: flex;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
}

.summary {
    gap: var(--s-5);
    justify-content: center;
    flex: 1;
    padding: var(--s-7) 0;
    text-align: center;
}

.summary-headline {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
}

.summary-stats {
    display: flex;
    justify-content: center;
    gap: var(--s-6);
    flex-wrap: wrap;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-1);
    min-width: 80px;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.stat-value--ok   { color: var(--ok); }
.stat-value--fail { color: var(--fail); }

.stat-label {
    font-size: 0.75rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.summary-note {
    font-size: 0.9375rem;
    color: var(--ink-muted);
    max-width: 42ch;
    margin: 0 auto;
    line-height: 1.55;
}

/* Wizard */
.wizard { gap: var(--s-5); }

.wizard-step-head {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
}

.wizard h2 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
}

.wizard-choice-group {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.wizard-choice {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}

.wizard-choice:hover { border-color: var(--primary); background: var(--primary-faint); }

.wizard-choice--active {
    border-color: var(--primary);
    border-width: 2px;
    padding: calc(var(--s-4) - 1px);
    background: var(--primary-faint);
}

.wizard-choice-radio {
    width: 20px; height: 20px;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.wizard-choice-radio::after {
    content: "";
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0;
    transition: opacity var(--t-fast);
}

.wizard-choice--active .wizard-choice-radio { border-color: var(--primary); }
.wizard-choice--active .wizard-choice-radio::after { opacity: 1; }

.wizard-choice-body { flex: 1; }
.wizard-choice-title { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.wizard-choice-desc  { font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.5; }

.wizard-actions {
    display: flex;
    gap: var(--s-3);
    justify-content: space-between;
    margin-top: var(--s-5);
}

/* Toggles in wizard step 3 */
.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.toggle-row-label { flex: 1; }
.toggle-row-title { font-weight: 600; font-size: 0.9375rem; }
.toggle-row-desc  { font-size: 0.8125rem; color: var(--ink-muted); margin-top: 2px; }

.toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border-strong);
    border-radius: var(--r-pill);
    transition: background var(--t-fast);
    flex-shrink: 0;
}

.toggle::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: transform var(--t-fast);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.toggle.on { background: var(--primary); }
.toggle.on::after { transform: translateX(20px); }

/* Form (import screen) */
.form { display: flex; flex-direction: column; gap: var(--s-4); }
.form-title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field-label { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.field-hint  { font-size: 0.75rem;  color: var(--ink-muted); font-style: italic; margin-top: -4px; line-height: 1.5; }

.field input[type="text"],
.field textarea,
.field select {
    padding: var(--s-2) var(--s-3);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    font-size: 0.9375rem;
    color: var(--ink);
    transition: border-color var(--t-fast);
    width: 100%;
    font-family: var(--font-sans);
    min-height: 36px;
}

.field input[type="text"]:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.field textarea {
    resize: vertical;
    min-height: 160px;
    line-height: 1.5;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.form-actions {
    display: flex;
    gap: var(--s-3);
    justify-content: space-between;
    margin-top: var(--s-4);
    flex-wrap: wrap;
}

.preview-stat {
    padding: var(--s-3) var(--s-4);
    background: var(--surface-raised);
    border-radius: var(--r-md);
    font-size: 0.875rem;
    color: var(--ink);
    border-left: 3px solid var(--primary);
}

.preview-stat strong { color: var(--primary); }

.preview-stat.err { border-left-color: var(--fail); }
.preview-stat.err strong { color: var(--fail); }

.error {
    padding: var(--s-4);
    background: var(--fail-faint);
    border-radius: var(--r-md);
    border-left: 3px solid var(--fail);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--ink);
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
}

.notice {
    padding: var(--s-3) var(--s-4);
    background: var(--warn-soft);
    color: #8A5700;
    border-radius: var(--r-md);
    font-size: 0.8125rem;
    border-left: 3px solid var(--warn);
    line-height: 1.5;
}

body.dark-mode .notice { color: #FFD08A; }

.notice strong { font-weight: 700; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   Auth — Login / Register
   ============================================================ */
.auth-screen {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--s-7);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    padding: var(--s-6) var(--s-5);
}
.auth-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 var(--s-2) 0;
}
.auth-sub {
    color: var(--ink-muted);
    font-size: 0.875rem;
    margin: 0 0 var(--s-4) 0;
    line-height: 1.5;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.auth-form input[type="text"],
.auth-form input[type="password"] {
    width: 100%;
    padding: var(--s-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.9375rem;
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.auth-form input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.auth-form .field-label {
    margin-top: var(--s-2);
}
.auth-submit {
    margin-top: var(--s-4);
    width: 100%;
    justify-content: center;
}
.auth-error {
    background: var(--fail-soft);
    color: var(--fail-hover);
    border-left: 3px solid var(--fail);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    font-size: 0.875rem;
    margin-bottom: var(--s-3);
}
.auth-info {
    background: var(--primary-soft);
    color: var(--primary-pressed);
    border-left: 3px solid var(--primary);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    font-size: 0.875rem;
    margin-bottom: var(--s-3);
}
.auth-switch {
    margin-top: var(--s-4);
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.875rem;
}
.auth-link {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
}
.auth-link:hover { color: var(--primary-hover); }

/* ============================================================
   Topbar — User block + logout
   ============================================================ */
.topbar-user {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 0 var(--s-2);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}
.topbar-user-name {
    font-weight: 600;
    color: var(--ink);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-user-badge {
    background: var(--primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--r-pill);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.topbar-logout {
    background: none;
    border: 1px solid var(--border-strong);
    color: var(--ink-muted);
    padding: 2px var(--s-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}
.topbar-logout:hover {
    background: var(--fail-soft);
    color: var(--fail-hover);
    border-color: var(--fail);
}

/* ============================================================
   Settings — Account row + Admin section
   ============================================================ */
.settings-account {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
    color: var(--ink-muted);
    font-size: 0.875rem;
    margin-bottom: var(--s-4);
}
.admin-section {
    margin-top: var(--s-5);
    padding: var(--s-4);
    border: 1px solid var(--primary-soft);
    border-radius: var(--r-md);
    background: var(--primary-faint);
}
.admin-section-head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.admin-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.admin-badge {
    background: var(--primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.admin-section-desc {
    color: var(--ink-muted);
    font-size: 0.8125rem;
    margin: 0 0 var(--s-3) 0;
    line-height: 1.5;
}
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}