/* DraftBay Dashboard - Design System Implementation */
body, .dashboard-container{ font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
:root{
  /* Colors - Design System Palette */
  --bg:#121212;                           /* Main background - Deep dark */
  --panel:#1e1e1e;                        /* Cards, panels, elevated surfaces */
  --surface:#1a1a1a;                      /* Input backgrounds, subtle surfaces */
  --primary:#47a7f5;                      /* Brand blue - buttons, links, accents */
  --primary-hover:#3b82d6;                /* Primary hover state */
  --accent:#22d3ee;                       /* Secondary accent - Cyan */
  --text:#e5e7eb;                         /* Primary text - Soft white */
  --muted:rgba(229,231,235,0.7);          /* Secondary text, labels */
  --disabled:rgba(229,231,235,0.5);       /* Disabled text */
  --success:#10b981;                      /* Success states, positive actions */
  --warning:#f59e0b;                      /* Warning states, caution */
  --danger:#ef4444;                       /* Error states, destructive actions */
  --border:#334155;                       /* Borders, dividers */

  /* Layout & Spacing - Design System Scale */
  --radius:12px;                          /* Standard border radius */
  --radius-lg:16px;                       /* Large components (cards, headers) */
  --radius-sm:8px;                        /* Small components (chips, badges) */
  --shadow-1:0 2px 12px rgba(0, 0, 0, 0.2);    /* Subtle elevation */
  --shadow-2:0 4px 16px rgba(0, 0, 0, 0.3);    /* Medium elevation */
  --shadow-3:0 8px 24px rgba(0, 0, 0, 0.4);    /* High elevation */

  /* Spacing Scale */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:20px;
  --space-2xl:24px;
  --space-3xl:32px;

  /* Typography */
  --text-xs:0.75rem;                      /* 12px - Small labels, captions */
  --text-sm:0.875rem;                     /* 14px - Secondary text */
  --text-base:0.95rem;                    /* 15px - Body text */
  --text-lg:1.125rem;                     /* 18px - Large body text */
  --text-xl:1.25rem;                      /* 20px - Small headings */
  --text-2xl:1.5rem;                      /* 24px - Medium headings */
  --text-3xl:2rem;                        /* 32px - Large headings */
  --text-4xl:2.5rem;                      /* 40px - Hero headings */

  /* Animation */
  --ease-standard:cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:0.15s;
  --duration-normal:0.2s;
  --duration-slow:0.3s;
}

body.dashboard-dark{
  background:var(--bg);
  color:var(--text);
  font-size:var(--text-base);
  line-height:1.6;
}

.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3xl);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
}

/* Enhanced Dashboard Sections */
.dashboard-section {
  margin-bottom: var(--space-3xl);
}

.dashboard-section .card {
  margin-bottom: var(--space-2xl);
}

.dashboard-section .card:last-child {
  margin-bottom: 0;
}

.dashboard-header {
  background: linear-gradient(135deg, var(--panel) 0%, var(--surface) 100%);
  color: var(--text);
  padding: var(--space-3xl);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3xl);
  box-shadow: var(--shadow-2);
  position: relative;
  border: 1px solid var(--border);
  transition: all var(--duration-slow) var(--ease-standard);
  overflow: hidden;
}

.dashboard-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.dashboard-header:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-3);
  transform: translateY(-2px);
}

.dashboard-header h1 {
  font-size:var(--text-3xl);
  font-weight:700;
  color:var(--primary);
  margin-bottom:var(--space-sm);
}

.dashboard-header p {
  font-size:var(--text-lg);
  color:var(--muted);
  margin:0;
}

.dashboard-nav{
  display:flex;
  gap:var(--space-md);
  margin-bottom:var(--space-2xl);
  border-bottom:1px solid var(--border);
  padding-bottom:var(--space-lg);
  flex-wrap:wrap;
}
.mobile-menu-toggle{display:none}

/* Desktop navigation - show normally */
@media (min-width: 769px) {
  .dashboard-nav {
    display: flex !important;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding: 0 0 12px 0;
    flex-wrap: wrap;
    background: transparent;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
  }

  .nav-tab {
    width: auto;
    text-align: center;
    padding: 10px 16px;
    border-radius: 8px;
    min-width: auto;
  }

  .launch-app-btn {
    margin-left: auto !important;
    margin-top: 0;
    width: auto;
    text-align: center;
  }
}

/* Show mobile menu only on mobile */
@media (max-width: 768px) {
  .dashboard-mobile-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .dashboard-nav {
    display: none !important;
  }
}

