/* flavor compatibility layer (from version02) */
/* version02 (version2) haunt-based skin for web_portal */

html[data-ui-style="flavor"] {
    --bg: var(--hc-bg);
    --surface: var(--hc-surface);
    --surface2: var(--hc-surface-2);
    --border: var(--hc-border);
    --border2: var(--hc-border-strong);
    --text: var(--hc-text);
    --muted: var(--hc-muted);
    --accent: var(--hc-accent);
    --accent2: var(--hc-accent-2);
    --green: var(--hc-success);
    --red: var(--hc-danger);
    --amber: var(--hc-warning);
    --safe-bot: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
    --r: 14px;
    --r-sm: 10px;
    --v2-border: var(--border);
    --v2-text-soft: var(--muted);
}

html[data-ui-style="flavor"],
html[data-ui-style="flavor"] body {
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
}

html[data-ui-style="flavor"] .main-content {
    margin-left: 0 !important;
    width: 100%;
    padding: 0;
    background: transparent !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

html[data-ui-style="flavor"] .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

html[data-ui-style="flavor"] .v2-main-content .container {
    max-width: none;
}

html[data-ui-style="flavor"] .v2-content-shell {
    overflow: hidden;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==============================================
   version02 bridge: map web_portal templates to haunt styles
   ============================================== */
html[data-ui-style="flavor"] body {
    background: var(--bg);
}

html[data-ui-style="flavor"] .v2-shell {
    max-width: 1380px;
    margin: 0 auto;
    padding: calc(84px + env(safe-area-inset-top, 0px)) 14px 22px;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 12px;
    position: relative;
    z-index: 2;
}

html[data-ui-style="flavor"] .v2-sidebar {
    position: sticky;
    top: calc(78px + env(safe-area-inset-top, 0px));
    height: calc(100vh - 100px - env(safe-area-inset-top, 0px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

html[data-ui-style="flavor"] .v2-side-link,
html[data-ui-style="flavor"] .v2-mobile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    color: var(--muted);
    text-decoration: none;
    font-weight: 500;
    transition: all .18s;
}

html[data-ui-style="flavor"] .v2-side-link:hover,
html[data-ui-style="flavor"] .v2-mobile-link:hover {
    border-color: var(--border2);
    color: var(--text);
    background: rgba(124, 92, 252, .08);
}

html[data-ui-style="flavor"] .v2-side-link.active,
html[data-ui-style="flavor"] .v2-mobile-link.active {
    border-color: rgba(124, 92, 252, .35);
    background: rgba(124, 92, 252, .12);
    color: var(--accent);
}

html[data-ui-style="flavor"] .v2-sidebar-support {
    margin-top: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 10px;
    background: var(--surface2);
}

html[data-ui-style="flavor"] .v2-sidebar-support p {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 12px;
}

html[data-ui-style="flavor"] .v2-main-content {
    padding-top: 0;
}

html[data-ui-style="flavor"] .v2-content-shell {
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: rgba(17, 17, 24, .86);
    padding: 12px;
    box-shadow: 0 14px 34px -24px rgba(0,0,0,.8);
}

html[data-ui-style="flavor"] .v2-topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1300;
    border-bottom: 1px solid var(--border);
    background: rgba(10, 10, 15, .9);
    backdrop-filter: blur(12px);
}

html[data-ui-style="flavor"] .v2-topbar-inner {
    max-width: 1380px;
    min-height: 72px;
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 14px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

html[data-ui-style="flavor"] .v2-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}

html[data-ui-style="flavor"] .v2-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(124, 92, 252, .35);
    background: linear-gradient(135deg, rgba(124,92,252,.85), rgba(91,63,212,.92));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 22px -14px rgba(124,92,252,.65);
}

html[data-ui-style="flavor"] .v2-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html[data-ui-style="flavor"] .v2-brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    gap: 2px;
}

html[data-ui-style="flavor"] .v2-brand-text strong {
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    letter-spacing: -.2px;
}

html[data-ui-style="flavor"] .v2-brand-text small {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

html[data-ui-style="flavor"] .v2-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

html[data-ui-style="flavor"] .v2-icon-btn,
html[data-ui-style="flavor"] .theme-toggle-btn,
html[data-ui-style="flavor"] .v2-mobile-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

html[data-ui-style="flavor"] .v2-user-btn {
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    padding: 4px 10px 4px 4px;
}

html[data-ui-style="flavor"] .user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 14px;
}

html[data-ui-style="flavor"] .user-email {
    color: var(--text);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

html[data-ui-style="flavor"] .v2-user-dropdown,
html[data-ui-style="flavor"] .v2-theme-dropdown,
html[data-ui-style="flavor"] .theme-modal,
html[data-ui-style="flavor"] .notifications-modal {
    border: 1px solid var(--border);
    background: rgba(17, 17, 24, .98);
    border-radius: 12px;
    box-shadow: 0 20px 38px -28px rgba(0,0,0,.9);
}

html[data-ui-style="flavor"] .v2-mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 3px;
}

html[data-ui-style="flavor"] .v2-mobile-menu-btn span {
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

html[data-ui-style="flavor"] .v2-mobile-sheet,
html[data-ui-style="flavor"] .v2-bottom-nav {
    display: none;
}

html[data-ui-style="flavor"] .v2-mobile-sheet {
    position: fixed;
    left: 10px;
    right: 10px;
    top: calc(76px + env(safe-area-inset-top, 0px));
    z-index: 1290;
    max-height: calc(100vh - 160px);
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(17, 17, 24, .97);
    padding: 9px;
    flex-direction: column;
    gap: 8px;
}

html[data-ui-style="flavor"] .v2-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: var(--safe-bot);
}

html[data-ui-style="flavor"] .v2-bottom-nav .bottom-nav-inner {
    display: flex;
}

html[data-ui-style="flavor"] .v2-bottom-nav .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: 10px;
    position: relative;
}

html[data-ui-style="flavor"] .v2-bottom-nav .bottom-nav-item.active {
    color: var(--accent);
}

html[data-ui-style="flavor"] .v2-bottom-nav .bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    border-radius: 0 0 3px 3px;
    background: var(--accent);
}
html[data-ui-style="flavor"] .flavor-page-context {
    position: relative;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: rgba(17, 17, 24, .88);
    padding: 14px;
}

html[data-ui-style="flavor"] .v2-page-head,
html[data-ui-style="flavor"] .v2-partner-header {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface2);
    padding: 12px;
    margin-bottom: 12px;
}

html[data-ui-style="flavor"] .v2-page-eyebrow,
html[data-ui-style="flavor"] .v2-hero-overline {
    color: var(--accent);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    margin: 0;
}

html[data-ui-style="flavor"] .v2-page-title,
html[data-ui-style="flavor"] .v2-hero-title {
    margin: 4px 0 0;
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    letter-spacing: -.3px;
}

html[data-ui-style="flavor"] .v2-hero-subtitle {
    margin: 4px 0 0;
    color: var(--muted);
}

html[data-ui-style="flavor"] .v2-hero,
html[data-ui-style="flavor"] .v2-sub-card,
html[data-ui-style="flavor"] .v2-auth-panel,
html[data-ui-style="flavor"] .v2-partner-card,
html[data-ui-style="flavor"] .v2-stat-card,
html[data-ui-style="flavor"] .v2-partner-stat,
html[data-ui-style="flavor"] .v2-app-card {
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
}

html[data-ui-style="flavor"] .v2-hero,
html[data-ui-style="flavor"] .v2-sub-card,
html[data-ui-style="flavor"] .v2-auth-panel,
html[data-ui-style="flavor"] .v2-partner-card,
html[data-ui-style="flavor"] .v2-app-card {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

html[data-ui-style="flavor"] .v2-stat-card {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 158px;
    background: linear-gradient(160deg, var(--surface) 0%, color-mix(in srgb, var(--surface2) 86%, transparent) 100%);
}

html[data-ui-style="flavor"] .v2-stat-card strong {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -.2px;
}

html[data-ui-style="flavor"] .v2-stat-card .btn {
    margin-top: auto;
    width: 100%;
}

html[data-ui-style="flavor"] .v2-hero {
    background: linear-gradient(135deg, rgba(124,92,252,.14) 0%, rgba(91,63,212,.04) 100%);
    border-color: rgba(124,92,252,.2);
}

html[data-ui-style="flavor"] .v2-sub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

html[data-ui-style="flavor"] .v2-stat-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

html[data-ui-style="flavor"] .v2-stat-head i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border2);
    background: rgba(124,92,252,.16);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html[data-ui-style="flavor"] .v2-stat-head span {
    color: var(--text);
    font-weight: 600;
}

html[data-ui-style="flavor"] .v2-sub-title,
html[data-ui-style="flavor"] .v2-auth-panel h2,
html[data-ui-style="flavor"] .v2-partner-card h3 {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-size: 17px;
    letter-spacing: -.2px;
}

html[data-ui-style="flavor"] .v2-sub-grid,
html[data-ui-style="flavor"] .v2-stat-grid,
html[data-ui-style="flavor"] .v2-quick-grid,
html[data-ui-style="flavor"] .v2-partner-grid,
html[data-ui-style="flavor"] .v2-auth-grid,
html[data-ui-style="flavor"] .v2-tv-grid,
html[data-ui-style="flavor"] .v2-partner-stats {
    display: grid;
    gap: 9px;
}

html[data-ui-style="flavor"] .v2-sub-grid { grid-template-columns: 1fr 1fr; }
html[data-ui-style="flavor"] .v2-stat-grid,
html[data-ui-style="flavor"] .v2-partner-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-ui-style="flavor"] .v2-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-ui-style="flavor"] .v2-partner-grid,
html[data-ui-style="flavor"] .v2-auth-grid,
html[data-ui-style="flavor"] .v2-tv-grid { grid-template-columns: 1fr 1fr; }
html[data-ui-style="flavor"] .v2-auth-grid.single { grid-template-columns: 1fr; }

