*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root, [data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #f8f9fa;
    --surface-hover: #f1f3f5;
    --nav-bg: rgba(255, 255, 255, 0.85);
    --overlay: rgba(0, 0, 0, 0.42);

    --text: #1a1a1a;
    --text-soft: #333;
    --muted: #6c757d;

    --border: #e2e6ea;
    --border-strong: #d0d7de;
    --border-dot: #d4d4d4;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10);

    --primary: #007bff;
    --primary-hover: #0062cb;
    --primary-tint: rgba(0, 123, 255, 0.07);
    --primary-border: rgba(0, 123, 255, 0.22);

    --success: #1f9d55;
    --success-hover: #178142;
    --success-tint: rgba(31, 157, 85, 0.08);
    --success-border: rgba(31, 157, 85, 0.24);

    --warning: #d97706;
    --warning-hover: #b85f04;
    --warning-tint: rgba(217, 119, 6, 0.08);
    --warning-border: rgba(217, 119, 6, 0.25);

    --danger: #dc3545;
    --danger-hover: #b8232f;
    --danger-tint: rgba(220, 53, 69, 0.08);
    --danger-border: rgba(220, 53, 69, 0.25);

    --tag-violet: #7c3aed;
    --tag-cyan: #0891b2;
    --tag-gold: #c08a00;
    --tag-amber: #d97706;
    --tag-amber-soft: #b45309;

    --home-mark-glow: none;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d0f12;
    --surface: #13161b;
    --surface-hover: #181b22;
    --nav-bg: rgba(13, 15, 18, 0.85);
    --overlay: rgba(0, 0, 0, 0.6);

    --text: #e8ecf3;
    --text-soft: #cdd4de;
    --muted: #7a8493;

    --border: #2a2d35;
    --border-strong: #353945;
    --border-dot: #3a3d47;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.45);

    --primary: #258de8;
    --primary-hover: #1872c9;
    --primary-tint: rgba(37, 141, 232, 0.10);
    --primary-border: rgba(37, 141, 232, 0.30);

    --success: #28b985;
    --success-hover: #1d9468;
    --success-tint: rgba(40, 185, 133, 0.10);
    --success-border: rgba(40, 185, 133, 0.28);

    --warning: #f59e0b;
    --warning-hover: #c47e07;
    --warning-tint: rgba(245, 158, 11, 0.10);
    --warning-border: rgba(245, 158, 11, 0.30);

    --danger: #f87171;
    --danger-hover: #d04e4e;
    --danger-tint: rgba(248, 113, 113, 0.10);
    --danger-border: rgba(248, 113, 113, 0.30);

    --tag-violet: #a78bfa;
    --tag-cyan: #22d3ee;
    --tag-gold: #fbbf24;
    --tag-amber: #f59e0b;
    --tag-amber-soft: #fbbf24;

    --home-mark-glow: 0 0 28px rgba(232, 236, 243, 0.18);
}

html {
    height: 100%;
    font-size: 17px;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 0.25s, color 0.25s;
}

main {
    flex: 1 0 auto;
}

.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
    transition: none !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 600;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.10rem; }
h4 { font-size: 0.95rem; }

p {
    color: var(--text-soft);
}

a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: transparent;
    transition: color 0.08s, text-decoration-color 0.08s;
}

a:hover {
    color: color-mix(in srgb, var(--primary) 70%, var(--primary-hover));
    text-decoration-color: currentColor;
}

code, kbd, samp, .mono {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

code {
    font-size: 0.85em;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-soft);
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 24px 0;
}

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

[x-cloak] {
    display: none !important;
}