/* ================================================================
   GTS Amplify — Complete Portal Design System v3
   Guided Tech Solutions
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Brand — dark SaaS electric blue/cyan */
  --brand:        #3A7BF7;
  --brand-dark:   #2563EB;
  --brand-mid:    #00D2FF;
  --brand-light:  #60A5FA;
  --brand-pale:   rgba(58,123,247,.15);
  --brand-xpale:  rgba(58,123,247,.08);

  /* Accent */
  --accent:       #00D2FF;
  --accent-dark:  #00B8E0;
  --accent-pale:  rgba(0,210,255,.15);

  /* Semantic */
  --success:      #34D399;  --success-pale: rgba(52,211,153,.15);  --success-dark: #10B981;
  --warning:      #FBBF24;  --warning-pale: rgba(251,191,36,.15);
  --danger:       #F87171;  --danger-pale:  rgba(248,113,113,.15);  --danger-dark:  #EF4444;
  --info:         #60A5FA;  --info-pale:    rgba(96,165,250,.15);
  --purple:       #A78BFA;  --purple-pale:  rgba(167,139,250,.15);

  /* Neutrals — dark */
  --bg:           #0B0F1A;
  --bg-alt:       #0D1221;
  --surface:      rgba(255,255,255,.04);
  --surface-alt:  rgba(255,255,255,.03);
  --border:       rgba(255,255,255,.08);
  --border-mid:   rgba(255,255,255,.12);
  --text:         #E8EDF5;
  --text-mid:     #CBD5E1;
  --text-muted:   rgba(255,255,255,.45);
  --text-faint:   rgba(255,255,255,.28);

  /* Layout */
  --sidebar-w:    272px;
  --nav-h:        68px;

  /* Radius */
  --r-xs: 4px;  --r-sm: 8px;  --r: 12px;  --r-lg: 16px;  --r-xl: 24px;

  /* Shadow */
  --sh-xs: 0 1px 2px rgba(0,0,0,.25);
  --sh-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --sh:    0 4px 12px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2);
  --sh-md: 0 8px 24px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.2);
  --sh-lg: 0 20px 48px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.25);
  --sh-brand: 0 8px 24px rgba(58,123,247,.35);
  --sh-accent: 0 8px 24px rgba(0,210,255,.25);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tr:   all .2s var(--ease);
  --tr-s: all .35s var(--ease);

  /* Typography */
  --ff-d: 'Outfit',  sans-serif;
  --ff-b: 'DM Sans', sans-serif;
}

/* ── LIGHT MODE OVERRIDES ───────────────────────────────────── */
body.light {
  --brand:        #1B4F72;
  --brand-dark:   #0F2E42;
  --brand-mid:    #2471A3;
  --brand-light:  #3498DB;
  --brand-pale:   #EBF5FB;
  --brand-xpale:  #F0F8FE;
  --accent:       #E67E22;
  --accent-dark:  #CA6F1E;
  --accent-pale:  #FEF5EC;
  --success:      #0F9D58;  --success-pale: #E6F4EA;  --success-dark: #0a7f47;
  --warning:      #F39C12;  --warning-pale: #FEF9E7;
  --danger:       #E53935;  --danger-pale:  #FDECEA;  --danger-dark:  #c62828;
  --info:         #1565C0;  --info-pale:    #E3F2FD;
  --purple:       #6B21A8;  --purple-pale:  #F3E8FF;
  --bg:           #F2F5F9;
  --bg-alt:       #E8ECF2;
  --surface:      #FFFFFF;
  --surface-alt:  #F8FAFC;
  --border:       #E2E8F0;
  --border-mid:   #CBD5E1;
  --text:         #0D1B2A;
  --text-mid:     #334155;
  --text-muted:   #64748B;
  --text-faint:   #94A3B8;
  --sh-xs: 0 1px 2px rgba(0,0,0,.05);
  --sh-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --sh:    0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --sh-md: 0 8px 24px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.06);
  --sh-lg: 0 20px 48px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.08);
  --sh-brand: 0 8px 24px rgba(27,79,114,.28);
  --sh-accent: 0 8px 24px rgba(230,126,34,.28);
}