html[data-ui-style="flavor"] .v2-mini,
html[data-ui-style="flavor"] .v2-method-line {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 10px;
}

html[data-ui-style="flavor"] .v2-mini span,
html[data-ui-style="flavor"] .v2-method-line span { color: var(--muted); font-size: 12px; }
html[data-ui-style="flavor"] .v2-mini strong,
html[data-ui-style="flavor"] .v2-method-line strong { color: var(--text); font-size: 16px; }

html[data-ui-style="flavor"] .v2-method-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

html[data-ui-style="flavor"] .v2-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    border: 1px solid var(--border2);
    background: var(--surface2);
    color: var(--muted);
    font-size: 11px;
    padding: 3px 10px;
    font-weight: 600;
    letter-spacing: .02em;
}

html[data-ui-style="flavor"] .v2-pill.success {
    background: rgba(34,211,160,.12);
    border-color: rgba(34,211,160,.2);
    color: var(--green);
}

html[data-ui-style="flavor"] .v2-pill.warn {
    background: rgba(240,168,50,.12);
    border-color: rgba(240,168,50,.2);
    color: var(--amber);
}

html[data-ui-style="flavor"] .v2-pill.danger {
    background: rgba(240,84,84,.12);
    border-color: rgba(240,84,84,.2);
    color: var(--red);
}

html[data-ui-style="flavor"] .v2-progress {
    width: 100%;
    height: 8px;
    border-radius: 10px;
    background: var(--surface2);
    overflow: hidden;
}

html[data-ui-style="flavor"] .v2-progress span {
    height: 100%;
    display: block;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
}

html[data-ui-style="flavor"] .v2-inline-flash {
    border-radius: var(--r-sm);
    border: 1px solid var(--border2);
    background: var(--surface2);
    color: var(--text);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

html[data-ui-style="flavor"] .v2-inline-flash.success { color: var(--green); border-color: rgba(34,211,160,.26); }
html[data-ui-style="flavor"] .v2-inline-flash.error { color: var(--red); border-color: rgba(240,84,84,.26); }

html[data-ui-style="flavor"] .v2-actions,
html[data-ui-style="flavor"] .v2-modal-actions,
html[data-ui-style="flavor"] .v2-partner-actions,
html[data-ui-style="flavor"] .v2-app-actions,
html[data-ui-style="flavor"] .v2-manage-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

html[data-ui-style="flavor"] .v2-actions .btn,
html[data-ui-style="flavor"] .v2-actions form,
html[data-ui-style="flavor"] .v2-modal-actions .btn,
html[data-ui-style="flavor"] .v2-manage-grid .btn,
html[data-ui-style="flavor"] .v2-manage-grid form { flex: 1 1 170px; margin: 0; }

html[data-ui-style="flavor"] .v2-quick-link {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    min-height: 84px;
    padding: 10px;
    color: var(--text);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

html[data-ui-style="flavor"] .v2-quick-link i { color: var(--accent); }
html[data-ui-style="flavor"] .v2-quick-link span { color: var(--muted); font-size: 12px; }

html[data-ui-style="flavor"] .v2-install-cta {
    border: 1px dashed var(--border2);
    border-radius: var(--r);
    background: color-mix(in srgb, var(--surface2) 90%, transparent);
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

html[data-ui-style="flavor"] .v2-install-cta p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

html[data-ui-style="flavor"] .v2-install-cta .btn {
    min-width: 178px;
    justify-self: end;
}

html[data-ui-style="flavor"] .v2-key-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; }

html[data-ui-style="flavor"] .v2-link-box { display: flex; gap: 8px; align-items: center; }
html[data-ui-style="flavor"] .v2-link-box input { flex: 1; }

html[data-ui-style="flavor"] .v2-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }

html[data-ui-style="flavor"] .v2-tab-btn {
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    min-height: 54px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
}

html[data-ui-style="flavor"] .v2-tab-btn.active,
html[data-ui-style="flavor"] .v2-tab-btn:hover {
    border-color: rgba(124,92,252,.34);
    background: rgba(124,92,252,.12);
    color: var(--accent);
}

html[data-ui-style="flavor"] .v2-apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }

html[data-ui-style="flavor"] .v2-app-head { display: flex; align-items: center; gap: 10px; }

html[data-ui-style="flavor"] .v2-app-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface2);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

html[data-ui-style="flavor"] .v2-app-logo img { width: 100%; height: 100%; object-fit: cover; }

html[data-ui-style="flavor"] .v2-app-meta h3 { margin: 0; font-size: 16px; }
html[data-ui-style="flavor"] .v2-app-meta p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

html[data-ui-style="flavor"] .v2-recommended-chip {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 20px;
    border: 1px solid rgba(34,211,160,.2);
    background: rgba(34,211,160,.14);
    color: var(--green);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    padding: 4px 7px;
}

html[data-ui-style="flavor"] .v2-steps { display: flex; flex-direction: column; gap: 8px; }

html[data-ui-style="flavor"] .v2-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }

html[data-ui-style="flavor"] .v2-step span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(124,92,252,.35);
    background: rgba(124,92,252,.18);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

html[data-ui-style="flavor"] .v2-step p { margin: 2px 0 0; color: var(--muted); }

html[data-ui-style="flavor"] .v2-history-table-wrap {
    overflow: auto;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
}

html[data-ui-style="flavor"] .v2-history-table { width: 100%; border-collapse: collapse; min-width: 520px; }
html[data-ui-style="flavor"] .v2-history-table th,
html[data-ui-style="flavor"] .v2-history-table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; }
html[data-ui-style="flavor"] .v2-history-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
html[data-ui-style="flavor"] .v2-history-table tbody tr:last-child td { border-bottom: none; }

html[data-ui-style="flavor"] .v2-modal {
    position: fixed;
    inset: 0;
    z-index: 1450;
    background: rgba(0,0,0,.72);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

html[data-ui-style="flavor"] .v2-modal.show { display: flex; }

html[data-ui-style="flavor"] .v2-modal-card {
    width: min(560px, 100%);
    max-height: 88vh;
    overflow: auto;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
}

html[data-ui-style="flavor"] .v2-modal-head {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

html[data-ui-style="flavor"] .v2-modal-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }

html[data-ui-style="flavor"] .v2-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
}

html[data-ui-style="flavor"] .v2-amount-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
html[data-ui-style="flavor"] .amount-btn.selected { border-color: rgba(124,92,252,.4)!important; background: rgba(124,92,252,.18)!important; }

html[data-ui-style="flavor"] .v2-methods-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 8px; }

html[data-ui-style="flavor"] .payment-method-option.v2-method-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface2);
    padding: 10px 38px 10px 10px;
}

html[data-ui-style="flavor"] .payment-method-option input { position: absolute; inset: 0; opacity: 0; }
html[data-ui-style="flavor"] .payment-method-option input:checked ~ .v2-method-icon,
html[data-ui-style="flavor"] .payment-method-option input:checked ~ .v2-method-text strong { color: var(--accent); }
html[data-ui-style="flavor"] .payment-method-option input:checked ~ .v2-method-radio {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 4px var(--accent);
    background: rgba(124, 92, 252, .12);
}

html[data-ui-style="flavor"] .payment-method-option input:focus-visible ~ .v2-method-radio {
    box-shadow: 0 0 0 3px rgba(124, 92, 252, .28), inset 0 0 0 2px var(--surface);
}