/* Hide mobile menu on desktop */
@media (min-width: 769px) {
  .dashboard-mobile-menu {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Additional mobile-specific rules for better compatibility */
@media screen and (max-device-width: 768px) {
  .dashboard-mobile-menu {
    display: block !important;
    visibility: visible !important;
  }
}
/* Navigation Tabs - Design System Implementation */
.nav-tab{
  padding:var(--space-md) var(--space-xl);
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  border-radius:var(--radius);
  cursor:pointer;
  font-weight:600;
  font-size:var(--text-base);
  transition:all var(--duration-slow) var(--ease-standard);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
  min-height:44px; /* Touch target */
}
.nav-tab.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:var(--shadow-1);
}
.nav-tab:hover{
  border-color:var(--primary);
  background:rgba(71,167,245,0.1);
  color:var(--text);
  transform:translateY(-1px);
  box-shadow:var(--shadow-1);
}
.nav-tab:focus{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.nav-tab:focus:not(:focus-visible){
  outline:none;
}

.dashboard-section{display:none;animation:fadeIn .2s ease}
.dashboard-section.active{display:block}
@keyframes fadeIn{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Beautiful Stats Grid - Enhanced Design System */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

/* Enhanced Stat Cards with Discord-like Styling */
.stat-card {
  background: var(--panel);
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
  transition: all var(--duration-slow) var(--ease-standard);
  position: relative;
  overflow: hidden;
}

/* Add subtle gradient overlay for depth */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(71, 167, 245, 0.02) 0%, rgba(34, 211, 238, 0.01) 100%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
  pointer-events: none;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(71, 167, 245, 0.1);
  border-color: var(--primary);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card.wide {
  grid-column: 1/-1;
}

.stat-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--space-sm);
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

.stat-label {
  color: var(--muted);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  position: relative;
  z-index: 1;
}

.stat-sub {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-top: var(--space-sm);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* Progress Bars - Design System Implementation */
.progress{
  height:8px;
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  margin-top:var(--space-sm);
}
.progress-bar{
  height:100%;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transition:width var(--duration-slow) ease;
}

/* Status Indicators - Pills/Badges */
.pill, .badge{
  padding:var(--space-xs) var(--space-md);
  border-radius:999px;
  border:1px solid var(--border);
  font-size:var(--text-xs);
  font-weight:600;
  transition:all var(--duration-normal) ease;
  display:inline-block;
}
.pill-success, .badge-success{
  border-color:var(--success);
  color:var(--success);
  background:rgba(16, 185, 129, 0.1);
}
.pill-warning, .badge-warning{
  border-color:var(--warning);
  color:var(--warning);
  background:rgba(245, 158, 11, 0.1);
}
.pill-danger, .badge-danger{
  border-color:var(--danger);
  color:var(--danger);
  background:rgba(239, 68, 68, 0.1);
}
.pill-primary, .badge-primary{
  border-color:var(--primary);
  color:var(--primary);
  background:rgba(71, 167, 245, 0.1);
}

/* Cards - Design System Implementation */
.card{
  background:var(--panel);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  margin-bottom:var(--space-2xl);
  overflow:hidden;
  border:1px solid var(--border);
  transition:all var(--duration-slow) var(--ease-standard);
  position: relative;
}

/* Add subtle gradient overlay for depth */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(71, 167, 245, 0.01) 0%, rgba(34, 211, 238, 0.005) 100%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
  pointer-events: none;
  z-index: 0;
}

.card:hover{
  transform:translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(71, 167, 245, 0.1);
  border-color:var(--primary);
}

.card:hover::before {
  opacity: 1;
}
.card-header {
  background: linear-gradient(135deg, var(--panel) 0%, var(--surface) 100%);
  padding: var(--space-2xl) var(--space-3xl);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--primary);
  position: relative;
  z-index: 1;
}

.card-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-3xl);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.card-body {
  padding: var(--space-3xl);
  color: var(--text);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* Duplicate removed - stat cards defined above */

/* Form Elements - Design System Implementation */
.input, input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], select, textarea{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  padding:var(--space-md) var(--space-lg);
  border-radius:var(--radius);
  font-size:var(--text-base);
  width:100%;
  transition:all var(--duration-normal) ease;
  font-family:inherit;
  box-sizing:border-box;
}
.input:focus, input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--primary);
  background:var(--panel);
  box-shadow:0 0 0 3px rgba(71, 167, 245, 0.1);
}
.input::placeholder, input::placeholder, textarea::placeholder{
  color:var(--muted);
}
.input:disabled, input:disabled, select:disabled, textarea:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

/* Select specific styling */
select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23e5e7eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position:right var(--space-md) center;
  background-repeat:no-repeat;
  background-size:16px;
  padding-right:calc(var(--space-lg) + 24px);
}

/* Textarea specific styling */
textarea{
  resize:vertical;
  min-height:100px;
}

/* Form groups and labels */
.form-group{
  margin-bottom:var(--space-lg);
}
.form-label{
  display:block;
  margin-bottom:var(--space-sm);
  font-weight:600;
  font-size:var(--text-base);
  color:var(--text);
}
.form-help{
  margin-top:var(--space-xs);
  font-size:var(--text-sm);
  color:var(--muted);
}

/* Tables - Design System Implementation */
.table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  border: none;
  box-shadow: none;
  margin-bottom: 0;
}

.table th, .table td {
  padding: var(--space-xl) var(--space-xl);
  text-align: left;
  border-bottom: 1px solid rgba(71, 167, 245, 0.1);
  color: var(--text);
  transition: all var(--duration-normal) var(--ease-standard);
}