/* ── BASE ───────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior: smooth; font-size: 16px; overflow-x:hidden; }
body  { font-family:var(--ff-b); background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100vw; }
a     { color:inherit; text-decoration:none; }
img   { max-width:100%; display:block; }
button, input, select, textarea { font-family:var(--ff-b); }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track  { background:transparent; }
::-webkit-scrollbar-thumb  { background:var(--border-mid); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-faint); }

/* ── NAVBAR ─────────────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  background:rgba(11,15,26,.92); border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  z-index:1000; box-shadow:var(--sh-xs);
  display:flex; align-items:center;
}
body.light .navbar { background:rgba(255,255,255,.92); }
body.light .brand-logo { color:var(--text); }
.navbar-inner {
  width:100%; max-width:1600px; margin:0 auto;
  padding:0 1.5rem; display:flex; align-items:center; justify-content:space-between;
}
.navbar-left  { display:flex; align-items:center; gap:.75rem; }
.navbar-center {
  display:flex; align-items:center; gap:.125rem;
  position:absolute; left:50%; transform:translateX(-50%);
}
.navbar-right { display:flex; align-items:center; gap:.625rem; }

.nav-link-sm {
  padding:.375rem .75rem; border-radius:7px;
  font-size:.8125rem; font-weight:500; color:var(--text-mid);
  text-decoration:none; transition:var(--tr);
}
.nav-link-sm:hover { background:var(--bg); color:var(--brand); }

.nav-avatar-wrap { position:relative; visibility:hidden; }
.nav-avatar-btn {
  display:flex; align-items:center; gap:.5rem;
  padding:.3125rem .75rem .3125rem .3125rem;
  border-radius:100px; border:1.5px solid var(--border);
  background:var(--surface); font-size:.8125rem; font-weight:600;
  color:var(--text); cursor:pointer; transition:var(--tr);
  font-family:var(--ff-b);
}
.nav-avatar-btn:hover { border-color:var(--brand); background:var(--brand-pale); }
.nav-avatar-circle {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#3A7BF7,#00D2FF);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; color:white; overflow:hidden; flex-shrink:0;
}
.nav-avatar-name { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.nav-dropdown {
  position:absolute; top:calc(100% + .5rem); right:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:var(--sh-md);
  min-width:180px; padding:.5rem; display:none; z-index:200;
}
.nav-avatar-wrap:hover .nav-dropdown,
.nav-avatar-wrap:focus-within .nav-dropdown { display:block; }
.nav-dropdown-item {
  display:block; padding:.5rem .75rem; border-radius:var(--r-sm);
  font-size:.8125rem; font-weight:500; color:var(--text-mid);
  text-decoration:none; transition:var(--tr);
}
.nav-dropdown-item:hover { background:var(--bg); color:var(--brand); }
.nav-dropdown-divider { height:1px; background:var(--border); margin:.375rem 0; }
.nav-dropdown-item.danger { color:var(--danger); }
.nav-dropdown-item.danger:hover { background:var(--danger-pale); }

.hamburger-btn {
  display:none; width:38px; height:38px;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm);
  align-items:center; justify-content:center;
  font-size:1.125rem; color:var(--text-mid); cursor:pointer; transition:var(--tr);
}
.hamburger-btn:hover { background:var(--brand-pale); border-color:var(--brand); color:var(--brand); }

.brand-logo {
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--ff-d); font-size:1.0625rem; font-weight:700;
  color:#fff; letter-spacing:-.01em;
}
.brand-logo-icon {
  width:34px; height:34px; border-radius:var(--r-sm);
  background:linear-gradient(135deg,#3A7BF7,#00D2FF);
  display:flex; align-items:center; justify-content:center;
  font-size:.9375rem; box-shadow:0 2px 8px rgba(58,123,247,.3);
}

.btn-nav {
  padding:.4375rem 1rem; border-radius:var(--r-sm);
  font-weight:600; font-size:.8125rem; cursor:pointer; transition:var(--tr);
  border:none; background:var(--brand); color:white; letter-spacing:.01em;
}
.btn-nav:hover { background:var(--brand-dark); transform:translateY(-1px); box-shadow:var(--sh-brand); }
.btn-nav-ghost { background:transparent; color:var(--text-mid); border:1px solid var(--border); }
.btn-nav-ghost:hover { background:var(--bg); color:var(--text); border-color:var(--border-mid); transform:translateY(-1px); }

/* ── PORTAL WRAPPER ─────────────────────────────────────────── */
.portal-wrapper { padding-top:var(--nav-h); min-height:100vh; display:flex; max-width:100vw; }

/* ── SIDEBAR ────────────────────────────────────────────────── */
.portal-sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:linear-gradient(180deg, #0B1D2E 0%, #0F2840 55%, #0B1D2E 100%);
  position:fixed; left:0; top:var(--nav-h);
  height:calc(100vh - var(--nav-h)); overflow-y:auto; overflow-x:hidden;
  z-index:100; display:flex; flex-direction:column;
  transition:transform .3s var(--ease);
}

.sidebar-profile {
  visibility:hidden;
  margin:1rem .875rem .5rem;
  padding:.875rem; border-radius:var(--r);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:.625rem;
}
.sidebar-avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#3A7BF7,#00D2FF);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-d); font-weight:700; font-size:.875rem; color:white;
  box-shadow:0 2px 8px rgba(0,0,0,.15); overflow:hidden;
}
.sidebar-info { flex:1; min-width:0; }
.sidebar-name {
  font-size:.8125rem; font-weight:600; color:rgba(255,255,255,.92);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar-email {
  font-size:.6875rem; color:rgba(255,255,255,.38);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;
}

.sidebar-nav { flex:1; padding:.375rem .75rem; }
.sidebar-section-label {
  font-size:.5625rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:rgba(255,255,255,.22); padding:.75rem .625rem .25rem;
}
.sidebar-link {
  display:flex; align-items:center; gap:.625rem;
  padding:.5rem .625rem; margin-bottom:1px; border-radius:var(--r-sm);
  color:rgba(255,255,255,.48); font-weight:500; font-size:.8125rem;
  transition:var(--tr); border:none; background:transparent;
  width:100%; text-align:left; cursor:pointer; position:relative;
}
.sidebar-link:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.85); }
.sidebar-link.active { background:rgba(52,152,219,.18); color:white; font-weight:600; }
.sidebar-link.active::before {
  content:''; position:absolute; left:0; top:25%; bottom:25%;
  width:3px; background:var(--brand-light); border-radius:0 2px 2px 0;
}
.sidebar-icon { font-size:.875rem; width:18px; text-align:center; flex-shrink:0; }
.sidebar-badge {
  margin-left:auto; background:var(--accent); color:white;
  font-size:.5625rem; font-weight:700; padding:1px 5px; border-radius:10px; min-width:16px; text-align:center;
}

.sidebar-footer { padding:.75rem; border-top:1px solid rgba(255,255,255,.05); }
.btn-signout {
  width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.5rem; border-radius:var(--r-sm); font-size:.8125rem; font-weight:600;
  background:rgba(229,57,53,.1); border:1px solid rgba(229,57,53,.18);
  color:rgba(239,154,154,.85); cursor:pointer; transition:var(--tr);
}
.btn-signout:hover { background:rgba(229,57,53,.2); color:#ffcdd2; border-color:rgba(229,57,53,.3); }

.sidebar-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:99; backdrop-filter:blur(3px);
}
.sidebar-overlay.open { display:block; }

/* ── PORTAL MAIN ─────────────────────────────────────────────── */
.portal-main {
  flex:1; min-width:0; max-width:100%; margin-left:var(--sidebar-w);
  padding:1.875rem 2rem; min-height:calc(100vh - var(--nav-h));
}

/* ── PAGE HEADER ─────────────────────────────────────────────── */
.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:.875rem; margin-bottom:1.625rem;
}
.page-title {
  font-family:var(--ff-d); font-size:1.5625rem; font-weight:700;
  color:var(--text); letter-spacing:-.025em; line-height:1.2;
}
.page-subtitle { font-size:.875rem; color:var(--text-muted); margin-top:.25rem; }
.page-actions { display:flex; gap:.625rem; align-items:center; flex-wrap:wrap; }

