:root {
    color-scheme: light;
    --white: #ffffff;
    --white-page: #f7f7f2;
    --white-muted: #f2f4ef;
    --white-raised: #ecf0f3;
    --gray-50: #eef1ec;
    --gray-100: #e1e2dc;
    --gray-200: #dfe4db;
    --gray-300: #d8ddd4;
    --gray-400: #d1d9e6;
    --gray-500: #9fb8ac;
    --gray-600: #8d9390;
    --gray-700: #7b8280;
    --gray-800: #6d736f;
    --gray-900: #5d6661;
    --black: #1d1f1e;
    --black-strong: #1f2320;
    --black-ink: #212922;
    --black-soft: #2b322e;
    --black-muted: #303632;
    --black-balance: #394a56;
    --black-quiet: #434343;
    --black-warm: #494949;
    --main-50: #eefaf1;
    --main-100: #e8ffe5;
    --main-200: #dbffeb;
    --main-300: #d7e6d1;
    --main-400: #9fb87a;
    --main-500: #86efac;
    --main-600: #56e68a;
    --main-700: #4ade80;
    --main-800: #1e6f5c;
    --accent-blue-50: #eef4ff;
    --accent-blue-100: #e1ecff;
    --accent-blue-200: #c8d9ff;
    --accent-blue-300: #a7c6ff;
    --accent-blue-400: #9ab7df;
    --accent-blue-500: #3c5378;
    --accent-blue-600: #1e56cf;
    --accent-blue-700: #0078d7;
    --accent-warm-50: #fff6ef;
    --accent-warm-100: #ffdfc7;
    --accent-warm-200: #f0d8c9;
    --accent-warm-300: #dfbfaa;
    --accent-warm-400: #7a4f28;
    --accent-warm-500: #5f3f23;
    --accent-red-50: #fff2f2;
    --accent-red-100: #fff1f1;
    --accent-red-200: #f5c6c6;
    --accent-red-300: #f3d9d9;
    --accent-red-400: #fbb;
    --accent-red-500: #8f2d2d;
    --accent-red-600: #7a4343;
    --main-rgb: 30 111 92;
    --warm-rgb: 227 188 128;
    --black-rgb: 0 0 0;
    --shadow-rgb: 22 25 23;
    --shadow-nav: 0 12px 36px rgb(var(--shadow-rgb) / 0.04);
    --shadow-card: 0 18px 48px rgb(var(--shadow-rgb) / 0.12);
    --shadow-button: 0 5px 14px rgb(var(--black-rgb) / 0.16);
    --shadow-button-hover: 0 8px 18px rgb(var(--black-rgb) / 0.22);
    --shadow-button-active: 0 4px 10px rgb(var(--black-rgb) / 0.16);
    --bg: var(--white-page);
    --ink: var(--black);
    --muted: var(--gray-800);
    --line: var(--gray-100);
    --accent: var(--main-800);
    --accent-soft: rgb(30 111 92 / 0.12);
    --card: var(--white);
    --shadow: var(--shadow-card);
    --radius: 18px;
    --mono: "SF Mono", "Consolas", "Menlo", monospace;
    --sans: "Space Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --text-strong: var(--black-strong);
    --text-ink: var(--black-ink);
    --text-muted: var(--gray-900);
    --text-dim: var(--gray-700);
    --text-quiet: var(--gray-600);
    --text-link: var(--accent-blue-600);
    --surface-white: var(--white);
    --surface-muted: var(--white-muted);
    --surface-raised: var(--white-raised);
    --surface-warm: var(--accent-warm-50);
}

* { box-sizing: border-box; }

html {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background:
        radial-gradient(1200px 600px at 15% -20%, rgb(var(--main-rgb) / 0.15), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgb(var(--warm-rgb) / 0.25), transparent 55%),
        var(--bg);
}

.content {
    transition: transform 0.2s ease;
}

.page {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 24px 80px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    font-size: 18px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
}

.nav-bar {
    display: flex;
    margin: 24px auto 16px auto;
    width: 980px;
    gap: 10px;
}

.nav-bar nav {
    background: var(--card);
    box-shadow: var(--shadow-nav);
    border-radius: var(--radius);
    max-width: 980px;
    padding: 0.5rem 1.5rem;
}

.nav-bar nav.pages {
    width: 100%;
}

.nav-bar nav ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 1rem 0;
}

.nav-bar nav.languages:not(:has(ul)) {
    display: none;
}

.nav-bar nav.languages ul {
    gap: 10px;
}

nav li {
    display: flex;
    align-items: center;
}

nav a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}

nav a.active {
    text-decoration: underline;
    text-decoration-thickness: 2.5px;
    text-underline-offset: 8px;
}

nav a:hover, nav a:focus {
    color: var(--ink);
}

nav a:hover:not(.active), nav a:focus {
    background: var(--accent-soft);
}

main {
    background: var(--card);
    border-radius: var(--radius);
    padding-block: 10px;
    padding-inline: 50px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    width: 980px;
    margin-inline: auto;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.hero-text {
    margin: 0 0 24px;
    font-size: 18px;
    color: var(--muted);
    max-width: 520px;
}

.api-input {
    display: block;
    width: min(360px, 100%);
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
}

.api-input:focus {
    outline: 2px solid rgb(var(--main-rgb) / 0.35);
    outline-offset: 2px;
    border-color: var(--accent);
}

.api-button {
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--white);
    font-size: 16px;
    cursor: pointer;
    font-family: var(--sans);
    transition: transform 0.2s, background 0.2s;
}

.api-button:hover {
    transform: translateY(-2px);
}

.login-shell {
    display: grid;
    place-items: center;
    padding: 36px 0;
}

.login-card {
    width: min(560px, 100%);
    padding: 8px 10px;
    border-radius: 0;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: none;
}

.login-title {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 600;
    color: var(--text-strong);
}

.login-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--black-muted);
}

.login-input {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--gray-300);
    background: var(--white);
    color: var(--ink);
    font-size: 1rem;
    font-family: var(--sans);
}

.login-input:focus {
    outline: 2px solid rgb(var(--main-rgb) / 0.26);
    outline-offset: 2px;
    border-color: var(--gray-500);
}

.login-button {
    margin-top: 12px;
    width: 100%;
    padding: 0.85rem 1.25rem;
    border-radius: 999px;
    border: 1px solid var(--gray-50);
    background: var(--white);
    color: var(--black-soft);
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: var(--shadow-button);
    transition: box-shadow 0.2s ease;
}

.login-button:hover {
    box-shadow: var(--shadow-button-hover);
}

.login-button:active {
    box-shadow: var(--shadow-button-active);
}

.login-user-status {
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 0.93rem;
    color: var(--gray-900);
}

.login-logout-link {
    color: var(--text-link);
    text-decoration: none;
    font-weight: 500;
}

.login-alert {
    margin-bottom: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--accent-red-200);
    background: var(--accent-red-50);
    color: var(--accent-red-500);
    font-size: 0.92rem;
}

@media (max-width: 768px) {
    .login-shell {
        min-height: auto;
        padding: 10px 0;
    }

    .login-card {
        width: 100%;
        padding: 4px 0;
        border-radius: 0;
    }

    .login-user-status {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 720px) {
    .page { padding: 36px 18px 64px; }
    header { flex-direction: column; align-items: flex-start; }
    main { padding: 36px 24px; }
    footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}