/* SoulMates Web — спокойный серебряно-синий слой после сверки с Android. */

:root {
    --ice-white: #f5fbff;
    --ice: #dceeff;
    --ice-blue: #a9dcff;
    --active-blue: #5aa8ff;
    --deep-blue: #071b36;
    --glass: rgba(7, 28, 57, .84);
    --glass-high: rgba(12, 43, 80, .90);
    --soft-line: rgba(184, 224, 255, .24);
}

/* Переключатель летящего тупика всегда живёт в свободном верхнем углу,
   отдельно от нижних панелей и контента. */
.flight-toggle { top:14px !important; right:14px !important; bottom:auto !important; left:auto !important; z-index:20 !important; }

body {
    font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-weight: 430;
    letter-spacing: .002em;
}

/* Спокойная основа Web: море остаётся читаемым, а контент получает мягкую
   затемняющую вуаль. Картинка и декоративный слой независимы — их можно
   менять без перестройки экранов. */
#app {
    background-color: #031126;
    background-image:
        linear-gradient(180deg, rgba(2, 10, 28, .28) 0%, rgba(2, 16, 43, .16) 46%, rgba(2, 10, 24, .50) 100%),
        url("../img/background-web-ocean-2026.png");
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

input, textarea, select {
    color: var(--ice-white);
    background: rgba(7, 29, 59, .86);
    border: 1px solid rgba(174, 220, 250, .28);
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 14px rgba(0,8,28,.12);
}
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(119,205,255,.55); outline-offset:1px; }
.screen-center .card { width:min(100%,470px); padding:clamp(24px,4vw,38px); }
.screen-center form { display:grid; gap:14px; }
.screen-center .field { margin:0; }
.consent { display:flex; align-items:flex-start; gap:10px; line-height:1.4; }
.consent input[type="checkbox"] { width:20px; height:20px; min-height:20px; margin:2px 0 0; flex:0 0 20px; accent-color:#65caff; }

h1, h2, h3, strong, .button, .nav-title {
    font-family: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

h1, h2, h3 { font-weight: 650; letter-spacing: -.025em; }

#app::before {
    background:
        radial-gradient(ellipse at 52% -4%, rgba(104, 198, 255, .08), transparent 42%),
        radial-gradient(circle at 90% 20%, rgba(112, 152, 255, .07), transparent 24%),
        radial-gradient(ellipse at 50% 83%, rgba(45, 155, 218, .08), transparent 34%),
        linear-gradient(180deg, rgba(1, 9, 24, .08), rgba(2, 15, 35, .24) 60%, rgba(1, 9, 24, .52));
}

#app::after {
    inset: 0;
    width: 100vw;
    height: 100vh;
    left: 0;
    transform: none;
    opacity: .12;
    filter: saturate(.35) brightness(.72);
    background-image: url('../img/interest-constellation-2026.png');
    background-size: min(1200px, 88vw) auto;
    background-position: center 8%;
    background-repeat: no-repeat;
}

.glass-panel,
.card,
.card-blue {
    border-color: var(--soft-line);
    background: linear-gradient(155deg, rgba(13, 47, 87, .91), rgba(5, 24, 51, .91));
    box-shadow: 0 22px 60px rgba(0, 8, 28, .29), inset 0 1px 0 rgba(255,255,255,.07);
}

.button:not(.button-quiet),
.header-secondary-action,
.toolbar-filter-button {
    color: #06152c;
    background: linear-gradient(145deg, #f7fcff 0%, #dceeff 48%, #9dd6ff 100%);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow:
        0 9px 22px rgba(0, 8, 28, .34),
        0 2px 0 rgba(41, 91, 139, .58),
        inset 0 1px 0 #fff,
        inset 0 -1px 0 rgba(54, 112, 163, .24);
    text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

.button:not(.button-quiet):hover:not(:disabled),
.header-secondary-action:hover,
.toolbar-filter-button:hover {
    filter: brightness(1.04);
    box-shadow:
        0 14px 30px rgba(0, 10, 35, .42),
        0 3px 0 rgba(41, 91, 139, .58),
        inset 0 1px 0 #fff;
}

/* На синем hover-фоне главный CTA должен оставаться контрастным. */
.landing-actions .button:first-child:hover:not(:disabled) {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 12, 36, .55);
}
.button:not(.button-quiet):hover:not(:disabled),
.header-secondary-action:hover,
.toolbar-filter-button:hover {
    color:#fff !important;
    text-shadow:0 1px 2px rgba(0,12,36,.55);
}

.button:not(.button-quiet):active:not(:disabled),
.header-secondary-action:active,
.toolbar-filter-button:active {
    transform: translateY(2px) scale(.995);
    box-shadow: 0 4px 11px rgba(0, 8, 28, .32), inset 0 2px 4px rgba(53, 102, 148, .20);
}

.button-accent,
.like-button {
    color: #06152c !important;
    background: linear-gradient(145deg, #fff, #dceeff 45%, #91ccff) !important;
    border-color: rgba(255,255,255,.8) !important;
}

.button-quiet {
    color: var(--ice) !important;
    border: 1px solid rgba(176, 217, 249, .18);
    background: rgba(7, 31, 62, .55);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 5px 14px rgba(0,8,28,.16);
}

.button-quiet:hover { color: #fff !important; border-color: rgba(188, 229, 255, .38); background: rgba(20, 67, 115, .62); }

.nav {
    background: linear-gradient(180deg, rgba(5, 25, 52, .94), rgba(4, 19, 42, .91));
    border-color: rgba(166, 218, 255, .20);
}

.sidebar-brand { padding: 8px 10px 20px; cursor: default; pointer-events: none; }
.sidebar-brand-copy strong { font-size: 24px; font-weight: 660; color: var(--ice-white); }
.sidebar-brand-copy small { color: rgba(202, 226, 244, .66); }
.sidebar-note { color: rgba(202, 226, 244, .56); line-height: 1.4; }

.nav-item-active {
    background: linear-gradient(100deg, rgba(90, 168, 255, .24), rgba(115, 210, 255, .08));
    border-color: rgba(162, 218, 255, .29);
}

.nav-item-support,
.nav-item-support:hover,
.nav-item-support.nav-item-active {
    color: var(--ice);
    background: rgba(87, 164, 224, .08);
    border-color: rgba(162, 218, 255, .15);
}

.nav-item-support .nav-mark,
.nav-mark svg .accent,
.ui-icon svg .accent,
.section-visual-icon svg .accent,
.settings-row-icon svg .accent,
.settings-group-icon svg .accent,
.advanced-filter-icon svg .accent { color: var(--ice-blue); stroke: var(--ice-blue); }

/* Keep every inline icon readable on the night palette. The SVGs are
   intentionally line-based; without an explicit currentColor stroke the
   browser falls back to black (most visible in the About cards). */
.ui-icon svg,
.about-feature-icon svg,
.section-visual-icon svg,
.support-intro-icon svg,
.commerce-header-icon svg,
.lundir-pack-icon svg,
.settings-row-icon svg,
.settings-group-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ui-icon svg .fill { fill:currentColor; stroke:none; }

/* Подписка и лундиры: в Web это самостоятельные страницы вместо
   тесного Android-переключателя. Обе держат одну ширину и ритм. */
.commerce-page { width:min(1040px,100%); margin:0 auto; padding:34px 30px 70px; display:grid; gap:18px; }
.commerce-header { display:grid; grid-template-columns:minmax(0,1fr) 78px; align-items:center; gap:24px; padding:28px; border-radius:28px; }
.commerce-header h1 { margin:6px 0 10px; font-size:clamp(32px,4vw,48px); }
.commerce-header p { max-width:760px; margin:0; color:var(--ink-muted); line-height:1.58; }
.commerce-header-icon { width:72px; height:72px; color:var(--ice-blue); padding:16px; border:1px solid rgba(142,211,255,.28); border-radius:24px; background:rgba(61,159,232,.12); }
.commerce-offer { padding:26px; display:grid; justify-items:center; gap:14px; border-radius:28px; }
.slot-comparison { display:flex; justify-content:center; align-items:center; gap:24px; }
.slot-count { width:112px; aspect-ratio:1; display:grid; place-items:center; align-content:center; gap:2px; border:1px solid rgba(156,211,250,.25); border-radius:50%; background:rgba(135,185,225,.1); }
.slot-count strong { font-size:38px; line-height:1; }
.slot-count span { color:var(--ink-muted); }
.slot-count-accent { background:linear-gradient(145deg,rgba(90,176,241,.32),rgba(29,100,177,.22)); border-color:rgba(149,220,255,.55); box-shadow:0 12px 30px rgba(0,15,45,.24),inset 0 1px 0 rgba(255,255,255,.12); }
.slot-arrow { color:var(--ice-blue); font-size:32px; }
.commerce-center,.commerce-until,.commerce-status { margin:0; text-align:center; }
.commerce-main-action { width:min(440px,100%); }
.commerce-status { min-height:1.4em; color:var(--ink-muted); }
.commerce-reading { padding:26px; color:var(--ink); border-radius:28px; }
.commerce-reading h2 { margin:0 0 12px; }
.commerce-reading p { margin:10px 0 0; line-height:1.58; }
.lundir-pack-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.lundir-pack { min-height:220px; padding:22px; display:flex; flex-direction:column; align-items:flex-start; border-radius:24px; }
.lundir-pack-icon { width:52px; height:52px; padding:11px; color:var(--ice-blue); border:1px solid rgba(151,216,255,.3); border-radius:18px; background:rgba(61,159,232,.12); }
.lundir-pack-copy { flex:1; margin:16px 0; }
.lundir-pack-copy h3,.lundir-pack-copy p { margin:0; }
.lundir-pack-copy p { margin-top:5px; color:var(--ink-muted); }
.lundir-pack .button { width:100%; }

/* Подсказка появляется только там, где есть мышь. */
@media (hover:hover) and (pointer:fine) {
    [title] { position: relative; }
    .nav-item:hover .nav-title { color: #fff; }
    .icon-button:hover { border-color: rgba(190, 228, 255, .38); background: rgba(27, 76, 125, .72); }
}

@media (max-width:800px) {
    .commerce-page { padding:18px 12px 96px; }
    .commerce-header { grid-template-columns:minmax(0,1fr) 54px; gap:12px; padding:20px; }
    .commerce-header-icon { width:52px; height:52px; padding:11px; border-radius:17px; }
    .lundir-pack-grid { grid-template-columns:1fr; }
    .lundir-pack { min-height:0; display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:0 14px; }
    .lundir-pack-icon { width:48px; height:48px; grid-row:1; }
    .lundir-pack-copy { margin:0; }
    .lundir-pack .button { grid-column:1 / -1; margin-top:14px; }
}

/* Стартовая без логотипа и без пустого экрана на мониторе. */
.landing { min-height: 100dvh; height: auto; overflow-y: auto; }
.landing-brand-mark { width:148px; height:148px; object-fit:contain; margin:0 0 4px; filter:drop-shadow(0 14px 24px rgba(0,8,28,.38)); animation: brand-breathe 5s ease-in-out infinite; }
@keyframes brand-breathe { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-5px) rotate(1deg); } }
.landing-story { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; width:min(1180px,calc(100% - 48px)); min-height:0 !important; margin:0 auto; padding:42px 0; }
.landing-story-copy { min-height:230px; padding:24px; border:1px solid rgba(151,216,255,.3); border-radius:24px; background:linear-gradient(145deg,rgba(28,78,124,.86),rgba(7,30,61,.92)); box-shadow:0 18px 42px rgba(0,8,28,.22),inset 0 1px 0 rgba(255,255,255,.06); }
.landing-story-copy h2 { margin:8px 0 10px; font-size:22px; }
.landing-story-copy p { margin:0; color:var(--ink-muted); line-height:1.58; }
.landing-hero h1 { font-size: clamp(48px, 8vw, 82px); font-weight: 660; }
.landing-lead { max-width: 540px; font-size: clamp(18px, 2vw, 23px); line-height: 1.45; }
.landing-scroll-hint { font-size: 13px; letter-spacing: .04em; }
.landing-points { grid-auto-rows: 1fr; }
.landing-points .card { min-height: 174px; height:100%; }

@media (min-width: 900px) {
    .landing {
        display: grid;
        grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr);
        grid-template-areas: "hero points" "story story" "foot foot";
        align-items: center;
        gap: 22px 60px;
        width: min(1260px, calc(100% - 96px));
        margin: 0 auto;
        padding: 54px 0;
    }
    .landing section { width: 100%; min-height: auto; padding: 0; }
    .landing .landing-hero { grid-area: hero; min-height: auto; align-items: flex-start; text-align: left; }
    .landing-brand-mark { width:148px; height:148px; }
    .landing-actions { align-items: stretch; margin-left: 0; }
    .landing-points { grid-area: points; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-story { grid-area: story; }
    .landing-foot { grid-area: foot; display: grid; grid-template-columns: auto minmax(300px, 1fr) 280px; gap: 18px 28px; align-items: center; max-width: none !important; padding-top: 26px !important; border-top: 1px solid rgba(188, 225, 255, .14); text-align: left; }
    .landing-foot h2, .landing-foot p { margin: 0; }
    .landing-foot .button { margin-top: 0 !important; }
    .landing-links { grid-column: 1 / -1; margin-top: 0; }
}

.button-link { display:block; margin:2px auto 0; padding:4px 8px; color:var(--ice-blue); background:none; border:0; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.button-link:hover { color:#fff; }
.password-field { position:relative; }
.password-field input { width:100%; padding-right:50px; }
.password-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:36px; height:36px; color:var(--ice-blue); border:0; border-radius:10px; background:transparent; cursor:pointer; }
.password-toggle:hover { background:rgba(120,190,240,.13); }
.password-toggle .ui-icon { width:20px; height:20px; }

@media (min-width: 1240px) {
    .toolbar-filter-button { display:none; }
    .discover-layout { align-items:stretch; }
    .discover-layout > * { height:100%; }
}

.hub-page { width:min(100%,1320px); overflow:visible; }
.hub-header h1 { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.hub-page .pane-body { align-items:stretch; }
.candidate-media-stage {
    /* The Android card grows only into the space left by the screen.
       Web needs the same cap; a portrait must not push the actions below
       the viewport or be clipped by an oversized 3:4 box. */
    aspect-ratio:auto;
    height:min(560px, max(320px, calc(100dvh - 500px)));
}
.candidate-main-photo {
    display:block;
    position:relative;
    inset:auto;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:100% !important;
    object-fit:contain !important;
}
.candidate-main-photo-frame {
    position:absolute;
    inset:0;
    z-index:1;
    display:grid;
    place-items:center;
    overflow:hidden;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
}
.candidate-main-photo-frame .candidate-main-photo {
    width:auto !important;
    height:100% !important;
    max-width:100% !important;
    max-height:none !important;
    opacity:1;
}
.candidate-photo-loading {
    position:absolute;
    z-index:7;
    inset:0;
    display:grid;
    place-items:center;
    color:rgba(211,232,247,.82);
    font-size:13px;
    letter-spacing:.01em;
    background:linear-gradient(110deg, rgba(5,24,51,.86), rgba(20,58,89,.62), rgba(5,24,51,.86));
    background-size:200% 100%;
    animation:photo-preparing 1.6s ease-in-out infinite;
    pointer-events:none;
}
@keyframes photo-preparing {
    0%,100% { background-position:100% 0; }
    50% { background-position:0 0; }
}
@media (min-width: 900px) {
    /* Android's card fills the space left by the header and actions. In Web
       the same idea is capped by the viewport so the profile never runs
       underneath the bottom edge of the page. */
    .candidate-media-stage { height:min(560px, max(360px, calc(100dvh - 470px))); }
    .candidate-thumbnails { display:none; }
}

@media (min-width: 801px) {
    .candidate-thumbnails { display:none; }
}

.candidate-photo-blur { filter:blur(30px) saturate(70%) brightness(.56); opacity:.62; }

/* Афиша повторяет Android: три равные быстрые даты и отдельный
   календарь. Длинная подпись «Свой период» больше не ломает симметрию. */
.event-periods {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(48px, .55fr);
    width:min(560px, 100%);
    gap:8px;
}
.event-periods .chip {
    justify-content:center;
    min-width:0;
    border-radius:15px;
}
.period-calendar-button { padding:7px; color:var(--ice-blue); }
.period-calendar-icon { display:grid; place-items:center; width:20px; height:20px; }
.period-calendar-icon svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }

/* В карточке события действие «убрать» не выглядит вторым CTA: это
   компактный крестик рядом с основным действием. Жалоба тоже читается
   как иконка, но получает название при наведении и для скринридера. */
.event-action-button,
.event-report-button { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; padding:8px; }
.event-action-icon { display:grid; place-items:center; width:19px; height:19px; }
.event-action-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.event-cover-frame { position:relative; }
.event-cover-frame .event-cover { margin:0; }
.event-corner-button { position:absolute; z-index:2; top:12px; color:var(--ice); border-color:rgba(220,242,255,.28); background:rgba(3,20,42,.74); backdrop-filter:blur(9px); }
.event-corner-button:hover { color:#fff; border-color:rgba(209,239,255,.65); background:rgba(13,52,88,.90); }
.event-corner-left { left:12px; }
.event-corner-right { right:12px; }
.event-report-button { color:var(--ice-blue); }
.event-actions { align-items:center; }
.event-owner-details { display:grid; gap:6px; }
.event-section { grid-column:1 / -1; padding:20px; border-radius:26px; background:linear-gradient(145deg,rgba(19,59,99,.82),rgba(5,25,53,.9)); border-color:rgba(126,202,247,.28); }
.event-section-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid rgba(139,205,245,.18); }
.event-section-heading h2 { margin:0; font-size:23px; }
.event-section-heading p { max-width:560px; margin:0; color:var(--ink-muted); text-align:right; line-height:1.45; }
.event-section-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:stretch; }
.event-section-grid > .event { display:flex; flex-direction:column; height:100%; margin:0; background:linear-gradient(155deg,rgba(23,67,111,.88),rgba(7,30,61,.96)); border-color:rgba(136,207,250,.25); }
.event-section-grid > .event .event-body { flex:1; }
.event-section-grid > .button { align-self:end; min-height:52px; }

/* Жалоба — один читаемый сценарий на анкете, фото, сообщении и
   мероприятии. Нативные radio здесь не годятся: глобальный стиль полей
   делает их шириной во всю форму и разрывает подпись с контролом. */
.report-sheet-body { gap:14px; }
.report-sheet-heading { display:flex; align-items:flex-start; gap:12px; }
.report-sheet-heading h3 { margin:1px 0 4px; }
.report-sheet-heading .muted { margin:0; }
.report-sheet-icon { display:grid; place-items:center; width:40px; height:40px; padding:9px; flex:none; color:var(--ice-blue); border:1px solid rgba(163,222,255,.23); border-radius:13px; background:rgba(55,132,205,.18); }
.report-sheet-icon svg,.safety-mark-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.report-sheet-prompt { margin:0; color:var(--ink-muted); font-size:14px; line-height:1.45; }
.report-reasons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.report-reason { display:grid; grid-template-columns:18px minmax(0,1fr); align-items:center; gap:9px; min-height:54px; margin:0; padding:10px 11px; color:var(--ice); border:1px solid rgba(161,215,249,.16); border-radius:14px; background:rgba(3,23,50,.48); cursor:pointer; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.report-reason:hover { border-color:rgba(177,228,255,.38); background:rgba(25,76,126,.54); }
.report-reason input { position:absolute; width:1px; height:1px; padding:0; opacity:0; pointer-events:none; }
.report-reason-dot { width:16px; height:16px; box-sizing:border-box; border:2px solid rgba(202,231,250,.56); border-radius:50%; background:rgba(3,16,36,.72); }
.report-reason input:checked + .report-reason-dot { border-color:#eefdff; background:radial-gradient(circle, #dff6ff 0 36%, #55bfff 42% 62%, transparent 68%); box-shadow:0 0 0 3px rgba(86,193,255,.20); }
.report-reason:has(input:checked) { border-color:rgba(119,207,255,.70); background:linear-gradient(115deg, rgba(35,119,196,.56), rgba(9,48,91,.58)); box-shadow:inset 0 1px 0 rgba(255,255,255,.09); }
.report-reason-title { font-size:14px; font-weight:590; line-height:1.25; }
.report-comment-label { margin:2px 0 -7px; color:var(--ice); font-size:12px; font-weight:650; }
.report-comment { min-height:90px; resize:vertical; }
.safety-mark { display:grid; place-items:center; }
.safety-mark-icon { display:grid; place-items:center; width:18px; height:18px; }

@media (max-width: 560px) {
    .report-reasons { grid-template-columns:1fr; }
}

/* Заголовок группы — самостоятельная плашка, а не ещё одна строка
   настройки. Пункты ниже отделены фоном и имеют одинаковый ритм. */
.settings-group { padding:12px; overflow:hidden; }
.settings-group-heading {
    margin:0 0 9px;
    padding:11px 12px;
    border:1px solid rgba(151, 215, 250, .19);
    border-bottom-color:rgba(151, 215, 250, .30);
    border-radius:15px;
    background:linear-gradient(105deg, rgba(55, 133, 209, .27), rgba(15, 51, 94, .50));
}
.settings-group-icon { width:35px; height:35px; padding:8px; color:#d4efff; background:rgba(101, 184, 246, .20); border-color:rgba(183, 231, 255, .23); }
.settings-group-title { color:#d6f1ff; font-size:11px; font-weight:760; letter-spacing:.11em; text-transform:uppercase; }
.settings-row,.settings-toggle-row { margin-top:7px; padding:10px 11px; border-color:rgba(149, 207, 242, .10); background:rgba(3, 22, 48, .36); }
.settings-row-title { font-size:13px; }
.settings-row .hint,.settings-toggle-row .hint { font-size:10.5px; }

@media (max-width: 1040px) {
    .discover-toolbar {
        grid-template-columns:minmax(0,1fr) auto auto auto;
        max-width:100%;
    }
    .toolbar-pill-wide { min-width:0; }
    .toolbar-pill strong { overflow:hidden; text-overflow:ellipsis; }
}

@media (min-width: 1041px) {
    .discover-page {
        height:100%;
        min-height:0;
        display:flex;
        flex-direction:column;
        box-sizing:border-box;
        padding-top:24px;
        padding-bottom:18px;
    }
    .discover-header { flex:none; }
    .discover-layout { flex:1; min-height:0; align-items:stretch; }
    .candidate-card { min-height:0; height:100%; display:flex; flex-direction:column; }
    .candidate-gallery { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
    .candidate-media-stage { flex:1 1 auto; min-height:0; height:auto; }
    .candidate-info { flex:0 0 auto; max-height:160px; overflow:auto; }
    .match-panel, .filters-panel { height:100%; min-height:0; box-sizing:border-box; overflow:auto; }
}

/* Компании. */
.companies-page,
.company-chat-page {
    width: min(1100px, calc(100% - 48px));
    margin: 0 auto;
    padding: 34px 0 90px;
}
.company-list { display: grid; gap: 14px; }
.company-loading { padding: 24px; color: var(--ink-muted); }
.company-row {
    display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 14px; align-items: center;
    width: 100%; padding: 17px; color: inherit; text-align: left; border-radius: 20px; cursor: pointer;
}
.company-row:hover { transform: translateY(-1px); border-color: rgba(180,225,255,.42); }
.company-row-icon { display:grid; place-items:center; width:54px; height:54px; color:var(--ice-blue); border-radius:17px; background:rgba(90,168,255,.13); }
.company-row-icon .ui-icon { width:28px; height:28px; }
.company-row-copy { min-width: 0; display:grid; gap:4px; }
.company-row-copy span,.company-row-copy small { color:var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.company-unread { min-width:26px; height:26px; display:grid; place-items:center; padding:0 7px; border-radius:99px; color:#06152c; background:var(--ice); font-weight:700; }
.company-request { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:16px; align-items:center; padding:18px; border-radius:22px; }
.company-avatar,.company-candidate-photo { width:72px; height:72px; object-fit:cover; border-radius:22px; background:rgba(90,168,255,.12); }
.company-avatar-empty { display:grid; place-items:center; color:var(--ice-blue); }
.company-request-copy p,.company-candidate-copy p { margin:5px 0 0; color:var(--ink-muted); }
.company-request-actions,.company-candidate-actions { display:grid; gap:8px; min-width:170px; }
.empty-state { display:grid; place-items:center; gap:10px; padding:42px; text-align:center; border-radius:24px; }
.empty-state p { max-width:600px; margin:0; color:var(--ink-muted); line-height:1.55; }
.empty-state .button { max-width:300px; margin-top:8px; }
.empty-state-icon { width:52px; height:52px; color:var(--ice-blue); }
.company-search-hero { display:flex; gap:18px; align-items:flex-start; padding:24px; margin:14px 0 18px; border-radius:24px; }
.company-search-hero p { max-width:720px; margin-bottom:0; color:var(--ink-muted); }
.company-search-form { display:grid; gap:22px; padding:24px; border-radius:24px; }
.company-search-form fieldset { padding:0; border:0; }
.company-search-form legend { margin-bottom:10px; font-size:17px; font-weight:650; }
.choice-row { display:flex; flex-wrap:wrap; gap:9px; }
.choice-chip { margin:0; cursor:pointer; }
.choice-chip input { position:absolute; opacity:0; pointer-events:none; }
.choice-chip span { display:block; padding:11px 16px; color:var(--ink-muted); border:1px solid var(--soft-line); border-radius:14px; background:rgba(5,24,51,.6); }
.choice-chip input:checked + span { color:#06152c; background:linear-gradient(145deg,#f7fcff,#b9e0ff); border-color:#fff; box-shadow:0 6px 16px rgba(0,8,28,.25); }
.age-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.company-active-line { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:16px 18px; border-radius:20px; }
.company-candidate { display:grid; grid-template-columns:170px minmax(0,1fr) 190px; gap:20px; align-items:center; padding:20px; border-radius:24px; }
.company-candidate-photo { width:170px; height:210px; border-radius:20px; }
.company-chat-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:16px; height:calc(100dvh - 130px); min-height:560px; }
.company-members,.company-conversation { border-radius:24px; }
.company-members { display:flex; flex-direction:column; gap:13px; padding:22px; }
.company-member-list { display:flex; flex-wrap:wrap; gap:7px; }
.company-member-list span { padding:7px 10px; border-radius:99px; background:rgba(90,168,255,.11); color:var(--ice); }
.company-members .button:first-of-type { margin-top:auto; }
.company-conversation { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.company-messages { flex:1; display:flex; flex-direction:column; gap:8px; min-height:0; padding:22px; overflow:auto; }
.company-message { align-self:flex-start; display:grid; gap:4px; max-width:min(72%,560px); padding:11px 14px; border-radius:8px 17px 17px 17px; background:rgba(35,88,142,.62); }
.company-message-mine { align-self:flex-end; border-radius:17px 8px 17px 17px; background:rgba(102,178,230,.22); }
.company-message small { color:rgba(215,234,248,.57); text-align:right; }
.company-compose { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:10px; padding:14px; border-top:1px solid var(--soft-line); background:rgba(4,20,43,.75); }
.danger-action { color:#ffd4d4 !important; }
.button-company { order:-1; }

/* Круглый аватар — отдельный слой, чтобы рамка не смешивалась с фото. */
.chat-avatar,.rail-photo,.company-avatar { border-radius: 50%; }
.match-ring-core img { width: 76%; height: 76%; object-fit: contain; border-radius: 50%; }
/* Flex-колонка может сжимать высоту круга, сохраняя его ширину: так
   кольцо превращается в овал на невысоком экране. Кольцо — неделимый
   квадратный элемент, поэтому не отдаёт ни одну из сторон. */
.match-ring { flex:0 0 auto; aspect-ratio:1 / 1; }

/* Внизу анкеты показаны именно количества общих интересов, а правая
   колонка раскрывает их названия полностью. */
.candidate-interest-summary { margin-top:13px; }
.candidate-interest-summary-title { display:block; margin-bottom:7px; color:rgba(201,229,248,.67); font-size:11px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; }
.candidate-interest-summary .candidate-interest-pills { margin-top:0; }
.match-details { overflow:auto; padding-right:2px; }
.match-actions .like-button { min-height:58px; font-size:16px; font-weight:720; }
.match-actions .like-button span:first-child { font-size:20px; }
.match-actions .skip-button { min-height:44px; font-size:14px; }
/* Светлая «Симпатия» не меняет текст на белый при наведении: белый на
   серебре не проходит по контрасту. Белый hover остаётся у синих CTA. */
.match-actions .like-button,
.match-actions .like-button:hover:not(:disabled) { color:#06152c !important; text-shadow:0 1px 0 rgba(255,255,255,.45); }
.profile-avatar-frame { position:relative; display:grid; place-items:center; aspect-ratio:1; border-radius:50%; }
.profile-avatar-photo { width:78%; height:78%; object-fit:cover; border-radius:50%; }
.profile-avatar-decoration { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.profile-avatar-preview { display:grid; grid-template-columns:minmax(0,1fr) 220px; align-items:center; gap:28px; margin-bottom:18px; padding:24px 28px; border-radius:24px; }
.profile-avatar-preview-copy h2 { margin:5px 0 8px; }
.profile-avatar-preview-copy p { max-width:650px; margin:0 0 16px; color:var(--ink-muted); line-height:1.55; }
.profile-avatar-preview-art { width:190px; justify-self:center; filter:drop-shadow(0 12px 24px rgba(0,0,0,.28)); }
.decoration-header { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:26px 30px; border-radius:26px; }
.decoration-header h1 { margin:5px 0 7px; }
.decoration-header p { margin:0; color:var(--ink-muted); }
.decoration-list { display:grid; gap:10px; width:min(820px,100%); margin:22px auto 0; }
.decoration-card { display:grid; grid-template-columns:82px minmax(0,1fr) minmax(130px,auto); align-items:center; gap:16px; min-width:0; padding:12px 16px; color:var(--ink); background:linear-gradient(145deg,rgba(25,73,119,.82),rgba(6,29,60,.94)); border:1px solid rgba(126,196,239,.23); border-radius:20px; cursor:pointer; font:inherit; text-align:left; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.decoration-preview { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 50% 35%,#2d5c82,#071b3a 72%); }
.decoration-preview > img:first-child { width:78%; height:78%; object-fit:cover; border-radius:50%; }
.decoration-preview > img:last-child { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.decoration-preview-empty { color:var(--ink-muted); font-size:12px; }
.decoration-card-copy { display:grid; gap:4px; }
.decoration-card-copy strong { font-size:16px; }
.decoration-card-copy small { color:var(--ink-muted); line-height:1.4; }
.decoration-state { justify-self:end; color:var(--ice-blue); font-size:13px; font-weight:700; text-align:right; }
.decoration-card:hover,.decoration-card:focus-visible,.decoration-card.is-selected { transform:translateY(-3px); border-color:var(--ice-blue); box-shadow:0 12px 28px rgba(41,157,224,.2); outline:none; }
.decoration-card.is-selected { border-width:2px; }
.decoration-note { margin-top:18px; text-align:center; }
.motif-card[role="button"] { cursor:pointer; transition:transform .18s ease, border-color .18s ease; }
.motif-card[role="button"]:hover,.motif-card[role="button"]:focus-visible { transform:translateY(-3px); border-color:var(--ice-blue); outline:none; }
@media (max-width:700px) { .profile-avatar-preview { grid-template-columns:1fr; text-align:center; } .profile-avatar-preview-art { order:-1; width:170px; } }
@media (max-width:650px) { .decoration-header { display:block; padding:22px; } .decoration-header .button { margin-top:16px; } .decoration-card { grid-template-columns:68px minmax(0,1fr); } .decoration-state { grid-column:2; justify-self:start; text-align:left; } }
@media (max-width:1050px) { .event-section { padding:16px; } .event-section-heading { display:block; } .event-section-heading p { margin-top:6px; text-align:left; } .event-section-grid { grid-template-columns:1fr; } }
@media (max-width:900px) { .landing-story { grid-template-columns:1fr; width:min(100% - 32px,680px); padding:28px 0; } .landing-story-copy { min-height:0; } }

/* О проекте. */
.about-page-current,.support-page-current { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:34px 0 90px; }
.about-intro { padding:clamp(28px,5vw,58px); border-radius:30px; }
.about-intro h1 { max-width:840px; font-size:clamp(36px,5vw,64px); }
.about-intro > p { max-width:820px; color:var(--ink-muted); font-size:18px; line-height:1.65; }
.about-intro-actions { display:flex; gap:10px; width:min(520px,100%); margin-top:24px; }
.about-section { margin-top:58px; }
.about-section-heading { max-width:820px; margin-bottom:20px; }
.about-section-heading h2 { font-size:clamp(27px,4vw,42px); }
.about-section-heading p { color:var(--ink-muted); line-height:1.6; }
.about-step-grid,.about-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.about-step,.about-feature { border:1px solid rgba(151,216,255,.26); background:linear-gradient(145deg,rgba(27,73,116,.84),rgba(7,29,59,.92)); box-shadow:0 16px 36px rgba(0,8,28,.2),inset 0 1px 0 rgba(255,255,255,.05); }
.about-step { position:relative; min-height:240px; padding:24px; border-radius:24px; }
.about-step-number { position:absolute; top:18px; right:19px; color:rgba(203,233,255,.35); font-size:13px; letter-spacing:.1em; }
.about-step p,.about-feature p,.about-partners p { color:var(--ink-muted); line-height:1.55; }
.about-partners { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:center; gap:32px; padding:32px; border-radius:27px; }
.about-principles { padding:30px; border-radius:27px; }
.about-principles .about-feature { background:linear-gradient(145deg,rgba(28,73,115,.76),rgba(7,28,57,.88)); box-shadow:0 12px 28px rgba(0,8,28,.16); }
.about-footer a { color:var(--ice-blue); }

/* Поддержка. */
.support-intro { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:clamp(28px,5vw,54px); border-radius:30px; }
.support-intro h1 { font-size:clamp(36px,5vw,62px); }
.support-intro p { max-width:760px; color:var(--ink-muted); font-size:18px; line-height:1.6; }
.support-intro-icon { width:90px; height:90px; flex:none; color:var(--ice-blue); }
.support-payment,.support-motifs { margin-top:20px; padding:28px; border-radius:27px; }
.support-amounts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0 14px; }
.support-amount { min-height:54px; padding:12px; color:var(--ice); border:1px solid var(--soft-line); border-radius:16px; background:rgba(4,22,47,.65); font:inherit; font-weight:650; cursor:pointer; }
.support-amount:hover { border-color:rgba(189,230,255,.48); }
.support-amount-active { color:#06152c; background:linear-gradient(145deg,#fff,#c5e6ff); border-color:#fff; box-shadow:0 8px 22px rgba(0,8,28,.28),inset 0 1px 0 #fff; }
.support-custom-amount { margin-bottom:14px; }
.support-pay { max-width:320px; }
.support-payment-status { min-height:22px; color:var(--ice-blue); }
.support-legal-note { color:var(--ink-muted); font-size:13px; }
.support-legal-note a,.support-links-inline a { color:var(--ice-blue); }
.motif-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:20px; }
.motif-card { min-width:0; margin:0; padding:9px; border:1px solid var(--soft-line); border-radius:18px; background:rgba(4,21,45,.56); }
.motif-card img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:12px; background:rgba(9,37,70,.55); }
.motif-card figcaption { display:flex; gap:7px; align-items:center; padding:10px 3px 3px; font-size:13px; }
.motif-card figcaption span { color:rgba(201,229,248,.48); }
.support-rules { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.support-rules p { margin:0; padding:14px; color:var(--ink-muted); border-radius:16px; background:rgba(5,25,52,.62); }
.support-links-inline { display:flex; gap:20px; justify-content:center; padding:24px; }

@media (max-width: 800px) {
    #app { background-attachment: scroll; }
    .companies-page,.company-chat-page,.about-page-current,.support-page-current { width:auto; padding:18px 12px 104px; }
    .nav-title { font-size:8.5px; }
    .nav-item-events .nav-title, .nav-item-companies .nav-title { display:none; }
    .company-request,.company-candidate { grid-template-columns:70px minmax(0,1fr); }
    .company-request-actions,.company-candidate-actions { grid-column:1 / -1; grid-template-columns:1fr 1fr; }
    .company-candidate-photo { width:70px; height:90px; }
    .company-chat-layout { display:flex; flex-direction:column; height:calc(100dvh - 116px); min-height:0; }
    .company-members { flex:none; padding:14px; }
    .company-member-list,.company-members .hint { display:none; }
    .company-members .button { margin-top:0 !important; }
    .company-conversation { flex:1; min-height:0; }
    .company-compose { grid-template-columns:minmax(0,1fr) 96px; }
    .about-step-grid,.about-feature-grid { grid-template-columns:1fr; }
    .about-partners { grid-template-columns:1fr; padding:24px; }
    .about-intro-actions { flex-direction:column; }
    .support-intro-icon { display:none; }
    .support-amounts { grid-template-columns:1fr 1fr; }
    .motif-strip { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
    .motif-card { flex:0 0 68%; scroll-snap-align:start; }
    .support-rules { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .button,.nav-item,.company-row { transition:none !important; }
}