/*
 * НашеТСН / НашеСНТ — слой «дорого и богато».
 * Подключается после theme.css и public.css. Меняет только оформление, смыслов и контраста не трогает.
 *
 * Идея: глубокий изумруд бренда + шампань-золото как редкая деталь, тёплая слоновая кость вместо серого,
 * сериф для заголовков и крупных цифр, многослойные мягкие тени вместо плоских рамок.
 * Золото используется для линий, меток и иконок; текст золотом только тёмным тоном (контраст 5:1).
 */
:root {
    --gold-300: #e3cb94;
    --gold-400: #d3b36b;
    --gold-500: #b8893a;
    --gold-700: #8a5f12;     /* текст на светлом, 5.4:1 на слоновой кости */
    --ivory: #faf8f3;
    --ivory-2: #f3efe5;
    --emerald-950: #08261c;
    --emerald-900: #0c3326;
    --emerald-800: #114534;
    --font-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;

    --canvas: var(--ivory);
    --surface-2: #fbfaf6;
    --line: #ebe6d9;
    --line-strong: #dcd5c3;
    --shadow-1: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 1px 2px rgba(23, 33, 28, .05), 0 8px 24px -14px rgba(12, 51, 38, .22);
    --shadow-2: 0 2px 4px rgba(23, 33, 28, .05), 0 18px 40px -16px rgba(12, 51, 38, .28);
    --app-bg: var(--ivory);
}

/* ——— Типографика ——— */
.app-body h1, .app-body .h1 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.95rem;
    letter-spacing: -.01em;
    line-height: 1.15;
}
.app-body h1::after, .app-body .app-content > .h3::after {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    margin-top: 10px;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
    border-radius: 2px;
}
.app-body .app-page-heading strong { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0; }
.app-body .kpi__value, .app-body .display-6, .app-body .stat-card .value {
    font-family: var(--font-serif);
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -.01em;
}
.app-body .card-header h2, .app-body .card-header .h5, .app-body section > h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0; }

/* ——— Боковая панель: тёмный изумруд с золотой меткой ——— */
.app-body .app-sidebar {
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(211, 179, 107, .10), transparent 55%),
        linear-gradient(180deg, var(--emerald-900) 0%, var(--emerald-950) 100%);
    box-shadow: 1px 0 0 rgba(211, 179, 107, .22);
}
.app-body .app-sidebar-brand { border-bottom: 1px solid rgba(211, 179, 107, .18); }
.app-body .app-brand-mark {
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 1px rgba(211, 179, 107, .55), 0 6px 16px rgba(0, 0, 0, .25);
}
.app-body .app-brand-copy strong { font-family: var(--font-serif); font-weight: 600; letter-spacing: .01em; }
.app-body .app-nav-group-label, .app-body .app-nav-section-toggle small { color: var(--gold-400); letter-spacing: .12em; }
.app-body .app-nav-link { border-radius: 10px; transition: background-color .18s var(--ease-out), color .18s var(--ease-out); }
.app-body .app-nav-link:hover, .app-body .app-nav-link:focus { background: rgba(255, 255, 255, .07); color: #fff; }
.app-body .app-nav-item.is-active .app-nav-link {
    background: var(--ivory);
    color: var(--emerald-900);
    box-shadow: inset 3px 0 0 var(--gold-500), 0 6px 16px -8px rgba(0, 0, 0, .55);
}
.app-body .app-nav-item.is-active .app-nav-item-icon { color: var(--gold-700); }
.app-body .app-sidebar-footer { border-top: 1px solid rgba(211, 179, 107, .18); }
.app-body .app-user-avatar { background: var(--gold-400); color: var(--emerald-950); font-family: var(--font-serif); font-weight: 700; }

/* ——— Верхняя панель ——— */
.app-body .app-topbar {
    background: rgba(250, 248, 243, .86);
    border-bottom: 0;
    box-shadow: 0 1px 0 rgba(23, 33, 28, .06), 0 10px 24px -22px rgba(12, 51, 38, .5);
    position: relative;
}
.app-body .app-topbar::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 137, 58, .55) 20%, rgba(184, 137, 58, .55) 80%, transparent);
    pointer-events: none;
}
.app-body .app-topbar-action, .app-body .app-mobile-menu-button, .app-body .app-quick-search__input {
    background: #fff; border-color: var(--line-strong);
    box-shadow: 0 1px 2px rgba(23, 33, 28, .04);
}
.app-body .app-quick-search__input:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(184, 137, 58, .22); }

