/* ============================================
   UNIFIED LAYOUT SYSTEM - SaaS Premium 2026
   Claude-like centered, dense, cohesive design
   ============================================ */

/* ── 1. CENTERED CONTAINER ── */
.view-container {
  width: 100%;
  max-width: 1152px; /* ~6xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 768px) {
  .view-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── 2. SURFACE PANEL COMPONENT ── */
.surface-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
}

.surface-panel--flush {
  padding: 0;
}

.surface-panel--compact {
  padding: 16px;
}

.surface-panel + .surface-panel {
  margin-top: 16px;
}

/* ── 3. STANDARDIZED PAGE HEADER ── */
.unified-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 0;
  flex-wrap: wrap;
}

.unified-page-header__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.unified-page-header__title {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.unified-page-header__subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.unified-page-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── 4. DENSITY OVERRIDES ── */

/* Main content: tighter padding */
.main-content {
  padding: 20px !important;
}

@media (max-width: 768px) {
  .main-content {
    padding: 12px !important;
  }
}

/* Reduce gaps globally */
.view .performance-cards-grid,
.view .dashboard-kpi-grid,
.view .stats-grid,
.view .billing-plans-grid,
.view .senders-grid,
.view .senders-analytics-grid,
.view .tpl-grid,
.view .fb-automations-grid,
.view .saved-forms-grid,
.view .integrations-layout,
.view .integrations-row-1 {
  gap: 12px !important;
}

/* Section spacing */
.view .section,
.view .billing-page-content > section,
.view .settings-compact-panel {
  margin-bottom: 16px;
}

/* ── 5. COLOR SYSTEM: Claude-like preset ── */

/* Claude-like Light */
[data-theme-preset="claude"],
:root:not([data-theme-preset]) {
  --bg-primary: #F7F7F5;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F0F0EE;
  --bg-hover: #E8E8E4;

  --text-primary: #1A1A18;
  --text-secondary: #6B6B64;
  --text-tertiary: #9A9A90;
  --text-muted: #C4C4BC;

  --border-color: rgba(0, 0, 0, 0.08);
  --border-subtle: rgba(0, 0, 0, 0.04);
}

/* Claude-like Dark */
[data-theme-preset="claude"][data-theme="dark"],
:root:not([data-theme-preset])[data-theme="dark"] {
  --bg-primary: #262624;
  --bg-surface: #30302E;
  --bg-elevated: #3a3a38;
  --bg-hover: #444442;

  --text-primary: #ECECEC;
  --text-secondary: #A8A8A4;
  --text-tertiary: #78786E;
  --text-muted: #58584E;

  --border-color: rgba(255, 255, 255, 0.07);
  --border-subtle: rgba(255, 255, 255, 0.04);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 12px 36px rgba(0, 0, 0, 0.5);

  --glass-bg: rgba(48, 48, 46, 0.8);
  --glass-border: rgba(255, 255, 255, 0.06);
}

/* Global dark mode: softer shadows everywhere */
[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* ── 6. SIDEBAR DENSITY ── */
.sidebar .nav-item {
  padding: 6px 10px !important;
  gap: 8px !important;
  min-height: 30px;
  font-size: 13px;
}

.sidebar .nav-item .material-icons {
  font-size: 18px !important;
}

.sidebar .nav-group-header {
  padding: 4px 10px !important;
  margin-top: 4px;
}

.sidebar .nav-group-label {
  font-size: 10px !important;
  letter-spacing: 0.06em;
}

.sidebar .nav-group-items {
  padding: 2px 0 !important;
}

/* Sidebar hover: subtle */
.sidebar .nav-item:hover {
  background: var(--bg-hover) !important;
  transform: none !important;
}

/* ── 7. TYPOGRAPHY HIERARCHY ── */
/* Page title: already handled by unified-page-header */

/* Section titles inside panels */
.surface-panel h2,
.surface-panel h3,
.settings-section-title,
.section-header h2 {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-bottom: 12px;
  color: var(--text-primary);
}

/* Card values: controlled */
.performance-card-value,
.stat-value-modern,
.followup-stat-value {
  font-size: clamp(18px, 2vw, 26px) !important;
}

/* ── 8. GRIDS ── */

/* Billing: responsive 1 → 2 → 4 */
.billing-plans-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

@media (min-width: 640px) {
  .billing-plans-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1100px) {
  .billing-plans-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Dashboard KPI: max 4 cols, compact */
.dashboard-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}

@media (min-width: 900px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Dashboard main content: max 2 columns */
.dashboard-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 900px) {
  .dashboard-main-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── 9. CARDS → SECTIONS MIGRATION ── */

/* Performance cards: tighter */
.performance-card {
  padding: 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border-subtle) !important;
  background: var(--bg-surface) !important;
  box-shadow: none !important;
}

/* Billing cards: compact */
.billing-plan-card {
  padding: 20px !important;
  border-radius: 14px !important;
}

/* Remove excessive card shadows globally */
.card,
.section,
.campaign-card,
.chart-card,
.stat-card,
.stat-card-modern,
.followup-stat-card,
.sender-card,
.tpl-card,
.fb-card,
.fb-automation-card,
.automation-card-premium,
.cleaner-card,
.cleaner-pane,
.billing-card,
.affiliate-card,
.saved-form-card,
.settings-compact-panel {
  box-shadow: none !important;
  border: 1px solid var(--border-subtle) !important;
}

/* ── 10. TABS STANDARDIZATION ── */
.tabs-nav,
.settings-tabs-compact .tabs-nav,
.team-tabs .tab-button-group {
  border-bottom: 1px solid var(--border-subtle);
  gap: 0;
}

/* ── 11. FORM INPUTS ── */
.input-field,
.premium-input,
.tool-select {
  border-radius: 8px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-elevated) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}

.input-field:focus,
.premium-input:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 2px var(--accent-subtle) !important;
}

