/* oChat — общие стили: токены, сброс, шапка, подвал, кнопки.
   Токены :root / [data-theme="dark"] ниже — побайтовая копия блока из Lunir
   (assets/common.css), который сам зеркалит SKStyle/PremiumWhiteObsidianStyle.swift.
   Копия намеренная: два продукта одной студии должны читаться как одна система,
   а расхождение в паре hex'ов заметно только на общем скриншоте — когда уже поздно. */

/* Self-hosted Inter (rsms.me/inter v4) — avoids Google Fonts third-party request. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/InterVariable.woff2') format('woff2-variations');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/InterVariable-Italic.woff2') format('woff2-variations');
}

/* ===== Obsidian design system — tokens (mirror of iOS SKStyle / PremiumWhiteObsidianStyle).
   Light = cold pearl white + obsidian + platinum blue (NO cream/beige undertone).
   Dark  = cold blue-charcoal + graphite + pearl ink + lightened platinum foreground.
   This block is kept byte-identical between landing style.css and assets/common.css. */
:root {
    /* Surfaces */
    --white: #ffffff;
    --bg: #f5f7fa;              /* canvas */
    --card: #ffffff;           /* card surface */
    --elevated: #ffffff;       /* elevated / popover */
    --border: #dce2e8;         /* hairline divider */
    --control-border: #7b8998; /* input / control border (1pt) */
    --text: #191b1f;           /* ink */
    --text2: #526170;          /* ink secondary */
    --text3: #626f7d;          /* ink tertiary */
    --seg: #eef2f6;            /* field / quiet fill */
    --header-bg: rgba(245,247,250,.85);
    /* Platinum-blue accent (adaptive) — icons, links, focus, selected */
    --accent: #40566e;
    --accent-fill: #242c34;    /* solid obsidian fill under white text */
    --accent-soft: #e8eef4;    /* quiet selected / tint fill */
    --accent-border: #242c34;  /* primary CTA border */
    --focus-ring: rgba(64,86,110,.22);
    --blue: #40566e;           /* legacy alias → platinum accent */
    /* Obsidian primary-button gradient (brandPremium) */
    --grad-premium: linear-gradient(135deg,#344150,#171d24);
    --grad-premium-hover: linear-gradient(135deg,#3c4a5b,#1d242d);
    /* AI / feature highlight — the ONE bright cool accent, reserved for the assistant */
    --ai: #2563eb;
    --grad-ai: linear-gradient(135deg,#2563eb,#4f46e5);
    /* Semantic status (cool, muted) — text tokens flip lighter in dark; *-fill stay dark for white text */
    --red: #b42318;    --red-fill: #b42318;
    --green: #237449;  --green-fill: #237449;
    --orange: #b54708; --orange-fill: #b54708;
    --record: #d13b31;         /* recording carmine (constant) */
    /* Status surfaces — opaque, AA-tuned (mirror iOS status*Surface) */
    --status-error-surface: #fbe9e7; --status-warning-surface: #fff0e6; --status-success-surface: #e5f2e9;
    --purple: #4f46e5; --indigo: #4f46e5; --teal: #40566e; --pink: #c9342f; --yellow: #b54708;
    --font: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --mono: ui-monospace,'SF Mono','SFMono-Regular',Menlo,monospace;
    --r: 16px;                 /* card radius (iOS 16) */
    --r-btn: 14px;             /* button radius (iOS 14) */
    --rl: 20px;
    --rxl: 22px;
    --max: 1100px;
    --ease: cubic-bezier(.4,0,.2,1);
    --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.05);
    --shadow-md: 0 8px 30px rgba(16,24,40,.08);
    --shadow-lg: 0 24px 60px rgba(16,24,40,.16);
}

[data-theme="dark"] {
    --white: #181d23;
    --bg: #0f1318;
    --card: #181d23;
    --elevated: #212830;
    --border: #353f4a;
    --control-border: #778899;
    --text: #f4f5f6;
    --text2: #b7c1cb;
    --text3: #95a4b3;
    --seg: #12181e;
    --header-bg: rgba(15,19,24,.82);
    --accent: #afc3d6;
    --accent-fill: #35404c;
    --accent-soft: #293542;
    --accent-border: #8b9daf;
    --focus-ring: rgba(175,195,214,.28);
    --blue: #afc3d6;
    --grad-premium: linear-gradient(135deg,#4a5b6c,#303b46);
    --grad-premium-hover: linear-gradient(135deg,#546578,#374350);
    --ai: #3b6edc;
    --grad-ai: linear-gradient(135deg,#2d64dc,#4f46d2);
    --red: #ff9a90;    --red-fill: #b42318;
    --green: #65c98c;  --green-fill: #237449;
    --orange: #ff9f0a; --orange-fill: #b54708;
    --record: #d13b31;
    --status-error-surface: #351f20; --status-warning-surface: #3a2415; --status-success-surface: #193025;
    --purple: #4f46d2; --indigo: #4f46d2; --teal: #afc3d6; --pink: #ff8f87; --yellow: #ff9f0a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.42);
    --shadow-md: 0 8px 30px rgba(0,0,0,.5);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.7);
}

/* ===== Reset ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background .3s var(--ease), color .3s var(--ease);
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font-family: inherit; border: none; background: none; outline: none; color: inherit; }
button { cursor: pointer; }
input, textarea, select { color: var(--text); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 28px; width: 100%; }
.hidden { display: none !important; }

/* Shared editorial eyebrow/label — monospace, uppercase, tracked. */
.eyebrow {
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text2);
}

/* ===== Шапка ===== */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border);
    transition: transform .3s var(--ease);
}
.app-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 62px;
}
.app-logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.app-logo .logo-mark { width: 30px; height: 30px; }
.app-logo span { font-weight: 800; font-size: 1rem; letter-spacing: -.02em; }

.app-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: auto;
    font-family: var(--mono);
}
.app-nav a {
    color: var(--text2);
    font-size: .74rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: color .2s;
}
.app-nav a:hover, .app-nav a.active { color: var(--text); }

.app-controls { display: flex; align-items: center; gap: 8px; margin-left: 8px; }

.icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    color: var(--text);
    padding: 0;
    font-size: .95rem;
}
.icon-btn:hover { border-color: var(--text); }

.lang-btn {
    background: transparent;
    border: 1px solid var(--border);
    padding: 7px 12px;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text);
    font-family: var(--mono);
    transition: .2s;
}
.lang-btn:hover { border-color: var(--text); }

/* Бургер и мобильное меню */
.burger { display: none; flex-direction: column; gap: 5px; padding: 6px; margin-left: 2px; }
.burger span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: .3s; }
.burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-nav {
    display: none;
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    z-index: 99;
    padding: 18px 28px;
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 16px;
    font-family: var(--mono);
}
.mobile-nav.open { display: flex; }
.mobile-nav a { font-size: .8rem; font-weight: 500; color: var(--text); text-transform: uppercase; letter-spacing: .05em; }

/* ===== Кнопки ===== */
.btn {
    padding: 15px 24px;
    border-radius: var(--r-btn);
    font-size: .96rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all .2s var(--ease);
}
.btn-sm {
    padding: 8px 16px;
    border-radius: 9px;
    font-size: .76rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all .2s var(--ease);
}
.btn-primary {
    position: relative;
    overflow: hidden;
    background: var(--grad-premium);
    color: #fff;
    border: 1px solid var(--accent-border);
}
.btn-primary:hover { background: var(--grad-premium-hover); transform: translateY(-1px); }
.btn-sm.btn-primary:hover { transform: none; }
.btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--text); transform: translateY(-1px); }
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 15px 8px;
    color: var(--accent);
    font-size: .96rem;
    font-weight: 600;
    transition: gap .2s var(--ease);
}
.btn-link:hover { gap: 10px; }

/* ===== Подвал ===== */
.app-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding: 44px 0 40px;
}
.app-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.app-footer-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.02em; }
.app-footer-brand .logo-mark { width: 24px; height: 24px; }
.app-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; font-family: var(--mono); }
.app-footer-links a {
    color: var(--text2);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: color .2s;
}
.app-footer-links a:hover { color: var(--text); }
.app-footer-copy { color: var(--text3); font-size: .8rem; }
/* Реквизиты не переводятся ни на один язык: регистрационные данные одинаковы
   во всех юрисдикциях, а перевод названия ИП делает его неидентифицируемым. */
.app-footer-legal { color: var(--text3); font-family: var(--mono); font-size: .68rem; line-height: 1.6; }

@media (max-width: 860px) {
    .app-nav { display: none; }
    .burger { display: flex; }
    .app-controls { margin-left: auto; }
}
@media (max-width: 600px) {
    .container { padding: 0 20px; }
    .mobile-nav { padding: 18px 20px; }
}

/* ===== Знак ===== */
/* Знак вклеен в разметку инлайном, а не картинкой: так он перекрашивается
   вместе с темой одной переменной, вместо второго файла logo-mark-dark. */
:root { --logo-bg: #242c34; --logo-fg: #ffffff; }
[data-theme="dark"] { --logo-bg: #dfe8f1; --logo-fg: #12171d; }
.logo-mark { display: block; flex: none; }
.logo-mark .logo-plate { fill: var(--logo-bg); }
.logo-mark .logo-glyph { fill: none; stroke: var(--logo-fg); }
.logo-mark .logo-tail { fill: var(--logo-fg); }