/* Vatan Connect: the violet identity shared with the public website.
   Presentation only. Existing layouts, controls, states and QR artwork are retained. */
:root {
    color-scheme: light;
    --blue: #7450d4;
    --blue-hover: #603cbd;
    --ink: #271c47;
    --muted: #726b82;
    --line: #e8e3f1;
    --canvas: #f7f5fc;
    --pale: #f0eafb;
    --white: #fff;
    --violet-deep: #24154b;
    --violet-accent: #bca0ff;
    --mint: #66f2d5;
    color: var(--ink);
    background: var(--canvas);
}

body.theme-violet { color: var(--ink); background: var(--canvas); }
::selection { color: var(--ink); background: #ded0fc; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible { outline-color: #a58ae5; }
.button-primary { box-shadow: 0 5px 15px #7450d424; }
.button-primary:hover { box-shadow: 0 7px 19px #7450d436; }
.button-secondary { border-color: #ddd4ed; }
.button-secondary:hover { background: var(--pale); border-color: #c8b6e9; }
.button:disabled { box-shadow: none; }
.field-hint, .auth-assurance, .auth-smallprint,
.auth-footer, .auth-footer span, .mobile-brand span { color: var(--muted); }
.auth-assurance .icon { color: #9b83be; }
.auth-form input, .copy-field input, .admin-search input,
.admin-coupon-duration select,
.admin-coupons-create .admin-coupon-form input,
.admin-coupons-create .admin-coupon-form select,
.up-form input, .up-form select, .up-form textarea, .up-server input[type=number],
.security-panel select, .security-filter select, .security-panel textarea {
    color: var(--ink);
    border-color: #ded6eb;
    background-color: #fdfcff;
}
.auth-form input:focus, .copy-field input:focus, .admin-search input:focus,
.admin-coupon-duration select:focus, .up-form input:focus,
.up-form select:focus, .up-form textarea:focus, .up-server input[type=number]:focus,
.security-panel select:focus, .security-filter select:focus, .security-panel textarea:focus {
    border-color: #9673dd;
    background-color: #fff;
    box-shadow: 0 0 0 3px #7450d412;
}
.auth-form input[aria-invalid=true] { border-color: #da8e83; }
.auth-method-switch { background: #f3eff9; border-color: var(--line); }
.method-link { color: var(--muted); }
.method-link:hover { background: #eae0fa; }
.method-link.is-selected { border-color: var(--line); box-shadow: 0 2px 5px #24154b09; }
.password-recovery summary:focus-visible { outline-color: #a58ae5; }

/* The same purple canvas and flowing curves as the landing hero. */
.auth-shell { background: var(--canvas); }
.auth-story {
    color: #fff;
    border-color: #38215f;
    background-color: var(--violet-deep);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 680 900' fill='none'%3E%3Cpath d='M-250 580C60 260 245 950 820 365' stroke='%23bca0ff' stroke-opacity='.15' stroke-width='110'/%3E%3Cpath d='M-210 650C80 330 300 1040 845 430' stroke='%23bca0ff' stroke-opacity='.20' stroke-width='2'/%3E%3Cpath d='M-240 610C60 290 270 995 830 390' stroke='%23bca0ff' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E"), radial-gradient(ellipse at 90% 8%, #7850b53d, transparent 55%);
    background-size: cover, cover;
    background-position: center;
}
.auth-story::after { border-color: #bca0ff1a; }
.auth-story > .brand, .story-footer { position: relative; z-index: 1; }
.auth-story .brand-label { color: #c6b6df; border-color: #bca0ff40; }
.auth-story .eyebrow { color: #cdb7ff; }
.auth-story .small-dot { background: var(--mint); }
.story-content h1 { color: #fff; }
.story-content h1 > span { color: var(--violet-accent); }
.story-description { color: #d0c5e3; }
.story-footer, .story-footer span { color: #b8a8d0; }
.art-orbit { border-color: #bca0ff4d; }
.orbit-inner { border-color: #bca0ff3b; }
.art-shield {
    border-color: #bca0ff70;
    background: linear-gradient(145deg, #593c82, #352058);
    box-shadow: 0 17px 50px #120c2d40, 0 0 40px #66f2d514;
}
.art-shield svg > path:first-child { fill: var(--mint); }
.art-shield svg > path + path { stroke: #24154b; }
.art-node { color: #d7c4ff; background: #39235d; border-color: #8064aa; }
.art-caption { color: #e3d9f3; background: #352254; border-color: #73558f; }

/* Navigation remains dark, while forms and tables stay on light surfaces. */
.sidebar {
    color: #eee6fa;
    border-color: #3c2961;
    background-color: var(--violet-deep);
    background-image: radial-gradient(ellipse at 5% 100%, #60418a65, transparent 58%);
}
.sidebar .sidebar-caption, .admin-navigation > .sidebar-caption { color: #b6a1d5; }
.sidebar .nav-item { color: #d7c9ed; }
.sidebar .nav-item:hover { color: #fff; background: #ffffff0d; }
.sidebar .nav-item.is-active { color: #fff; background: #7450d4; }
.sidebar .nav-dot { background: var(--mint); }
.sidebar .nav-description { color: #c4b3de; }
.sidebar .nav-item.is-active .nav-description { color: #f1eaff; }
.sidebar-note { color: #c4b3de; background: #ffffff09; }
.sidebar-note > .icon { color: #bca0ff; }
.sidebar-copyright { color: #aa96ca; }
.workspace { background: var(--canvas); }
.workspace-header { background: #ffffffd9; border-color: var(--line); box-shadow: 0 3px 10px #24154b04; }
.breadcrumb { color: #92879f; }
.breadcrumb > span { color: #c6bdcf; }
.breadcrumb strong, .account-chip { color: #675478; }
.account-avatar { color: #8762c5; background: var(--pale); border-color: #e0d4f1; }
.account-back, .mobile-menu-link { color: #62438f; border-color: #ddd2ed; }
.account-back:hover, .mobile-menu-link:hover { border-color: #bca0e3; }
.secure-label { color: var(--muted); }
.panel, .help-panel, .legal-document { box-shadow: 0 5px 22px #24154b03; }
.panel-icon, .gift-heading { background: var(--pale); border-color: #e6daf7; }
.badge-neutral { color: #81778e; background: #f2eef6; }
.empty-orbit { border-color: #dfd2f2; }
.subscription-emblem { background: linear-gradient(145deg, #f0e8fc, #faf8ff); border-color: #e6daf7; }
.empty-plus { color: #9776cd; border-color: #e2d5f2; }
.active-subscription .subscription-emblem { background: #edf8f2; color: var(--green); border-color: #e1f0e7; }
.availability-note, .inline-note, .bonus-prompt, .bonus-option,
.admin-users .focus-group-form { background: #f7f4fc; border-color: var(--line); }
.availability-note > .panel-icon { background: #eee5fa; }
.availability-note strong { color: #736086; }
.availability-note p, .inline-note, .bonus-prompt { color: var(--muted); }
.plan-panel { background: linear-gradient(145deg, #f0e6ff, #e8ddf9); border-color: #dcd0ef; }
.plan-mark { color: #ae8fdc; }
.plan-description, .price > small, .plan-footnote { color: #7e6b96; }
.plan-divider { background: #d9cbe9; }
.plan-features li { color: #66527e; }
.plan-footnote { border-color: #d9cbe9; }
.profile-details dt, .subscription-details dt, .help-panel p,
.dashboard-footer, .bonus-option small, .checkout-totals dt,
.standalone-note, .order-reference span, .order-reference code,
.stat-card > span, .stat-card > p, .referral-terms p,
.reward-list > li > div span { color: var(--muted); }
.checkout-totals > .total-line dt { color: var(--ink); }
.help-panel > .panel-icon { color: #9880b9; border-color: var(--line); background: #f6f2fc; }

/* Subscription, checkout, payment history and referrals. */
.notice-info { color: #685381; background: #f3edfc; border-color: #e4d6f5; }
.referral-summary { background: linear-gradient(120deg, #fff, #faf7ff); }
.order-row > .icon, .standalone-note > .icon { color: #aa94bf; }
.numbered-steps li > span { color: #9e7dce; }
.icon-button { background: #f9f6ff; }
.state-emblem-neutral { color: #8a7b99; background: #f5f1fa; }
.referral-hero { background: linear-gradient(115deg, #eee4fc, #fbf9ff); border-color: #e2d4f1; }
.referral-hero > div > p:not(.eyebrow), .referral-link-card > p { color: var(--muted); }
.referral-link-card { border-color: var(--line); box-shadow: 0 10px 25px #24154b05; }
.copy-field input { color: #78618e; }
.vpn-qr { border-color: var(--line); background: #f9f6ff; }
.payment-qr, .vpn-qr-image { background: #fff; }
.vpn-panel > p, .vpn-traffic > p, .vpn-traffic-detail dt { color: var(--muted); }
.vpn-copy input, .vpn-direct textarea { color: var(--ink); background: #faf7fd; border-color: #e0d6ec; }
.vpn-direct summary { color: var(--blue); }
.vpn-traffic { border-color: var(--line); }
.vpn-traffic progress { accent-color: var(--blue); }
.coupon-shortcut { background: #eee5fb; border-color: #d9c5f0; }
.coupon-redemption { background: #faf7ff; border-color: #e2d4f2; }
.coupon-redemption input { border-color: #ded4eb; }
.coupon-redemption input:focus { outline-color: #b99be7; }
.checkout-plan-card { border-color: #ded4eb; }
.checkout-plan-option:hover .checkout-plan-card { border-color: #b697df; }
.checkout-plan-radio:checked + .checkout-plan-card { border-color: #8960c5; background: #f8f3ff; box-shadow: 0 0 0 1px #8960c5, 0 7px 18px #7450d40b; }
.checkout-plan-radio:focus-visible + .checkout-plan-card { outline-color: #ad8de0; }

/* Telegram and public documents use the same light workspace. */
.telegram-auth-shell { background: radial-gradient(ellipse at 50% 0, #e9ddfb 0, var(--canvas) 60%); }
.telegram-auth-card { border-color: var(--line); box-shadow: 0 16px 50px #24154b08; }
.telegram-mark { color: var(--blue); background: var(--pale); }
.telegram-steps { color: #675a79; }
.telegram-retry summary { color: var(--blue); }
.legal-section p { color: #665971; }
.legal-nav > a[aria-current=page] { background: #e9def9; }
.requisites-page .page { color: var(--ink); }
.requisites-page .brand { color: var(--violet-deep); }
.requisites-page a, .requisites-page .eyebrow { color: var(--blue); }
.requisites-page a:hover { color: var(--blue-hover); }
.requisites-page .intro, .requisites-page dt,
.requisites-page .page footer { color: var(--muted); }
.requisites-page .card { border-color: var(--line); box-shadow: 0 5px 22px #24154b03; }
.requisites-page .detail + .detail, .requisites-page footer { border-color: var(--line); }
.requisites-page .button { color: #fff; background: var(--blue); }
.requisites-page .button:hover { color: #fff; background: var(--blue-hover); }

/* Administration: neutral data surfaces; status colors retain their meaning. */
.admin-table th, .diag-table th { color: #82708f; background: #f7f3fc; }
.admin-table code { color: #77578f; }
.up-kicker, .up-muted, .up-pad small, .up-overview p, .security-muted { color: var(--muted); }
.up-number { color: var(--ink); }
.up-explainer { background: #f3edfc; border-color: #e2d5f3; }
.up-step { background: var(--blue); }
.up-badge:not(.up-ok) { color: #82768e; background: #f1edf6; }
.up-server, .up-edit, .security-node, .security-actions,
.security-scroll th, .security-scroll td { border-color: var(--line); }
.security-node { background: #f9f6fd; }
.up-switch input { accent-color: var(--blue); }
.up-edit summary, .security-actions summary, .security-address summary { color: var(--blue); }
.security-scroll th { color: var(--muted); }
.diag-period { border-color: var(--line); background: #eee7f7; }
.diag-period a { color: #7b668e; }
.diag-period a.is-selected { box-shadow: 0 2px 5px #24154b10; }
.diag-toolbar strong, .diag-advice h3, .diag-report-nodes strong { color: #645073; }
.diag-overview { border-color: #e1d3f2; background: linear-gradient(115deg, #eee5fc, #fcfaff); }
.diag-overview article + article::before, .diag-overview article:last-child { border-color: #e1d3f2; }
.diag-overview p, .diag-overview span, .diag-overview strong small,
.diag-services, .diag-services > span:first-child, .diag-chart-heading > span,
.diag-chart-legend, .diag-chart-axis, .diag-chart-note,
.diag-table small, .diag-table-note, .diag-empty, .diag-empty h3, .diag-empty p,
.diag-report summary small, .diag-report-nodes p, .diag-report-body > p,
.diag-errors li, .diag-methodology p, .diag-methodology dd,
.diag-evidence, .diag-sources h3, .diag-sources > div, .diag-sources small { color: var(--muted); }
.diag-node-icon { color: #9572c6; background: #f0e9f9; }
.diag-advice:not(.diag-advice-ok):not(.diag-advice-watch):not(.diag-advice-upgrade) { background: #f7f3fb; border-color: var(--line); }
.diag-advice ul { color: #7e6e8c; }
.diag-node meter, .diag-table meter { background: #eee8f5; }
.diag-node meter::-webkit-meter-bar, .diag-table meter::-webkit-meter-bar { background: #eee8f5; }
.diag-node meter::-webkit-meter-optimum-value, .diag-table meter::-webkit-meter-optimum-value { background: #9870d7; }
.diag-node meter::-moz-meter-bar, .diag-table meter::-moz-meter-bar { background: #9870d7; }
.diag-coverage meter::-webkit-meter-optimum-value { background: #67ac98; }
.diag-coverage strong { color: #7d6297; }
.diag-coverage p { color: var(--muted); }
.diag-meter-empty { background: repeating-linear-gradient(135deg, #e9e1f2, #e9e1f2 4px, #f9f6fc 4px, #f9f6fc 8px); }
.diag-node-facts, .diag-services, .diag-network-heading, .diag-table td,
.diag-table-note, .diag-empty, .diag-report, .diag-report-body,
.diag-report-table, .diag-errors li, .diag-methodology dl > div,
.diag-pagination, .diag-sources { border-color: var(--line); }
.diag-chart-grid { stroke: #ebe3f3; }
.diag-chart-tick { fill: #9a88ac; }
.diag-line-cpu_percent, .diag-line-network_mbps { stroke: #9270ce; }
.diag-point-cpu_percent, .diag-point-network_mbps { fill: #9270ce; }
.diag-dot-cpu { background: #9270ce; }
.diag-chart-empty { color: #a293b1; background: #faf7fd; }
.diag-chart-empty p { color: var(--muted); }
.diag-chip { color: #8b739e; background: #f3edf9; }
.diag-report summary:hover, .diag-report-body { background: #fcfaff; }
.diag-report-open, .diag-methodology summary .icon,
.diag-methodology summary > span:last-child, .diag-extra summary { color: #9676ba; }

/* Support chat: colors only; sending, history and error states are unchanged. */
.vatan-support { --support-blue: #7450d4; --support-ink: #271c47; --support-muted: #726b82; }
.vatan-support__launcher { border-color: #8d66e1; box-shadow: 0 8px 30px #7450d437, 0 2px 5px #24154b12; }
.vatan-support__launcher:hover { background: #603cbd; box-shadow: 0 10px 35px #7450d44a; }
.vatan-support__panel { border-color: var(--line); box-shadow: 0 18px 70px #24154b24, 0 3px 12px #24154b0a; }
.vatan-support__header { color: #fff; background: #24154b; border-color: #433060; }
.vatan-support__heading h2 { color: #fff; }
.vatan-support__heading p { color: #cfc1e6; }
.vatan-support__avatar { color: #d4beff; background: #ffffff0d; border-color: #bca0ff38; }
.vatan-support__close { color: #cfc1e6; }
.vatan-support__close:hover { color: #fff; background: #ffffff12; }
.vatan-support__history { background: #f9f6ff; scrollbar-color: #d9c9ec transparent; }
.vatan-support__eyebrow, .vatan-support__author, .vatan-support__meta { color: #89709f; }
.vatan-support__message { border-color: var(--line); box-shadow: 0 2px 3px #24154b03; }
.vatan-support__message.is-visitor { background: #efe6fb; border-color: #e4d6f5; }
.vatan-support__message.is-failed { border-color: #edc9c9; }
.vatan-support__retry, .vatan-support__privacy a { color: #7450bd; }
.vatan-support__notice:not(.is-error) { color: #7c648f; background: #f2ecfa; border-color: var(--line); }
.vatan-support__form { border-color: var(--line); }
.vatan-support__composer { border-color: #e1d5ef; background: #fdfbff; }
.vatan-support__composer:focus-within { border-color: #b396d9; box-shadow: 0 0 0 3px #7450d40b; }
.vatan-support__composer textarea::placeholder { color: #9687a3; }
.vatan-support__composer textarea[readonly], .vatan-support__hint,
.vatan-support__privacy { color: var(--support-muted); }
.vatan-support__send:hover:enabled { background: #603cbd; }
.vatan-support__send:disabled { color: #a18bb5; background: #eee6f6; }

@media (max-width: 760px) {
    .sidebar { border-color: #4c366f; }
    .sidebar-nav .nav-item { color: #e2d5f5; background: #ffffff08; border-color: #60457f; box-shadow: none; }
    .sidebar-nav .nav-item:hover { background: #ffffff12; border-color: #8b6aac; }
    .sidebar-nav .nav-item.is-active { color: #fff; background: var(--blue); border-color: #9875e2; box-shadow: 0 3px 10px #14082e24; }
    .sidebar .logout-button { color: #d7c9ed; background: #ffffff08; border-color: #60457f; }
    .workspace-header { background: #fff; border-color: var(--line); }
}
@media (max-width: 620px) {
    .auth-shell { background: linear-gradient(165deg, #ede2fb 0, #f7f3fc 140px, #fff 350px); }
}
@media print {
    body.theme-violet { background: #fff; }
    .legal-document { box-shadow: none; }
}