.table th {
  background: rgba(71, 167, 245, 0.05);
  font-weight: 700;
  color: var(--muted);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 2px solid rgba(71, 167, 245, 0.2);
}

.table tbody tr {
  transition: all var(--duration-normal) var(--ease-standard);
}

.table tbody tr:hover {
  background: rgba(71, 167, 245, 0.08);
}

.table tbody tr:hover td {
  transform: translateX(3px);
  color: var(--primary);
}

.table tbody tr:last-child td {
  border-bottom: none;
  padding-bottom: calc(var(--space-xl) + var(--space-sm));
}

/* Table responsive wrapper */
.table-responsive{
  border-radius: 0;
  overflow: hidden;
  border: none;
  background: transparent;
  margin: 0;
  width: 100%;
}

/* Fix Recent Activity card body padding to match table */
.card-body .table-responsive {
  margin: calc(var(--space-3xl) * -1);
  margin-top: 0;
  border-radius: 0;
}

.card-body .table-responsive .table {
  margin: 0;
}

.card-body .table-responsive .table th:first-child,
.card-body .table-responsive .table td:first-child {
  padding-left: var(--space-3xl);
}

.card-body .table-responsive .table th:last-child,
.card-body .table-responsive .table td:last-child {
  padding-right: var(--space-3xl);
}

/* Fix Recent Activity card width to match stats grid */
#overview-section .card {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 500;
  border: 1px solid var(--border);
  display: inline-block;
  width: fit-content;
  white-space: nowrap;
  max-width: none;
  flex-shrink: 0;
}

.badge-success {
  background: rgba(76,175,80,.15);
  color: #9be49f;
  border-color: rgba(76,175,80,.3);
}

.badge-warning {
  background: rgba(255,152,0,.15);
  color: #ffd18a;
  border-color: rgba(255,152,0,.3);
}

.badge-danger {
  background: rgba(244,67,54,.15);
  color: #ff9f96;
  border-color: rgba(244,67,54,.3);
}

/* Buttons - Design System Implementation */
.btn{
  padding:var(--space-md) var(--space-2xl);
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  font-weight:600;
  font-size:var(--text-base);
  text-decoration:none;
  display:inline-block;
  transition:all var(--duration-slow) var(--ease-standard);
  box-shadow:var(--shadow-1);
  min-height:44px; /* Touch target */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-sm);
}
.btn:focus{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.btn:focus:not(:focus-visible){
  outline:none;
}
.btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.btn:disabled:hover{
  transform:none;
  box-shadow:none;
}

.btn-primary{
  background:var(--primary);
  color:#fff;
}
.btn-primary:hover:not(:disabled){
  background:var(--primary-hover);
  transform:translateY(-2px);
  box-shadow:var(--shadow-2);
}

.btn-secondary, .btn-outline{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}
.btn-secondary:hover:not(:disabled), .btn-outline:hover:not(:disabled){
  background:rgba(71,167,245,0.1);
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:var(--shadow-1);
}

.btn-success{
  background:var(--success);
  color:#fff;
}
.btn-success:hover:not(:disabled){
  background:#059669;
  transform:translateY(-2px);
  box-shadow:var(--shadow-2);
}

.btn-danger{
  background:var(--danger);
  color:#fff;
}
.btn-danger:hover:not(:disabled){
  background:#dc2626;
  transform:translateY(-2px);
  box-shadow:var(--shadow-2);
}

.form-group{margin-bottom:16px}
.form-label{display:block;margin-bottom:8px;font-weight:500;color:var(--text)}
.form-control{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;font-size:1rem;background:var(--surface);color:var(--text)}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(71,167,245,.15)}

