/* Shared web cabinet skin. Mini App uses its own base and is not affected. */
:root, [data-theme="light"] {
  --sidebar-width: 236px;
  --container-max: 1200px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --bg-body: #f7f9f9;
  --bg-surface: #fff;
  --bg-sidebar: #fff;
  --bg-topbar: #fff;
  --bg-input: #fff;
  --bg-hover: #edf3f2;
  --bg-active: #e5f4ee;
  --bg-elevated: #f0f5f4;
  --bg-sunken: #f0f5f4;
  --bg-code: #f0f5f4;
  --text-primary: #162827;
  --text-secondary: #536362;
  --text-tertiary: #637572;
  --text-link: #087f68;
  --text-link-hover: #066953;
  --text-inverse: #fff;
  --border-default: #dbe5e3;
  --border-light: #e5edeb;
  --border-strong: #aac3bc;
  --border-focus: #087f68;
  --divider: #e5edeb;
  --color-primary: #087f68;
  --color-primary-hover: #066953;
  --color-primary-light: #e5f4ee;
  --color-primary-subtle: #e5f4ee;
  --color-primary-gradient: #087f68;
  --color-primary-text: #fff;
  --color-success: #087f68;
  --color-success-light: #e5f4ee;
  --color-warning: #936200;
  --color-warning-light: #fff8e5;
  --color-info: #266a94;
  --shadow-primary: none;
  --shadow-focus: 0 0 0 3px rgba(8,127,104,.2);
  --scrollbar-thumb: #aac3bc;
  --scrollbar-track: transparent;
}
[data-theme="dark"] {
  --bg-body: #141919;
  --bg-surface: #1c2323;
  --bg-sidebar: #1c2323;
  --bg-topbar: #1c2323;
  --bg-input: #1c2323;
  --bg-hover: #293434;
  --bg-active: #203c33;
  --bg-elevated: #242d2d;
  --bg-sunken: #182020;
  --bg-code: #182020;
  --text-primary: #f3f7f6;
  --text-secondary: #b4c3c0;
  --text-tertiary: #a2b4af;
  --text-link: #64d7b0;
  --text-link-hover: #91e6c5;
  --border-default: #354340;
  --border-light: #2c3b37;
  --border-strong: #557269;
  --border-focus: #64d7b0;
  --divider: #2c3b37;
  --color-primary: #64d7b0;
  --color-primary-hover: #91e6c5;
  --color-primary-light: #203c33;
  --color-primary-subtle: #203c33;
  --color-success: #64d7b0;
  --color-success-light: #203c33;
  --color-warning: #edc46b;
  --color-warning-light: #302a1c;
  --color-info: #8ec9e8;
}
.fl-body *, .fl-body *::before, .fl-body *::after { box-sizing: border-box; letter-spacing: 0; }
.fl-body { font-size: 14px; }
.fl-body h1 { font-size: 24px; line-height: 1.35; }
.fl-body h2 { font-size: 20px; line-height: 1.4; }
.fl-body h3 { font-size: 16px; line-height: 1.5; }
.fl-body p, .fl-body strong, .fl-body label { overflow-wrap: anywhere; }
.fl-body a:focus-visible, .fl-body button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.vityas-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); font-size: 21px; font-weight: 700; line-height: 1.3; white-space: nowrap; text-decoration: none; }
.vityas-brand-shield { flex: 0 0 32px; width: 32px; height: 36px; background: var(--color-primary); mask: url('./vityas-shield.svg') center / contain no-repeat; -webkit-mask: url('./vityas-shield.svg') center / contain no-repeat; }
.sidebar-header { min-height: 80px; padding: 22px 20px; }
.sidebar-nav { padding: 18px 12px; }
.sidebar-section { margin-bottom: 22px; }
.sidebar-section-title { font-size: 11px; text-transform: none; }
.sidebar-link { min-height: 42px; font-size: 13px; padding: 10px 12px; }
.sidebar-link .nav-badge { max-width: 85px; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer { padding: 14px 20px; }
.sidebar-footer > div > .theme-toggle { display: none; }
.main-content, .topbar-left, .topbar-left > div, .page-content, .grid > *, .card-body { min-width: 0; }
.topbar { min-height: 80px; height: auto; padding: 16px 28px; gap: 12px; backdrop-filter: none; }
.fl-body h1.topbar-title { margin: 0; font-size: 18px; white-space: normal; overflow: visible; }
.topbar-subtitle { margin-top: 3px; font-size: 12px; color: var(--text-secondary); }
.topbar-right { flex-shrink: 0; }
.theme-toggle, .mobile-menu-btn { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; }
.avatar { background: var(--color-primary-light); color: var(--color-primary); }
.page-content { padding: 28px; }
.page-header .page-title { font-size: 20px; }
.page-header-row { align-items: flex-start; }
.page-header-row > div { min-width: 0; }
.card, .kpi-card, .tariff-card { box-shadow: none; border-radius: 8px; }
.page-content > .card:not(.sub-card), .page-content > .grid > .card:has(.card-header) { border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; }
.page-content > .card:not(.sub-card) { margin-bottom: 28px; }
.card-header { padding: 0 0 14px; margin-bottom: 18px; border-bottom: 1px solid var(--border-default); }
.card-footer { padding: 18px 0 0; flex-wrap: wrap; gap: 10px; }
.card-title { font-size: 16px; }
.card-header > .card-title.flex { width: 100%; gap: 12px; }
.grid.grid-3 > .card-hover { padding: 18px; }
.grid.grid-3 > .card-hover h3 { margin-bottom: 6px; }
.kpi-card { padding: 20px; min-width: 0; gap: 8px; }
.kpi-value { font-size: 24px; overflow-wrap: anywhere; }
.kpi-icon { width: 36px; height: 36px; margin-bottom: 0; }
.kpi-card .kpi-label { font-size: 12px; }
.empty-state { padding: 36px 16px; }
.empty-state .flex { justify-content: center; }
.fl-body .btn { min-height: 40px; white-space: normal; line-height: 1.4; border-radius: 8px; font-size: 13px; text-align: center; box-shadow: none; }
.fl-body .btn:hover { transform: none; box-shadow: none; }
.fl-body .btn-primary { background: #087f68; color: #fff; }
.fl-body .btn-primary:hover { background: #066953; color: #fff; }
.fl-body .btn-sm { min-height: 34px; }
.fl-body .btn-lg { min-height: 46px; font-size: 14px; }
.fl-body .btn-icon { width: 40px; min-width: 40px; height: 40px; padding: 8px; }
.form-input, .form-select { min-height: 44px; font-size: 14px; border-radius: 8px; min-width: 0; max-width: 100%; }
.form-input[readonly] { background: var(--bg-elevated); }
.form-label { font-size: 13px; }
.form-group { margin-bottom: 18px; }
.form-hint { color: var(--text-secondary); }
.vityas-profile-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 12px; margin-bottom: 26px; border-bottom: 1px solid var(--border-default); }
.vityas-profile-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; font-size: 13px; color: var(--text-secondary); border-radius: 6px; }
.vityas-profile-tabs a[aria-current="page"] { color: var(--color-primary); background: var(--color-primary-light); font-weight: 600; }
.vityas-profile-tabs a:hover { background: var(--bg-hover); }
.profile-hero { padding-bottom: 22px; border-bottom: 1px solid var(--border-default); gap: 16px; }
.profile-hero-name { font-size: 20px; }
.profile-hero-email { overflow-wrap: anywhere; }
.profile-hero .avatar { width: 56px; height: 56px; }
.page-content > .card:has(#security-current-password), .page-content > .card:has(input[name="current_password"]) { max-width: 650px; }
.setting-row { gap: 18px; flex-wrap: wrap; }
.setting-row .setting-info { flex: 1; min-width: 180px; }
.setting-row input[type="number"] { width: 110px; }
.alert { border-radius: 6px; font-size: 13px; margin-bottom: 20px; }
.alert a { font-weight: 600; }
.search-input-wrap { max-width: 360px; }
.sub-card-header, .sub-card-title-row, .sub-card-actions { flex-wrap: wrap; }
.sub-card-name { overflow-wrap: anywhere; min-width: 0; }
.fl-body .tariff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tariff-card { padding: 22px; min-width: 0; }
.tariff-name { font-size: 18px; padding-right: 0; }
.tariff-price { font-size: 32px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tariff-price .period { font-size: 12px; }
.page-content > .card > .flex > div { min-width: 0; max-width: 100%; }
.page-content > .card > .flex > div:last-child { flex-shrink: 1 !important; }
.vityas-page-actions { max-width: 100%; min-width: 0; flex-shrink: 1 !important; }
.tariff-card > .badge { position: static !important; display: inline-flex; margin-bottom: 12px; }
.tariff-card.featured { border-color: var(--color-primary); }
.tariff-card.featured::before { content: none; }
.tariff-cta { margin-top: 18px; }
.table-wrap, .table-responsive { max-width: 100%; overflow-x: auto; }
.amount-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.amount-btn { white-space: normal; overflow-wrap: anywhere; }
.modal-backdrop { z-index: 1100; }
.modal { border-radius: 8px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal-header, .modal-footer { flex-shrink: 0; flex-wrap: wrap; }
.modal-title { overflow-wrap: anywhere; }
.modal-close { width: 36px; height: 36px; flex-shrink: 0; }
.wc-support-fab, .wc-support-widget { --sw-accent: var(--color-primary); --sw-bg: var(--bg-surface); --sw-text: var(--text-primary); --sw-border: var(--border-default); --sw-radius: 8px; }
.wc-support-fab { width: 48px; height: 48px; right: 18px; bottom: 18px; background: #087f68; animation: none; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.wc-sw-header, .wc-sw-avatar { background: var(--color-primary-light); }
.wc-support-fab-badge:empty { display: none; }
.wc-support-fab-badge[hidden], .wc-support-widget[hidden] { display: none !important; }
.page-content > .card[style*="text-align:center"] svg { display: block; margin: 0 auto; }
.page-content > .card > .card-body:has(> .form-group > input[readonly]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.page-content > .card > .card-body:has(> .form-group > input[readonly]) > p { grid-column: 1 / -1; }
.wc-legal-footer { padding: 20px 80px 20px 28px; font-size: 12px; }
.auth-layout { padding: 100px 24px 36px; min-height: 100dvh; align-items: flex-start; }
.vityas-auth-header { position: absolute; left: 24px; right: 24px; top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-card { max-width: 440px; padding: 30px; border-radius: 8px; box-shadow: none; }
.auth-title { font-size: 22px; margin: 0 0 8px; }
.auth-subtitle { font-size: 13px; }
.auth-logo, .auth-card-logo { margin-bottom: 24px; text-align: left; }
.auth-muted, .auth-footer, .auth-legal { font-size: 12px; margin-top: 22px; color: var(--text-secondary); overflow-wrap: anywhere; }
.auth-card > h2 { margin-bottom: 24px; }
.auth-card .alert { line-height: 1.6; }
.auth-card input { max-width: 100%; }
.vityas-terms-check > input { flex: 0 0 18px; }
.vityas-terms-copy { flex: 1; min-width: 0; line-height: 1.6; overflow-wrap: normal; word-break: normal; }
.vityas-terms-copy a { overflow-wrap: normal; word-break: normal; }
@media (max-width: 1024px) {
  .page-shell, .page-shell.admin-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .fl-sidebar.mobile-open { display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: 260px; max-width: calc(100% - 40px); z-index: 1200; box-shadow: 10px 0 50px rgba(0,0,0,.25); }
  .mobile-menu-btn { display: inline-flex; }
  .topbar { padding: 14px 20px; }
  .page-content { padding: 24px 20px; }
}
@media (max-width: 768px) {
  .topbar { min-height: 72px; padding: 12px 16px; }
  .topbar-left { gap: 8px; }
  .topbar-right { gap: 4px; }
  .topbar-right .theme-toggle { display: inline-flex !important; }
  .topbar-right .avatar { display: none; }
  .topbar-subtitle { display: none; }
  .page-content { padding: 24px 16px !important; }
  .fl-body h1.topbar-title { font-size: 16px; }
  .grid.grid-4, .grid.grid-3:has(> .kpi-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-card { padding: 16px; }
  .kpi-value { font-size: 21px; }
  .kpi-icon { display: none; }
  .kpi-card:last-child:nth-child(3) { grid-column: 1 / -1; }
  .page-header-row > div:last-child { flex-wrap: wrap; }
  .vityas-profile-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vityas-profile-tabs a { padding: 10px; white-space: normal; }
  .fl-body .tariff-grid { grid-template-columns: 1fr; }
  .empty-state { padding: 24px 0; }
  .page-content > .card[style*="text-align: center"] { padding: 28px 0 !important; }
  .page-content > .card[style*="text-align: center"] > div:last-child { flex-wrap: wrap; }
  .card-footer { justify-content: flex-start; }
  .table-toolbar { flex-wrap: wrap; }
  .wc-support-fab { bottom: calc(80px + env(safe-area-inset-bottom)); right: 14px; }
  .wc-support-widget { bottom: calc(138px + env(safe-area-inset-bottom)); height: min(480px, calc(100dvh - 160px)); }
  .bottom-nav { background: var(--bg-surface); z-index: 1000; }
  .modal-backdrop { align-items: center; padding: 12px; }
  .modal { max-height: calc(100dvh - 24px); border-radius: 8px; }
  .auth-layout { padding: 94px 16px 30px; }
  .vityas-auth-header { left: 16px; right: 16px; top: 20px; }
  .vityas-brand { font-size: 20px; }
  .auth-card { background: var(--bg-surface); border: 1px solid var(--border-default); padding: 24px !important; }
  .amount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-content > .card > .card-body:has(> .form-group > input[readonly]) { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-body *, .fl-body *::before, .fl-body *::after { animation: none !important; transition: none !important; }
}