/* ── CARDS ───────────────────────────────────────────────────── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden;
  margin-bottom:1.375rem;
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.5rem; border-bottom:1px solid var(--border);
  background:var(--surface-alt);
}
.card-title { font-family:var(--ff-d); font-size:.9375rem; font-weight:600; color:var(--text); letter-spacing:-.01em; }
.card-subtitle { font-size:.75rem; color:var(--text-muted); margin-top:2px; }
.card-body { padding:1.5rem; }
.card-footer {
  padding:.875rem 1.5rem; border-top:1px solid var(--border);
  background:var(--surface-alt); display:flex; align-items:center;
  justify-content:space-between; gap:.75rem; flex-wrap:wrap;
}

/* ── STATS GRID ──────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.125rem; margin-bottom:1.5rem; }
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:1.25rem 1.375rem;
  transition:var(--tr); box-shadow:var(--sh-xs); position:relative; overflow:hidden;
}
.stat-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-light));
  opacity:0; transition:opacity .2s;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }
.stat-card:hover::after { opacity:1; }
.stat-icon { width:40px; height:40px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:1.125rem; margin-bottom:.875rem; background:var(--brand-pale); }
.stat-icon.green  { background:var(--success-pale); }
.stat-icon.orange { background:var(--accent-pale); }
.stat-icon.yellow { background:var(--warning-pale); }
.stat-icon.purple { background:var(--purple-pale); }
.stat-label { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:.25rem; }
.stat-value { font-family:var(--ff-d); font-size:1.875rem; font-weight:700; color:var(--text); letter-spacing:-.03em; line-height:1; }
.stat-value.sm { font-size:1.25rem; }
.stat-change { font-size:.6875rem; color:var(--text-muted); margin-top:.3rem; }
.stat-change.up   { color:var(--success); }
.stat-change.down { color:var(--danger); }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.375rem;
  padding:.5625rem 1.125rem; border-radius:var(--r-sm);
  font-family:var(--ff-b); font-weight:600; font-size:.875rem;
  cursor:pointer; transition:var(--tr); border:none;
  text-decoration:none; white-space:nowrap; letter-spacing:.01em;
}
.btn-xs  { padding:.3125rem .625rem; font-size:.75rem; }
.btn-sm  { padding:.375rem .75rem; font-size:.8125rem; }
.btn-lg  { padding:.8125rem 1.625rem; font-size:.9375rem; }
.btn-xl  { padding:1rem 2rem; font-size:1rem; }
.btn-block { width:100%; justify-content:center; }

.btn-primary  { background:var(--brand); color:white; box-shadow:0 2px 6px rgba(27,79,114,.22); }
.btn-primary:hover  { background:var(--brand-dark); transform:translateY(-1px); box-shadow:var(--sh-brand); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-secondary { background:var(--surface); color:var(--brand); border:1.5px solid var(--brand); }
.btn-secondary:hover { background:var(--brand-pale); transform:translateY(-1px); }

.btn-ghost { background:transparent; color:var(--text-mid); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--bg); border-color:var(--border-mid); }

.btn-danger { background:var(--danger-pale); color:var(--danger); border:1px solid rgba(229,57,53,.2); }
.btn-danger:hover { background:var(--danger); color:white; }

.btn-success { background:var(--success); color:white; }
.btn-success:hover { background:var(--success-dark); transform:translateY(-1px); }

.btn-accent { background:var(--accent); color:white; box-shadow:0 2px 6px rgba(230,126,34,.22); }
.btn-accent:hover { background:var(--accent-dark); transform:translateY(-1px); box-shadow:var(--sh-accent); }

.btn-warning { background:var(--warning-pale); color:var(--warning); border:1px solid rgba(243,156,18,.25); }
.btn-warning:hover { background:var(--warning); color:white; }

.btn.is-loading { position:relative; color:transparent !important; pointer-events:none; }
.btn.is-loading::after {
  content:''; position:absolute; width:16px; height:16px;
  border:2px solid rgba(255,255,255,.35); border-top-color:white;
  border-radius:50%; animation:spin .6s linear infinite;
}

/* ── BADGES ──────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:.2rem;
  padding:.1875rem .5rem; border-radius:20px;
  font-size:.6875rem; font-weight:700; letter-spacing:.025em;
}
.badge::before { content:'●'; font-size:.4375rem; }
.badge-active   { background:var(--success-pale); color:var(--success); }
.badge-pending  { background:var(--warning-pale); color:var(--warning); }
.badge-inactive, .badge-canceled { background:rgba(255,255,255,.08); color:var(--text-muted); }
body.light .badge-inactive, body.light .badge-canceled { background:#f1f3f6; }
.badge-danger   { background:var(--danger-pale);  color:var(--danger); }
.badge-info     { background:var(--info-pale);    color:var(--info); }
.badge-brand    { background:var(--brand-pale);   color:var(--brand); }
.badge-accent   { background:var(--accent-pale);  color:var(--accent-dark); }
.badge-purple   { background:var(--purple-pale);  color:var(--purple); }

/* ── TABS ────────────────────────────────────────────────────── */
.tabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:1.5rem; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab-btn {
  padding:.625rem 1rem; border:none; background:transparent; cursor:pointer;
  color:var(--text-muted); font-weight:600; font-size:.875rem;
  border-bottom:2px solid transparent; margin-bottom:-2px;
  white-space:nowrap; transition:var(--tr); display:flex; align-items:center; gap:.375rem;
}
.tab-btn:hover { color:var(--text-mid); }
.tab-btn.active { color:var(--brand); border-bottom-color:var(--brand); }
.tab-panel { display:none; }
.tab-panel.active { display:block; animation:fadeIn .3s ease both; }

