/* ─────────────────────────────────────────────────
   Tron — Dark digital grid, cyan neon, deep space
   ───────────────────────────────────────────────── */

:root[data-ui-theme="tron"] {
    --bg: #080e18;
    --bg-accent: rgba(56, 210, 240, 0.06);
    --text: #c8e6f0;
    --sidebar-bg: #0b1522;
    --sidebar-strong: #0f1c2e;
    --border: rgba(56, 210, 240, 0.1);
    --panel-border: rgba(56, 210, 240, 0.35);
    --panel-bg: #0c1824;
    --panel-elevated: #0e1e30;
    --editor-surface: #0d1b2c;
    --muted: #5a8fa0;
    --input-border: rgba(56, 210, 240, 0.2);
    --button-bg: #38d2f0;
    --button-text: #060c14;
    --link-text: #8ac8d8;
    --active-bg: rgba(56, 210, 240, 0.14);
    --active-text: #e0f6ff;
    --placeholder: #4d7e90;
    --modal-bg: #0e1e30;
    --modal-muted: #5a8fa0;
    --backdrop: rgba(4, 8, 14, 0.8);
    --shadow-soft: 0 0 1px rgba(56, 210, 240, 0.25), 0 12px 40px rgba(0, 0, 0, 0.4);
    --shadow-panel: 0 0 1px rgba(56, 210, 240, 0.18), 0 4px 16px rgba(0, 0, 0, 0.3);
    --focus-ring: 0 0 0 2px rgba(56, 210, 240, 0.3);
    --accent-red: #e86450;
    --accent-blue: #38d2f0;
    --accent-yellow: #7b8aff;
    --font-ui: "Rajdhani", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Orbitron", "Rajdhani", "Helvetica Neue", Arial, sans-serif;
    --font-body: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    --ui-letter-spacing: 0.02em;
    --radius-panel: 8px;
    --radius-card: 6px;
    --radius-input: 4px;
    --radius-note: 6px;
    --radius-button: 4px;
    --radius-icon: 6px;
    --radius-editor: 8px;
    --radius-status: 8px 8px 0 0;
    --label-letter-spacing: 0.2em;
    --label-transform: uppercase;
    --button-letter-spacing: 0.16em;
    --button-transform: uppercase;
    --button-weight: 700;
    --title-letter-spacing: 0.06em;
    --title-transform: uppercase;
    --title-max-width: none;
    --display-letter-spacing: 0.04em;
    --display-transform: uppercase;
    --display-max-width: 11ch;
    --editor-font-size: 0.94rem;
    --editor-line-height: 1.9;
}

:root[data-ui-theme="tron"] body {
    background:
        linear-gradient(rgba(56, 210, 240, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 210, 240, 0.04) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 0%, rgba(56, 210, 240, 0.08), transparent 50%),
        var(--bg);
    background-size: 48px 48px, 48px 48px, auto, auto;
}

:root[data-ui-theme="tron"] .sidebar {
    border-right: 1px solid var(--border);
    box-shadow: inset -1px 0 0 rgba(56, 210, 240, 0.06);
}

:root[data-ui-theme="tron"] .title-row h1 {
    color: var(--accent-blue);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-shadow: 0 0 24px rgba(56, 210, 240, 0.2);
}

:root[data-ui-theme="tron"] .sidebar-tagline {
    color: var(--muted);
}

:root[data-ui-theme="tron"] .icon-button {
    background: rgba(56, 210, 240, 0.04);
    border-color: rgba(56, 210, 240, 0.25);
}

:root[data-ui-theme="tron"] .icon-button:hover {
    background: rgba(56, 210, 240, 0.14);
    border-color: rgba(56, 210, 240, 0.5);
    color: var(--accent-blue);
}

:root[data-ui-theme="tron"] .note-delete,
:root[data-ui-theme="tron"] .note-pin {
    border-color: rgba(56, 210, 240, 0.2);
}

:root[data-ui-theme="tron"] .note-delete:hover,
:root[data-ui-theme="tron"] .note-pin:hover {
    background: rgba(56, 210, 240, 0.12);
}

:root[data-ui-theme="tron"] .auth {
    border-color: rgba(56, 210, 240, 0.18);
}

:root[data-ui-theme="tron"] .sidebar-count {
    background: rgba(56, 210, 240, 0.16);
    color: var(--accent-blue);
    border: 1px solid rgba(56, 210, 240, 0.3);
}

:root[data-ui-theme="tron"] #notes li {
    border-color: rgba(56, 210, 240, 0.1);
    background: rgba(56, 210, 240, 0.03);
}

