/* ============================================================
   socialmocial-premium.css
   Apple-Inspired Design System — SocialMocial v2.0
   Premium overlay — loaded after socialmocial-theme.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   1. DESIGN TOKENS — Apple Design Language
   ============================================================ */
:root {
  /* Typography — SF Pro inspired hierarchy */
  --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Type Scale */
  --text-display: 34px;
  --text-title1: 28px;
  --text-title2: 22px;
  --text-title3: 17px;
  --text-headline: 15px;
  --text-body: 15px;
  --text-callout: 14px;
  --text-subhead: 13px;
  --text-footnote: 12px;
  --text-caption: 11px;

  /* Colors — Apple HIG Palette */
  --bg-page: #F5F5F7;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: rgba(255, 255, 255, 0.72);
  --bg-surface-muted: #F5F5F7;
  --bg-grouped: #F2F2F7;
  --bg-sidebar: #1D1D1F;
  --bg-sidebar-hover: rgba(255, 255, 255, 0.08);
  --bg-sidebar-active: rgba(255, 255, 255, 0.12);

  --brand-primary: #0071E3;
  --brand-primary-hover: #0077ED;
  --brand-primary-light: rgba(0, 113, 227, 0.08);
  --brand-secondary: #147CE5;
  --brand-accent: #FF9500;
  --brand-accent-light: rgba(255, 149, 0, 0.08);
  --brand-purple: #AF52DE;
  --brand-pink: #FF2D55;
  --brand-teal: #5AC8FA;
  --brand-indigo: #5856D6;

  --text-primary: #1D1D1F;
  --text-secondary: #86868B;
  --text-tertiary: #AEAEB2;
  --text-muted: #C7C7CC;
  --text-inverse: #FFFFFF;
  --text-link: #0071E3;

  --border-default: rgba(0, 0, 0, 0.08);
  --border-subtle: rgba(0, 0, 0, 0.04);
  --border-focus: #0071E3;
  --border-separator: rgba(60, 60, 67, 0.12);

  --success: #30D158;
  --success-bg: rgba(48, 209, 88, 0.08);
  --warning: #FF9F0A;
  --warning-bg: rgba(255, 159, 10, 0.08);
  --danger: #FF3B30;
  --danger-bg: rgba(255, 59, 48, 0.08);
  --info: #0A84FF;
  --info-bg: rgba(10, 132, 255, 0.08);

  /* Spacing — 8pt grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius — Apple rounded corners */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 100px;

  /* Shadows — layered Apple depth */
  --shadow-subtle: 0 0.5px 1px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.2);

  /* Motion — Apple spring curves */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-blur: blur(20px) saturate(180%);
  --glass-border: rgba(255, 255, 255, 0.18);
}

/* ============================================================
   2. BASE RESET — Apple feel
   ============================================================ */
html, body {
  font-family: var(--font-primary) !important;
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
  margin: 0;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  font-size: var(--text-body);
  line-height: 1.47059;
  letter-spacing: -0.022em;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* ============================================================
   3. SCROLLBAR — thin, Apple-style
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
  background-clip: content-box;
}

/* ============================================================
   4. TOPBAR — frosted glass
   ============================================================ */
.socialmocial-topbar {
  height: 52px !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 0.5px solid var(--border-separator) !important;
  box-shadow: none !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

.socialmocial-topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.socialmocial-brand-name {
  font-size: var(--text-headline) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
}

.socialmocial-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}

.socialmocial-topbar .credits-pill {
  background: var(--brand-primary-light) !important;
  color: var(--brand-primary) !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  padding: 5px 12px !important;
  font-size: var(--text-footnote) !important;
  font-weight: 600 !important;
}

.socialmocial-topbar .user-name {
  font-size: var(--text-subhead) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}

.socialmocial-topbar .user-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-full) !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: var(--text-inverse) !important;
  font-size: var(--text-footnote) !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform var(--duration-fast) var(--ease-default) !important;
}
.socialmocial-topbar .user-avatar:hover {
  transform: scale(1.05) !important;
}