/* ── FORMS ───────────────────────────────────────────────────── */
.form-group  { margin-bottom:1rem; }
.form-label  { display:block; font-size:.8125rem; font-weight:600; color:var(--text-mid); margin-bottom:.3125rem; }
.form-label .req { color:var(--danger); margin-left:2px; }
.form-control {
  width:100%; padding:.5625rem .875rem;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-size:.875rem; color:var(--text); background:var(--surface); transition:var(--tr);
}
.form-control:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(27,79,114,.1); }
.form-control::placeholder { color:var(--text-faint); }
.form-control:disabled { background:var(--bg); cursor:not-allowed; opacity:.7; }
.form-hint  { font-size:.75rem; color:var(--text-muted); margin-top:.25rem; }
.form-error { font-size:.75rem; color:var(--danger); margin-top:.25rem; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:80px; }

/* ── CONSULTATION BANNER ─────────────────────────────────────── */
.consult-banner {
  background:linear-gradient(135deg,#0F1E3D 0%,#1A3260 50%,#0D2847 100%);
  border:1px solid rgba(58,123,247,.2);
  border-radius:var(--r-lg); padding:1.75rem 2rem;
  margin-bottom:1.625rem; display:flex; align-items:center;
  justify-content:space-between; gap:1.5rem;
  position:relative; overflow:hidden;
}
.consult-banner::before {
  content:''; position:absolute; top:-60px; right:-60px;
  width:220px; height:220px; background:rgba(58,123,247,.06); border-radius:50%;
}
.consult-banner::after {
  content:''; position:absolute; bottom:-80px; right:120px;
  width:180px; height:180px; background:rgba(0,210,255,.04); border-radius:50%;
}
.consult-banner-text { position:relative; z-index:1; }
.consult-banner-label { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.6); margin-bottom:.375rem; }
.consult-banner-title { font-family:var(--ff-d); font-size:1.3125rem; font-weight:700; color:white; margin-bottom:.3125rem; }
.consult-banner-desc  { font-size:.875rem; color:rgba(255,255,255,.68); max-width:440px; }
.consult-banner-actions { display:flex; gap:.625rem; flex-shrink:0; position:relative; z-index:1; flex-wrap:wrap; }
.btn-consult-white { padding:.625rem 1.25rem; background:white; color:var(--brand); border:none; border-radius:var(--r-sm); font-weight:700; font-size:.875rem; cursor:pointer; transition:var(--tr); white-space:nowrap; }
.btn-consult-white:hover { background:var(--brand-pale); transform:translateY(-1px); box-shadow:var(--sh-md); }
.btn-consult-outline { padding:.625rem 1.25rem; background:rgba(255,255,255,.1); color:white; border:1.5px solid rgba(255,255,255,.3); border-radius:var(--r-sm); font-weight:600; font-size:.875rem; cursor:pointer; transition:var(--tr); white-space:nowrap; }
.btn-consult-outline:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5); }

/* ── BILLING TOGGLE ──────────────────────────────────────────── */
.billing-toggle {
  display:flex; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:.3rem; width:fit-content;
  margin:0 auto 1.5rem; gap:.25rem;
}
.billing-opt {
  padding:.4rem .9375rem; border-radius:var(--r-xl); border:none; background:transparent;
  font-size:.8125rem; font-weight:600; color:var(--text-muted); cursor:pointer; transition:var(--tr);
  display:flex; align-items:center; gap:.375rem;
}
.billing-opt.active { background:var(--brand); color:white; box-shadow:0 2px 8px rgba(27,79,114,.25); }
.billing-save { background:var(--success-pale); color:var(--success); font-size:.5625rem; font-weight:700; padding:1px 5px; border-radius:8px; }

/* ── PAYMENT SELECTOR ────────────────────────────────────────── */
.payment-options { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin:1rem 0; }
.payment-option {
  border:2px solid var(--border); border-radius:var(--r); padding:.875rem;
  text-align:center; cursor:pointer; transition:var(--tr); background:var(--surface);
}
.payment-option:hover { border-color:var(--brand-mid); }
.payment-option.selected { border-color:var(--brand); background:var(--brand-xpale); box-shadow:0 0 0 1px var(--brand); }
.payment-option-logo { font-size:1.5rem; margin-bottom:.375rem; display:block; }
.payment-option-name { font-size:.75rem; font-weight:700; color:var(--text-mid); }
.payment-option.selected .payment-option-name { color:var(--brand); }

