/*
   FARIK Unified Design System
   Final visual layer for panel, public pages, auth pages and Telegram Mini App.
*/

:root {
    color-scheme: dark;

    --farik-bg: #05090d;
    --farik-bg-2: #091116;
    --farik-bg-3: #101a20;
    --farik-panel: rgba(14, 24, 30, .86);
    --farik-panel-strong: rgba(17, 29, 36, .94);
    --farik-panel-soft: rgba(255, 255, 255, .045);
    --farik-line: rgba(142, 174, 184, .18);
    --farik-line-strong: rgba(119, 214, 214, .34);
    --farik-text: #eef8f6;
    --farik-muted: #90a4a8;
    --farik-dim: #64777c;
    --farik-signal: #20d6b4;
    --farik-signal-2: #6ad9ff;
    --farik-amber: #f3c762;
    --farik-danger: #ff6f76;
    --farik-success: #68e0ad;
    --farik-info: #6ad9ff;
    --farik-shadow: 0 20px 60px rgba(0, 0, 0, .30);
    --farik-shadow-soft: 0 10px 30px rgba(0, 0, 0, .18);
    --farik-radius: 8px;
    --farik-radius-sm: 6px;
    --farik-control: 42px;

    --bg-primary: var(--farik-bg);
    --bg-secondary: var(--farik-bg-2);
    --bg-card: var(--farik-panel);
    --bg-card-hover: var(--farik-panel-strong);
    --bg-input: rgba(255, 255, 255, .055);
    --bg-modal: rgba(3, 8, 11, .78);
    --border-color: var(--farik-line);
    --border-hover: var(--farik-line-strong);
    --border-focus: rgba(32, 214, 180, .52);
    --text-primary: var(--farik-text);
    --text-secondary: #b6c6c8;
    --text-muted: var(--farik-muted);
    --text-accent: var(--farik-signal);
    --accent: var(--farik-signal);
    --accent-light: var(--farik-signal-2);
    --accent-dark: #10a58f;
    --accent-glow: rgba(32, 214, 180, .16);
    --accent-gradient: linear-gradient(135deg, #20d6b4 0%, #5fd7f6 58%, #f3c762 100%);
    --success: var(--farik-success);
    --success-bg: rgba(104, 224, 173, .10);
    --success-border: rgba(104, 224, 173, .26);
    --danger: var(--farik-danger);
    --danger-bg: rgba(255, 111, 118, .10);
    --danger-border: rgba(255, 111, 118, .28);
    --warning: var(--farik-amber);
    --warning-bg: rgba(243, 199, 98, .11);
    --info: var(--farik-info);
    --info-bg: rgba(106, 217, 255, .10);
    --surface-glass: rgba(255, 255, 255, .045);
    --surface-glass-strong: rgba(255, 255, 255, .075);
    --panel-radius: var(--farik-radius);
    --radius-sm: var(--farik-radius-sm);
    --radius-md: var(--farik-radius);
    --radius-lg: var(--farik-radius);
    --radius-xl: var(--farik-radius);
    --shadow-card: var(--farik-shadow-soft);
    --shadow-md: var(--farik-shadow-soft);
    --shadow-lg: var(--farik-shadow);
    --shadow-glow: 0 0 0 1px rgba(32, 214, 180, .20);
}

[data-theme="light"] {
    color-scheme: light;

    --farik-bg: #f5f9f8;
    --farik-bg-2: #eef5f4;
    --farik-bg-3: #e3eceb;
    --farik-panel: rgba(255, 255, 255, .90);
    --farik-panel-strong: #ffffff;
    --farik-panel-soft: rgba(15, 31, 35, .045);
    --farik-line: rgba(18, 44, 48, .14);
    --farik-line-strong: rgba(13, 151, 135, .38);
    --farik-text: #102025;
    --farik-muted: #5f7377;
    --farik-dim: #829194;
    --farik-signal: #0b9f8d;
    --farik-signal-2: #087ea4;
    --farik-amber: #b77913;
    --farik-danger: #d64550;
    --farik-success: #168a5a;
    --farik-info: #087ea4;
    --farik-shadow: 0 18px 46px rgba(17, 45, 50, .13);
    --farik-shadow-soft: 0 8px 24px rgba(17, 45, 50, .08);
    --bg-modal: rgba(234, 243, 242, .82);
    --surface-glass: rgba(255, 255, 255, .70);
    --surface-glass-strong: rgba(255, 255, 255, .92);
}

*,
*::before,
*::after {
    letter-spacing: 0 !important;
}

html {
    background: var(--farik-bg);
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    color: var(--farik-text) !important;
    background:
        linear-gradient(180deg, var(--farik-bg) 0%, var(--farik-bg-2) 48%, #030609 100%) !important;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

[data-theme="light"] body {
    background:
        linear-gradient(180deg, #f8fbfa 0%, var(--farik-bg-2) 48%, #eef5f4 100%) !important;
}

body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none !important;
    background-image:
        linear-gradient(rgba(118, 151, 157, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(118, 151, 157, .055) 1px, transparent 1px),
        linear-gradient(120deg, rgba(32, 214, 180, .07), transparent 38%, rgba(243, 199, 98, .045)) !important;
    background-size: 42px 42px, 42px 42px, 100% 100% !important;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .92), rgba(0, 0, 0, .34) 58%, transparent 100%);
}

body > * {
    position: relative;
    z-index: 1;
}

a {
    color: var(--farik-signal-2);
}

a:hover {
    color: var(--farik-signal);
}

::selection {
    color: #04100e;
    background: rgba(32, 214, 180, .72);
}

/* Shared controls */
.btn,
.public-header-button,
.login-btn,
button.primary-btn,
button.secondary-btn,
button.danger-btn,
.primary-btn,
.secondary-btn,
.danger-btn {
    min-height: var(--farik-control) !important;
    border-radius: var(--farik-radius) !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.btn:hover,
.public-header-button:hover,
.login-btn:hover,
button.primary-btn:hover,
button.secondary-btn:hover,
button.danger-btn:hover {
    transform: translateY(-1px) !important;
}

.btn-primary,
.public-header-button.primary,
.login-btn-primary,
.primary-btn {
    color: #03110f !important;
    border: 1px solid rgba(151, 255, 233, .24) !important;
    background: linear-gradient(135deg, var(--farik-signal), var(--farik-signal-2)) !important;
}

.btn-yellow,
.login-btn-yellow {
    color: #151005 !important;
    border: 1px solid rgba(255, 230, 152, .36) !important;
    background: linear-gradient(135deg, var(--farik-amber), #ffe7a6) !important;
}

.btn-secondary,
.btn-dark,
.login-btn-secondary,
.public-header-button,
.secondary-btn {
    color: var(--farik-text) !important;
    border: 1px solid var(--farik-line) !important;
    background: rgba(255, 255, 255, .055) !important;
}

[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-dark,
[data-theme="light"] .login-btn-secondary,
[data-theme="light"] .public-header-button,
[data-theme="light"] .secondary-btn {
    background: rgba(15, 31, 35, .045) !important;
}

.btn-secondary:hover,
.btn-dark:hover,
.login-btn-secondary:hover,
.public-header-button:hover,
.secondary-btn:hover {
    border-color: var(--farik-line-strong) !important;
    background: rgba(32, 214, 180, .095) !important;
}

.btn-danger,
.danger-btn {
    color: var(--farik-danger) !important;
    border: 1px solid var(--danger-border) !important;
    background: var(--danger-bg) !important;
}

.btn-icon,
.theme-toggle,
.icon-button,
.modal-close,
.mobile-menu-toggle,
.public-header-menu-button {
    border-radius: var(--farik-radius) !important;
}

.theme-toggle,
.icon-button,
.mobile-menu-toggle,
.public-header-menu-button {
    border: 1px solid var(--farik-line) !important;
    background: rgba(255, 255, 255, .055) !important;
    color: var(--farik-text) !important;
    transform: none !important;
}

.theme-toggle:hover,
.icon-button:hover,
.mobile-menu-toggle:hover,
.public-header-menu-button:hover {
    border-color: var(--farik-line-strong) !important;
    background: rgba(32, 214, 180, .095) !important;
    transform: none !important;
}

.form-input,
.form-select,
.form-textarea,
input,
select,
textarea {
    border-radius: var(--farik-radius) !important;
}

.form-input,
.form-select,
.form-textarea {
    background: rgba(255, 255, 255, .055) !important;
    border-color: var(--farik-line) !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 3px rgba(32, 214, 180, .14) !important;
}

.card,
.data-panel,
.dashboard-panel,
.settings-panel,
.connections-panel,
.support-panel,
.kpi-card,
.stat-tile,
.quick-card,
.billing-kpi,
.trial-kpi,
.modal,
.client-card,
.server-card,
.connection-card,
.protocol-card,
.protocol-card-new,
.management-card,
.insight-card,
.settings-status-card,
.settings-savebar,
.settings-link-card,
.protocol-settings-card,
.diagnostics-status-card,
.dashboard-money-card,
.dashboard-v2-kpi-card,
.dashboard-action-card,
.shortcut-card {
    border-radius: var(--farik-radius) !important;
    border-color: var(--farik-line) !important;
    background: var(--farik-panel) !important;
    box-shadow: var(--farik-shadow-soft) !important;
}

[data-theme="light"] .card,
[data-theme="light"] .data-panel,
[data-theme="light"] .dashboard-panel,
[data-theme="light"] .settings-panel,
[data-theme="light"] .connections-panel,
[data-theme="light"] .support-panel,
[data-theme="light"] .kpi-card,
[data-theme="light"] .stat-tile,
[data-theme="light"] .quick-card,
[data-theme="light"] .billing-kpi,
[data-theme="light"] .trial-kpi,
[data-theme="light"] .modal,
[data-theme="light"] .client-card,
[data-theme="light"] .server-card,
[data-theme="light"] .connection-card,
[data-theme="light"] .protocol-card,
[data-theme="light"] .protocol-card-new,
[data-theme="light"] .management-card,
[data-theme="light"] .insight-card,
[data-theme="light"] .settings-status-card,
[data-theme="light"] .settings-savebar,
[data-theme="light"] .settings-link-card,
[data-theme="light"] .protocol-settings-card,
[data-theme="light"] .diagnostics-status-card,
[data-theme="light"] .dashboard-money-card,
[data-theme="light"] .dashboard-v2-kpi-card,
[data-theme="light"] .dashboard-action-card,
[data-theme="light"] .shortcut-card {
    background: var(--farik-panel) !important;
}

.card-hover:hover,
.server-card:hover,
.client-card:hover,
.dashboard-action-card:hover,
.shortcut-card:hover,
.settings-link-card:hover {
    border-color: var(--farik-line-strong) !important;
    box-shadow: var(--farik-shadow), 0 0 0 1px rgba(32, 214, 180, .12) !important;
}

.badge,
.status-pill,
.client-row-source,
.filter-chip,
.segmented-tab,
.model-step,
.settings-chip,
.dashboard-live-badge,
.download-badge,
.tag,
.pill,
.chip {
    border-radius: 999px !important;
    letter-spacing: 0 !important;
}

.badge-success,
.status-active {
    color: var(--farik-success) !important;
    border-color: var(--success-border) !important;
    background: var(--success-bg) !important;
}

.badge-info {
    color: var(--farik-info) !important;
    border-color: rgba(106, 217, 255, .28) !important;
    background: var(--info-bg) !important;
}

.badge-warn {
    color: var(--farik-amber) !important;
    border-color: rgba(243, 199, 98, .28) !important;
    background: var(--warning-bg) !important;
}

.badge-danger,
.status-expired {
    color: var(--farik-danger) !important;
    border-color: var(--danger-border) !important;
    background: var(--danger-bg) !important;
}

.page-title,
.section-title,
h1,
h2,
h3,
.card-title,
.panel-title,
.auth-title,
.hero-title,
.section-title,
.public-header-title,
.logo-text,
.topbar-title {
    letter-spacing: 0 !important;
}

/* Panel shell */
.app-shell {
    background: transparent !important;
}

.sidebar {
    background: rgba(5, 11, 14, .94) !important;
    border-right: 1px solid var(--farik-line) !important;
    box-shadow: none !important;
}

[data-theme="light"] .sidebar {
    background: rgba(255, 255, 255, .92) !important;
}

.sidebar-logo,
.user-chip,
.panel-search-trigger,
.settings-nav,
.settings-nav-v2,
.server-tabs {
    border-radius: var(--farik-radius) !important;
    border-color: var(--farik-line) !important;
    background: rgba(255, 255, 255, .045) !important;
    box-shadow: none !important;
}

[data-theme="light"] .sidebar-logo,
[data-theme="light"] .user-chip,
[data-theme="light"] .panel-search-trigger,
[data-theme="light"] .settings-nav,
[data-theme="light"] .settings-nav-v2,
[data-theme="light"] .server-tabs {
    background: rgba(15, 31, 35, .035) !important;
}

.logo-icon,
.server-icon,
.client-avatar,
.server-avatar,
.protocol-icon,
.protocol-icon-new,
.management-icon,
.settings-status-icon,
.shortcut-icon,
.app-mark,
.brand-mark,
.app-ico,
.icon {
    border-radius: var(--farik-radius) !important;
    background: linear-gradient(135deg, rgba(32, 214, 180, .22), rgba(106, 217, 255, .15)) !important;
    border: 1px solid rgba(106, 217, 255, .18);
    color: var(--farik-text);
    box-shadow: none !important;
}

.logo-text {
    color: var(--farik-text) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.logo-subtitle,
.topbar-kicker,
.page-eyebrow,
.page-kicker,
.section-kicker,
.eyebrow {
    color: var(--farik-signal) !important;
}

.nav-group-toggle {
    color: var(--farik-muted) !important;
}

.side-nav .nav-link,
.nav-link {
    border-radius: var(--farik-radius) !important;
}

.side-nav .nav-link:hover,
.side-nav .nav-link.active,
.nav-link:hover,
.nav-link.active {
    color: var(--farik-text) !important;
    border-color: var(--farik-line-strong) !important;
    background: rgba(32, 214, 180, .095) !important;
}

.topbar.app-header,
.topbar {
    background: rgba(5, 11, 14, .86) !important;
    border-bottom-color: var(--farik-line) !important;
    box-shadow: none !important;
}

[data-theme="light"] .topbar.app-header,
[data-theme="light"] .topbar {
    background: rgba(248, 251, 250, .90) !important;
}

.desktop-floating-controls {
    display: none !important;
}

.app-main.app-container,
.workspace > .app-main {
    width: min(100%, 1540px) !important;
}

.page-hero,
.dashboard-v2-hero,
.diagnostics-hero-main,
.diagnostics-hero-side,
.app-main > section > .flex.items-center.justify-between:first-child {
    border-radius: var(--farik-radius) !important;
    border: 1px solid var(--farik-line) !important;
    border-top: 3px solid rgba(32, 214, 180, .70) !important;
    background:
        linear-gradient(135deg, rgba(32, 214, 180, .085), rgba(106, 217, 255, .045) 48%, rgba(243, 199, 98, .055)),
        var(--farik-panel) !important;
    box-shadow: var(--farik-shadow-soft) !important;
}

.page-title {
    font-size: 2.55rem !important;
    line-height: 1.08 !important;
}

.page-subtitle {
    color: var(--farik-muted) !important;
    font-size: .98rem !important;
}

.kpi-label,
.billing-kpi-title,
.client-metric-label,
.settings-status-label,
.settings-panel-kicker,
.panel-subtitle,
.card-subtitle {
    color: var(--farik-muted) !important;
}

.kpi-value,
.billing-kpi-value,
.dashboard-money-card strong,
.dashboard-v2-kpi-value {
    color: var(--farik-text) !important;
}

.toolbar-card,
.server-sort-notice,
.model-banner {
    border-radius: var(--farik-radius) !important;
    border-color: var(--farik-line) !important;
    background: rgba(255, 255, 255, .045) !important;
    box-shadow: var(--farik-shadow-soft) !important;
}

.data-panel,
.dashboard-panel,
.settings-panel {
    overflow: hidden;
}

.panel-head,
.support-panel-head {
    border-bottom-color: var(--farik-line) !important;
    background: rgba(255, 255, 255, .025);
}

.orders-table th,
.orders-table td,
.plans-table th,
.plans-table td,
.data-table th,
.data-table td {
    border-bottom-color: var(--farik-line) !important;
}

.orders-table th,
.plans-table th,
.data-table th {
    color: var(--farik-muted) !important;
}

.modal-backdrop {
    background: rgba(3, 8, 11, .78) !important;
    backdrop-filter: blur(14px) !important;
}

[data-theme="light"] .modal-backdrop {
    background: rgba(235, 245, 244, .78) !important;
}

.modal {
    border-radius: var(--farik-radius) !important;
    border-color: var(--farik-line) !important;
}

.modal-footer {
    border-top-color: var(--farik-line) !important;
}

.toast {
    border-radius: var(--farik-radius) !important;
    border-color: var(--farik-line) !important;
    background: var(--farik-panel-strong) !important;
}

.server-more-menu {
    border-radius: var(--farik-radius) !important;
    border-color: var(--farik-line) !important;
    background: #071014 !important;
}

[data-theme="light"] .server-more-menu {
    background: #ffffff !important;
}

.server-more-menu button {
    border-radius: var(--farik-radius-sm) !important;
}

.segmented-control,
.tabs,
.config-tabs,
.server-tabs,
.filter-row {
    border-radius: var(--farik-radius) !important;
    border-color: var(--farik-line) !important;
}

.segment-button,
.tab,
.config-tab,
.server-tab {
    border-radius: var(--farik-radius-sm) !important;
}

.segment-button.active,
.tab.active,
.config-tab.active,
.server-tab.active {
    color: #04110f !important;
    background: var(--farik-signal) !important;
}

/* Public site */
body.public-page {
    --bg: var(--farik-bg);
    --bg2: var(--farik-bg-2);
    --bg-soft: var(--farik-bg-2);
    --card: var(--farik-panel);
    --card2: rgba(255, 255, 255, .045);
    --card-strong: var(--farik-panel-strong);
    --panel: var(--farik-panel);
    --panel2: rgba(255, 255, 255, .045);
    --panel3: rgba(255, 255, 255, .075);
    --line: var(--farik-line);
    --border: var(--farik-line);
    --text: var(--farik-text);
    --muted: var(--farik-muted);
    --soft: #b6c6c8;
    --brand: var(--farik-signal);
    --brand-2: var(--farik-signal-2);
    --brand2: var(--farik-signal-2);
    --mint: var(--farik-signal);
    --cyan: var(--farik-signal-2);
    --yellow: var(--farik-amber);
    --warn: var(--farik-amber);
    --danger: var(--farik-danger);
    --ok: var(--farik-success);
    --radius: var(--farik-radius);
    color: var(--farik-text) !important;
    background:
        linear-gradient(180deg, var(--farik-bg) 0%, var(--farik-bg-2) 52%, #030609 100%) !important;
}

body.public-page::before {
    background-image:
        linear-gradient(rgba(118, 151, 157, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(118, 151, 157, .055) 1px, transparent 1px),
        linear-gradient(120deg, rgba(32, 214, 180, .08), transparent 42%, rgba(243, 199, 98, .05)) !important;
    background-size: 44px 44px, 44px 44px, 100% 100% !important;
}

body.public-page::after,
body.public-page .login-page::before,
body.public-page .login-page::after,
body.public-page .mock::before,
body.public-page .hero-panel::after,
body.public-page .app-card::after,
body.public-page body::before {
    display: none !important;
}

.public-site-header {
    background: rgba(5, 11, 14, .88) !important;
    border-bottom-color: var(--farik-line) !important;
    box-shadow: none !important;
}

.public-header-inner {
    width: min(1180px, calc(100% - 28px)) !important;
    min-height: 68px !important;
}

.public-header-logo {
    border-radius: var(--farik-radius) !important;
    background: linear-gradient(135deg, rgba(32, 214, 180, .22), rgba(106, 217, 255, .14)) !important;
    border-color: rgba(106, 217, 255, .20) !important;
    box-shadow: none !important;
}

.public-header-link {
    border-radius: var(--farik-radius) !important;
    color: rgba(238, 248, 246, .72) !important;
}

.public-header-link:hover,
.public-header-link.is-active {
    color: var(--farik-text) !important;
    background: rgba(32, 214, 180, .10) !important;
}

.public-mobile-menu,
.public-mobile-link {
    border-radius: var(--farik-radius) !important;
    border-color: var(--farik-line) !important;
    background: rgba(7, 15, 19, .98) !important;
}

body.public-page .container,
body.public-page .wrap {
    width: min(1180px, calc(100% - 28px)) !important;
}

body.public-page .hero {
    padding: 54px 0 30px !important;
}

body.public-page .hero-grid {
    position: relative;
    display: block !important;
    min-height: 540px;
    padding-right: min(42vw, 480px);
}

body.public-page .hero-grid > div:first-child {
    position: relative;
    z-index: 2;
    max-width: 760px;
    padding: 26px 0;
}

body.public-page .mock {
    position: absolute !important;
    top: 4px;
    right: 0;
    width: min(430px, 38vw);
    border-radius: var(--farik-radius) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)) !important;
    border-color: var(--farik-line) !important;
    box-shadow: var(--farik-shadow) !important;
}

body.public-page .phone,
body.public-page .connect-card,
body.public-page .phone-row,
body.public-page .app-card,
body.public-page .price-card,
body.public-page .step,
body.public-page .glass,
body.public-page .hero-card,
body.public-page .faq-section,
body.public-page .guide-card,
body.public-page .download-panel,
body.public-page .download-card,
body.public-page .mini-card,
body.public-page .section-card,
body.public-page .payment-page-shell .card {
    border-radius: var(--farik-radius) !important;
    border-color: var(--farik-line) !important;
    background: var(--farik-panel) !important;
    box-shadow: var(--farik-shadow-soft) !important;
}

body.public-page .hero-card,
body.public-page main.hero,
body.public-page .copy.glass,
body.public-page .payment-page-shell .card {
    border-top: 3px solid rgba(32, 214, 180, .70) !important;
}

body.public-page h1 {
    font-size: 4.35rem !important;
    line-height: .98 !important;
}

body.public-page h2,
body.public-page .section-title {
    font-size: 2.35rem !important;
    line-height: 1.08 !important;
}

body.public-page .hero-text,
body.public-page .lead,
body.public-page .section-copy,
body.public-page .card-text,
body.public-page .section-lead,
body.public-page p {
    color: var(--farik-muted) !important;
}

body.public-page .eyebrow,
body.public-page .section-kicker {
    color: var(--farik-signal) !important;
    border-color: rgba(32, 214, 180, .26) !important;
    background: rgba(32, 214, 180, .085) !important;
    border-radius: 999px !important;
}

body.public-page .gradient-text {
    color: var(--farik-text) !important;
    background: none !important;
}

body.public-page .card,
body.public-page .price-card,
body.public-page .section-card {
    background: rgba(255, 255, 255, .045) !important;
}

body.public-page .card.strong,
body.public-page .price-card.popular,
body.public-page .download-card.primary-app {
    background:
        linear-gradient(135deg, rgba(32, 214, 180, .11), rgba(106, 217, 255, .055)),
        rgba(255, 255, 255, .045) !important;
    border-color: rgba(32, 214, 180, .30) !important;
}

body.public-page .cta {
    border-radius: var(--farik-radius) !important;
    border-color: rgba(32, 214, 180, .26) !important;
    background:
        linear-gradient(135deg, rgba(32, 214, 180, .12), rgba(243, 199, 98, .07)),
        var(--farik-panel) !important;
}

body.public-page .num,
body.public-page .section-number,
body.public-page .step-num {
    border-radius: var(--farik-radius) !important;
    color: #03110f !important;
    background: var(--farik-signal) !important;
}

body.public-page .pay-logo,
body.public-page .price-meta span,
body.public-page .badge,
body.public-page .chip,
body.public-page .pill-line span {
    border-radius: 999px !important;
    border-color: var(--farik-line) !important;
    background: rgba(255, 255, 255, .055) !important;
}

body.public-page .pay-logo.bank {
    color: #151005 !important;
    background: linear-gradient(135deg, var(--farik-amber), #ffe7a6) !important;
}

body.public-page .faq-section {
    overflow: hidden;
}

body.public-page .section-head {
    border-bottom-color: var(--farik-line) !important;
}

body.public-page details {
    border-radius: var(--farik-radius) !important;
    border-color: var(--farik-line) !important;
    background: rgba(255, 255, 255, .045) !important;
}

body.public-page .footer-card,
body.public-page .public-legal-footer,
body.public-page .legal-footer-card {
    border-radius: var(--farik-radius) !important;
    border-color: var(--farik-line) !important;
    background: var(--farik-panel) !important;
    box-shadow: var(--farik-shadow-soft) !important;
}

body.public-page .legal-footer-card::before {
    background: linear-gradient(90deg, rgba(32, 214, 180, .52), rgba(243, 199, 98, .34)) !important;
}

/* Auth page */
body.auth-page {
    --login-bg: var(--farik-bg);
    --login-card: var(--farik-panel);
    --login-card-strong: var(--farik-panel-strong);
    --login-line: var(--farik-line);
    --login-muted: var(--farik-muted);
    --login-text: var(--farik-text);
    --login-mint: var(--farik-signal);
    --login-cyan: var(--farik-signal-2);
    --login-yellow: var(--farik-amber);
    --login-red: var(--farik-danger);
    background:
        linear-gradient(180deg, var(--farik-bg) 0%, var(--farik-bg-2) 56%, #030609 100%) !important;
}

body.auth-page::before {
    display: block !important;
}

.login-page::before,
.login-page::after,
.hero-panel::after {
    display: none !important;
}

.login-topbar,
.login-hero,
.login-footer {
    width: min(1180px, calc(100% - 28px)) !important;
}

.hero-panel,
.auth-panel,
.login-form-card,
.mini-card,
.app-chip,
.steps-card {
    border-radius: var(--farik-radius) !important;
    border-color: var(--farik-line) !important;
    background: var(--farik-panel) !important;
    box-shadow: var(--farik-shadow-soft) !important;
}

.hero-panel {
    border-top: 3px solid rgba(32, 214, 180, .70) !important;
}

.hero-title {
    font-size: 4.2rem !important;
    line-height: .98 !important;
}

.hero-copy,
.auth-subtitle,
.mini-text,
.auth-note,
.step-row,
.login-footer {
    color: var(--farik-muted) !important;
}

.login-form-card .form-input {
    background: rgba(255, 255, 255, .055) !important;
    border-color: var(--farik-line) !important;
}

.auth-badge {
    color: #151005 !important;
    background: var(--farik-amber) !important;
    border-radius: 999px !important;
}

/* Telegram Mini App */
body.telegram-mini-page {
    --bg: var(--farik-bg);
    --bg2: var(--farik-bg-2);
    --card: var(--farik-panel);
    --card2: rgba(255, 255, 255, .055);
    --text: var(--farik-text);
    --muted: var(--farik-muted);
    --line: var(--farik-line);
    --accent: var(--farik-signal);
    --accent2: var(--farik-signal-2);
    --danger: var(--farik-danger);
    --ok: var(--farik-success);
    background:
        linear-gradient(180deg, var(--farik-bg) 0%, var(--farik-bg-2) 100%) !important;
}

body.telegram-mini-page .app-shell {
    width: min(430px, 100%) !important;
}

body.telegram-mini-page .card,
body.telegram-mini-page .tabs,
body.telegram-mini-page .summary-grid div,
body.telegram-mini-page .conn-card,
body.telegram-mini-page details,
body.telegram-mini-page select,
body.telegram-mini-page input {
    border-radius: var(--farik-radius) !important;
    border-color: var(--farik-line) !important;
    background: var(--farik-panel) !important;
    box-shadow: var(--farik-shadow-soft) !important;
}

body.telegram-mini-page .hero.card {
    border-top: 3px solid rgba(32, 214, 180, .70) !important;
}

body.telegram-mini-page .tab {
    border-radius: var(--farik-radius-sm) !important;
}

body.telegram-mini-page .tab.is-active,
body.telegram-mini-page .primary-btn {
    color: #03110f !important;
    background: linear-gradient(135deg, var(--farik-signal), var(--farik-signal-2)) !important;
}

body.telegram-mini-page .secondary-btn {
    color: var(--farik-text) !important;
    border: 1px solid var(--farik-line) !important;
    background: rgba(255, 255, 255, .055) !important;
}

/* Mobile */
@media (max-width: 1024px) {
    .sidebar,
    #appSidebar.sidebar {
        background: rgba(5, 11, 14, .98) !important;
    }

    [data-theme="light"] .sidebar,
    [data-theme="light"] #appSidebar.sidebar {
        background: #ffffff !important;
    }
}

@media (max-width: 760px) {
    .page-title {
        font-size: 1.85rem !important;
    }

    .page-hero,
    .dashboard-v2-hero,
    .diagnostics-hero-main,
    .diagnostics-hero-side,
    .card,
    .data-panel,
    .dashboard-panel,
    .settings-panel,
    .connections-panel,
    .modal {
        border-radius: var(--farik-radius) !important;
    }

    body.public-page .hero {
        padding: 34px 0 22px !important;
    }

    body.public-page .hero-grid {
        min-height: 0;
        padding-right: 0;
    }

    body.public-page .hero-grid > div:first-child {
        padding: 0;
    }

    body.public-page .mock {
        position: relative !important;
        width: 100%;
        margin-top: 18px;
    }

    body.public-page h1,
    .hero-title {
        font-size: 2.45rem !important;
        line-height: 1.05 !important;
    }

    body.public-page h2,
    body.public-page .section-title {
        font-size: 1.62rem !important;
    }

    body.public-page .section-head,
    body.public-page .cta,
    .login-hero {
        grid-template-columns: 1fr !important;
    }

    .hero-title {
        font-size: 2.5rem !important;
    }

    .login-topbar,
    .login-hero,
    .login-footer,
    body.public-page .container,
    body.public-page .wrap {
        width: min(100% - 20px, 1180px) !important;
    }
}

@media (max-width: 480px) {
    .btn,
    .public-header-button,
    .login-btn,
    .primary-btn,
    .secondary-btn,
    .danger-btn {
        min-height: 44px !important;
    }

    .public-header-title {
        max-width: 120px;
    }
}

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