.alert{padding:12px;border-radius:8px;margin-bottom:16px;border:1px solid var(--border)}
.alert-success{background:rgba(76,175,80,.1);color:#b7f2ba}
.alert-danger{background:rgba(244,67,54,.1);color:#ffc1bd}

.loading{text-align:center;padding:32px;color:var(--muted)}
.spinner{border:3px solid rgba(255,255,255,.08);border-top:3px solid var(--primary);border-radius:50%;width:28px;height:28px;animation:spin 1s linear infinite;margin:0 auto 16px}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

.referral-link-section{background:var(--surface);padding:16px;border-radius:8px;margin-bottom:16px;border:1px solid var(--border)}
.referral-link{background:var(--panel);padding:12px;border:1px solid var(--border);border-radius:6px;font-family:monospace;word-break:break-all;margin:10px 0;color:var(--text)}
.copy-button{background:#28a745;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.9rem}
.copy-button:hover{background:#218838}

.logout-btn{position:absolute;top:20px;right:20px;background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--border);padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.9rem}
.logout-btn:hover{background:rgba(255,255,255,.14)}

/* Connection Status Component - Elegant and integrated */
.setup-progress-section {
  margin-bottom: 24px;
}

#setup-progress {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}

.connection-status-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.connection-status-card .card-header {
  background: var(--surface);
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.connection-status-card .card-header h3 {
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.connection-status-card .card-header p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

.connection-grid {
  padding: 20px;
  display: grid;
  gap: 16px;
}

.connection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: all 0.2s ease;
}

.connection-item.highlight {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(71, 167, 245, 0.15);
  animation: pulse 2s ease-in-out;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.connection-item.connected {
  border-color: var(--success);
  background: rgba(76, 175, 80, 0.05);
}

.connection-item.disconnected.required {
  border-color: var(--warning);
  background: rgba(255, 152, 0, 0.05);
}

.connection-info {
  flex: 1;
  padding-left: 4px;
}

.connection-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.connection-title h4 {
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.connection-info p {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.4;
}

.connection-actions {
  margin-left: 20px;
  flex-shrink: 0;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
}

.connection-status.connected {
  color: var(--success);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}



.required-badge {
  background: var(--warning);
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
}

.optional-badge {
  background: var(--primary);
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  text-transform: uppercase;
}

/* Business Policies Guide Styles */
.business-policies-guide {
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.guide-content {
  max-width: 600px;
  position: relative;
}

.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
  position: relative;
}

.step-number {
  background: var(--primary);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.step-content h4 {
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.step-content p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.4;
}

.guide-actions {
  display: flex;
  gap: 12px;
  margin: 24px 0 16px 0;
  flex-wrap: wrap;
}

.guide-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-top: 20px;
}

.guide-note p {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.5;
}

/* Launch App Button States */
.launch-app-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

.launch-app-btn.disabled:hover {
  background: var(--surface) !important;
  color: var(--muted) !important;
}

@media (max-width:768px){
  .dashboard-container{padding:10px}

  /* Apple-inspired Mobile Menu (matching /create) */
  .mobile-menu-toggle {
    display: none;
  }

  /* Mobile menu container - full screen overlay (matching /create) */
  .dashboard-mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 64px !important;
    background: rgba(0, 0, 0, 0.9) !important;
    z-index: 1300 !important;
    overflow: hidden !important;
    transition: all 0.3s ease-in-out, background 0.5s ease-in-out !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid #334155 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .dashboard-mobile-menu.open {
    height: 100vh !important;
    background: #000000 !important;
    transition-delay: 0.25s !important;
  }

  /* Mobile menu header */
  .dashboard-mobile-header {
    position: relative;
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 16px;
    justify-content: space-between;
  }

  /* Hamburger button */
  .dashboard-burger-container {
    position: relative;
    display: flex;
    height: 50px;
    width: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    justify-content: center;
  }

  .dashboard-burger-container.open {
    transform: rotate(90deg);
  }

  .dashboard-burger {
    width: 18px;
    height: 8px;
    position: relative;
    display: block;
  }

  .dashboard-burger-bar {
    width: 100% !important;
    height: 2px !important;
    display: block !important;
    position: absolute !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 1px !important;
    transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
  }

  .dashboard-burger-bar.top {
    top: 0;
    transition-delay: 0s;
  }

  .dashboard-burger-bar.bottom {
    top: 6px;
    transition-delay: 0s;
  }

  .dashboard-burger-container.open .dashboard-burger-bar.top {
    transform: translateY(3px) rotate(45deg);
    transition-delay: 0.2s;
  }

  .dashboard-burger-container.open .dashboard-burger-bar.bottom {
    transform: translateY(3px) rotate(-45deg);
    transition-delay: 0.2s;
  }

  /* Logo section */
  .dashboard-mobile-logo {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .dashboard-logo-icon {
    background: linear-gradient(135deg, #47a7f5 0%, #22d3ee 100%);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(71, 167, 245, 0.3);
  }

  .dashboard-logo-text {
    font-weight: 700;
    font-size: 1.25rem;
    color: #ffffff;
    letter-spacing: 0.5px;
  }

  /* Menu items container */
  .dashboard-mobile-menu-list {
    position: relative;
    display: block;
    padding: 0 48px;
    list-style: none;
    margin-top: 40px;
  }

  /* Individual menu items */
  .dashboard-mobile-menu-item {
    border-bottom: 1px solid #333333;
    margin-top: 8px;
    cursor: pointer;
    opacity: 0;
    transform: scale(1.15) translateY(-30px);
    transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  }

  .dashboard-mobile-menu.open .dashboard-mobile-menu-item {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }

  .dashboard-mobile-menu-item:nth-child(1) { transition-delay: 0.27s; }
  .dashboard-mobile-menu-item:nth-child(2) { transition-delay: 0.34s; }
  .dashboard-mobile-menu-item:nth-child(3) { transition-delay: 0.41s; }
  .dashboard-mobile-menu-item:nth-child(4) { transition-delay: 0.48s; }
  .dashboard-mobile-menu-item:nth-child(5) { transition-delay: 0.55s; }

  .dashboard-mobile-menu-item:hover .dashboard-mobile-menu-link {
    color: #47a7f5;
    transform: translateX(8px);
  }

  /* Menu links */
  .dashboard-mobile-menu-link {
    display: block;
    position: relative;
    color: #ffffff;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 300;
    text-decoration: none;
    font-size: 22px;
    line-height: 2.35;
    width: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  }

  .dashboard-mobile-menu-link.active {
    color: #47a7f5;
  }

  .dashboard-mobile-menu-link.active::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #47a7f5;
  }

  /* Launch App Button */
  .dashboard-mobile-launch-btn {
    margin: 48px;
    margin-top: 32px;
    margin-bottom: 32px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  }

  .dashboard-mobile-menu.open .dashboard-mobile-launch-btn {
    opacity: 1;
    transform: translateY(0px);
    transition-delay: 0.6s;
  }

  .dashboard-mobile-launch-btn .btn {
    width: 100%;
    background: linear-gradient(135deg, #47a7f5 0%, #22d3ee 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 18px 24px;
    border-radius: 12px;
    text-transform: none;
    box-shadow: 0 4px 16px rgba(71, 167, 245, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: block;
    text-align: center;
  }

  .dashboard-mobile-launch-btn .btn:hover {
    background: linear-gradient(135deg, #3b82d6 0%, #0891b2 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(71, 167, 245, 0.4);
  }

  /* Hide old mobile menu */
  .dashboard-nav {
    display: none !important;
  }
  .stats-grid{grid-template-columns:1fr}

  .connection-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .connection-actions {
    margin-left: 0;
    align-self: stretch;
  }

  .connection-actions .btn {
    width: 100%;
  }
}

/* Polishing overrides to align with MUI dark sizing/metrics */
:root{
  --radius: 8px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.45), 0 3px 6px rgba(0,0,0,.28);
}

.dashboard-header{ border-radius: var(--radius); box-shadow: var(--shadow-1); }
.card{ border-radius: var(--radius); box-shadow: var(--shadow-1); }
.stat-card{ border-radius: var(--radius); box-shadow: var(--shadow-1); }
.logout-btn{ border-radius: var(--radius); }

.nav-tab{ font-size:.9rem; padding:10px 14px; min-height:36px; align-items:center; display:inline-flex; gap:6px; }
.nav-tab.active{ position:relative; }
.nav-tab.active::after{ content:""; position:absolute; left:10px; right:10px; bottom:-13px; height:2px; background:var(--primary); border-radius:2px; }

.stat-value{ font-size:1.5rem; margin-bottom:6px; }
.stat-label{ font-size:.75rem; letter-spacing:.3px; }
.card-header{ font-weight:600; font-size:0.95rem; }
.card-body{ padding:16px; }

.table th{ color: var(--muted); font-weight:600; }
.table th, .table td{ padding:12px; }

.progress{ height:8px; }

/* Subtle hover for buttons */
.btn-primary{ transition: background-color .15s ease, transform .1s ease; }
.btn-primary:hover{ transform: translateY(-1px); }

/* Hero CTA card for subscription management */
.cta-card{ position:relative; overflow:hidden; }
.cta-content{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.cta-title{ font-size:1.25rem; font-weight:700; margin-bottom:4px; color:#fff; }
.cta-sub{ color:var(--muted); }
.btn-cta{ background:linear-gradient(90deg,#5ab0ff,#7cd3ff); color:#0b1b2b; padding:12px 18px; border-radius:10px; font-weight:800; border:none; box-shadow:0 6px 16px rgba(90,176,255,.25); }
.btn-cta:hover{ filter:brightness(0.95); transform: translateY(-1px); }

/* Enhanced Settings Page - Discord-like Design */
#settings-section {
  padding: 0;
}

#settings-section .card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: all var(--duration-slow) var(--ease-standard);
}

#settings-section .card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

#settings-section .card-header {
  background: linear-gradient(135deg, var(--panel) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border);
  padding: var(--space-2xl);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary);
}

#settings-section .card-body {
  display: grid;
  gap: var(--space-2xl);
  padding: var(--space-3xl);
}

#settings-section .form-label {
  color: var(--text);
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1;
}

#settings-section .form-control {
  background: rgba(26, 26, 26, 0.8);
  color: var(--text);
  border: 1px solid rgba(71, 167, 245, 0.2);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-base);
  transition: all var(--duration-normal) var(--ease-standard);
  position: relative;
  z-index: 1;
}

#settings-section .form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(71, 167, 245, 0.15);
  background: rgba(71, 167, 245, 0.05);
  transform: translateY(-1px);
}

#settings-section .form-control:disabled {
  background: rgba(26, 26, 26, 0.4);
  color: var(--muted);
  border-color: rgba(51, 65, 85, 0.3);
  cursor: not-allowed;
}

#settings-section .form-control::placeholder {
  color: var(--disabled);
}

#settings-section .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  border: none;
  color: white;
  font-weight: 600;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius);
  transition: all var(--duration-normal) var(--ease-standard);
}

#settings-section .btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, #2563eb 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(71, 167, 245, 0.3);
}

#settings-section .btn-outline {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius);
  transition: all var(--duration-normal) var(--ease-standard);
}

#settings-section .btn-outline:hover {
  border-color: var(--primary);
  background: rgba(71, 167, 245, 0.1);
  color: var(--primary);
  transform: translateY(-1px);
}

#settings-section .stat-sub {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* Make badges pop a bit more */
.badge-success{ color:#c8ffd0; }
.badge-warning{ color:#ffe0ad; }

/* Enhanced Connection Components for Overview */
.connections-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.connection-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  background: transparent;
  border: none;
  border-radius: 0;
  transition: all var(--duration-normal) var(--ease-standard);
  position: relative;
  z-index: 1;
}

.connection-item:hover {
  transform: translateX(2px);
}

.connection-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(71, 167, 245, 0.1);
  border-radius: var(--radius);
  border: 1px solid rgba(71, 167, 245, 0.2);
  transition: all var(--duration-normal) var(--ease-standard);
  flex-shrink: 0;
}

.connection-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.connection-item:hover .connection-icon {
  background: rgba(71, 167, 245, 0.2);
  border-color: var(--primary);
  transform: scale(1.05);
}

.connection-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.connection-info .badge {
  align-self: flex-start;
  width: fit-content;
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.connection-name {
  font-weight: 600;
  color: var(--text);
  font-size: var(--text-base);
  margin-bottom: 2px;
}

/* Enhanced Connection Components for Settings */
.connections-section {
  margin: var(--space-3xl) 0;
  padding: var(--space-2xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.section-title {
  color: var(--primary);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-xl);
  border-bottom: 2px solid var(--border);
  padding-bottom: var(--space-md);
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.connection-cards {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.connection-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  transition: all var(--duration-slow) var(--ease-standard);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.connection-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.connection-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
}

.connection-card:hover::before {
  opacity: 1;
}

.connection-header {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.connection-icon-large {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(71, 167, 245, 0.1), rgba(34, 211, 238, 0.1));
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  transition: all var(--duration-normal) var(--ease-standard);
  flex-shrink: 0;
}

.connection-icon-large img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.connection-card:hover .connection-icon-large {
  background: linear-gradient(135deg, rgba(71, 167, 245, 0.2), rgba(34, 211, 238, 0.2));
  border-color: var(--primary);
  transform: scale(1.05);
}

.connection-details {
  flex: 1;
}

.connection-title {
  color: var(--text);
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 var(--space-sm) 0;
  line-height: 1.2;
}

.connection-description {
  color: var(--muted);
  font-size: var(--text-base);
  margin: var(--space-lg) 0 var(--space-xl) 0;
  line-height: 1.5;
}

.connection-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
}

.connection-actions .btn {
  font-size: var(--text-sm);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius);
  font-weight: 600;
  transition: all var(--duration-normal) var(--ease-standard);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.connection-actions .btn:hover {
  transform: translateY(-1px);
}

/* Responsive Design Patterns - Design System Implementation */
@media (max-width: 768px) {
  /* Mobile container */
  .dashboard-container {
    padding: var(--space-lg);
  }

  /* Mobile header */
  .dashboard-header {
    padding: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    text-align: center;
  }

  .dashboard-header h1 {
    font-size: var(--text-2xl);
  }

  .dashboard-header p {
    font-size: var(--text-base);
  }

  /* Mobile navigation */
  .dashboard-nav {
    flex-direction: column;
    gap: var(--space-sm);
    padding-bottom: var(--space-lg);
  }

  .nav-tab {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 1rem;
    border-radius: 14px;
  }

  /* Mobile buttons */
  .btn {
    width: 100%;
    min-height: 48px;
    padding: var(--space-lg) var(--space-xl);
    font-size: 1rem;
    border-radius: 14px;
  }

  /* Mobile stats grid */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
  }

  .stat-card {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
  }

  .stat-value {
    font-size: var(--text-2xl);
  }

  .stat-label {
    font-size: var(--text-sm);
  }

  /* Mobile cards */
  .card {
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-lg);
  }

  .card-header {
    padding: var(--space-lg);
    text-align: center;
  }

  .card-body {
    padding: var(--space-lg);
  }

  /* Mobile forms */
  .input, input, select, textarea {
    padding: var(--space-lg);
    font-size: 1rem;
    border-radius: 14px;
  }

  .form-group {
    margin-bottom: var(--space-lg);
  }

  /* Mobile tables */
  .table {
    font-size: var(--text-sm);
  }

  .table th, .table td {
    padding: var(--space-sm) var(--space-md);
  }

  /* Simplified hover effects for mobile */
  .card:hover, .btn:hover, .nav-tab:hover {
    transform: scale(0.98);
  }
}

  .stat-label {
    font-size: 1rem;
    margin-top: 8px;
  }

  /* Mobile connections */
  .connection-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .connection-card {
    border-radius: 16px;
    padding: 20px;
  }

  .connection-header {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .connection-icon-large {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .connection-actions {
    flex-direction: column;
    gap: 12px;
  }

  .connection-actions .btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-size: 0.9rem;
  }

  .connections-grid {
    gap: 12px;
  }

  .connection-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  .connection-item:last-child {
    border-bottom: none;
  }

  /* Mobile cards */
  .card {
    border-radius: 16px;
    margin: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }

  .card-header {
    padding: 20px 20px 16px 20px;
    font-size: 1.1rem;
    font-weight: 600;
  }

  .card-body {
    padding: 0 20px 20px 20px;
  }

  /* Mobile table */
  .table-responsive {
    border-radius: 12px;
    overflow: hidden;
  }

  .table {
    font-size: 0.9rem;
  }

  .table th,
  .table td {
    padding: 12px 8px;
  }

  /* Mobile forms */
  .form-group {
    margin-bottom: 20px;
  }

  .form-label {
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .form-control {
    padding: 14px 16px;
    font-size: 1rem;
    border-radius: 12px;
    border: 2px solid var(--border);
  }

  .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(71,167,245,0.1);
  }

  /* Mobile buttons */
  .btn {
    padding: 14px 20px;
    font-size: 1rem;
    border-radius: 12px;
    font-weight: 600;
    min-height: 48px;
    touch-action: manipulation;
  }

  .btn-primary {
    box-shadow: 0 4px 12px rgba(71,167,245,0.3);
  }

  .btn-outline {
    border: 2px solid var(--border);
  }

  /* Mobile spacing */
  .dashboard-section {
    padding: 0;
  }

  /* Mobile skeleton loading */
  .skeleton-stat-card {
    border-radius: 16px;
    padding: 20px;
  }

  .skeleton-connection-item {
    padding: 12px 0;
  }
}