:root[data-ui-theme="tron"] #notes li:hover {
    border-color: rgba(56, 210, 240, 0.22);
    background: rgba(56, 210, 240, 0.06);
}

:root[data-ui-theme="tron"] #notes li.active {
    background: rgba(56, 210, 240, 0.12);
    border-color: rgba(56, 210, 240, 0.4);
    box-shadow: 0 0 20px rgba(56, 210, 240, 0.1), inset 0 0 12px rgba(56, 210, 240, 0.04);
}

:root[data-ui-theme="tron"] .notes-empty {
    border-color: rgba(56, 210, 240, 0.1);
}

:root[data-ui-theme="tron"] .welcome-badge {
    background: rgba(56, 210, 240, 0.08);
    border-color: rgba(56, 210, 240, 0.2);
    color: var(--accent-blue);
}

:root[data-ui-theme="tron"] .welcome-hero {
    border-color: rgba(56, 210, 240, 0.3);
    box-shadow: 0 0 1px rgba(56, 210, 240, 0.4), 0 20px 60px rgba(0, 0, 0, 0.3);
}

:root[data-ui-theme="tron"] .welcome-hero h2 {
    color: var(--accent-blue);
    text-shadow: 0 0 30px rgba(56, 210, 240, 0.15);
}

:root[data-ui-theme="tron"] .welcome-card,
:root[data-ui-theme="tron"] .welcome-footer {
    border-color: rgba(56, 210, 240, 0.12);
}

:root[data-ui-theme="tron"] .editor-body {
    border-color: rgba(56, 210, 240, 0.15);
    box-shadow: 0 0 1px rgba(56, 210, 240, 0.25), 0 12px 40px rgba(0, 0, 0, 0.3);
    caret-color: var(--accent-blue);
}

:root[data-ui-theme="tron"] .status-bar {
    border-color: rgba(56, 210, 240, 0.12);
    box-shadow: 0 -1px 0 rgba(56, 210, 240, 0.08);
}

:root[data-ui-theme="tron"] .modal-card {
    border-color: rgba(56, 210, 240, 0.3);
    box-shadow: 0 0 1px rgba(56, 210, 240, 0.4), 0 20px 60px rgba(0, 0, 0, 0.4);
}

:root[data-ui-theme="tron"] .modal-close {
    background: rgba(56, 210, 240, 0.06);
    border-color: rgba(56, 210, 240, 0.2);
}

:root[data-ui-theme="tron"] .theme-panel {
    border-color: rgba(56, 210, 240, 0.3);
    box-shadow: 0 0 1px rgba(56, 210, 240, 0.35), 0 8px 32px rgba(0, 0, 0, 0.35);
}

:root[data-ui-theme="tron"] .theme-select {
    color: var(--text);
}

:root[data-ui-theme="tron"] .sidebar input,
:root[data-ui-theme="tron"] .sidebar select,
:root[data-ui-theme="tron"] .modal-card input,
:root[data-ui-theme="tron"] .modal-card select,
:root[data-ui-theme="tron"] .modal-card progress {
    background: rgba(56, 210, 240, 0.04);
    border-color: rgba(56, 210, 240, 0.2);
    color: var(--text);
}

:root[data-ui-theme="tron"] .sidebar .auth-controls button,
:root[data-ui-theme="tron"] .modal-actions button,
:root[data-ui-theme="tron"] #repo-create {
    background: var(--accent-blue);
    color: #060c14;
    border: none;
}

:root[data-ui-theme="tron"] button.text-link,
:root[data-ui-theme="tron"] .sidebar .auth-controls button.text-link {
    background: transparent;
    color: var(--accent-blue);
    border: none;
}

:root[data-ui-theme="tron"] .repo-options {
    background: var(--panel-elevated);
    border-color: rgba(56, 210, 240, 0.2);
}

:root[data-ui-theme="tron"] .repo-option:hover,
:root[data-ui-theme="tron"] .repo-option.active,
:root[data-ui-theme="tron"] .repo-option[aria-selected="true"] {
    background: rgba(56, 210, 240, 0.08);
}

:root[data-ui-theme="tron"] .toast {
    border-color: rgba(56, 210, 240, 0.15);
    background: var(--panel-elevated);
}

:root[data-ui-theme="tron"] .toast.info {
    border-left-color: var(--accent-blue);
}

:root[data-ui-theme="tron"] .toast.success {
    border-left-color: #48c78e;
}

:root[data-ui-theme="tron"] .toast.error {
    border-left-color: var(--accent-red);
}

:root[data-ui-theme="tron"] progress {
    accent-color: var(--accent-blue);
}