[hidden] { display: none !important; }

:root {
    --primary: #000;
    --bg: #fff;
    --text: #1a1a1a;
    --muted: #888;
    --border: #e5e5e5;
    --radius: 8px;
    --font: 'Inter', sans-serif;

    --surface: #fff;
    --surface-2: #fafafa;
    --surface-3: #f5f5f5;
    --surface-hover: #f7f7f7;
    --surface-elevated: #fff;

    --text-strong: #0d0d0d;
    --text-1: #1a1a1a;
    --text-2: #555;
    --text-3: #777;
    --text-muted-2: #888;
    --text-faint: #aaa;
    --text-faintest: #c0c0c0;

    --border-1: #e5e5e5;
    --border-soft: #ececec;
    --border-softer: #f0f0f0;
    --border-hairline: #f3f3f3;

    --shadow-card: 0 4px 16px -8px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 14px 30px -16px rgba(0, 0, 0, 0.16);
    --shadow-modal: 0 24px 60px -16px rgba(0, 0, 0, 0.25);

    --brand: #e01f1f;
    --brand-hover: #c41a1a;
    --brand-soft-bg: #fff5f5;

    --scrollbar-track: transparent;
    --scrollbar-thumb: #d4d4d4;
    --scrollbar-thumb-hover: #a8a8a8;

    color-scheme: light;
}

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

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    transition: background-color .25s ease, color .25s ease;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font);
}

img {
    display: block;
    max-width: 100%;
}

@supports (-webkit-touch-callout: none) {
    input, select, textarea { font-size: 16px !important; }
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    background-clip: content-box;
}
::-webkit-scrollbar-corner { background: transparent; }

.page-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    color: #555;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.10);
    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .25s cubic-bezier(.16, 1, .3, 1),
        box-shadow .25s ease;
    width: fit-content;
}
.page-back svg {
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
    flex-shrink: 0;
}
.page-back:hover {
    color: #e01f1f;
    border-color: rgba(224, 31, 31, 0.32);
    background: #fff;
    transform: translateX(-3px);
    box-shadow: 0 8px 20px -10px rgba(224, 31, 31, 0.32);
}
.page-back:hover svg { transform: translateX(-3px); }
.page-back:active { transform: translateX(-1px); }


.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #666;
    background: transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .25s ease;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.theme-toggle:hover { background: #f4f4f4; color: #1a1a1a; }
.theme-toggle svg { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease; }
.theme-toggle .theme-toggle-sun  { display: none; }
.theme-toggle .theme-toggle-moon { display: block; }
[data-theme="dark"] .theme-toggle .theme-toggle-sun  { display: block; }
[data-theme="dark"] .theme-toggle .theme-toggle-moon { display: none; }
.theme-toggle:active svg { transform: scale(0.85); }