/* Skeleton Loading Animations */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, rgba(255,255,255,0.1) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton Components */
.skeleton-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-stat-value {
  height: 32px;
  width: 80px;
  background: var(--border);
  border-radius: 6px;
}

.skeleton-stat-label {
  height: 16px;
  width: 120px;
  background: var(--border);
  border-radius: 4px;
}

.skeleton-stat-sub {
  height: 14px;
  width: 160px;
  background: var(--border);
  border-radius: 4px;
}

.skeleton-connection-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.skeleton-connection-icon {
  width: 24px;
  height: 24px;
  background: var(--border);
  border-radius: 50%;
}

.skeleton-connection-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-connection-name {
  height: 16px;
  width: 60px;
  background: var(--border);
  border-radius: 4px;
}

.skeleton-connection-badge {
  height: 20px;
  width: 80px;
  background: var(--border);
  border-radius: 12px;
}

.skeleton-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.skeleton-table-cell {
  height: 16px;
  background: var(--border);
  border-radius: 4px;
}

.skeleton-table-cell.short { width: 60%; }
.skeleton-table-cell.medium { width: 80%; }
.skeleton-table-cell.long { width: 100%; }

/* Apply skeleton animation to all skeleton elements */
.skeleton-stat-value,
.skeleton-stat-label,
.skeleton-stat-sub,
.skeleton-connection-icon,
.skeleton-connection-name,
.skeleton-connection-badge,
.skeleton-table-cell {
  animation: skeleton-loading 1.5s infinite;
  background: linear-gradient(90deg, var(--border) 25%, rgba(255,255,255,0.1) 50%, var(--border) 75%);
  background-size: 200% 100%;
}

