/**
 * ==============================================================================
 *  APPLE HUMAN INTERFACE GUIDELINES (HIG) CORE DESIGN SYSTEM
 * Version: 2.0.0 (2026 Production Release)
 * Standard: Apple HIG Web Mastery & visionOS Spatial Materials
 * Target: bijoyacademy/css/apple-hig-core.css
 * ==============================================================================
 */

/* ==========================================================================
   1. DESIGN TOKENS & CSS CUSTOM PROPERTIES (LIGHT MODE / PORCELAIN ALABASTER)
   ========================================================================== */
:root {
  /* --- Canvas & Surfaces (Porcelain Daylight) --- */
  --apple-bg-primary: #F5F5F7;               /* Apple Signature Porcelain Off-White */
  --apple-bg-secondary: #FFFFFF;             /* Pure White Elevated Surface / Card */
  --apple-bg-tertiary: #E8E8ED;              /* Grouped Container / Recessed Well */
  --apple-bg-grouped: #F2F2F7;               /* Apple Grouped Table Background */
  --apple-bg-sunken: rgba(15, 23, 42, 0.03); /* Inset Calculation Well */
  
  /* --- Text & Label Hierarchy (WCAG AAA Contrast) --- */
  --apple-label-primary: #1D1D1F;            /* Deep Obsidian (90% contrast, never #000) */
  --apple-label-secondary: #86868B;          /* Neutral Slate Microcopy */
  --apple-label-tertiary: #6E6E73;           /* Footnotes & Captions */
  --apple-label-quaternary: #D2D2D7;         /* Watermarks & Inactive Placeholders */

  /* --- Borders, Hairlines & Separators --- */
  --apple-border-subtle: rgba(0, 0, 0, 0.08);       /* 1px Retina Hairline */
  --apple-border-strong: rgba(60, 60, 67, 0.29);     /* Explicit Field Outline */
  --apple-border-specular: rgba(255, 255, 255, 0.85);/* 0.5px Top Rim Specular Shine */
  --apple-separator: rgba(60, 60, 67, 0.18);

  /* --- System Accent Tints (Cupertino Daylight) --- */
  --apple-blue: #0071E3;                     /* Apple Signature Interactive Blue */
  --apple-blue-rgb: 0, 113, 227;
  --apple-blue-hover: #0077ED;
  --apple-indigo: #5856D6;
  --apple-purple: #AF52DE;
  --apple-pink: #FF2D55;
  --apple-red: #FF3B30;                      /* Destructive / Loss Alert */
  --apple-orange: #FF9500;                   /* Warning / Attention */
  --apple-yellow: #FFCC00;
  --apple-green: #34C759;                    /* Success / Profit */
  --apple-green-rgb: 52, 199, 89;
  --apple-mint: #00C7BE;
  --apple-teal: #30B0C7;
  --apple-cyan: #32ADE6;

  /* --- Fills & States --- */
  --apple-fill-primary: rgba(120, 120, 128, 0.20);
  --apple-fill-secondary: rgba(120, 120, 128, 0.16);
  --apple-fill-tertiary: rgba(118, 118, 128, 0.12);
  --apple-fill-quaternary: rgba(116, 116, 128, 0.08);

  /* --- Apple Liquid Glass Acrylic Materials --- */
  --apple-glass-bg: rgba(255, 255, 255, 0.72);
  --apple-glass-border: rgba(255, 255, 255, 0.50);
  --apple-glass-blur: 24px;
  --apple-glass-saturate: 180%;
  --apple-glass-specular: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
  --apple-glass-highlight: rgba(255, 255, 255, 0.9);

  /* --- Typography Font Stacks --- */
  --apple-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  --apple-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  --apple-font-mono: "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, ui-monospace, monospace;
  --apple-font-serif: "New York", "Charter", "Georgia", serif;

  /* --- Continuous Curvature (Squircle) Tokens --- */
  --apple-radius-xs: 6px;
  --apple-radius-sm: 10px;                   /* Small tags, pills, mini badges */
  --apple-radius-md: 14px;                   /* Inputs, buttons, segmented controls */
  --apple-radius-lg: 20px;                   /* Inner nested cards, secondary pods */
  --apple-radius-xl: 28px;                   /* Bento grid tiles, primary card containers */
  --apple-radius-2xl: 38px;                  /* Dynamic Island, large modal sheets */
  --apple-radius-pill: 9999px;               /* Universal Pill & Action Caps */

  /* --- Apple Spring-Physics Motion & Easing --- */
  --apple-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --apple-ease-spring-snappy: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --apple-ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
  --apple-ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --apple-duration-fast: 140ms;
  --apple-duration-normal: 260ms;
  --apple-duration-slow: 380ms;

  /* --- Ambient Occlusion & Volumetric Shadows --- */
  --apple-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --apple-shadow-sm: 0 2px 8px -1px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
  --apple-shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.03), inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
  --apple-shadow-lg: 0 20px 48px -8px rgba(0, 0, 0, 0.08), 0 8px 16px -2px rgba(0, 0, 0, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 1);
  --apple-shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   2. DARK MODE (PRO OBSIDIAN & OLED MIDNIGHT)
   ========================================================================== */