html[data-ui-style="flavor"] .v2-method-radio {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid var(--border2);
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

html[data-ui-style="flavor"] .v2-method-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

html[data-ui-style="flavor"] .v2-method-text small { color: var(--muted); font-size: 12px; }
html[data-ui-style="flavor"] .v2-topup-submit { margin-top: 12px; }

html[data-ui-style="flavor"] .v2-pay-redirect-card { align-items: center; text-align: center; }

html[data-ui-style="flavor"] .v2-pay-redirect-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    border: 1px solid rgba(124,92,252,.35);
    background: rgba(124,92,252,.18);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

html[data-ui-style="flavor"] .v2-spinner { width: 30px; height: 30px; border: 2px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: spin .65s linear infinite; }

html[data-ui-style="flavor"] .v2-scanner-modal {
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: rgba(0,0,0,.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

html[data-ui-style="flavor"] .v2-scanner-modal.hidden { display: none; }

html[data-ui-style="flavor"] .v2-scanner-container {
    width: min(420px, 100%);
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 12px;
    position: relative;
}

html[data-ui-style="flavor"] .v2-scanner-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
html[data-ui-style="flavor"] .v2-scanner-video { width: 100%; border-radius: 12px; border: 1px solid var(--border); background: #000; }
html[data-ui-style="flavor"] .v2-scanner-frame { position: absolute; inset: 74px 26px 62px; border: 2px solid var(--accent); border-radius: 14px; pointer-events: none; }

html[data-ui-style="flavor"] .toast {
    position: fixed;
    left: 50%;
    bottom: calc(72px + var(--safe-bot));
    transform: translateX(-50%) translateY(14px);
    opacity: 0;
    border-radius: 20px;
    border: 1px solid var(--border2);
    background: var(--surface2);
    color: var(--text);
    padding: 9px 16px;
    z-index: 1700;
    transition: opacity .18s, transform .18s;
}

html[data-ui-style="flavor"] .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

html[data-ui-style="flavor"] .hidden { display: none !important; }

@media (max-width: 1180px) {
    html[data-ui-style="flavor"] .v2-shell {
        grid-template-columns: 1fr;
        padding: calc(84px + env(safe-area-inset-top, 0px)) 10px calc(86px + env(safe-area-inset-bottom, 0px));
    }

    html[data-ui-style="flavor"] .v2-sidebar { display: none; }
    html[data-ui-style="flavor"] .v2-mobile-menu-btn { display: inline-flex; }
    html[data-ui-style="flavor"] .v2-bottom-nav { display: block; }
    html[data-ui-style="flavor"] .v2-footer { display: none; }
}

@media (max-width: 920px) {
    html[data-ui-style="flavor"] .v2-stat-grid,
    html[data-ui-style="flavor"] .v2-partner-stats,
    html[data-ui-style="flavor"] .v2-sub-grid,
    html[data-ui-style="flavor"] .v2-quick-grid,
    html[data-ui-style="flavor"] .v2-partner-grid,
    html[data-ui-style="flavor"] .v2-auth-grid,
    html[data-ui-style="flavor"] .v2-tv-grid,
    html[data-ui-style="flavor"] .v2-key-detail-grid { grid-template-columns: 1fr; }

    html[data-ui-style="flavor"] .v2-amount-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

    html[data-ui-style="flavor"] .v2-install-cta {
        grid-template-columns: 1fr;
    }

    html[data-ui-style="flavor"] .v2-install-cta .btn {
        width: 100%;
        justify-self: stretch;
    }
}

@media (max-width: 720px) {
    html[data-ui-style="flavor"] .v2-topbar-inner {
        padding-left: 12px;
        padding-right: 12px;
    }

    html[data-ui-style="flavor"] .v2-brand-text small,
    html[data-ui-style="flavor"] .user-email,
    html[data-ui-style="flavor"] .v2-user-btn .dropdown-arrow {
        display: none;
    }

    html[data-ui-style="flavor"] .v2-user-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        padding: 0;
    }

    html[data-ui-style="flavor"] .user-avatar { margin: 0; }

    html[data-ui-style="flavor"] .v2-content-shell,
    html[data-ui-style="flavor"] .flavor-page-context {
        border-radius: 12px;
        padding: 10px;
    }

    html[data-ui-style="flavor"] .v2-actions .btn,
    html[data-ui-style="flavor"] .v2-actions form,
    html[data-ui-style="flavor"] .v2-modal-actions .btn,
    html[data-ui-style="flavor"] .v2-manage-grid .btn,
    html[data-ui-style="flavor"] .v2-manage-grid form {
        flex-basis: 100%;
    }

    html[data-ui-style="flavor"] .v2-link-box { flex-direction: column; }
    html[data-ui-style="flavor"] .v2-link-box .btn { width: 100%; }
}

/* hard overrides for web portal pages */
html[data-ui-style="flavor"],
html[data-ui-style="flavor"] body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

html[data-ui-style="flavor"] .main-content {
    min-height: 100vh;
}

html[data-ui-style="flavor"] .flavor-page-context {
    margin: 0;
}

html[data-ui-style="flavor"] .v2-mobile-sheet.show {
    display: flex;
}
html[data-ui-style="flavor"] .btn {
    width: auto;
}

html[data-ui-style="flavor"] .btn.btn-block,
html[data-ui-style="flavor"] .btn-lg.btn-block,
html[data-ui-style="flavor"] .v2-auth-form .btn,
html[data-ui-style="flavor"] .v2-app-actions .btn,
html[data-ui-style="flavor"] .v2-actions .btn,
html[data-ui-style="flavor"] .v2-modal-actions .btn,
html[data-ui-style="flavor"] .v2-manage-grid .btn {
    width: 100%;
}

html[data-ui-style="flavor"] .v2-auth-buttons .btn,
html[data-ui-style="flavor"] .v2-sidebar-support .btn {
    width: auto;
}

html[data-ui-style="flavor"] .v2-actions .btn + .btn,
html[data-ui-style="flavor"] .v2-modal-actions .btn + .btn,
html[data-ui-style="flavor"] .v2-app-actions .btn + .btn,
html[data-ui-style="flavor"] .v2-manage-grid .btn + .btn {
    margin-top: 0;
}

/* coverage for remaining version02 blocks */
html[data-ui-style="flavor"] .v2-dashboard-page,
html[data-ui-style="flavor"] .v2-topup-page,
html[data-ui-style="flavor"] .v2-install-page,
html[data-ui-style="flavor"] .v2-profile-page,
html[data-ui-style="flavor"] .v2-payments-history-page,
html[data-ui-style="flavor"] .v2-tv-page,
html[data-ui-style="flavor"] .v2-auth-page,
html[data-ui-style="flavor"] .v2-link-page,
html[data-ui-style="flavor"] .v2-partner-page,
html[data-ui-style="flavor"] .v2-pay-redirect-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

html[data-ui-style="flavor"] .v2-hero-text {
    min-width: 0;
}

html[data-ui-style="flavor"] .v2-hero-profile,
html[data-ui-style="flavor"] .v2-back-btn {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

html[data-ui-style="flavor"] .v2-auth-foot {
    color: var(--muted);
    font-size: 13px;
}

html[data-ui-style="flavor"] .v2-auth-foot a {
    color: var(--accent);
    text-decoration: none;
}

html[data-ui-style="flavor"] .v2-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

html[data-ui-style="flavor"] .v2-profile-facts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

html[data-ui-style="flavor"] .v2-partner-status {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface2);
    padding: 9px 10px;
    color: var(--muted);
}

html[data-ui-style="flavor"] .v2-partner-status.success {
    color: var(--green);
    border-color: rgba(34,211,160,.28);
}

html[data-ui-style="flavor"] .v2-partner-status.error {
    color: var(--red);
    border-color: rgba(240,84,84,.28);
}

html[data-ui-style="flavor"] .v2-partner-list,
html[data-ui-style="flavor"] .v2-renew-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

html[data-ui-style="flavor"] .v2-renew-item {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface2);
    padding: 10px;
    text-align: left;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-decoration: none;
}

html[data-ui-style="flavor"] .v2-addon-option {
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

html[data-ui-style="flavor"] .v2-addon-option:hover {
    border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
    transform: translateY(-1px);
}

html[data-ui-style="flavor"] .v2-addon-option.is-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--surface2));
}

html[data-ui-style="flavor"] .v2-renew-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

html[data-ui-style="flavor"] .v2-renew-item-main span {
    color: var(--muted);
    font-size: 12px;
}

html[data-ui-style="flavor"] .v2-renew-item-price {
    font-family: 'Syne', sans-serif;
    font-size: 17px;
    font-weight: 700;
}

html[data-ui-style="flavor"] .v2-renew-item-disabled {
    opacity: .92;
}

html[data-ui-style="flavor"] #v2AddDevicesModal .v2-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

html[data-ui-style="flavor"] #v2AddDevicesModal .v2-renew-item {
    align-items: flex-start;
}

html[data-ui-style="flavor"] #v2AddDevicesModal .v2-renew-item-main {
    flex: 1;
    min-width: 0;
}

html[data-ui-style="flavor"] #v2AddDevicesModal .v2-renew-item-main strong {
    display: block;
    line-height: 1.3;
}

html[data-ui-style="flavor"] #v2AddDevicesModal .v2-renew-item-main span {
    line-height: 1.35;
}

html[data-ui-style="flavor"] #v2AddDevicesModal .v2-renew-item-price {
    flex-shrink: 0;
    padding-left: 8px;
}

html[data-ui-style="flavor"] .v2-renew-topup-link {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 9px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

html[data-ui-style="flavor"] .v2-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

html[data-ui-style="flavor"] .v2-form-row > span,
html[data-ui-style="flavor"] .v2-form-row > label {
    color: var(--muted);
    font-size: 12px;
}

html[data-ui-style="flavor"] .v2-bullet-list {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

html[data-ui-style="flavor"] .v2-code-box {
    border: 1px dashed var(--border2);
    border-radius: var(--r-sm);
    background: var(--surface2);
    padding: 10px;
    overflow: auto;
}

html[data-ui-style="flavor"] .v2-code-box code {
    color: var(--accent);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
}

html[data-ui-style="flavor"] .v2-link-muted {
    color: var(--muted);
    font-size: 12px;
}

html[data-ui-style="flavor"] .v2-tab-icon {
    font-size: 16px;
}

html[data-ui-style="flavor"] .v2-user-menu,
html[data-ui-style="flavor"] .v2-theme-wrap {
    position: relative;
}

html[data-ui-style="flavor"] .v2-tv-code {
    text-transform: uppercase;
    letter-spacing: .2em;
    text-align: center;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 16px;
}

html[data-ui-style="flavor"] .v2-scanner-close {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
}

/* keep install page stable and adapted */
html[data-ui-style="flavor"] .v2-install-page .v2-tabs {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

html[data-ui-style="flavor"] .v2-install-page .v2-apps-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

html[data-ui-style="flavor"] .v2-install-page .v2-app-actions {
    margin-top: auto;
}

@media (max-width: 920px) {
    html[data-ui-style="flavor"] .v2-profile-grid {
        grid-template-columns: 1fr;
    }

    html[data-ui-style="flavor"] .v2-install-page .v2-tabs {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    html[data-ui-style="flavor"] .v2-install-page .v2-tabs,
    html[data-ui-style="flavor"] .v2-install-page .v2-apps-grid {
        grid-template-columns: 1fr;
    }

    html[data-ui-style="flavor"] #v2AddDevicesModal {
        padding: 8px;
    }

    html[data-ui-style="flavor"] #v2AddDevicesModal .v2-modal-card {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 14px;
    }

    html[data-ui-style="flavor"] #v2AddDevicesModal .v2-modal-head,
    html[data-ui-style="flavor"] #v2AddDevicesModal .v2-modal-body {
        padding: 11px;
    }

    html[data-ui-style="flavor"] #v2AddDevicesModal .v2-actions .btn,
    html[data-ui-style="flavor"] #v2AddDevicesModal .v2-actions a.btn {
        width: 100%;
    }
}

