.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #cfd8e8;
    border-radius: 10px;
    text-decoration: none;
    background: #fff;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background: #0f1724;
    color: #dce6f5;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .footer {
    background: #111c2c;
    border-color: #2a3b54;
}

html[data-theme="dark"] .topbar a,
html[data-theme="dark"] .topbar .user,
html[data-theme="dark"] .footer {
    color: #dce6f5;
}

html[data-theme="dark"] .public-widget,
html[data-theme="dark"] .public-hero,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .diary-card,
html[data-theme="dark"] .workspace-card {
    background: #162235;
    border-color: #30425d;
    color: #dce6f5;
    box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

html[data-theme="dark"] .public-hero {
    background:
        radial-gradient(circle at top right, rgba(67, 123, 182, .22), transparent 35%),
        linear-gradient(135deg, #18263a, #132033);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong,
html[data-theme="dark"] .big-value,
html[data-theme="dark"] .rate-row strong,
html[data-theme="dark"] .baseline-note strong {
    color: #9fc8f3;
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .baseline-note,
html[data-theme="dark"] .eyebrow {
    color: #a9b8cb;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #0f1a2a;
    border-color: #3a4d69;
    color: #eef5ff;
}

html[data-theme="dark"] .rate-row,
html[data-theme="dark"] .baseline-note {
    border-color: #30425d;
}

html[data-theme="dark"] .button:not(.primary),
html[data-theme="dark"] .theme-toggle {
    background: #1a2a40;
    border-color: #3a5271;
    color: #e4eefb;
}

html[data-theme="dark"] a {
    color: #8fc2f5;
}