/* Enhanced Plan Card Styling */
.plan-card {
  background: linear-gradient(135deg, var(--panel) 0%, rgba(30, 30, 30, 0.8) 100%);
  border: 1px solid rgba(71, 167, 245, 0.2);
}

.plan-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(71, 167, 245, 0.15);
}

.plan-card .plan-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xl);
}

.plan-card .stat-value {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: var(--text-2xl);
  font-weight: 800;
}

.btn-manage {
  background: rgba(71, 167, 245, 0.1);
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: all var(--duration-normal) var(--ease-standard);
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.btn-manage:hover {
  background: var(--primary);
  color: var(--bg);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(71, 167, 245, 0.3);
}





/* Affiliate program polish */
.ref-hero{background:var(--surface);padding:16px;border-radius:12px;border:1px solid var(--border);margin-bottom:12px;margin-top:var(--space-2xl)}
.ref-benefits{margin:8px 0 12px;padding-left:18px;color:var(--muted)}
.ref-card{background:var(--panel);padding:14px;border-radius:12px;border:1px solid var(--border);margin-bottom:12px}
.ref-link{font-family:monospace;background:var(--surface);padding:10px;border-radius:8px;word-break:break-all;border:1px solid var(--border)}
.ref-actions{display:flex;gap:8px;margin-top:10px}
.metrics-row{display:flex;gap:12px;margin-top:8px}
.metric .v{font-weight:800;font-size:1.2rem}
.metric .l{color:var(--muted);font-size:.85rem}

/* Tables & empty states */
.table.pretty thead th{color:var(--muted);font-size:.85rem}
.table.pretty tbody td{vertical-align:middle}
.empty{padding:16px;text-align:center;color:var(--muted);background:var(--surface);border-radius:8px;border:1px solid var(--border)}

/* Commission metrics */
.metric-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:12px}
.card-metric{background:var(--panel);padding:14px;border:1px solid var(--border);border-radius:12px}
.card-metric .v{font-size:1.3rem;font-weight:800}
.card-metric .l{color:var(--muted);font-size:.85rem}

/* Enhanced Settings Layout */
#settings-section #account-settings {
  display: grid;
  gap: var(--space-3xl);
  padding: var(--space-3xl);
}

#settings-section #settings-email {
  max-width: 400px;
  font-size: var(--text-base);
}

.password-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.password-row .form-control {
  min-height: 48px;
}

