/* Pochtalyon — umumiy uslublar. Mini App'da Telegram mavzusi ranglari (--tg-theme-*) ishlatiladi. */
:root {
    --bg: #f6f7fb;
    --fg: #14213d;
    --muted: #5b6475;
    --card: #ffffff;
    --accent: #2563eb;
    --accent-fg: #ffffff;
    --border: #e3e6ee;
    --ok: #15803d;
    --err: #b91c1c;
    --hint: #eef4ff;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1420;
        --fg: #e7ebf3;
        --muted: #9aa3b5;
        --card: #171e2d;
        --accent: #4f8bff;
        --border: #263047;
        --ok: #4ade80;
        --err: #f87171;
        --hint: #1b2742;
    }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--fg); }
body.app {
    background: var(--tg-theme-bg-color, var(--bg));
    color: var(--tg-theme-text-color, var(--fg));
}
a { color: var(--accent); }
.wrap { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }
.card { max-width: 520px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 12px; }
h2 { font-size: 1.2rem; margin: 28px 0 8px; }
label { display: block; margin: 10px 0; font-size: .92rem; }
input, select {
    width: 100%; margin-top: 4px; padding: 10px 12px; font-size: 1rem; border-radius: 10px;
    border: 1px solid var(--border); background: var(--tg-theme-secondary-bg-color, var(--card)); color: inherit;
}
button {
    width: 100%; margin-top: 14px; padding: 12px; font-size: 1rem; font-weight: 600; border: 0; border-radius: 10px;
    background: var(--tg-theme-button-color, var(--accent)); color: var(--tg-theme-button-text-color, var(--accent-fg)); cursor: pointer;
}
button:disabled { opacity: .6; }
details { margin: 12px 0; }
summary { cursor: pointer; color: var(--tg-theme-link-color, var(--accent)); }
.grid { display: grid; grid-template-columns: 1fr 90px 120px; gap: 0 8px; }
.grid .wide { grid-column: 1 / -1; }
@media (max-width: 420px) { .grid { grid-template-columns: 1fr 1fr; } }
.muted { color: var(--tg-theme-hint-color, var(--muted)); }
.small { font-size: .82rem; margin: 2px 0 8px; }
.hint { background: var(--hint); border-radius: 10px; padding: 10px 12px; font-size: .9rem; margin: 8px 0; }
.warn { color: var(--err); }
.result { margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: .95rem; }
.result.ok { color: var(--ok); border: 1px solid var(--ok); }
.result.err { color: var(--err); border: 1px solid var(--err); }
.hero { padding: 32px 0 8px; }
.hero p { font-size: 1.1rem; color: var(--muted); }
.cta { display: inline-block; margin-top: 12px; padding: 12px 20px; border-radius: 10px; background: var(--accent); color: var(--accent-fg);
    text-decoration: none; font-weight: 600; }
.features { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.features li, .plan { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.plan b { font-size: 1.1rem; }
nav.lang a { margin-right: 10px; }
footer { margin-top: 40px; font-size: .9rem; color: var(--muted); }
footer a { margin-right: 14px; }
.legal p, .legal li { color: var(--fg); }