.socialmocial-topbar .user-dropdown-menu {
  background: var(--bg-surface) !important;
  border: 0.5px solid var(--border-separator) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xl) !important;
  padding: 4px !important;
  min-width: 180px !important;
}
.socialmocial-topbar .user-dropdown-menu button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  border: none !important;
  background: transparent !important;
  border-radius: var(--radius-xs) !important;
  font-size: var(--text-subhead) !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  transition: background var(--duration-fast) var(--ease-default) !important;
}
.socialmocial-topbar .user-dropdown-menu button:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* ============================================================
   5. LAYOUT GRID
   ============================================================ */
.socialmocial-layout {
  display: grid !important;
  grid-template-columns: 68px 260px minmax(0, 1fr) !important;
  height: calc(100vh - 52px) !important;
  transition: grid-template-columns var(--duration-normal) var(--ease-default) !important;
}
.socialmocial-layout.rail-open {
  grid-template-columns: 240px 260px minmax(0, 1fr) !important;
}
.socialmocial-layout.no-submenu {
  grid-template-columns: 68px 0 minmax(0, 1fr) !important;
}
.socialmocial-layout.rail-open.no-submenu {
  grid-template-columns: 240px 0 minmax(0, 1fr) !important;
}
.socialmocial-layout.publish-right-submenu {
  grid-template-columns: 68px minmax(0, 1fr) 260px !important;
}
.socialmocial-layout.accounts-mode,
.socialmocial-layout.competitors-mode {
  grid-template-columns: 68px minmax(0, 1fr) !important;
}

/* ============================================================
   6. RAIL NAVIGATION — dark, Apple Sidebar style
   ============================================================ */
.socialmocial-rail {
  background: var(--bg-sidebar) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  transition: width var(--duration-normal) var(--ease-default) !important;
}

.socialmocial-rail-toggle,
.socialmocial-rail-pin {
  color: rgba(255, 255, 255, 0.45) !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  height: 36px !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  font-size: var(--text-subhead) !important;
  transition: all var(--duration-fast) var(--ease-default) !important;
}
.socialmocial-rail-toggle:hover,
.socialmocial-rail-pin:hover {
  background: var(--bg-sidebar-hover) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.socialmocial-rail-group-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.3) !important;
  padding: 16px 12px 6px !important;
  margin: 0 !important;
  user-select: none !important;
}

.socialmocial-rail-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: var(--text-subhead) !important;
  font-weight: 500 !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  text-align: left !important;
  transition: all var(--duration-fast) var(--ease-default) !important;
  position: relative !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.socialmocial-rail-item:hover {
  background: var(--bg-sidebar-hover) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
.socialmocial-rail-item.active {
  background: var(--bg-sidebar-active) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.socialmocial-rail-item .icon {
  flex-shrink: 0 !important;
  width: 22px !important;
  text-align: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: 0.85 !important;
}
.socialmocial-rail-item.active .icon {
  opacity: 1 !important;
}

.socialmocial-rail-item .label {
  font-size: var(--text-subhead) !important;
  opacity: 0 !important;
  transition: opacity var(--duration-fast) var(--ease-default) !important;
  white-space: nowrap !important;
}
.socialmocial-layout.rail-open .socialmocial-rail-item .label {
  opacity: 1 !important;
}

/* ============================================================
   7. SIDEBAR — secondary nav
   ============================================================ */
.socialmocial-sidebar {
  background: var(--bg-surface) !important;
  border-right: 0.5px solid var(--border-separator) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px 16px !important;
  transition: width var(--duration-normal) var(--ease-default), opacity var(--duration-fast) var(--ease-default) !important;
}

.socialmocial-sidebar h2,
.socialmocial-sidebar .submenu-group-label,
.socialmocial-secondary-submenu h2 {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  margin: 0 0 8px !important;
  padding: 0 4px !important;
}

.socialmocial-submenu-feature-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.socialmocial-submenu-feature-list button {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  border: none !important;
  background: transparent !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--text-subhead) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all var(--duration-fast) var(--ease-default) !important;
}
.socialmocial-submenu-feature-list button:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
.socialmocial-submenu-feature-list button.active {
  background: var(--brand-primary-light) !important;
  color: var(--brand-primary) !important;
  font-weight: 600 !important;
}

/* ============================================================
   8. MAIN CONTENT AREA
   ============================================================ */
.socialmocial-main {
  background: var(--bg-page) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 32px 40px !important;
}

/* ============================================================
   9. CARDS — clean Apple surfaces
   ============================================================ */
.socialmocial-feature-card,
.socialmocial-card,
.feature-detail-card,
.analytics-feature-card,
.monitoring-feature-card,
.module-card {
  background: var(--bg-surface) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 24px !important;
  transition: box-shadow var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default) !important;
}
.socialmocial-feature-card:hover,
.socialmocial-card:hover,
.feature-detail-card:hover,
.analytics-feature-card:hover,
.monitoring-feature-card:hover,
.module-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