[data-theme="dark"] {
  /* --- Surfaces & Canvas (OLED Obsidian) --- */
  --apple-bg-primary: #000000;               /* True Pitch OLED Black */
  --apple-bg-secondary: #1C1C1E;             /* Apple System Gray 6 Dark (Card) */
  --apple-bg-tertiary: #2C2C2E;              /* Apple System Gray 5 Dark */
  --apple-bg-grouped: #000000;
  --apple-bg-sunken: rgba(255, 255, 255, 0.04);

  /* --- Text & Label Hierarchy --- */
  --apple-label-primary: #F5F5F7;            /* Apple Crisp Off-White */
  --apple-label-secondary: #A1A1A6;          /* Muted Metallic Titanium */
  --apple-label-tertiary: #636366;           /* Subtle Charcoal */
  --apple-label-quaternary: #48484A;

  /* --- Borders & Separators --- */
  --apple-border-subtle: rgba(255, 255, 255, 0.08);
  --apple-border-strong: rgba(255, 255, 255, 0.16);
  --apple-border-specular: rgba(255, 255, 255, 0.20);
  --apple-separator: rgba(84, 84, 88, 0.65);

  /* --- System Accent Tints (Vibrant OLED Tuned) --- */
  --apple-blue: #0A84FF;
  --apple-blue-rgb: 10, 132, 255;
  --apple-blue-hover: #409CFF;
  --apple-indigo: #5E5CE6;
  --apple-purple: #BF5AF2;
  --apple-pink: #FF375F;
  --apple-red: #FF453A;
  --apple-orange: #FF9F0A;
  --apple-yellow: #FFD60A;
  --apple-green: #30D158;
  --apple-green-rgb: 48, 209, 88;
  --apple-mint: #63E6E2;
  --apple-teal: #40C8E0;
  --apple-cyan: #64D2FF;

  /* --- Fills --- */
  --apple-fill-primary: rgba(120, 120, 128, 0.36);
  --apple-fill-secondary: rgba(120, 120, 128, 0.32);
  --apple-fill-tertiary: rgba(118, 118, 128, 0.24);
  --apple-fill-quaternary: rgba(116, 116, 128, 0.18);

  /* --- Liquid Glass Acrylic Materials (Dark) --- */
  --apple-glass-bg: rgba(28, 28, 30, 0.72);
  --apple-glass-border: rgba(255, 255, 255, 0.12);
  --apple-glass-specular: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
  --apple-glass-highlight: rgba(255, 255, 255, 0.22);

  /* --- Dark Shadows --- */
  --apple-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --apple-shadow-sm: 0 2px 8px -1px rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --apple-shadow-md: 0 12px 30px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  --apple-shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
  --apple-shadow-glass: 0 16px 40px 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
}

/* Automatic OS dark mode support when no explicit theme attribute is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --apple-bg-primary: #000000;
    --apple-bg-secondary: #1C1C1E;
    --apple-bg-tertiary: #2C2C2E;
    --apple-bg-grouped: #000000;
    --apple-bg-sunken: rgba(255, 255, 255, 0.04);
    --apple-label-primary: #F5F5F7;
    --apple-label-secondary: #A1A1A6;
    --apple-label-tertiary: #636366;
    --apple-label-quaternary: #48484A;
    --apple-border-subtle: rgba(255, 255, 255, 0.08);
    --apple-border-strong: rgba(255, 255, 255, 0.16);
    --apple-border-specular: rgba(255, 255, 255, 0.20);
    --apple-separator: rgba(84, 84, 88, 0.65);
    --apple-blue: #0A84FF;
    --apple-blue-rgb: 10, 132, 255;
    --apple-blue-hover: #409CFF;
    --apple-green: #30D158;
    --apple-green-rgb: 48, 209, 88;
    --apple-glass-bg: rgba(28, 28, 30, 0.72);
    --apple-glass-border: rgba(255, 255, 255, 0.12);
    --apple-glass-highlight: rgba(255, 255, 255, 0.22);
    --apple-shadow-glass: 0 16px 40px 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
  }
}

/* ==========================================================================
   3. BASE RESET & VIEWPORT INTEGRATION (MCVP-v2.0)
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  width: 100%;
  overflow-x: clip;
  background-color: var(--apple-bg-primary);
  color: var(--apple-label-primary);
  font-family: var(--apple-font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--apple-duration-normal) ease, color var(--apple-duration-normal) ease;
}

/* ==========================================================================
   4. APPLE TYPOGRAPHY ENGINE & SAN FRANCISCO SCALE
   ========================================================================== */