@media (max-width: 430px) {
    html[data-ui-style="flavor"] #v2AddDevicesModal .v2-renew-item {
        flex-direction: column;
        gap: 6px;
        padding: 11px 10px;
    }

    html[data-ui-style="flavor"] #v2AddDevicesModal .v2-renew-item-price {
        align-self: flex-end;
        padding-left: 0;
        font-size: 18px;
    }
}


/* flavor visual overlay (from zpretvpn) */
/* ═══════════════════════════════════════════════════════════════
   FLAVOR THEME v2.0 — "Deep Space"
   Fonts: Syne (display) · Plus Jakarta Sans (body)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --violet-300:#c4b5fd;--violet-400:#a78bfa;--violet-500:#8b5cf6;
  --violet-600:#7c3aed;--violet-700:#6d28d9;
  --cyan-300:#67e8f9;--cyan-400:#22d3ee;--cyan-500:#06b6d4;--cyan-600:#0891b2;
  --pink-400:#f472b6;--emerald-400:#34d399;--emerald-500:#10b981;
  --amber-400:#fbbf24;--red-400:#f87171;--red-500:#ef4444;

  --font-display:'Syne',sans-serif;
  --font-body:'Plus Jakarta Sans',sans-serif;
  --font-family:var(--font-body);
  --font-xs:.70rem;--font-sm:.8125rem;--font-base:.875rem;--font-md:.9375rem;
  --font-lg:1.125rem;--font-xl:1.25rem;--font-2xl:1.5rem;--font-3xl:1.875rem;
  --font-4xl:2.5rem;--font-5xl:3.25rem;

  --weight-normal:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;--space-20:5rem;

  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:20px;
  --radius-2xl:28px;--radius-full:9999px;

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-io:cubic-bezier(0.4,0,0.2,1);
  --transition-fast:140ms var(--ease-io);
  --transition-base:220ms var(--ease-io);
  --transition-slow:360ms var(--ease-out);

  --z-dropdown:100;--z-sticky:200;--z-modal-backdrop:300;
  --z-modal:400;--z-toast:500;--z-tooltip:600;

  --sidebar-width:260px;--topbar-height:60px;
  --bottom-nav-height:64px;--container-max:1280px;--content-max:960px;
}

:root,[data-theme="dark"]{
  --color-primary:var(--violet-500);
  --color-primary-hover:var(--violet-400);
  --color-primary-light:rgba(139,92,246,.15);
  --color-primary-subtle:rgba(139,92,246,.08);
  --color-primary-text:#fff;
  --color-primary-gradient:linear-gradient(135deg,var(--violet-600),var(--cyan-500));
  --color-accent:var(--cyan-400);--color-accent-glow:rgba(34,211,238,.2);
  --color-success:var(--emerald-400);--color-success-light:rgba(52,211,153,.1);
  --color-success-border:rgba(52,211,153,.3);
  --color-danger:var(--red-400);--color-danger-light:rgba(248,113,113,.1);
  --color-danger-border:rgba(248,113,113,.3);
  --color-warning:var(--amber-400);--color-warning-light:rgba(251,191,36,.1);
  --color-warning-border:rgba(251,191,36,.3);
  --color-info:var(--cyan-400);--color-info-light:rgba(34,211,238,.1);
  --color-info-border:rgba(34,211,238,.3);
  --bg-body:#06080f;--bg-surface:#0d1117;--bg-elevated:#151b24;
  --bg-sunken:#040608;--bg-overlay:rgba(0,0,0,.7);
  --bg-sidebar:#08090f;--bg-topbar:rgba(6,8,15,.88);
  --bg-hover:rgba(255,255,255,.05);--bg-active:rgba(139,92,246,.12);
  --bg-input:rgba(13,17,23,.9);
  --bg-glass:rgba(255,255,255,.04);--bg-glass-hover:rgba(255,255,255,.07);
  --text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-tertiary:#64748b;
  --text-inverse:#06080f;--text-link:var(--violet-400);--text-link-hover:var(--violet-300);
  --border-default:rgba(255,255,255,.08);--border-light:rgba(255,255,255,.05);
  --border-strong:rgba(255,255,255,.12);--border-focus:var(--violet-500);
  --border-glow:rgba(139,92,246,.4);
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);--shadow-sm:0 2px 8px rgba(0,0,0,.5);
  --shadow-md:0 8px 24px rgba(0,0,0,.5);--shadow-lg:0 16px 48px rgba(0,0,0,.6);
  --shadow-glow:0 0 32px rgba(139,92,246,.25);--shadow-cyan:0 0 32px rgba(34,211,238,.2);
}

[data-theme="light"]{
  --color-primary:var(--violet-600);--color-primary-hover:var(--violet-700);
  --color-primary-light:rgba(124,58,237,.1);--color-primary-subtle:rgba(124,58,237,.06);
  --color-primary-text:#fff;
  --color-primary-gradient:linear-gradient(135deg,var(--violet-700),var(--cyan-600));
  --color-accent:var(--cyan-600);--color-accent-glow:rgba(8,145,178,.15);
  --color-success:var(--emerald-500);--color-success-light:rgba(16,185,129,.08);
  --color-success-border:rgba(16,185,129,.25);
  --color-danger:var(--red-500);--color-danger-light:rgba(239,68,68,.08);
  --color-danger-border:rgba(239,68,68,.25);
  --color-warning:#d97706;--color-warning-light:rgba(217,119,6,.08);
  --color-warning-border:rgba(217,119,6,.25);
  --color-info:var(--cyan-600);--color-info-light:rgba(8,145,178,.08);
  --color-info-border:rgba(8,145,178,.25);
  --bg-body:#f8fafc;--bg-surface:#ffffff;--bg-elevated:#f1f5f9;
  --bg-sunken:#e2e8f0;--bg-overlay:rgba(0,0,0,.4);
  --bg-sidebar:#0f1923;--bg-topbar:rgba(248,250,252,.9);
  --bg-hover:rgba(0,0,0,.04);--bg-active:rgba(124,58,237,.08);
  --bg-input:#ffffff;--bg-glass:rgba(255,255,255,.7);--bg-glass-hover:rgba(255,255,255,.9);
  --text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#94a3b8;
  --text-inverse:#ffffff;--text-link:var(--violet-600);--text-link-hover:var(--violet-700);
  --border-default:rgba(0,0,0,.08);--border-light:rgba(0,0,0,.05);
  --border-strong:rgba(0,0,0,.14);--border-focus:var(--violet-600);
  --border-glow:rgba(124,58,237,.3);
  --shadow-xs:0 1px 3px rgba(0,0,0,.08);--shadow-sm:0 2px 8px rgba(0,0,0,.1);
  --shadow-md:0 4px 16px rgba(0,0,0,.12);--shadow-lg:0 8px 32px rgba(0,0,0,.14);
  --shadow-glow:0 0 24px rgba(124,58,237,.15);--shadow-cyan:0 0 24px rgba(8,145,178,.12);
}

/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

body{
  font-family:var(--font-body);font-size:var(--font-base);
  font-weight:var(--weight-normal);line-height:1.6;
  color:var(--text-primary);background:var(--bg-body);
  min-height:100vh;overflow-x:hidden;
}

[data-theme="dark"] body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%,rgba(139,92,246,.18) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 90% 90%,rgba(6,182,212,.1) 0%,transparent 60%);
}

h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.2;color:var(--text-primary)}
a{color:var(--text-link);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--text-link-hover)}
img{max-width:100%;height:auto}
button{cursor:pointer;font-family:var(--font-body)}
input,select,textarea{font-family:var(--font-body)}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.page-shell{
  display:flex;
  min-height:100vh;
  position:relative;
  z-index:1;
  padding-left:var(--sidebar-width);
}

.fl-sidebar{
  width:var(--sidebar-width);flex-shrink:0;
  background:var(--bg-sidebar);border-right:1px solid var(--border-default);
  display:flex;flex-direction:column;position:fixed;top:0;left:0;
  height:100vh;z-index:var(--z-sticky);transition:transform var(--transition-slow);
  overflow:hidden;
}
[data-theme="dark"] .fl-sidebar{
  background:linear-gradient(180deg,#08090f 0%,#060810 100%);
  box-shadow:1px 0 0 rgba(255,255,255,.05),4px 0 24px rgba(0,0,0,.4);
}

.sidebar-header{
  padding:var(--space-5);border-bottom:1px solid var(--border-light);flex-shrink:0;
}
.sidebar-logo{
  display:flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-display);font-size:var(--font-lg);font-weight:700;
  color:var(--text-primary);text-decoration:none;transition:opacity var(--transition-fast);
}
.sidebar-logo:hover{opacity:.85;color:var(--text-primary)}
.logo-icon{
  width:34px;height:34px;border-radius:var(--radius-md);
  background:var(--color-primary-gradient);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:var(--font-sm);font-weight:800;
  color:#fff;flex-shrink:0;box-shadow:0 2px 12px rgba(139,92,246,.4);
}
.logo-image{
  width:34px;height:34px;border-radius:var(--radius-md);
  display:block;flex-shrink:0;object-fit:cover;
  border:1px solid var(--border-default);
  background:var(--bg-tertiary);
  box-shadow:0 2px 12px rgba(139,92,246,.28);
}

.sidebar-nav{
  flex:1;overflow-y:auto;padding:var(--space-4) var(--space-3);scrollbar-width:none;
}
.sidebar-nav::-webkit-scrollbar{display:none}
.sidebar-section{margin-bottom:var(--space-6)}
.sidebar-section-title{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-tertiary);padding:0 var(--space-3);margin-bottom:var(--space-2);
}
.sidebar-link{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  font-size:var(--font-sm);font-weight:var(--weight-medium);
  color:var(--text-secondary);text-decoration:none;
  transition:all var(--transition-fast);position:relative;margin-bottom:2px;
}
.sidebar-link:hover{background:var(--bg-hover);color:var(--text-primary)}
.sidebar-link.active{background:var(--bg-active);color:var(--color-primary)}
.sidebar-link.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:3px;border-radius:2px;background:var(--color-primary);
}
.nav-icon{width:18px;height:18px;flex-shrink:0;opacity:.75;transition:opacity var(--transition-fast)}
.sidebar-link:hover .nav-icon,.sidebar-link.active .nav-icon{opacity:1}
.nav-badge{
  margin-left:auto;padding:1px 7px;border-radius:var(--radius-full);
  font-size:10px;font-weight:700;background:var(--color-primary);color:#fff;
}
.sidebar-footer{
  padding:var(--space-4) var(--space-3);border-top:1px solid var(--border-light);flex-shrink:0;
}

.main-content{
  flex:1;
  margin-left:0;
  width:100%;
  min-height:100vh;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.topbar{
  height:var(--topbar-height);background:var(--bg-topbar);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--space-6);position:sticky;top:0;z-index:var(--z-sticky);flex-shrink:0;
}
.topbar-left{display:flex;align-items:center;gap:var(--space-4);min-width:0}
.topbar-right{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.topbar-title{
  font-family:var(--font-display);font-size:var(--font-md);font-weight:600;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Flavor dropdown in topbar */