/* Enhanced Form Groups for Settings */
#settings-section .form-group {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(26, 26, 26, 0.8) 100%);
  border: 1px solid rgba(71, 167, 245, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  transition: all var(--duration-normal) var(--ease-standard);
  position: relative;
  overflow: hidden;
}

/* Add subtle gradient overlay */
#settings-section .form-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(71, 167, 245, 0.02) 0%, rgba(34, 211, 238, 0.01) 100%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
  pointer-events: none;
}

#settings-section .form-group:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(71, 167, 245, 0.15);
  transform: translateY(-1px);
}

#settings-section .form-group:hover::before {
  opacity: 1;
}

/* Enhanced Invited By Styling */
.invited-by {
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(135deg, rgba(71, 167, 245, 0.1) 0%, rgba(34, 211, 238, 0.05) 100%);
  border: 1px solid rgba(71, 167, 245, 0.3);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 500;
  position: relative;
  z-index: 1;
}



/* Auth pages (login/signup) */
.auth-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  background:var(--bg);
}
.auth-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  width:100%;
  max-width:420px;
  box-shadow:var(--shadow-1);
}
.auth-header{
  padding:24px 24px 0 24px;
  text-align: center;
}
.auth-header h1{
  color:var(--text);
  margin:0 0 8px 0;
  font-size:1.6rem;
  font-weight: 600;
}
.auth-header p{
  color:var(--muted);
  margin:0 0 12px 0;
  font-size: 0.95rem;
}
.auth-body{
  padding:20px 24px;
}
.auth-footer{
  padding:0 24px 24px 24px;
  color:var(--muted);
  text-align:center;
  font-size: 0.9rem;
}
.auth-footer a{
  color:var(--primary);
  text-decoration:none;
  font-weight: 500;
}
.auth-footer a:hover{
  color:var(--primary-hover);
  text-decoration:underline;
}

/* Better form styling for auth pages */
.auth-body .form-group {
  margin-bottom: 18px;
}
.auth-body .form-label {
  color: var(--text);
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}
.auth-body .form-control {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 12px;
  font-size: 1rem;
}
.auth-body .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(71,167,245,0.1);
  outline: none;
}
.auth-body .btn {
  margin-top: 12px;
  padding: 12px;
  font-size: 1rem;
}

/* Loading spinner for auth pages */
.loading {
  text-align: center;
  padding: 40px 20px;
}
.loading p {
  color: var(--text);
  margin-top: 16px;
}
.spinner {
  border: 3px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mobile auth pages */
@media (max-width: 768px) {
  .auth-wrapper {
    padding: 20px 16px;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
  }

  .auth-card {
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    border: none;
  }

  .auth-header {
    padding: 32px 24px 16px 24px;
  }

  .auth-header h1 {
    font-size: 1.8rem;
    margin-bottom: 12px;
  }

  .auth-header p {
    font-size: 1rem;
    margin-bottom: 16px;
  }

  .auth-body {
    padding: 16px 24px 24px 24px;
  }

  .auth-body .form-group {
    margin-bottom: 24px;
  }

  .auth-body .form-label {
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: 600;
  }

  .auth-body .form-control {
    padding: 16px 18px;
    font-size: 1rem;
    border-radius: 14px;
    border: 2px solid var(--border);
    background: var(--surface);
  }

  .auth-body .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(71,167,245,0.1);
  }

  .auth-body .btn {
    padding: 16px 24px;
    font-size: 1.1rem;
    border-radius: 14px;
    font-weight: 600;
    min-height: 52px;
    margin-top: 16px;
  }

  .auth-body .btn-primary {
    box-shadow: 0 6px 20px rgba(71,167,245,0.3);
  }

  .auth-footer {
    padding: 16px 24px 32px 24px;
    font-size: 1rem;
  }

  .auth-footer a {
    font-weight: 600;
    text-decoration: none;
  }

  .password-requirements {
    font-size: 0.9rem;
    margin-top: 8px;
    padding: 12px;
    background: var(--panel);
    border-radius: 10px;
    border: 1px solid var(--border);
  }
}

/* Additional mobile optimizations */
@media (max-width: 480px) {
  /* Extra small screens */
  .header h1 {
    font-size: 1.3rem;
  }

  .stats-grid {
    padding: 12px;
    gap: 12px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-value {
    font-size: 1.8rem;
  }

  .card {
    margin: 12px;
  }

  .connection-card {
    padding: 16px;
  }

  .connection-actions .btn {
    padding: 10px;
    font-size: 0.85rem;
  }
}

/* Touch improvements */
@media (hover: none) and (pointer: coarse) {
  /* Touch devices */
  .btn:hover {
    transform: none;
    box-shadow: none;
  }

  .btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  .nav-item:hover {
    background: none;
  }

  .nav-item:active {
    background: var(--primary);
    color: white;
  }

  .connection-card:hover {
    transform: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }

  .connection-card:active {
    transform: scale(0.99);
    transition: transform 0.1s ease;
  }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
  .auth-wrapper {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  .header {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-top: max(12px, env(safe-area-inset-top));
  }
}