/* ——— Карточки и показатели ——— */
.app-body .card, .app-body .kpi {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-1);
}
.app-body .kpi { position: relative; overflow: hidden; }
.app-body .kpi::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
    opacity: .85;
}
.app-body .kpi:hover, .app-body .kpi:focus-visible { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.app-body .kpi__head i { color: var(--gold-700); opacity: 1; }
.app-body .card-header { background: linear-gradient(180deg, #fff, var(--surface-2)); border-bottom-color: var(--line); border-radius: 16px 16px 0 0; }
.app-body .card-footer { background: var(--surface-2); }

/* ——— Кнопки ——— */
.app-body .btn-primary, .app-body .btn-success {
    background: linear-gradient(180deg, #1f8a5e 0%, #176b49 100%);
    border-color: #135a3d;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(8, 38, 28, .35), 0 8px 18px -10px rgba(12, 51, 38, .7);
}
.app-body .btn-primary:hover, .app-body .btn-success:hover, .app-body .btn-primary:focus, .app-body .btn-success:focus {
    background: linear-gradient(180deg, #1a7a53 0%, #125a3d 100%);
    border-color: #0f4d34;
}
.app-body .btn-outline-primary, .app-body .btn-outline-secondary, .app-body .btn-light {
    border-color: var(--line-strong);
    background: linear-gradient(180deg, #fff, var(--surface-2));
    box-shadow: 0 1px 2px rgba(23, 33, 28, .05);
}
.app-body .btn-outline-primary:hover, .app-body .btn-outline-secondary:hover, .app-body .btn-light:hover { border-color: var(--gold-500); background: #fff; }
.app-body .btn:focus-visible { box-shadow: 0 0 0 3px rgba(184, 137, 58, .35); }

/* ——— Таблицы ——— */
.app-body .table thead th, .app-body .table > thead > tr > th {
    background: var(--ivory-2);
    color: #5a5547;
    border-bottom: 1px solid var(--gold-400);
    font-weight: 650;
}
.app-body .table tbody tr { transition: background-color .15s var(--ease-out); }
.app-body .table-hover > tbody > tr:hover > *, .app-body .table tbody tr:hover > * { background-color: #fbf8ee; }
.app-body .table > :not(caption) > * > * { border-bottom-color: #f0ebdd; }
.app-body .table .filters td { background: #fff; }

/* ——— Вкладки, поля, уведомления ——— */
.app-body .nav-pills .nav-link.active {
    background: linear-gradient(180deg, #1f8a5e, #176b49);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 14px -8px rgba(12, 51, 38, .7);
}
.app-body .form-control:focus, .app-body .form-select:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(184, 137, 58, .22); }
.app-body .alert { border-radius: 14px; box-shadow: 0 1px 2px rgba(23, 33, 28, .04); }
.app-body .badge:not(.position-absolute) { box-shadow: inset 0 0 0 1px rgba(23, 33, 28, .05); }
.app-body .breadcrumb-item + .breadcrumb-item::before { color: var(--gold-500); }
.app-body ::selection { background: var(--gold-300); color: var(--emerald-950); }

/* ——— Подвал внутреннего интерфейса и мобильная навигация ——— */
.app-body .app-footer { border-top: 1px solid var(--line); }
.app-body .app-mobile-bottom-nav {
    background: rgba(250, 248, 243, .94);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 -1px 0 rgba(184, 137, 58, .35), 0 -12px 30px -20px rgba(12, 51, 38, .5);
}
.app-body .app-mobile-bottom-link.is-active { color: var(--emerald-900); }

/* ——— Публичные страницы ——— */
body.public-body { background: var(--ivory); }
body.public-body h1, body.public-body .hero__title { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.02em; }
body.public-body h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em; }
body.public-body .hero__title span { color: var(--gold-700); font-style: italic; }
body.public-body .hero {
    background:
        radial-gradient(60% 50% at 82% 8%, rgba(211, 179, 107, .16), transparent 70%),
        radial-gradient(70% 60% at 8% 0%, rgba(17, 69, 52, .10), transparent 70%),
        var(--ivory);
}
body.public-body .public-header {
    background: rgba(250, 248, 243, .88);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 0;
    box-shadow: 0 1px 0 rgba(23, 33, 28, .06), 0 10px 26px -24px rgba(12, 51, 38, .55);
}
body.public-body .section-kicker { color: var(--gold-700); letter-spacing: .16em; }
body.public-body .section-kicker::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--gold-500); vertical-align: middle; margin-right: 10px; }
body.public-body .feature-card, body.public-body .pricing-card:not(.pricing-card--featured), body.public-body .auth-card {
    background: #fff; border-color: var(--line); box-shadow: var(--shadow-1);
}
body.public-body .feature-card:hover { box-shadow: var(--shadow-2); border-color: var(--gold-400); }
body.public-body .pricing-card--featured {
    background: radial-gradient(120% 70% at 100% 0%, rgba(211, 179, 107, .22), transparent 60%), linear-gradient(160deg, var(--emerald-800), var(--emerald-950));
    box-shadow: 0 30px 70px -28px rgba(8, 38, 28, .75), 0 0 0 1px rgba(211, 179, 107, .45);
}
body.public-body .button--primary {
    background: linear-gradient(180deg, #1f8a5e 0%, #176b49 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px -12px rgba(12, 51, 38, .75);
}
body.public-body .button--primary:hover { background: linear-gradient(180deg, #1a7a53, #125a3d); }
body.public-body .button--ghost { background: linear-gradient(180deg, #fff, var(--surface-2)); border-color: var(--line-strong); }
body.public-body .button--ghost:hover { border-color: var(--gold-500); }
body.public-body .public-footer { background: radial-gradient(90% 80% at 85% 0%, rgba(211, 179, 107, .08), transparent 60%), var(--emerald-950); }
body.public-body .public-footer h2 { font-family: var(--font-serif); color: var(--gold-300); letter-spacing: .01em; }
body.public-body .public-footer__other { border-top-color: rgba(211, 179, 107, .25); }
body.public-body .proof-strip { background: var(--ivory-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
    .app-body .kpi:hover, .app-body .kpi:focus-visible { transform: none; }
}

/* Playfair шире Inter: заголовок героя на ПК делаем компактнее, иначе он занимает пять строк */
body.public-body .hero__title { font-size: clamp(38px, 4.3vw, 60px); line-height: 1.1; }
body.public-body .section-heading h1, body.public-body .section-heading h2 { line-height: 1.15; }
@media (max-width: 575px) { body.public-body .hero__title { font-size: clamp(34px, 10vw, 46px); } }