.topbar-right .dropdown{position:relative}
.topbar-right .dropdown-menu{
  position:absolute;top:calc(100% + 8px);right:0;left:auto;min-width:170px;
  border:1px solid var(--border-default);border-radius:var(--radius-lg);
  background:var(--bg-card);box-shadow:var(--shadow-lg);
  display:none;z-index:calc(var(--z-sticky) + 5);overflow:hidden;
}
.topbar-right .dropdown-menu.open{display:block}
.topbar-right .dropdown-menu .dropdown-item{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  color:var(--text-secondary);text-decoration:none;font-size:13px;
}
.topbar-right .dropdown-menu .dropdown-item:hover{
  background:var(--bg-hover);color:var(--text-primary);
}

.mobile-menu-btn{
  display:none;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius-md);
  background:var(--bg-hover);border:1px solid var(--border-default);
  color:var(--text-secondary);transition:all var(--transition-fast);
}
.mobile-menu-btn:hover{background:var(--bg-glass-hover);color:var(--text-primary)}

.page-content{
  flex:1;padding:var(--space-6);max-width:var(--content-max);width:100%;margin:0 auto;
}
.page-content>*{animation:fadeSlideUp .4s var(--ease-out) both}
.page-content>*:nth-child(2){animation-delay:.05s}
.page-content>*:nth-child(3){animation-delay:.10s}
.page-content>*:nth-child(4){animation-delay:.15s}
.page-content>*:nth-child(5){animation-delay:.20s}

@keyframes fadeSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.wc-legal-footer{
  padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-light);
  display:flex;gap:var(--space-4);font-size:var(--font-xs);color:var(--text-tertiary);
}
.wc-legal-footer a{color:var(--text-tertiary)}
.wc-legal-footer a:hover{color:var(--text-secondary)}
.wc-legal-sep{opacity:.4}

/* BOTTOM NAV */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--bg-sidebar);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border-default);z-index:var(--z-sticky);height:var(--bottom-nav-height);
}
.bottom-nav-inner{display:flex;height:100%}
.bottom-nav-link{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;font-size:10px;font-weight:var(--weight-medium);
  color:var(--text-tertiary);text-decoration:none;transition:color var(--transition-fast);padding:var(--space-2);
}
.bottom-nav-link svg{width:20px;height:20px}
.bottom-nav-link svg{
  display:block;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.98;
}
.bottom-nav-link span{line-height:1}
.bottom-nav-link.active{color:var(--color-primary)}
.bottom-nav-link:hover{color:var(--text-secondary)}

/* AVATAR */
.avatar{
  width:32px;height:32px;border-radius:var(--radius-full);
  background:var(--color-primary-gradient);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:var(--font-xs);font-weight:700;
  color:#fff;box-shadow:0 2px 8px rgba(139,92,246,.35);
}
.fl-profile-avatar{
  overflow:hidden;
  border:1px solid var(--border-default);
  -webkit-appearance:none;
  appearance:none;
  padding:0;
  margin:0;
  line-height:1;
  align-self:center;
}
.fl-profile-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.fl-profile-avatar .avatar-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* THEME TOGGLE */
.theme-toggle{
  width:34px;height:34px;border-radius:var(--radius-full);
  border:1px solid var(--border-default);background:var(--bg-hover);
  color:var(--text-secondary);display:flex;align-items:center;
  justify-content:center;transition:all var(--transition-fast);
}
.theme-toggle:hover{background:var(--bg-glass-hover);color:var(--text-primary);border-color:var(--border-strong)}
[data-theme="dark"] .icon-sun{display:block}
[data-theme="dark"] .icon-moon{display:none}
[data-theme="light"] .icon-sun{display:none}
[data-theme="light"] .icon-moon{display:block}

/* ── CARDS ─────────────────────────────────────────────────── */
.card{
  background:var(--bg-glass);border:1px solid var(--border-default);
  border-radius:var(--radius-xl);overflow:hidden;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base);
}
[data-theme="dark"] .card{
  background:linear-gradient(145deg,rgba(21,27,36,.8) 0%,rgba(13,17,23,.9) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,var(--shadow-sm);
}
.card-hover:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow);transform:translateY(-2px)}
.card-body{padding:var(--space-6)}
.card-body p{color:var(--text-secondary);line-height:1.65}
.card-header{
  padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border-light);
  display:flex;align-items:center;justify-content:space-between;
}
.card-title{font-family:var(--font-display);font-size:var(--font-md);font-weight:600;color:var(--text-primary)}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-2);padding:0 var(--space-5);height:40px;
  border-radius:var(--radius-md);font-family:var(--font-body);
  font-size:var(--font-sm);font-weight:var(--weight-semibold);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:all var(--transition-fast);white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn::after{content:'';position:absolute;inset:0;opacity:0;background:rgba(255,255,255,.1);transition:opacity var(--transition-fast)}
.btn:hover::after{opacity:1}
.btn:active{transform:scale(.97)}

.btn-primary{background:var(--color-primary-gradient);color:#fff;box-shadow:0 2px 12px rgba(139,92,246,.35)}
.btn-primary:hover{box-shadow:0 4px 20px rgba(139,92,246,.5);color:#fff}
.btn-secondary{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-default)}
.btn-secondary:hover{background:var(--bg-glass-hover);border-color:var(--border-strong);color:var(--text-primary)}
.btn-ghost{background:transparent;color:var(--text-secondary);border-color:transparent}
.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}
.btn-danger{background:var(--color-danger-light);color:var(--color-danger);border-color:var(--color-danger-border)}
.btn-danger:hover{background:rgba(248,113,113,.2)}

.btn-sm{height:32px;padding:0 var(--space-4);font-size:var(--font-xs);border-radius:var(--radius-md)}
.btn-lg{height:48px;padding:0 var(--space-8);font-size:var(--font-md);border-radius:var(--radius-lg)}
.btn-xl{height:56px;padding:0 var(--space-10);font-size:var(--font-lg);border-radius:var(--radius-lg)}
.w-full{width:100%}

/* ── BADGES ────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:700;letter-spacing:.03em;line-height:1}
.badge-primary{background:var(--color-primary-light);color:var(--color-primary);border:1px solid rgba(139,92,246,.25)}
.badge-success{background:var(--color-success-light);color:var(--color-success);border:1px solid var(--color-success-border)}
.badge-danger{background:var(--color-danger-light);color:var(--color-danger);border:1px solid var(--color-danger-border)}
.badge-warning{background:var(--color-warning-light);color:var(--color-warning);border:1px solid var(--color-warning-border)}
.badge-info{background:var(--color-info-light);color:var(--color-info);border:1px solid var(--color-info-border)}

/* ── FORMS ─────────────────────────────────────────────────── */
.form-group{margin-bottom:var(--space-5)}
.form-label{display:block;font-size:var(--font-sm);font-weight:var(--weight-medium);color:var(--text-secondary);margin-bottom:var(--space-2)}
.form-control{
  width:100%;height:42px;padding:0 var(--space-4);
  background:var(--bg-input);border:1px solid var(--border-default);
  border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--font-sm);
  color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none;
}
.form-control::placeholder{color:var(--text-tertiary)}
.form-control:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--color-primary-light)}
textarea.form-control{height:auto;padding:var(--space-3) var(--space-4);resize:vertical;line-height:1.6}
select.form-control{cursor:pointer}
.form-hint{margin-top:var(--space-1);font-size:var(--font-xs);color:var(--text-tertiary)}
.form-error{margin-top:var(--space-1);font-size:var(--font-xs);color:var(--color-danger)}

/* ── ALERTS ────────────────────────────────────────────────── */
.alert{padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);font-size:var(--font-sm);border:1px solid;margin-bottom:var(--space-4);line-height:1.55}
.alert-success{background:var(--color-success-light);color:var(--color-success);border-color:var(--color-success-border)}
.alert-danger{background:var(--color-danger-light);color:var(--color-danger);border-color:var(--color-danger-border)}
.alert-warning{background:var(--color-warning-light);color:var(--color-warning);border-color:var(--color-warning-border)}
.alert-info{background:var(--color-info-light);color:var(--color-info);border-color:var(--color-info-border)}