.socialmocial-feature-card h3,
.feature-detail-card h3,
.module-card h3 {
  font-size: var(--text-title3) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 0 6px !important;
  letter-spacing: -0.02em !important;
}

.socialmocial-feature-card p,
.feature-detail-card p,
.module-card p {
  font-size: var(--text-subhead) !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ============================================================
   10. BUTTONS — Apple HIG style
   ============================================================ */
.socialmocial-btn-primary,
button.primary,
.btn-primary {
  background: var(--brand-primary) !important;
  color: var(--text-inverse) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 18px !important;
  font-size: var(--text-callout) !important;
  font-weight: 500 !important;
  font-family: var(--font-primary) !important;
  cursor: pointer !important;
  transition: all var(--duration-fast) var(--ease-default) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1.2 !important;
  min-height: 34px !important;
  letter-spacing: -0.01em !important;
}
.socialmocial-btn-primary:hover,
button.primary:hover,
.btn-primary:hover {
  background: var(--brand-primary-hover) !important;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3) !important;
  transform: scale(1.01) !important;
}
.socialmocial-btn-primary:active,
button.primary:active,
.btn-primary:active {
  transform: scale(0.98) !important;
  box-shadow: none !important;
}

.socialmocial-btn-secondary,
button.secondary,
.btn-secondary {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 18px !important;
  font-size: var(--text-callout) !important;
  font-weight: 500 !important;
  font-family: var(--font-primary) !important;
  cursor: pointer !important;
  transition: all var(--duration-fast) var(--ease-default) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 34px !important;
}
.socialmocial-btn-secondary:hover,
button.secondary:hover,
.btn-secondary:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.socialmocial-btn-ghost,
button.ghost,
.btn-ghost {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 12px !important;
  font-size: var(--text-subhead) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all var(--duration-fast) var(--ease-default) !important;
}
.socialmocial-btn-ghost:hover,
button.ghost:hover,
.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   11. FORM INPUTS — Apple clean
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  font-family: var(--font-primary) !important;
  font-size: var(--text-callout) !important;
  color: var(--text-primary) !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 12px !important;
  min-height: 34px !important;
  outline: none !important;
  transition: all var(--duration-fast) var(--ease-default) !important;
  -webkit-appearance: none !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
}

