/* ═══════════════════════════════════════════════════════════════
   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}

.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);
}

.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:var(--sidebar-width);min-height:100vh;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)}
.topbar-right{display:flex;align-items:center;gap:var(--space-3)}
.topbar-title{font-family:var(--font-display);font-size:var(--font-md);font-weight:600;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%;
}
.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.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);
}

/* 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){
  .fl-sidebar{transform:translateX(-100%);box-shadow:none}
  .fl-sidebar.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
  .main-content{margin-left:0}
  .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%}
}

/* ==========================================================================
   ZAPRETVPN POLISH 2026
   Production override layer for the flavor theme.
   ========================================================================== */
:root{
  --violet-400:#2dd4bf;
  --violet-500:#14b8a6;
  --violet-600:#0f766e;
  --violet-700:#115e59;
  --cyan-400:#38bdf8;
  --cyan-500:#0ea5e9;
  --cyan-600:#0284c7;
  --pink-400:#fb7185;
  --emerald-400:#4ade80;
  --emerald-500:#22c55e;
  --amber-400:#f59e0b;
  --red-400:#fb7185;
  --red-500:#ef4444;
  --font-display:var(--font-body);
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --radius-xl:8px;
  --radius-2xl:8px;
  --content-max:1180px;
}

:root,[data-theme="dark"]{
  --color-primary:#2dd4bf;
  --color-primary-hover:#5eead4;
  --color-primary-light:rgba(45,212,191,.14);
  --color-primary-subtle:rgba(45,212,191,.08);
  --color-primary-text:#031716;
  --color-primary-gradient:linear-gradient(135deg,#2dd4bf 0%,#22c55e 52%,#f59e0b 100%);
  --color-accent:#f59e0b;
  --color-accent-glow:rgba(245,158,11,.18);
  --bg-body:#0a0f14;
  --bg-surface:#111820;
  --bg-elevated:#17212b;
  --bg-sunken:#070b10;
  --bg-sidebar:#0c1218;
  --bg-topbar:rgba(10,15,20,.9);
  --bg-hover:rgba(255,255,255,.07);
  --bg-active:rgba(45,212,191,.13);
  --bg-input:#0f1720;
  --bg-glass:rgba(255,255,255,.045);
  --bg-glass-hover:rgba(255,255,255,.08);
  --text-primary:#f8fafc;
  --text-secondary:#b6c2cf;
  --text-tertiary:#748395;
  --text-link:#5eead4;
  --text-link-hover:#a7f3d0;
  --border-default:rgba(255,255,255,.11);
  --border-light:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.18);
  --border-focus:#2dd4bf;
  --border-glow:rgba(45,212,191,.42);
  --shadow-sm:0 8px 24px rgba(0,0,0,.28);
  --shadow-md:0 14px 36px rgba(0,0,0,.32);
  --shadow-lg:0 24px 60px rgba(0,0,0,.42);
  --shadow-glow:0 0 0 1px rgba(45,212,191,.22),0 18px 50px rgba(0,0,0,.34);
  --shadow-cyan:0 0 0 1px rgba(56,189,248,.18),0 18px 50px rgba(0,0,0,.28);
}

[data-theme="light"]{
  --color-primary:#0f766e;
  --color-primary-hover:#115e59;
  --color-primary-light:rgba(15,118,110,.1);
  --color-primary-subtle:rgba(15,118,110,.06);
  --color-primary-gradient:linear-gradient(135deg,#0f766e 0%,#16a34a 52%,#d97706 100%);
  --color-accent:#d97706;
  --bg-body:#f6f8fb;
  --bg-surface:#ffffff;
  --bg-elevated:#eef3f7;
  --bg-sidebar:#0d1720;
  --bg-topbar:rgba(255,255,255,.92);
  --bg-hover:rgba(15,23,42,.055);
  --bg-active:rgba(15,118,110,.1);
  --text-primary:#0f172a;
  --text-secondary:#475569;
  --text-tertiary:#64748b;
  --text-link:#0f766e;
  --text-link-hover:#134e4a;
  --border-default:rgba(15,23,42,.1);
  --border-light:rgba(15,23,42,.07);
  --border-strong:rgba(15,23,42,.17);
  --border-focus:#0f766e;
  --border-glow:rgba(15,118,110,.28);
}

*,*::before,*::after{letter-spacing:0 !important}
body{background:var(--bg-body)}

[data-theme="dark"] body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.45;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 82%);
}

.logo-icon,.auth-logo-mark,.auth-logo .logo-icon,.avatar{
  background:var(--color-primary-gradient);
  box-shadow:0 10px 24px rgba(20,184,166,.22);
}

.card,.section-card,.sub-card,.tariff-card,.kpi-card,.modal,.cta-inner{
  border-radius:8px !important;
}