.apple-hero-display {
  font-family: var(--apple-font-display);
  font-size: clamp(24px, 5vw, 48px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--apple-label-primary);
}

.apple-large-title {
  font-family: var(--apple-font-display);
  font-size: clamp(18px, 4vw, 30px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--apple-label-primary);
}

.apple-title-1 {
  font-family: var(--apple-font-display);
  font-size: clamp(18px, 3.2vw, 28px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--apple-label-primary);
}

.apple-title-2 {
  font-family: var(--apple-font-display);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--apple-label-primary);
}

.apple-title-3 {
  font-family: var(--apple-font-display);
  font-size: 20px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.017em;
  color: var(--apple-label-primary);
}

.apple-headline {
  font-family: var(--apple-font-sans);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.016em;
  color: var(--apple-label-primary);
}

.apple-body {
  font-family: var(--apple-font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--apple-label-secondary);
}

.apple-callout {
  font-family: var(--apple-font-sans);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--apple-label-secondary);
}

.apple-subheadline {
  font-family: var(--apple-font-sans);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--apple-label-secondary);
}

.apple-footnote {
  font-family: var(--apple-font-sans);
  font-size: 13px;
  line-height: 1.38;
  font-weight: 400;
  letter-spacing: 0.006em;
  color: var(--apple-label-tertiary);
}

.apple-eyebrow {
  font-family: var(--apple-font-mono);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--apple-blue);
}

/* Tabular Figures for Live Calculations */
.apple-tabular-nums,
.apple-num,
.apple-currency,
.apple-metric {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

/* ==========================================================================
   5. APPLE LIQUID GLASS & ACRYLIC SURFACES
   ========================================================================== */
.apple-glass-card,
.apple-glass-panel {
  position: relative;
  background: var(--apple-glass-bg);
  backdrop-filter: blur(var(--apple-glass-blur)) saturate(var(--apple-glass-saturate));
  -webkit-backdrop-filter: blur(var(--apple-glass-blur)) saturate(var(--apple-glass-saturate));
  border: 1px solid var(--apple-glass-border);
  border-radius: var(--apple-radius-xl);
  box-shadow: var(--apple-shadow-glass);
  padding: 28px;
  color: var(--apple-label-primary);
  overflow: hidden;
  transform: translateZ(0);
  transition: transform var(--apple-duration-normal) var(--apple-ease-spring),
              box-shadow var(--apple-duration-normal) var(--apple-ease-smooth),
              border-color var(--apple-duration-normal) ease;
}

.apple-glass-card::before,
.apple-glass-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--apple-glass-highlight) 50%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.apple-glass-card.interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.12);
  border-color: rgba(var(--apple-blue-rgb), 0.35);
}

.apple-card {
  position: relative;
  background-color: var(--apple-bg-secondary);
  border: 1px solid var(--apple-border-subtle);
  border-radius: var(--apple-radius-xl);
  box-shadow: var(--apple-shadow-sm), inset 0 1px 0 0 var(--apple-border-specular);
  padding: 24px;
  overflow: hidden;
  transition: transform var(--apple-duration-normal) var(--apple-ease-spring),
              box-shadow var(--apple-duration-normal) var(--apple-ease-smooth);
}

.apple-card.interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--apple-shadow-md);
}

/* ==========================================================================
   6. APPLE UI BUTTONS & SPRING INTERACTIONS
   ========================================================================== */
.apple-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 22px;
  font-family: var(--apple-font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.016em;
  border-radius: var(--apple-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  outline: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--apple-duration-fast) var(--apple-ease-spring),
              background-color var(--apple-duration-normal) ease,
              box-shadow var(--apple-duration-normal) ease,
              border-color var(--apple-duration-normal) ease;
  will-change: transform;
}

.apple-btn:active {
  transform: scale(0.96);
  transition-duration: 70ms;
}

.apple-btn-primary {
  background-color: var(--apple-blue);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(var(--apple-blue-rgb), 0.28),
              inset 0 0.5px 0.5px rgba(255, 255, 255, 0.4);
}

.apple-btn-primary:hover {
  background-color: var(--apple-blue-hover);
  transform: translateY(-0.5px);
  box-shadow: 0 4px 16px rgba(var(--apple-blue-rgb), 0.40);
}

.apple-btn-glass {
  background: var(--apple-glass-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: var(--apple-label-primary);
  border-color: var(--apple-glass-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
              inset 0 0.5px 0.5px rgba(255, 255, 255, 0.6);
}

.apple-btn-glass:hover {
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-0.5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .apple-btn-glass:hover {
  background: rgba(45, 45, 48, 0.9);
}

.apple-btn-secondary {
  background-color: var(--apple-fill-primary);
  color: var(--apple-label-primary);
}

.apple-btn-secondary:hover {
  background-color: var(--apple-fill-secondary);
}

.apple-btn-destructive {
  background-color: var(--apple-red);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

/* ==========================================================================
   7. APPLE BENTO GRID TILES (ASYMMETRICAL 12-COLUMN)
   ========================================================================== */
.apple-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.apple-bento-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--apple-bg-secondary);
  border: 1px solid var(--apple-border-subtle);
  border-radius: var(--apple-radius-xl);
  padding: 32px;
  box-shadow: var(--apple-shadow-sm);
  overflow: hidden;
  transition: transform var(--apple-duration-normal) var(--apple-ease-spring),
              box-shadow var(--apple-duration-normal) var(--apple-ease-smooth);
}

.apple-bento-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--apple-border-specular) 50%, transparent 100%);
  pointer-events: none;
}

.apple-bento-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--apple-shadow-md);
}

.bento-col-12 { grid-column: span 12; }
.bento-col-8  { grid-column: span 8; }
.bento-col-6  { grid-column: span 6; }
.bento-col-4  { grid-column: span 4; }
.bento-col-3  { grid-column: span 3; }

@media (max-width: 900px) {
  .apple-bento-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .bento-col-8, .bento-col-4, .bento-col-6, .bento-col-3 {
    grid-column: span 6;
  }
}

@media (max-width: 600px) {
  .apple-bento-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bento-col-12, .bento-col-8, .bento-col-6, .bento-col-4, .bento-col-3 {
    grid-column: span 1;
  }
  .apple-input-group {
    padding: 12px 0;
  }
  .apple-card {
    padding: 28px;
  }
}

/* ==========================================================================
   8. DYNAMIC ISLAND STATUS CAPSULE
   ========================================================================== */
.apple-dynamic-island {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #000000;
  color: #FFFFFF;
  border-radius: var(--apple-radius-pill);
  padding: 8px 18px;
  min-height: 38px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45),
              inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
  user-select: none;
  cursor: pointer;
  transform: translateZ(0);
  transition: all var(--apple-duration-normal) var(--apple-ease-spring);
  will-change: transform, width;
}

.apple-dynamic-island:hover {
  transform: scale(1.02);
}

.apple-dynamic-island:active {
  transform: scale(0.96);
}

.island-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.island-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--apple-green);
  box-shadow: 0 0 10px var(--apple-green);
  animation: apple-island-pulse 2s infinite ease-in-out;
}

@keyframes apple-island-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.island-text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.island-badge {
  font-family: var(--apple-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--apple-green);
  background: rgba(52, 199, 89, 0.15);
  padding: 2px 8px;
  border-radius: var(--apple-radius-pill);
}

/* ==========================================================================
   9. APPLE FORM INPUTS & FIELD CONTROLS (IOS AUTO-ZOOM HARDENED)
   ========================================================================== */
.apple-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.apple-label {
  font-family: var(--apple-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--apple-label-secondary);
}

.apple-input,
.apple-select,
.apple-textarea {
  width: 100%;
  min-height: 48px;
  font-size: max(16px, 1rem);
  font-family: var(--apple-font-sans);
  color: var(--apple-label-primary);
  background-color: var(--apple-bg-secondary);
  border: 1px solid var(--apple-border-strong);
  border-radius: var(--apple-radius-md);
  padding: 12px 16px;
  outline: none;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--apple-duration-fast) ease,
              box-shadow var(--apple-duration-fast) ease,
              background-color var(--apple-duration-fast) ease;
}

.apple-input:focus,
.apple-select:focus,
.apple-textarea:focus {
  border-color: var(--apple-blue);
  box-shadow: 0 0 0 3.5px rgba(var(--apple-blue-rgb), 0.22);
}

/* ==========================================================================
   10. CONTINUOUS CURVATURE (SQUIRCLE) UTILITIES
   ========================================================================== */
.apple-squircle-sm   { border-radius: var(--apple-radius-sm); }
.apple-squircle-md   { border-radius: var(--apple-radius-md); }
.apple-squircle-lg   { border-radius: var(--apple-radius-lg); }
.apple-squircle-xl   { border-radius: var(--apple-radius-xl); }
.apple-squircle-2xl  { border-radius: var(--apple-radius-2xl); }
.apple-squircle-pill { border-radius: var(--apple-radius-pill); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* CTA banner refinements */
.monetization-cta-card {
  margin-top: 16px;
}
@media (max-width: 480px) {
  .monetization-cta-card {
    width: calc(100% - 2rem);
  }
}