/* iOS system colors and a shared Liquid Glass-inspired material. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
  --bg: #f2f2f7;
  --panel: #ffffff;
  --panel-soft: #e5e5ea;
  --line: #3c3c431f;
  --text: #1c1c1e;
  --muted: #636366;
  --accent: #007aff;
  --accent-dark: #007aff12;
  --action: #007aff;
  --action-text: #fff;
  --glass: #ffffff91;
  --glass-solid: #f9f9fb;
  --suggestion-surface: #fffffff2;
  --glass-edge: #ffffffd9;
  --glass-shine: #ffffffa6;
  --glass-shadow: #0000000e;
  --glass-inner-shadow: #3c3c4310;
  --glass-active: #ffffffc2;
  --surface: #ffffff80;
  --well: #7676800d;
  --hover: #76768012;
  --ambient: #007aff09;
  --focus: #007aff;
  --danger: #c9342a;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #000000;
    --panel: #1c1c1e;
    --panel-soft: #2c2c2e;
    --line: #ffffff1a;
    --text: #f2f2f7;
    --muted: #aeaeb2;
    --accent: #0a84ff;
    --accent-dark: #0a84ff1c;
    --action: #0a84ff;
    --action-text: #fff;
    --glass: #2c2c2e94;
    --glass-solid: #1c1c1e;
    --suggestion-surface: #1c1c1ef5;
    --glass-edge: #ffffff24;
    --glass-shine: #ffffff10;
    --glass-shadow: #00000040;
    --glass-inner-shadow: #00000024;
    --glass-active: #ffffff14;
    --surface: #ffffff0a;
    --well: #76768018;
    --hover: #ffffff0d;
    --ambient: #0a84ff0c;
    --focus: #0a84ff;
    --danger: #ff6961;
  }
}
/* SFSound iOS Glass 1.0: approved product family foundation. */
:root {
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --radius-art: 20px; --radius-card: 26px; --radius-dialog: 28px;
  --glass-blur: 28px;
  --material: linear-gradient(160deg, var(--glass-shine), transparent 42%), var(--glass);
  --material-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 var(--glass-inner-shadow), 0 8px 28px var(--glass-shadow);
  --card-material: linear-gradient(150deg, var(--glass-shine), transparent 70%), var(--surface);
  --card-shadow: inset 0 1px 0 var(--glass-shine), 0 4px 16px var(--glass-shadow);
}
body { background-color: var(--bg); background-image: radial-gradient(ellipse at 50% 0%, var(--ambient), transparent 65%); background-repeat: no-repeat; color: var(--text); font-family: var(--font-system); }
button, input, select, textarea { font-family: inherit; }
input, select, textarea { accent-color: var(--accent); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--action); color: var(--action-text); }
.ios-material, .ios-brand { background: var(--material); border: 1px solid var(--glass-edge); box-shadow: var(--material-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); backdrop-filter: blur(var(--glass-blur)) saturate(180%); color: var(--text); }
.ios-brand { display: inline-flex; width: fit-content; align-items: center; gap: 10px; flex: none; min-height: 64px; padding: 12px 20px; border-radius: 32px; font-size: 24px; font-weight: 650; letter-spacing: -.65px; }
.ios-brand img, .ios-brand > svg { width: 30px; height: 30px; flex: none; }
.ios-surface { background: var(--card-material); border: 1px solid var(--glass-edge); border-radius: var(--radius-card); color: var(--text); box-shadow: var(--card-shadow); }
.ios-nav.ios-nav { --nav-index: 0; position: fixed; z-index: 45; display: flex; align-items: stretch; justify-content: center; left: 50%; right: auto; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(480px, calc(100vw - 28px)); min-height: 66px; padding: 6px; border: 1px solid var(--glass-edge); border-radius: 36px; background: linear-gradient(135deg, var(--glass-shine), transparent 48%), var(--glass); box-shadow: var(--material-shadow); isolation: isolate; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); backdrop-filter: blur(var(--glass-blur)) saturate(180%); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; margin: 0; }
.ios-nav::before { box-sizing: border-box; content: ''; position: absolute; z-index: -1; left: 6px; top: 6px; bottom: 6px; width: calc((100% - 12px) / var(--nav-count, 5)); border-radius: 27px; background: linear-gradient(135deg, var(--glass-shine), transparent), var(--glass-active); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-shine), 0 2px 8px var(--glass-shadow); transform: translate3d(calc(var(--nav-index) * 100%), var(--nav-lift, 0px), 0) scale(var(--nav-stretch, 1), var(--nav-squeeze, 1)); transition: transform .44s cubic-bezier(.18,.9,.24,1); }
.ios-nav.ios-nav :is(button, a) { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; min-width: 0; min-height: 52px; padding: 5px 2px; border: 0; border-radius: 26px; background: none; color: var(--muted); font-size: 10px; font-weight: 650; line-height: 1.4; white-space: nowrap; transition: color .18s, transform .18s; }
.ios-nav.ios-nav :is(button, a) svg { width: 21px; height: 21px; stroke-width: 1.75; }
.ios-nav.ios-nav :is(.on, .active, [aria-current]) { color: var(--accent); background: none; }
.ios-nav.ios-nav :is(button, a):hover { color: var(--text); background: none; }
.ios-nav.ios-nav :is(.on, .active, [aria-current]):hover { color: var(--accent); }
.ios-nav.is-dragging::before { transition: none; }
.ios-nav.is-pressed::before { box-shadow: inset 0 1px 0 var(--glass-shine), 0 3px 12px var(--glass-shadow); }
.ios-nav.ios-nav.is-pressed :is(.on, .active, [aria-current]):not(.is-preview) { color: var(--muted); }
.ios-nav.ios-nav.is-pressed .is-preview { color: var(--accent); }
.ios-nav.ios-nav :is(button, a):focus-visible { outline-offset: 1px; }
@media (max-width: 700px) { :root { --glass-blur: 20px; } .ios-brand { min-height: 60px; padding: 9px 12px; font-size: 21px; gap: 9px; border-radius: 28px; } .ios-nav.ios-nav { bottom: calc(10px + env(safe-area-inset-bottom)); } }
@media (max-width: 359px) { .ios-nav.ios-nav :is(button, a) { font-size: 9px; } }
@media (hover: none), (max-width: 860px) { input, select, textarea { font-size: 16px; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --material: var(--glass-solid); } .ios-nav.ios-nav { background: var(--glass-solid); } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root { --material: var(--glass-solid); --glass-blur: 0px; --glass-edge: var(--muted); --card-material: var(--panel); } body { background-image: none; } .ios-nav.ios-nav { background: var(--glass-solid); } .ios-nav::before { background: var(--panel-soft); border-color: var(--muted); } }
@media (prefers-reduced-motion: reduce) { .ios-nav::before, .ios-nav.ios-nav :is(button, a) { transition: none; } }
@media (forced-colors: active) { :root { --bg: Canvas; --panel: Canvas; --text: CanvasText; --muted: CanvasText; --line: CanvasText; --accent: LinkText; --action: Highlight; --action-text: HighlightText; --material: Canvas; --card-material: Canvas; --glass-edge: CanvasText; --material-shadow: none; --card-shadow: none; } .ios-nav.ios-nav { background: Canvas; } .ios-nav::before { background: Highlight; border-color: Highlight; } .ios-nav.ios-nav :is(.on, .active, [aria-current]) { color: HighlightText; } }