.card,[data-theme="dark"] .card,
.section-card,[data-theme="dark"] .section-card,
.sub-card,[data-theme="dark"] .sub-card{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 16px 44px rgba(0,0,0,.22);
}

.btn{
  min-width:0;
  border-radius:8px;
  overflow:hidden;
}
.btn-primary{
  color:#031716;
  background:var(--color-primary-gradient);
  box-shadow:0 10px 26px rgba(45,212,191,.22);
}
.btn-primary:hover{
  color:#031716;
  box-shadow:0 14px 34px rgba(45,212,191,.3);
}
.btn-secondary,.btn-ghost{
  border-color:var(--border-default);
}

.fl-sidebar.mobile-open{transform:translateX(0);box-shadow:var(--shadow-lg)}
.sidebar-overlay.visible{display:block}
.bottom-nav{
  height:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.bottom-nav-inner{
  width:100%;
  max-width:560px;
  margin:0 auto;
}
.bottom-nav-link{
  min-width:0;
  line-height:1.15;
}
.bottom-nav-link span{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.landing-header.scrolled{
  background:rgba(10,15,20,.88);
}
[data-theme="light"] .landing-header.scrolled{
  background:rgba(255,255,255,.92);
}
.landing-header-inner{
  height:72px;
}
.landing-logo{
  font-weight:800;
}
.landing-menu-btn,.mobile-menu-btn,.theme-toggle{
  border-radius:8px;
}

.landing-header:not(.scrolled) .landing-logo,
.landing-header:not(.scrolled) .landing-nav-link,
.landing-header:not(.scrolled) .btn-ghost{
  color:#e5edf5;
}
.landing-header:not(.scrolled) .landing-logo:hover,
.landing-header:not(.scrolled) .landing-nav-link:hover,
.landing-header:not(.scrolled) .btn-ghost:hover{
  color:#ffffff;
}
.landing-header:not(.scrolled) .theme-toggle,
.landing-header:not(.scrolled) .landing-menu-btn{
  color:#e5edf5;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}
.landing-header:not(.scrolled) .theme-toggle:hover,
.landing-header:not(.scrolled) .landing-menu-btn:hover{
  color:#ffffff;
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.2);
}
[data-theme="light"] .landing-header.scrolled .landing-logo{
  color:var(--text-primary);
}
[data-theme="light"] .landing-header.scrolled .landing-nav-link,
[data-theme="light"] .landing-header.scrolled .btn-ghost{
  color:var(--text-secondary);
}
[data-theme="light"] .landing-header.scrolled .landing-nav-link:hover,
[data-theme="light"] .landing-header.scrolled .btn-ghost:hover{
  color:var(--text-primary);
}

.hero{
  min-height:860px;
  justify-content:center;
  padding:128px var(--space-6) 92px;
  background:
    linear-gradient(180deg,rgba(10,15,20,.06) 0%,rgba(10,15,20,.72) 68%,var(--bg-body) 100%),
    linear-gradient(135deg,#0a0f14 0%,#111c24 46%,#0b1117 100%);
}
.hero::before{
  inset:0;
  width:auto;
  height:auto;
  top:auto;
  left:auto;
  transform:none;
  animation:none;
  background-image:
    linear-gradient(rgba(45,212,191,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(45,212,191,.1) 1px,transparent 1px),
    linear-gradient(135deg,rgba(245,158,11,.14),transparent 44%);
  background-size:96px 96px,96px 96px,100% 100%;
  opacity:.52;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),transparent 78%);
}
.hero::after{
  inset:auto 0 0;
  width:auto;
  height:240px;
  right:auto;
  bottom:0;
  transform:none;
  animation:none;
  background:linear-gradient(180deg,transparent,var(--bg-body));
}
.hero-badge,.hero h1,.hero-subtitle,.hero-actions,.hero-stats,.page-content>*{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}
.hero-badge{
  position:relative;
  z-index:1;
  max-width:min(620px,100%);
  justify-content:center;
  color:#a7f3d0;
  background:rgba(15,23,42,.72);
  border-color:rgba(45,212,191,.28);
  box-shadow:0 10px 28px rgba(0,0,0,.2);
}
.hero h1{
  position:relative;
  z-index:1;
  font-size:4.25rem;
  line-height:1.04;
  letter-spacing:0;
  max-width:820px;
  text-wrap:balance;
  color:#f8fafc;
}
.gradient-text{
  background:linear-gradient(135deg,#5eead4,#86efac 58%,#fbbf24);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-subtitle{
  position:relative;
  z-index:1;
  max-width:680px;
  color:#cbd5e1;
  font-size:1.08rem;
}
.hero .btn-secondary{
  color:#f8fafc;
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.16);
}
.hero .btn-secondary:hover{
  color:#ffffff;
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.24);
}
.hero-actions{
  position:relative;
  z-index:1;
  margin-bottom:52px;
}
.hero-actions .btn{
  min-width:210px;
}
.hero-stats{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,minmax(120px,1fr));
  width:min(760px,100%);
  gap:0;
  padding:0;
  background:rgba(10,15,20,.72);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 20px 60px rgba(0,0,0,.32);
  overflow:hidden;
}
.hero-stat{
  padding:22px 18px;
  border-right:1px solid rgba(255,255,255,.08);
}
.hero-stat:last-child{border-right:0}
.hero-stat-value{
  color:#f8fafc;
  background:none;
  -webkit-text-fill-color:currentColor;
  font-size:1.65rem;
}
.hero-stat-label{
  color:#91a3b5;
}