/* ── TOASTS ────────────────────────────────────────────────── */
.toast{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);
  font-size:var(--font-sm);font-weight:var(--weight-medium);border:1px solid;
  margin-bottom:var(--space-4);animation:toastIn .35s var(--ease-out);
  transition:opacity .3s,transform .3s;
}
.toast.hiding{opacity:0;transform:translateX(20px)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.toast-success{background:var(--color-success-light);color:var(--color-success);border-color:var(--color-success-border)}
.toast-danger{background:var(--color-danger-light);color:var(--color-danger);border-color:var(--color-danger-border)}
.toast-close{background:none;border:none;color:currentColor;opacity:.6;font-size:18px;line-height:1;padding:0;transition:opacity var(--transition-fast)}
.toast-close:hover{opacity:1}

/* ── KPI CARDS ─────────────────────────────────────────────── */
.kpi-card{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-5) var(--space-6);
  background:var(--bg-glass);border:1px solid var(--border-default);
  border-radius:var(--radius-xl);text-decoration:none;
  transition:all var(--transition-base);position:relative;overflow:hidden;
  backdrop-filter:blur(8px);
}
[data-theme="dark"] .kpi-card{
  background:linear-gradient(145deg,rgba(21,27,36,.85) 0%,rgba(13,17,23,.9) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.kpi-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--color-primary-gradient);opacity:0;transition:opacity var(--transition-base);
}
.kpi-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow);transform:translateY(-3px)}
.kpi-card:hover::before{opacity:1}
.kpi-label{font-size:var(--font-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-tertiary)}
.kpi-value{font-family:var(--font-display);font-size:var(--font-2xl);font-weight:700;color:var(--text-primary);line-height:1}

/* ── GRID ──────────────────────────────────────────────────── */
.grid{display:grid;gap:var(--space-4)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ── UTILS ─────────────────────────────────────────────────── */
.flex{display:flex}.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}
.mb-4{margin-bottom:var(--space-4)}.mt-4{margin-top:var(--space-4)}
.p-6{padding:var(--space-6)}
.text-muted{color:var(--text-secondary);font-size:var(--font-sm)}
.desktop-only{display:flex}

/* ── EMPTY STATE ───────────────────────────────────────────── */
.empty-state{text-align:center;padding:var(--space-12) var(--space-6)}
.empty-state h3{font-family:var(--font-display);margin-bottom:var(--space-2)}

/* ── TARIFF CARDS ──────────────────────────────────────────── */
.tariff-card{
  position:relative;display:flex;flex-direction:column;gap:var(--space-4);
  padding:var(--space-8) var(--space-6);
  background:var(--bg-glass);border:1px solid var(--border-default);
  border-radius:var(--radius-2xl);transition:all var(--transition-base);backdrop-filter:blur(8px);
}
[data-theme="dark"] .tariff-card{
  background:linear-gradient(145deg,rgba(21,27,36,.9) 0%,rgba(13,17,23,.95) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.tariff-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow);transform:translateY(-4px)}
.tariff-card.featured{
  border-color:var(--violet-500);
  background:linear-gradient(145deg,rgba(139,92,246,.15) 0%,rgba(6,182,212,.08) 100%);
  box-shadow:0 0 0 1px var(--violet-500),var(--shadow-glow),var(--shadow-lg);
}
[data-theme="light"] .tariff-card.featured{background:linear-gradient(145deg,rgba(124,58,237,.06) 0%,rgba(8,145,178,.04) 100%)}
.tariff-name{font-family:var(--font-display);font-size:var(--font-xl);font-weight:700;color:var(--text-primary)}
.tariff-price{
  display:flex;align-items:baseline;gap:var(--space-1);
  font-family:var(--font-display);font-size:var(--font-3xl);font-weight:800;
  color:var(--text-primary);line-height:1;
}
.tariff-price .currency{font-size:var(--font-xl);opacity:.7}
.tariff-price .period{font-family:var(--font-body);font-size:var(--font-sm);font-weight:400;color:var(--text-secondary);margin-left:var(--space-1)}
.tariff-features{flex:1;display:flex;flex-direction:column;gap:var(--space-3)}
.tariff-feature{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--font-sm);color:var(--text-secondary)}
.tariff-feature .check{color:var(--color-success);flex-shrink:0;margin-top:2px}
.tariff-card.featured .tariff-feature{color:var(--text-primary)}

/* ── FEATURE ICONS ─────────────────────────────────────────── */
.feature-icon-wrap{
  width:48px;height:48px;border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4);
  transition:transform var(--transition-base);
}
.card-hover:hover .feature-icon-wrap{transform:scale(1.1)}
.feature-icon-wrap.primary{background:var(--color-primary-light);color:var(--color-primary);border:1px solid rgba(139,92,246,.25)}
.feature-icon-wrap.success{background:var(--color-success-light);color:var(--color-success);border:1px solid var(--color-success-border)}
.feature-icon-wrap.warning{background:var(--color-warning-light);color:var(--color-warning);border:1px solid var(--color-warning-border)}
.feature-icon-wrap.info{background:var(--color-info-light);color:var(--color-info);border:1px solid var(--color-info-border)}
.feature-title{font-family:var(--font-display);font-size:var(--font-md);font-weight:700;color:var(--text-primary);margin-bottom:var(--space-2)}
.feature-text{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.65}

/* ── TABLE ─────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border-default)}
table{width:100%;border-collapse:collapse}
th{font-size:var(--font-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);padding:var(--space-3) var(--space-5);text-align:left;border-bottom:1px solid var(--border-default);background:var(--bg-elevated)}
td{padding:var(--space-4) var(--space-5);font-size:var(--font-sm);color:var(--text-secondary);border-bottom:1px solid var(--border-light)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg-hover)}
hr{border:none;border-top:1px solid var(--border-light);margin:var(--space-6) 0}
.section-title{font-family:var(--font-display);font-size:var(--font-xl);font-weight:700;margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-3)}

/* ── LOCALE DROPDOWN ───────────────────────────────────────── */
.wc-neo-locale-wrap{position:relative}
.wc-neo-locale-toggle{font-size:var(--font-xs);font-weight:700;letter-spacing:.05em}
.wc-neo-locale-caret{opacity:.5;font-size:10px;margin-left:2px}
.wc-neo-locale-menu{
  position:absolute;bottom:calc(100% + 8px);left:0;min-width:100px;
  background:var(--bg-elevated);border:1px solid var(--border-default);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;
  z-index:var(--z-dropdown);animation:fadeSlideUp .2s var(--ease-out);
}
.wc-neo-locale-menu[hidden]{display:none}

/* ══════════════════════════════════════════════════════════
   LANDING PAGE
   ══════════════════════════════════════════════════════════ */
.landing-header{
  position:fixed;top:0;left:0;right:0;z-index:200;background:transparent;
  transition:background var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);
  border-bottom:1px solid transparent;
}
.landing-header.scrolled{
  background:var(--bg-topbar);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--border-default);box-shadow:var(--shadow-sm);
}
.landing-header-inner{
  max-width:var(--container-max);margin:0 auto;padding:0 var(--space-6);
  height:68px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
}
.landing-logo{
  display:flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-display);font-size:var(--font-lg);font-weight:700;
  color:var(--text-primary);text-decoration:none;white-space:nowrap;
}
.landing-logo:hover{color:var(--text-primary);opacity:.9}
.landing-nav{display:flex;align-items:center;gap:var(--space-8)}
.landing-nav-link{
  font-size:var(--font-sm);font-weight:var(--weight-medium);color:var(--text-secondary);
  text-decoration:none;transition:color var(--transition-fast);position:relative;
}
.landing-nav-link::after{
  content:'';position:absolute;bottom:-3px;left:0;right:0;height:2px;
  background:var(--color-primary-gradient);border-radius:2px;
  transform:scaleX(0);transition:transform var(--transition-base);
}
.landing-nav-link:hover{color:var(--text-primary)}
.landing-nav-link:hover::after{transform:scaleX(1)}
.landing-nav-actions{display:flex;align-items:center;gap:var(--space-3)}
.landing-menu-btn{
  display:none;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--radius-md);
  background:var(--bg-hover);border:1px solid var(--border-default);color:var(--text-secondary);
}