/* ============================================================
   12. TABLES — minimal Apple style
   ============================================================ */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: var(--text-subhead) !important;
}
th {
  font-size: var(--text-caption) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--text-secondary) !important;
  text-align: left !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--border-separator) !important;
  background: transparent !important;
}
td {
  padding: 12px 16px !important;
  border-bottom: 0.5px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  vertical-align: middle !important;
}
tr:hover td {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* ============================================================
   13. MODALS — Apple sheet style
   ============================================================ */
.socialmocial-modal-backdrop,
.queue-modal-backdrop,
.publish-composer-backdrop {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.socialmocial-modal,
.queue-modal-dialog,
.publish-composer-modal {
  background: var(--bg-surface) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-modal) !important;
  border: none !important;
  overflow: hidden !important;
}

.socialmocial-modal h2,
.socialmocial-modal h3,
.queue-modal-dialog h3 {
  font-size: var(--text-title2) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   14. EMPTY STATES — centered, generous spacing
   ============================================================ */
.premium-empty-state,
.socialmocial-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 64px 32px !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}
.premium-empty-state .empty-icon,
.socialmocial-empty-state .empty-icon {
  font-size: 56px !important;
  margin-bottom: 20px !important;
  opacity: 0.4 !important;
}
.premium-empty-state h3,
.socialmocial-empty-state h3 {
  font-size: var(--text-title3) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 0 8px !important;
}
.premium-empty-state p,
.socialmocial-empty-state p {
  font-size: var(--text-callout) !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
  margin: 0 0 20px !important;
}

/* ============================================================
   15. BADGES & PILLS
   ============================================================ */
.badge, .pill, .tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: var(--radius-full) !important;
  font-size: var(--text-caption) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}
.badge-success { background: var(--success-bg) !important; color: #1A8D4E !important; }
.badge-warning { background: var(--warning-bg) !important; color: #B36D00 !important; }
.badge-danger  { background: var(--danger-bg) !important;  color: #CC2F26 !important; }
.badge-info    { background: var(--info-bg) !important;    color: #0066CC !important; }

/* ============================================================
   16. STATUS & LIVE INDICATORS
   ============================================================ */
.live-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--success) !important;
  display: inline-block !important;
  animation: pulse-live 2s infinite !important;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================================
   17. TYPOGRAPHY UTILITIES
   ============================================================ */
.text-display  { font-size: var(--text-display) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; }
.text-title1   { font-size: var(--text-title1) !important;  font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; }
.text-title2   { font-size: var(--text-title2) !important;  font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; }
.text-title3   { font-size: var(--text-title3) !important;  font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1.25 !important; }
.text-headline { font-size: var(--text-headline) !important; font-weight: 600 !important; line-height: 1.3 !important; }
.text-body     { font-size: var(--text-body) !important;    font-weight: 400 !important; line-height: 1.47 !important; }
.text-callout  { font-size: var(--text-callout) !important; font-weight: 400 !important; line-height: 1.4 !important; }
.text-subhead  { font-size: var(--text-subhead) !important; font-weight: 400 !important; line-height: 1.38 !important; }
.text-footnote { font-size: var(--text-footnote) !important; font-weight: 400 !important; line-height: 1.33 !important; }
.text-caption  { font-size: var(--text-caption) !important; font-weight: 400 !important; line-height: 1.27 !important; }

.text-primary   { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-link      { color: var(--text-link) !important; }

/* ============================================================
   18. TRANSITION HELPERS
   ============================================================ */
.transition-all { transition: all var(--duration-normal) var(--ease-default) !important; }
.transition-fast { transition: all var(--duration-fast) var(--ease-default) !important; }

/* ============================================================
   19. GLOBAL OVERRIDES — ensure Apple feel everywhere
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: -0.02em !important;
}

a {
  color: var(--text-link) !important;
  text-decoration: none !important;
  transition: opacity var(--duration-fast) var(--ease-default) !important;
}
a:hover {
  opacity: 0.8 !important;
}

/* Focus ring — Apple accessibility */
:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.3) !important;
  border-radius: var(--radius-sm);
}

/* Selection color */
::selection {
  background: rgba(0, 113, 227, 0.2);
  color: inherit;
}

/* Separator line */
hr, .separator {
  border: none !important;
  height: 0.5px !important;
  background: var(--border-separator) !important;
  margin: 20px 0 !important;
}