/* ── CSS custom properties for theme switching ────────────────────────────── */
:root {
    --bg-page:    #f7f8fa;
    --bg-card:    #ffffff;
    --text-primary:   #333333;
    --text-secondary: #888888;
    --accent:     #2185d0;
    --border:     rgba(34, 36, 38, 0.15);
}

[data-theme="dark"] {
    --bg-page:    #1b1c1d;
    --bg-card:    #2d2d2d;
    --text-primary:   #e0e0e0;
    --text-secondary: #999999;
    --accent:     #6435c9;
    --border:     rgba(255, 255, 255, 0.1);
}

body { background-color: var(--bg-page) !important; color: var(--text-primary); }

/* Apply card background where Semantic UI uses white */
[data-theme="dark"] .ui.card,
[data-theme="dark"] .ui.segment,
[data-theme="dark"] #context2,
[data-theme="dark"] .ui.menu { background-color: var(--bg-card) !important; color: var(--text-primary) !important; }

[data-theme="dark"] .ui.header,
[data-theme="dark"] .ui.dividing.header { color: var(--text-primary) !important; border-bottom-color: var(--border) !important; }

[data-theme="dark"] a { color: var(--accent) !important; }

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.nullright {
    float: right;
}