/* HERO */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:120px var(--space-6) var(--space-20);position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;width:700px;height:700px;
  background:radial-gradient(circle,rgba(139,92,246,.2) 0%,transparent 70%);
  top:-120px;left:50%;transform:translateX(-50%);
  animation:orbPulse 6s ease-in-out infinite;pointer-events:none;
}
.hero::after{
  content:'';position:absolute;width:500px;height:500px;
  background:radial-gradient(circle,rgba(6,182,212,.12) 0%,transparent 70%);
  bottom:0;right:-100px;animation:orbPulse 8s ease-in-out infinite reverse;pointer-events:none;
}
@keyframes orbPulse{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.7}
  50%{transform:translateX(-50%) scale(1.15);opacity:1}
}
.hero-badge{
  display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 16px;
  border-radius:var(--radius-full);background:var(--color-primary-light);
  border:1px solid rgba(139,92,246,.3);font-size:var(--font-xs);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--color-primary);
  margin-bottom:var(--space-6);animation:fadeSlideUp .6s var(--ease-out) both;
}
.hero h1{
  font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4.5rem);
  font-weight:800;line-height:1.08;letter-spacing:-.02em;
  margin-bottom:var(--space-6);max-width:720px;
  animation:fadeSlideUp .6s var(--ease-out) .1s both;
}
.gradient-text{
  background:linear-gradient(135deg,var(--violet-400),var(--cyan-400));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-subtitle{
  font-size:var(--font-lg);color:var(--text-secondary);max-width:560px;
  line-height:1.65;margin-bottom:var(--space-10);
  animation:fadeSlideUp .6s var(--ease-out) .2s both;
}
.hero-actions{
  display:flex;align-items:center;justify-content:center;gap:var(--space-4);
  flex-wrap:wrap;margin-bottom:var(--space-16);animation:fadeSlideUp .6s var(--ease-out) .3s both;
}
.hero-stats{
  display:flex;align-items:center;gap:var(--space-10);
  padding:var(--space-6) var(--space-10);border-radius:var(--radius-2xl);
  background:var(--bg-glass);border:1px solid var(--border-default);
  backdrop-filter:blur(12px);animation:fadeSlideUp .6s var(--ease-out) .4s both;
  flex-wrap:wrap;justify-content:center;
}
.hero-stat{text-align:center}
.hero-stat-value{
  font-family:var(--font-display);font-size:var(--font-2xl);font-weight:800;
  background:var(--color-primary-gradient);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:4px;
}
.hero-stat-label{font-size:var(--font-xs);color:var(--text-tertiary);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:.06em}

/* LANDING SECTIONS */
.landing-section{max-width:var(--container-max);margin:0 auto;padding:var(--space-20) var(--space-6)}
.tariffs-section-heading{text-align:center;margin-bottom:var(--space-12)}
.tariffs-section-heading h2{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;letter-spacing:-.02em;margin-bottom:var(--space-3)}
.tariffs-section-heading p{font-size:var(--font-lg);color:var(--text-secondary)}

/* CTA */
.cta-section{padding:var(--space-4) 0}
.cta-inner{
  background:linear-gradient(135deg,rgba(139,92,246,.15) 0%,rgba(6,182,212,.1) 100%);
  border:1px solid rgba(139,92,246,.25);border-radius:var(--radius-2xl);
  padding:var(--space-16) var(--space-10);text-align:center;position:relative;overflow:hidden;
}
.cta-inner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(139,92,246,.15) 0%,transparent 70%);
  pointer-events:none;
}
.cta-inner h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:800;margin-bottom:var(--space-4);letter-spacing:-.02em}
.cta-inner p{font-size:var(--font-md);color:var(--text-secondary);max-width:520px;margin:0 auto var(--space-8);line-height:1.65}

/* FOOTER */
.landing-footer{border-top:1px solid var(--border-light)}
.footer-inner{max-width:var(--container-max);margin:0 auto;padding:var(--space-16) var(--space-6) var(--space-8)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-10);margin-bottom:var(--space-10)}
.footer-brand p{color:var(--text-secondary);font-size:var(--font-sm);margin-top:var(--space-4);max-width:280px;line-height:1.65}
.footer-col-title{font-size:var(--font-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:var(--space-4);color:var(--text-primary)}
.footer-links{display:flex;flex-direction:column;gap:var(--space-3)}
.footer-links a{font-size:var(--font-sm);color:var(--text-secondary);text-decoration:none;transition:color var(--transition-fast)}
.footer-links a:hover{color:var(--text-primary)}
.footer-bottom{padding-top:var(--space-6);border-top:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;font-size:var(--font-xs);color:var(--text-tertiary);flex-wrap:wrap;gap:var(--space-3)}

/* ── AUTH ──────────────────────────────────────────────────── */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-6);position:relative}
[data-theme="dark"] .auth-wrap::before{
  content:'';position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 30% 30%,rgba(139,92,246,.15) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%,rgba(6,182,212,.1) 0%,transparent 60%);
}
.auth-card{width:100%;max-width:420px;position:relative;animation:fadeSlideUp .5s var(--ease-out)}
.auth-logo{text-align:center;margin-bottom:var(--space-8)}
.auth-logo .logo-icon{width:52px;height:52px;font-size:var(--font-md);margin:0 auto var(--space-3)}
.auth-logo h1{font-family:var(--font-display);font-size:var(--font-2xl);font-weight:800}
.auth-logo p{font-size:var(--font-sm);color:var(--text-secondary);margin-top:var(--space-1)}

/* ── SIDEBAR OVERLAY ───────────────────────────────────────── */
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:var(--bg-overlay);
  z-index:calc(var(--z-sticky) - 1);backdrop-filter:blur(2px);animation:fadeIn .2s ease;
}
.sidebar-overlay.visible{display:block}

/* ── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}
::selection{background:var(--color-primary-light);color:var(--text-primary)}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .page-shell{padding-left:0}
  .fl-sidebar{transform:translateX(-100%);box-shadow:none}
  .fl-sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .main-content{margin-left:0 !important;width:100%}
  .bottom-nav{display:flex}
  .page-content{padding:var(--space-4) var(--space-4) calc(var(--bottom-nav-height) + var(--space-4))}
  .mobile-menu-btn{display:flex}
  .desktop-only{display:none !important}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .landing-nav{display:none}
  .landing-nav.mobile-show{
    display:flex;position:absolute;top:68px;left:0;right:0;
    flex-direction:column;background:var(--bg-elevated);
    border-bottom:1px solid var(--border-default);padding:var(--space-4) var(--space-6);
    gap:var(--space-4);box-shadow:var(--shadow-md);z-index:300;
  }
  .landing-menu-btn{display:flex}
  .hero-stats{gap:var(--space-6);padding:var(--space-5) var(--space-6)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .cta-inner{padding:var(--space-10) var(--space-6)}
}
@media(max-width:480px){
  .grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-stats{flex-direction:column;gap:var(--space-5)}
  .hero-actions{flex-direction:column;width:100%}
  .hero-actions .btn{width:100%}
}

/* ══════════════════════════════════════════════════════════════
   EXTENDED COMPONENTS — keys, payments, auth, profile
   ══════════════════════════════════════════════════════════════ */

/* ── Spacing extras ──────────────────────────────────────────── */
.mb-6{margin-bottom:var(--space-6)}
.mb-8{margin-bottom:var(--space-8)}
.mt-4{margin-top:var(--space-4)}
.text-sm{font-size:var(--font-sm)}
.text-center{text-align:center}

/* ── Page header ─────────────────────────────────────────────── */
.page-header{margin-bottom:var(--space-6)}
.page-header-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap;
}
.page-title{
  font-family:var(--font-display);font-size:var(--font-2xl);
  font-weight:800;color:var(--text-primary);letter-spacing:-.02em;margin-bottom:4px;
}
.page-subtitle{font-size:var(--font-sm);color:var(--text-secondary)}

/* ── KPI icon (inside kpi-card) ──────────────────────────────── */
.kpi-icon{
  width:40px;height:40px;border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-3);
  flex-shrink:0;
}
.kpi-icon.primary{background:var(--color-primary-light);color:var(--color-primary)}
.kpi-icon.success{background:var(--color-success-light);color:var(--color-success)}
.kpi-icon.warning{background:var(--color-warning-light);color:var(--color-warning)}
.kpi-icon.info{background:var(--color-info-light);color:var(--color-info)}
.kpi-icon.danger{background:var(--color-danger-light);color:var(--color-danger)}

/* ── Form input alias ────────────────────────────────────────── */
.form-input{
  width:100%;height:42px;padding:0 var(--space-4);
  background:var(--bg-input);border:1px solid var(--border-default);
  border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--font-sm);
  color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none;
}
.form-input::placeholder{color:var(--text-tertiary)}
.form-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--color-primary-light)}
.form-select{
  width:100%;height:42px;padding:0 var(--space-4);
  background:var(--bg-input);border:1px solid var(--border-default);
  border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--font-sm);
  color:var(--text-primary);cursor:pointer;outline:none;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
.form-select:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--color-primary-light)}

/* ── Search input wrap ───────────────────────────────────────── */
.search-input-wrap{
  position:relative;display:flex;align-items:center;
}
.search-input-wrap .form-input{padding-left:40px}
.search-icon{
  position:absolute;left:14px;color:var(--text-tertiary);pointer-events:none;flex-shrink:0;
}

/* ── Subscription cards ──────────────────────────────────────── */
.sub-card{
  background:var(--bg-glass);border:1px solid var(--border-default);
  border-radius:var(--radius-xl);padding:var(--space-5);
  transition:border-color var(--transition-base),box-shadow var(--transition-base),transform var(--transition-base);
  backdrop-filter:blur(8px);
}
[data-theme="dark"] .sub-card{
  background:linear-gradient(145deg,rgba(21,27,36,.85) 0%,rgba(13,17,23,.9) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.sub-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow);transform:translateY(-2px)}

.sub-card-header{margin-bottom:var(--space-3)}
.sub-card-title-row{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
}
.sub-card-name{
  font-family:var(--font-display);font-size:var(--font-md);
  font-weight:700;color:var(--text-primary);
  word-break:break-all;margin-right:auto;
}
.chip{
  display:inline-flex;align-items:center;padding:2px 10px;
  border-radius:var(--radius-full);font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--bg-hover);color:var(--text-secondary);
  border:1px solid var(--border-default);
}
.badge-dot::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:currentColor;display:inline-block;margin-right:5px;flex-shrink:0;
}

.sub-card-meta{
  display:flex;gap:var(--space-6);margin-bottom:var(--space-4);flex-wrap:wrap;
}
.sub-card-meta-item{display:flex;flex-direction:column;gap:2px}
.sub-card-meta-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-tertiary)}
.sub-card-meta-value{font-size:var(--font-sm);font-weight:var(--weight-medium);color:var(--text-primary)}

.sub-card-key{
  display:flex;align-items:center;gap:var(--space-2);
  background:var(--bg-sunken);border:1px solid var(--border-light);
  border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
  margin-bottom:var(--space-4);
}
.sub-card-key-text{
  flex:1;font-size:var(--font-xs);color:var(--text-secondary);
  font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.btn-icon{
  width:32px;height:32px;padding:0;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}

.sub-card-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}