/* ── 12. VIEW ACTIVE: flex column ── */
.view.active {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* ── 13. CENTERED LAYOUT: All direct children of views ── */
.view > * {
  width: 100%;
  max-width: 1152px;
  box-sizing: border-box;
}

/* Views that contain a single full-width container (templates, editor, etc.) */
.view > .tpl-page,
.view > .tpl-editor-page,
.view > .cleaner-shell,
.view > #followup-builder-container,
.view > #automation-builder-container {
  max-width: 1152px;
  width: 100%;
}

/* ── 14. BUTTON REFINEMENT ── */
.btn {
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 7px 14px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

.btn:hover {
  transform: none !important;
}

.btn-primary {
  box-shadow: none !important;
}

.btn-primary:hover {
  filter: brightness(1.08);
}

/* ── 15. SCROLLBAR ── */
.main-content::-webkit-scrollbar {
  width: 6px;
}

.main-content::-webkit-scrollbar-track {
  background: transparent;
}

.main-content::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.2);
  border-radius: 3px;
}

.main-content::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.35);
}

/* ── 16. MOBILE WEB APP (≤1023px) ── */
@media (max-width: 1023px) {
  /* Centered container adapts */
  .view > * {
    max-width: 100% !important;
  }

  /* Stack everything vertical */
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .billing-plans-grid {
    grid-template-columns: 1fr !important;
  }

  .dashboard-operational-grid,
  .dashboard-insights-row {
    grid-template-columns: 1fr !important;
  }

  /* Page headers: stack on mobile */
  .top-bar,
  .page-header,
  .contacts-header,
  .unified-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Welcome / Login page: centered, tight */
  .login-popup,
  .welcome-container,
  .auth-container {
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 20px 16px !important;
    width: 100% !important;
  }

  /* Cards: reduced padding on mobile */
  .performance-card,
  .billing-plan-card,
  .surface-panel {
    padding: 12px !important;
  }

  .billing-plan-card {
    padding: 16px !important;
  }

  /* Stats filter: horizontal scroll */
  .dashboard-stats-filter,
  .team-date-filter,
  .campaign-compact-filter {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-stats-filter::-webkit-scrollbar,
  .team-date-filter::-webkit-scrollbar,
  .campaign-compact-filter::-webkit-scrollbar {
    display: none;
  }

  /* Typography: tighter on mobile */
  .top-bar h1,
  .contacts-title,
  .view-title,
  .cleaner-title-row h1 {
    font-size: 1.25rem !important;
  }
}

@media (max-width: 640px) {
  /* Very small screens: single column KPIs */
  .dashboard-kpi-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tabs: scroll horizontally */
  .tabs-nav,
  .settings-tabs-compact .tabs-nav {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    gap: 0 !important;
  }

  .tab-button {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ── 17. EXTENSION POPUP CONTEXT ── */
/* When opened as extension popup (narrow viewport) */
@media (max-width: 500px) {
  .view > * {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .main-content {
    padding: 10px !important;
  }

  .sidebar {
    width: 0 !important;
    display: none !important;
  }

  .top-bar h1 {
    font-size: 1.1rem !important;
  }

  .performance-card {
    padding: 10px !important;
  }

  .btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}

/* ── 18. GLOBAL APP BACKGROUND ── */
body {
  background: var(--bg-primary) !important;
  color: var(--text-primary);
}

.main-content {
  background: var(--bg-primary) !important;
}

/* ── 19. MINI PANELS (dashboard) → Surface style ── */
.mini-panel {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 16px !important;
}

.mini-panel-header {
  margin-bottom: 12px;
}

.mini-panel-title {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ── 20. DASHBOARD OPERATIONAL GRID ── */
.dashboard-operational-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

@media (min-width: 900px) {
  .dashboard-operational-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── 21. DASHBOARD INSIGHTS ROW ── */
.dashboard-insights-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

@media (max-width: 768px) {
  .dashboard-insights-row {
    grid-template-columns: 1fr !important;
  }
}

.dashboard-insight-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  box-shadow: none !important;
}

/* ── 22. BILLING PAGE REFINEMENT ── */
.billing-page-content {
  width: 100%;
}

.billing-current-plan-banner {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.billing-period-toggle {
  margin: 16px 0 !important;
}

/* ── 23. SETTINGS REFINEMENT ── */
.settings-compact-panel {
  background: var(--bg-surface) !important;
  border-radius: 14px !important;
  padding: 20px !important;
}

/* ── 24. TEAM VIEW ── */
.team-content,
#team-view > .view-header,
#team-view > .team-tabs,
#team-view > .team-content-area {
  max-width: 1152px;
  width: 100%;
}

/* ── 25. AFFILIATION VIEW ── */
.affiliation-content {
  max-width: 1152px;
  width: 100%;
}

/* ── 26. LOGIN / WELCOME PAGE ── */
.login-overlay,
.login-popup {
  background: var(--bg-primary) !important;
}

.login-popup {
  max-width: 440px !important;
  border-radius: 16px !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 32px !important;
}

/* ── 27. ACCENT CONSISTENCY ── */
/* Ensure accent works across all presets including Claude */
[data-theme-preset="claude"] {
  --accent-color: #6366f1;
  --accent-hover: #4f46e5;
  --accent-light: #818cf8;
  --accent-subtle: rgba(99, 102, 241, 0.08);
  --accent-glow: rgba(99, 102, 241, 0.25);
  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

[data-theme-preset="claude"][data-theme="dark"] {
  --accent-color: #818cf8;
  --accent-hover: #a5b4fc;
  --accent-light: #6366f1;
  --accent-subtle: rgba(99, 102, 241, 0.15);
  --accent-glow: rgba(99, 102, 241, 0.4);
  --accent-gradient: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #c084fc 100%);
}

/* ============================================
   DASHBOARD REDESIGN - Premium SaaS 2026
   ============================================ */

/* Row 2: Plan + Recap (2 cols) */
.dash-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .dash-row-2 { grid-template-columns: 1fr; }
}

/* Plan panel */
.dash-plan-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dash-plan-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dash-plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 6px;
}

.dash-plan-remaining {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.dash-plan-remaining-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.dash-plan-remaining-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.dash-plan-upgrade-btn {
  flex-shrink: 0;
}

.dash-quota-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Section heads */
.dash-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.dash-section-head .material-icons {
  font-size: 16px;
  color: var(--text-tertiary);
}

.dash-section-head .mini-panel-link {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent-color);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.dash-section-head .mini-panel-link:hover {
  text-decoration: underline;
}

/* Row 4: Quick Actions + Activity (2 cols) */
.dash-row-4 {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .dash-row-4 { grid-template-columns: 1fr; }
}

/* Quick Actions grid */
.dash-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.dash-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dash-action-btn .material-icons {
  font-size: 16px;
  color: var(--accent-color);
}

.dash-action-btn:hover {
  background: var(--accent-subtle);
  border-color: var(--accent-color);
  color: var(--text-primary);
}

/* Insight cards refinement */
.dashboard-insight-card .dashboard-insight-kicker {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.dashboard-insight-card .dashboard-insight-kicker .material-icons {
  font-size: 14px;
}

.dashboard-insight-card .dashboard-insight-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ============================================
   AFFILIATION PAGE REDESIGN
   ============================================ */

/* Affiliate shell: single column, centered */
.affiliate-shell-v2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Hero referral card */
.affiliate-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px !important;
  background: linear-gradient(135deg, var(--accent-color) 0%, #8b5cf6 100%) !important;
  border: none !important;
  color: #fff;
}

.affiliate-hero-info h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #fff;
}

.affiliate-hero-info p {
  font-size: 13px;
  opacity: 0.85;
  margin: 0;
  color: rgba(255,255,255,0.9);
}

.affiliate-hero-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  padding: 8px 12px;
  max-width: 400px;
}

.affiliate-hero-link input {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 13px;
  flex: 1;
  padding: 0 !important;
  min-width: 0;
}

.affiliate-hero-link input::placeholder {
  color: rgba(255,255,255,0.5);
}

.affiliate-hero-link .btn {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  flex-shrink: 0;
}

.affiliate-hero-link .btn:hover {
  background: rgba(255,255,255,0.3) !important;
}

@media (max-width: 768px) {
  .affiliate-hero {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Reward tiers */
.affiliate-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .affiliate-tiers { grid-template-columns: 1fr; }
}

.affiliate-tier-card {
  text-align: center;
  padding: 20px 16px !important;
}

.affiliate-tier-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.affiliate-tier-icon .material-icons {
  font-size: 20px;
  color: #fff;
}

.affiliate-tier-icon--email { background: linear-gradient(135deg, #10b981, #059669); }
.affiliate-tier-icon--plan { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.affiliate-tier-icon--cash { background: linear-gradient(135deg, #f59e0b, #d97706); }

.affiliate-tier-card h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text-primary);
}

.affiliate-tier-card p {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 8px;
  line-height: 1.4;
}

.affiliate-tier-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-color);
}

.affiliate-tier-value small {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
}

/* KPI row */
.affiliate-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .affiliate-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

.affiliate-kpi-item {
  text-align: center;
  padding: 14px !important;
}

.affiliate-kpi-item strong {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.affiliate-kpi-item span {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Invite management */
.affiliate-invite-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 768px) {
  .affiliate-invite-section { grid-template-columns: 1fr; }
}

.affiliate-invite-input-row {
  display: flex;
  gap: 8px;
}

.affiliate-invite-input-row input {
  flex: 1;
}

/* ============================================
   SETTINGS PAGE REDESIGN
   ============================================ */

/* Settings container: tighter */
.settings-tabs-compact {
  max-width: 860px !important;
  margin: 0 auto !important;
}

/* Tabs: pill style */
.settings-tabs-compact .tabs-nav {
  display: flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: var(--bg-elevated) !important;
  border-radius: 10px !important;
  border-bottom: none !important;
  margin-bottom: 20px !important;
}

.settings-tabs-compact .tab-button {
  flex: 1;
  justify-content: center;
  border-radius: 8px !important;
  font-size: 12px !important;
  padding: 6px 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  transition: all 0.15s ease;
}

.settings-tabs-compact .tab-button.active {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

.settings-tabs-compact .tab-button:hover:not(.active) {
  color: var(--text-primary) !important;
}

.settings-tabs-compact .tab-btn-icon {
  font-size: 15px !important;
}

/* Profile header in settings */
.settings-notion-shell {
  max-width: 100% !important;
  gap: 12px 16px !important;
}

.settings-notion-header {
  padding: 16px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
}

.settings-notion-section {
  padding: 16px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
}

.settings-notion-danger {
  border-color: rgba(239, 68, 68, 0.15) !important;
  background: rgba(239, 68, 68, 0.03) !important;
}

/* ============================================
   SIDEBAR REFINEMENTS
   ============================================ */

/* 1. Divider under menu-top-controls */
.sidebar.sidebar-v2 .menu-top-controls {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding-bottom: 6px !important;
  margin-bottom: 2px;
}

/* 2. Collapsed: smaller apps btn + no extra padding on menu-top-controls popup */
.sidebar.collapsed .sidebar-apps-btn {
  padding: 6px !important;
}
.sidebar.collapsed .sidebar-apps-btn .material-icons {
  font-size: 18px !important;
}
.sidebar.collapsed .sidebar-apps-wrapper {
  padding: 6px !important;
}
.sidebar.collapsed .menu-top-controls.show {
  padding: 6px !important;
  gap: 4px !important;
}
.sidebar.collapsed .menu-top-controls.show .lang-globe-btn,
.sidebar.collapsed .menu-top-controls.show .notification-btn,
.sidebar.collapsed .menu-top-controls.show .theme-toggle-compact,
.sidebar.collapsed .menu-top-controls.show .theme-preset-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 4px !important;
}

/* 3. Account switcher: prevent horizontal overflow but allow menu popup */
#account-switcher-container {
  max-width: 100% !important;
}
.account-switcher-combined {
  max-width: 100% !important;
}
.account-switcher-trigger {
  overflow: hidden !important;
}

/* 3b. Collapsed: center account-switcher-trigger */
.sidebar.collapsed #account-switcher-container {
  display: flex !important;
  justify-content: center !important;
}
.sidebar.collapsed .account-switcher-trigger {
  margin: 0 auto !important;
}

/* ============================================
   SIDEBAR VIEW TOGGLE (Grouped ↔ Flat)
   ============================================ */

/* Dashboard row: item + view toggle on same line */
.nav-row-dash {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
.nav-row-dash .nav-item {
  flex: 1;
  margin-bottom: 0 !important;
}

/* View toggle pill */
.sidebar-view-toggle-inline {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.sidebar-view-toggle-inline:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  transform: scale(1.08);
}
.sidebar-view-toggle-inline .material-icons {
  font-size: 14px;
  color: var(--text-secondary);
}
.sidebar-view-toggle-inline:hover .material-icons {
  color: #fff;
}
.sidebar.collapsed .sidebar-view-toggle-inline,
.sidebar.collapsed .nav-row-dash .sidebar-view-toggle-inline {
  display: none !important;
}

/* ── GROUPED MODE: ultra-compact to avoid scrollbar ── */
.nav-menu:not(.nav-flat) .nav-group {
  margin-bottom: 0 !important;
}
.nav-menu:not(.nav-flat) .nav-group-header {
  min-height: 22px !important;
  padding: 2px 8px !important;
  margin-bottom: 0 !important;
}
.nav-menu:not(.nav-flat) .nav-group-label {
  font-size: 9px !important;
}
.nav-menu:not(.nav-flat) .nav-group-chevron {
  font-size: 14px !important;
}
.nav-menu:not(.nav-flat) .nav-group-items {
  padding-left: 2px !important;
  gap: 0 !important;
}
.nav-menu:not(.nav-flat) .nav-item {
  min-height: 26px !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  gap: 7px !important;
}
.nav-menu:not(.nav-flat) .nav-item .material-icons {
  font-size: 16px !important;
}
.nav-menu:not(.nav-flat) .nav-separator {
  margin: 2px 0 !important;
}

/* Flat/Grouped mode base handled by .nav-menu.nav-flat in style.css */

/* ============================================
   MOBILE SIDEBAR FIXES
   ============================================ */

/* Fix transparent sidebar on mobile */
@media (max-width: 1023px) {
  .sidebar.sidebar-v2 {
    background: var(--bg-surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Hide sidebar on login/welcome page */
body.login-active .sidebar,
body.login-active .sidebar-v2,
body.modal-open .sidebar,
body.modal-open .sidebar-v2 {
  display: none !important;
}
body.login-active .mobile-bottom-nav,
body.modal-open .mobile-bottom-nav {
  display: none !important;
}
body.login-active .main-content,
body.modal-open .main-content {
  margin-left: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================
   WELCOME / LOGIN — SCROLL FIX + MOBILE
   ============================================ */

/* Allow scroll on welcome modal on ALL screens */
#welcome-modal-container {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

/* ============================================
   MOBILE SIDEBAR: solid background (no transparency)
   ============================================ */
@media (max-width: 1023px) {
  .mobile-bottom-nav {
    background: var(--bg-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ============================================
   KPI GRID REDESIGN + NUMBER ANIMATION
   ============================================ */

/* Tighter KPI cards */
.dashboard-kpi-grid {
  gap: 10px !important;
}
.performance-card {
  padding: 12px 14px !important;
  border-radius: 10px !important;
}
.performance-card-header {
  margin-bottom: 6px !important;
}
.performance-card-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
}
.performance-card-icon .material-icons {
  font-size: 16px !important;
}
.performance-card-value {
  font-size: clamp(16px, 1.8vw, 22px) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
.performance-card-label {
  font-size: 11px !important;
  margin-top: 2px !important;
}
.performance-card-badge {
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
}
.performance-card-footer {
  margin-top: 8px !important;
  padding-top: 8px !important;
}
.kpi-micro-chart {
  height: 24px !important;
  margin-top: 4px !important;
}

/* Number animation: subtle count-up effect */
@keyframes kpiCountUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.performance-card-value {
  animation: kpiCountUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.performance-card:nth-child(2) .performance-card-value { animation-delay: 0.06s; }
.performance-card:nth-child(3) .performance-card-value { animation-delay: 0.12s; }
.performance-card:nth-child(4) .performance-card-value { animation-delay: 0.18s; }

/* ============================================
   SETTINGS COMPACT + SMALLER PLAN CARD
   ============================================ */

.settings-notion-section {
  padding: 14px !important;
  border-radius: 10px !important;
}
.settings-notion-section + .settings-notion-section {
  margin-top: 10px;
}
.plan-info-card {
  padding: 14px !important;
  max-width: 180px !important;
}
.plan-info-card .plan-badge {
  font-size: 11px !important;
  padding: 2px 8px !important;
}
.plan-info-card .plan-price {
  font-size: 20px !important;
}
.plan-info-card .plan-desc {
  font-size: 11px !important;
}
.plan-info-grid {
  gap: 14px !important;
}
.quota-item {
  margin-bottom: 6px !important;
}
.quota-label {
  font-size: 12px !important;
}
.quota-bar {
  height: 5px !important;
  border-radius: 3px !important;
}

/* ============================================
   TEAM TABS FIX: Active tab colored
   ============================================ */

.team-tab.active {
  color: #fff !important;
  background: var(--accent-color) !important;
  border-bottom-color: var(--accent-color) !important;
  border-radius: 8px !important;
  border-bottom: 2px solid var(--accent-color) !important;
}
.team-tab.active .tab-badge {
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}
.team-tab.active .material-icons {
  color: #fff !important;
}
.team-tabs {
  border-bottom: none !important;
  gap: 6px !important;
  padding: 4px !important;
  background: var(--bg-elevated) !important;
  border-radius: 10px !important;
}
.team-tab {
  border-radius: 8px !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
}

/* ============================================
   SETTINGS PAGE — Claude.ai Style Layout
   ============================================ */

#settings-view {
  padding-top: 40px;
}

.settings-claude-layout {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 1152px;
  margin: 0 auto;
  min-height: calc(100vh - 74px);
}

/* ── Sidebar ── */
.settings-claude-sidebar {
  width: 200px;
  min-width: 200px;
  padding: 32px 0 32px 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.settings-claude-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 20px 0;
  padding: 0 16px;
}

.settings-claude-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-claude-tab {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  font-family: inherit;
}

.settings-claude-tab:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.settings-claude-tab.active {
  color: var(--text-primary);
  font-weight: 500;
  border-left-color: var(--accent-color);
  background: var(--bg-elevated);
}

/* ── Content area ── */
.settings-claude-content {
  flex: 1;
  min-width: 0;
  padding: 44px 20px 32px 28px;
  border-left: 1px solid var(--border-subtle);
}

.settings-claude-panel {
  display: none;
}
.settings-claude-panel.active {
  display: block;
}

/* ── Section titles ── */
.settings-panel-title,
.settings-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.settings-subsection-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-section-header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.settings-section-header .material-icons {
  font-size: 18px;
  color: var(--text-secondary);
}

.settings-panel-block {
  margin-top: 10px;
}

.settings-muted {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 2px 0 0 0;
  line-height: 1.5;
}
.settings-muted strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── Divider ── */
.settings-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 24px 0;
}

/* ── Meta rows (replacement for info rows) ── */
.settings-meta-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-primary);
  margin-top: 10px;
}

.settings-meta-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.34fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-meta-row:last-child {
  border-bottom: none;
}

.settings-meta-key {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.settings-meta-value {
  font-size: 14px;
  color: var(--text-primary);
  min-width: 0;
}

.settings-meta-row-has-badge .settings-meta-value {
  font-weight: 500;
}

/* ── Toggle item (label + toggle on same row) ── */
.settings-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.settings-toggle-item:last-child {
  border-bottom: none;
}
.settings-toggle-item strong {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  display: block;
}
.settings-toggle-item .settings-muted {
  font-size: 12px;
  margin-top: 2px;
}

/* ── Legacy info row support ── */
.settings-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
  color: var(--text-primary);
}
.settings-info-row:last-child {
  border-bottom: none;
}
.settings-info-row strong {
  font-weight: 500;
}

/* ── Outline buttons (small) ── */
.btn-outline-sm {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.btn-outline-sm:hover {
  background: var(--bg-elevated);
  border-color: var(--text-secondary);
}

.btn-danger-outline-sm {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: transparent;
  color: #ef4444;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.btn-danger-outline-sm:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: #ef4444;
}

/* ── Billing plan header ── */
.settings-billing-plan-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0 8px 0;
}
.settings-billing-plan-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-billing-plan-icon .material-icons {
  font-size: 24px;
  color: var(--text-secondary);
}
.settings-billing-plan-info {
  flex: 1;
  min-width: 0;
}
.settings-billing-plan-info strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}
.settings-billing-plan-info span {
  font-size: 13px;
}

.settings-billing-plan-header-clean {
  align-items: center;
  padding-top: 0;
}

.settings-billing-simple-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}

.settings-billing-simple-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-size: 14px;
}

.settings-billing-simple-left .material-icons {
  font-size: 18px;
  color: var(--text-secondary);
}

.settings-billing-table-wrap {
  margin-top: 10px;
}

.settings-billing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.settings-billing-table th,
.settings-billing-table td {
  text-align: left;
  padding: 7px 4px;
  color: var(--text-primary);
}

.settings-billing-table th {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.settings-billing-table td {
  font-size: 15px;
  font-weight: 500;
}

.settings-billing-inline-link {
  border: none;
  background: transparent;
  color: var(--text-primary);
  text-decoration: underline;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
}

.settings-billing-inline-link:hover {
  color: var(--accent-color);
}

.settings-billing-cancel-row {
  padding-top: 2px;
}

.settings-billing-cancel-copy {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

/* ── Usage bars ── */
.settings-usage-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}

.settings-usage-grid-primary {
  margin-top: 14px;
  gap: 10px;
}

.settings-usage-grid-secondary {
  margin-top: 10px;
}

.settings-usage-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.settings-usage-item:last-child {
  border-bottom: none;
}

.settings-usage-item-primary {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg-primary);
}

.settings-usage-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.settings-usage-value {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.settings-usage-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.settings-usage-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent-color, #3b82f6);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 2px;
}
.settings-usage-fill.warn {
  background: #f59e0b;
}
.settings-usage-fill.danger {
  background: #ef4444;
}
.settings-usage-fill.locked {
  background: var(--text-secondary);
  opacity: 0.3;
}

.settings-usage-pct {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
}

.settings-usage-collapse {
  margin-top: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-primary);
  padding: 10px 12px;
}

.settings-usage-collapse > summary {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-usage-collapse > summary::-webkit-details-marker {
  display: none;
}

.settings-extra-usage-card {
  margin-top: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-primary);
  padding: 14px;
}

.settings-extra-usage-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-extra-usage-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg-surface);
}

.settings-extra-usage-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.settings-extra-usage-stat strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.settings-actions-inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.settings-legal-actions {
  margin-top: 18px;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  #settings-view {
    padding-top: 10px;
  }

  .settings-claude-layout {
    flex-direction: column;
    gap: 0;
  }
  .settings-claude-sidebar {
    width: 100%;
    min-width: 100%;
    padding: 16px 0 0 0;
    position: relative;
    border-bottom: 1px solid var(--border-subtle);
  }
  .settings-claude-title {
    padding: 0 16px;
    font-size: 18px;
    margin-bottom: 12px;
  }
  .settings-claude-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 0;
    padding: 0 8px;
    -webkit-overflow-scrolling: touch;
  }
  .settings-claude-tab {
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 8px 14px;
    white-space: nowrap;
    font-size: 13px;
  }
  .settings-claude-tab.active {
    border-left-color: transparent;
    border-bottom-color: var(--accent-color);
  }
  .settings-claude-content {
    padding: 20px 16px;
    border-left: none;
  }

  .settings-meta-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .settings-actions-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-actions-inline .btn {
    width: 100%;
    justify-content: center;
  }

  .settings-extra-usage-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   UPGRADE POPUP — Premium Modal
   ============================================ */

.upgrade-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.upgrade-popup {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 32px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  position: relative;
  animation: popupSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

@keyframes popupSlideIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.upgrade-popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.upgrade-popup-close:hover {
  color: var(--text-primary);
}

.upgrade-popup-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent-gradient, linear-gradient(135deg, #6366f1, #8b5cf6));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.upgrade-popup-icon .material-icons {
  font-size: 28px;
  color: #fff;
}

.upgrade-popup-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.upgrade-popup-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.upgrade-popup-comparison {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--bg-primary);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

.upgrade-popup-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.upgrade-popup-plan-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
.upgrade-popup-plan.recommended .upgrade-popup-plan-badge {
  background: var(--accent-gradient, linear-gradient(135deg, #6366f1, #8b5cf6));
  color: #fff;
}

.upgrade-popup-plan-limit {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.upgrade-popup-arrow {
  font-size: 20px;
  color: var(--text-secondary);
}

.upgrade-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upgrade-popup-cta {
  width: 100%;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  background: var(--accent-gradient, linear-gradient(135deg, #6366f1, #8b5cf6));
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.upgrade-popup-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  padding: 8px;
  font-family: inherit;
  transition: color 0.15s;
}
.btn-ghost:hover {
  color: var(--text-primary);
}

/* ============================================
   PLAN BADGES — Sidebar + Navigation
   ============================================ */

.plan-badge-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}
.plan-badge-pill.plan-free {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}
.plan-badge-pill.plan-starter {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}
.plan-badge-pill.plan-pro {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
  color: #8b5cf6;
}
.plan-badge-pill.plan-team {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
  color: #f59e0b;
}

/* Lock icon on nav items */
.nav-item .nav-lock-icon {
  font-size: 14px;
  color: var(--text-secondary);
  opacity: 0.5;
  margin-left: auto;
}

/* Quota warning banner */
.quota-warning-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  animation: fadeIn 0.3s ease;
}
.quota-warning-banner.warn {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}
.quota-warning-banner.danger {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.quota-warning-banner .material-icons {
  font-size: 18px;
}
.quota-warning-banner a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  .settings-claude-layout {
    flex-direction: column;
    gap: 0;
  }
  .settings-claude-sidebar {
    width: 100%;
    min-width: 100%;
    padding: 16px 0 0 0;
    position: relative;
    border-bottom: 1px solid var(--border-subtle);
  }
  .settings-claude-title {
    padding: 0 16px;
    font-size: 18px;
    margin-bottom: 12px;
  }
  .settings-claude-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 0;
    padding: 0 8px;
    -webkit-overflow-scrolling: touch;
  }
  .settings-claude-tab {
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 8px 14px;
    white-space: nowrap;
    font-size: 13px;
  }
  .settings-claude-tab.active {
    border-left-color: transparent;
    border-bottom-color: var(--accent-color);
  }
  .settings-claude-content {
    padding: 20px 16px;
    border-left: none;
  }
}