/*
 * Visual system for Next to you... v3.10.1 for public and internal screens.
 * Author: Beck Sarbassov - Date created: 2026-05-03 - Date modified: 2026-07-21.
 * Copyright (c) 2026 Beck Sarbassov. All rights reserved.
 */

:root {
    --bg: #f5f2ec;
    --surface: #ffffff;
    --surface-2: #efebe3;
    --ink: #17211f;
    --muted: #66716e;
    --line: #ded8cd;
    --teal: #008f7a;
    --teal-dark: #006c61;
    --coral: #e65a45;
    --gold: #d99a29;
    --blue: #286fce;
    --danger: #c9362b;
    --shadow: 0 18px 60px rgba(29, 35, 32, 0.12);
    --radius: 8px;
    --container: min(1180px, calc(100vw - 32px));
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-weight: 900;
    letter-spacing: -0.03em;
    font-size: 24px;
}

.brand.compact {
    font-size: 20px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--teal), var(--coral));
    box-shadow: 0 10px 24px rgba(0, 143, 122, 0.22);
}

.site-header,
.admin-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 18px max(16px, calc((100vw - 1180px) / 2));
    border-bottom: 1px solid rgba(222, 216, 205, 0.78);
    background: rgba(245, 242, 236, 0.9);
    backdrop-filter: blur(18px);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--muted);
    font-weight: 700;
}

.site-nav a:hover {
    color: var(--ink);
}

.nav-action {
    padding: 10px 14px;
    border-radius: var(--radius);
    color: #fff !important;
    background: var(--ink);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-weight: 850;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    color: #fff;
    background: var(--teal);
    box-shadow: 0 12px 28px rgba(0, 143, 122, 0.22);
}

.button-primary:hover {
    background: var(--teal-dark);
}

