/* ── iOS Design System (Global Content Layer) ────────────── */
:root {
  --ios-bg:        #F2F2F7;
  --ios-surface:   #FFFFFF;
  --ios-border:    rgba(60,60,67,0.12);
  --ios-text:      #000000;
  --ios-text2:     #3C3C43;
  --ios-text3:     rgba(60,60,67,0.55);
  --ios-blue:      #007AFF;
  --ios-blue-light:#E5F0FF;
  --ios-green:     #34C759;
  --ios-orange:    #FF9500;
  --ios-teal:      #5AC8FA;
  --ios-yellow:    #FFCC00;
  --ios-indigo:    #5856D6;
  --ios-red:       #FF3B30;
  --radius-card:   24px;
  --radius-xl:     18px;
  --shadow-card:   0 2px 20px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.03);
  --shadow-deep:   0 12px 40px rgba(0,0,0,0.1);
  --font-ios:      -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

.ios-content-layer {
  background: var(--ios-bg);
  min-height: calc(100vh - 64px);
  font-family: var(--font-ios);
  -webkit-font-smoothing: antialiased;
}

/* Page wrapper */
.ios-page {
  padding: 24px 16px 100px;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .ios-page { padding: 40px 40px 60px; max-width: 1100px; }
}

/* Greeting */
.ios-greeting { margin-bottom: 28px; }
.ios-greeting-sub { font-size: 13px; font-weight: 700; color: var(--ios-text3); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px; }
.ios-greeting-name { font-size: 32px; font-weight: 800; color: var(--ios-text); letter-spacing: -0.8px; line-height: 1.1; }

/* Alert Banner */
.ios-alert-banner { 
  background: rgba(255,149,0,0.08); 
  border: 1px solid rgba(255,149,0,0.25); 
  border-radius: var(--radius-xl); 
  padding: 16px 20px; 
  margin-bottom: 24px; 
  display: flex; 
  gap: 16px; 
  align-items: center; 
}
.ios-alert-title { font-size: 15px; font-weight: 700; color: var(--ios-orange); margin-bottom: 2px; }
.ios-alert-desc  { font-size: 14px; color: var(--ios-text3); }
.ios-alert-link  { margin-top: 4px; display: inline-block; font-size: 14px; font-weight: 700; color: var(--ios-blue); text-decoration: none; }

/* Credit Hero Card */
.ios-credit-card {
  background: var(--ios-surface);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--ios-border);
  position: relative;
  overflow: hidden;
}
.ios-credit-tier {
  position: absolute;
  top: 24px; right: 24px;
  background: var(--ios-blue-light);
  color: var(--ios-blue);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ios-credit-label { font-size: 15px; font-weight: 600; color: var(--ios-text3); margin-bottom: 4px; }
.ios-credit-amount { font-size: 48px; font-weight: 800; color: var(--ios-text); letter-spacing: -1.5px; margin-bottom: 4px; }
.ios-credit-sub { font-size: 13px; color: var(--ios-text3); margin-bottom: 24px; }
.ios-credit-actions { display: flex; gap: 12px; }
.ios-credit-btn {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s, opacity 0.15s;
}
.ios-credit-btn.primary { background: var(--ios-blue); color: #fff; }
.ios-credit-btn.ghost { background: var(--ios-bg); color: var(--ios-text); }
.ios-credit-btn:active { transform: scale(0.97); opacity: 0.9; }

/* Section Headers */
.ios-section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; padding: 0 4px; }
.ios-section-title { font-size: 20px; font-weight: 800; color: var(--ios-text); letter-spacing: -0.4px; }
.ios-section-link  { font-size: 15px; font-weight: 600; color: var(--ios-blue); text-decoration: none; }

/* Tools Grid */
.ios-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (min-width: 640px) {
  .ios-tools-grid { grid-template-columns: repeat(4, 1fr); }
}

.ios-tool-card {
  background: var(--ios-surface);
  border-radius: var(--radius-card);
  padding: 20px 16px;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--ios-border);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ios-tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-deep); }
.ios-tool-card.locked { opacity: 0.6; cursor: not-allowed; }

.ios-tool-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}
.ios-tool-icon.blue { background: rgba(0,122,255,0.1); color: var(--ios-blue); }
.ios-tool-icon.teal { background: rgba(90,200,250,0.1); color: var(--ios-teal); }
.ios-tool-icon.green { background: rgba(52,199,89,0.1); color: var(--ios-green); }
.ios-tool-icon.indigo { background: rgba(88,86,214,0.1); color: var(--ios-indigo); }

.ios-tool-name { font-size: 15px; font-weight: 700; color: var(--ios-text); margin-bottom: 4px; }
.ios-tool-desc { font-size: 12px; color: var(--ios-text3); line-height: 1.3; }

/* Stats Row */
.ios-stats-row { display: flex; gap: 16px; margin-bottom: 32px; }
.ios-stat-card {
  flex: 1;
  background: var(--ios-surface);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--ios-border);
}
.ios-stat-label { font-size: 13px; font-weight: 600; color: var(--ios-text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.ios-stat-value { font-size: 28px; font-weight: 800; color: var(--ios-text); }
.ios-stat-value.green { color: var(--ios-green); }

/* Campaigns List */
.ios-campaigns-section {
  background: var(--ios-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--ios-border);
  overflow: hidden;
}
.ios-campaign-row {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ios-border);
  text-decoration: none;
  transition: background 0.1s;
}
.ios-campaign-row:last-child { border-bottom: none; }
.ios-campaign-row:hover { background: var(--ios-bg); }

.ios-campaign-icon {
  width: 44px; height: 44px;
  background: var(--ios-blue-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}
.ios-campaign-name { font-size: 16px; font-weight: 700; color: var(--ios-text); margin-bottom: 2px; }
.ios-campaign-date { font-size: 13px; color: var(--ios-text3); }

.ios-campaign-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  margin-left: 12px;
  letter-spacing: 0.5px;
}
.badge-draft { background: rgba(60,60,67,0.08); color: var(--ios-text3); }
.badge-processing { background: rgba(255,149,0,0.12); color: var(--ios-orange); }
.badge-live, .badge-completed { background: rgba(52,199,89,0.12); color: var(--ios-green); }
.badge-resubmit, .badge-needs-revision { background: rgba(255,204,0,0.15); color: #B28B00; }
.badge-cancelled { background: rgba(255,59,48,0.12); color: var(--ios-red); }
.badge-default { background: var(--ios-blue-light); color: var(--ios-blue); }

.ios-chevron { font-size: 14px; color: var(--ios-border); margin-left: 16px; }

/* Empty State */
.ios-empty-state { padding: 60px 20px; text-align: center; }
.ios-empty-icon { font-size: 48px; margin-bottom: 16px; }
.ios-empty-title { font-size: 19px; font-weight: 700; color: var(--ios-text); margin-bottom: 8px; }
.ios-empty-desc { font-size: 15px; color: var(--ios-text3); margin-bottom: 28px; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.4; }

/* Custom Scrollbar for modern look */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }