/* ════════════════════════════════════════════════════════════════════
   iOS NATIVE DESIGN SYSTEM · Wavult Group · 2026
   Faithful iOS 18/26 fidelity — SF Pro, system colors, native chrome
   ════════════════════════════════════════════════════════════════════ */

/* ── FONT STACK ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');

/* ── DESIGN TOKENS ──────────────────────────────────────────────── */
:root {
  /* iOS System Font */
  --ios-font: -apple-system, 'SF Pro Text', 'SF Pro Display', system-ui,
              BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ios-font-rounded: -apple-system, 'SF Pro Rounded', system-ui, sans-serif;
  --ios-font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', monospace;

  /* iOS System Colors — Light Mode */
  --ios-blue:         #007AFF;
  --ios-green:        #34C759;
  --ios-red:          #FF3B30;
  --ios-orange:       #FF9500;
  --ios-yellow:       #FFCC00;
  --ios-teal:         #30B0C7;
  --ios-indigo:       #5856D6;
  --ios-purple:       #AF52DE;
  --ios-pink:         #FF2D55;
  --ios-cyan:         #32ADE6;

  /* iOS Semantic Colors — Light */
  --ios-label:               #000000;
  --ios-secondary-label:     rgba(60,60,67,.6);
  --ios-tertiary-label:      rgba(60,60,67,.3);
  --ios-quaternary-label:    rgba(60,60,67,.18);
  --ios-placeholder:         rgba(60,60,67,.3);
  --ios-link:                #007AFF;
  --ios-separator:           rgba(60,60,67,.29);
  --ios-opaque-separator:    #C6C6C8;

  /* iOS Background Colors — Light */
  --ios-bg:                  #F2F2F7;       /* grouped table bg */
  --ios-bg-secondary:        #FFFFFF;       /* card / cell bg */
  --ios-bg-tertiary:         #F2F2F7;
  --ios-bg-grouped:          #F2F2F7;
  --ios-bg-grouped-secondary:#FFFFFF;
  --ios-bg-elevated:         #FFFFFF;
  --ios-bg-nav:              rgba(242,242,247,.85);  /* frosted nav */

  /* iOS Fill Colors */
  --ios-fill:          rgba(120,120,128,.2);
  --ios-fill-secondary:rgba(120,120,128,.16);
  --ios-fill-tertiary: rgba(118,118,128,.12);
  --ios-fill-quaternary:rgba(116,116,128,.08);

  /* Wallet / Finance Colors */
  --ios-wallet-green:  #25C26E;
  --ios-wallet-red:    #FF453A;

  /* Layout Constants */
  --ios-navbar-height:   44px;
  --ios-navbar-lg-height:96px;
  --ios-tabbar-height:   49px;
  --ios-safe-top:        47px;  /* status bar */
  --ios-safe-bottom:     34px;  /* home indicator */
  --ios-corner:          13px;
  --ios-corner-lg:       20px;
  --ios-corner-xl:       28px;

  /* Shadows */
  --ios-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --ios-shadow:    0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --ios-shadow-lg: 0 8px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);

  /* Liquid Glass */
  --ios-glass-bg: rgba(255,255,255,.72);
  --ios-glass-border: rgba(255,255,255,.6);
  --ios-glass-blur: blur(20px) saturate(180%);

  /* Animation */
  --ios-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ios-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ios-duration: 0.25s;
}

/* ── DARK MODE ──────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) { :root { --ios-dark: 1; } }
[data-theme="dark"] {
  --ios-label:               #FFFFFF;
  --ios-secondary-label:     rgba(235,235,245,.6);
  --ios-tertiary-label:      rgba(235,235,245,.3);
  --ios-quaternary-label:    rgba(235,235,245,.18);
  --ios-placeholder:         rgba(235,235,245,.3);
  --ios-separator:           rgba(84,84,88,.65);
  --ios-opaque-separator:    #38383A;
  --ios-bg:                  #000000;
  --ios-bg-secondary:        #1C1C1E;
  --ios-bg-tertiary:         #2C2C2E;
  --ios-bg-grouped:          #000000;
  --ios-bg-grouped-secondary:#1C1C1E;
  --ios-bg-elevated:         #1C1C1E;
  --ios-bg-nav:              rgba(0,0,0,.82);
  --ios-fill:                rgba(120,120,128,.36);
  --ios-fill-secondary:      rgba(120,120,128,.32);
  --ios-fill-tertiary:       rgba(118,118,128,.24);
  --ios-fill-quaternary:     rgba(116,116,128,.18);
  --ios-glass-bg:            rgba(28,28,30,.82);
  --ios-glass-border:        rgba(255,255,255,.12);
  --ios-blue:                #0A84FF;
  --ios-green:               #30D158;
  --ios-red:                 #FF453A;
  --ios-orange:              #FF9F0A;
  --ios-yellow:              #FFD60A;
  --ios-wallet-green:        #30D158;
  --ios-wallet-red:          #FF453A;
}

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── BASE ───────────────────────────────────────────────────────── */
.ios-page {
  font-family: var(--ios-font);
  background: var(--ios-bg);
  color: var(--ios-label);
  min-height: 100vh;
  padding-top: var(--ios-navbar-height);
  padding-bottom: calc(var(--ios-tabbar-height) + var(--ios-safe-bottom));
  font-size: 17px;
  line-height: 1.47;
}

/* ── NAVIGATION BAR ─────────────────────────────────────────────── */
.ios-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--ios-navbar-height);
  background: var(--ios-glass-bg);
  -webkit-backdrop-filter: var(--ios-glass-blur);
  backdrop-filter: var(--ios-glass-blur);
  border-bottom: 0.5px solid var(--ios-separator);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 8px;
}

.ios-navbar-back {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--ios-blue);
  font-size: 17px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

.ios-navbar-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--ios-label);
  letter-spacing: -0.4px;
}

.ios-navbar-action {
  color: var(--ios-blue);
  font-size: 17px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Large Title mode */
.ios-large-title-header {
  background: var(--ios-glass-bg);
  -webkit-backdrop-filter: var(--ios-glass-blur);
  backdrop-filter: var(--ios-glass-blur);
  padding: 0 20px 8px;
  border-bottom: 0.5px solid var(--ios-separator);
}

.ios-large-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.37px;
  color: var(--ios-label);
  line-height: 1.12;
}

/* ── TAB BAR ────────────────────────────────────────────────────── */
.ios-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: calc(var(--ios-tabbar-height) + var(--ios-safe-bottom));
  padding-bottom: var(--ios-safe-bottom);
  background: var(--ios-glass-bg);
  -webkit-backdrop-filter: var(--ios-glass-blur);
  backdrop-filter: var(--ios-glass-blur);
  border-top: 0.5px solid var(--ios-separator);
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}

.ios-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--ios-secondary-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12px;
  padding: 4px 0;
  min-height: 44px;
  transition: color var(--ios-duration) var(--ios-ease);
  text-decoration: none;
}

.ios-tab.active { color: var(--ios-blue); }
.ios-tab-icon { font-size: 24px; line-height: 1; }
.ios-tab-label { font-size: 10px; }

/* ── SEARCH BAR ─────────────────────────────────────────────────── */
.ios-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--ios-bg);
}

.ios-searchbar-inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ios-fill-tertiary);
  border-radius: 10px;
  padding: 7px 10px;
  height: 36px;
}

.ios-searchbar-icon { font-size: 14px; color: var(--ios-secondary-label); }

.ios-searchbar-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--ios-font);
  font-size: 17px;
  color: var(--ios-label);
  min-width: 0;
}

.ios-searchbar-input::placeholder { color: var(--ios-secondary-label); }

.ios-searchbar-cancel {
  color: var(--ios-blue);
  font-size: 17px;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  padding: 0;
  white-space: nowrap;
}

.ios-searchbar-inner:focus-within ~ .ios-searchbar-cancel,
.ios-searchbar.focused .ios-searchbar-cancel { display: block; }

/* ── CARDS ──────────────────────────────────────────────────────── */
.ios-card {
  background: var(--ios-bg-grouped-secondary);
  border-radius: var(--ios-corner);
  overflow: hidden;
  box-shadow: var(--ios-shadow-sm);
}

.ios-card-inset {
  background: var(--ios-bg-grouped-secondary);
  border-radius: var(--ios-corner);
  margin: 0 16px;
  overflow: hidden;
}

/* ── LIST / TABLE VIEW ──────────────────────────────────────────── */
.ios-list-section {
  margin: 28px 0 0;
  padding: 0 16px;
}

.ios-list-header {
  font-size: 13px;
  font-weight: 400;
  color: var(--ios-secondary-label);
  letter-spacing: -0.08px;
  text-transform: uppercase;
  font-size: 12px;
  padding: 0 0 6px 16px;
}

.ios-list {
  background: var(--ios-bg-grouped-secondary);
  border-radius: var(--ios-corner);
  overflow: hidden;
}

.ios-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  min-height: 44px;
  border-bottom: 0.5px solid var(--ios-separator);
  cursor: pointer;
  transition: background var(--ios-duration) var(--ios-ease);
  background: var(--ios-bg-grouped-secondary);
  position: relative;
  text-decoration: none;
  color: var(--ios-label);
}

.ios-list-item:last-child { border-bottom: none; }
.ios-list-item:active,
.ios-list-item.pressed { background: var(--ios-fill-quaternary); }

.ios-list-icon {
  width: 29px;
  height: 29px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  color: #fff;
}

.ios-list-content { flex: 1; min-width: 0; }
.ios-list-title { font-size: 17px; color: var(--ios-label); }
.ios-list-subtitle { font-size: 15px; color: var(--ios-secondary-label); }

.ios-list-value {
  font-size: 17px;
  color: var(--ios-secondary-label);
  flex-shrink: 0;
}

.ios-list-chevron::after {
  content: '›';
  font-size: 20px;
  color: var(--ios-tertiary-label);
  margin-left: 4px;
}

/* ── BUTTONS ────────────────────────────────────────────────────── */
.ios-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--ios-font);
  font-size: 17px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  border-radius: 14px;
  padding: 14px 20px;
  transition: opacity var(--ios-duration) var(--ios-ease),
              transform var(--ios-duration) var(--ios-ease);
  min-height: 50px;
  line-height: 1.2;
  text-decoration: none;
}

.ios-btn:active { opacity: 0.7; transform: scale(0.97); }

.ios-btn-primary { background: var(--ios-blue); color: #fff; }
.ios-btn-secondary { background: var(--ios-fill-tertiary); color: var(--ios-blue); }
.ios-btn-destructive { background: var(--ios-fill-tertiary); color: var(--ios-red); }
.ios-btn-plain { background: none; color: var(--ios-blue); padding: 8px 12px; min-height: 44px; }

.ios-btn-sm {
  font-size: 15px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  min-height: 36px;
  min-width: 54px;
}

/* ── SEGMENTED CONTROL ──────────────────────────────────────────── */
.ios-segmented {
  display: flex;
  background: var(--ios-fill-tertiary);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}

.ios-segment {
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ios-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-label);
  padding: 6px 8px;
  border-radius: 7px;
  transition: background var(--ios-duration) var(--ios-ease),
              box-shadow var(--ios-duration) var(--ios-ease);
  min-height: 32px;
}

.ios-segment.active {
  background: var(--ios-bg-secondary);
  box-shadow: 0 1px 4px rgba(0,0,0,.1), 0 0 0 0.5px rgba(0,0,0,.06);
  font-weight: 600;
}

/* ── LIQUID GLASS ───────────────────────────────────────────────── */
.ios-glass {
  background: var(--ios-glass-bg);
  -webkit-backdrop-filter: var(--ios-glass-blur);
  backdrop-filter: var(--ios-glass-blur);
  border: 0.5px solid var(--ios-glass-border);
}

/* ── STAT WIDGET ────────────────────────────────────────────────── */
.ios-stat {
  padding: 16px;
}

.ios-stat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-secondary-label);
  letter-spacing: -0.08px;
  margin-bottom: 4px;
}

.ios-stat-value {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.37px;
  color: var(--ios-label);
  line-height: 1.12;
}

.ios-stat-value-sm {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.35px;
}

.ios-stat-delta {
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
}

.ios-stat-delta.up { color: var(--ios-green); }
.ios-stat-delta.down { color: var(--ios-red); }

/* ── BADGE ──────────────────────────────────────────────────────── */
.ios-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ios-red);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  padding: 0 6px;
}

.ios-badge-blue { background: var(--ios-blue); }
.ios-badge-green { background: var(--ios-green); }
.ios-badge-gray { background: var(--ios-secondary-label); }

/* ── SPARKLINE ──────────────────────────────────────────────────── */
.ios-sparkline { display: flex; align-items: flex-end; gap: 1.5px; height: 28px; }
.ios-sparkline-bar {
  flex: 1;
  min-height: 2px;
  border-radius: 1px;
  background: var(--ios-blue);
  opacity: 0.7;
  transition: height 0.3s var(--ios-ease);
}

/* ── ACTIVITY RING ──────────────────────────────────────────────── */
.ios-ring-container { position: relative; display: inline-flex; }
.ios-ring-svg { transform: rotate(-90deg); }
.ios-ring-track { fill: none; stroke-linecap: round; }
.ios-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

/* ── WALLET CARD ────────────────────────────────────────────────── */
.ios-wallet-card {
  border-radius: var(--ios-corner-xl);
  padding: 20px;
  color: #fff;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: var(--ios-shadow-lg);
  transition: transform var(--ios-duration) var(--ios-ease);
  cursor: pointer;
}

.ios-wallet-card:active { transform: scale(0.97); }

.ios-wallet-stack {
  position: relative;
  margin: 16px;
}

.ios-wallet-stack .ios-wallet-card:not(:first-child) {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  transform-origin: bottom center;
}

.ios-wallet-stack .ios-wallet-card:nth-child(2) {
  transform: translateY(-8px) scale(0.95);
  z-index: -1;
}

.ios-wallet-stack .ios-wallet-card:nth-child(3) {
  transform: translateY(-16px) scale(0.9);
  z-index: -2;
}

/* ── CONTENT PADDING ────────────────────────────────────────────── */
.ios-content {
  padding: 0 0 24px;
}

.ios-section-gap { height: 28px; }

/* ── SETTINGS STYLE ─────────────────────────────────────────────── */
.ios-settings-icon {
  width: 29px;
  height: 29px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  color: #fff;
}

.ios-settings-group {
  margin: 28px 16px 0;
}

.ios-settings-group-label {
  font-size: 13px;
  color: var(--ios-secondary-label);
  letter-spacing: -0.08px;
  padding: 0 0 6px 16px;
  text-transform: uppercase;
  font-size: 12px;
}

/* ── SHEET / MODAL ──────────────────────────────────────────────── */
.ios-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ios-duration) var(--ios-ease);
}

.ios-sheet-overlay.open { opacity: 1; pointer-events: all; }

.ios-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ios-bg-elevated);
  border-radius: var(--ios-corner-xl) var(--ios-corner-xl) 0 0;
  z-index: 901;
  transform: translateY(100%);
  transition: transform 0.35s var(--ios-spring);
  padding-bottom: var(--ios-safe-bottom);
  max-height: 90vh;
  overflow-y: auto;
}

.ios-sheet.open { transform: translateY(0); }

.ios-sheet-handle {
  width: 36px;
  height: 5px;
  background: var(--ios-fill-tertiary);
  border-radius: 2.5px;
  margin: 8px auto 16px;
}

/* ── PULL TO REFRESH ────────────────────────────────────────────── */
.ios-ptr-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  color: var(--ios-secondary-label);
  font-size: 20px;
  animation: iosSpin 0.8s linear infinite;
}

@keyframes iosSpin { to { transform: rotate(360deg); } }

/* ── SWIPE ACTIONS ──────────────────────────────────────────────── */
.ios-swipe-wrapper { position: relative; overflow: hidden; }
.ios-swipe-actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  transform: translateX(100%);
  transition: transform var(--ios-duration) var(--ios-ease);
}
.ios-swipe-action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  min-width: 74px;
  flex-direction: column;
  gap: 4px;
}
.ios-swipe-action-icon { font-size: 20px; }

/* ── SCROLL UTILITIES ───────────────────────────────────────────── */
.ios-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ios-scroll-x::-webkit-scrollbar { display: none; }

.ios-scroll-y {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ios-scroll-y::-webkit-scrollbar { display: none; }

/* ── RESPONSIVE — TABLET / DESKTOP ──────────────────────────────── */
@media (min-width: 768px) {
  .ios-page {
    max-width: 834px;  /* iPad */
    margin: 0 auto;
  }

  .ios-tabbar {
    left: 50%;
    transform: translateX(-50%);
    max-width: 834px;
  }

  .ios-navbar {
    left: 50%;
    transform: translateX(-50%);
    max-width: 834px;
  }
}

@media (min-width: 1280px) {
  .ios-page {
    max-width: 1280px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .ios-page .ios-sidebar-desktop {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--ios-bg-secondary);
    border-right: 0.5px solid var(--ios-separator);
    padding: 16px 0;
  }

  .ios-page .ios-main-desktop {
    overflow-y: auto;
    height: 100vh;
  }

  .ios-tabbar { display: none; }

  .ios-navbar {
    position: sticky;
    top: 0;
    transform: none;
    left: auto;
    right: auto;
    max-width: none;
  }
}

/* ── TODAY WIDGET SIZES ──────────────────────────────────────────── */
.ios-widget-sm {
  width: 155px;
  height: 155px;
  border-radius: var(--ios-corner-lg);
  padding: 16px;
  background: var(--ios-bg-grouped-secondary);
  box-shadow: var(--ios-shadow);
  overflow: hidden;
}

.ios-widget-md {
  width: 329px;
  height: 155px;
  border-radius: var(--ios-corner-lg);
  padding: 16px;
  background: var(--ios-bg-grouped-secondary);
  box-shadow: var(--ios-shadow);
  overflow: hidden;
}

.ios-widget-lg {
  width: 329px;
  height: 329px;
  border-radius: var(--ios-corner-lg);
  padding: 16px;
  background: var(--ios-bg-grouped-secondary);
  box-shadow: var(--ios-shadow);
  overflow: hidden;
}

.ios-widget-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-secondary-label);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* ── STOCKS CHART ────────────────────────────────────────────────── */
.ios-chart-line {
  width: 100%;
  overflow: hidden;
}

.ios-chart-line svg { overflow: visible; }

.ios-crosshair {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ios-secondary-label);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
}

.ios-crosshair.visible { opacity: 1; }

/* ── MISC ─────────────────────────────────────────────────────────── */
.ios-divider {
  height: 0.5px;
  background: var(--ios-separator);
  margin: 0 16px;
}

.ios-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 12px;
  text-align: center;
}

.ios-empty-icon { font-size: 48px; opacity: 0.3; }
.ios-empty-title { font-size: 20px; font-weight: 600; }
.ios-empty-subtitle { font-size: 15px; color: var(--ios-secondary-label); }

/* ── TAG / CHIP ──────────────────────────────────────────────────── */
.ios-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ios-fill-tertiary);
  color: var(--ios-label);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
}

.ios-chip-blue { background: rgba(0,122,255,.12); color: var(--ios-blue); }
.ios-chip-green { background: rgba(52,199,89,.12); color: var(--ios-green); }
.ios-chip-red { background: rgba(255,59,48,.12); color: var(--ios-red); }
.ios-chip-orange { background: rgba(255,149,0,.12); color: var(--ios-orange); }