/* ============================================================
   APPLE DNA — main.css
   Design System CSS Classes
   ============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES (TOKENS)
   ============================================================ */
:root {
  /* Neutrals */
  --color-white:     #FFFFFF;
  --color-offwhite:  #F5F5F7;
  --color-gray-50:   #FAFAFC;
  --color-gray-100:  #E8E8ED;
  --color-gray-200:  #D2D2D7;
  --color-gray-300:  #86868B;
  --color-gray-400:  #6E6E73;
  --color-gray-500:  #1D1D1F;
  --color-gray-900:  #000000;

  /* Action */
  --color-apple-blue:       #0066CC;
  --color-apple-blue-hover: #0077ED;
  --color-apple-blue-light: #E3F2FF;

  /* Feedback */
  --color-success: #28CD41;
  --color-warning: #FF9F0A;
  --color-error:   #FF3B30;
  --color-info:    #5E5CE6;

  /* Gradients */
  --gradient-hero:   linear-gradient(180deg, #F5F5F7 0%, #FFFFFF 100%);
  --gradient-button: linear-gradient(180deg, #0077ED 0%, #0066CC 100%);

  /* Typography — Families */
  --font-sans:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'SF Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;

  /* Typography — Sizes */
  --text-caption2:     0.6875rem;
  --text-caption1:     0.75rem;
  --text-footnote:     0.8125rem;
  --text-subheadline:  0.9375rem;
  --text-callout:      1rem;
  --text-body:         1.0625rem;
  --text-headline:     1.1875rem;
  --text-title3:       1.25rem;
  --text-title2:       1.375rem;
  --text-title1:       1.75rem;
  --text-large-title:  2.5rem;
  --text-hero-title:   3.5rem;
  --text-display:      4rem;

  /* Typography — Weights */
  --weight-ultralight: 100;
  --weight-thin:       200;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-heavy:      800;
  --weight-black:      900;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.02em;
  --tracking-display: -0.015em;

  /* Line Heights */
  --leading-tight:   1.1;
  --leading-normal:  1.3;
  --leading-relaxed: 1.5;
  --leading-loose:   1.6;

  /* Spacing */
  --space-05: 0.125rem;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;

  /* Border Radius */
  --radius-sm:     0.375rem;
  --radius-md:     0.5rem;
  --radius-lg:     0.75rem;
  --radius-xl:     1rem;
  --radius-2xl:    1.5rem;
  --radius-full:   9999px;
  --radius-button: 980px;

  /* Shadows */
  --shadow-sm:          0 1px 3px rgba(0,0,0,.02), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md:          0 4px 6px -1px rgba(0,0,0,.03), 0 2px 4px -1px rgba(0,0,0,.02);
  --shadow-lg:          0 10px 15px -3px rgba(0,0,0,.03), 0 4px 6px -2px rgba(0,0,0,.02);
  --shadow-xl:          0 20px 25px -5px rgba(0,0,0,.03), 0 10px 10px -5px rgba(0,0,0,.02);
  --shadow-inner:       inset 0 1px 2px rgba(0,0,0,.02);
  --shadow-button:      0 2px 5px rgba(0,102,204,.2);
  --shadow-button-hover:0 5px 15px rgba(0,102,204,.3);

  /* Easing */
  --ease-apple:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-apple-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-apple-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-apple-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-apple-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Durations */
  --duration-instant:    0s;
  --duration-fast:       100ms;
  --duration-base:       200ms;
  --duration-slow:       300ms;
  --duration-slower:     400ms;
  --duration-extra-slow: 600ms;
  --duration-page:       500ms;
}


/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes apple-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes apple-fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes apple-fade-in-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes apple-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes apple-subtle-bounce {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes apple-subtle-pulse {
  0%,100% { box-shadow: 0 2px 5px rgba(0,102,204,.2); }
  50%     { box-shadow: 0 5px 20px rgba(0,102,204,.4); }
}


/* ============================================================
   BASE RESET & GLOBALS
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-500);
  background-color: var(--color-white);
}


/* ============================================================
   TYPOGRAPHY — FONT FAMILY
   ============================================================ */
.font-sans    { font-family: var(--font-sans); }
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }


/* ============================================================
   TYPOGRAPHY — SIZES
   ============================================================ */
.text-caption2    { font-size: var(--text-caption2); }
.text-caption1    { font-size: var(--text-caption1); }
.text-footnote    { font-size: var(--text-footnote); }
.text-subheadline { font-size: var(--text-subheadline); }
.text-callout     { font-size: var(--text-callout); }
.text-body        { font-size: var(--text-body); }
.text-headline    { font-size: var(--text-headline); }
.text-title3      { font-size: var(--text-title3); }
.text-title2      { font-size: var(--text-title2); }
.text-title1      { font-size: var(--text-title1); }
.text-large-title { font-size: var(--text-large-title); }
.text-hero-title  { font-size: var(--text-hero-title); }
.text-display     { font-size: var(--text-display); }


/* ============================================================
   TYPOGRAPHY — WEIGHTS
   ============================================================ */
.font-ultralight { font-weight: var(--weight-ultralight); }
.font-thin       { font-weight: var(--weight-thin); }
.font-light      { font-weight: var(--weight-light); }
.font-regular    { font-weight: var(--weight-regular); }
.font-medium     { font-weight: var(--weight-medium); }
.font-semibold   { font-weight: var(--weight-semibold); }
.font-bold       { font-weight: var(--weight-bold); }
.font-heavy      { font-weight: var(--weight-heavy); }
.font-black      { font-weight: var(--weight-black); }


/* ============================================================
   TYPOGRAPHY — LETTER SPACING
   ============================================================ */
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-display { letter-spacing: var(--tracking-display); }


/* ============================================================
   TYPOGRAPHY — LINE HEIGHT
   ============================================================ */
.leading-tight   { line-height: var(--leading-tight); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose   { line-height: var(--leading-loose); }


/* ============================================================
   TYPOGRAPHY — SEMANTIC / COMPOSED STYLES
   ============================================================ */
.apple-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--color-gray-500);
}

.apple-hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--color-gray-500);
}

.apple-large-title {
  font-family: var(--font-display);
  font-size: var(--text-large-title);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-gray-500);
}

.apple-title1 {
  font-family: var(--font-display);
  font-size: var(--text-title1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-normal);
  color: var(--color-gray-500);
}

.apple-title2 {
  font-family: var(--font-sans);
  font-size: var(--text-title2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-normal);
  color: var(--color-gray-500);
}

.apple-title3 {
  font-family: var(--font-sans);
  font-size: var(--text-title3);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--color-gray-500);
}

.apple-headline {
  font-family: var(--font-sans);
  font-size: var(--text-headline);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--color-gray-500);
}

.apple-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-500);
}

.apple-callout {
  font-family: var(--font-sans);
  font-size: var(--text-callout);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-400);
}

.apple-subheadline {
  font-family: var(--font-sans);
  font-size: var(--text-subheadline);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-400);
}

.apple-footnote {
  font-family: var(--font-sans);
  font-size: var(--text-footnote);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-300);
}

.apple-caption1 {
  font-family: var(--font-sans);
  font-size: var(--text-caption1);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-gray-300);
}

.apple-caption2 {
  font-family: var(--font-sans);
  font-size: var(--text-caption2);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-gray-300);
}


/* ============================================================
   COLORS — BACKGROUNDS
   ============================================================ */
.bg-white         { background-color: var(--color-white); }
.bg-offwhite      { background-color: var(--color-offwhite); }
.bg-gray-50       { background-color: var(--color-gray-50); }
.bg-gray-100      { background-color: var(--color-gray-100); }
.bg-gray-200      { background-color: var(--color-gray-200); }
.bg-gray-300      { background-color: var(--color-gray-300); }
.bg-gray-400      { background-color: var(--color-gray-400); }
.bg-gray-500      { background-color: var(--color-gray-500); }
.bg-gray-900      { background-color: var(--color-gray-900); }
.bg-apple-blue    { background-color: var(--color-apple-blue); }
.bg-apple-blue-light { background-color: var(--color-apple-blue-light); }
.bg-success       { background-color: var(--color-success); }
.bg-warning       { background-color: var(--color-warning); }
.bg-error         { background-color: var(--color-error); }
.bg-info          { background-color: var(--color-info); }
.bg-gradient-hero   { background: var(--gradient-hero); }
.bg-gradient-button { background: var(--gradient-button); }


/* ============================================================
   COLORS — TEXT
   ============================================================ */
.text-white      { color: var(--color-white); }
.text-offwhite   { color: var(--color-offwhite); }
.text-gray-300   { color: var(--color-gray-300); }
.text-gray-400   { color: var(--color-gray-400); }
.text-gray-500   { color: var(--color-gray-500); }
.text-gray-900   { color: var(--color-gray-900); }
.text-apple-blue { color: var(--color-apple-blue); }
.text-success    { color: var(--color-success); }
.text-warning    { color: var(--color-warning); }
.text-error      { color: var(--color-error); }
.text-info       { color: var(--color-info); }


/* ============================================================
   BORDERS
   ============================================================ */
.border          { border: 1px solid var(--color-gray-100); }
.border-light    { border: 1px solid var(--color-gray-200); }
.border-medium   { border: 1px solid var(--color-gray-300); }

.rounded-sm     { border-radius: var(--radius-sm); }
.rounded-md     { border-radius: var(--radius-md); }
.rounded-lg     { border-radius: var(--radius-lg); }
.rounded-xl     { border-radius: var(--radius-xl); }
.rounded-2xl    { border-radius: var(--radius-2xl); }
.rounded-full   { border-radius: var(--radius-full); }
.rounded-button { border-radius: var(--radius-button); }


/* ============================================================
   SHADOWS
   ============================================================ */
.shadow-sm     { box-shadow: var(--shadow-sm); }
.shadow-md     { box-shadow: var(--shadow-md); }
.shadow-lg     { box-shadow: var(--shadow-lg); }
.shadow-xl     { box-shadow: var(--shadow-xl); }
.shadow-inner  { box-shadow: var(--shadow-inner); }
.shadow-button { box-shadow: var(--shadow-button); }


/* ============================================================
   SPACING — PADDING (single value shortcuts)
   ============================================================ */
.p-05 { padding: var(--space-05); }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }
.p-24 { padding: var(--space-24); }

.px-2  { padding-left: var(--space-2);  padding-right: var(--space-2); }
.px-3  { padding-left: var(--space-3);  padding-right: var(--space-3); }
.px-4  { padding-left: var(--space-4);  padding-right: var(--space-4); }
.px-5  { padding-left: var(--space-5);  padding-right: var(--space-5); }
.px-6  { padding-left: var(--space-6);  padding-right: var(--space-6); }
.px-8  { padding-left: var(--space-8);  padding-right: var(--space-8); }
.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
.px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
.px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
.px-24 { padding-left: var(--space-24); padding-right: var(--space-24); }

.py-2  { padding-top: var(--space-2);  padding-bottom: var(--space-2); }
.py-3  { padding-top: var(--space-3);  padding-bottom: var(--space-3); }
.py-4  { padding-top: var(--space-4);  padding-bottom: var(--space-4); }
.py-5  { padding-top: var(--space-5);  padding-bottom: var(--space-5); }
.py-6  { padding-top: var(--space-6);  padding-bottom: var(--space-6); }
.py-8  { padding-top: var(--space-8);  padding-bottom: var(--space-8); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }


/* ============================================================
   SPACING — MARGIN
   ============================================================ */
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-4  { margin: var(--space-4); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }

.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }


/* ============================================================
   TRANSITIONS & ANIMATIONS — UTILITY CLASSES
   ============================================================ */
.transition-apple  { transition: all var(--duration-base) var(--ease-apple); }
.transition-fast   { transition: all var(--duration-fast) var(--ease-apple); }
.transition-slow   { transition: all var(--duration-slow) var(--ease-apple); }
.transition-bounce { transition: all var(--duration-base) var(--ease-apple-bounce); }
.transition-smooth { transition: all var(--duration-slow) var(--ease-apple-smooth); }
.transition-opacity   { transition: opacity var(--duration-base) var(--ease-apple); }
.transition-transform { transition: transform var(--duration-base) var(--ease-apple); }
.transition-shadow    { transition: box-shadow var(--duration-base) var(--ease-apple); }
.transition-color     { transition: background-color var(--duration-fast) var(--ease-apple), border-color var(--duration-fast) var(--ease-apple); }

/* Animation classes */
.animate-fade-in     { animation: apple-fade-in     var(--duration-slow) var(--ease-apple-out) both; }
.animate-fade-in-up  { animation: apple-fade-in-up  var(--duration-slow) var(--ease-apple-out) both; }
.animate-fade-in-down{ animation: apple-fade-in-down var(--duration-slow) var(--ease-apple-out) both; }
.animate-scale-in    { animation: apple-scale-in    var(--duration-slow) var(--ease-apple-bounce) both; }
.animate-bounce      { animation: apple-subtle-bounce var(--duration-slower) var(--ease-apple) infinite; }
.animate-pulse       { animation: apple-subtle-pulse var(--duration-extra-slow) var(--ease-apple) infinite; }

/* Staggered delay helpers */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }


/* ============================================================
   COMPONENTS — BUTTON
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-subheadline);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  text-decoration: none;
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: var(--radius-button);
  padding: var(--space-3) var(--space-6);
  transition: all var(--duration-base) var(--ease-apple);
  -webkit-user-select: none;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-apple-blue);
  outline-offset: 3px;
}

/* Primary */
.btn-primary {
  background: var(--gradient-button);
  color: var(--color-white);
  box-shadow: var(--shadow-button);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #1a8bff 0%, #0077ED 100%);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-button);
}

/* Secondary */
.btn-secondary {
  background-color: var(--color-gray-100);
  color: var(--color-apple-blue);
}
.btn-secondary:hover {
  background-color: var(--color-gray-200);
}
.btn-secondary:active {
  background-color: var(--color-gray-200);
}

/* Ghost */
.btn-ghost {
  background-color: transparent;
  color: var(--color-apple-blue);
  padding-left: 0;
  padding-right: 0;
}
.btn-ghost:hover {
  color: var(--color-apple-blue-hover);
}

/* Destructive */
.btn-destructive {
  background-color: var(--color-error);
  color: var(--color-white);
}
.btn-destructive:hover {
  background-color: #e5352a;
  transform: translateY(-1px);
}

/* Sizes */
.btn-sm {
  font-size: var(--text-footnote);
  padding: var(--space-2) var(--space-4);
}
.btn-lg {
  font-size: var(--text-headline);
  padding: var(--space-4) var(--space-10);
}

/* Disabled state */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}


/* ============================================================
   COMPONENTS — CARD
   ============================================================ */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-apple), transform var(--duration-base) var(--ease-apple);
}
.card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

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

.card-header {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-gray-100);
}

.card-footer {
  padding: var(--space-4) var(--space-8);
  border-top: 1px solid var(--color-gray-100);
  background-color: var(--color-gray-50);
}


/* ============================================================
   COMPONENTS — BADGE / PILL
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-caption1);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
.badge-blue    { background-color: var(--color-apple-blue-light); color: var(--color-apple-blue); }
.badge-success { background-color: rgba(40,205,65,.12); color: var(--color-success); }
.badge-warning { background-color: rgba(255,159,10,.12); color: var(--color-warning); }
.badge-error   { background-color: rgba(255,59,48,.12);  color: var(--color-error); }
.badge-info    { background-color: rgba(94,92,230,.12);  color: var(--color-info); }
.badge-neutral { background-color: var(--color-gray-100); color: var(--color-gray-400); }


/* ============================================================
   COMPONENTS — INPUT / FORM
   ============================================================ */
.input {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  color: var(--color-gray-500);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-apple), box-shadow var(--duration-fast) var(--ease-apple);
}
.input::placeholder {
  color: var(--color-gray-300);
}
.input:focus {
  border-color: var(--color-apple-blue);
  box-shadow: 0 0 0 3px rgba(0,102,204,.15);
}
.input:disabled {
  background-color: var(--color-gray-50);
  color: var(--color-gray-300);
  cursor: not-allowed;
}

.label {
  display: block;
  font-size: var(--text-footnote);
  font-weight: var(--weight-medium);
  color: var(--color-gray-500);
  margin-bottom: var(--space-2);
}


/* ============================================================
   COMPONENTS — DIVIDER
   ============================================================ */
.divider {
  border: none;
  border-top: 1px solid var(--color-gray-100);
  margin: var(--space-8) 0;
}


/* ============================================================
   COMPONENTS — NAV / HEADER
   ============================================================ */
.apple-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3rem;
  padding: 0 var(--space-8);
  background-color: rgba(255,255,255,.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.05);
}


/* ============================================================
   COMPONENTS — FEEDBACK BANNERS
   ============================================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  font-size: var(--text-footnote);
  font-weight: var(--weight-medium);
}
.alert-success { background-color: rgba(40,205,65,.1);  color: #1a8c2e; }
.alert-warning { background-color: rgba(255,159,10,.1); color: #c47800; }
.alert-error   { background-color: rgba(255,59,48,.1);  color: #cc2c23; }
.alert-info    { background-color: rgba(94,92,230,.1);  color: #4240b0; }


/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container {
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.container-wide {
  max-width: 1200px;
}

.container-narrow {
  max-width: 680px;
}

.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.grid     { display: grid; }
.grid-2   { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4   { display: grid; grid-template-columns: repeat(4, 1fr); }

.w-full   { width: 100%; }
.h-full   { height: 100%; }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}