.landing-section{
  padding:84px var(--space-6);
}
.tariffs-section-heading h2{
  font-size:2.35rem;
  line-height:1.12;
}
.tariffs-section-heading p{
  font-size:1rem;
}
.feature-icon-wrap{
  border-radius:8px !important;
}
.tariff-card{
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.028));
  border-color:var(--border-default);
}
.tariff-card.featured{
  border-color:rgba(45,212,191,.46);
  box-shadow:0 0 0 1px rgba(45,212,191,.16),0 22px 58px rgba(0,0,0,.28);
}
.cta-inner{
  background:linear-gradient(135deg,rgba(45,212,191,.12),rgba(245,158,11,.08));
  border-color:rgba(45,212,191,.25);
}
.cta-inner::before{display:none}

.filter-bar,
.table-toolbar,
.connect-action-bar,
.card-header,
.sub-card-actions,
.modal-footer{
  min-width:0;
}
.main-content,.page-content{
  min-width:0;
}
table{table-layout:auto}
td,th{vertical-align:middle}
.form-input,.form-control,.form-select,.m2-input,input,select,textarea{
  max-width:100%;
}

@media(max-width:1024px){
  .hero{min-height:780px}
  .hero h1{font-size:3.6rem}
  .page-content{max-width:100%}
}
@media(max-width:768px){
  .main-content{
    width:100%;
    overflow-x:hidden;
  }
  .landing-header-inner{
    height:66px;
    padding:0 16px;
    gap:10px;
  }
  .landing-logo{font-size:1rem}
  .landing-logo img{max-height:30px}
  .landing-nav-actions{gap:8px}
  .landing-nav.mobile-show{
    top:66px;
    left:12px;
    right:12px;
    border-radius:8px;
    background:rgba(17,24,32,.96);
    border:1px solid var(--border-default);
  }
  [data-theme="light"] .landing-nav.mobile-show{background:rgba(255,255,255,.96)}
  [data-theme="light"] .landing-nav.mobile-show .landing-nav-link{
    color:var(--text-secondary);
  }
  [data-theme="light"] .landing-nav.mobile-show .landing-nav-link:hover{
    color:var(--text-primary);
  }
  .hero{
    min-height:760px;
    padding:104px 18px 64px;
  }
  .hero h1{
    font-size:3.05rem;
    max-width:560px;
  }
  .hero-subtitle{
    font-size:1rem;
    max-width:520px;
  }
  .hero-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .hero-stat:nth-child(2n){border-right:0}
  .hero-stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}
  .landing-section{padding:62px 18px}
  .tariffs-section-heading h2{font-size:2rem}
  .footer-bottom{align-items:flex-start;flex-direction:column}
  .card-header{align-items:flex-start;gap:12px;flex-wrap:wrap}
}
@media(max-width:520px){
  .btn,.btn-lg,.btn-xl{
    min-height:44px;
    height:auto;
    white-space:normal;
    line-height:1.25;
    text-align:center;
    padding:11px 16px;
  }
  .hero{
    min-height:720px;
    padding:96px 16px 48px;
  }
  .hero-badge{
    font-size:.68rem;
    padding:7px 12px;
  }
  .hero h1{
    font-size:2.42rem;
    line-height:1.08;
  }
  .hero-actions{
    gap:10px;
    margin-bottom:34px;
  }
  .hero-actions .btn{
    width:100%;
    min-width:0;
  }
  .hero-stats{
    width:100%;
  }
  .hero-stat{
    padding:16px 10px;
  }
  .hero-stat-value{
    font-size:1.35rem;
  }
  .bottom-nav-link{
    font-size:9px;
    padding:6px 4px;
  }
  .bottom-nav-link svg{
    width:18px;
    height:18px;
  }
  .page-content{
    padding:14px 14px calc(var(--bottom-nav-height) + 18px + env(safe-area-inset-bottom,0px));
  }
  .sub-card-actions .btn,
  .connect-action-bar .btn,
  .modal-footer .btn,
  .card-footer .btn{
    width:100%;
  }
}