:root {
    --dl-bg: #f6f7f9;
    --dl-surface: #ffffff;
    --dl-text: #1c2430;
    --dl-muted: #5b6673;
    --dl-border: #dde1e7;
    --dl-primary: #2a5bd7;
    --dl-primary-text: #ffffff;
    --dl-danger: #b3261e;
    --dl-danger-bg: #fceceb;
    --dl-info-bg: #e8f0fe;
    --dl-warn-bg: #fff4e0;
    --dl-radius: 8px;
    --dl-maxw: 960px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --dl-bg: #12161c;
        --dl-surface: #1b2129;
        --dl-text: #e6eaf0;
        --dl-muted: #9aa6b4;
        --dl-border: #2c333d;
        --dl-primary: #6ea0ff;
        --dl-primary-text: #0d1116;
        --dl-danger: #ff6b61;
        --dl-danger-bg: #3a1f1d;
        --dl-info-bg: #1c2a44;
        --dl-warn-bg: #3a2f1c;
    }
}

/* Explicit theme toggle wins in both directions (mirrors Horologium data-theme). */
:root[data-theme="light"] {
    --dl-bg: #f6f7f9; --dl-surface: #fff; --dl-text: #1c2430; --dl-muted: #5b6673;
    --dl-border: #dde1e7; --dl-info-bg: #e8f0fe; --dl-warn-bg: #fff4e0; --dl-danger-bg: #fceceb;
}
:root[data-theme="dark"] {
    --dl-bg: #12161c; --dl-surface: #1b2129; --dl-text: #e6eaf0; --dl-muted: #9aa6b4;
    --dl-border: #2c333d; --dl-info-bg: #1c2a44; --dl-warn-bg: #3a2f1c; --dl-danger-bg: #3a1f1d;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--dl-bg);
    color: var(--dl-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}
a { color: var(--dl-primary); }

.dl-nav {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.6rem 1rem;
    background: var(--dl-surface);
    border-bottom: 1px solid var(--dl-border);
}
.dl-nav__brand a { font-weight: 700; text-decoration: none; color: var(--dl-text); }
.dl-nav__links { display: flex; gap: 1rem; flex: 1; }
.dl-nav__links a { text-decoration: none; color: var(--dl-muted); }
.dl-nav__links a.is-active { color: var(--dl-text); font-weight: 600; }
.dl-nav__right { display: flex; align-items: center; gap: 0.75rem; }

.dl-main { flex: 1; width: 100%; max-width: var(--dl-maxw); margin: 1.5rem auto; padding: 0 1rem; }

.dl-card {
    background: var(--dl-surface);
    border: 1px solid var(--dl-border);
    border-radius: var(--dl-radius);
    padding: 1.5rem;
}
.dl-card--narrow { max-width: 420px; margin: 3rem auto; }

.dl-form { display: flex; flex-direction: column; gap: 0.4rem; }
.dl-form label { font-weight: 600; margin-top: 0.5rem; }
.dl-form input, .dl-form select, .dl-form textarea, .dl-langswitch select {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--dl-border);
    border-radius: 6px;
    background: var(--dl-bg);
    color: var(--dl-text);
    font-size: 1rem;
}
.dl-form textarea { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.9rem; }
.dl-pre {
    background: var(--dl-bg);
    border: 1px solid var(--dl-border);
    border-radius: 6px;
    padding: 0.8rem;
    overflow-x: auto;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.45;
}
.dl-btn { cursor: pointer; border: 0; border-radius: 6px; padding: 0.6rem 1rem; font-size: 1rem; margin-top: 1rem; }
.dl-btn--primary { background: var(--dl-primary); color: var(--dl-primary-text); }
.dl-logout button { background: transparent; border: 1px solid var(--dl-border); color: var(--dl-text); border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer; }

.dl-alert { padding: 0.6rem 0.8rem; border-radius: 6px; margin: 0.5rem 0; }
.dl-alert--error { background: var(--dl-danger-bg); color: var(--dl-danger); }
.dl-alert--info { background: var(--dl-info-bg); }
.dl-alert--warn { background: var(--dl-warn-bg); word-break: break-all; }

.dl-muted { color: var(--dl-muted); }
.dl-mt { margin-top: 1.5rem; }
.dl-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; }
.dl-facts dt { font-weight: 600; color: var(--dl-muted); }
.dl-facts dd { margin: 0; }

.dl-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.dl-table th, .dl-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--dl-border); }

.dl-footer { padding: 1rem; text-align: center; color: var(--dl-muted); border-top: 1px solid var(--dl-border); }
.dl-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }