/* ==========================================================================
   Noto Emoji (@font-face) — статический шрифт /fonts/NotoEmoji.ttf
   ========================================================================== */
@font-face {
    font-family: 'Noto Emoji';
    src: url('/fonts/NotoEmoji.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+203C, U+2049, U+2122, U+2139, U+2194-2199, U+21A9-21AA,
        U+231A-231B, U+2328, U+23CF, U+23E9-23F3, U+23F8-23FA, U+24C2,
        U+25AA-25AB, U+25B6, U+25C0, U+25FB-25FE, U+2600-2604, U+260E,
        U+2611, U+2614-2615, U+2618, U+261D, U+2620, U+2622-2623, U+2626,
        U+262A, U+262E-262F, U+2638-263A, U+2640, U+2642, U+2648-2653,
        U+265F-2660, U+2663, U+2665-2666, U+2668, U+267B, U+267E-267F,
        U+2692-2697, U+2699, U+269B-269C, U+26A0-26A1, U+26A7, U+26AA-26AB,
        U+26B0-26B1, U+26BD-26BE, U+26C4-26C5, U+26C8, U+26CE-26CF, U+26D1,
        U+26D3-26D4, U+26E9-26EA, U+26F0-26F5, U+26F7-26FA, U+26FD, U+2702,
        U+2705, U+2708-270D, U+270F, U+2712, U+2714, U+2716, U+271D, U+2721,
        U+2728, U+2733-2734, U+2744, U+2747, U+274C, U+274E, U+2753-2755,
        U+2757, U+2763-2764, U+2795-2797, U+27A1, U+27B0, U+27BF, U+2934-2935,
        U+2B05-2B07, U+2B1B-2B1C, U+2B50, U+2B55, U+3030, U+303D, U+3297,
        U+3299, U+FE00-FE0F, U+1F000-1FAFF;
}

/* ==========================================================================
   Catppuccin: 4 Flavors + 14 Accents
   ========================================================================== */
:root, [data-theme="frappe"] {
    --crust: #232634; --mantle: #292c3c; --base: #303446;
    --surface0: #414559; --surface1: #51576d; --surface2: #626880;
    --subtext: #a5adce; --text: #c6d0f5;
    --rosewater: #f2d5cf; --flamingo: #eebebe; --pink: #f4b8e4; --mauve: #ca9ee6;
    --red: #e78284; --maroon: #ea999c; --peach: #ef9f76; --yellow: #e5c890;
    --green: #a6d189; --teal: #81c8be; --sky: #99d1db; --sapphire: #85c1dc;
    --blue: #8caaee; --lavender: #babbf1;
}

[data-theme="macchiato"] {
    --crust: #181926; --mantle: #1e2030; --base: #24273a;
    --surface0: #363a4f; --surface1: #494d64; --surface2: #5b6078;
    --subtext: #a5adcb; --text: #cad3f5;
    --rosewater: #f4dbd6; --flamingo: #f0c6c6; --pink: #f5bde6; --mauve: #c6a0f6;
    --red: #ed8796; --maroon: #ee99a0; --peach: #f5a97f; --yellow: #eed49f;
    --green: #a6da95; --teal: #8bd5ca; --sky: #91d7e3; --sapphire: #7dc4e4;
    --blue: #8aadf4; --lavender: #b7bdf8;
}

[data-theme="mocha"] {
    --crust: #11111b; --mantle: #181825; --base: #1e1e2e;
    --surface0: #313244; --surface1: #45475a; --surface2: #585b70;
    --subtext: #a6adc8; --text: #cdd6f4;
    --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; --mauve: #cba6f7;
    --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; --yellow: #f9e2af;
    --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb; --sapphire: #74c7ec;
    --blue: #89b4fa; --lavender: #b4befe;
}

[data-theme="latte"] {
    --crust: #dce0e8; --mantle: #e6e9ef; --base: #eff1f5;
    --surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be;
    --subtext: #6c6f85; --text: #4c4f69;
    --rosewater: #dc8a78; --flamingo: #dd7878; --pink: #ea76cb; --mauve: #8839ef;
    --red: #d20f39; --maroon: #e64553; --peach: #fe640b; --yellow: #df8e1d;
    --green: #40a02b; --teal: #179299; --sky: #04a5e5; --sapphire: #209fb5;
    --blue: #1e66f5; --lavender: #7287fd;
}

:root, [data-accent="mauve"] { --primary: var(--mauve); }
[data-accent="rosewater"] { --primary: var(--rosewater); }
[data-accent="flamingo"]  { --primary: var(--flamingo); }
[data-accent="pink"]      { --primary: var(--pink); }
[data-accent="red"]       { --primary: var(--red); }
[data-accent="maroon"]    { --primary: var(--maroon); }
[data-accent="peach"]     { --primary: var(--peach); }
[data-accent="yellow"]    { --primary: var(--yellow); }
[data-accent="green"]     { --primary: var(--green); }
[data-accent="teal"]      { --primary: var(--teal); }
[data-accent="sky"]       { --primary: var(--sky); }
[data-accent="sapphire"]  { --primary: var(--sapphire); }
[data-accent="blue"]      { --primary: var(--blue); }
[data-accent="lavender"]  { --primary: var(--lavender); }

/* ==========================================================================
   Reset & Base
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --font-sans: 'Noto Emoji', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, 'Noto Emoji';
    --font-mono: 'Noto Emoji', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

body {
    background-color: var(--base);
    background-image:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--primary) 15%, transparent) 0%, transparent 65%),
        linear-gradient(180deg, var(--mantle) 0%, var(--base) 100%);
    color: var(--text);
    font-family: var(--font-sans);
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    transition: background-color 0.25s, color 0.25s;
}

.emoji {
    font-family: 'Noto Emoji', sans-serif;
    font-weight: normal;
}

.mono-badge {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.card {
    width: 100%;
    max-width: 540px;
    background: color-mix(in srgb, var(--surface0) 88%, var(--base));
    border-radius: 20px;
    padding: 28px 26px;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--surface1));
    box-shadow:
        0 16px 40px -8px rgba(0, 0, 0, 0.28),
        0 1px 0 0 color-mix(in srgb, var(--primary) 35%, transparent) inset;
}

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--subtext);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    padding: 6px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface1) 45%, transparent);
    border: 1px solid var(--surface1);
    cursor: pointer;
    transition: all 0.2s;
}

.back-link:hover { color: var(--primary); border-color: var(--primary); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
}

h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin-bottom: 4px;
}

.subtitle {
    font-size: 14px;
    color: var(--subtext);
    margin-bottom: 20px;
}

/* ==========================================================================
   Navigation Cards
   ========================================================================== */
nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    background: color-mix(in srgb, var(--surface1) 60%, var(--surface0));
    border: 1px solid var(--surface1);
    color: var(--text);
    text-decoration: none;
    border-radius: 14px;
    transition: all 0.2s ease;
}