/* ── SERVICE CARDS ───────────────────────────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.25rem; }
.service-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:1.5rem;
  transition:var(--tr-s); position:relative; overflow:hidden; display:flex; flex-direction:column;
}
.service-card:hover { border-color:var(--brand); box-shadow:var(--sh-md); transform:translateY(-3px); }
.service-card.subscribed { border-color:var(--success); background:linear-gradient(to bottom right,white,var(--success-pale)); }
.service-card-badge { position:absolute; top:.875rem; right:.875rem; }
.service-card-icon { width:48px; height:48px; border-radius:var(--r); background:linear-gradient(135deg,var(--brand-pale),#d8edf8); display:flex; align-items:center; justify-content:center; font-size:1.375rem; margin-bottom:1rem; }
.service-card-name { font-family:var(--ff-d); font-size:1rem; font-weight:700; color:var(--text); margin-bottom:.375rem; }
.service-card-desc { font-size:.8125rem; color:var(--text-muted); line-height:1.5; margin-bottom:.875rem; flex:1; }
.service-card-features { margin-bottom:.875rem; }
.service-feature { display:flex; align-items:center; gap:.375rem; font-size:.75rem; color:var(--text-mid); margin-bottom:.2rem; }
.service-feature::before { content:'✓'; color:var(--success); font-weight:700; font-size:.625rem; flex-shrink:0; }
.service-card-price { display:flex; align-items:baseline; gap:.25rem; margin-bottom:1rem; padding-top:.75rem; border-top:1px solid var(--border); }
.price-val { font-family:var(--ff-d); font-size:1.5rem; font-weight:800; color:var(--brand); letter-spacing:-.03em; }
.price-per { font-size:.8125rem; color:var(--text-muted); }
.price-was { font-size:.875rem; color:var(--text-faint); text-decoration:line-through; margin-left:.25rem; }
.btn-subscribe { width:100%; padding:.625rem; background:var(--brand); color:white; border:none; border-radius:var(--r-sm); font-weight:600; font-size:.875rem; cursor:pointer; transition:var(--tr); }
.btn-subscribe:hover { background:var(--brand-dark); transform:translateY(-1px); box-shadow:var(--sh-brand); }
.btn-subscribe.active { background:var(--success-pale); color:var(--success); cursor:default; transform:none; box-shadow:none; }

/* ── PLANS GRID ──────────────────────────────────────────────── */
.plans-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:1.25rem; }
.plan-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:var(--tr-s); display:flex; flex-direction:column; }
.plan-card:hover { border-color:var(--brand); box-shadow:var(--sh-md); transform:translateY(-3px); }
.plan-card.featured { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.plan-card-top { padding:1.5rem; background:var(--surface-alt); border-bottom:1px solid var(--border); }
.plan-card.featured .plan-card-top { background:linear-gradient(135deg,var(--brand-pale),#d4eaf8); }
.plan-popular-tag { display:inline-block; background:var(--brand); color:white; font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:2px 8px; border-radius:20px; margin-bottom:.625rem; }
.plan-name { font-family:var(--ff-d); font-size:1.125rem; font-weight:700; color:var(--text); }
.plan-tagline { font-size:.8125rem; color:var(--text-muted); margin-top:.25rem; margin-bottom:.875rem; }
.plan-price { font-family:var(--ff-d); font-size:2rem; font-weight:900; color:var(--brand); letter-spacing:-.04em; }
.plan-price-per { font-size:.875rem; color:var(--text-muted); font-weight:400; }
.plan-card-body { padding:1.25rem 1.5rem 1.5rem; flex:1; display:flex; flex-direction:column; }
.plan-features { flex:1; margin-bottom:1.25rem; }
.plan-feature { display:flex; align-items:flex-start; gap:.5rem; font-size:.8125rem; color:var(--text-mid); padding:.3rem 0; border-bottom:1px solid var(--border); }
.plan-feature:last-child { border-bottom:none; }
.plan-feature-check { color:var(--success); font-weight:700; font-size:.75rem; flex-shrink:0; margin-top:2px; }

/* ── SUBSCRIPTION CARDS ──────────────────────────────────────── */
.subs-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:1.25rem; }
.sub-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:var(--tr); }
.sub-card:hover { border-color:var(--border-mid); box-shadow:var(--sh); }
.sub-card-head { padding:1rem 1.25rem; background:var(--surface-alt); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.sub-card-meta { display:flex; align-items:center; gap:.625rem; }
.sub-card-svc-icon { width:36px; height:36px; border-radius:var(--r-sm); background:var(--brand-pale); display:flex; align-items:center; justify-content:center; font-size:1.0625rem; flex-shrink:0; }
.sub-card-name { font-family:var(--ff-d); font-size:.9375rem; font-weight:700; color:var(--text); }
.sub-card-type { font-size:.75rem; color:var(--text-muted); margin-top:1px; }
.sub-card-body { padding:1rem 1.25rem; }
.detail-row { display:flex; justify-content:space-between; align-items:center; padding:.25rem 0; }
.detail-label { font-size:.8125rem; color:var(--text-muted); }
.detail-value { font-size:.8125rem; font-weight:600; color:var(--text); }
.sub-card-foot { padding:.875rem 1.25rem; border-top:1px solid var(--border); background:var(--surface-alt); display:flex; gap:.5rem; }

/* ── ANALYTICS TABS ──────────────────────────────────────────── */
.analytics-tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.analytics-tab {
  display:flex; align-items:center; gap:.375rem; padding:.4375rem .875rem;
  border-radius:var(--r); background:var(--surface); border:1.5px solid var(--border);
  font-size:.8125rem; font-weight:600; color:var(--text-muted);
  cursor:pointer; transition:var(--tr); white-space:nowrap;
}
.analytics-tab:hover { border-color:var(--brand-mid); color:var(--brand); }
.analytics-tab.active { background:var(--brand); color:white; border-color:var(--brand); box-shadow:0 2px 8px rgba(27,79,114,.2); }
.analytics-panel { display:none; animation:fadeIn .3s ease both; }
.analytics-panel.active { display:block; }

/* ── TABLES ──────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:.8125rem; }
.data-table th { padding:.5625rem .875rem; text-align:left; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--surface-alt); border-bottom:2px solid var(--border); white-space:nowrap; }
.data-table td { padding:.625rem .875rem; border-bottom:1px solid var(--border); color:var(--text-mid); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--surface-alt); }
.td-name { font-weight:600; color:var(--text); }
.td-sub  { font-size:.75rem; color:var(--text-muted); margin-top:1px; }
.lead-score { display:inline-flex; align-items:center; gap:.2rem; padding:2px 7px; border-radius:20px; font-size:.6875rem; font-weight:700; }
.lead-score.hot  { background:rgba(248,113,113,.15); color:#F87171; }
body.light .lead-score.hot { background:#fee2e2; color:#dc2626; }
.lead-score.warm { background:var(--warning-pale); color:var(--warning); }
.lead-score.cold { background:var(--info-pale); color:var(--info); }

/* ── PROGRESS BARS ───────────────────────────────────────────── */
.progress-wrap { background:var(--bg); border-radius:var(--r); overflow:hidden; }
.progress-wrap.sm { height:6px; }
.progress-wrap.md { height:10px; }
.progress-wrap.lg { height:14px; }
.progress-bar { height:100%; border-radius:var(--r); background:linear-gradient(90deg,var(--brand),var(--brand-light)); transition:width .6s ease; }
.progress-bar.success { background:linear-gradient(90deg,var(--success),#34d399); }
.progress-bar.warning { background:linear-gradient(90deg,var(--warning),#fbbf24); }

/* ── MIGRATION PHASES ────────────────────────────────────────── */
.migration-phase { display:flex; align-items:center; gap:.875rem; padding:.75rem 0; border-bottom:1px solid var(--border); }
.migration-phase:last-child { border-bottom:none; }
.phase-icon { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9375rem; flex-shrink:0; }
.phase-icon.done     { background:var(--success-pale); color:var(--success); }
.phase-icon.active   { background:var(--brand-pale); color:var(--brand); }
.phase-icon.pending  { background:var(--bg); color:var(--text-faint); }
.phase-info { flex:1; min-width:0; }
.phase-name { font-weight:600; font-size:.875rem; color:var(--text); }
.phase-detail { font-size:.75rem; color:var(--text-muted); margin-top:1px; }

/* ── AUTOMATION RUNS ─────────────────────────────────────────── */
.run-row { display:flex; align-items:center; gap:.75rem; padding:.5625rem 0; border-bottom:1px solid var(--border); }
.run-row:last-child { border-bottom:none; }
.run-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.run-dot.success { background:var(--success); }
.run-dot.failed  { background:var(--danger); }
.run-dot.running { background:var(--warning); animation:pulse 1.5s ease-in-out infinite; }
.run-name  { font-weight:600; font-size:.875rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.run-detail{ font-size:.75rem; color:var(--text-muted); }
.run-time  { font-size:.75rem; color:var(--text-faint); white-space:nowrap; }

/* ── SEO METRICS ─────────────────────────────────────────────── */
.seo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:.875rem; margin-bottom:1.25rem; }
.seo-metric { background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--r); padding:.875rem; text-align:center; }
.seo-val   { font-family:var(--ff-d); font-size:1.5rem; font-weight:700; color:var(--text); letter-spacing:-.02em; }
.seo-label { font-size:.6875rem; color:var(--text-muted); margin-top:.25rem; }
.seo-chg   { font-size:.6875rem; margin-top:.2rem; }
.seo-chg.up   { color:var(--success); }
.seo-chg.down { color:var(--danger); }

/* ── WIZARD ──────────────────────────────────────────────────── */
.wizard-steps { display:flex; align-items:center; overflow-x:auto; scrollbar-width:none; margin-bottom:2rem; padding-bottom:2px; }
.wizard-steps::-webkit-scrollbar { display:none; }
.wizard-step { display:flex; align-items:center; gap:.375rem; flex-shrink:0; }
.wizard-step-circle {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-size:.6875rem; font-weight:700; color:var(--text-muted); transition:var(--tr);
}
.wizard-step.done   .wizard-step-circle { background:var(--success); border-color:var(--success); color:white; }
.wizard-step.active .wizard-step-circle { background:var(--brand); border-color:var(--brand); color:white; }
.wizard-step-label { font-size:.75rem; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.wizard-step.active .wizard-step-label { color:var(--brand); }
.wizard-step.done   .wizard-step-label { color:var(--success); }
.wizard-connector { flex:1; height:2px; background:var(--border); margin:0 .375rem; min-width:20px; transition:background .3s; }
.wizard-connector.done { background:var(--success); }
.wizard-panel { display:none; }
.wizard-panel.active { display:block; animation:fadeIn .3s ease both; }

/* ── MODALS ──────────────────────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:2000; align-items:center; justify-content:center;
  padding:1rem; backdrop-filter:blur(4px);
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:var(--surface); border-radius:var(--r-xl);
  max-width:540px; width:100%; max-height:90vh; overflow-y:auto;
  box-shadow:var(--sh-lg); animation:modalIn .25s cubic-bezier(.34,1.56,.64,1);
}
.modal-box.lg { max-width:680px; }
.modal-box.sm { max-width:400px; }
@keyframes modalIn { from{opacity:0;transform:scale(.94) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.125rem 1.5rem; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--surface); z-index:1;
}
.modal-title  { font-family:var(--ff-d); font-size:1rem; font-weight:700; color:var(--text); }
.modal-close  {
  width:28px; height:28px; border-radius:50%; background:var(--bg);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:.875rem; color:var(--text-muted); cursor:pointer; transition:var(--tr);
}
.modal-close:hover { background:var(--danger-pale); color:var(--danger); border-color:var(--danger); transform:rotate(90deg); }
.modal-body   { padding:1.5rem; }
.modal-footer {
  padding:.875rem 1.5rem; border-top:1px solid var(--border);
  display:flex; gap:.625rem; justify-content:flex-end;
  position:sticky; bottom:0; background:var(--surface);
}

/* ── TOASTS ──────────────────────────────────────────────────── */
#toastRoot { position:fixed; bottom:1.25rem; right:1.25rem; z-index:9999; display:flex; flex-direction:column; gap:.375rem; }
.toast {
  display:flex; align-items:flex-start; gap:.625rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:.75rem .875rem; box-shadow:var(--sh-md);
  min-width:260px; max-width:340px; animation:toastIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes toastIn { from{opacity:0;transform:translateX(20px) scale(.97)} to{opacity:1;transform:translateX(0) scale(1)} }
.toast-icon { font-size:1.0625rem; flex-shrink:0; margin-top:1px; }
.toast-body { flex:1; }
.toast-title { font-weight:600; font-size:.875rem; color:var(--text); }
.toast-msg   { font-size:.8125rem; color:var(--text-muted); margin-top:1px; }
.toast-x { background:none; border:none; color:var(--text-faint); cursor:pointer; padding:0; font-size:.8125rem; }
.toast-x:hover { color:var(--text-mid); }
.toast.success { border-left:3px solid var(--success); }
.toast.error   { border-left:3px solid var(--danger); }
.toast.warning { border-left:3px solid var(--warning); }
.toast.info    { border-left:3px solid var(--brand); }

/* ── EMPTY / LOADING ─────────────────────────────────────────── */
.empty-state { text-align:center; padding:2.5rem 1.5rem; }
.empty-icon  { font-size:2.25rem; margin-bottom:.75rem; opacity:.3; }
.empty-title { font-family:var(--ff-d); font-size:1rem; font-weight:700; color:var(--text); margin-bottom:.375rem; }
.empty-text  { font-size:.875rem; color:var(--text-muted); max-width:360px; margin:0 auto .875rem; line-height:1.5; }
.empty-actions { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.loading-box { display:flex; align-items:center; justify-content:center; padding:3rem; }
.spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--brand); border-radius:50%; animation:spin .75s linear infinite; }
.spinner-sm { width:18px; height:18px; border-width:2px; border-top-color:white; }

/* ── DIVIDERS / UTILS ────────────────────────────────────────── */
.divider { height:1px; background:var(--border); margin:1rem 0; }
.flex    { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-xs { gap:.375rem; } .gap-sm { gap:.625rem; } .gap-md { gap:.875rem; }
.mt-sm { margin-top:.5rem; } .mt-md { margin-top:.875rem; } .mt-lg { margin-top:1.25rem; }
.mb-sm { margin-bottom:.5rem; } .mb-md { margin-bottom:.875rem; } .mb-lg { margin-bottom:1.25rem; }
.text-muted { color:var(--text-muted); }
.text-brand { color:var(--brand); }
.text-success { color:var(--success); }
.text-danger  { color:var(--danger); }
.fw-600 { font-weight:600; } .fw-700 { font-weight:700; }
.fs-sm  { font-size:.8125rem; } .fs-xs { font-size:.75rem; }

/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes spin    { to { transform:rotate(360deg); } }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes fadeIn  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation:fadeIn .3s ease both; }

/* ── BOTTOM NAV (mobile portal navigation) ───────────────────── */
/* This is the PRIMARY nav on phone widths (≤600px) — the hamburger/
   sidebar-drawer is hidden there so there's exactly one nav surface,
   the way native apps do it. Account-only items (Billing, Sign out)
   live in the avatar menu instead of being crammed in here.
   NOTE: this must stay defined BEFORE the RESPONSIVE section below —
   the 600px breakpoint's `display:block` override only wins the
   cascade if the unconditional `display:none` base rule comes first. */
.portal-bottom-nav {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:500;
  background:rgba(11,15,26,.86); border-top:1px solid var(--border);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 -4px 24px rgba(0,0,0,.18);
  padding-bottom:env(safe-area-inset-bottom,0);
}
body.light .portal-bottom-nav { background:rgba(255,255,255,.86); }
.portal-bottom-nav-inner {
  display:flex; align-items:stretch; justify-content:space-around;
  max-width:560px; margin:0 auto;
  height:60px;
}
.pbn-link {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  font-size:.625rem; font-weight:600; letter-spacing:.01em;
  color:var(--text-faint); text-decoration:none; transition:color .15s;
  border:none; background:transparent; cursor:pointer; padding:.25rem;
  -webkit-tap-highlight-color:transparent; position:relative;
}
.pbn-link .pbn-icon {
  font-size:1.25rem; line-height:1; width:40px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px; transition:background .2s;
}
.pbn-link.active    { color:var(--brand); font-weight:700; }
.pbn-link.active .pbn-icon { background:var(--brand-pale); }
.pbn-link:active    .pbn-icon { transform:scale(.88); transition:transform .1s; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1280px) { .stats-grid { grid-template-columns:repeat(2,1fr); } }

@media(max-width:1024px) {
  .portal-sidebar { transform:translateX(-100%); }
  .portal-sidebar.open { transform:translateX(0); }
  .portal-main { margin-left:0; }
  .hamburger-btn { display:flex; }
  .navbar-center { display:none; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}

/* ── Profile two-column layout ───────────────────────────────── */
.profile-2col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.375rem;
  align-items:start;
}

/* ── 768px: tablet ───────────────────────────────────────────── */
@media(max-width:768px) {
  .profile-2col { grid-template-columns:1fr; }
  :root { --nav-h:56px; }

  /* ── Navbar ── */
  .navbar-inner       { padding:0 1rem; }
  .btn-nav            { display:none; }
  .brand-logo         { font-size:.9375rem; gap:.375rem; }
  .brand-logo-icon    { width:28px; height:28px; }
  .hamburger-btn      { width:40px; height:40px; font-size:1rem; }
  .nav-avatar-name    { display:none; }
  .nav-avatar-btn     { padding:.25rem .375rem; gap:.375rem; }
  .nav-avatar-circle  { width:30px; height:30px; }

  /* ── Layout ── */
  .portal-main { padding:1.25rem 1rem 1.5rem; }

  /* ── Page header ── */
  .page-title         { font-size:1.25rem; }
  .page-subtitle      { font-size:.875rem; }

  /* ── Cards ── */
  .card-title         { font-size:.9375rem; }
  .card-body          { padding:1.125rem; }
  .card-header        { padding:.875rem 1.125rem; }
  .card-footer        { padding:.75rem 1.125rem; }

  /* ── Sidebar ── */
  .sidebar-name       { font-size:.9375rem; }
  .sidebar-email      { font-size:.75rem; }
  .sidebar-link       { font-size:.9375rem; padding:.625rem .875rem; min-height:48px; }

  /* ── Forms ── */
  .form-label         { font-size:.9375rem; }
  .form-control       { font-size:1rem; padding:.6875rem .875rem; }
  .form-hint, .form-error { font-size:.875rem; }
  .form-row, .form-row-3 { grid-template-columns:1fr; }
  .payment-options    { grid-template-columns:1fr; }

  /* ── Stat cards — 2×2 grid, compact card layout ── */
  .stats-grid         { grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1.25rem; }
  .stat-card          {
    padding:.875rem;
    display:grid;
    grid-template-columns:36px 1fr;
    grid-template-rows:auto auto;
    column-gap:.625rem;
    row-gap:.125rem;
    align-items:center;
  }
  .stat-card::after   { display:none; }
  .stat-icon          {
    grid-column:1; grid-row:1/3;
    width:36px; height:36px; font-size:1rem;
    margin-bottom:0; align-self:center;
  }
  .stat-label         { grid-column:2; grid-row:1; font-size:.625rem; margin-bottom:0; }
  .stat-value         { grid-column:2; grid-row:2; font-size:1.375rem; letter-spacing:-.025em; line-height:1.1; }
  .stat-value.sm      { font-size:1rem; }
  .stat-change        { display:none; }

  /* ── Buttons ── */
  .btn                { min-height:44px; }
  .btn-sm             { min-height:40px; padding:.5rem .875rem; font-size:.875rem; }
  .btn-signout        { min-height:44px; }

  /* ── Grids ── */
  .services-grid, .plans-grid, .subs-grid { grid-template-columns:1fr; }
  .seo-grid           { grid-template-columns:repeat(2,1fr); }

  /* ── Consultation banner ── */
  .consult-banner     { flex-direction:column; text-align:center; padding:1.25rem 1rem; gap:.875rem; overflow:hidden; }
  .consult-banner-text { min-width:0; }
  .consult-banner-label { font-size:.6875rem; }
  .consult-banner-title { font-size:1.0625rem; margin-bottom:.25rem; }
  .consult-banner-desc  { font-size:.875rem; max-width:100%; }
  .consult-banner-actions { justify-content:center; gap:.5rem; flex-wrap:wrap; }
  .btn-consult-white,
  .btn-consult-outline { padding:.5625rem 1.125rem; font-size:.875rem; }

  /* ── Tabs ── */
  .tabs               { overflow-x:auto; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .tab-btn            { font-size:.875rem; padding:.625rem .875rem; min-height:44px; white-space:nowrap; flex-shrink:0; }

  /* ── Analytics ── */
  .billing-toggle     { flex-wrap:wrap; justify-content:center; }
  .billing-opt        { font-size:.875rem; }
  .analytics-tabs     { gap:.375rem; }
  .analytics-tab      { font-size:.875rem; }

  /* ── Badges ── */
  .badge              { font-size:.75rem; }

  /* ── Tables ── */
  .data-table         { font-size:.875rem; }
  .data-table th      { font-size:.75rem; }

  /* ── Toasts ── */
  #toastRoot { left:.75rem; right:.75rem; bottom:1rem; }
  .toast { min-width:unset; max-width:100%; }

  /* ── Modal — slide up from bottom ── */
  .modal-overlay      { align-items:flex-end; padding:0; }
  .modal-box          {
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    max-width:100%; width:100%; max-height:92vh;
    animation:modalSlideUp .28s cubic-bezier(.34,1.26,.64,1);
  }
  @keyframes modalSlideUp {
    from { opacity:0; transform:translateY(48px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .modal-header, .modal-footer { padding:.875rem 1.125rem; }
  .modal-body         { padding:1.125rem; }
}

/* ── 600px: phone ────────────────────────────────────────────── */
@media(max-width:600px) {
  /* ── Bottom nav becomes the one primary nav surface — the
     hamburger/sidebar-drawer is redundant with it, so it's hidden.
     Account-only links (Billing, Sign out) stay reachable from the
     avatar menu in the top bar. ── */
  .portal-bottom-nav  { display:block; }
  .hamburger-btn      { display:none; }

  /* ── Navbar: a little tighter now the hamburger is gone ── */
  .navbar-inner       { padding:0 .875rem; }

  /* ── Main: add bottom padding for nav ── */
  .portal-main        { padding-bottom:5.5rem; }
  #toastRoot          { bottom:5rem; }

  /* ── Stat cards — full-width glanceable rows instead of a 2-up
     grid, the trend line comes back since there's room for it ── */
  .stats-grid         { grid-template-columns:1fr; gap:.5rem; margin-bottom:1.125rem; }
  .stat-card          {
    padding:.75rem .875rem;
    display:grid;
    grid-template-columns:38px 1fr auto;
    grid-template-rows:auto auto;
    column-gap:.75rem; row-gap:0;
    align-items:center;
  }
  .stat-icon          { grid-column:1; grid-row:1/3; width:38px; height:38px; }
  .stat-label          { grid-column:2; grid-row:1; }
  .stat-value         { grid-column:2; grid-row:2; font-size:1.25rem; }
  .stat-change        { display:block; grid-column:3; grid-row:1/3; margin-top:0; text-align:right; }

  /* ── Cards — a touch rounder for a more native feel ── */
  .card, .stat-card { border-radius:var(--r-xl); }
}

/* ── 480px: small phone ──────────────────────────────────────── */
@media(max-width:480px) {
  /* ── Layout ── */
  .portal-main        { padding:1rem .875rem 5.5rem; }

  /* ── Page title ── */
  .page-title         { font-size:1.125rem; }
  .page-header        { flex-direction:column; gap:.5rem; align-items:flex-start; }
  .page-actions       { width:100%; }
  .page-actions .btn  { width:100%; justify-content:center; }

  /* ── Stat cards ── */
  .stat-card          { padding:.75rem; }
  .stat-icon          { width:32px; height:32px; font-size:.875rem; }
  .stat-value         { font-size:1.25rem; }
  .stat-value.sm      { font-size:.9375rem; }
  .stat-label         { font-size:.5625rem; }

  /* ── Cards ── */
  .card-header        { flex-direction:column; align-items:flex-start; gap:.5rem; }
  .card-body          { padding:.875rem; }
  .card-footer        { padding:.625rem .875rem; flex-direction:column; gap:.5rem; }
  .card-footer .btn   { width:100%; justify-content:center; }

  /* ── Tabs ── */
  .tab-btn            { font-size:.8125rem; padding:.5rem .75rem; }

  /* ── Wizard ── */
  .wizard-step-label  { font-size:.625rem; }
  .wizard-connector   { min-width:10px; }

  /* ── Sub-cards ── */
  .sub-card-foot      { flex-direction:column; }
  .sub-card-foot .btn { width:100%; }

  /* ── Modal ── */
  .modal-header, .modal-footer { padding:.75rem .875rem; }
  .modal-body         { padding:.875rem; }
}

/* ── THEME TOGGLE ────────────────────────────────────────────── */
.theme-toggle {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:.9375rem; cursor:pointer; transition:var(--tr);
  flex-shrink:0;
}
.theme-toggle:hover { background:rgba(255,255,255,.12); border-color:var(--brand); }
body.light .theme-toggle { background:rgba(0,0,0,.04); border-color:var(--border); }
body.light .theme-toggle:hover { background:var(--brand-pale); border-color:var(--brand); }