.button-secondary {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

.button-danger {
    color: #fff;
    background: var(--danger);
}

.button.small {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 14px;
}

.button.full {
    width: 100%;
}

.hero-section {
    width: var(--container);
    margin: 0 auto;
    min-height: calc(100vh - 78px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    align-items: center;
    gap: 42px;
    padding: 48px 0 64px;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--teal);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hero-copy h1,
.section-grid h2,
.steps-section h2,
.safety-section h2,
.auth-copy h2,
.app-topbar h1,
.admin-main h1 {
    margin: 0;
    max-width: 800px;
    font-size: clamp(42px, 7vw, 82px);
    line-height: 0.96;
    letter-spacing: -0.06em;
}

.hero-lead,
.section-grid p,
.safety-section p,
.auth-copy p {
    max-width: 680px;
    color: var(--muted);
    font-size: clamp(17px, 2vw, 21px);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 22px;
}

.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.trust-row span,
.safety-list span,
.status-pill,
.tag {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: var(--radius);
    color: var(--muted);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--line);
    font-size: 14px;
    font-weight: 750;
}

.phone-preview {
    display: grid;
    place-items: center;
}

.phone-shell {
    width: min(370px, 100%);
    padding: 18px;
    border-radius: 28px;
    color: #f9fbf8;
    background: linear-gradient(180deg, #17211f, #26302d);
    box-shadow: var(--shadow);
}

.phone-status,
.mini-person {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.phone-status {
    margin-bottom: 16px;
    color: #b9c3bf;
    font-size: 13px;
}

.radar-panel {
    padding: 18px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 143, 122, 0.34), rgba(230, 90, 69, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.radar-panel h2 {
    margin: 0 0 6px;
    letter-spacing: -0.04em;
}

.radar-panel p {
    margin: 0;
    color: #d4ded9;
}

.panel-label {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.mini-person {
    padding: 14px;
    margin-top: 10px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.mini-person strong {
    display: block;
}

.mini-person span {
    display: block;
    color: #c6ceca;
    font-size: 13px;
}

.mini-person button {
    min-width: 86px;
    border: 0;
    border-radius: var(--radius);
    padding: 9px 10px;
    color: #fff;
    background: var(--coral);
    font-weight: 850;
}

.section-grid,
.steps-section,
.safety-section,
.auth-section {
    width: var(--container);
    margin: 0 auto;
    padding: 70px 0;
}

.section-grid,
.safety-section,
.auth-section {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: start;
}

.text-column p + p {
    margin-top: 18px;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.steps-grid article,
.auth-box,
.side-panel,
.person-card,
.knock-card,
.chat-list,
.chat-window,
.settings-form,
.upload-form,
.admin-list-item,
.admin-metric {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(29, 35, 32, 0.07);
}

.steps-grid article {
    padding: 20px;
}

.steps-grid span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 26px;
    border-radius: var(--radius);
    color: #fff;
    background: var(--teal);
    font-weight: 950;
}

.steps-grid h3,
.person-card h3,
.knock-card h3,
.admin-section h2 {
    margin: 0 0 8px;
    letter-spacing: -0.03em;
}

.gender-symbol {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.86em;
    line-height: 1;
    vertical-align: baseline;
    opacity: 0.92;
}

.gender-symbol-female {
    color: #ff9fc7;
}

.gender-symbol-male {
    color: #8fd8ff;
}

.steps-grid p,
.person-card p,
.knock-card p {
    margin: 0;
    color: var(--muted);
}

.safety-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.auth-box {
    padding: 18px;
}

.tab-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 4px;
    margin-bottom: 14px;
    border-radius: var(--radius);
    background: var(--surface-2);
}

.tab-button {
    border: 0;
    border-radius: var(--radius);
    padding: 10px;
    color: var(--muted);
    background: transparent;
    font-weight: 850;
}

.tab-button.active {
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 8px 18px rgba(29, 35, 32, 0.08);
}

.auth-form,
.app-view {
    display: none;
}

.auth-form.active,
.app-view.active {
    display: block;
}

label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-weight: 800;
}

input,
select,
textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    background: var(--surface);
    outline: none;
}

textarea {
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(0, 143, 122, 0.12);
}

.auth-form,
.settings-form,
.upload-form {
    gap: 13px;
}

.auth-form.active,
.settings-form,
.upload-form {
    display: grid;
}

.form-message {
    display: none;
    margin-top: 12px;
    padding: 12px;
    border-radius: var(--radius);
    background: #eef8f4;
    border: 1px solid #b9dfd2;
    color: var(--teal-dark);
    font-weight: 750;
}

.form-message.error {
    background: #fff0ee;
    border-color: #f3b3aa;
    color: var(--danger);
}

.site-footer {
    width: var(--container);
    margin: 0 auto;
    padding: 34px 0 44px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

.app-page {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    background: #f7f6f2;
}

.app-sidebar {
    position: sticky;
    top: 0;
    min-height: 100vh;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-right: 1px solid var(--line);
    background: #ffffff;
}

.app-sidebar .brand {
    margin-bottom: 16px;
}

.app-nav {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius);
    text-align: left;
    color: var(--muted);
    background: transparent;
    font-weight: 850;
}

.app-nav.link {
    display: flex;
    align-items: center;
}

.app-nav.active,
.app-nav:hover {
    color: var(--ink);
    background: var(--surface-2);
}

.app-nav.danger {
    margin-top: auto;
    color: var(--danger);
}

.app-main {
    width: min(1260px, 100%);
    padding: 24px;
}

.app-topbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: start;
    margin-bottom: 18px;
}

.app-topbar h1,
.admin-main h1 {
    font-size: clamp(34px, 5vw, 58px);
}

.user-pill {
    min-width: 180px;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
}

.user-pill span,
.user-pill small {
    display: block;
}

.user-pill small {
    color: var(--muted);
}

.profile-pill-identity span,
.profile-pill-identity small {
    display: block;
}

.user-pill.status-mode {
    min-width: min(420px, 100%);
}

.top-status-display {
    display: grid;
    gap: 8px;
}

.top-status-display.hidden {
    display: none !important;
}

.top-status-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.top-status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(142, 183, 215, 0.32);
    color: #f3fbff;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(20, 184, 166, 0.12));
    font-size: 12px;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
}

.top-status-message {
    display: block;
    color: #c8d9ea;
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.top-status-message.error {
    color: #fecaca;
}

.app-message {
    margin: 0 0 16px;
}

.radar-layout,
.two-column,
.verification-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.action-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.person-card,
.knock-card,
.side-panel,
.settings-form,
.upload-form {
    padding: 16px;
}

.person-head,
.card-row,
.admin-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.person-card h3 {
    font-size: 24px;
}

.person-meta,
.privacy-note,
.status-line,
.empty-state {
    color: var(--muted);
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0;
}

.verified {
    color: var(--blue);
    font-weight: 900;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.metric-grid div {
    padding: 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
}

.metric-grid strong,
.metric-grid span {
    display: block;
}

.metric-grid span {
    color: var(--muted);
    font-size: 13px;
}

.stack-list {
    display: grid;
    gap: 10px;
}

.knock-actions,
.card-actions,
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.chat-layout {
    min-height: calc(100vh - 170px);
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 14px;
}

.chat-list,
.chat-window {
    overflow: hidden;
}

.chat-list {
    display: grid;
    align-content: start;
}

.chat-item {
    padding: 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    text-align: left;
}

.chat-item.active,
.chat-item:hover {
    background: var(--surface-2);
}

.chat-item strong,
.chat-item span {
    display: block;
}

.chat-item span {
    color: var(--muted);
    font-size: 14px;
}

.chat-warning {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    color: #725319;
    background: #fff5dc;
    font-size: 14px;
    font-weight: 750;
}

.meeting-box {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    background: #eef8f4;
}

.meeting-box.hidden,
.hidden {
    display: none !important;
}

.message-list {
    height: calc(100vh - 330px);
    min-height: 330px;
    padding: 16px;
    overflow-y: auto;
    background: #fbfaf7;
}

.message {
    max-width: min(560px, 86%);
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--surface-2);
}

.message.mine {
    margin-left: auto;
    color: #fff;
    background: var(--teal);
}

.message small {
    display: block;
    margin-top: 5px;
    opacity: 0.72;
}

.message-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.checkbox-block {
    display: grid;
    gap: 10px;
}

.checkbox-block h2,
.side-panel h2,
.verification-layout h2 {
    margin: 0;
    letter-spacing: -0.03em;
}

.chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.check-chip,
.toggle-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.check-chip input,
.toggle-row input {
    width: 18px;
    min-height: 18px;
}

.taxonomy-search {
    display: block;
}

.taxonomy-search input {
    width: 100%;
}

.scrollable-taxonomy {
    max-height: 260px;
    overflow: auto;
    padding-right: 4px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.verification-layout {
    grid-template-columns: minmax(0, 1fr) 420px;
}

.admin-header > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-main {
    width: var(--container);
    margin: 0 auto;
    padding: 32px 0 70px;
}

.admin-lead {
    max-width: 760px;
    color: var(--muted);
    font-size: 18px;
}

.admin-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.admin-metric {
    padding: 16px;
}

.admin-metric strong {
    display: block;
    font-size: 28px;
    letter-spacing: -0.04em;
}

.admin-metric span {
    color: var(--muted);
    font-size: 14px;
}

.admin-section {
    margin-top: 32px;
}

.admin-list {
    display: grid;
    gap: 10px;
}

.admin-list-item {
    padding: 14px;
}

.admin-list-item iframe,
.admin-list-item img {
    width: 160px;
    height: 120px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

@media (max-width: 1040px) {
    .hero-section,
    .section-grid,
    .safety-section,
    .auth-section,
    .radar-layout,
    .verification-layout,
    .chat-layout {
        grid-template-columns: 1fr;
    }

    .steps-grid,
    .admin-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chat-layout {
        min-height: auto;
    }

    .message-list {
        height: 420px;
    }
}

@media (max-width: 760px) {
    .site-header,
    .admin-header {
        position: static;
        align-items: flex-start;
        flex-direction: column;
    }

    .site-nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .hero-section {
        min-height: auto;
        padding-top: 32px;
    }

    .hero-copy h1,
    .section-grid h2,
    .steps-section h2,
    .safety-section h2,
    .auth-copy h2 {
        font-size: 42px;
    }

    .steps-grid,
    .two-column,
    .form-grid,
    .admin-metrics {
        grid-template-columns: 1fr;
    }

    .app-page {
        display: block;
    }

    .app-sidebar {
        position: static;
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .app-sidebar .brand {
        margin-bottom: 8px;
    }

    .app-main {
        padding: 16px;
    }

    .app-topbar {
        flex-direction: column;
    }

    .user-pill {
        width: 100%;
    }

    .message-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    :root {
        --container: min(100vw - 22px, 1180px);
    }

    .hero-actions .button,
    .action-strip .button,
    .card-actions .button,
    .knock-actions .button {
        width: 100%;
    }

    .phone-shell {
        border-radius: 18px;
    }
}

/*
 * Экран входа Next to you... v3.1 в стиле мобильного приложения.
 * Copyright (c) 2026 Beck Sarbassov. Все права защищены.
 */

.auth-page-v2 {
    min-height: 100vh;
    background:
        linear-gradient(145deg, rgba(0, 143, 122, 0.16), transparent 36%),
        linear-gradient(315deg, rgba(230, 90, 69, 0.14), transparent 32%),
        #efeae0;
}

.auth-mobile-stage {
    min-height: calc(100vh - 54px);
    display: grid;
    place-items: center;
    padding: 28px 14px 18px;
}

.auth-phone {
    position: relative;
    width: min(100%, 430px);
    min-height: 760px;
    overflow: hidden;
    border: 1px solid rgba(23, 33, 31, 0.12);
    border-radius: 30px;
    background: #fbfaf7;
    box-shadow: 0 30px 90px rgba(29, 35, 32, 0.18);
}

.auth-phone-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px);
}

.mobile-menu-button,
.drawer-head button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    background: var(--surface);
    font-size: 22px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.version-pill {
    flex: 0 0 auto;
    padding: 7px 9px;
    border-radius: var(--radius);
    color: var(--teal-dark);
    background: #e6f5ef;
    border: 1px solid #bee1d5;
    font-size: 12px;
    font-weight: 900;
}

.mobile-drawer {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 15;
    width: min(86%, 330px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
    border-right: 1px solid var(--line);
    box-shadow: 28px 0 80px rgba(29, 35, 32, 0.18);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
}

.mobile-drawer.open {
    transform: translateX(0);
}

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mobile-drawer a {
    padding: 12px;
    border-radius: var(--radius);
    color: var(--ink);
    background: var(--surface-2);
    font-weight: 850;
}

.drawer-note {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.drawer-note span,
.auth-hint {
    color: var(--muted);
    font-size: 13px;
}

.drawer-note span {
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font-weight: 750;
}

.auth-hero-card {
    margin: 16px;
    padding: 18px;
    border-radius: 18px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(0, 143, 122, 0.94), rgba(23, 33, 31, 0.96)),
        var(--teal);
}

.auth-hero-card h1 {
    margin: 0;
    font-size: clamp(30px, 10vw, 42px);
    line-height: 1;
    letter-spacing: -0.05em;
}

.auth-hero-card p:not(.eyebrow) {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.78);
}

.auth-hero-card .eyebrow {
    color: #d4fff4;
}

.auth-box-v2 {
    margin: 0 16px 14px;
    box-shadow: none;
}

.auth-box-v2 .tab-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auth-hint {
    margin: -2px 0 0;
    text-align: center;
}

.auth-mini-dashboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 16px 18px;
}

.auth-mini-dashboard div {
    min-height: 82px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.auth-mini-dashboard strong,
.auth-mini-dashboard span {
    display: block;
}

.auth-mini-dashboard strong {
    font-size: 15px;
}

.auth-mini-dashboard span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.auth-footer-v2 {
    position: relative;
    z-index: 100;
    padding: 0 14px 18px;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}

.secure-login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
    background: #17211f;
}

.secure-login-shell {
    width: min(100%, 420px);
}

.secure-login-card {
    display: grid;
    gap: 14px;
}

.secure-login-card h1 {
    margin: 0;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.05em;
}

@media (max-width: 460px) {
    .auth-mobile-stage {
        display: block;
        padding: 0;
    }

    .auth-phone {
        width: 100%;
        min-height: calc(100vh - 42px);
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-phone-top {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .auth-mini-dashboard {
        grid-template-columns: 1fr;
    }
}

/*
 * Next to you... v3.1: тёмный мобильный кабинет, выезжающее меню, live-чат.
 * Copyright (c) 2026 Beck Sarbassov. Все права защищены.
 */

.app-page {
    display: block;
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% -8%, rgba(0, 143, 122, 0.22), transparent 30%),
        linear-gradient(180deg, #111522 0%, #171a24 100%);
    color: #f7f7fb;
}

.app-page * {
    letter-spacing: 0;
}

.app-mobile-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 68px;
    padding: 12px 16px;
    background: rgba(17, 21, 34, 0.88);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
}

.app-mobile-header .mobile-menu-button,
.auth-phone-top .mobile-menu-button,
.drawer-head button,
.app-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-mobile-header .brand {
    color: #fff;
}

.live-indicator {
    padding: 7px 10px;
    border-radius: 999px;
    color: #9ff8e8;
    background: rgba(0, 143, 122, 0.16);
    border: 1px solid rgba(159, 248, 232, 0.22);
    font-size: 12px;
    font-weight: 900;
}

.app-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 38;
    display: none;
    background: rgba(0, 0, 0, 0.52);
}

.app-drawer-backdrop.open {
    display: block;
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(84vw, 310px);
    min-height: 100vh;
    padding: 16px;
    color: #f7f7fb;
    background: #191d29;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 26px 0 80px rgba(0, 0, 0, 0.42);
    transform: translateX(-104%);
    transition: transform 0.22s ease;
}

.app-sidebar.open {
    transform: translateX(0);
}

.app-drawer-head {
    display: flex;
    color: #fff;
}

.app-sidebar .brand {
    color: #fff;
}

.app-nav {
    color: #b7bfcb;
}

.app-nav.active,
.app-nav:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.app-nav.danger {
    color: #ff8b80;
}

.app-main {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: 18px 14px 40px;
}

.app-topbar {
    align-items: center;
    margin-bottom: 16px;
}

.app-topbar h1 {
    color: #fff;
    font-size: clamp(34px, 10vw, 58px);
    line-height: 1;
}

.app-page .eyebrow {
    color: #9ff8e8;
}

.user-pill,
.side-panel,
.person-card,
.knock-card,
.chat-list,
.chat-window,
.settings-form,
.upload-form {
    color: #f7f7fb;
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.user-pill small,
.person-meta,
.privacy-note,
.status-line,
.empty-state,
.chat-item span {
    color: #aeb8c7;
}

.action-strip {
    gap: 9px;
}

.app-page .button-primary {
    background: linear-gradient(135deg, #00a98f, #18c9ad);
    box-shadow: 0 18px 48px rgba(0, 169, 143, 0.18);
}

.app-page .button-secondary {
    color: #f7f7fb;
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.16);
}

.people-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.person-card,
.knock-card {
    border-radius: 18px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.08);
}

.person-card h3 {
    color: #fff;
}

.verified {
    color: #9ff8e8;
}

.tag {
    color: #d7deea;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.13);
}

.metric-grid div,
.check-chip,
.toggle-row {
    color: #f7f7fb;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.chat-layout {
    grid-template-columns: 310px minmax(0, 1fr);
}

.chat-empty-compact,
.chat-start-state {
    padding: 18px;
    color: #aeb8c7;
    text-align: center;
}

.chat-window.hidden {
    display: none;
}

.chat-warning {
    color: #ffe4a8;
    background: rgba(255, 209, 102, 0.12);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.meeting-box {
    background: rgba(0, 143, 122, 0.14);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.message-list {
    background: rgba(10, 13, 22, 0.56);
}

.message {
    color: #f7f7fb;
    background: rgba(255, 255, 255, 0.09);
}

.message.mine {
    background: linear-gradient(135deg, #7657ff, #8d69ff);
}

.message-form {
    grid-template-columns: minmax(0, 1fr) auto;
    background: rgba(255, 255, 255, 0.06);
    border-top-color: rgba(255, 255, 255, 0.1);
}

.app-page input,
.app-page select,
.app-page textarea {
    color: #f7f7fb;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

.app-page input::placeholder,
.app-page textarea::placeholder {
    color: rgba(247, 247, 251, 0.46);
}

@media (min-width: 980px) {
    .app-sidebar {
        transform: translateX(-104%);
    }
}

@media (max-width: 760px) {
    .app-main {
        padding: 14px 10px 30px;
    }

    .app-topbar {
        display: grid;
        gap: 10px;
    }

    .radar-layout,
    .two-column,
    .verification-layout,
    .chat-layout,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .action-strip .button {
        width: 100%;
    }

    .message-form {
        grid-template-columns: 1fr;
    }

    .message-list {
        min-height: 360px;
        height: 52vh;
    }
}

/*
 * Next to you... v3.1: CRM-панель владельца с таблицами и аналитикой.
 * Copyright (c) 2026 Beck Sarbassov. Все права защищены.
 */

.admin-page {
    background: #f4f7fb;
}

.admin-header {
    background: rgba(255, 255, 255, 0.9);
}

.admin-metric {
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f7fafc);
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(29, 35, 32, 0.07);
}

.admin-table {
    width: 100%;
    min-width: 840px;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-table th,
.admin-table td {
    padding: 12px;
    border-bottom: 1px solid #e8edf2;
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    color: #66716e;
    background: #f8fafc;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 900;
}

.admin-table tr:hover td {
    background: #fbfcfe;
}

.admin-table .admin-actions {
    margin-top: 0;
}

/*
 * Next to you... v3.1 hard override.
 * Эти правила специально стоят в самом конце файла, чтобы убрать старое статичное меню
 * и гарантировать мобильный drawer без конфликтов старой адаптации.
 * Copyright (c) 2026 Beck Sarbassov. Все права защищены.
 */

body.app-v3 {
    display: block !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 18% -10%, rgba(124, 92, 255, 0.24), transparent 32%),
        radial-gradient(circle at 88% 0%, rgba(32, 231, 199, 0.16), transparent 28%),
        linear-gradient(180deg, #12172b 0%, #090c16 100%) !important;
    color: #f7f7fb !important;
}

.app-v3-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 58px !important;
    padding: 8px 10px !important;
    background: rgba(10, 13, 22, 0.92) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(18px) !important;
}

.app-v3-header .brand {
    color: #fff !important;
    font-size: 18px !important;
}

.app-v3-header .brand-mark {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
}

.app-v3-header .mobile-menu-button {
    width: 38px !important;
    height: 38px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.app-v3 .live-indicator {
    color: #9ff8e8 !important;
    background: rgba(32, 231, 199, 0.12) !important;
    border-color: rgba(32, 231, 199, 0.22) !important;
}

.app-v3-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1001 !important;
    width: min(82vw, 310px) !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px !important;
    color: #f7f7fb !important;
    background: linear-gradient(180deg, #191e31 0%, #111522 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 34px 0 90px rgba(0, 0, 0, 0.48) !important;
    transform: translate3d(-112%, 0, 0) !important;
    transition: transform 0.24s ease !important;
}

.app-v3-drawer.open {
    transform: translate3d(0, 0, 0) !important;
}

.app-v3 .app-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    display: none !important;
    background: rgba(2, 5, 12, 0.64) !important;
    backdrop-filter: blur(4px) !important;
}

.app-v3 .app-drawer-backdrop.open {
    display: block !important;
}

.app-v3 .app-drawer-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #fff !important;
}

.app-v3 .app-menu-close {
    width: 42px !important;
    height: 42px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
}

.app-v3 .app-nav {
    min-height: 48px !important;
    color: #b9c2d3 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
}

.app-v3 .app-nav.active,
.app-v3 .app-nav:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

.app-v3 .app-nav.danger {
    color: #ff7d73 !important;
}

.app-v3 .app-main {
    width: min(100%, 1180px) !important;
    margin: 0 auto !important;
    padding: 14px 12px 44px !important;
}

.app-v3 .app-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) !important;
    gap: 12px !important;
    align-items: end !important;
}

.app-v3 .app-topbar h1 {
    color: #fff !important;
    font-size: clamp(34px, 9vw, 56px) !important;
    line-height: 1 !important;
}

.app-v3 .radar-layout,
.app-v3 .two-column,
.app-v3 .verification-layout {
    gap: 14px !important;
}

.app-v3 .person-card,
.app-v3 .knock-card,
.app-v3 .side-panel,
.app-v3 .user-pill,
.app-v3 .chat-list,
.app-v3 .chat-window,
.app-v3 .settings-form,
.app-v3 .upload-form {
    color: #f7f7fb !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

.app-v3 .button-primary,
.app-v3 .knock {
    color: #fff !important;
    background: linear-gradient(135deg, #7c5cff, #8f6cff) !important;
    box-shadow: 0 18px 42px rgba(124, 92, 255, 0.24) !important;
}

.app-v3 .button-secondary {
    color: #f7f7fb !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.app-v3 .tag,
.app-v3 .check-chip,
.app-v3 .toggle-row,
.app-v3 .metric-grid div {
    color: #dfe5f2 !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.app-v3 .chat-window.hidden {
    display: none !important;
}

.app-v3 .chat-empty-compact,
.app-v3 .chat-start-state {
    min-height: 120px !important;
    display: grid !important;
    place-items: center !important;
    color: #aeb8c7 !important;
    text-align: center !important;
}

.app-v3 .message-form {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

body.drawer-open {
    overflow: hidden !important;
}

@media (max-width: 820px) {
    .app-v3 .app-topbar,
    .app-v3 .radar-layout,
    .app-v3 .two-column,
    .app-v3 .verification-layout,
    .app-v3 .chat-layout,
    .app-v3 .form-grid {
        grid-template-columns: 1fr !important;
    }

    .app-v3 .action-strip .button,
    .app-v3 .message-form .button {
        width: 100% !important;
    }

    .app-v3 .message-form {
        grid-template-columns: 1fr !important;
    }

    .app-v3 .user-pill {
        width: 100% !important;
    }
}

.admin-v3 .admin-main {
    width: min(1280px, calc(100% - 24px)) !important;
}

.admin-v3 .admin-metrics {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}

.admin-v3 .admin-table-wrap {
    border-radius: 18px !important;
}

/*
 * Next to you... v3.1 final UI controls.
 * Дополнительные правила для звука, live-индикатора, мобильного меню и CRM владельца.
 * Copyright (c) 2026 Beck Sarbassov. Все права защищены.
 */

body.app-v3 .app-v3-drawer,
body.app-v3 .app-sidebar.app-v3-drawer {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(82vw, 310px) !important;
    max-width: 310px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    transform: translate3d(-112%, 0, 0) !important;
}

body.app-v3 .app-v3-drawer.open,
body.app-v3 .app-sidebar.app-v3-drawer.open {
    transform: translate3d(0, 0, 0) !important;
}

.app-v3 .app-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.app-v3 .sound-toggle,
.app-v3 .live-indicator {
    min-height: 34px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #dfe5f2 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.app-v3 .sound-toggle.enabled {
    color: #0f172a !important;
    background: linear-gradient(135deg, #20e7c7, #b7fff2) !important;
    border-color: rgba(32, 231, 199, 0.5) !important;
}

.app-v3 .live-indicator.pulse {
    color: #0f172a !important;
    background: linear-gradient(135deg, #ffd166, #20e7c7) !important;
    box-shadow: 0 0 0 6px rgba(32, 231, 199, 0.12) !important;
}

.app-v3 .app-message {
    position: sticky !important;
    top: 70px !important;
    z-index: 50 !important;
    border-radius: 14px !important;
}

.app-v3 input,
.app-v3 select,
.app-v3 textarea {
    color: #f7f7fb !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

.app-v3 input::placeholder,
.app-v3 textarea::placeholder {
    color: #9aa6b7 !important;
}

.app-v3 .empty-state {
    color: #aeb8c7 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px dashed rgba(255, 255, 255, 0.14) !important;
}

.app-v3 .person-card,
.app-v3 .knock-card {
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

.app-v3 .person-card:hover,
.app-v3 .knock-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(32, 231, 199, 0.28) !important;
    background: rgba(255, 255, 255, 0.11) !important;
}

.admin-v3 {
    background:
        radial-gradient(circle at 12% 0%, rgba(124, 92, 255, 0.18), transparent 34%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
}

.admin-v3 .admin-section,
.admin-v3 .admin-metric {
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
}

.admin-v3 .admin-table {
    min-width: 760px !important;
}

.admin-v3 .admin-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.admin-v3 .admin-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
}

.admin-v3 .admin-tools {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.admin-v3 .admin-tools input,
.admin-v3 .admin-tools select {
    min-height: 42px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    padding: 0 12px !important;
    background: #fff !important;
}

.admin-v3 .button.small,
.admin-v3 .admin-actions .button {
    min-height: 34px !important;
    padding: 8px 10px !important;
}

@media (max-width: 520px) {
    .app-v3-header {
        grid-template-columns: 40px minmax(0, 1fr) auto !important;
        padding-inline: 8px !important;
    }

    .app-v3-header .brand span:last-child {
        max-width: 138px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .app-v3 .sound-toggle {
        width: 34px !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: transparent !important;
        position: relative !important;
    }

    .app-v3 .sound-toggle::before {
        content: "♪";
        color: #dfe5f2 !important;
        position: absolute !important;
        inset: 0 !important;
        display: grid !important;
        place-items: center !important;
    }

    .app-v3 .sound-toggle.enabled::before {
        color: #0f172a !important;
    }

    .app-v3 .live-indicator {
        min-width: 46px !important;
    }

    .app-v3 .app-main {
        padding-inline: 10px !important;
    }

    .admin-v3 .admin-section-head,
    .admin-v3 .admin-tools {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}

/*
 * Next to you... v3.5.6: high-contrast pass for themes, support and CRM.
 * Автор: Beck Sarbassov - Дата создание: 2026-05-13 - Дата изменение: 2026-05-13.
 * Авторские права: © Beck Sarbassov. Год разработка: 2026. Все права защищены.
 */

:root {
    --nty-light-text: #101820;
    --nty-light-muted: #334155;
    --nty-light-soft: #475569;
    --nty-light-line: rgba(15, 23, 42, 0.18);
    --nty-light-panel: rgba(255, 255, 255, 0.96);
    --nty-dark-text: #f8fafc;
    --nty-dark-muted: #d7e2ef;
    --nty-dark-soft: #b8c7d9;
    --nty-dark-panel: rgba(18, 25, 42, 0.92);
}

html:not(.theme-light) body.app-page.app-v31,
html:not(.theme-light) body.auth-page-v31,
html:not(.theme-light) body.secure-login-page {
    color: var(--nty-dark-text) !important;
}

html:not(.theme-light) .app-v31 .person-card,
html:not(.theme-light) .app-v31 .knock-card,
html:not(.theme-light) .app-v31 .side-panel,
html:not(.theme-light) .app-v31 .settings-form,
html:not(.theme-light) .app-v31 .upload-form,
html:not(.theme-light) .app-v31 .chat-window,
html:not(.theme-light) .app-v31 .chat-list,
html:not(.theme-light) .app-v31 .tariff-card,
html:not(.theme-light) .app-v31 .tariff-intro,
html:not(.theme-light) .app-v31 .tariff-payment-box,
html:not(.theme-light) .app-v31 .tariff-method-panel,
html:not(.theme-light) .app-v31 .support-form,
html:not(.theme-light) .app-v31 .support-history,
html:not(.theme-light) .app-v31 .support-ticket,
html:not(.theme-light) .app-v31 .hidden-person-card {
    color: var(--nty-dark-text) !important;
    background: var(--nty-dark-panel) !important;
    border-color: rgba(226, 232, 240, 0.18) !important;
}

html:not(.theme-light) .app-v31 .privacy-note,
html:not(.theme-light) .app-v31 .person-meta,
html:not(.theme-light) .app-v31 .status-line,
html:not(.theme-light) .app-v31 .empty-state,
html:not(.theme-light) .app-v31 .chat-empty-compact,
html:not(.theme-light) .app-v31 .chat-start-state,
html:not(.theme-light) .app-v31 .side-panel p,
html:not(.theme-light) .app-v31 .knock-card p,
html:not(.theme-light) .app-v31 .support-ticket p,
html:not(.theme-light) .app-v31 .tariff-benefits p,
html:not(.theme-light) .app-v31 .tariff-benefits-list p,
html:not(.theme-light) .app-v31 .pending-tariff-box p,
html:not(.theme-light) .user-pill small {
    color: var(--nty-dark-muted) !important;
}

html:not(.theme-light) .app-v31 .profile-card-label,
html:not(.theme-light) .app-v31 .choice-counter {
    color: #eaf6ff !important;
}

html:not(.theme-light) .app-v31 .tag,
html:not(.theme-light) .app-v31 .check-chip {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(226, 232, 240, 0.24) !important;
}

html:not(.theme-light) .app-v31 .hashtag {
    color: #75ffe9 !important;
    text-shadow: 0 0 14px rgba(0, 168, 145, 0.24) !important;
}

html:not(.theme-light) .support-answer {
    color: #f8fafc !important;
    background: rgba(0, 168, 145, 0.2) !important;
    border-color: rgba(34, 211, 189, 0.38) !important;
}

html:not(.theme-light) body.admin-page.admin-v33 {
    color: var(--nty-dark-text) !important;
    background:
        radial-gradient(circle at 12% -8%, rgba(0, 168, 145, 0.18), transparent 34%),
        radial-gradient(circle at 96% 0%, rgba(255, 79, 63, 0.12), transparent 30%),
        linear-gradient(180deg, #0b1020 0%, #070b16 100%) !important;
}

html:not(.theme-light) .admin-v33 .admin-topbar {
    color: var(--nty-dark-text) !important;
    background: rgba(9, 14, 28, 0.9) !important;
    border-bottom-color: rgba(226, 232, 240, 0.12) !important;
}

html:not(.theme-light) .admin-v33 .admin-metric,
html:not(.theme-light) .admin-v33 .admin-table-wrap,
html:not(.theme-light) .admin-v33 .settings-card,
html:not(.theme-light) .admin-v33 .admin-list > div {
    color: var(--nty-dark-text) !important;
    background: rgba(17, 24, 39, 0.94) !important;
    border-color: rgba(226, 232, 240, 0.14) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28) !important;
}

html:not(.theme-light) .admin-v33 .admin-table,
html:not(.theme-light) .admin-v33 .admin-table td,
html:not(.theme-light) .admin-v33 .settings-list strong {
    color: var(--nty-dark-text) !important;
}

html:not(.theme-light) .admin-v33 .admin-table th {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

html:not(.theme-light) .admin-v33 .privacy-note,
html:not(.theme-light) .admin-v33 .settings-list span,
html:not(.theme-light) .admin-v33 .admin-metric span {
    color: var(--nty-dark-muted) !important;
}

html.theme-light body.app-page.app-v31,
html.theme-light body.auth-page-v31,
html.theme-light body.secure-login-page,
html.theme-light body.admin-page.admin-v33 {
    color: var(--nty-light-text) !important;
    background:
        radial-gradient(circle at 12% -6%, rgba(0, 168, 145, 0.2), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(255, 79, 63, 0.18), transparent 28%),
        linear-gradient(180deg, #fbfffe 0%, #edf7f5 100%) !important;
}

html.theme-light .auth-page-v31 .auth-phone,
html.theme-light .secure-login-card,
html.theme-light .app-v31 .person-card,
html.theme-light .app-v31 .knock-card,
html.theme-light .app-v31 .side-panel,
html.theme-light .app-v31 .settings-form,
html.theme-light .app-v31 .upload-form,
html.theme-light .app-v31 .chat-window,
html.theme-light .app-v31 .chat-list,
html.theme-light .app-v31 .tariff-card,
html.theme-light .app-v31 .tariff-intro,
html.theme-light .app-v31 .tariff-payment-box,
html.theme-light .app-v31 .tariff-method-panel,
html.theme-light .app-v31 .support-form,
html.theme-light .app-v31 .support-history,
html.theme-light .app-v31 .support-ticket,
html.theme-light .app-v31 .hidden-person-card,
html.theme-light .admin-v33 .admin-metric,
html.theme-light .admin-v33 .admin-table-wrap,
html.theme-light .admin-v33 .settings-card,
html.theme-light .admin-v33 .admin-list > div {
    color: var(--nty-light-text) !important;
    background: var(--nty-light-panel) !important;
    border-color: var(--nty-light-line) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .auth-page-v31 .auth-phone-top,
html.theme-light .app-v31 .app-mobile-header,
html.theme-light .admin-v33 .admin-topbar {
    color: var(--nty-light-text) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom-color: rgba(15, 23, 42, 0.14) !important;
}

html.theme-light .app-v31 .brand,
html.theme-light .admin-v33 .brand,
html.theme-light .auth-page-v31 .brand,
html.theme-light .secure-login-page .brand,
html.theme-light .app-v31 h1,
html.theme-light .app-v31 h2,
html.theme-light .app-v31 h3,
html.theme-light .admin-v33 h1,
html.theme-light .admin-v33 h2,
html.theme-light .admin-v33 h3,
html.theme-light .app-v31 .tariff-price,
html.theme-light .app-v31 .metric-grid strong,
html.theme-light .app-v31 .support-ticket h3,
html.theme-light .admin-v33 .admin-table td strong,
html.theme-light .admin-v33 .admin-metric strong,
html.theme-light .user-pill span,
html.theme-light #userName {
    color: var(--nty-light-text) !important;
}

html.theme-light .app-v31 .privacy-note,
html.theme-light .app-v31 .person-meta,
html.theme-light .app-v31 .status-line,
html.theme-light .app-v31 .empty-state,
html.theme-light .app-v31 .chat-empty-compact,
html.theme-light .app-v31 .chat-start-state,
html.theme-light .app-v31 .side-panel p,
html.theme-light .app-v31 .knock-card p,
html.theme-light .app-v31 .support-ticket p,
html.theme-light .app-v31 .tariff-benefits p,
html.theme-light .app-v31 .tariff-benefits-list p,
html.theme-light .app-v31 .pending-tariff-box p,
html.theme-light .user-pill small,
html.theme-light .admin-v33 .privacy-note,
html.theme-light .admin-v33 .settings-list span,
html.theme-light .admin-v33 .admin-metric span {
    color: var(--nty-light-muted) !important;
}

html.theme-light .app-v31 .profile-card-label,
html.theme-light .app-v31 .choice-counter,
html.theme-light .app-v31 .tariff-intro .eyebrow,
html.theme-light .app-v31 .support-layout .eyebrow,
html.theme-light .app-v31 .eyebrow,
html.theme-light .admin-v33 .eyebrow {
    color: #00796b !important;
    font-weight: 950 !important;
}

html.theme-light .app-v31 .tag,
html.theme-light .app-v31 .check-chip,
html.theme-light .app-v31 .metric-grid div,
html.theme-light .app-v31 .tariff-benefits,
html.theme-light .app-v31 .tariff-benefits-list,
html.theme-light .app-v31 .pending-tariff-box {
    color: var(--nty-light-text) !important;
    background: #f3f8fb !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
}

html.theme-light .app-v31 .hashtag {
    color: #00796b !important;
    font-weight: 950 !important;
    text-shadow: none !important;
}

html.theme-light .verification-badge.is-verified {
    color: #005f53 !important;
    background: #dffaf4 !important;
    border-color: rgba(0, 121, 107, 0.34) !important;
}

html.theme-light .verification-badge.is-unverified {
    color: #7c4a00 !important;
    background: #fff3c4 !important;
    border-color: rgba(180, 83, 9, 0.32) !important;
}

html.theme-light .app-v31 .button-secondary,
html.theme-light .admin-v33 .button-secondary,
html.theme-light .support-history-head .button {
    color: var(--nty-light-text) !important;
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

html.theme-light .app-v31 .button-secondary:hover,
html.theme-light .admin-v33 .button-secondary:hover {
    border-color: rgba(0, 121, 107, 0.34) !important;
    background: #eefaf7 !important;
}

html.theme-light .support-answer {
    color: var(--nty-light-text) !important;
    background: #e8fbf7 !important;
    border-color: rgba(0, 121, 107, 0.28) !important;
}

html.theme-light .support-answer strong {
    color: #005f53 !important;
}

html.theme-light .support-status-new {
    color: #3f2d90 !important;
    background: #ece8ff !important;
}

html.theme-light .support-status-in_progress {
    color: #7c4a00 !important;
    background: #fff0c2 !important;
}

html.theme-light .support-status-answered {
    color: #005f53 !important;
    background: #dffaf4 !important;
}

html.theme-light .support-status-closed {
    color: #334155 !important;
    background: #e2e8f0 !important;
}

html.theme-light .admin-v33 .admin-table {
    color: var(--nty-light-text) !important;
}

html.theme-light .admin-v33 .admin-table th {
    color: var(--nty-light-text) !important;
    background: #eaf3f2 !important;
    border-bottom-color: rgba(15, 23, 42, 0.16) !important;
}

html.theme-light .admin-v33 .admin-table td {
    color: #1f2937 !important;
    border-bottom-color: rgba(15, 23, 42, 0.11) !important;
}

html.theme-light .admin-v33 .status-pill {
    color: var(--nty-light-text) !important;
    background: #eef6f5 !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
}

html.theme-light .admin-v33 .settings-form.compact label,
html.theme-light .admin-v33 .settings-list strong {
    color: var(--nty-light-text) !important;
}

html.theme-light .auth-page-v31 input,
html.theme-light .auth-page-v31 select,
html.theme-light .app-v3 input,
html.theme-light .app-v3 select,
html.theme-light .app-v3 textarea,
html.theme-light .admin-v3 .admin-tools input,
html.theme-light .admin-v3 .admin-tools select,
html.theme-light .admin-v33 .settings-form.compact input {
    color: var(--nty-light-text) !important;
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.22) !important;
}

html.theme-light .auth-page-v31 input::placeholder,
html.theme-light .app-v3 input::placeholder,
html.theme-light .app-v3 textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

/*
 * Next to you... v3.1: стабильный интерфейс без мерцания, режим одного чата и тёмный вход.
 * Copyright (c) 2026 Beck Sarbassov. Все права защищены.
 */

body.auth-page-v31 {
    background:
        radial-gradient(circle at 12% -10%, rgba(32, 231, 199, 0.18), transparent 34%),
        radial-gradient(circle at 90% 4%, rgba(124, 92, 255, 0.22), transparent 30%),
        linear-gradient(180deg, #10162a 0%, #060914 100%) !important;
    color: #f7f7fb !important;
}

.auth-page-v31 .auth-phone {
    background: rgba(8, 12, 24, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34) !important;
}

.auth-page-v31 .auth-phone-top,
.auth-page-v31 .auth-box-v2,
.auth-page-v31 .auth-mini-dashboard div {
    color: #f7f7fb !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.auth-page-v31 .auth-hero-card {
    background: linear-gradient(135deg, #0f766e 0%, #111827 100%) !important;
    border: 1px solid rgba(32, 231, 199, 0.18) !important;
}

.auth-page-v31 .tab-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.auth-page-v31 .tab-button {
    color: #cbd5e1 !important;
}

.auth-page-v31 .tab-button.active {
    color: #0f172a !important;
    background: #f8fafc !important;
}

.auth-page-v31 label,
.auth-page-v31 .auth-mini-dashboard strong {
    color: #fff !important;
}

.auth-page-v31 input,
.auth-page-v31 select {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.auth-page-v31 .auth-footer-v2,
.auth-page-v31 .auth-mini-dashboard span {
    color: #b8c2d4 !important;
}

.app-v31 label,
.app-v31 h2,
.app-v31 h3,
.app-v31 .checkbox-block h2,
.app-v31 .status-line,
.app-v31 .settings-form,
.app-v31 .upload-form,
.app-v31 .side-panel,
.app-v31 .knock-card,
.app-v31 .person-card {
    color: #f8fafc !important;
}

.app-v31 .settings-form label,
.app-v31 .upload-form label,
.app-v31 .toggle-row,
.app-v31 .privacy-note,
.app-v31 .person-meta,
.app-v31 .knock-card p,
.app-v31 .side-panel p,
.app-v31 .empty-state,
.app-v31 .chat-empty-compact,
.app-v31 .chat-start-state {
    color: #cbd5e1 !important;
}

.app-v31 .settings-form input,
.app-v31 .settings-form select,
.app-v31 .settings-form textarea,
.app-v31 .upload-form input,
.app-v31 .delete-account-form input {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.app-v31 .check-chip {
    color: #fff !important;
}

.app-v31 .check-chip input {
    accent-color: #20e7c7 !important;
}

.app-v31.session-locked .app-menu-toggle,
.app-v31.session-locked .app-sidebar,
.app-v31.session-locked .app-drawer-backdrop,
.app-v31.session-locked .app-topbar,
.app-v31.session-locked .chat-list {
    display: none !important;
}

.app-v31.session-locked .app-main {
    width: min(100%, 760px) !important;
    padding-top: 12px !important;
}

.app-v31.session-locked .app-view:not([data-view-panel="chats"]) {
    display: none !important;
}

.app-v31.session-locked .app-view[data-view-panel="chats"] {
    display: block !important;
}

.app-v31.session-locked .chat-layout {
    display: block !important;
}

.app-v31.session-locked .chat-window {
    min-height: calc(100dvh - 96px) !important;
}

.app-v31 .danger-zone {
    margin-top: 18px !important;
    padding: 18px !important;
    color: #fff !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(248, 113, 113, 0.28) !important;
    border-radius: 18px !important;
}

.app-v31 .danger-zone p {
    color: #fecaca !important;
}

.app-v31 .delete-account-controls,
.app-v31 .delete-account-form {
    display: grid !important;
    gap: 12px !important;
}

.app-v31 .inline-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-end !important;
}

.app-v31 .delete-account-form.hidden {
    display: none !important;
}

.app-v31 .message-list,
.app-v31 .people-grid,
.app-v31 .stack-list,
.app-v31 .chat-list {
    overflow-anchor: none !important;
}

.app-v31 .tariff-layout {
    display: grid !important;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
    gap: 16px !important;
}

.app-v31 .support-layout {
    display: grid !important;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

.app-v31 .tariff-intro {
    margin-bottom: 18px !important;
    padding: 18px !important;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.8), rgba(15, 23, 42, 0.92)) !important;
    border: 1px solid rgba(94, 234, 212, 0.24) !important;
    border-radius: 18px !important;
}

.app-v31 .tariff-intro h2 {
    margin: 4px 0 8px !important;
    color: #fff !important;
}

.app-v31 .tariff-intro p,
.app-v31 .tariff-intro strong {
    color: #dffcf7 !important;
}

.app-v31 .tariff-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
}

.app-v31 .tariff-card {
    padding: 18px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 18px !important;
}

.app-v31 .tariff-card.current {
    border-color: rgba(32, 231, 199, 0.42) !important;
    box-shadow: 0 0 0 1px rgba(32, 231, 199, 0.16) inset !important;
}

.app-v31 .tariff-card.pending {
    border-color: rgba(255, 209, 102, 0.42) !important;
}

.app-v31 .tariff-price {
    margin: 6px 0 2px !important;
    font-size: 22px !important;
    font-weight: 900 !important;
}

.app-v31 .tariff-benefits p,
.app-v31 .tariff-benefits-list p,
.app-v31 .pending-tariff-box p {
    color: #cbd5e1 !important;
}

.app-v31 .tariff-benefits,
.app-v31 .tariff-benefits-list {
    display: grid !important;
    gap: 8px !important;
}

.app-v31 .tariff-notice {
    padding: 12px 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(62, 219, 195, 0.24) !important;
    background: rgba(62, 219, 195, 0.10) !important;
    color: inherit !important;
    font-weight: 700 !important;
}

.app-v31 .tariff-notice-expired {
    border-color: rgba(255, 122, 99, 0.24) !important;
    background: rgba(255, 122, 99, 0.10) !important;
}

.app-v31 .pending-tariff-box {
    margin-top: 14px !important;
    padding: 16px !important;
    background: rgba(255, 209, 102, 0.12) !important;
    border: 1px solid rgba(255, 209, 102, 0.28) !important;
    border-radius: 16px !important;
}

.app-v31 .max-tariff-box h3 {
    font-size: 24px !important;
    color: #fff !important;
}

.app-v31 .hidden-person-card {
    border-color: rgba(94, 234, 212, 0.24) !important;
}

.app-v31 .tariff-payment-box {
    grid-column: 1 / -1 !important;
    padding: 18px !important;
    color: #fff !important;
    background: rgba(15, 23, 42, 0.84) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 18px !important;
}

.app-v31 .tariff-payment-box.hidden,
.app-v31 .tariff-method-panel.hidden {
    display: none !important;
}

.app-v31 .tariff-methods {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 14px 0 !important;
}

.app-v31 .tariff-method-panel {
    display: grid !important;
    gap: 12px !important;
    margin-top: 12px !important;
    padding: 14px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
}

.app-v31 .tariff-payment-summary {
    display: grid !important;
    gap: 6px !important;
    margin-top: 14px !important;
    padding: 14px !important;
    color: #e2e8f0 !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
}

.app-v31 .tariff-payment-summary strong {
    color: #fff !important;
    font-size: 20px !important;
}

.app-v31 .tariff-payment-summary small {
    color: #a7f3d0 !important;
}

.app-v31 .tariff-card-payment {
    display: grid !important;
    gap: 10px !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.22) !important;
}

.app-v31 .tariff-card-payment.hidden {
    display: none !important;
}

.app-v31 .tariff-card-payment-summary {
    display: grid !important;
    gap: 4px !important;
    color: #e2e8f0 !important;
    font-size: 0.92rem !important;
}

.app-v31 .tariff-card-payment-summary strong {
    color: #ffffff !important;
    font-size: 1rem !important;
}

.app-v31 .tariff-card-payment-summary small {
    color: #a7f3d0 !important;
}

.app-v31 .tariff-card-paypal-buttons {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
}

.app-v31 .paypal-button-container {
    width: min(100%, 520px) !important;
    min-height: 56px !important;
}

.app-v31 .tariff-method-panel textarea {
    width: 100% !important;
    resize: vertical !important;
}

@media (max-width: 820px) {
    .app-v31 .tariff-layout {
        grid-template-columns: 1fr !important;
    }
}

/*
 * Next to you... owner workspace layout.
 * Copyright (c) 2026 Beck Sarbassov. Все права защищены.
 */
.admin-v33 {
    min-height: 100dvh !important;
    background: #eef3f8 !important;
}

.admin-v33 .admin-shell {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    min-height: 100dvh !important;
}

.admin-v33 .admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100dvh !important;
    padding: 24px 18px !important;
    color: #fff !important;
    background: linear-gradient(180deg, #111827, #0f172a 56%, #0b1220) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.admin-v33 .admin-brand {
    color: #fff !important;
    margin-bottom: 26px !important;
}

.admin-v33 .admin-nav {
    display: grid !important;
    gap: 8px !important;
}

.admin-v33 .admin-nav-item,
.admin-v33 .admin-logout-link {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    color: #cbd5e1 !important;
    text-align: left !important;
    font-weight: 900 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    cursor: pointer !important;
}

.admin-v33 .admin-nav-item.active,
.admin-v33 .admin-nav-item:hover {
    color: #fff !important;
    background: rgba(32, 231, 199, 0.12) !important;
    border-color: rgba(32, 231, 199, 0.24) !important;
}

.admin-v33 .admin-logout-link {
    position: absolute !important;
    right: 18px !important;
    bottom: 24px !important;
    left: 18px !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.admin-v33 .admin-workspace {
    min-width: 0 !important;
}

.admin-v33 .admin-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 12 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 86px !important;
    padding: 16px 28px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(18px) !important;
}

.admin-v33 .admin-topbar h1 {
    margin: 4px 0 0 !important;
    font-size: clamp(28px, 3.4vw, 48px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

.admin-v33 .admin-menu-toggle {
    display: none !important;
}

.admin-v33 .admin-profile,
.admin-v33 .presence-line {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.admin-v33 .presence-dot {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: #94a3b8 !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16) !important;
}

.admin-v33 .presence-dot.online {
    background: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18), 0 0 16px rgba(34, 197, 94, 0.42) !important;
}

.admin-v33 .presence-dot.offline {
    background: #94a3b8 !important;
}

.admin-v33 .admin-main {
    width: 100% !important;
    max-width: 1420px !important;
    margin: 0 auto !important;
    padding: 28px !important;
}

.admin-v33 .admin-panel {
    display: none !important;
}

.admin-v33 .admin-panel.active {
    display: block !important;
}

.admin-v33 .admin-panel > h2,
.admin-v33 .admin-section-head h2 {
    margin-top: 0 !important;
    font-size: 28px !important;
    letter-spacing: 0 !important;
}

.admin-v33 .admin-metrics {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.admin-v33 .admin-metric,
.admin-v33 .admin-table-wrap,
.admin-v33 .settings-card {
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08) !important;
}

.admin-v33 .admin-table th {
    background: #f1f5f9 !important;
}

.admin-v33 .settings-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 16px !important;
}

.admin-v33 .settings-card {
    padding: 18px !important;
}

.admin-v33 .settings-card h3 {
    margin: 0 0 14px !important;
}

.admin-v33 .settings-list {
    display: grid !important;
    gap: 10px !important;
}

.admin-v33 .settings-list div {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.admin-v33 .settings-list span {
    color: #64748b !important;
}

.admin-v33 .settings-list strong {
    color: #0f172a !important;
    text-align: right !important;
}

.admin-v33 .settings-form.compact {
    display: grid !important;
    gap: 12px !important;
}

.admin-v33 .settings-form.compact label {
    color: #0f172a !important;
    font-weight: 900 !important;
}

.admin-v33 .settings-form.compact input {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 6px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 12px !important;
    background: #fff !important;
}

@media (max-width: 920px) {
    .admin-v33 .admin-shell {
        grid-template-columns: 1fr !important;
    }

    .admin-v33 .admin-sidebar {
        position: fixed !important;
        z-index: 40 !important;
        inset: 0 auto 0 0 !important;
        width: min(82vw, 310px) !important;
        transform: translateX(-104%) !important;
        transition: transform 180ms ease !important;
    }

    .admin-v33 .admin-sidebar.open {
        transform: translateX(0) !important;
    }

    .admin-v33 .admin-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(15, 23, 42, 0.12) !important;
        background: #fff !important;
        font-weight: 900 !important;
    }

    .admin-v33 .admin-main,
    .admin-v33 .admin-topbar {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }
}

/*
 * Next to you... v3.4: logo refresh and tighter auth screen.
 */

.brand-logo-shell {
    width: 44px;
    height: 44px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-wordmark {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-entry-copy {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.auth-entry-copy h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.auth-entry-copy p:not(.eyebrow) {
    margin: 0;
    color: #aebbd2;
    font-size: 14px;
    line-height: 1.5;
}

.auth-page-v31 .auth-phone-top {
    padding: 14px 16px !important;
    background: linear-gradient(180deg, rgba(16, 22, 42, 0.96), rgba(16, 22, 42, 0.88)) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.auth-page-v31 .brand {
    gap: 10px !important;
    color: #fff !important;
}

.auth-page-v31 .brand.compact {
    font-size: 17px !important;
}

.auth-page-v31 .brand-mark.brand-logo-shell,
.app-v31 .brand-mark.brand-logo-shell,
.admin-v33 .brand-mark.brand-logo-shell,
.secure-login-page .brand-mark.brand-logo-shell {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.auth-page-v31 .auth-box-v2 {
    margin: 16px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(9, 14, 28, 0.96)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 50px rgba(2, 6, 23, 0.34) !important;
}

.auth-page-v31 .tab-row {
    gap: 10px !important;
    padding: 6px !important;
    margin-bottom: 18px !important;
    border-radius: 16px !important;
    background: rgba(148, 163, 184, 0.12) !important;
}

.auth-page-v31 .tab-button {
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
}

.auth-page-v31 .tab-button.active {
    box-shadow: 0 10px 24px rgba(255, 255, 255, 0.08) !important;
}

.auth-page-v31 .auth-form {
    gap: 14px !important;
}

.auth-page-v31 .auth-form label {
    gap: 8px !important;
    color: #f8fbff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

/*
 * Next to you... v3.5.4: adaptive logo sizing for the transparent app icon.
 */

.brand-logo-shell {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.brand-logo {
    max-width: 100%;
    max-height: 100%;
}

.app-mobile-header .brand-logo-shell,
.auth-phone-top .brand-logo-shell {
    width: clamp(38px, 10vw, 48px);
    height: clamp(38px, 10vw, 48px);
}

.app-sidebar .brand-logo-shell,
.admin-sidebar .brand-logo-shell,
.mobile-drawer .brand-logo-shell {
    width: 46px;
    height: 46px;
}

@media (min-width: 1024px) {
    .app-sidebar .brand-logo-shell,
    .admin-sidebar .brand-logo-shell {
        width: 48px;
        height: 48px;
    }
}

.auth-page-v31 .auth-form input,
.auth-page-v31 .auth-form select {
    min-height: 54px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    background: rgba(148, 163, 184, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.auth-page-v31 .auth-form input::placeholder {
    color: #7f8ba2 !important;
}

.auth-page-v31 .auth-form .button-primary {
    min-height: 54px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0aa189, #13b8a0) !important;
    box-shadow: 0 16px 28px rgba(10, 161, 137, 0.24) !important;
}

.auth-page-v31 .form-message {
    margin-top: 14px !important;
    border-radius: 14px !important;
}

.auth-page-v31 .auth-mini-dashboard {
    margin: 0 16px 20px !important;
    gap: 10px !important;
}

.auth-page-v31 .auth-mini-dashboard div {
    min-height: 74px !important;
    padding: 14px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.auth-page-v31 .auth-footer-v2 {
    color: rgba(184, 194, 212, 0.72) !important;
}

.secure-login-page .brand,
.app-v31 .brand,
.admin-v33 .brand {
    gap: 10px !important;
}

.secure-login-page .brand.compact,
.app-v31 .brand.compact,
.admin-v33 .brand.compact {
    font-size: 18px !important;
}

.app-v31 .app-mobile-header .brand-logo-shell,
.admin-v33 .admin-brand .brand-logo-shell {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
}

.app-v31 .app-sidebar .brand-logo-shell {
    width: 46px !important;
    height: 46px !important;
}

@media (max-width: 640px) {
    .auth-page-v31 .auth-phone-top .brand-wordmark,
    .app-v31 .app-mobile-header .brand-wordmark {
        max-width: 132px;
    }

    .auth-page-v31 .brand-logo-shell,
    .app-v31 .brand-logo-shell,
    .admin-v33 .brand-logo-shell,
    .secure-login-page .brand-logo-shell {
        width: 40px !important;
        height: 40px !important;
    }
}

/*
 * Next to you... v3.4: adaptive polish for desktop, tablets, mobile browsers and WebView.
 * Copyright (c) 2026 Beck Sarbassov. Все права защищены.
 */

html {
    min-width: 320px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

button,
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
}

.noscript-message {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 24px;
    color: #fff;
    text-align: center;
    background: #070b16;
}

.noscript-message strong,
.noscript-message span {
    display: block;
    width: min(100%, 520px);
}

.noscript-message strong {
    font-size: 24px;
    line-height: 1.1;
}

.noscript-message span {
    color: #cbd5e1;
}

.auth-mobile-stage,
.secure-login-page,
.app-page,
.admin-v33 {
    min-height: 100vh;
}

@supports (min-height: 100dvh) {
    .auth-mobile-stage,
    .secure-login-page,
    .app-page,
    .admin-v33 {
        min-height: 100dvh;
    }
}

.auth-page-v31 .auth-mobile-stage {
    padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
}

.auth-page-v31 .auth-phone {
    isolation: isolate;
}

.auth-page-v31 .mobile-menu-button,
.app-v31 .mobile-menu-button,
.admin-v33 .admin-menu-toggle {
    flex: 0 0 auto;
}

.auth-page-v31 .auth-phone-top,
.app-v31 .app-mobile-header,
.admin-v33 .admin-topbar {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .auth-page-v31 .auth-phone-top,
    .app-v31 .app-mobile-header {
        background: #10162a !important;
    }

    .admin-v33 .admin-topbar {
        background: #fff !important;
    }
}

@media (min-width: 900px) {
    .auth-page-v31 .auth-mobile-stage {
        display: block !important;
        padding: clamp(18px, 3vw, 32px) 20px 24px !important;
    }

    .auth-page-v31 .auth-phone {
        width: min(1480px, calc(100vw - 40px)) !important;
        min-height: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1.1fr) minmax(280px, 340px) !important;
        align-items: stretch !important;
        overflow: hidden !important;
        border-radius: 34px !important;
        margin: 0 auto !important;
    }

    .auth-page-v31 .auth-phone-top {
        grid-column: 1 / -1 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 12 !important;
    }

    .auth-page-v31 .auth-box-v2 {
        width: min(100%, 590px) !important;
        margin: 28px !important;
        align-self: center !important;
    }

    .auth-page-v31 .auth-entry-copy h1 {
        max-width: 480px !important;
        font-size: 42px !important;
        line-height: 1.03 !important;
    }

    .auth-page-v31 .auth-entry-copy p:not(.eyebrow) {
        max-width: 480px !important;
        font-size: 15px !important;
    }

    .auth-page-v31 .auth-mini-dashboard {
        grid-column: 2 !important;
        grid-row: 2 !important;
        grid-template-columns: 1fr !important;
        align-content: center !important;
        gap: 14px !important;
        margin: 28px 28px 28px 0 !important;
    }

    .auth-page-v31 .auth-mini-dashboard div {
        min-height: 104px !important;
        display: grid !important;
        align-content: center !important;
    }

    .auth-page-v31 .auth-footer-v2 {
        padding-bottom: 28px !important;
    }
}

@media (min-width: 1180px) {
    .auth-page-v31 .auth-phone {
        grid-template-columns: minmax(580px, 1fr) 360px !important;
    }

    .auth-page-v31 .auth-box-v2 {
        margin: 34px !important;
    }

    .auth-page-v31 .auth-mini-dashboard {
        margin: 34px 34px 34px 0 !important;
    }
}

@media (min-width: 1024px) {
    .app-v31 .app-mobile-header {
        min-height: 74px !important;
        padding: 14px 24px 14px 312px !important;
    }

    .app-v31 .app-menu-toggle {
        display: none !important;
    }

    .app-v31 .app-v3-drawer,
    body.app-v3 .app-sidebar.app-v3-drawer {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: 288px !important;
        max-width: 288px !important;
        transform: translate3d(0, 0, 0) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: none !important;
    }

    .app-v31 .app-drawer-backdrop {
        display: none !important;
    }

    .app-v31 .app-drawer-head {
        display: none !important;
    }

    .app-v31 .app-sidebar .brand {
        margin-bottom: 24px !important;
    }

    .app-v31 .app-main {
        width: auto !important;
        max-width: none !important;
        margin: 0 0 0 288px !important;
        padding: 24px clamp(18px, 2.5vw, 36px) 48px !important;
    }

    .app-v31 .app-topbar {
        display: flex !important;
        justify-content: space-between !important;
        gap: 18px !important;
    }

    .app-v31 .app-topbar h1 {
        font-size: clamp(38px, 4vw, 56px) !important;
    }

    .app-v31 .radar-layout,
    .app-v31 .verification-layout,
    .app-v31 .tariff-layout,
    .app-v31 .support-layout {
        align-items: start !important;
    }

    .app-v31 .people-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    }
}

@media (min-width: 1280px) {
    .app-v31 .chat-layout {
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    }

    .app-v31 .two-column {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1023px) {
    .app-v31 .app-main {
        padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
    }

    .app-v31 .chat-layout,
    .app-v31 .radar-layout,
    .app-v31 .verification-layout,
    .app-v31 .support-layout {
        grid-template-columns: 1fr !important;
    }

    .app-v31 .chat-list {
        min-height: auto !important;
    }

    .app-v31 .action-strip {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .auth-page-v31 .auth-phone {
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }

    .auth-page-v31 .auth-box-v2 {
        margin: 14px !important;
        padding: 16px !important;
    }

    .auth-page-v31 .auth-entry-copy h1 {
        font-size: 28px !important;
    }

    .auth-page-v31 .auth-form input,
    .auth-page-v31 .auth-form select,
    .auth-page-v31 .auth-form .button-primary {
        min-height: 50px !important;
    }

    .auth-page-v31 .auth-mini-dashboard {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .auth-page-v31 .auth-mini-dashboard div {
        min-width: 0 !important;
        min-height: 82px !important;
    }

    .auth-page-v31 .auth-mini-dashboard strong,
    .auth-page-v31 .auth-mini-dashboard span {
        overflow-wrap: anywhere !important;
    }

    .app-v31 .app-mobile-header {
        min-height: 60px !important;
        padding: 10px max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left)) !important;
    }

    .app-v31 .app-header-actions {
        gap: 7px !important;
    }

    .app-v31 .app-topbar {
        display: grid !important;
        gap: 12px !important;
    }

    .app-v31 .app-topbar h1 {
        font-size: 36px !important;
    }

    .app-v31 .people-grid,
    .app-v31 .tariff-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-v33 .admin-topbar {
        min-height: 70px !important;
    }

    .admin-v33 .admin-profile strong {
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 460px) {
    .auth-page-v31 .auth-mobile-stage {
        padding: 0 !important;
    }

    .auth-page-v31 .auth-phone {
        border-radius: 0 !important;
    }

    .auth-page-v31 .auth-phone-top {
        min-height: 62px !important;
        padding: 10px !important;
    }

    .auth-page-v31 .auth-box-v2 {
        margin: 12px !important;
        padding: 14px !important;
    }

    .auth-page-v31 .version-pill {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    .auth-page-v31 .auth-mini-dashboard {
        grid-template-columns: 1fr !important;
    }

    .app-v31 .brand-wordmark,
    .admin-v33 .brand-wordmark {
        max-width: 126px !important;
    }

    .app-v31 .live-indicator {
        min-width: 42px !important;
        padding-inline: 8px !important;
    }

    .app-v31 .user-pill {
        width: 100% !important;
    }
}

@media (max-width: 360px) {
    .auth-page-v31 .brand-wordmark,
    .app-v31 .brand-wordmark {
        max-width: 96px !important;
    }

    .auth-page-v31 .auth-entry-copy h1 {
        font-size: 24px !important;
    }

    .auth-page-v31 .auth-form input,
    .auth-page-v31 .auth-form select {
        padding-inline: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/*
 * Next to you... v3.4 desktop repair: real wide layout, CRM sidebar and verification badges.
 * Автор: Beck Sarbassov - Дата изменение: 2026. Все права защищены.
 */

.verification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
}

.verification-badge-icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    object-fit: contain;
}

.verification-badge.is-verified {
    color: #b8fff3;
    background: rgba(32, 231, 199, 0.12);
    border: 1px solid rgba(32, 231, 199, 0.28);
}

.verification-badge.is-unverified {
    color: #ffe9a6;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.28);
}

.choice-counter {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-left: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #9ff8e8;
    background: rgba(32, 231, 199, 0.1);
    border: 1px solid rgba(32, 231, 199, 0.22);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 850;
    vertical-align: middle;
}

.profile-card-section {
    display: grid;
    gap: 7px;
    margin: 13px 0;
}

.profile-card-label {
    color: #9aa8bd;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.purpose-tags {
    margin: 0 !important;
}

.hashtag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 9px;
    align-items: center;
}

.hashtag {
    color: #b8fff3;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.25;
    white-space: nowrap;
}

.hashtag:hover {
    color: #ffffff;
}

.support-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.support-form,
.support-history,
.support-ticket {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(22, 29, 47, 0.82);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}

.support-history,
.support-ticket {
    padding: 18px;
}

.support-history {
    grid-column: 1 / -1;
}

.support-history-head,
.support-ticket-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.support-ticket h3 {
    margin: 0 0 6px;
}

.support-answer {
    margin-top: 14px;
    padding: 13px;
    border-radius: 14px;
    color: #e9fff9;
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid rgba(20, 184, 166, 0.22);
}

.support-answer p {
    margin: 6px 0 0;
}

.support-status-new {
    color: #ffffff;
    background: rgba(124, 92, 255, 0.18);
}

.support-status-in_progress {
    color: #fff4d6;
    background: rgba(245, 158, 11, 0.18);
}

.support-status-answered {
    color: #c9fff5;
    background: rgba(20, 184, 166, 0.18);
}

.support-status-closed {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.16);
}

@media (min-width: 1024px) {
    body.auth-page-v31 {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        background:
            radial-gradient(circle at 10% 8%, rgba(20, 184, 166, 0.25), transparent 30%),
            radial-gradient(circle at 92% 0%, rgba(124, 92, 255, 0.28), transparent 36%),
            #070b16 !important;
    }

    .auth-page-v31 .auth-mobile-stage {
        display: block !important;
        width: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
    }

    .auth-page-v31 .auth-phone {
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: grid !important;
        grid-template-columns: minmax(520px, 1fr) minmax(320px, 460px) !important;
        grid-template-rows: 82px minmax(0, 1fr) !important;
        align-items: stretch !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .auth-page-v31 .auth-phone-top {
        grid-column: 1 / -1 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 18 !important;
        width: 100% !important;
        min-height: 82px !important;
        padding: 14px clamp(28px, 5vw, 80px) !important;
        background: rgba(9, 13, 27, 0.78) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .auth-page-v31 .mobile-menu-button,
    .auth-page-v31 .mobile-drawer {
        display: none !important;
    }

    .auth-page-v31 .auth-box-v2 {
        width: min(760px, calc(100% - clamp(64px, 10vw, 180px))) !important;
        max-width: none !important;
        margin: clamp(36px, 8vh, 96px) 0 clamp(34px, 7vh, 80px) clamp(42px, 8vw, 140px) !important;
        align-self: start !important;
        padding: clamp(28px, 3vw, 44px) !important;
        border-radius: 28px !important;
    }

    .auth-page-v31 .auth-entry-copy h1 {
        max-width: 680px !important;
        font-size: clamp(44px, 4.3vw, 72px) !important;
        line-height: 0.98 !important;
    }

    .auth-page-v31 .auth-entry-copy p:not(.eyebrow) {
        max-width: 610px !important;
        font-size: clamp(15px, 1.1vw, 18px) !important;
        line-height: 1.55 !important;
    }

    .auth-page-v31 .tab-row {
        min-height: 64px !important;
    }

    .auth-page-v31 .auth-form input,
    .auth-page-v31 .auth-form select,
    .auth-page-v31 .auth-form .button-primary {
        min-height: 58px !important;
    }

    .auth-page-v31 .auth-mini-dashboard {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: min(420px, calc(100% - clamp(42px, 7vw, 120px))) !important;
        margin: clamp(36px, 12vh, 150px) clamp(36px, 7vw, 120px) auto 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-content: start !important;
        gap: 16px !important;
    }

    .auth-page-v31 .auth-mini-dashboard div {
        min-height: 118px !important;
        padding: 24px !important;
        display: grid !important;
        align-content: center !important;
        border-radius: 20px !important;
    }

    .auth-page-v31 .auth-footer-v2 {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 14px !important;
        z-index: 30 !important;
        padding: 0 !important;
        isolation: isolate !important;
        pointer-events: auto !important;
    }

    body.app-page.app-v31 {
        display: block !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        background:
            linear-gradient(135deg, #231f53 0%, #0d3f49 42%, #070b16 78%) !important;
    }

    .app-v31 .app-v3-drawer,
    body.app-v3 .app-sidebar.app-v3-drawer {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 45 !important;
        width: 300px !important;
        max-width: 300px !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        transform: translate3d(0, 0, 0) !important;
        padding: 20px 14px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.11) !important;
        box-shadow: none !important;
    }

    .app-v31 .app-mobile-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 32 !important;
        width: calc(100% - 300px) !important;
        min-height: 82px !important;
        margin-left: 300px !important;
        padding: 14px clamp(24px, 2.4vw, 44px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(7, 11, 22, 0.82) !important;
    }

    .app-v31 .app-menu-toggle,
    .app-v31 .app-drawer-backdrop,
    .app-v31 .app-drawer-head {
        display: none !important;
    }

    .app-v31 .app-main {
        width: calc(100% - 300px) !important;
        max-width: none !important;
        margin: 0 0 0 300px !important;
        padding: clamp(26px, 2.4vw, 44px) clamp(26px, 3vw, 56px) 56px !important;
        box-sizing: border-box !important;
    }

    .app-v31 .app-topbar {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(230px, 320px) !important;
        align-items: start !important;
        gap: 24px !important;
    }

    .app-v31 .app-topbar h1 {
        font-size: clamp(42px, 4.1vw, 72px) !important;
    }

    .app-v31 .radar-layout,
    .app-v31 .verification-layout,
    .app-v31 .tariff-layout,
    .app-v31 .support-layout {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 430px) !important;
        gap: clamp(18px, 2vw, 34px) !important;
    }

    .app-v31 .two-column {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: clamp(18px, 2vw, 34px) !important;
    }

    .app-v31 .people-grid {
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) !important;
        gap: 18px !important;
    }

    .app-v31 .person-card,
    .app-v31 .knock-card,
    .app-v31 .side-panel,
    .app-v31 .settings-form,
    .app-v31 .upload-form,
    .app-v31 .chat-window,
    .app-v31 .chat-list {
        border-radius: 22px !important;
    }

    .app-v31 .chat-layout {
        width: 100% !important;
        min-height: calc(100vh - 210px) !important;
        min-height: calc(100dvh - 210px) !important;
        grid-template-columns: minmax(280px, 380px) minmax(0, 1fr) !important;
        gap: clamp(18px, 2vw, 30px) !important;
    }

    .app-v31 .chat-window {
        min-height: calc(100vh - 210px) !important;
        min-height: calc(100dvh - 210px) !important;
    }

    .app-v31 .message-list {
        min-height: calc(100vh - 410px) !important;
        min-height: calc(100dvh - 410px) !important;
    }

    .app-v31 .settings-form,
    .app-v31 .upload-form,
    .app-v31 .tariff-grid,
    .app-v31 .support-layout,
    .app-v31 .hidden-person-card {
        max-width: none !important;
    }

    .app-v31.session-locked .app-mobile-header {
        display: none !important;
    }

    .app-v31.session-locked .app-main {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: clamp(18px, 3vw, 48px) !important;
    }

    .app-v31.session-locked .chat-window {
        width: 100% !important;
        min-height: calc(100vh - clamp(36px, 6vw, 96px)) !important;
        min-height: calc(100dvh - clamp(36px, 6vw, 96px)) !important;
    }

    .app-v31.session-locked .message-list {
        min-height: calc(100vh - 280px) !important;
        min-height: calc(100dvh - 280px) !important;
    }
}

@media (min-width: 1500px) {
    .app-v31 .app-v3-drawer,
    body.app-v3 .app-sidebar.app-v3-drawer {
        width: 320px !important;
        max-width: 320px !important;
    }

    .app-v31 .app-mobile-header,
    .app-v31 .app-main {
        width: calc(100% - 320px) !important;
        margin-left: 320px !important;
    }

    .app-v31 .people-grid {
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .verification-badge {
        min-height: 26px;
        padding: 5px 8px;
        font-size: 12px;
        gap: 6px;
    }

    .verification-badge-icon {
        width: 15px;
        height: 15px;
    }

    .choice-counter {
        width: fit-content;
        margin: 8px 0 0;
    }
}

/*
 * Next to you... v3.5.5: dark/light theme switcher and logo-color accents.
 * Автор: Beck Sarbassov - Дата создание: 2026-05-13 - Дата изменение: 2026-05-13.
 * Авторские права: © Beck Sarbassov. Год разработка: 2026. Все права защищены.
 */

:root {
    --nty-teal: #00a891;
    --nty-teal-soft: #22d3bd;
    --nty-coral: #ff4f3f;
    --nty-coral-soft: #ff806f;
    --nty-graphite: #172124;
    --nty-ink: #0f172a;
    --nty-paper: #f8fbff;
}

.theme-toggle {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    padding: 0 12px 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #f8fafc !important;
    background: linear-gradient(135deg, rgba(0, 168, 145, 0.22), rgba(255, 79, 63, 0.16)) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16) !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

.theme-toggle:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(34, 211, 189, 0.46) !important;
}

.theme-toggle-dot {
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(135deg, var(--nty-teal) 0 48%, var(--nty-coral) 52% 100%) !important;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.14), 0 0 18px rgba(34, 211, 189, 0.22) !important;
}

.theme-toggle[data-theme="light"] {
    color: var(--nty-graphite) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 168, 145, 0.28) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
}

.app-v31 .app-header-actions {
    min-width: auto !important;
}

.app-v31 .button-primary,
.auth-page-v31 .button-primary,
.secure-login-page .button-primary,
.admin-v33 .button-primary {
    background: linear-gradient(135deg, var(--nty-teal), var(--nty-coral)) !important;
    box-shadow: 0 18px 42px rgba(0, 168, 145, 0.18) !important;
}

.app-v31 .app-nav.active,
.app-v31 .app-nav:hover,
.admin-v33 .admin-nav-item.active,
.admin-v33 .admin-nav-item:hover {
    border-color: rgba(0, 168, 145, 0.24) !important;
    background: linear-gradient(135deg, rgba(0, 168, 145, 0.16), rgba(255, 79, 63, 0.09)) !important;
}

.app-v31 .eyebrow,
.admin-v33 .eyebrow,
.auth-page-v31 .auth-entry-copy .eyebrow,
.secure-login-page .eyebrow {
    color: #6ff5df !important;
}

html.theme-light body.auth-page-v31,
html.theme-light body.secure-login-page,
html.theme-light body.app-page.app-v31,
html.theme-light body.admin-page.admin-v33 {
    color: var(--nty-graphite) !important;
    background:
        radial-gradient(circle at 14% -8%, rgba(0, 168, 145, 0.17), transparent 34%),
        radial-gradient(circle at 90% 0%, rgba(255, 79, 63, 0.14), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #eef6f5 100%) !important;
}

html.theme-light .auth-page-v31 .auth-phone,
html.theme-light .secure-login-card,
html.theme-light .app-v31 .person-card,
html.theme-light .app-v31 .knock-card,
html.theme-light .app-v31 .side-panel,
html.theme-light .app-v31 .settings-form,
html.theme-light .app-v31 .upload-form,
html.theme-light .app-v31 .chat-window,
html.theme-light .app-v31 .chat-list,
html.theme-light .app-v31 .tariff-card,
html.theme-light .app-v31 .tariff-intro,
html.theme-light .app-v31 .tariff-payment-box,
html.theme-light .app-v31 .tariff-method-panel,
html.theme-light .app-v31 .hidden-person-card,
html.theme-light .admin-v33 .admin-metric,
html.theme-light .admin-v33 .admin-table-wrap,
html.theme-light .admin-v33 .settings-card,
html.theme-light .admin-v33 .admin-list > div {
    color: var(--nty-graphite) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08) !important;
}

html.theme-light .auth-page-v31 .auth-phone-top,
html.theme-light .app-v31 .app-mobile-header,
html.theme-light .admin-v33 .admin-topbar {
    color: var(--nty-graphite) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

html.theme-light .auth-page-v31 .auth-box-v2,
html.theme-light .auth-page-v31 .auth-mini-dashboard div {
    color: var(--nty-graphite) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .auth-page-v31 .auth-hero-card {
    color: #fff !important;
    background: linear-gradient(135deg, var(--nty-teal), #143335 54%, var(--nty-coral)) !important;
    border-color: rgba(0, 168, 145, 0.22) !important;
}

html.theme-light .auth-page-v31 .brand,
html.theme-light .secure-login-page .brand,
html.theme-light .app-v31 .brand,
html.theme-light .admin-v33 .brand,
html.theme-light .auth-page-v31 .auth-entry-copy h1,
html.theme-light .app-v31 .app-topbar h1,
html.theme-light .admin-v33 .admin-topbar h1,
html.theme-light .app-v31 h2,
html.theme-light .app-v31 h3,
html.theme-light .admin-v33 .admin-panel > h2,
html.theme-light .admin-v33 .admin-section-head h2,
html.theme-light .auth-page-v31 label,
html.theme-light .auth-page-v31 .auth-mini-dashboard strong,
html.theme-light .app-v31 label,
html.theme-light .app-v31 .status-line,
html.theme-light .admin-v33 .settings-form.compact label,
html.theme-light .admin-v33 .settings-list strong {
    color: var(--nty-graphite) !important;
}

html.theme-light .auth-page-v31 .mobile-menu-button,
html.theme-light .app-v31 .mobile-menu-button,
html.theme-light .auth-page-v31 .drawer-head button,
html.theme-light .app-v31 .app-menu-close {
    color: #18303a !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12) !important;
}

html.theme-light .auth-page-v31 .mobile-drawer .drawer-head strong,
html.theme-light .app-v31 .app-drawer-head strong {
    color: var(--nty-graphite) !important;
}

html.theme-light .app-v31 .eyebrow,
html.theme-light .admin-v33 .eyebrow,
html.theme-light .auth-page-v31 .auth-entry-copy .eyebrow,
html.theme-light .secure-login-page .eyebrow {
    color: var(--nty-teal) !important;
}

html.theme-light .auth-page-v31 .auth-entry-copy p:not(.eyebrow),
html.theme-light .auth-page-v31 .auth-footer-v2,
html.theme-light .auth-page-v31 .auth-mini-dashboard span,
html.theme-light .app-v31 .settings-form label,
html.theme-light .app-v31 .upload-form label,
html.theme-light .app-v31 .toggle-row,
html.theme-light .app-v31 .privacy-note,
html.theme-light .app-v31 .person-meta,
html.theme-light .app-v31 .knock-card p,
html.theme-light .app-v31 .side-panel p,
html.theme-light .app-v31 .empty-state,
html.theme-light .app-v31 .chat-empty-compact,
html.theme-light .app-v31 .chat-start-state,
html.theme-light .user-pill small,
html.theme-light .admin-v33 .settings-list span {
    color: #52626b !important;
}

html.theme-light .auth-page-v31 input,
html.theme-light .auth-page-v31 select,
html.theme-light .app-v3 input,
html.theme-light .app-v3 select,
html.theme-light .app-v3 textarea,
html.theme-light .app-v31 .settings-form input,
html.theme-light .app-v31 .settings-form select,
html.theme-light .app-v31 .settings-form textarea,
html.theme-light .app-v31 .upload-form input,
html.theme-light .app-v31 .delete-account-form input,
html.theme-light .admin-v3 .admin-tools input,
html.theme-light .admin-v3 .admin-tools select,
html.theme-light .admin-v33 .settings-form.compact input {
    color: var(--nty-graphite) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
}

html.theme-light .app-v3 input::placeholder,
html.theme-light .app-v3 textarea::placeholder,
html.theme-light .auth-page-v31 .auth-form input::placeholder {
    color: #7b8790 !important;
}

html.theme-light .app-v31 .app-v3-drawer,
html.theme-light body.app-v3 .app-sidebar.app-v3-drawer,
html.theme-light .admin-v33 .admin-sidebar,
html.theme-light .auth-page-v31 .mobile-drawer {
    color: var(--nty-graphite) !important;
    background: linear-gradient(180deg, #ffffff, #eef7f5 58%, #fff4f2) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    box-shadow: 18px 0 54px rgba(15, 23, 42, 0.14) !important;
}

html.theme-light .app-v31 .app-nav,
html.theme-light .admin-v33 .admin-nav-item,
html.theme-light .admin-v33 .admin-logout-link,
html.theme-light .auth-page-v31 .mobile-drawer a {
    color: #52626b !important;
}

html.theme-light .app-v31 .app-nav.active,
html.theme-light .app-v31 .app-nav:hover,
html.theme-light .admin-v33 .admin-nav-item.active,
html.theme-light .admin-v33 .admin-nav-item:hover,
html.theme-light .auth-page-v31 .mobile-drawer a:hover {
    color: var(--nty-graphite) !important;
    background: linear-gradient(135deg, rgba(0, 168, 145, 0.13), rgba(255, 79, 63, 0.09)) !important;
    border-color: rgba(0, 168, 145, 0.22) !important;
}

html.theme-light .app-v31 .button-secondary,
html.theme-light .admin-v33 .button-secondary {
    color: var(--nty-graphite) !important;
    background: rgba(255, 255, 255, 0.74) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}

html.theme-light .app-v31 .message,
html.theme-light .app-v31 .chat-item,
html.theme-light .app-v31 .tariff-benefits,
html.theme-light .app-v31 .tariff-benefits-list,
html.theme-light .app-v31 .pending-tariff-box,
html.theme-light .app-v31 .metric-grid div,
html.theme-light .admin-v33 .admin-table th {
    color: var(--nty-graphite) !important;
    background: rgba(248, 251, 255, 0.9) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .app-v31 .message.mine {
    color: #fff !important;
    background: linear-gradient(135deg, var(--nty-teal), var(--nty-coral)) !important;
}

html.theme-light .app-v31 .check-chip {
    color: var(--nty-graphite) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}

html.theme-light .brand-logo-shell {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(0, 168, 145, 0.2) !important;
    box-shadow: 0 14px 32px rgba(0, 168, 145, 0.12) !important;
}

@media (max-width: 520px) {
    .theme-toggle {
        width: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
    }

    .theme-toggle-text {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        white-space: nowrap !important;
    }
}

/*
 * Next to you... v3.5.6: final contrast layer for readable light/dark themes.
 * Автор: Beck Sarbassov - Дата создание: 2026-05-13 - Дата изменение: 2026-05-13.
 * Авторские права: © Beck Sarbassov. Год разработка: 2026. Все права защищены.
 */

:root {
    --nty-readable-dark: #0f172a;
    --nty-readable-body: #1f2a37;
    --nty-readable-muted: #334155;
    --nty-readable-soft: #475569;
    --nty-light-card: rgba(255, 255, 255, 0.97);
    --nty-light-card-solid: #ffffff;
    --nty-light-border: rgba(15, 23, 42, 0.16);
    --nty-dark-readable: #f8fafc;
    --nty-dark-body: #e5edf8;
    --nty-dark-muted-strong: #cbd5e1;
}

html.theme-light body.auth-page-v31,
html.theme-light body.secure-login-page,
html.theme-light body.app-page.app-v31,
html.theme-light body.admin-page.admin-v33 {
    color: var(--nty-readable-body) !important;
}

html.theme-light .auth-page-v31 .brand,
html.theme-light .secure-login-page .brand,
html.theme-light .app-v31 .brand,
html.theme-light .admin-v33 .brand,
html.theme-light .app-v31 h1,
html.theme-light .app-v31 h2,
html.theme-light .app-v31 h3,
html.theme-light .admin-v33 h1,
html.theme-light .admin-v33 h2,
html.theme-light .admin-v33 h3,
html.theme-light .auth-page-v31 label,
html.theme-light .secure-login-page label,
html.theme-light .app-v31 label,
html.theme-light .admin-v33 label,
html.theme-light .profile-card-label,
html.theme-light .choice-counter,
html.theme-light .settings-list strong,
html.theme-light .admin-table td,
html.theme-light .admin-table strong {
    color: var(--nty-readable-dark) !important;
}

html.theme-light .auth-page-v31 p,
html.theme-light .secure-login-page p,
html.theme-light .app-v31 p,
html.theme-light .app-v31 .person-meta,
html.theme-light .app-v31 .privacy-note,
html.theme-light .app-v31 .status-line,
html.theme-light .app-v31 .empty-state,
html.theme-light .app-v31 .chat-empty-compact,
html.theme-light .app-v31 .chat-start-state,
html.theme-light .app-v31 .tariff-benefits p,
html.theme-light .app-v31 .tariff-benefits-list p,
html.theme-light .app-v31 .pending-tariff-box p,
html.theme-light .app-v31 .support-ticket p,
html.theme-light .admin-v33 p,
html.theme-light .admin-v33 .privacy-note,
html.theme-light .admin-v33 .settings-list span,
html.theme-light .admin-v33 .admin-metric span,
html.theme-light .user-pill small {
    color: var(--nty-readable-muted) !important;
}

html.theme-light .user-pill,
html.theme-light .user-pill strong,
html.theme-light .app-v31 .user-pill,
html.theme-light .app-v31 .user-pill strong {
    color: var(--nty-readable-dark) !important;
}

html.theme-light .auth-page-v31 .auth-phone,
html.theme-light .secure-login-card,
html.theme-light .app-v31 .person-card,
html.theme-light .app-v31 .knock-card,
html.theme-light .app-v31 .side-panel,
html.theme-light .app-v31 .settings-form,
html.theme-light .app-v31 .upload-form,
html.theme-light .app-v31 .chat-window,
html.theme-light .app-v31 .chat-list,
html.theme-light .app-v31 .tariff-card,
html.theme-light .app-v31 .tariff-intro,
html.theme-light .app-v31 .tariff-payment-box,
html.theme-light .app-v31 .tariff-method-panel,
html.theme-light .app-v31 .support-form,
html.theme-light .app-v31 .support-history,
html.theme-light .app-v31 .support-ticket,
html.theme-light .app-v31 .hidden-person-card,
html.theme-light .admin-v33 .admin-metric,
html.theme-light .admin-v33 .admin-table-wrap,
html.theme-light .admin-v33 .settings-card,
html.theme-light .admin-v33 .admin-list > div,
html.theme-light .admin-v33 .admin-panel {
    color: var(--nty-readable-body) !important;
    background: var(--nty-light-card) !important;
    border-color: var(--nty-light-border) !important;
}

html.theme-light .app-v31 .support-history {
    background: #eef5f6 !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12) !important;
}

html.theme-light .app-v31 .support-ticket {
    background: #ffffff !important;
}

html.theme-light .app-v31 .support-answer {
    color: #0f2f34 !important;
    background: #e5fbf7 !important;
    border-color: rgba(0, 168, 145, 0.35) !important;
}

html.theme-light .app-v31 .tag,
html.theme-light .app-v31 .check-chip,
html.theme-light .app-v31 .tariff-pill,
html.theme-light .app-v31 .purpose-chip {
    color: var(--nty-readable-dark) !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

html.theme-light .app-v31 .hashtag {
    color: #007c6c !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

html.theme-light .verification-badge,
html.theme-light .verification-badge.verified {
    color: #006f62 !important;
    background: #e7fffa !important;
    border-color: rgba(0, 168, 145, 0.42) !important;
}

html.theme-light .verification-badge.unverified {
    color: #714b00 !important;
    background: #fff5d6 !important;
    border-color: rgba(202, 138, 4, 0.42) !important;
}

html.theme-light .app-v31 input,
html.theme-light .app-v31 select,
html.theme-light .app-v31 textarea,
html.theme-light .auth-page-v31 input,
html.theme-light .auth-page-v31 select,
html.theme-light .secure-login-page input,
html.theme-light .admin-v33 input,
html.theme-light .admin-v33 select,
html.theme-light .admin-v33 textarea {
    color: var(--nty-readable-dark) !important;
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.24) !important;
}

html.theme-light .app-v31 input::placeholder,
html.theme-light .app-v31 textarea::placeholder,
html.theme-light .auth-page-v31 input::placeholder,
html.theme-light .secure-login-page input::placeholder,
html.theme-light .admin-v33 input::placeholder,
html.theme-light .admin-v33 textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

html.theme-light .admin-v33 .admin-table th {
    color: #10202a !important;
    background: #eef4f6 !important;
}

html.theme-light .admin-v33 .status-badge,
html.theme-light .admin-v33 .pill,
html.theme-light .admin-v33 .online-dot + span {
    color: var(--nty-readable-dark) !important;
}

html:not(.theme-light) body.auth-page-v31,
html:not(.theme-light) body.secure-login-page,
html:not(.theme-light) body.app-page.app-v31,
html:not(.theme-light) body.admin-page.admin-v33 {
    color: var(--nty-dark-readable) !important;
}

html:not(.theme-light) .app-v31 p,
html:not(.theme-light) .app-v31 .person-meta,
html:not(.theme-light) .app-v31 .privacy-note,
html:not(.theme-light) .app-v31 .status-line,
html:not(.theme-light) .app-v31 .empty-state,
html:not(.theme-light) .app-v31 .chat-empty-compact,
html:not(.theme-light) .app-v31 .chat-start-state,
html:not(.theme-light) .app-v31 .tariff-benefits p,
html:not(.theme-light) .app-v31 .tariff-benefits-list p,
html:not(.theme-light) .app-v31 .pending-tariff-box p,
html:not(.theme-light) .app-v31 .support-ticket p,
html:not(.theme-light) .admin-v33 p,
html:not(.theme-light) .admin-v33 .privacy-note,
html:not(.theme-light) .admin-v33 .settings-list span,
html:not(.theme-light) .admin-v33 .admin-metric span,
html:not(.theme-light) .user-pill small {
    color: var(--nty-dark-muted-strong) !important;
}

html:not(.theme-light) .app-v31 .support-form,
html:not(.theme-light) .app-v31 .support-history,
html:not(.theme-light) .app-v31 .support-ticket,
html:not(.theme-light) .admin-v33 .admin-metric,
html:not(.theme-light) .admin-v33 .admin-table-wrap,
html:not(.theme-light) .admin-v33 .settings-card,
html:not(.theme-light) .admin-v33 .admin-list > div {
    color: var(--nty-dark-body) !important;
    background: rgba(17, 24, 39, 0.96) !important;
    border-color: rgba(226, 232, 240, 0.18) !important;
}

html:not(.theme-light) .app-v31 .support-answer {
    color: #f8fafc !important;
    background: rgba(0, 168, 145, 0.24) !important;
    border-color: rgba(34, 211, 189, 0.44) !important;
}

html:not(.theme-light) .app-v31 input,
html:not(.theme-light) .app-v31 select,
html:not(.theme-light) .app-v31 textarea,
html:not(.theme-light) .auth-page-v31 input,
html:not(.theme-light) .auth-page-v31 select,
html:not(.theme-light) .secure-login-page input,
html:not(.theme-light) .admin-v33 input,
html:not(.theme-light) .admin-v33 select,
html:not(.theme-light) .admin-v33 textarea {
    color: #f8fafc !important;
    background: rgba(17, 24, 39, 0.94) !important;
    border-color: rgba(226, 232, 240, 0.22) !important;
}

/*
 * Next to you... v3.5.7: final readability pass for both themes.
 * Keeps layout and logic untouched, only strengthens contrast in radar, tariffs,
 * support workspace and owner CRM.
 */

:root {
    --nty-v357-light-ink: #0b1826;
    --nty-v357-light-body: #1b2b3b;
    --nty-v357-light-muted: #405264;
    --nty-v357-light-soft: #5d7084;
    --nty-v357-light-border: rgba(11, 24, 38, 0.18);
    --nty-v357-light-surface: rgba(255, 255, 255, 0.985);
    --nty-v357-light-surface-2: #f3f8fb;
    --nty-v357-dark-ink: #fbfdff;
    --nty-v357-dark-body: #e8eef8;
    --nty-v357-dark-muted: #c9d4e4;
    --nty-v357-dark-soft: #aebbcf;
    --nty-v357-dark-border: rgba(226, 232, 240, 0.2);
    --nty-v357-dark-surface: rgba(10, 16, 28, 0.96);
    --nty-v357-dark-surface-2: rgba(18, 27, 45, 0.98);
}

html.theme-light .app-v31 .app-topbar h1,
html.theme-light .admin-v33 .admin-topbar h1,
html.theme-light .app-v31 h2,
html.theme-light .app-v31 h3,
html.theme-light .admin-v33 h2,
html.theme-light .admin-v33 h3,
html.theme-light .app-v31 label,
html.theme-light .admin-v33 label,
html.theme-light .app-v31 .support-ticket h3,
html.theme-light .app-v31 .tariff-price,
html.theme-light .app-v31 .metric-grid strong,
html.theme-light .admin-v33 .admin-table td strong,
html.theme-light .admin-v33 .admin-metric strong,
html.theme-light .admin-v33 .settings-list strong,
html.theme-light .user-pill strong,
html.theme-light #userName {
    color: var(--nty-v357-light-ink) !important;
}

html.theme-light .app-v31 p,
html.theme-light .app-v31 .person-meta,
html.theme-light .app-v31 .privacy-note,
html.theme-light .app-v31 .status-line,
html.theme-light .app-v31 .empty-state,
html.theme-light .app-v31 .chat-empty-compact,
html.theme-light .app-v31 .chat-start-state,
html.theme-light .app-v31 .tariff-benefits p,
html.theme-light .app-v31 .tariff-benefits-list p,
html.theme-light .app-v31 .pending-tariff-box p,
html.theme-light .app-v31 .support-ticket p,
html.theme-light .admin-v33 p,
html.theme-light .admin-v33 .privacy-note,
html.theme-light .admin-v33 .settings-list span,
html.theme-light .admin-v33 .admin-metric span,
html.theme-light .admin-v33 .admin-table td,
html.theme-light .user-pill small,
html.theme-light #userStatus {
    color: var(--nty-v357-light-body) !important;
}

html.theme-light .app-v31 .person-card,
html.theme-light .app-v31 .knock-card,
html.theme-light .app-v31 .side-panel,
html.theme-light .app-v31 .settings-form,
html.theme-light .app-v31 .upload-form,
html.theme-light .app-v31 .chat-window,
html.theme-light .app-v31 .chat-list,
html.theme-light .app-v31 .tariff-card,
html.theme-light .app-v31 .tariff-intro,
html.theme-light .app-v31 .tariff-payment-box,
html.theme-light .app-v31 .tariff-method-panel,
html.theme-light .app-v31 .support-form,
html.theme-light .app-v31 .support-history,
html.theme-light .app-v31 .support-ticket,
html.theme-light .app-v31 .hidden-person-card,
html.theme-light .app-v31 .user-pill,
html.theme-light .admin-v33 .admin-panel,
html.theme-light .admin-v33 .admin-metric,
html.theme-light .admin-v33 .admin-table-wrap,
html.theme-light .admin-v33 .settings-card,
html.theme-light .admin-v33 .admin-list > div {
    background: var(--nty-v357-light-surface) !important;
    border-color: var(--nty-v357-light-border) !important;
    box-shadow: 0 20px 52px rgba(15, 23, 42, 0.1) !important;
}

html.theme-light .app-v31 .support-history,
html.theme-light .admin-v33 .admin-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 250, 251, 0.96)) !important;
}

html.theme-light .app-v31 .tariff-intro {
    color: var(--nty-v357-light-ink) !important;
    background:
        linear-gradient(135deg, rgba(237, 255, 251, 0.98), rgba(255, 244, 240, 0.97)) !important;
    border-color: rgba(0, 143, 122, 0.2) !important;
}

html.theme-light .app-v31 .tariff-intro p,
html.theme-light .app-v31 .tariff-intro strong,
html.theme-light .app-v31 .support-layout .privacy-note,
html.theme-light .app-v31 .support-form label,
html.theme-light .app-v31 .support-history p,
html.theme-light .app-v31 .support-ticket p,
html.theme-light .admin-v33 .admin-lead {
    color: var(--nty-v357-light-body) !important;
}

html.theme-light .app-v31 .message,
html.theme-light .app-v31 .chat-item,
html.theme-light .app-v31 .tariff-benefits,
html.theme-light .app-v31 .tariff-benefits-list,
html.theme-light .app-v31 .pending-tariff-box,
html.theme-light .app-v31 .metric-grid div,
html.theme-light .admin-v33 .admin-table th {
    color: var(--nty-v357-light-ink) !important;
    background: var(--nty-v357-light-surface-2) !important;
    border-color: rgba(11, 24, 38, 0.12) !important;
}

html.theme-light .app-v31 .tag,
html.theme-light .app-v31 .check-chip,
html.theme-light .app-v31 .tariff-pill,
html.theme-light .app-v31 .purpose-chip,
html.theme-light .app-v31 .verification-badge,
html.theme-light .admin-v33 .status-pill {
    color: var(--nty-v357-light-ink) !important;
    background: #ffffff !important;
    border-color: rgba(11, 24, 38, 0.2) !important;
}

html.theme-light .app-v31 .hashtag {
    color: #006e61 !important;
    font-weight: 900 !important;
}

html.theme-light .app-v31 .verification-badge.verified,
html.theme-light .app-v31 .verification-badge.is-verified {
    color: #04685a !important;
    background: #e9fffb !important;
    border-color: rgba(0, 143, 122, 0.32) !important;
}

html.theme-light .app-v31 .verification-badge.unverified,
html.theme-light .app-v31 .verification-badge.is-unverified {
    color: #7a5300 !important;
    background: #fff5dd !important;
    border-color: rgba(217, 154, 41, 0.34) !important;
}

html.theme-light .app-v31 input,
html.theme-light .app-v31 select,
html.theme-light .app-v31 textarea,
html.theme-light .auth-page-v31 input,
html.theme-light .auth-page-v31 select,
html.theme-light .secure-login-page input,
html.theme-light .admin-v33 input,
html.theme-light .admin-v33 select,
html.theme-light .admin-v33 textarea {
    color: var(--nty-v357-light-ink) !important;
    background: #ffffff !important;
    border-color: rgba(11, 24, 38, 0.24) !important;
}

html.theme-light .app-v31 input::placeholder,
html.theme-light .app-v31 textarea::placeholder,
html.theme-light .auth-page-v31 input::placeholder,
html.theme-light .secure-login-page input::placeholder,
html.theme-light .admin-v33 input::placeholder,
html.theme-light .admin-v33 textarea::placeholder {
    color: var(--nty-v357-light-soft) !important;
    opacity: 1 !important;
}

html.theme-light .app-v31 .button-secondary,
html.theme-light .admin-v33 .button-secondary,
html.theme-light .support-history-head .button {
    color: var(--nty-v357-light-ink) !important;
    background: #ffffff !important;
    border-color: rgba(11, 24, 38, 0.18) !important;
}

html.theme-light .app-v31 .button-secondary:hover,
html.theme-light .admin-v33 .button-secondary:hover {
    background: #f7fbfd !important;
}

html.theme-light .app-v31 .app-nav,
html.theme-light .admin-v33 .admin-nav-item,
html.theme-light .admin-v33 .admin-logout-link {
    color: var(--nty-v357-light-body) !important;
}

html.theme-light .app-v31 .app-nav.active,
html.theme-light .app-v31 .app-nav:hover,
html.theme-light .admin-v33 .admin-nav-item.active,
html.theme-light .admin-v33 .admin-nav-item:hover {
    color: var(--nty-v357-light-ink) !important;
    background: linear-gradient(135deg, rgba(0, 143, 122, 0.12), rgba(230, 90, 69, 0.11)) !important;
    border-color: rgba(0, 143, 122, 0.2) !important;
}

html:not(.theme-light) .app-v31 .app-topbar h1,
html:not(.theme-light) .admin-v33 .admin-topbar h1,
html:not(.theme-light) .app-v31 h2,
html:not(.theme-light) .app-v31 h3,
html:not(.theme-light) .admin-v33 h2,
html:not(.theme-light) .admin-v33 h3,
html:not(.theme-light) .user-pill strong,
html:not(.theme-light) #userName {
    color: var(--nty-v357-dark-ink) !important;
}

html:not(.theme-light) .app-v31 p,
html:not(.theme-light) .app-v31 .person-meta,
html:not(.theme-light) .app-v31 .privacy-note,
html:not(.theme-light) .app-v31 .status-line,
html:not(.theme-light) .app-v31 .empty-state,
html:not(.theme-light) .app-v31 .chat-empty-compact,
html:not(.theme-light) .app-v31 .chat-start-state,
html:not(.theme-light) .app-v31 .tariff-benefits p,
html:not(.theme-light) .app-v31 .tariff-benefits-list p,
html:not(.theme-light) .app-v31 .pending-tariff-box p,
html:not(.theme-light) .app-v31 .support-ticket p,
html:not(.theme-light) .admin-v33 p,
html:not(.theme-light) .admin-v33 .privacy-note,
html:not(.theme-light) .admin-v33 .settings-list span,
html:not(.theme-light) .admin-v33 .admin-metric span,
html:not(.theme-light) .admin-v33 .admin-table td,
html:not(.theme-light) .user-pill small,
html:not(.theme-light) #userStatus {
    color: var(--nty-v357-dark-muted) !important;
}

html:not(.theme-light) .app-v31 .person-card,
html:not(.theme-light) .app-v31 .knock-card,
html:not(.theme-light) .app-v31 .side-panel,
html:not(.theme-light) .app-v31 .settings-form,
html:not(.theme-light) .app-v31 .upload-form,
html:not(.theme-light) .app-v31 .chat-window,
html:not(.theme-light) .app-v31 .chat-list,
html:not(.theme-light) .app-v31 .tariff-card,
html:not(.theme-light) .app-v31 .tariff-intro,
html:not(.theme-light) .app-v31 .tariff-payment-box,
html:not(.theme-light) .app-v31 .tariff-method-panel,
html:not(.theme-light) .app-v31 .support-form,
html:not(.theme-light) .app-v31 .support-history,
html:not(.theme-light) .app-v31 .support-ticket,
html:not(.theme-light) .app-v31 .hidden-person-card,
html:not(.theme-light) .app-v31 .user-pill,
html:not(.theme-light) .admin-v33 .admin-panel,
html:not(.theme-light) .admin-v33 .admin-metric,
html:not(.theme-light) .admin-v33 .admin-table-wrap,
html:not(.theme-light) .admin-v33 .settings-card,
html:not(.theme-light) .admin-v33 .admin-list > div {
    color: var(--nty-v357-dark-body) !important;
    background: var(--nty-v357-dark-surface) !important;
    border-color: var(--nty-v357-dark-border) !important;
}

html:not(.theme-light) .app-v31 .support-history,
html:not(.theme-light) .admin-v33 .admin-panel {
    background:
        linear-gradient(180deg, rgba(10, 16, 28, 0.98), rgba(16, 24, 39, 0.96)) !important;
}

html:not(.theme-light) .app-v31 .message,
html:not(.theme-light) .app-v31 .chat-item,
html:not(.theme-light) .app-v31 .tariff-benefits,
html:not(.theme-light) .app-v31 .tariff-benefits-list,
html:not(.theme-light) .app-v31 .pending-tariff-box,
html:not(.theme-light) .app-v31 .metric-grid div,
html:not(.theme-light) .admin-v33 .admin-table th {
    color: var(--nty-v357-dark-body) !important;
    background: var(--nty-v357-dark-surface-2) !important;
    border-color: rgba(226, 232, 240, 0.16) !important;
}

html:not(.theme-light) .app-v31 .tag,
html:not(.theme-light) .app-v31 .check-chip,
html:not(.theme-light) .app-v31 .tariff-pill,
html:not(.theme-light) .app-v31 .purpose-chip,
html:not(.theme-light) .app-v31 .verification-badge,
html:not(.theme-light) .admin-v33 .status-pill {
    color: var(--nty-v357-dark-body) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(226, 232, 240, 0.2) !important;
}

html:not(.theme-light) .app-v31 .support-answer {
    color: #f5fffe !important;
    background: rgba(0, 143, 122, 0.22) !important;
    border-color: rgba(52, 211, 183, 0.36) !important;
}

.app-v31 .email-preferences-card {
    display: grid;
    gap: 12px;
    margin: 14px 0 18px;
    padding: 16px;
    border: 1px solid rgba(142, 183, 215, 0.24);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(32, 231, 199, 0.1), rgba(255, 79, 63, 0.07));
}

.app-v31 .email-preferences-card h2 {
    margin: 0 0 4px;
    font-size: 1.02rem;
}

.app-v31 .email-preferences-card p,
.app-v31 .email-system-note {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.92rem;
}

.app-v31 .email-preference-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    min-height: 52px;
    padding: 12px;
    border: 1px solid rgba(142, 183, 215, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
}

.app-v31 .email-preference-toggle input {
    width: 20px !important;
    min-height: 20px !important;
    margin-top: 2px;
    padding: 0 !important;
    accent-color: #20e7c7;
}

.app-v31 .email-preference-toggle span {
    display: grid;
    gap: 3px;
}

.app-v31 .email-preference-toggle strong {
    color: #f8fafc;
    font-size: 0.96rem;
}

.app-v31 .email-preference-toggle small {
    color: #cbd5e1;
    line-height: 1.35;
}

html.theme-light .app-v31 .email-preferences-card {
    background: linear-gradient(135deg, rgba(0, 168, 145, 0.1), rgba(255, 79, 63, 0.06));
    border-color: rgba(43, 96, 127, 0.18);
}

html.theme-light .app-v31 .email-preferences-card p,
html.theme-light .app-v31 .email-system-note,
html.theme-light .app-v31 .email-preference-toggle small {
    color: #52626b;
}

html.theme-light .app-v31 .email-preference-toggle {
    background: rgba(255, 255, 255, 0.74);
    border-color: rgba(43, 96, 127, 0.14);
}

html.theme-light .app-v31 .email-preference-toggle strong {
    color: #102033;
}

html:not(.theme-light) .app-v31 input,
html:not(.theme-light) .app-v31 select,
html:not(.theme-light) .app-v31 textarea,
html:not(.theme-light) .auth-page-v31 input,
html:not(.theme-light) .auth-page-v31 select,
html:not(.theme-light) .secure-login-page input,
html:not(.theme-light) .admin-v33 input,
html:not(.theme-light) .admin-v33 select,
html:not(.theme-light) .admin-v33 textarea {
    color: var(--nty-v357-dark-ink) !important;
    background: rgba(12, 19, 33, 0.98) !important;
    border-color: rgba(226, 232, 240, 0.24) !important;
}

html:not(.theme-light) .app-v31 input::placeholder,
html:not(.theme-light) .app-v31 textarea::placeholder,
html:not(.theme-light) .auth-page-v31 input::placeholder,
html:not(.theme-light) .secure-login-page input::placeholder,
html:not(.theme-light) .admin-v33 input::placeholder,
html:not(.theme-light) .admin-v33 textarea::placeholder {
    color: var(--nty-v357-dark-soft) !important;
    opacity: 1 !important;
}

.auth-legal-links {
    position: relative;
    z-index: 101;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    margin-top: 8px;
}

.auth-legal-links a {
    position: relative;
    z-index: 101;
    display: inline-flex;
    align-items: center;
    color: inherit;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.88;
    border-bottom: 1px solid transparent;
    pointer-events: auto !important;
    text-decoration: none;
}

.auth-legal-links a:hover {
    opacity: 1;
    border-bottom-color: currentColor;
}

.auth-page-v31 .auth-footer-v2,
.auth-page-v31 .auth-footer-v2 *,
.auth-page-v31 .auth-legal-links,
.auth-page-v31 .auth-legal-links a {
    pointer-events: auto !important;
}

.legal-page {
    min-height: 100vh;
    color: #f8fafc;
    background:
        radial-gradient(circle at 14% -8%, rgba(0, 168, 145, 0.16), transparent 32%),
        radial-gradient(circle at 92% 0%, rgba(230, 90, 69, 0.15), transparent 28%),
        linear-gradient(180deg, #0d1320 0%, #111827 100%);
}

.legal-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px max(16px, calc((100vw - 1120px) / 2));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 16, 28, 0.84);
    backdrop-filter: blur(18px);
}

.legal-shell {
    width: min(1120px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 28px 0 56px;
}

.legal-card {
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: rgba(14, 21, 34, 0.9);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.legal-hero {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

.legal-hero h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.legal-hero p {
    margin: 0;
    max-width: 860px;
    color: #d6dfed;
    font-size: 17px;
}

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.legal-meta span,
.legal-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    color: #dbe7f5;
    background: rgba(255, 255, 255, 0.05);
    font-size: 14px;
    font-weight: 800;
}

.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 8px;
}

.legal-nav a.active,
.legal-nav a:hover {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(0, 143, 122, 0.22), rgba(230, 90, 69, 0.18));
    border-color: rgba(94, 234, 212, 0.28);
}

.legal-section {
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-section h2 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 24px;
    letter-spacing: -0.02em;
}

.legal-section p {
    margin: 0 0 10px;
    color: #d3ddea;
    font-size: 16px;
    line-height: 1.7;
}

.legal-footer {
    width: min(1120px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 0 0 32px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: #b5c4d8;
    font-size: 14px;
}

.legal-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.legal-footer-links a {
    color: inherit;
}

.legal-note {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    color: #d8e3f0;
    background: rgba(255, 255, 255, 0.04);
    font-size: 14px;
    line-height: 1.7;
}

html.theme-light .auth-page-v31 .auth-footer-v2 {
    color: #516171 !important;
}

html.theme-light .auth-page-v31 .auth-legal-links a {
    color: #516171 !important;
}

html.theme-light .legal-page {
    color: #1a2a39;
    background:
        radial-gradient(circle at 14% -8%, rgba(0, 168, 145, 0.16), transparent 32%),
        radial-gradient(circle at 92% 0%, rgba(230, 90, 69, 0.15), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #eef6f5 100%);
}

html.theme-light .legal-header {
    border-bottom-color: rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.88);
}

html.theme-light .legal-card {
    background: rgba(255, 255, 255, 0.985);
    border-color: rgba(11, 24, 38, 0.14);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1);
}

html.theme-light .legal-hero p,
html.theme-light .legal-section p,
html.theme-light .legal-footer {
    color: #314456;
}

html.theme-light .legal-hero h1,
html.theme-light .legal-section h2,
html.theme-light .legal-header .brand {
    color: #0b1826;
}

html.theme-light .legal-meta span,
html.theme-light .legal-nav a {
    color: #183042;
    background: #f5fafc;
    border-color: rgba(11, 24, 38, 0.14);
}

html.theme-light .legal-nav a.active,
html.theme-light .legal-nav a:hover {
    color: #0b1826;
    background: linear-gradient(135deg, rgba(0, 143, 122, 0.14), rgba(230, 90, 69, 0.12));
    border-color: rgba(0, 143, 122, 0.24);
}

html.theme-light .legal-section {
    border-top-color: rgba(11, 24, 38, 0.08);
}

html.theme-light .legal-note {
    color: #314456;
    background: #f5fafc;
    border-color: rgba(11, 24, 38, 0.12);
}

@media (max-width: 760px) {
    .legal-header {
        padding-inline: 16px;
    }

    .legal-shell,
    .legal-footer {
        width: min(100vw - 24px, 1120px);
    }

    .legal-card {
        padding: 18px;
        border-radius: 18px;
    }

    .legal-hero h1 {
        font-size: 36px;
    }

    .legal-section h2 {
        font-size: 20px;
    }

    .legal-section p {
        font-size: 15px;
    }
}

.auth-inline-link {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--teal);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.auth-inline-link.compact {
    font-size: 13px;
}

.auth-inline-link:hover {
    color: var(--teal-dark);
}

.auth-reset-panel {
    display: grid;
    gap: 14px;
    margin: 16px 0 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.2);
}

.auth-reset-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.auth-reset-text {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.auth-form-compact {
    gap: 12px !important;
}

.auth-page-v31 .auth-inline-link {
    color: #7ef4e4 !important;
}

.auth-page-v31 .auth-inline-link:hover {
    color: #b8fff5 !important;
}

.auth-page-v31 .auth-reset-panel {
    border-color: rgba(148, 163, 184, 0.2) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.auth-page-v31 .auth-reset-text {
    color: #d7e2f0 !important;
}

html.theme-light .auth-inline-link {
    color: var(--nty-teal) !important;
}

html.theme-light .auth-inline-link:hover {
    color: var(--nty-coral) !important;
}

html.theme-light .auth-reset-panel {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

html.theme-light .auth-reset-text {
    color: var(--nty-light-text) !important;
}

.auth-form[hidden],
.auth-reset-panel[hidden],
.auth-reset-password-fields[hidden] {
    display: none !important;
}

.auth-box [data-auth-panel]:not([hidden]) {
    display: grid !important;
}

.auth-reset-panel .auth-form-compact:not([hidden]) {
    display: grid !important;
}

.app-v31.session-locked .app-mobile-header,
.app-v31.session-locked .app-topbar,
.app-v31.session-locked .app-sidebar,
.app-v31.session-locked .app-drawer-backdrop,
.app-v31.session-locked .user-pill,
.app-v31.session-locked .chat-list {
    display: none !important;
}

.app-v31.session-locked .app-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.app-v31.session-locked .app-view[data-view-panel="chats"] {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.app-v31.session-locked .chat-layout {
    display: block !important;
    min-height: 100dvh !important;
}

.app-v31.session-locked .chat-window {
    width: 100% !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
}

.app-v31.session-locked .message-list {
    min-height: calc(100dvh - 220px) !important;
    border-radius: 0 !important;
}

.app-v31 .message-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 18px !important;
    background:
        radial-gradient(circle at top right, rgba(32, 231, 199, 0.10), transparent 35%),
        radial-gradient(circle at bottom left, rgba(255, 114, 89, 0.12), transparent 36%),
        rgba(9, 12, 20, 0.78) !important;
}

.app-v31 .message-bubble {
    align-self: flex-start;
    display: grid;
    gap: 5px;
    width: fit-content;
    max-width: min(78%, 560px);
    padding: 10px 13px 8px;
    color: #f8fbff;
    background: rgba(22, 29, 42, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px 18px 18px 7px;
    box-shadow: 0 14px 28px rgba(3, 6, 14, 0.22);
}

.app-v31 .message-bubble.outgoing {
    align-self: flex-end;
    color: #ffffff;
    background: linear-gradient(135deg, #0ca68d, #27c7a7);
    border-color: rgba(77, 243, 213, 0.28);
    border-radius: 18px 18px 7px 18px;
}

.app-v31 .message-bubble strong {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: rgba(190, 251, 239, 0.92);
}

.app-v31 .message-bubble.outgoing strong {
    color: rgba(231, 255, 251, 0.94);
}

.app-v31 .message-bubble p {
    margin: 0;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.app-v31 .message-bubble small {
    justify-self: end;
    font-size: 11px;
    color: rgba(226, 232, 240, 0.74);
}

.app-v31 .message-bubble.outgoing small {
    color: rgba(255, 255, 255, 0.78);
}

html.theme-light .app-v31 .message-list {
    background:
        radial-gradient(circle at top right, rgba(32, 231, 199, 0.12), transparent 35%),
        radial-gradient(circle at bottom left, rgba(255, 114, 89, 0.10), transparent 36%),
        rgba(244, 248, 252, 0.98) !important;
}

html.theme-light .app-v31 .message-bubble {
    color: #17212b;
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.10);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

html.theme-light .app-v31 .message-bubble strong {
    color: #0f766e;
}

html.theme-light .app-v31 .message-bubble.outgoing {
    color: #ffffff;
    background: linear-gradient(135deg, #11b39b, #34d399);
}

html.theme-light .app-v31 .message-bubble small {
    color: rgba(71, 85, 105, 0.76);
}

/*
 * Next to you... v3.6.20_performance: chat viewport lock, taxonomy search, and fixed chat header/footer.
 * Author: Beck Sarbassov - Date updated: 2026-05-20.
 */

html.session-locked,
body.session-locked {
    height: 100%;
    overflow: hidden !important;
}

.app-v31.session-locked {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
}

.app-v31 .chat-window {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.app-v31 .chat-peer-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: #eff8ff;
    background: rgba(13, 18, 31, 0.92);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.app-v31 .chat-peer-brand {
    min-width: 0;
    flex: 1 1 auto;
    gap: 10px;
    padding-right: 6px;
}

.app-v31 .chat-peer-brand .brand-wordmark {
    max-width: 168px;
    font-size: 0.98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-v31 .chat-toolbar-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
    flex-wrap: nowrap;
}

.app-v31 .meeting-box-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.app-v31 .meeting-box-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.app-v31 .meeting-status-line,
.app-v31 .meeting-peer-line,
.app-v31 .meeting-time-line {
    margin: 0 0 8px;
}

.app-v31 .meeting-status-line strong,
.app-v31 .meeting-time-line strong {
    font-weight: 800;
}

.app-v31 .meeting-peer-line {
    font-weight: 700;
    color: #ecfeff;
}

.app-v31 .meeting-status-line,
.app-v31 .meeting-peer-line,
.app-v31 .meeting-time-line {
    font-size: 13px;
    line-height: 1.35;
}

.app-v31 .chat-warning,
.app-v31 .meeting-box,
.app-v31 .message-form {
    position: relative;
    z-index: 1;
}

.app-v31 .chat-warning {
    padding: 7px 12px;
    font-size: 11px;
    line-height: 1.35;
}

.app-v31 .meeting-box {
    padding: 8px 12px;
}

.app-v31 .message-list {
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.app-v31 .message-form {
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(9, 14, 26, 0.92);
}

.app-v31 .chat-peer-box .locale-switcher-select-wrap,
.app-v31 .chat-peer-box .theme-toggle {
    margin: 0 !important;
}

.app-v31 .chat-peer-box .locale-switcher-select {
    min-width: 84px !important;
    height: 38px !important;
    padding: 0 36px 0 12px !important;
    font-size: 13px !important;
}

.app-v31 .chat-peer-box .theme-toggle {
    width: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
}

.app-v31 .chat-peer-box .theme-toggle-text {
    display: none !important;
}

.app-v31 .chat-layout {
    min-height: 0;
}

.app-v31.session-locked .app-view[data-view-panel="chats"] {
    display: block !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.app-v31.session-locked .chat-layout {
    display: block !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
}

.app-v31.session-locked .app-main {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.app-v31.session-locked .chat-window {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.app-v31.session-locked .message-list {
    min-height: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
}

html.theme-light .app-v31 .chat-peer-box {
    color: #12202c;
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

html.theme-light .app-v31 .meeting-peer-line {
    color: #0f3f46;
}

html.theme-light .app-v31 .message-form {
    border-top-color: rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.96);
}

.app-v31 .message-bubble {
    box-shadow: 0 12px 26px rgba(3, 7, 18, 0.22);
}

.app-v31 .message-bubble strong {
    font-size: 13px;
    color: #f8fbff;
}

.app-v31 .message-bubble p {
    font-size: 16px;
    font-weight: 500;
    color: #eef6ff;
}

.app-v31 .message-bubble small {
    color: rgba(226, 232, 240, 0.86);
}

.app-v31 .message-bubble.incoming {
    background: #172133;
    border-color: rgba(88, 108, 145, 0.34);
}

.app-v31 .message-bubble.incoming strong {
    color: #dff7ff;
}

.app-v31 .message-bubble.incoming p {
    color: #f4f8ff;
}

.app-v31 .message-bubble.outgoing {
    background: linear-gradient(135deg, #0ea78e, #1fd3af);
    border-color: rgba(144, 255, 236, 0.34);
}

.app-v31 .message-bubble.outgoing strong,
.app-v31 .message-bubble.outgoing p,
.app-v31 .message-bubble.outgoing small {
    color: #ffffff !important;
}

html.theme-light .app-v31 .chat-warning {
    color: #8a5a08;
    background: rgba(255, 243, 214, 0.98);
    border-bottom-color: rgba(202, 138, 4, 0.18);
}

html.theme-light .app-v31 .meeting-box {
    background: rgba(224, 247, 243, 0.98);
    border-bottom-color: rgba(15, 118, 110, 0.16);
}

html.theme-light .app-v31 .meeting-status-line strong,
html.theme-light .app-v31 .meeting-time-line,
html.theme-light .app-v31 .meeting-box .privacy-note {
    color: #183145;
}

html.theme-light .app-v31 .message-bubble {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

html.theme-light .app-v31 .message-bubble strong {
    color: #0b5f60;
}

html.theme-light .app-v31 .message-bubble p {
    color: #13283a;
}

html.theme-light .app-v31 .message-bubble small {
    color: #496174;
}

html.theme-light .app-v31 .message-bubble.outgoing {
    background: linear-gradient(135deg, #0f9f8c, #14b8a6);
    border-color: rgba(13, 148, 136, 0.24);
}

html.theme-light .app-v31 .message-bubble.outgoing strong,
html.theme-light .app-v31 .message-bubble.outgoing p,
html.theme-light .app-v31 .message-bubble.outgoing small {
    color: #ffffff !important;
}

@media (max-width: 640px) {
    .app-v31 .chat-peer-box {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 8px 10px;
        gap: 6px;
    }

    .app-v31 .chat-peer-brand .brand-logo-shell {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
    }

    .app-v31 .chat-peer-brand .brand-wordmark {
        max-width: 118px;
        font-size: 0.88rem;
    }

    .app-v31 .chat-toolbar-controls {
        gap: 4px;
    }

    .app-v31 .chat-peer-box .locale-switcher-select-wrap {
        width: 76px !important;
        min-width: 76px !important;
    }

    .app-v31 .chat-peer-box .locale-switcher-select {
        min-width: 76px !important;
        width: 76px !important;
        height: 36px !important;
        padding: 0 26px 0 10px !important;
        font-size: 12px !important;
    }

    .app-v31 .chat-peer-box .theme-toggle {
        width: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .app-v31 .chat-warning {
        padding: 6px 10px;
        font-size: 10.5px;
        line-height: 1.3;
    }

    .app-v31 .meeting-box {
        padding: 7px 10px;
    }

    .app-v31 .meeting-status-line,
    .app-v31 .meeting-peer-line,
    .app-v31 .meeting-time-line {
        margin: 0 0 4px;
    }

    .app-v31 .meeting-status-line strong,
    .app-v31 .meeting-peer-line,
    .app-v31 .meeting-time-line {
        font-size: 11.5px;
        line-height: 1.25;
    }

    .app-v31 .meeting-box-inner {
        gap: 8px;
    }

    .app-v31 .meeting-box .inline-actions {
        gap: 8px !important;
    }

    .app-v31 .meeting-box .button.small {
        min-height: 38px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
    }
}


/*
 * Проект: Next to you...
 * Файл: assets/css/styles.css
 * Автор: Beck Sarbassov
 * Версия: 3.6.21_security
 * Дата выпуска: 2026-05-03
 * Последнее обновление: 2026-06-02
 * Авторские права: © Beck Sarbassov. Все права защищены.
 *
 * EN: Owner/admin login screen polish with responsive layout, readable fields, and accessible states.
 * RU: Финальная полировка страницы входа владельца/администратора с адаптивной вёрсткой, читаемыми полями и доступными состояниями.
 */
.owner-login-v2 {
    position: relative;
    overflow-x: hidden;
    align-items: center;
    justify-items: center;
    padding: max(22px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    color: #f8fafc !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(20, 184, 166, 0.26), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(255, 79, 63, 0.22), transparent 30%),
        linear-gradient(135deg, #071210 0%, #101827 54%, #17111a 100%) !important;
}

.owner-login-v2::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 82%);
}

.owner-login-v2 .secure-login-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 980px);
}

.owner-login-v2 .secure-login-card {
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.16) !important;
    border-radius: 32px !important;
    background: rgba(15, 23, 42, 0.82) !important;
    box-shadow: 0 30px 90px rgba(2, 6, 23, 0.48) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.owner-login-v2 .owner-login-hero,
.owner-login-v2 .owner-login-panel {
    position: relative;
    min-width: 0;
}

.owner-login-v2 .owner-login-hero {
    display: flex;
    min-height: 560px;
    padding: 34px;
    align-items: flex-end;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(0, 168, 145, 0.34), rgba(255, 79, 63, 0.24)),
        linear-gradient(180deg, rgba(3, 7, 18, 0.14), rgba(3, 7, 18, 0.76));
}

.owner-login-v2 .owner-login-hero::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 26px;
}

.owner-login-v2 .owner-login-orb {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    filter: blur(6px);
    opacity: 0.82;
}

.owner-login-v2 .owner-login-orb-teal {
    top: 38px;
    left: -58px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.72), transparent 64%);
}

.owner-login-v2 .owner-login-orb-coral {
    right: -70px;
    bottom: 80px;
    background: radial-gradient(circle, rgba(255, 79, 63, 0.64), transparent 66%);
}

.owner-login-v2 .owner-login-hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    max-width: 360px;
}

.owner-login-v2 .owner-login-lock {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #062621;
    background: linear-gradient(135deg, #7ef4e4, #ffffff);
    box-shadow: 0 18px 40px rgba(20, 184, 166, 0.28);
    font-size: 24px;
    font-weight: 950;
}

.owner-login-v2 .owner-login-hero p,
.owner-login-v2 .owner-login-hero strong,
.owner-login-v2 .owner-login-hero small {
    margin: 0;
    color: #ffffff !important;
    text-shadow: 0 2px 20px rgba(2, 6, 23, 0.24);
}

.owner-login-v2 .owner-login-hero p {
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.82;
}

.owner-login-v2 .owner-login-hero strong {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.owner-login-v2 .owner-login-hero small {
    max-width: 320px;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 15px;
    line-height: 1.55;
}

.owner-login-v2 .owner-login-panel {
    display: grid;
    align-content: center;
    gap: 22px;
    padding: clamp(28px, 5vw, 48px);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(9, 14, 28, 0.98));
}

.owner-login-v2 .owner-login-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.owner-login-v2 .brand {
    max-width: 230px;
    color: #ffffff !important;
}

.owner-login-v2 .brand-wordmark {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.owner-login-v2 .brand-mark.brand-logo-shell {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.owner-login-v2 .auth-preferences {
    flex: 0 0 auto;
}

.owner-login-v2 .locale-switcher {
    min-width: 108px;
    border-color: rgba(226, 232, 240, 0.16) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.owner-login-v2 .locale-switcher-select,
.owner-login-v2 .theme-toggle {
    color: #f8fafc !important;
}

.owner-login-v2 .theme-toggle {
    min-height: 44px;
    border: 1px solid rgba(226, 232, 240, 0.16) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.owner-login-v2 .owner-login-copy {
    display: grid;
    gap: 10px;
}

.owner-login-v2 .eyebrow {
    margin: 0 !important;
    color: #7ef4e4 !important;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.owner-login-v2 .secure-login-card h1 {
    max-width: 520px;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(34px, 4.6vw, 54px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.065em !important;
}

.owner-login-v2 .owner-login-copy p:not(.eyebrow) {
    max-width: 460px;
    margin: 0;
    color: #cbd5e1 !important;
    font-size: 16px;
    line-height: 1.6;
}

.owner-login-v2 .owner-login-form {
    display: grid !important;
    gap: 16px !important;
}

.owner-login-v2 .owner-field {
    gap: 9px;
    color: #f8fafc !important;
    font-size: 14px;
    font-weight: 900;
}

.owner-login-v2 .owner-field input {
    min-height: 58px !important;
    padding: 0 18px !important;
    border-radius: 18px !important;
    color: #f8fafc !important;
    background: rgba(15, 23, 42, 0.82) !important;
    border: 1px solid rgba(226, 232, 240, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.owner-login-v2 .owner-field input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

.owner-login-v2 .owner-field input:focus {
    border-color: rgba(45, 212, 191, 0.72) !important;
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.owner-login-v2 .owner-login-submit {
    min-height: 58px !important;
    border-radius: 18px !important;
    font-size: 16px;
    font-weight: 950;
}

.owner-login-v2 .form-message {
    margin-top: 0 !important;
    border-radius: 16px !important;
}

.owner-login-v2 .owner-security-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.owner-login-v2 .owner-security-list li {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 16px;
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.12);
    font-size: 13px;
    font-weight: 800;
}

.owner-login-v2 .owner-security-list li::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #2dd4bf;
    box-shadow: 0 0 0 5px rgba(45, 212, 191, 0.12);
}

html.theme-light .owner-login-v2 {
    color: #0f172a !important;
    background:
        radial-gradient(circle at 14% 8%, rgba(0, 168, 145, 0.18), transparent 28%),
        radial-gradient(circle at 88% 6%, rgba(255, 79, 63, 0.14), transparent 30%),
        linear-gradient(135deg, #f8fafc 0%, #eef6f5 100%) !important;
}

html.theme-light .owner-login-v2 .secure-login-card {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.14) !important;
}

html.theme-light .owner-login-v2 .owner-login-panel {
    background: rgba(255, 255, 255, 0.92) !important;
}

html.theme-light .owner-login-v2 .brand,
html.theme-light .owner-login-v2 .secure-login-card h1,
html.theme-light .owner-login-v2 .owner-field,
html.theme-light .owner-login-v2 .locale-switcher-select,
html.theme-light .owner-login-v2 .theme-toggle {
    color: #0f172a !important;
}

html.theme-light .owner-login-v2 .owner-login-copy p:not(.eyebrow),
html.theme-light .owner-login-v2 .owner-security-list li {
    color: #475569 !important;
}

html.theme-light .owner-login-v2 .locale-switcher,
html.theme-light .owner-login-v2 .theme-toggle,
html.theme-light .owner-login-v2 .owner-security-list li {
    background: rgba(248, 250, 252, 0.84) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

html.theme-light .owner-login-v2 .owner-field input {
    color: #0f172a !important;
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
}

@media (max-width: 820px) {
    .owner-login-v2 .secure-login-card {
        grid-template-columns: 1fr;
    }

    .owner-login-v2 .owner-login-hero {
        min-height: 220px;
        padding: 26px;
    }
}

@media (max-width: 560px) {
    .owner-login-v2 {
        padding: 0 !important;
    }

    .owner-login-v2 .secure-login-shell,
    .owner-login-v2 .secure-login-card {
        width: 100%;
        min-height: 100vh;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .owner-login-v2 .owner-login-hero {
        min-height: 170px;
        padding: 22px;
    }

    .owner-login-v2 .owner-login-hero::before {
        inset: 12px;
        border-radius: 22px;
    }

    .owner-login-v2 .owner-login-hero strong {
        font-size: 30px;
    }

    .owner-login-v2 .owner-login-panel {
        padding: 22px 16px 26px;
        align-content: start;
    }

    .owner-login-v2 .owner-login-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .owner-login-v2 .auth-preferences {
        width: 100%;
        justify-content: space-between;
    }

    .owner-login-v2 .secure-login-card h1 {
        font-size: 34px !important;
    }

    .owner-login-v2 .owner-security-list {
        grid-template-columns: 1fr;
    }
}

/*
 * Project: Next to you...
 * File: styles.css
 * Author: Beck Sarbassov
 * Version: 3.10.1
 * Date created: 2026-05-03
 * Last updated: 2026-07-14
 * Copyright: (c) Beck Sarbassov, 2026. All rights reserved.
 *
 * EN: CRM workspace override layer for the admin panel.
 * RU: Слой CRM-оформления для обновлённой панели администратора.
 */

.admin-v33 {
    --admin-sidebar-width: 288px;
    --admin-border: rgba(148, 163, 184, 0.18);
    --admin-border-strong: rgba(148, 163, 184, 0.28);
    --admin-panel-dark: #111b2f;
    --admin-panel-dark-soft: #16233d;
    --admin-panel-dark-elevated: #1a2947;
    --admin-panel-light: #ffffff;
    --admin-panel-light-soft: #f6f8fc;
    --admin-shadow-dark: 0 18px 48px rgba(2, 6, 23, 0.28);
    --admin-shadow-light: 0 22px 56px rgba(15, 23, 42, 0.08);
    --admin-accent-start: #0ea5a4;
    --admin-accent-end: #f36d4f;
}

.admin-v33 .admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
    background:
        radial-gradient(circle at top left, rgba(14, 165, 164, 0.08), transparent 30%),
        radial-gradient(circle at top right, rgba(243, 109, 79, 0.08), transparent 28%),
        #0b1324;
}

.admin-v33 .admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 24px 20px 22px;
    border-right: 1px solid var(--admin-border);
    background: linear-gradient(180deg, rgba(11, 19, 36, 0.98), rgba(14, 24, 46, 0.98));
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
    z-index: 12;
}

.admin-v33 .admin-brand {
    gap: 12px;
    margin-bottom: 2px;
}

.admin-v33 .admin-brand .brand-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.24);
}

.admin-v33 .admin-brand .brand-wordmark {
    color: #f8fafc;
    font-size: 26px;
    font-weight: 950;
    letter-spacing: -0.05em;
}

.admin-v33 .admin-sidebar-copy {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 20px;
    color: #cbd5e1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(148, 163, 184, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-v33 .admin-sidebar-copy strong {
    color: #f8fafc;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.admin-v33 .admin-sidebar-copy span {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.55;
}

.admin-v33 .admin-nav {
    display: grid;
    gap: 8px;
}

.admin-v33 .admin-nav-item,
.admin-v33 .admin-sidebar-footer a {
    min-height: 48px;
    justify-content: flex-start;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid transparent;
    color: #cbd5e1;
    background: transparent;
    font-size: 14px;
    font-weight: 850;
    text-align: left;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.admin-v33 .admin-nav-item:hover,
.admin-v33 .admin-nav-item:focus-visible,
.admin-v33 .admin-sidebar-footer a:hover,
.admin-v33 .admin-sidebar-footer a:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(148, 163, 184, 0.18);
    transform: translateX(2px);
}

.admin-v33 .admin-nav-item.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(14, 165, 164, 0.2), rgba(243, 109, 79, 0.14));
    border-color: rgba(45, 212, 191, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.admin-v33 .admin-sidebar-footer {
    margin-top: auto;
    display: grid;
}

.admin-v33 .admin-logout-link {
    display: inline-flex;
    align-items: center;
    color: #fca5a5;
}

.admin-v33 .admin-workspace {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-v33 .admin-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 22px 28px;
    border-bottom: 1px solid var(--admin-border);
    background:
        linear-gradient(90deg, rgba(12, 22, 40, 0.98), rgba(17, 27, 47, 0.98));
    backdrop-filter: blur(20px);
}

.admin-v33 .admin-menu-toggle {
    width: 46px;
    height: 46px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.18);
}

.admin-v33 .admin-topbar-heading {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.admin-v33 .admin-topbar .eyebrow {
    margin: 0;
    color: #67e8f9;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.admin-v33 .admin-topbar h1 {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(34px, 3.2vw, 58px);
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.admin-v33 .admin-topbar-copy {
    max-width: 920px;
    margin: 0;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.55;
}

.admin-v33 .admin-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.admin-v33 .toolbar-preferences {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-v33 .toolbar-preferences strong {
    color: #f8fafc;
    font-size: 14px;
    font-weight: 850;
}

.admin-v33 .locale-switcher-select,
.admin-v33 .theme-toggle {
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.6);
    color: #f8fafc;
    font-weight: 800;
}

.admin-v33 .locale-switcher-select {
    min-width: 88px;
    padding-inline: 14px 34px;
}

.admin-v33 .theme-toggle {
    padding-inline: 14px;
}

.admin-v33 .presence-dot {
    margin-inline-start: 2px;
}

.admin-v33 .admin-main {
    width: 100%;
    margin: 0;
    padding: 28px;
}

.admin-v33 .form-message {
    margin-bottom: 18px;
}

.admin-v33 .admin-panel {
    display: none;
    gap: 18px;
}

.admin-v33 .admin-panel.active {
    display: grid;
}

.admin-v33 .admin-panel > h2,
.admin-v33 .admin-section-head h2 {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(28px, 2vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.admin-v33 .admin-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.admin-v33 .admin-section-head > div {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.admin-v33 .admin-section-copy,
.admin-v33 .admin-lead {
    max-width: 960px;
    margin: 0;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.65;
}

.admin-v33 .admin-crm-dashboard,
.admin-v33 .admin-crm-panel,
.admin-v33 .settings-card {
    border-radius: 24px;
    border: 1px solid var(--admin-border);
    background: linear-gradient(180deg, rgba(17, 27, 47, 0.98), rgba(13, 22, 38, 0.98));
    box-shadow: var(--admin-shadow-dark);
}

.admin-v33 .admin-crm-dashboard {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.admin-v33 .admin-crm-kpi-grid,
.admin-v33 .admin-metrics,
.admin-v33 .settings-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.admin-v33 .admin-crm-kpi-card,
.admin-v33 .admin-metric,
.admin-v33 .admin-crm-panel,
.admin-v33 .settings-card {
    padding: 22px;
}

.admin-v33 .admin-crm-kpi-card,
.admin-v33 .admin-metric {
    grid-column: span 3;
    display: grid;
    gap: 10px;
    min-height: 148px;
}

.admin-v33 .admin-crm-kpi-card::before,
.admin-v33 .admin-metric::before {
    content: "";
    width: 56px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--admin-accent-start), var(--admin-accent-end));
}

.admin-v33 .admin-crm-count,
.admin-v33 .admin-metric strong {
    color: #f8fafc;
    font-size: clamp(30px, 2.2vw, 48px);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.admin-v33 .admin-crm-label,
.admin-v33 .admin-metric span {
    color: #cbd5e1;
    font-size: 15px;
    font-weight: 800;
}

.admin-v33 .admin-crm-meta {
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.admin-v33 .admin-crm-kpi-label {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-v33 .admin-crm-kpi-value {
    color: #f8fafc;
    font-size: clamp(32px, 2.2vw, 48px);
    line-height: 0.94;
    letter-spacing: -0.05em;
}

.admin-v33 .admin-crm-secondary-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.admin-v33 .admin-crm-secondary-grid > .admin-crm-panel {
    grid-column: span 6;
}

.admin-v33 .admin-crm-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-v33 .admin-crm-panel h3 {
    margin: 0 0 12px;
    color: #f8fafc;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.admin-v33 .admin-crm-toolbar {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.admin-v33 .admin-crm-toolbar-copy {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.admin-v33 .admin-crm-toolbar-copy h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 28px;
    letter-spacing: -0.04em;
}

.admin-v33 .admin-crm-toolbar-copy p {
    max-width: 900px;
    margin: 6px 0 0;
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.6;
}

.admin-v33 .admin-crm-toolbar-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.admin-v33 .admin-crm-toolbar-grid > * {
    grid-column: span 3;
}

.admin-v33 .admin-crm-toolbar-grid > button {
    align-self: end;
}

.admin-v33 .admin-crm-control,
.admin-v33 .admin-crm-toolbar-grid input,
.admin-v33 .admin-crm-toolbar-grid select,
.admin-v33 .settings-form input,
.admin-v33 .settings-form select,
.admin-v33 .settings-form textarea {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid var(--admin-border-strong);
    background: rgba(10, 17, 31, 0.88);
    color: #f8fafc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.admin-v33 .admin-crm-toolbar-grid label,
.admin-v33 .settings-form label {
    display: grid;
    gap: 8px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 800;
}

.admin-v33 .admin-crm-toolbar-grid span,
.admin-v33 .settings-form label > span {
    color: #94a3b8;
}

.admin-v33 .admin-crm-table-wrap {
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid var(--admin-border);
    background: linear-gradient(180deg, rgba(17, 27, 47, 0.98), rgba(13, 22, 38, 0.98));
    box-shadow: var(--admin-shadow-dark);
}

.admin-v33 .admin-crm-table-scroll {
    overflow: auto;
}

.admin-v33 .admin-crm-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
}

.admin-v33 .admin-crm-table.compact {
    min-width: 0;
}

.admin-v33 .admin-crm-table th,
.admin-v33 .admin-crm-table td {
    padding: 18px 16px;
    vertical-align: top;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.admin-v33 .admin-crm-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #94a3b8;
    background: rgba(17, 27, 47, 0.98);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-v33 .admin-crm-table tbody tr {
    transition: background-color 0.16s ease;
}

.admin-v33 .admin-crm-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.035);
}

.admin-v33 .admin-crm-cell-stack {
    display: grid;
    gap: 6px;
}

.admin-v33 .admin-crm-cell-title {
    color: #f8fafc;
    font-size: 14px;
    font-weight: 900;
}

.admin-v33 .admin-crm-inline-note,
.admin-v33 .admin-crm-links a,
.admin-v33 .admin-crm-table td,
.admin-v33 .admin-crm-empty-inline {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.55;
}

.admin-v33 .admin-crm-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-v33 .admin-crm-links a {
    color: #7dd3fc;
}

.admin-v33 .admin-crm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 13px;
    font-weight: 900;
}

.admin-v33 .admin-crm-badge.success {
    color: #b6f7e8;
    background: rgba(16, 185, 129, 0.16);
    border-color: rgba(16, 185, 129, 0.22);
}

.admin-v33 .admin-crm-badge.warning {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.22);
}

.admin-v33 .admin-crm-badge.danger {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.22);
}

.admin-v33 .admin-crm-badge.info {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.22);
}

.admin-v33 .admin-crm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-v33 .admin-crm-actions.compact {
    margin-top: 8px;
}

.admin-v33 .admin-crm-actions .button,
.admin-v33 .admin-refresh-btn {
    min-height: 40px;
    padding-inline: 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 900;
}

.admin-v33 .admin-crm-actions .button.button-secondary,
.admin-v33 .admin-refresh-btn {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(30, 41, 59, 0.9);
    color: #f8fafc;
}

.admin-v33 .admin-crm-actions .button.button-secondary:hover,
.admin-v33 .admin-refresh-btn:hover {
    background: rgba(51, 65, 85, 0.96);
    color: #ffffff;
}

.admin-v33 .admin-crm-actions .button.button-primary {
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, var(--admin-accent-start), var(--admin-accent-end));
    box-shadow: 0 12px 24px rgba(14, 165, 164, 0.18);
}

.admin-v33 .admin-crm-actions .button.button-danger,
.admin-v33 .admin-crm-actions .button.button-delete,
.admin-v33 .admin-crm-actions .button[data-user-status="blocked"],
.admin-v33 .admin-crm-actions .button[data-delete-user] {
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.admin-v33 .admin-crm-loading,
.admin-v33 .admin-crm-empty {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 240px;
    text-align: center;
    color: #94a3b8;
}

.admin-v33 .admin-crm-empty strong {
    color: #f8fafc;
    font-size: 18px;
}

.admin-v33 .admin-crm-kpi-card.tone-success,
.admin-v33 .admin-crm-badge.tone-success {
    border-color: rgba(16, 185, 129, 0.22);
}

.admin-v33 .admin-crm-kpi-card.tone-success::before {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.admin-v33 .admin-crm-badge.tone-success {
    color: #b6f7e8;
    background: rgba(16, 185, 129, 0.16);
}

.admin-v33 .admin-crm-kpi-card.tone-warning,
.admin-v33 .admin-crm-badge.tone-warning {
    border-color: rgba(245, 158, 11, 0.22);
}

.admin-v33 .admin-crm-kpi-card.tone-warning::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.admin-v33 .admin-crm-badge.tone-warning {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.12);
}

.admin-v33 .admin-crm-kpi-card.tone-danger,
.admin-v33 .admin-crm-badge.tone-danger {
    border-color: rgba(239, 68, 68, 0.22);
}

.admin-v33 .admin-crm-kpi-card.tone-danger::before {
    background: linear-gradient(90deg, #ef4444, #fb7185);
}

.admin-v33 .admin-crm-badge.tone-danger {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.14);
}

.admin-v33 .admin-crm-kpi-card.tone-info,
.admin-v33 .admin-crm-badge.tone-info,
.admin-v33 .admin-crm-kpi-card.tone-blue {
    border-color: rgba(99, 102, 241, 0.2);
}

.admin-v33 .admin-crm-kpi-card.tone-info::before,
.admin-v33 .admin-crm-kpi-card.tone-blue::before {
    background: linear-gradient(90deg, #6366f1, #38bdf8);
}

.admin-v33 .admin-crm-badge.tone-info {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.14);
}

.admin-v33 .admin-crm-badge.tone-neutral {
    color: #dbeafe;
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.22);
}

.admin-v33 .admin-crm-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px 0;
    color: #94a3b8;
    font-size: 13px;
}

.admin-v33 .admin-crm-pagination-actions {
    display: inline-flex;
    gap: 10px;
}

.admin-v33 .admin-crm-pagination-controls {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.admin-v33 .admin-crm-page-btn {
    min-width: 118px;
}

.admin-v33 .admin-crm-stat-list {
    display: grid;
    gap: 12px;
}

.admin-v33 .admin-crm-stat-list > div,
.admin-v33 .admin-crm-admin-item,
.admin-v33 .admin-crm-subcard {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.03);
}

.admin-v33 .admin-crm-stat-list span,
.admin-v33 .admin-crm-inline-meta,
.admin-v33 .settings-list,
.admin-v33 .settings-list li {
    color: #94a3b8;
}

.admin-v33 .admin-crm-stat-list strong,
.admin-v33 .admin-crm-admin-item strong,
.admin-v33 .settings-card h3 {
    color: #f8fafc;
}

.admin-v33 .admin-crm-admin-list,
.admin-v33 .settings-form {
    display: grid;
    gap: 14px;
}

.admin-v33 .admin-crm-bullet-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
    color: #cbd5e1;
}

.admin-v33 .admin-crm-dot {
    width: 10px;
    height: 10px;
    display: inline-flex;
    border-radius: 999px;
    margin-right: 8px;
    background: #64748b;
    box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.15);
}

.admin-v33 .admin-crm-dot.is-online {
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}

.admin-v33 .admin-crm-dot.is-offline {
    background: #94a3b8;
}

.admin-v33 .settings-grid {
    align-items: start;
}

.admin-v33 .settings-card {
    display: grid;
    gap: 16px;
}

.admin-v33 .settings-card:nth-child(1) {
    grid-column: span 5;
}

.admin-v33 .settings-card:nth-child(2),
.admin-v33 .settings-card:nth-child(3) {
    grid-column: span 3;
}

.admin-v33 .settings-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.admin-v33 .settings-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

.admin-v33 .settings-list strong,
.admin-v33 .settings-list b {
    color: #f8fafc;
}

html.theme-light .admin-v33 .admin-shell {
    background:
        radial-gradient(circle at top left, rgba(14, 165, 164, 0.08), transparent 28%),
        radial-gradient(circle at top right, rgba(243, 109, 79, 0.08), transparent 24%),
        #edf3f8;
}

html.theme-light .admin-v33 .admin-sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 252, 0.98));
    border-right-color: rgba(148, 163, 184, 0.16);
    box-shadow: inset -1px 0 0 rgba(15, 23, 42, 0.03);
}

html.theme-light .admin-v33 .admin-brand .brand-wordmark,
html.theme-light .admin-v33 .admin-sidebar-copy strong,
html.theme-light .admin-v33 .admin-topbar h1,
html.theme-light .admin-v33 .admin-panel > h2,
html.theme-light .admin-v33 .admin-section-head h2,
html.theme-light .admin-v33 .admin-crm-toolbar-copy h3,
html.theme-light .admin-v33 .admin-crm-count,
html.theme-light .admin-v33 .admin-metric strong,
html.theme-light .admin-v33 .admin-crm-panel h3,
html.theme-light .admin-v33 .settings-card h3,
html.theme-light .admin-v33 .settings-list strong,
html.theme-light .admin-v33 .admin-crm-cell-title {
    color: #0f172a;
}

html.theme-light .admin-v33 .admin-sidebar-copy,
html.theme-light .admin-v33 .admin-crm-dashboard,
html.theme-light .admin-v33 .admin-crm-panel,
html.theme-light .admin-v33 .settings-card,
html.theme-light .admin-v33 .admin-crm-table-wrap {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: var(--admin-shadow-light);
}

html.theme-light .admin-v33 .admin-topbar {
    background: rgba(255, 255, 255, 0.9);
    border-bottom-color: rgba(148, 163, 184, 0.16);
}

html.theme-light .admin-v33 .admin-topbar-copy,
html.theme-light .admin-v33 .admin-section-copy,
html.theme-light .admin-v33 .admin-lead,
html.theme-light .admin-v33 .admin-crm-toolbar-copy p,
html.theme-light .admin-v33 .admin-crm-meta,
html.theme-light .admin-v33 .admin-crm-inline-note,
html.theme-light .admin-v33 .admin-crm-table td,
html.theme-light .admin-v33 .admin-crm-empty,
html.theme-light .admin-v33 .settings-list,
html.theme-light .admin-v33 .admin-sidebar-copy span {
    color: #475569;
}

html.theme-light .admin-v33 .admin-nav-item,
html.theme-light .admin-v33 .admin-sidebar-footer a {
    color: #334155;
}

html.theme-light .admin-v33 .admin-nav-item:hover,
html.theme-light .admin-v33 .admin-nav-item:focus-visible,
html.theme-light .admin-v33 .admin-sidebar-footer a:hover,
html.theme-light .admin-v33 .admin-sidebar-footer a:focus-visible {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(148, 163, 184, 0.18);
}

html.theme-light .admin-v33 .admin-nav-item.active {
    color: #0f172a;
    background: linear-gradient(135deg, rgba(14, 165, 164, 0.16), rgba(243, 109, 79, 0.12));
}

html.theme-light .admin-v33 .toolbar-preferences,
html.theme-light .admin-v33 .locale-switcher-select,
html.theme-light .admin-v33 .theme-toggle,
html.theme-light .admin-v33 .admin-crm-control,
html.theme-light .admin-v33 .admin-crm-toolbar-grid input,
html.theme-light .admin-v33 .admin-crm-toolbar-grid select,
html.theme-light .admin-v33 .settings-form input,
html.theme-light .admin-v33 .settings-form select,
html.theme-light .admin-v33 .settings-form textarea {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(148, 163, 184, 0.24);
}

html.theme-light .admin-v33 .admin-crm-table th {
    color: #64748b;
    background: rgba(248, 250, 252, 0.98);
}

html.theme-light .admin-v33 .admin-crm-table tbody tr:hover {
    background: rgba(15, 23, 42, 0.03);
}

html.theme-light .admin-v33 .admin-crm-actions .button.button-secondary,
html.theme-light .admin-v33 .admin-refresh-btn {
    color: #0f172a;
    background: rgba(241, 245, 249, 0.96);
    border-color: rgba(148, 163, 184, 0.24);
}

html.theme-light .admin-v33 .admin-crm-actions .button.button-secondary:hover,
html.theme-light .admin-v33 .admin-refresh-btn:hover {
    background: rgba(226, 232, 240, 0.96);
    color: #0f172a;
}

@media (max-width: 1400px) {
    .admin-v33 .admin-crm-kpi-card,
    .admin-v33 .admin-metric {
        grid-column: span 4;
    }

    .admin-v33 .admin-crm-secondary-grid > .admin-crm-panel {
        grid-column: span 12;
    }

    .admin-v33 .settings-card:nth-child(1),
    .admin-v33 .settings-card:nth-child(2),
    .admin-v33 .settings-card:nth-child(3) {
        grid-column: span 12;
    }
}

@media (max-width: 1180px) {
    .admin-v33 .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-v33 .admin-menu-toggle {
        display: inline-flex;
    }

    .admin-v33 .admin-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(88vw, var(--admin-sidebar-width));
        transform: translateX(-104%);
        transition: transform 0.2s ease;
    }

    .admin-v33 .admin-sidebar.open {
        transform: translateX(0);
    }

    .admin-v33 .admin-topbar {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .admin-v33 .admin-topbar-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 920px) {
    .admin-v33 .admin-main,
    .admin-v33 .admin-topbar {
        padding-inline: 18px;
    }

    .admin-v33 .admin-crm-kpi-card,
    .admin-v33 .admin-metric {
        grid-column: span 6;
    }

    .admin-v33 .admin-crm-toolbar-grid > * {
        grid-column: span 6;
    }

    .admin-v33 .admin-crm-grid-two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .admin-v33 .admin-topbar {
        padding: 16px 14px;
    }

    .admin-v33 .admin-main {
        padding: 16px 14px 28px;
    }

    .admin-v33 .toolbar-preferences {
        width: 100%;
        justify-content: space-between;
    }

    .admin-v33 .admin-crm-kpi-grid,
    .admin-v33 .admin-metrics,
    .admin-v33 .admin-crm-secondary-grid,
    .admin-v33 .admin-crm-toolbar-grid,
    .admin-v33 .settings-grid {
        grid-template-columns: 1fr;
    }

    .admin-v33 .admin-crm-kpi-card,
    .admin-v33 .admin-metric,
    .admin-v33 .admin-crm-secondary-grid > .admin-crm-panel,
    .admin-v33 .admin-crm-toolbar-grid > *,
    .admin-v33 .settings-card {
        grid-column: span 1;
    }

    .admin-v33 .admin-crm-pagination {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-v33 .admin-crm-pagination-actions {
        width: 100%;
    }

    .admin-v33 .admin-crm-page-btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Admin CRM readability patch: keep dashboard metrics readable in both themes. */
html.theme-light body.admin-page.admin-v33,
html.theme-light .admin-v33 {
    color: #0f172a;
}

html.theme-light .admin-v33 .admin-main {
    background:
        radial-gradient(circle at 12% 14%, rgba(14, 165, 164, 0.1), transparent 30%),
        radial-gradient(circle at 86% 10%, rgba(243, 109, 79, 0.1), transparent 28%),
        linear-gradient(180deg, #f4f8fb 0%, #eef4f8 100%);
}

html.theme-light .admin-v33 .admin-crm-dashboard,
html.theme-light .admin-v33 .admin-crm-panel,
html.theme-light .admin-v33 .admin-crm-table-wrap,
html.theme-light .admin-v33 .settings-card {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(100, 116, 139, 0.22);
    box-shadow: 0 20px 52px rgba(15, 23, 42, 0.1);
}

html.theme-light .admin-v33 .admin-crm-kpi-card,
html.theme-light .admin-v33 .admin-metric {
    color: #0f172a;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.99));
    border: 1px solid rgba(100, 116, 139, 0.2);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

html.theme-light .admin-v33 .admin-crm-kpi-label,
html.theme-light .admin-v33 .admin-crm-label,
html.theme-light .admin-v33 .admin-metric span {
    color: #334155;
    opacity: 1;
    text-shadow: none;
}

html.theme-light .admin-v33 .admin-crm-kpi-value,
html.theme-light .admin-v33 .admin-crm-count,
html.theme-light .admin-v33 .admin-metric strong {
    color: #0f172a;
    opacity: 1;
    text-shadow: none;
}

html.theme-light .admin-v33 .admin-crm-meta,
html.theme-light .admin-v33 .admin-crm-stat-list span,
html.theme-light .admin-v33 .admin-crm-inline-meta,
html.theme-light .admin-v33 .settings-list,
html.theme-light .admin-v33 .settings-list li,
html.theme-light .admin-v33 .admin-crm-table td,
html.theme-light .admin-v33 .admin-crm-empty-inline {
    color: #475569;
    opacity: 1;
}

html.theme-light .admin-v33 .admin-crm-stat-list strong,
html.theme-light .admin-v33 .admin-crm-admin-item strong,
html.theme-light .admin-v33 .settings-list strong,
html.theme-light .admin-v33 .settings-list b,
html.theme-light .admin-v33 .admin-crm-cell-title {
    color: #0f172a;
    opacity: 1;
}

html.theme-light .admin-v33 .admin-crm-stat-list > div,
html.theme-light .admin-v33 .admin-crm-admin-item,
html.theme-light .admin-v33 .admin-crm-subcard,
html.theme-light .admin-v33 .settings-list li {
    background: #f8fafc;
    border-color: rgba(100, 116, 139, 0.18);
}

html.theme-light .admin-v33 .toolbar-preferences {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(100, 116, 139, 0.22);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

html.theme-light .admin-v33 .toolbar-preferences strong,
html.theme-light .admin-v33 .theme-toggle,
html.theme-light .admin-v33 .theme-toggle-text,
html.theme-light .admin-v33 .locale-switcher-select {
    color: #0f172a;
    opacity: 1;
}

html.theme-light .admin-v33 .admin-crm-table th {
    color: #334155;
    background: #eef4f8;
}

html.theme-light .admin-v33 .admin-crm-table tbody tr:hover {
    background: rgba(14, 165, 164, 0.08);
}

html:not(.theme-light) .admin-v33 .admin-crm-kpi-value,
html:not(.theme-light) .admin-v33 .admin-crm-count,
html:not(.theme-light) .admin-v33 .admin-metric strong,
html:not(.theme-light) .admin-v33 .admin-crm-stat-list strong,
html:not(.theme-light) .admin-v33 .settings-list strong,
html:not(.theme-light) .admin-v33 .settings-list b {
    color: #f8fafc;
    opacity: 1;
}

html:not(.theme-light) .admin-v33 .admin-crm-kpi-label,
html:not(.theme-light) .admin-v33 .admin-crm-label,
html:not(.theme-light) .admin-v33 .admin-metric span,
html:not(.theme-light) .admin-v33 .admin-crm-stat-list span,
html:not(.theme-light) .admin-v33 .settings-list,
html:not(.theme-light) .admin-v33 .settings-list li {
    color: #cbd5e1;
    opacity: 1;
}

@media (max-width: 1180px) {
    html.theme-light .admin-v33 .admin-topbar,
    html:not(.theme-light) .admin-v33 .admin-topbar {
        position: sticky;
    }

    .admin-v33 .admin-topbar-actions {
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .admin-v33 .admin-crm-kpi-card,
    .admin-v33 .admin-metric,
    .admin-v33 .admin-crm-panel,
    .admin-v33 .settings-card {
        padding: 18px;
        border-radius: 20px;
    }

    .admin-v33 .admin-crm-table {
        min-width: 920px;
    }

    .admin-v33 .admin-crm-table.compact {
        min-width: 720px;
    }
}

/*
 * Project: Next to you...
 * File: assets/css/styles.css
 * Author: Beck Sarbassov
 * Version: 3.10.1
 * Date released: 2026-06-29
 * Last updated: 2026-07-14
 * Copyright: (c) Beck Sarbassov. All rights reserved.
 *
 * EN: Stabilizes tariff PayPal panels and compact chat input layout after v3.7.0 checkout changes.
 * RU: Стабилизирует панели PayPal в тарифах и компактную форму чата после изменений оплаты v3.7.0.
 */
.app-v31 .message-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 68px !important;
    max-height: 86px !important;
    padding: 10px 12px !important;
}

.app-v31 #messageInput {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
}

.app-v31 .message-form .button {
    width: auto !important;
    min-width: 118px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 18px !important;
    align-self: center !important;
    white-space: nowrap !important;
}

.app-v31 .chat-window {
    min-height: min(760px, calc(100dvh - 190px)) !important;
}

.app-v31.session-locked .chat-window {
    min-height: 100dvh !important;
}

@media (max-width: 640px) {
    .app-v31 .message-form {
        grid-template-columns: minmax(0, 1fr) 52px !important;
        min-height: 64px !important;
        max-height: 76px !important;
        padding: 8px !important;
    }

    .app-v31 #messageInput {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 12px !important;
    }

    .app-v31 .message-form .button {
        width: 52px !important;
        min-width: 52px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    .app-v31 .message-form .button::before {
        content: ">";
        font-size: 20px;
        line-height: 1;
    }
}

@media (min-width: 1024px) {
    .app-v31 .tariff-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .app-v31 .tariff-layout > .side-panel,
    .app-v31 #pendingTariffBox {
        grid-column: 1 / -1 !important;
    }

    .app-v31 .tariff-grid {
        grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
        align-items: stretch !important;
    }
}

.app-v31 #tariffPaymentBox {
    display: none !important;
}

/*
 * EN: v3.7.01 verification state cards for warning, approved profile, and repeat verification flow.
 * RU: Карточки состояния верификации v3.7.01 для предупреждения, проверенного профиля и повторной заявки.
 */
.app-v31 .verification-state-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(245, 158, 11, 0.44);
    border-radius: 20px;
    background: rgba(245, 158, 11, 0.14);
    color: #fff7ed;
}

.app-v31 .verification-state-card.success {
    border-color: rgba(56, 189, 248, 0.46);
    background: rgba(14, 165, 233, 0.16);
}

.app-v31 .verification-state-icon {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.app-v31 .verification-state-card .status-line {
    margin: 0 0 8px;
    color: inherit !important;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 950;
    line-height: 1.15;
    text-transform: uppercase;
}

.app-v31 .verification-state-text {
    margin: 0;
    color: inherit;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 800;
    line-height: 1.35;
}

.app-v31 .verification-repeat-question {
    margin: 16px 0 10px;
    color: inherit;
    font-weight: 900;
}

.app-v31 #verificationForm.upload-form {
    display: grid;
    gap: 16px;
}

.app-v31 #verificationForm.upload-form label {
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 950;
}

.app-v31 #verificationForm.upload-form input[type="file"] {
    margin-top: 8px;
    min-height: 48px;
}

html.theme-light .app-v31 .verification-state-card {
    color: #7a3f00;
    background: #fff7d6;
    border-color: #facc15;
}

html.theme-light .app-v31 .verification-state-card.success {
    color: #075985;
    background: #e0f2fe;
    border-color: #38bdf8;
}

/*
 * EN: v3.7.02 required registration markers and email-confirmation lock screen.
 * RU: Обязательные метки регистрации и экран блокировки до подтверждения email для v3.7.02.
 */
.required-mark {
    color: #ef4444;
    font-weight: 950;
}

.app-page.email-locked .app-sidebar,
.app-page.email-locked .app-drawer-backdrop {
    display: none !important;
}

.app-page.email-locked .app-menu-toggle {
    opacity: 0.42;
    pointer-events: none;
}

.app-page.email-locked .app-view {
    display: none !important;
}

.app-v31 .email-gate {
    display: block;
}

.app-v31 .email-gate.hidden {
    display: none !important;
}

.app-v31 .email-gate-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.app-v31 .email-gate-panel {
    border-color: rgba(45, 212, 191, 0.34);
}

.app-v31 .email-gate-confirm {
    border-color: rgba(245, 158, 11, 0.5);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(20, 184, 166, 0.1));
}

.app-v31 .email-gate-danger {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.08);
}

.app-v31 .email-gate .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.app-v31 .email-gate .button-row .button {
    flex: 1 1 190px;
}

@media (min-width: 1024px) {
    .app-v31 .email-gate-grid {
        grid-template-columns: minmax(280px, 0.85fr) minmax(320px, 1.15fr);
        align-items: start;
    }

    .app-v31 .email-gate-danger {
        grid-column: 1 / -1;
    }
}

/*
 * Project: NextToYou
 * File: assets/css/styles.css
 * Author: Beck Sarbassov
 * Version: 3.10.1
 * Release Date: 2026-07-04
 * Last Updated: 2026-07-04
 * Copyright: © Beck Sarbassov. All rights reserved.
 *
 * EN: Visual tariff-card polish with stronger hierarchy, color accents, and compact benefits.
 * RU: Визуальная полировка тарифных карточек с акцентной иерархией, цветом и компактными преимуществами.
 */
.app-v31 .tariff-layout {
    align-items: start !important;
    gap: 20px !important;
}

.app-v31 [data-view-panel="tariffs"] .tariff-layout {
    grid-template-columns: minmax(0, 1fr) !important;
}

.app-v31 .tariff-intro {
    position: relative !important;
    overflow: hidden !important;
    padding: 24px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.34), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(255, 82, 66, 0.22), transparent 32%),
        linear-gradient(135deg, rgba(7, 21, 35, 0.96), rgba(10, 70, 75, 0.9) 54%, rgba(31, 18, 39, 0.94)) !important;
    border-color: rgba(94, 234, 212, 0.34) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.app-v31 .tariff-intro::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 6px !important;
    background: linear-gradient(180deg, #14b8a6, #d9ff00 48%, #ff4a3d) !important;
}

.app-v31 .tariff-intro h2 {
    max-width: 720px !important;
    margin-top: 8px !important;
    font-size: 1.85rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
}

.app-v31 .tariff-intro p:not(.eyebrow),
.app-v31 .tariff-intro strong {
    max-width: 760px !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
}

.app-v31 .tariff-layout > .side-panel {
    position: sticky !important;
    top: 96px !important;
    overflow: hidden !important;
    padding: 20px !important;
    background:
        radial-gradient(circle at 24% 0%, rgba(45, 212, 191, 0.2), transparent 34%),
        rgba(15, 23, 42, 0.82) !important;
    border-color: rgba(94, 234, 212, 0.2) !important;
}

.app-v31 .tariff-layout > .side-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto !important;
    height: 4px !important;
    background: linear-gradient(90deg, #14b8a6, #38bdf8, #ff7a63) !important;
}

.app-v31 .tariff-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.app-v31 .tariff-inline-status {
    width: 100% !important;
}

.app-v31 .tariff-inline-status.hidden {
    display: none !important;
}

.app-v31 .tariff-card {
    --tariff-accent: linear-gradient(90deg, #38bdf8, #14b8a6);
    --tariff-accent-solid: #14b8a6;
    --tariff-glow: rgba(45, 212, 191, 0.18);
    position: relative !important;
    display: flex !important;
    min-height: 100% !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow: hidden !important;
    padding: 22px !important;
    background:
        radial-gradient(circle at 24% -8%, var(--tariff-glow), transparent 32%),
        linear-gradient(180deg, rgba(16, 24, 39, 0.98), rgba(9, 15, 27, 0.96)) !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.app-v31 .tariff-card[data-tariff-card="free"] {
    --tariff-accent: linear-gradient(90deg, #38bdf8, #14b8a6);
    --tariff-accent-solid: #38bdf8;
    --tariff-glow: rgba(56, 189, 248, 0.18);
}

.app-v31 .tariff-card[data-tariff-card="plus"] {
    --tariff-accent: linear-gradient(90deg, #f59e0b, #22c55e, #14b8a6);
    --tariff-accent-solid: #f59e0b;
    --tariff-glow: rgba(245, 158, 11, 0.18);
}

.app-v31 .tariff-card[data-tariff-card="pro"] {
    --tariff-accent: linear-gradient(90deg, #14b8a6, #ff4a3d, #ff0a68);
    --tariff-accent-solid: #ff6b4a;
    --tariff-glow: rgba(255, 74, 61, 0.18);
}

.app-v31 .tariff-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto !important;
    height: 5px !important;
    background: var(--tariff-accent) !important;
}

.app-v31 .tariff-card::after {
    content: "" !important;
    position: absolute !important;
    right: -48px !important;
    top: -58px !important;
    width: 160px !important;
    height: 160px !important;
    background: radial-gradient(circle, var(--tariff-glow), transparent 66%) !important;
    pointer-events: none !important;
}

.app-v31 .tariff-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(94, 234, 212, 0.42) !important;
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(94, 234, 212, 0.08) inset !important;
}

.app-v31 .tariff-card.current {
    border-color: rgba(45, 212, 191, 0.72) !important;
    box-shadow: 0 24px 58px rgba(20, 184, 166, 0.16), 0 0 0 1px rgba(45, 212, 191, 0.22) inset !important;
}

.app-v31 .tariff-card.pending {
    border-color: rgba(250, 204, 21, 0.72) !important;
    box-shadow: 0 24px 58px rgba(250, 204, 21, 0.12), 0 0 0 1px rgba(250, 204, 21, 0.2) inset !important;
}

.app-v31 .tariff-card h3 {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 1.55rem !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}

.app-v31 .tariff-current-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 4px 9px !important;
    border: 1px solid rgba(45, 212, 191, 0.46) !important;
    border-radius: 999px !important;
    color: #bffcf0 !important;
    background: rgba(20, 184, 166, 0.14) !important;
    font-size: 0.68rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}

.app-v31 .tariff-price {
    position: relative !important;
    z-index: 1 !important;
    margin: -4px 0 2px !important;
    color: #ffffff !important;
    font-size: 1.9rem !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
}

.app-v31 .tariff-card[data-tariff-card="free"] .tariff-price {
    color: #bfdbfe !important;
}

.app-v31 .tariff-card[data-tariff-card="plus"] .tariff-price {
    color: #ffd166 !important;
}

.app-v31 .tariff-card[data-tariff-card="pro"] .tariff-price {
    color: #ffd2cc !important;
}

.app-v31 .tariff-benefits {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 8px !important;
    padding: 14px !important;
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    border-radius: 16px !important;
}

.app-v31 .tariff-benefits p {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    margin: 0 !important;
    color: #dbeafe !important;
    font-size: 0.94rem !important;
    line-height: 1.42 !important;
}

.app-v31 .tariff-benefits p::before {
    content: "✓" !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 1px !important;
    border-radius: 999px !important;
    color: #06111a !important;
    background: var(--tariff-accent) !important;
    font-size: 0.72rem !important;
    font-weight: 950 !important;
}

.app-v31 .tariff-card .choose-tariff {
    position: relative !important;
    z-index: 1 !important;
    min-height: 50px !important;
    margin-top: auto !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    letter-spacing: 0 !important;
    box-shadow: 0 14px 28px rgba(20, 184, 166, 0.14) !important;
}

.app-v31 .tariff-card[data-tariff-card="free"] .choose-tariff {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}

.app-v31 .tariff-card[data-tariff-card="plus"] .choose-tariff {
    background: linear-gradient(90deg, #f59e0b, #34d399) !important;
    color: #06110d !important;
}

.app-v31 .tariff-card[data-tariff-card="pro"] .choose-tariff {
    background: linear-gradient(90deg, #14b8a6, #ff4a3d) !important;
    color: #ffffff !important;
}

.app-v31 .tariff-payment-box {
    background:
        radial-gradient(circle at 8% 0%, rgba(20, 184, 166, 0.18), transparent 34%),
        rgba(15, 23, 42, 0.9) !important;
}

html.theme-light .app-v31 .tariff-intro {
    color: #102033 !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(20, 184, 166, 0.22), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(255, 74, 61, 0.14), transparent 32%),
        linear-gradient(135deg, #ffffff, #eefdf9 54%, #fff5f2) !important;
    border-color: rgba(20, 184, 166, 0.28) !important;
}

html.theme-light .app-v31 .tariff-intro h2,
html.theme-light .app-v31 .tariff-intro p,
html.theme-light .app-v31 .tariff-intro strong {
    color: #102033 !important;
}

html.theme-light .app-v31 .tariff-layout > .side-panel,
html.theme-light .app-v31 .tariff-card {
    color: #102033 !important;
    background:
        radial-gradient(circle at 24% -8%, var(--tariff-glow), transparent 32%),
        linear-gradient(180deg, #ffffff, #f8fbfc) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

html.theme-light .app-v31 .tariff-card h3,
html.theme-light .app-v31 .tariff-price {
    color: #102033 !important;
}

html.theme-light .app-v31 .tariff-card[data-tariff-card="plus"] .tariff-price {
    color: #92400e !important;
}

html.theme-light .app-v31 .tariff-card[data-tariff-card="free"] .tariff-price {
    color: #075985 !important;
}

html.theme-light .app-v31 .tariff-card[data-tariff-card="pro"] .tariff-price {
    color: #9f1d14 !important;
}

html.theme-light .app-v31 .tariff-price {
    opacity: 1 !important;
    text-shadow: none !important;
}

.account-delete-page {
    min-height: 100vh;
    color: #edf6ff;
    background: #07111f;
}

.account-delete-layout {
    width: min(100% - 32px, 760px);
    margin: 0 auto;
    padding: max(20px, env(safe-area-inset-top)) 0 max(32px, env(safe-area-inset-bottom));
}

.account-delete-toolbar,
.account-delete-card {
    border: 1px solid rgba(142, 183, 215, 0.24);
    background: #0c1627;
}

.account-delete-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 8px;
}

.account-delete-card {
    margin-top: 18px;
    padding: clamp(22px, 5vw, 44px);
    border-radius: 8px;
}

.account-delete-card h1 {
    margin: 8px 0 14px;
    font-size: clamp(32px, 7vw, 54px);
    line-height: 1.05;
    letter-spacing: 0;
}

.account-delete-lead,
.account-delete-warning {
    max-width: 62ch;
    color: #b8c8d8;
    line-height: 1.6;
}

.account-delete-warning {
    padding: 12px 14px;
    border-left: 3px solid #ff4f3f;
    background: rgba(255, 79, 63, 0.09);
}

.account-delete-form {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.account-delete-form label {
    display: grid;
    gap: 8px;
    color: #d6e4f0;
    font-weight: 700;
}

.account-delete-form input {
    width: 100%;
    min-height: 48px;
}

.account-delete-back {
    display: inline-block;
    margin-top: 20px;
    color: #76d8c7;
    font-weight: 800;
}

html.theme-light .account-delete-page,
body.account-delete-page.theme-light {
    color: #102033;
    background: #eef6f8;
}

body.account-delete-page.theme-light .account-delete-toolbar,
body.account-delete-page.theme-light .account-delete-card {
    border-color: #c8d6df;
    background: #ffffff;
}

body.account-delete-page.theme-light .account-delete-lead,
body.account-delete-page.theme-light .account-delete-warning {
    color: #40566a;
}

body.account-delete-page.theme-light .account-delete-form label {
    color: #183148;
}

@media (max-width: 620px) {
    .account-delete-layout {
        width: min(100% - 20px, 760px);
    }

    .account-delete-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-delete-toolbar .toolbar-preferences {
        width: 100%;
        justify-content: space-between;
    }
}

html.theme-light .app-v31 .tariff-card[data-tariff-card="plus"] .choose-tariff {
    background: linear-gradient(90deg, #f59e0b, #22c55e) !important;
    color: #06110d !important;
}

html.theme-light .app-v31 .tariff-current-badge {
    color: #0f766e !important;
    background: rgba(20, 184, 166, 0.12) !important;
    border-color: rgba(15, 118, 110, 0.3) !important;
}

html.theme-light .app-v31 .tariff-benefits {
    background: rgba(241, 245, 249, 0.78) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html.theme-light .app-v31 .tariff-benefits p {
    color: #233245 !important;
}

@media (max-width: 1040px) {
    .app-v31 .tariff-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }

    .app-v31 .tariff-layout > .side-panel {
        position: static !important;
    }
}

@media (max-width: 720px) {
    .app-v31 .tariff-intro,
    .app-v31 .tariff-card,
    .app-v31 .tariff-layout > .side-panel {
        padding: 18px !important;
        border-radius: 18px !important;
    }

    .app-v31 .tariff-intro h2 {
        font-size: 1.45rem !important;
    }

    .app-v31 .tariff-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .app-v31 .tariff-price {
        font-size: 1.55rem !important;
    }

    .app-v31 .tariff-benefits {
        padding: 12px !important;
    }

    .app-v31 .tariff-benefits p {
        font-size: 0.92rem !important;
    }
}

/*
 * Project: NextToYou
 * File: assets/css/styles.css
 * Author: Beck Sarbassov
 * Version: 3.10.1
 * Release Date: 2026-07-04
 * Last Updated: 2026-07-04
 * Copyright: © Beck Sarbassov. All rights reserved.
 *
 * EN: Stable soft colors for communication-goal chips and plain interest hashtags.
 * RU: Стабильные мягкие цвета для chips целей общения и обычных hashtag-интересов.
 */
.app-v31 .purpose-block {
    display: grid !important;
    gap: 8px !important;
    margin: 12px 0 10px !important;
}

.app-v31 .purpose-block > strong,
.app-v31 .hashtags strong {
    color: rgba(236, 246, 255, 0.84) !important;
    font-size: 0.78rem !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

.app-v31 .chip-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    align-items: center !important;
}

.app-v31 .interest-chip {
    --chip-rgb: 142 183 215;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid rgb(var(--chip-rgb) / 0.34) !important;
    background:
        linear-gradient(135deg, rgb(var(--chip-rgb) / 0.18), rgb(var(--chip-rgb) / 0.07)) !important;
    color: #ecf6ff !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 0 18px rgb(var(--chip-rgb) / 0.08) !important;
    line-height: 1.2 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.app-v31 .hashtags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 11px !important;
    align-items: center !important;
    margin: 10px 0 0 !important;
}

.app-v31 .hashtags span {
    --chip-rgb: 142 183 215;
    display: inline !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgb(var(--chip-rgb)) !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 0 12px rgb(var(--chip-rgb) / 0.12) !important;
}

.app-v31 .purpose-block > strong,
.app-v31 .hashtags strong {
    margin: 0 !important;
    color: #8eb7d7 !important;
}

.app-v31 .interest-chip {
    min-height: 32px !important;
    padding: 6px 11px !important;
    border-radius: 12px !important;
    font-size: 0.88rem !important;
}

.app-v31 .interest-chip.interest-chip-1,
.app-v31 .hashtags span.tag-color-1 { --chip-rgb: 56 189 248; }
.app-v31 .interest-chip.interest-chip-2,
.app-v31 .hashtags span.tag-color-2 { --chip-rgb: 45 212 191; }
.app-v31 .interest-chip.interest-chip-3,
.app-v31 .hashtags span.tag-color-3 { --chip-rgb: 74 222 128; }
.app-v31 .interest-chip.interest-chip-4,
.app-v31 .hashtags span.tag-color-4 { --chip-rgb: 163 230 53; }
.app-v31 .interest-chip.interest-chip-5,
.app-v31 .hashtags span.tag-color-5 { --chip-rgb: 250 204 21; }
.app-v31 .interest-chip.interest-chip-6,
.app-v31 .hashtags span.tag-color-6 { --chip-rgb: 251 146 60; }
.app-v31 .interest-chip.interest-chip-7,
.app-v31 .hashtags span.tag-color-7 { --chip-rgb: 248 113 113; }
.app-v31 .interest-chip.interest-chip-8,
.app-v31 .hashtags span.tag-color-8 { --chip-rgb: 251 113 133; }
.app-v31 .interest-chip.interest-chip-9,
.app-v31 .hashtags span.tag-color-9 { --chip-rgb: 244 114 182; }
.app-v31 .interest-chip.interest-chip-10,
.app-v31 .hashtags span.tag-color-10 { --chip-rgb: 217 70 239; }
.app-v31 .interest-chip.interest-chip-11,
.app-v31 .hashtags span.tag-color-11 { --chip-rgb: 192 132 252; }
.app-v31 .interest-chip.interest-chip-12,
.app-v31 .hashtags span.tag-color-12 { --chip-rgb: 167 139 250; }
.app-v31 .interest-chip.interest-chip-13,
.app-v31 .hashtags span.tag-color-13 { --chip-rgb: 129 140 248; }
.app-v31 .interest-chip.interest-chip-14,
.app-v31 .hashtags span.tag-color-14 { --chip-rgb: 96 165 250; }
.app-v31 .interest-chip.interest-chip-15,
.app-v31 .hashtags span.tag-color-15 { --chip-rgb: 34 211 238; }
.app-v31 .interest-chip.interest-chip-16,
.app-v31 .hashtags span.tag-color-16 { --chip-rgb: 20 184 166; }
.app-v31 .interest-chip.interest-chip-17,
.app-v31 .hashtags span.tag-color-17 { --chip-rgb: 52 211 153; }
.app-v31 .interest-chip.interest-chip-18,
.app-v31 .hashtags span.tag-color-18 { --chip-rgb: 132 204 22; }
.app-v31 .interest-chip.interest-chip-19,
.app-v31 .hashtags span.tag-color-19 { --chip-rgb: 234 179 8; }
.app-v31 .interest-chip.interest-chip-20,
.app-v31 .hashtags span.tag-color-20 { --chip-rgb: 249 115 22; }
.app-v31 .interest-chip.interest-chip-21,
.app-v31 .hashtags span.tag-color-21 { --chip-rgb: 239 68 68; }
.app-v31 .interest-chip.interest-chip-22,
.app-v31 .hashtags span.tag-color-22 { --chip-rgb: 225 29 72; }
.app-v31 .interest-chip.interest-chip-23,
.app-v31 .hashtags span.tag-color-23 { --chip-rgb: 219 39 119; }
.app-v31 .interest-chip.interest-chip-24,
.app-v31 .hashtags span.tag-color-24 { --chip-rgb: 168 85 247; }
.app-v31 .interest-chip.interest-chip-25,
.app-v31 .hashtags span.tag-color-25 { --chip-rgb: 124 58 237; }
.app-v31 .interest-chip.interest-chip-26,
.app-v31 .hashtags span.tag-color-26 { --chip-rgb: 79 70 229; }
.app-v31 .interest-chip.interest-chip-27,
.app-v31 .hashtags span.tag-color-27 { --chip-rgb: 37 99 235; }
.app-v31 .interest-chip.interest-chip-28,
.app-v31 .hashtags span.tag-color-28 { --chip-rgb: 8 145 178; }
.app-v31 .interest-chip.interest-chip-29,
.app-v31 .hashtags span.tag-color-29 { --chip-rgb: 13 148 136; }
.app-v31 .interest-chip.interest-chip-30,
.app-v31 .hashtags span.tag-color-30 { --chip-rgb: 22 163 74; }

html.theme-light .app-v31 .purpose-block > strong,
html.theme-light .app-v31 .hashtags strong {
    color: #2b607f !important;
}

html.theme-light .app-v31 .interest-chip {
    color: #102033 !important;
    background:
        linear-gradient(135deg, rgb(var(--chip-rgb) / 0.18), rgb(var(--chip-rgb) / 0.08)) !important;
    border-color: rgb(var(--chip-rgb) / 0.36) !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 0 14px rgb(var(--chip-rgb) / 0.08) !important;
}

html.theme-light .app-v31 .hashtags span {
    color: rgb(var(--chip-rgb)) !important;
    color: color-mix(in srgb, rgb(var(--chip-rgb)) 64%, #102033) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: 0 1px 0 rgb(255 255 255 / 0.72) !important;
}

.app-v31 .hashtags span.tag-color-1,
.app-v31 .hashtags span:nth-of-type(1) { color: #38bdf8 !important; }
.app-v31 .hashtags span.tag-color-2,
.app-v31 .hashtags span:nth-of-type(2) { color: #2dd4bf !important; }
.app-v31 .hashtags span.tag-color-3,
.app-v31 .hashtags span:nth-of-type(3) { color: #4ade80 !important; }
.app-v31 .hashtags span.tag-color-4,
.app-v31 .hashtags span:nth-of-type(4) { color: #a3e635 !important; }
.app-v31 .hashtags span.tag-color-5,
.app-v31 .hashtags span:nth-of-type(5) { color: #facc15 !important; }
.app-v31 .hashtags span.tag-color-6 { color: #fb923c !important; }
.app-v31 .hashtags span.tag-color-7 { color: #f87171 !important; }
.app-v31 .hashtags span.tag-color-8 { color: #fb7185 !important; }
.app-v31 .hashtags span.tag-color-9 { color: #f472b6 !important; }
.app-v31 .hashtags span.tag-color-10 { color: #d946ef !important; }
.app-v31 .hashtags span.tag-color-11 { color: #c084fc !important; }
.app-v31 .hashtags span.tag-color-12 { color: #a78bfa !important; }
.app-v31 .hashtags span.tag-color-13 { color: #818cf8 !important; }
.app-v31 .hashtags span.tag-color-14 { color: #60a5fa !important; }
.app-v31 .hashtags span.tag-color-15 { color: #22d3ee !important; }
.app-v31 .hashtags span.tag-color-16 { color: #14b8a6 !important; }
.app-v31 .hashtags span.tag-color-17 { color: #34d399 !important; }
.app-v31 .hashtags span.tag-color-18 { color: #84cc16 !important; }
.app-v31 .hashtags span.tag-color-19 { color: #eab308 !important; }
.app-v31 .hashtags span.tag-color-20 { color: #f97316 !important; }
.app-v31 .hashtags span.tag-color-21 { color: #ef4444 !important; }
.app-v31 .hashtags span.tag-color-22 { color: #e11d48 !important; }
.app-v31 .hashtags span.tag-color-23 { color: #db2777 !important; }
.app-v31 .hashtags span.tag-color-24 { color: #a855f7 !important; }
.app-v31 .hashtags span.tag-color-25 { color: #7c3aed !important; }
.app-v31 .hashtags span.tag-color-26 { color: #4f46e5 !important; }
.app-v31 .hashtags span.tag-color-27 { color: #2563eb !important; }
.app-v31 .hashtags span.tag-color-28 { color: #0891b2 !important; }
.app-v31 .hashtags span.tag-color-29 { color: #0d9488 !important; }
.app-v31 .hashtags span.tag-color-30 { color: #16a34a !important; }

html.theme-light .app-v31 .hashtags span.tag-color-1,
html.theme-light .app-v31 .hashtags span:nth-of-type(1) { color: #0277aa !important; }
html.theme-light .app-v31 .hashtags span.tag-color-2,
html.theme-light .app-v31 .hashtags span:nth-of-type(2) { color: #087f73 !important; }
html.theme-light .app-v31 .hashtags span.tag-color-3,
html.theme-light .app-v31 .hashtags span:nth-of-type(3) { color: #16803b !important; }
html.theme-light .app-v31 .hashtags span.tag-color-4,
html.theme-light .app-v31 .hashtags span:nth-of-type(4) { color: #5c7f12 !important; }
html.theme-light .app-v31 .hashtags span.tag-color-5,
html.theme-light .app-v31 .hashtags span:nth-of-type(5) { color: #8a6400 !important; }

html.theme-light .app-v31 .hashtags span[class*="tag-color-"] {
    color: rgb(var(--chip-rgb)) !important;
}

.app-v31 .person-card .purpose-block > strong,
.app-v31 .person-card .hashtags strong,
.app-v31 .knock-card .purpose-block > strong,
.app-v31 .knock-card .hashtags strong,
.app-v31 .hidden-person-card .purpose-block > strong,
.app-v31 .hidden-person-card .hashtags strong {
    color: #8eb7d7 !important;
}

html.theme-light .app-v31 .person-card .purpose-block > strong,
html.theme-light .app-v31 .person-card .hashtags strong,
html.theme-light .app-v31 .knock-card .purpose-block > strong,
html.theme-light .app-v31 .knock-card .hashtags strong,
html.theme-light .app-v31 .hidden-person-card .purpose-block > strong,
html.theme-light .app-v31 .hidden-person-card .hashtags strong {
    color: #2b607f !important;
}

@media (max-width: 520px) {
    .app-v31 .interest-chip {
        min-height: 30px !important;
        padding: 5px 9px !important;
        font-size: 0.82rem !important;
    }

    .app-v31 .hashtags span {
        font-size: 0.84rem !important;
    }
}

/*
 * Next to you... v3.8.4: compact top status display outside Profile.
 */
.app-v31 .user-pill.status-mode {
    width: min(430px, 100%) !important;
}

.app-v31 .top-status-chip {
    border-color: rgba(142, 183, 215, 0.34) !important;
    color: #f8fbff !important;
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(45, 212, 191, 0.14)) !important;
}

.app-v31 .top-status-message {
    color: #c9d8ea !important;
}

.app-v31 .top-status-message.error {
    color: #fecaca !important;
}

html.theme-light .app-v31 .top-status-chip {
    color: #12304a !important;
    border-color: rgba(43, 96, 127, 0.24) !important;
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(45, 212, 191, 0.09)) !important;
}

html.theme-light .app-v31 .top-status-message {
    color: #2f4b63 !important;
}

html.theme-light .app-v31 .top-status-message.error {
    color: #9f1239 !important;
}

/*
 * Next to you... v3.8.5: private post-meeting feedback shown only to the current user.
 */
.app-v31 .profile-private-rating,
.app-v31 .profile-last-meeting {
    display: block;
    margin-top: 3px;
    color: rgba(226, 241, 255, 0.78);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}

.meeting-feedback-panel {
    position: fixed;
    right: clamp(14px, 3vw, 30px);
    bottom: clamp(14px, 3vw, 30px);
    z-index: 70;
    width: min(420px, calc(100vw - 28px));
}

.meeting-feedback-panel.hidden {
    display: none;
}

.meeting-feedback-card {
    padding: 18px;
    border: 1px solid rgba(142, 183, 215, 0.28);
    border-radius: 18px;
    color: #f8fbff;
    background:
        linear-gradient(145deg, rgba(14, 20, 38, 0.97), rgba(17, 29, 45, 0.96));
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
}

.meeting-feedback-copy h2,
.meeting-feedback-copy p {
    margin: 0;
}

.meeting-feedback-copy h2 {
    margin-top: 4px;
    font-size: 1.22rem;
}

.meeting-feedback-copy p:last-child {
    margin-top: 8px;
    color: rgba(226, 241, 255, 0.78);
    font-size: 0.92rem;
}

.meeting-feedback-rating-scale {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3vw, 24px);
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(142, 183, 215, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.meeting-feedback-star {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(38px, 11vw, 54px);
    height: clamp(38px, 11vw, 54px);
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    color: #8b939c;
    background: transparent;
    font-size: clamp(2.2rem, 9vw, 3rem);
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    text-shadow: none;
    transition:
        color 0.16s ease,
        background 0.16s ease,
        transform 0.16s ease;
}

.meeting-feedback-star.is-active {
    color: #ff4f3f;
    text-shadow: 0 8px 22px rgba(255, 79, 63, 0.24);
}

.meeting-feedback-star.is-preview {
    color: #ff7a61;
    text-shadow: 0 8px 22px rgba(255, 79, 63, 0.16);
}

.meeting-feedback-star:hover,
.meeting-feedback-star:focus-visible {
    color: #ff4f3f;
    background: rgba(255, 79, 63, 0.1);
    transform: translateY(-1px) scale(1.04);
}

.meeting-feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}

.meeting-feedback-actions .button {
    min-width: 112px;
}

.meeting-feedback-actions .button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    filter: grayscale(0.35);
}

html.theme-light .app-v31 .profile-private-rating,
html.theme-light .app-v31 .profile-last-meeting {
    color: #2b607f;
}

html.theme-light .meeting-feedback-card {
    color: #102033;
    border-color: rgba(43, 96, 127, 0.18);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 248, 250, 0.96));
    box-shadow: 0 20px 60px rgba(43, 96, 127, 0.18);
}

html.theme-light .meeting-feedback-copy p:last-child {
    color: #47657c;
}

html.theme-light .meeting-feedback-star {
    color: #75818e;
}

html.theme-light .meeting-feedback-star.is-active,
html.theme-light .meeting-feedback-star:hover,
html.theme-light .meeting-feedback-star:focus-visible {
    color: #ff4f3f;
}

html.theme-light .meeting-feedback-star.is-preview {
    color: #ff7a61;
}

html.theme-light .meeting-feedback-rating-scale {
    border-color: rgba(43, 96, 127, 0.14);
    background: rgba(247, 251, 252, 0.72);
}

@media (max-width: 640px) {
    .meeting-feedback-panel {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
    }

    .meeting-feedback-actions .button {
        flex: 1 1 130px;
    }
}
/*
 * Project: Next to you...
 * Referral UI extension
 * Author: Beck Sarbassov
 * Version: 3.10.1
 * Last updated: 2026-07-14
 * Copyright: © Beck Sarbassov. All rights reserved.
 *
 * EN: Responsive referral program surfaces for light and dark themes.
 * RU: Адаптивные элементы реферальной программы для светлой и тёмной тем.
 */

.referral-page {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.referral-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
    gap: 20px;
    align-items: end;
    padding: 22px 0;
    border-bottom: 1px solid var(--border-color, rgba(142, 183, 215, .24));
}

.referral-hero h2,
.referral-section-head h3,
.referral-list-section h3,
.referral-share-card h3,
.referral-attach-card h3 {
    margin: 4px 0 8px;
}

.referral-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.referral-summary > div {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border-color, rgba(142, 183, 215, .24));
    border-radius: 8px;
    background: var(--panel-soft, rgba(142, 183, 215, .08));
}

.referral-summary strong,
.referral-summary span {
    display: block;
}

.referral-summary strong {
    margin-bottom: 3px;
    font-size: 24px;
    line-height: 1;
}

.referral-summary span {
    color: var(--muted, #64748b);
    font-size: 12px;
    line-height: 1.35;
}

.referral-primary-grid,
.referral-lists-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.referral-copy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
    margin-top: 7px;
}

.referral-copy-row input {
    min-width: 0;
}

.referral-inline-form {
    display: grid;
    gap: 12px;
}

.referral-rewards-section {
    padding: 18px 0;
}

.referral-section-head {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.referral-section-head > p {
    max-width: 560px;
    margin: 0;
    color: var(--muted, #64748b);
}

.referral-reward-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.referral-reward-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, .4fr) auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    border: 1px solid var(--border-color, rgba(142, 183, 215, .24));
    border-radius: 8px;
    background: var(--panel, rgba(255, 255, 255, .04));
}

.referral-reward-card > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.referral-plan-name {
    font-size: 22px;
    font-weight: 900;
}

.referral-reward-card [data-referral-cost] {
    font-size: 30px;
    line-height: 1;
}

.referral-reward-card p {
    margin: 0;
}

.referral-list-section {
    min-width: 0;
}

.referral-list-item,
.referral-history-item {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, rgba(142, 183, 215, .2));
}

.referral-list-item:last-child,
.referral-history-item:last-child {
    border-bottom: 0;
}

.referral-list-item > div,
.referral-history-item > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.referral-list-item span,
.referral-list-item small,
.referral-history-item span,
.referral-history-item small {
    color: var(--muted, #64748b);
    overflow-wrap: anywhere;
}

.referral-history-item .positive { color: #0f9f7f; }
.referral-history-item .negative { color: #ef4b4b; }

.referral-status {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.referral-status-success { color: #0d9272 !important; }
.referral-status-warning { color: #c17800 !important; }
.referral-status-neutral { color: var(--muted, #64748b) !important; }

.radar-empty-referral {
    max-width: 660px;
    padding: 20px;
    border: 1px solid rgba(22, 185, 166, .35);
    border-left: 4px solid #13a892;
    border-radius: 8px;
    background: linear-gradient(115deg, rgba(16, 185, 129, .1), rgba(255, 79, 63, .08));
}

.radar-empty-referral h3 { margin: 0 0 7px; }
.radar-empty-referral p { margin: 0 0 14px; }

html.theme-light .referral-summary > div,
html.theme-light .referral-reward-card {
    background: #f5f9fc;
}

html:not(.theme-light) .referral-summary span,
html:not(.theme-light) .referral-list-item span,
html:not(.theme-light) .referral-list-item small,
html:not(.theme-light) .referral-history-item span,
html:not(.theme-light) .referral-history-item small,
html:not(.theme-light) .referral-section-head > p {
    color: #a9bbcb;
}

@media (max-width: 1100px) {
    .referral-hero { grid-template-columns: 1fr; }
    .referral-reward-card { grid-template-columns: 1fr 150px; }
    .referral-reward-card .referral-redeem { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .referral-primary-grid,
    .referral-lists-grid,
    .referral-reward-grid { grid-template-columns: 1fr; }
    .referral-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .referral-copy-row { grid-template-columns: 1fr; }
    .referral-copy-row .button { width: 100%; }
    .referral-section-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
    .referral-summary { grid-template-columns: 1fr 1fr; }
    .referral-reward-card { grid-template-columns: 1fr; }
    .referral-reward-card .referral-redeem { grid-column: auto; }
    .referral-list-item,
    .referral-history-item { align-items: flex-start; flex-direction: column; }
}

/* EN: Dense referral CRM surfaces keep admin actions usable with large datasets.
 * RU: Плотные CRM-элементы сохраняют удобство действий при больших объёмах данных.
 */
.referral-admin-detail {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.referral-admin-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.referral-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.referral-admin-actions .button {
    min-height: 40px;
}

#adminReferrals .admin-table-wrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

#adminReferrals .admin-table {
    min-width: 1080px;
}

@media (max-width: 900px) {
    .referral-admin-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .referral-admin-kpis {
        grid-template-columns: 1fr;
    }

    .referral-admin-actions .button {
        flex: 1 1 150px;
    }
}