.nav-item-left { display: flex; align-items: center; gap: 14px; }

.nav-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--primary) 16%, var(--surface0));
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    transition: all 0.2s;
}

.nav-text strong { display: block; font-size: 15px; font-weight: 600; }
.nav-text span { display: block; font-size: 12.5px; color: var(--subtext); margin-top: 1px; }
.nav-arrow { color: var(--subtext); font-size: 17px; transition: transform 0.2s, color 0.2s; }

.nav-item:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface1));
    transform: translateY(-1px);
}
.nav-item:hover .nav-icon { background: var(--primary); color: var(--crust); }
.nav-item:hover .nav-arrow { color: var(--primary); transform: translateX(3px); }
[dir="rtl"] .nav-item:hover .nav-arrow { transform: translateX(-3px); }

/* ==========================================================================
   Inputs & Buttons
   ========================================================================== */
.input-group { margin-bottom: 12px; display: flex; gap: 8px; }

input, select {
    width: 100%;
    padding: 11px 14px;
    background-color: var(--mantle);
    border: 1.5px solid var(--surface1);
    color: var(--text);
    border-radius: 12px;
    font-size: 14.5px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
    cursor: ns-resize;
    direction: ltr;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.actions { display: flex; gap: 10px; margin-top: 10px; }

.btn {
    flex: 1;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-primary { background-color: var(--primary); color: var(--crust); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-secondary { background-color: var(--surface1); color: var(--text); border-color: var(--surface2); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn:active { transform: scale(0.98); }

.star-info {
    font-size: 13.5px;
    line-height: 1.6;
    border-top: 1px solid var(--surface1);
    padding-top: 16px;
    color: var(--subtext);
}
.star-info strong { color: var(--primary); font-weight: 600; }

.stat-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stat-pill {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--mantle);
    border: 1px solid var(--surface1);
    color: var(--text);
}
.stat-pill b { color: var(--primary); }

/* ==========================================================================
   Нижняя панель: Палитра Catppuccin + 6 официальных языков ООН
   ========================================================================== */
.theme-panel {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--surface1) 60%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bottom-toggles-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.palette-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 99px;
    background: var(--mantle);
    border: 1.5px solid var(--surface1);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.palette-toggle-btn:hover,
.palette-toggle-btn.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--mantle));
}

.palette-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
}

.palette-box {
    display: none;
    width: 100%;
    margin-top: 4px;
    padding: 12px;
    border-radius: 14px;
    background: var(--mantle);
    border: 1px solid var(--surface1);
    flex-direction: column;
    gap: 10px;
}

.palette-box.open { display: flex; }

.flavor-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    background: var(--crust);
    padding: 4px;
    border-radius: 11px;
}

.lang-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    background: var(--crust);
    padding: 4px;
    border-radius: 11px;
}

.flavor-chip, .lang-chip {
    background: transparent;
    color: var(--subtext);
    border: 1px solid transparent;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.flavor-chip:hover, .lang-chip:hover { color: var(--text); }

.flavor-chip.active, .lang-chip.active {
    background: var(--surface0);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

.accent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 6px;
}

.accent-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--surface0);
    border: 1px solid var(--surface1);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.accent-chip:hover { border-color: var(--surface2); }

.accent-chip.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 16%, var(--surface0));
    color: var(--primary);
    font-weight: 600;
}

.accent-swatch {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

.error-code {
    font-size: 80px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -3px;
    color: var(--primary);
    margin: 8px 0 12px;
}

@media (max-width: 640px) {
    .lang-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
    .card { padding: 20px 16px; border-radius: 16px; }
    .flavor-bar { grid-template-columns: repeat(2, 1fr); }
    .accent-grid { grid-template-columns: repeat(2, 1fr); }
}