/* Btn warning */
.btn-warning{background:var(--color-warning-light);color:var(--color-warning);border-color:var(--color-warning-border)}
.btn-warning:hover{background:rgba(251,191,36,.2)}

/* ── Modals ──────────────────────────────────────────────────── */
.modal-backdrop{
  display:none;position:fixed;inset:0;
  background:var(--bg-overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:var(--z-modal-backdrop);align-items:center;justify-content:center;padding:var(--space-4);
  animation:fadeIn .2s ease;
}
.modal-backdrop.open{display:flex}

.modal{
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
  background:var(--bg-surface);border:1px solid var(--border-default);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
  animation:fadeSlideUp .28s var(--ease-out);
}
[data-theme="dark"] .modal{
  background:linear-gradient(145deg,#13181f 0%,#0d1117 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),var(--shadow-lg),var(--shadow-glow);
}
.modal-lg{max-width:640px}
.modal-xl{max-width:800px}

.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-5) var(--space-6);
  border-bottom:1px solid var(--border-light);flex-shrink:0;
}
.modal-title{font-family:var(--font-display);font-size:var(--font-lg);font-weight:700;color:var(--text-primary)}
.modal-close{
  width:32px;height:32px;border-radius:var(--radius-full);
  background:var(--bg-hover);border:none;
  color:var(--text-secondary);font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--transition-fast);flex-shrink:0;
}
.modal-close:hover{background:var(--color-danger-light);color:var(--color-danger)}

.modal-body{
  padding:var(--space-6);flex:1;overflow-y:auto;
}
.modal-footer{
  padding:var(--space-4) var(--space-6);
  border-top:1px solid var(--border-light);
  display:flex;gap:var(--space-3);justify-content:flex-end;flex-shrink:0;
}

/* ── Connect flow ────────────────────────────────────────────── */
.connect-action-bar{
  display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-6);
}

.connect-flow{display:flex;flex-direction:column;gap:var(--space-6)}

.connect-step{
  display:flex;gap:var(--space-4);align-items:flex-start;
}
.connect-step__num{
  width:28px;height:28px;border-radius:50%;
  background:var(--color-primary-gradient);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:var(--font-xs);font-weight:800;
  color:#fff;flex-shrink:0;margin-top:2px;
  box-shadow:0 2px 8px rgba(139,92,246,.35);
}
.connect-step__body{flex:1}
.connect-step__title{
  font-family:var(--font-display);font-size:var(--font-md);
  font-weight:700;color:var(--text-primary);margin-bottom:var(--space-3);
}

.connect-platforms,.connect-apps{
  display:flex;gap:var(--space-2);flex-wrap:wrap;
}
.connect-platforms .btn,.connect-apps .btn{
  border-radius:var(--radius-full) !important;font-size:var(--font-xs) !important;
}

.connect-selected-card{
  padding:var(--space-5);margin-bottom:var(--space-4);
  min-height:80px;
}

.connect-help{
  border-radius:var(--radius-lg);border:1px solid var(--border-default);
  padding:0;overflow:hidden;margin-top:var(--space-2);
}
.connect-help summary{
  padding:var(--space-3) var(--space-4);font-size:var(--font-sm);
  font-weight:var(--weight-medium);color:var(--text-secondary);cursor:pointer;
  transition:color var(--transition-fast);
  list-style:none;display:flex;align-items:center;gap:var(--space-2);
}
.connect-help summary::before{content:'▶';font-size:10px;transition:transform var(--transition-fast)}
.connect-help[open] summary::before{transform:rotate(90deg)}
.connect-help summary:hover{color:var(--text-primary)}
.connect-help[open] summary{border-bottom:1px solid var(--border-light)}
.connect-help ol{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.connect-help li{font-size:var(--font-sm);color:var(--text-secondary);line-height:1.6}

/* ── Notices (m2 aliases) ────────────────────────────────────── */
.m2-notice{
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);
  font-size:var(--font-sm);border:1px solid;margin-bottom:var(--space-4);line-height:1.55;
}
.m2-success{background:var(--color-success-light);color:var(--color-success);border-color:var(--color-success-border)}
.m2-error{background:var(--color-danger-light);color:var(--color-danger);border-color:var(--color-danger-border)}

/* ── Card extras ─────────────────────────────────────────────── */
.card-subtitle{font-size:var(--font-xs);color:var(--text-tertiary);margin-top:2px}
.card-footer{
  padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-light);
  display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;
}

/* ── Amount grid (payments page) ─────────────────────────────── */
.amount-grid{
  display:flex;gap:var(--space-2);flex-wrap:wrap;
}
.amount-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 var(--space-4);height:38px;border-radius:var(--radius-full);
  font-family:var(--font-body);font-size:var(--font-sm);font-weight:var(--weight-semibold);
  background:var(--bg-hover);border:1px solid var(--border-default);
  color:var(--text-secondary);cursor:pointer;
  transition:all var(--transition-fast);white-space:nowrap;
}
.amount-btn:hover{background:var(--bg-glass-hover);border-color:var(--border-strong);color:var(--text-primary)}
.amount-btn.selected{
  background:var(--color-primary-light);border-color:var(--color-primary);
  color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary);
}
.provider-card{border-radius:var(--radius-lg) !important;padding:0 var(--space-5) !important}

/* ── Filter chips (payments tabs) ────────────────────────────── */
.table-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-5);
}
.table-toolbar .search-input-wrap{flex:1;min-width:200px;max-width:320px}

.filter-chips{display:flex;gap:var(--space-2)}
.filter-chip{
  display:inline-flex;align-items:center;padding:6px 16px;
  border-radius:var(--radius-full);font-size:var(--font-xs);font-weight:700;
  letter-spacing:.04em;background:var(--bg-hover);border:1px solid var(--border-default);
  color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);
}
.filter-chip:hover{background:var(--bg-glass-hover);color:var(--text-primary)}
.filter-chip.active{
  background:var(--color-primary-light);border-color:var(--color-primary);
  color:var(--color-primary);
}

/* Tab panels */
.tab-panel{display:none}
.tab-panel.is-active{display:block}

/* Table scroll wrapper */
.table-scroll{overflow-x:auto}
.table-scroll::-webkit-scrollbar{height:4px}
.table-scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}

/* ══════════════════════════════════════════════════════════════
   AUTH PAGES — base_auth.html
   ══════════════════════════════════════════════════════════════ */
.auth-logo-mark{
  width:56px;height:56px;border-radius:var(--radius-xl);
  background:var(--color-primary-gradient);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:var(--font-xl);font-weight:800;
  color:#fff;margin:0 auto var(--space-3);
  box-shadow:0 4px 20px rgba(139,92,246,.4);
}
.auth-title{
  font-family:var(--font-display);font-size:var(--font-2xl);
  font-weight:800;color:var(--text-primary);margin-bottom:4px;
}
.auth-subtitle{font-size:var(--font-sm);color:var(--text-secondary)}

.form-link{
  font-size:var(--font-sm);color:var(--text-link);text-decoration:none;
  transition:color var(--transition-fast);
}
.form-link:hover{color:var(--text-link-hover);text-decoration:underline}

.divider-text{
  display:flex;align-items:center;gap:var(--space-3);
  font-size:var(--font-xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-tertiary);
  margin:var(--space-5) 0;
}
.divider-text::before,.divider-text::after{
  content:'';flex:1;height:1px;background:var(--border-default);
}

.btn-telegram{
  background:linear-gradient(135deg,#229ED9,#0088cc);
  color:#fff !important;border-color:transparent;
  box-shadow:0 2px 12px rgba(0,136,204,.3);
}
.btn-telegram:hover{box-shadow:0 4px 20px rgba(0,136,204,.45)}

.auth-footer{
  text-align:center;font-size:var(--font-sm);color:var(--text-secondary);
  margin-top:var(--space-5);
}
.auth-footer a{color:var(--text-link)}
.auth-footer a:hover{color:var(--text-link-hover)}

/* ══════════════════════════════════════════════════════════════
   PROFILE / SETTINGS PAGES
   ══════════════════════════════════════════════════════════════ */
.section-card{
  background:var(--bg-glass);border:1px solid var(--border-default);
  border-radius:var(--radius-xl);overflow:hidden;margin-bottom:var(--space-4);
}
[data-theme="dark"] .section-card{
  background:linear-gradient(145deg,rgba(21,27,36,.8) 0%,rgba(13,17,23,.9) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.section-card-header{
  padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border-light);
  display:flex;align-items:center;gap:var(--space-3);
}
.section-card-title{font-family:var(--font-display);font-size:var(--font-md);font-weight:700;color:var(--text-primary)}
.section-card-body{padding:var(--space-6)}

/* Info rows */
.info-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) 0;border-bottom:1px solid var(--border-light);gap:var(--space-4);
}
.info-row:last-child{border-bottom:none}
.info-row-label{font-size:var(--font-sm);color:var(--text-secondary);font-weight:var(--weight-medium)}
.info-row-value{font-size:var(--font-sm);color:var(--text-primary);font-weight:var(--weight-semibold);text-align:right}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE ADDITIONS
   ══════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  .page-header-row{flex-direction:column}
  .page-header-row > div:last-child{width:100%}
  .page-header-row > div:last-child .btn{flex:1}
  .modal{max-height:95vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
  .modal-backdrop{align-items:flex-end;padding:0}
  .sub-card-meta{flex-direction:column;gap:var(--space-3)}
  .table-toolbar{flex-direction:column;align-items:stretch}
  .table-toolbar .search-input-wrap{max-width:none}
  .amount-grid{display:grid;grid-template-columns:repeat(2,1fr)}
  .connect-action-bar{flex-direction:column}
  .connect-action-bar .btn{width:100%}
}