/*
 * liquid-glass-v2.css — Hypatia OS Liquid Glass 2.0
 *
 * macOS 26 / iOS 26 Liquid Glass translated to web CSS.
 * Glass card pattern: contained-app (tdeverx) ResourceGlassCard
 * Spring physics:     kinetics.colorion.co
 * Motion tuning:      transitions.dev/refine token vocabulary
 *
 * FULLY THEME-AWARE — uses var(--accent), var(--accent-dim),
 * var(--accent-glow), var(--border), var(--bg-card), var(--text)
 * throughout. Never hardcodes palette values.
 * Works with all 20+ Hypatia themes in dark AND light mode.
 *
 * Load order (AFTER):  tokens.css  →  theme-*.css  →  ios-glass.css  →  THIS FILE
 * Skip on:             hymusic.html (Spotify flat design conflicts)
 *                      pages with window._HY_THEME_SKIP = true
 *
 * Version: 2026-07-11
 */

/* ═══════════════════════════════════════════════════════════════════════
   §0  Spring Physics Easing Library  (kinetics.colorion.co)
       These tokens are also exported to tokens.css §Transitions.
       Defined here as fallback in case tokens.css hasn't been updated yet.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Apple macOS 26 standard card spring (response:0.42, damping:0.86) ── */
  --spring-card:      0.42s cubic-bezier(0.34, 1.06, 0.64, 1.00);
  /* ── Snappy overshoot — kinetics "Card Resize" ── */
  --spring-snappy:    0.50s cubic-bezier(0.34, 1.56, 0.64, 1.00);
  /* ── Smooth entry — kinetics "Accordion Spring" ── */
  --spring-smooth:    0.45s cubic-bezier(0.16, 1.00, 0.30, 1.00);
  /* ── Toast bounce — kinetics "Toast Overshoot" ── */
  --spring-bounce:    0.55s cubic-bezier(0.18, 1.25, 0.40, 1.00);
  /* ── Tab glide — kinetics "Tab Pill Glide" ── */
  --spring-glide:     0.40s cubic-bezier(0.65, 0.00, 0.35, 1.00);
  /* ── Magnetic hover — kinetics "Magnetic Button" ease-out ── */
  --spring-magnetic:  0.15s cubic-bezier(0.40, 0.00, 0.20, 1.00);
  /* ── Micro-interactions (ripple, badge pop) ── */
  --spring-micro:     0.20s cubic-bezier(0.34, 1.56, 0.64, 1.00);
  /* ── Number bump — kinetics "Number Counter" ── */
  --spring-bump:      0.40s cubic-bezier(0.34, 1.56, 0.64, 1.00);

  /* ── Liquid Glass geometry ── */
  --lg-radius:         18px;
  --lg-radius-sm:      12px;
  --lg-radius-lg:      24px;
  --lg-radius-pill:    9999px;

  /* ── Blur levels ── */
  --lg-blur:           24px;
  --lg-blur-heavy:     40px;
  --lg-blur-light:     14px;

  /* ── Shadow recipe (dark) — contained-app ExteriorShadow ── */
  --lg-shadow:         0 4px 10px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.35);
  --lg-shadow-lg:      0 8px 28px rgba(0,0,0,0.60), 0 2px 4px rgba(0,0,0,0.30);
  --lg-shadow-inset:   inset 0 1.5px 0 rgba(255,255,255,0.10);
  --lg-shadow-inset-strong: inset 0 1.5px 0 rgba(255,255,255,0.18);

  /* ── Ambient accent glow — resolves per theme ── */
  --lg-glow:           0 0 20px var(--accent-glow, rgba(255,255,255,0.10));
  --lg-glow-strong:    0 0 36px var(--accent-glow, rgba(255,255,255,0.15)),
                       0 0 60px color-mix(in srgb, var(--accent, #00ffa3) 6%, transparent);
}

/* ── Light mode shadow overrides ── */
[data-mode="light"] {
  --lg-shadow:         0 4px 10px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.08);
  --lg-shadow-lg:      0 8px 28px rgba(0,0,0,0.14), 0 2px 4px rgba(0,0,0,0.06);
  --lg-shadow-inset:   inset 0 1.5px 0 rgba(255,255,255,0.85);
  --lg-shadow-inset-strong: inset 0 1.5px 0 rgba(255,255,255,0.95);
  --lg-glow:           0 0 20px color-mix(in srgb, var(--accent, #007AFF) 15%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   §1  Override ios-glass.css tokens to be theme-aware
       These :root overrides replace the hardcoded green rgba values in
       ios-glass.css with values that adapt per theme.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Neutral dark glass — backdrop-filter creates the color, not bg */
  --glass-bg:           rgba(12, 12, 16, 0.58);
  --glass-bg-light:     rgba(12, 12, 16, 0.40);
  --glass-bg-heavy:     rgba(8,  8,  12, 0.78);

  /* Accent-tinted borders — auto-adapt per theme */
  --glass-border:       color-mix(in srgb, var(--accent, #00ffa3) 20%, rgba(255,255,255,0.10));
  --glass-border-light: color-mix(in srgb, var(--accent, #00ffa3) 13%, rgba(255,255,255,0.07));

  /* Specular highlight */
  --glass-highlight:    rgba(255,255,255,0.08);
  --glass-inset-shadow: var(--lg-shadow-inset);

  /* Shadows */
  --glass-shadow:       var(--lg-shadow);
  --glass-shadow-lg:    var(--lg-shadow-lg);

  /* Spring timings replacing old ease/linear transitions */
  --glass-spring:       var(--spring-card);
  --glass-spring-fast:  var(--spring-micro);
  --glass-spring-slow:  var(--spring-smooth);
  --glass-morph:        var(--spring-glide);

  /* Geometry */
  --glass-radius:       var(--lg-radius);
  --glass-radius-sm:    var(--lg-radius-sm);
  --glass-radius-xl:    var(--lg-radius-lg);
}

[data-mode="light"] {
  --glass-bg:           rgba(255,255,255,0.72);
  --glass-bg-light:     rgba(255,255,255,0.55);
  --glass-bg-heavy:     rgba(255,255,255,0.88);
  --glass-border:       color-mix(in srgb, var(--accent, #007AFF) 16%, rgba(0,0,0,0.07));
  --glass-border-light: color-mix(in srgb, var(--accent, #007AFF) 10%, rgba(0,0,0,0.04));
  --glass-highlight:    rgba(255,255,255,0.85);
  --glass-inset-shadow: var(--lg-shadow-inset);
  --glass-shadow:       var(--lg-shadow);
  --glass-shadow-lg:    var(--lg-shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════════════
   §2  Keyframe Animations
   ═══════════════════════════════════════════════════════════════════════ */

/* Diagonal shimmer sweep across a surface */
@keyframes lg-shimmer {
  0%   { transform: translateX(-130%) skewX(-12deg); }
  100% { transform: translateX(230%) skewX(-12deg); }
}

/* Gentle vertical float (idle card breathing) */
@keyframes lg-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-5px); }
}

/* Pulsing ring for live / active indicators */
@keyframes lg-ring-pulse {
  0%   { transform: scale(1); opacity: 0.9; box-shadow: 0 0 0 0 var(--accent-glow, rgba(0,255,163,0.4)); }
  70%  { transform: scale(1); opacity: 0.2; box-shadow: 0 0 0 10px transparent; }
  100% { transform: scale(1); opacity: 0;   box-shadow: 0 0 0 0   transparent; }
}

/* Spring entry from below */
@keyframes lg-spring-in {
  0%   { opacity: 0; transform: translateY(18px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0)    scale(1.00); }
}

/* Spring pop (badge / icon appear) */
@keyframes lg-spring-pop {
  0%   { transform: scale(0);    opacity: 0; }
  55%  { transform: scale(1.14); opacity: 1; }
  75%  { transform: scale(0.95); }
  90%  { transform: scale(1.03); }
  100% { transform: scale(1);    }
}

/* Number bump — kinetics "Number Counter" */
@keyframes lg-bump {
  0%   { transform: scale(1)    translateY(0); }
  40%  { transform: scale(1.22) translateY(-6px); }
  100% { transform: scale(1)    translateY(0); }
}

/* Iridescent hue cycle (luxury/special cards) */
@keyframes lg-iridescent {
  0%   { filter: hue-rotate(0deg)   brightness(1.00); }
  33%  { filter: hue-rotate(18deg)  brightness(1.06); }
  66%  { filter: hue-rotate(-12deg) brightness(0.97); }
  100% { filter: hue-rotate(0deg)   brightness(1.00); }
}

/* Ripple expand from click point */
@keyframes lg-ripple {
  to { transform: scale(3.5); opacity: 0; }
}

/* Drag snap-back (kinetics "Drag to Dismiss" spring return) */
@keyframes lg-snap {
  0%   { transform: translateX(var(--drag-x, 0px)) rotate(var(--drag-r, 0deg)); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* Staggered fade-up for list items */
@keyframes lg-stagger-up {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   §3  Liquid Card  (.liquid-card)
       Translates ResourceGlassCard from contained-app:
         - .glassEffect() → backdrop-filter blur+saturate
         - fill + softLight blend → ::before accent tint
         - ExteriorShadow → box-shadow
         - .spring(response:0.42, damping:0.86) → var(--spring-card)
         - isSelected strokeBorder → outline: 2.5px solid var(--accent)
   ═══════════════════════════════════════════════════════════════════════ */
.liquid-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--lg-radius);
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(var(--lg-blur));
          backdrop-filter: saturate(180%) blur(var(--lg-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--lg-shadow), var(--lg-shadow-inset);
  transition:
    transform     var(--spring-card),
    box-shadow    var(--spring-card),
    border-color  var(--spring-micro);
  will-change: transform;
}

/* ── Accent tint layer — the personalization tint from ResourceGlassCard
      fill + softLight blendMode at fillOpacity:0.18
      Gradient: start at 1.35× opacity → end at 0.4× opacity (from Swift source) ── */
.liquid-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent, #00ffa3) 24%, transparent) 0%,
    color-mix(in srgb, var(--accent, #00ffa3)  7%, transparent) 100%
  );
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

/* ── Shimmer sweep — fires on hover ── */
.liquid-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent            0%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.06) 65%,
    transparent            100%
  );
  transform: translateX(-130%) skewX(-12deg);
  pointer-events: none;
  z-index: 1;
}

.liquid-card:hover::after {
  animation: lg-shimmer 0.72s ease-out forwards;
}

/* Card children sit above pseudo layers */
.liquid-card > * { position: relative; z-index: 2; }

/* ── Hover lift ── */
.liquid-card:hover {
  transform: translateY(-2px) scale(1.006);
  box-shadow:
    var(--lg-shadow-lg),
    var(--lg-shadow-inset-strong),
    var(--lg-glow);
  border-color: color-mix(in srgb, var(--accent, #00ffa3) 38%, rgba(255,255,255,0.14));
}

/* ── Press state ── */
.liquid-card:active,
.liquid-card.lg-pressed {
  transform: scale(0.975);
  box-shadow: var(--lg-shadow), var(--lg-shadow-inset);
  transition: transform 0.09s ease, box-shadow 0.09s ease;
}

/* ── Selection states (ResourceGlassCard.isSelected) ── */
.liquid-card.lg-selected {
  outline: 2.5px solid var(--accent, #00ffa3);
  outline-offset: -1px;
}

.liquid-card.lg-selected-fill {
  background: color-mix(in srgb, var(--accent, #00ffa3) 11%, var(--glass-bg));
}

/* ── Entry animation ── */
.liquid-card.lg-animate-in {
  animation: lg-spring-in var(--spring-smooth) both;
}

/* ── Size variants ── */
.liquid-card--sm { border-radius: var(--lg-radius-sm); }
.liquid-card--lg {
  border-radius: var(--lg-radius-lg);
  -webkit-backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy));
          backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy));
}

/* ── Flat (nested inside elevated panel — no external shadow) ── */
.liquid-card--flat {
  box-shadow: none;
  border-color: var(--glass-border-light);
}
.liquid-card--flat::before { opacity: 0.45; }

/* ── Iridescent (special luxury cards) ── */
.liquid-card--iridescent { animation: lg-iridescent 9s ease-in-out infinite; }

/* ── Float idle animation ── */
.liquid-card--float { animation: lg-float 7s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════════════
   §4  Frosted Pill Buttons  (.btn-frosted)
       Spring press, ripple, shimmer sweep, accent glow.
       Variants: --primary, --ghost, --danger, --sm, --lg, --icon
   ═══════════════════════════════════════════════════════════════════════ */
.btn-frosted {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 20px;
  min-height: 36px;
  border-radius: var(--lg-radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-light);
  -webkit-backdrop-filter: saturate(140%) blur(var(--lg-blur-light));
          backdrop-filter: saturate(140%) blur(var(--lg-blur-light));
  color: var(--text, rgba(200,255,240,0.9));
  font-family: var(--font-ios, -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--lg-shadow-inset), 0 2px 8px rgba(0,0,0,0.25);
  transition:
    transform       var(--spring-micro),
    box-shadow      var(--spring-micro),
    border-color    var(--spring-micro),
    background      var(--spring-micro);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  white-space: nowrap;
}

/* ── Shimmer sweep ── */
.btn-frosted::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent            0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.08) 65%,
    transparent            100%
  );
  transform: translateX(-130%) skewX(-8deg);
  pointer-events: none;
}

.btn-frosted:hover::before {
  animation: lg-shimmer 0.50s ease-out forwards;
}

/* ── Hover state ── */
.btn-frosted:hover {
  border-color: color-mix(in srgb, var(--accent, #00ffa3) 50%, rgba(255,255,255,0.18));
  box-shadow:
    var(--lg-shadow-inset-strong),
    0 2px 12px rgba(0,0,0,0.28),
    0 0 0 1px color-mix(in srgb, var(--accent, #00ffa3) 22%, transparent);
  transform: translateY(-1px);
}

/* ── Press (spring scale down — kinetics "Card Resize" on active) ── */
.btn-frosted:active {
  transform: scale(0.94);
  box-shadow: var(--lg-shadow-inset), 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.09s ease, box-shadow 0.09s ease;
}

/* ── Primary variant — solid accent fill ── */
.btn-frosted--primary {
  background: var(--accent, #00ffa3);
  border-color: transparent;
  color: var(--text-invert, #000);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow:
    0 3px 12px var(--accent-glow, rgba(0,255,163,0.35)),
    var(--lg-shadow-inset-strong);
}

.btn-frosted--primary:hover {
  background: color-mix(in srgb, var(--accent, #00ffa3) 82%, white);
  box-shadow:
    0 4px 20px var(--accent-glow, rgba(0,255,163,0.45)),
    var(--lg-shadow-inset-strong);
  transform: translateY(-1px) scale(1.025);
}

.btn-frosted--primary:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px var(--accent-glow, rgba(0,255,163,0.3)), var(--lg-shadow-inset);
}

/* ── Ghost variant — outline only ── */
.btn-frosted--ghost {
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-color: var(--accent, #00ffa3);
  color: var(--accent, #00ffa3);
  box-shadow: none;
}

.btn-frosted--ghost:hover {
  background: var(--accent-dim, rgba(0,255,163,0.10));
  box-shadow: 0 0 0 1px var(--accent), inset 0 0 16px var(--accent-dim, rgba(0,255,163,0.06));
  transform: translateY(-1px);
}

/* ── Danger variant ── */
.btn-frosted--danger {
  background: color-mix(in srgb, var(--danger, #ff4d6d) 12%, rgba(0,0,0,0.25));
  border-color: color-mix(in srgb, var(--danger, #ff4d6d) 45%, transparent);
  color: var(--danger, #ff4d6d);
  -webkit-backdrop-filter: saturate(140%) blur(var(--lg-blur-light));
          backdrop-filter: saturate(140%) blur(var(--lg-blur-light));
}

.btn-frosted--danger:hover {
  background: color-mix(in srgb, var(--danger, #ff4d6d) 20%, rgba(0,0,0,0.25));
  border-color: var(--danger, #ff4d6d);
  box-shadow: 0 0 12px rgba(255,77,109,0.25), var(--lg-shadow-inset);
}

/* ── Size variants ── */
.btn-frosted--sm  { padding: 5px 13px; font-size: 11px; min-height: 26px; }
.btn-frosted--lg  { padding: 13px 28px; font-size: 15px; font-weight: 700; min-height: 46px; }

/* ── Icon-only pill ── */
.btn-frosted--icon { padding: 8px; width: 36px; height: 36px; min-height: unset; }
.btn-frosted--icon.btn-frosted--sm { width: 28px; height: 28px; padding: 5px; }
.btn-frosted--icon.btn-frosted--lg { width: 46px; height: 46px; padding: 12px; }

/* ── Ripple element (injected by liquid-glass.js) ── */
.lg-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  width: 64px;
  height: 64px;
  margin-top: -32px;
  margin-left: -32px;
  transform: scale(0);
  animation: lg-ripple 0.55s ease-out forwards;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   §5  Liquid Panel  (.liquid-panel)
       Translates MorphPanelScaffold — stable glass shell, content swaps inside.
   ═══════════════════════════════════════════════════════════════════════ */
.liquid-panel {
  position: relative;
  background: var(--glass-bg-heavy);
  -webkit-backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy));
          backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy));
  border: 1px solid var(--glass-border);
  border-radius: var(--lg-radius-lg);
  box-shadow: var(--lg-shadow-lg), var(--lg-shadow-inset);
  overflow: hidden;
  transition: transform var(--spring-card), box-shadow var(--spring-card);
}

/* Top edge specular line */
.liquid-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent              0%,
    rgba(255,255,255,0.16) 28%,
    rgba(255,255,255,0.24) 50%,
    rgba(255,255,255,0.16) 72%,
    transparent             100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Entry animation */
.liquid-panel.lg-animate-in {
  animation: lg-spring-in var(--spring-bounce) both;
}

/* ── Panel Header (PanelHeader) ── */
.liquid-panel__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 0.5px solid var(--glass-border-light);
  font-family: var(--font-ios, -apple-system, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text, rgba(200,255,240,0.9));
  letter-spacing: 0.01em;
}

.liquid-panel__body {
  position: relative;
  z-index: 2;
  padding: 16px 18px;
}

.liquid-panel__footer {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 0.5px solid var(--glass-border-light);
}

/* ═══════════════════════════════════════════════════════════════════════
   §6  Floating Pill Toolbar  (.liquid-toolbar)
       Translates AppToolbar — floating pill, section-aware
   ═══════════════════════════════════════════════════════════════════════ */
.liquid-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--glass-bg-heavy);
  -webkit-backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy));
          backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy));
  border: 1px solid var(--glass-border);
  border-radius: var(--lg-radius-pill);
  box-shadow:
    var(--lg-shadow),
    var(--lg-shadow-inset),
    0 0 0 0.5px var(--glass-border-light);
}

.liquid-toolbar--full {
  display: flex;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   §7  Spring Tab Bar  (.liquid-tabs)
       Pill indicator glides between tabs via JS (liquid-glass.js)
   ═══════════════════════════════════════════════════════════════════════ */
.liquid-tabs {
  position: relative;
  display: flex;
  background: var(--glass-bg-light);
  -webkit-backdrop-filter: saturate(140%) blur(var(--lg-blur-light));
          backdrop-filter: saturate(140%) blur(var(--lg-blur-light));
  border: 1px solid var(--glass-border);
  border-radius: var(--lg-radius-sm);
  padding: 3px;
  gap: 1px;
}

.liquid-tab {
  position: relative;
  flex: 1;
  padding: 8px 16px;
  border-radius: calc(var(--lg-radius-sm) - 3px);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ios, -apple-system, system-ui, sans-serif);
  color: var(--muted, rgba(200,255,240,0.6));
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--spring-micro);
  text-align: center;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  z-index: 1;
  white-space: nowrap;
}

.liquid-tab:hover { color: var(--text, rgba(200,255,240,0.9)); }
.liquid-tab.active { color: var(--text, rgba(200,255,240,0.9)); }

/* ── Gliding pill (set left/width via liquid-glass.js) ── */
.liquid-tabs__pill {
  position: absolute;
  top: 3px;
  height: calc(100% - 6px);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--lg-blur-light));
          backdrop-filter: blur(var(--lg-blur-light));
  border: 1px solid var(--glass-border);
  border-radius: calc(var(--lg-radius-sm) - 3px);
  box-shadow: var(--lg-shadow-inset), 0 2px 8px rgba(0,0,0,0.22);
  transition:
    left  var(--spring-glide),
    width var(--spring-glide);
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   §8  Badges & Status Pills  (.liquid-badge, .liquid-pulse)
       Spring pop entry, ring pulse for live states
   ═══════════════════════════════════════════════════════════════════════ */
.liquid-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--lg-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--accent, #00ffa3) 13%, rgba(0,0,0,0.20));
  border: 1px solid color-mix(in srgb, var(--accent, #00ffa3) 38%, transparent);
  color: var(--accent-text, #00ffa3);
  animation: lg-spring-pop var(--spring-bounce) both;
}

.liquid-badge--success { --badge-accent: var(--success,  #00ffa3); color: var(--badge-accent); }
.liquid-badge--warning { --badge-accent: var(--warning,  #fad015); color: var(--badge-accent); border-color: color-mix(in srgb, var(--badge-accent) 38%, transparent); background: color-mix(in srgb, var(--badge-accent) 13%, rgba(0,0,0,0.2)); }
.liquid-badge--danger  { --badge-accent: var(--danger,   #ff4d6d); color: var(--badge-accent); border-color: color-mix(in srgb, var(--badge-accent) 38%, transparent); background: color-mix(in srgb, var(--badge-accent) 13%, rgba(0,0,0,0.2)); }
.liquid-badge--info    { --badge-accent: var(--info,     #3ac9ff); color: var(--badge-accent); border-color: color-mix(in srgb, var(--badge-accent) 38%, transparent); background: color-mix(in srgb, var(--badge-accent) 13%, rgba(0,0,0,0.2)); }
.liquid-badge--muted   { color: var(--muted); border-color: var(--glass-border); background: var(--glass-bg-light); }

/* ── Live pulse dot ── */
.liquid-pulse {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.liquid-pulse::before,
.liquid-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.liquid-pulse::before {
  background: var(--accent, #00ffa3);
  box-shadow: 0 0 6px var(--accent-glow, rgba(0,255,163,0.5));
}

.liquid-pulse::after {
  background: transparent;
  border: 1.5px solid var(--accent, #00ffa3);
  animation: lg-ring-pulse 2.2s ease-out infinite;
}

.liquid-pulse--warning::before  { background: var(--warning,  #fad015); box-shadow: 0 0 6px rgba(250,208,21,0.5); }
.liquid-pulse--warning::after   { border-color: var(--warning, #fad015); }
.liquid-pulse--danger::before   { background: var(--danger,   #ff4d6d); box-shadow: 0 0 6px rgba(255,77,109,0.5); }
.liquid-pulse--danger::after    { border-color: var(--danger,  #ff4d6d); }

/* ═══════════════════════════════════════════════════════════════════════
   §9  Liquid Input  (.liquid-input)
   ═══════════════════════════════════════════════════════════════════════ */
.liquid-input {
  display: block;
  width: 100%;
  background: color-mix(in srgb, var(--glass-bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(120%) blur(var(--lg-blur-light));
          backdrop-filter: saturate(120%) blur(var(--lg-blur-light));
  border: 1px solid var(--glass-border);
  border-radius: var(--lg-radius-sm);
  padding: 10px 14px;
  color: var(--text, rgba(200,255,240,0.9));
  font-size: 14px;
  font-family: var(--font-ios, -apple-system, system-ui, sans-serif);
  transition:
    border-color var(--spring-micro),
    box-shadow   var(--spring-micro);
  -webkit-appearance: none;
  box-sizing: border-box;
}

.liquid-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent, #00ffa3) 65%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent, #00ffa3) 15%, transparent),
    var(--lg-shadow-inset);
}

.liquid-input::placeholder {
  color: var(--muted, rgba(200,255,240,0.4));
}

/* ═══════════════════════════════════════════════════════════════════════
   §10  Modal / Overlay  (.liquid-overlay, .liquid-modal)
   ═══════════════════════════════════════════════════════════════════════ */
.liquid-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.42);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
          backdrop-filter: blur(8px) saturate(120%);
  z-index: var(--z-modal, 500);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--spring-card), visibility var(--spring-card);
}

.liquid-overlay.active {
  opacity: 1;
  visibility: visible;
}

.liquid-modal {
  background: var(--glass-bg-heavy);
  -webkit-backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy));
          backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy));
  border: 1px solid var(--glass-border);
  border-radius: var(--lg-radius-lg);
  box-shadow: var(--lg-shadow-lg), var(--lg-shadow-inset);
  transform: scale(0.95) translateY(12px);
  transition: transform var(--spring-bounce);
  overflow: hidden;
}

.liquid-overlay.active .liquid-modal {
  transform: scale(1) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════
   §11  Utility Animation Classes
   ═══════════════════════════════════════════════════════════════════════ */
.lg-animate-in   { animation: lg-spring-in var(--spring-smooth) both; }
.lg-pop          { animation: lg-spring-pop var(--spring-snappy) both; }
.lg-bump         { animation: lg-bump var(--spring-bump) both; }
.lg-float        { animation: lg-float 7s ease-in-out infinite; }
.lg-pulse        { animation: lg-ring-pulse 2.2s ease-out infinite; }
.lg-shimmer-idle { animation: lg-iridescent 9s ease-in-out infinite; }

/* Stagger delays for list/grid entrances */
.lg-d1 { animation-delay: 0.06s; }
.lg-d2 { animation-delay: 0.12s; }
.lg-d3 { animation-delay: 0.18s; }
.lg-d4 { animation-delay: 0.24s; }
.lg-d5 { animation-delay: 0.30s; }
.lg-d6 { animation-delay: 0.36s; }
.lg-d7 { animation-delay: 0.42s; }
.lg-d8 { animation-delay: 0.48s; }

/* Smooth page/section entrances */
.lg-section-in > * {
  animation: lg-stagger-up var(--spring-smooth) both;
}
.lg-section-in > *:nth-child(1) { animation-delay: 0.04s; }
.lg-section-in > *:nth-child(2) { animation-delay: 0.09s; }
.lg-section-in > *:nth-child(3) { animation-delay: 0.14s; }
.lg-section-in > *:nth-child(4) { animation-delay: 0.19s; }
.lg-section-in > *:nth-child(5) { animation-delay: 0.24s; }
.lg-section-in > *:nth-child(6) { animation-delay: 0.29s; }

/* ═══════════════════════════════════════════════════════════════════════
   §12  PLATFORM FORMATS REMOVED 2026-07-11
        One universal animated Liquid Glass design. No format switching.
        Animations controlled via HyThemes.setAnimations('off')
        which sets data-reduce-motion=true on <html>.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   §13  Light Mode Glass Overrides
   ═══════════════════════════════════════════════════════════════════════ */
[data-mode="light"] .liquid-card {
  background: rgba(255,255,255,0.72);
  border-color: color-mix(in srgb, var(--accent, #007AFF) 18%, rgba(0,0,0,0.07));
  box-shadow: var(--lg-shadow), inset 0 1.5px 0 rgba(255,255,255,0.88);
}

/* Light-mode tint uses multiply (not soft-light) — more natural on white */
[data-mode="light"] .liquid-card::before {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent, #007AFF) 14%, rgba(255,255,255,0.5)) 0%,
    color-mix(in srgb, var(--accent, #007AFF)  4%, rgba(255,255,255,0.15)) 100%
  );
  mix-blend-mode: multiply;
}

[data-mode="light"] .liquid-card:hover {
  box-shadow: var(--lg-shadow-lg), inset 0 1.5px 0 rgba(255,255,255,0.92);
  border-color: color-mix(in srgb, var(--accent, #007AFF) 30%, rgba(0,0,0,0.08));
}

[data-mode="light"] .liquid-panel {
  background: rgba(255,255,255,0.88);
  border-color: rgba(0,0,0,0.07);
  box-shadow: var(--lg-shadow-lg), inset 0 1.5px 0 rgba(255,255,255,0.95);
}

[data-mode="light"] .btn-frosted {
  background: rgba(255,255,255,0.72);
  color: var(--text, #1c1c1e);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), inset 0 1.5px 0 rgba(255,255,255,0.90);
}

[data-mode="light"] .btn-frosted:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.14), inset 0 1.5px 0 rgba(255,255,255,0.95);
}

[data-mode="light"] .liquid-tabs {
  background: rgba(255,255,255,0.55);
}

[data-mode="light"] .liquid-tabs__pill {
  background: rgba(255,255,255,0.90);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.95);
}

[data-mode="light"] .liquid-badge {
  background: color-mix(in srgb, var(--accent, #007AFF) 10%, rgba(255,255,255,0.85));
  border-color: color-mix(in srgb, var(--accent, #007AFF) 30%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   §14  Responsive / Mobile
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root {
    --lg-blur:       18px;
    --lg-blur-heavy: 28px;
    --lg-blur-light: 10px;
    --lg-radius:     14px;
    --lg-radius-lg:  20px;
  }

  /* No hover-lift on touch — only keyboard/pointer interactions */
  .liquid-card:hover    { transform: none; box-shadow: var(--lg-shadow), var(--lg-shadow-inset); }
  .btn-frosted:hover    { transform: none; }

  .liquid-card:active   { transform: scale(0.97); }
  .btn-frosted:active   { transform: scale(0.93); }
}

/* ═══════════════════════════════════════════════════════════════════════
   §15  Reduced Motion
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   §16  OS Integration — wire liquid glass to actual hyOS element classes
        These rules target os-beta.html, chat.html, and mission pages
        without requiring HTML changes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── App Drawer Cards (.os-app-card) ── */
.os-app-card {
  position: relative;
  overflow: hidden;
  transition:
    transform     var(--spring-card),
    box-shadow    var(--spring-card),
    border-color  var(--spring-micro),
    background    var(--spring-micro) !important;
  will-change: transform;
}

/* Shimmer sweep on hover */
.os-app-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.06) 40%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.06) 60%,
    transparent 100%
  );
  transform: translateX(-120%) skewX(-10deg);
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
}
.os-app-card:hover::after { animation: lg-shimmer 0.65s ease-out forwards; }

/* ── JARVIS mode: visible glass cards at rest ── */
.jarvis .os-app-card {
  background: rgba(0, 14, 8, 0.42) !important;
  -webkit-backdrop-filter: saturate(160%) blur(16px);
          backdrop-filter: saturate(160%) blur(16px);
  border-color: color-mix(in srgb, var(--accent, #00ffa3) 18%, rgba(255,255,255,0.06)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.3) !important;
}

.jarvis .os-app-card:hover {
  background: color-mix(in srgb, var(--accent, #00ffa3) 8%, rgba(0,14,8,0.65)) !important;
  border-color: color-mix(in srgb, var(--accent, #00ffa3) 40%, rgba(255,255,255,0.12)) !important;
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: var(--lg-shadow-lg), var(--lg-glow),
              inset 0 1.5px 0 rgba(255,255,255,0.10) !important;
}

/* ── CLEAN mode: dark glass cards — uses v11 accent vars so all color themes apply ── */
.clean .os-app-card {
  background: var(--v11-glass-bg, rgba(10,10,18,0.55)) !important;
  -webkit-backdrop-filter: saturate(200%) blur(18px);
          backdrop-filter: saturate(200%) blur(18px);
  border-color: var(--v11-border-accent, color-mix(in srgb, var(--accent,#00ffa3) 22%, rgba(255,255,255,0.10))) !important;
  box-shadow: var(--v11-shadow, var(--lg-shadow)), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.clean .os-app-card:hover {
  background: color-mix(in srgb, var(--v11-glass-bg, rgba(10,10,18,0.55)) 80%, var(--v11-tint, rgba(0,255,163,0.12))) !important;
  border-color: var(--accent, #00ffa3) !important;
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: var(--lg-shadow-lg), var(--v11-glow-sm, 0 0 20px color-mix(in srgb, var(--accent,#00ffa3) 14%, transparent)),
              inset 0 1.5px 0 rgba(255,255,255,0.10) !important;
}

/* Press state — both modes */
.os-app-card:active {
  transform: scale(0.93) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

/* ── App icon containers — upgrade glow + backdrop ── */
.jarvis .os-app-icon {
  background: color-mix(in srgb, var(--accent, #00ffa3) 14%, rgba(0,8,4,0.6)) !important;
  border-color: color-mix(in srgb, var(--accent, #00ffa3) 30%, rgba(255,255,255,0.08)) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent, #00ffa3) 15%, transparent) !important;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.jarvis .os-app-card:hover .os-app-icon {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #00ffa3) 20%, transparent),
              0 0 24px color-mix(in srgb, var(--accent, #00ffa3) 25%, transparent),
              0 4px 16px rgba(0,0,0,0.3) !important;
  border-color: color-mix(in srgb, var(--accent, #00ffa3) 60%, rgba(255,255,255,0.2)) !important;
}

/* ── Jarvis Holo Panels (.j-panel) ── */
.j-panel {
  background: color-mix(in srgb, var(--bg-card, rgba(0,20,12,0.72)) 80%, transparent) !important;
  -webkit-backdrop-filter: saturate(180%) blur(var(--lg-blur)) !important;
          backdrop-filter: saturate(180%) blur(var(--lg-blur)) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--lg-shadow), var(--lg-shadow-inset) !important;
  transition:
    transform     var(--spring-card),
    box-shadow    var(--spring-card),
    border-color  var(--spring-micro) !important;
}

.j-panel::before {
  /* Replace the old green-gradient top line with a proper specular */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 30%,
    rgba(255,255,255,0.26) 50%,
    rgba(255,255,255,0.18) 70%,
    transparent 100%
  ) !important;
}

.j-panel:hover {
  border-color: color-mix(in srgb, var(--accent, #00ffa3) 40%, rgba(255,255,255,0.2)) !important;
  box-shadow: var(--lg-shadow-lg), var(--lg-shadow-inset-strong), var(--lg-glow) !important;
  transform: translateY(-1px);
}

/* ── Clean-mode stat tiles (.ch-stat) ── */
.ch-stat {
  -webkit-backdrop-filter: saturate(180%) blur(var(--lg-blur)) !important;
          backdrop-filter: saturate(180%) blur(var(--lg-blur)) !important;
  border-color: rgba(255,255,255,0.22) !important;
  transition: transform var(--spring-card), box-shadow var(--spring-card) !important;
}

.ch-stat:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.20), inset 0 1.5px 0 rgba(255,255,255,0.3) !important;
}

/* ── OS Taskbar (#os-taskbar) ── */
#os-taskbar {
  -webkit-backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy)) !important;
          backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy)) !important;
}

/* Tray icons — spring press */
.os-tray-icon {
  transition: transform var(--spring-micro), background var(--spring-micro) !important;
}
.os-tray-icon:active { transform: scale(0.88) !important; }

/* ── Memory / System Pulse Cards (.status-card, .pulse-card, .mem-card) ── */
.status-card,
.pulse-card,
.mem-card,
[class*="memory-card"],
[class*="stat-card"] {
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: saturate(160%) blur(var(--lg-blur)) !important;
          backdrop-filter: saturate(160%) blur(var(--lg-blur)) !important;
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--lg-shadow), var(--lg-shadow-inset) !important;
  transition: transform var(--spring-card), box-shadow var(--spring-card) !important;
}

.status-card:hover,
.pulse-card:hover,
.mem-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lg-shadow-lg), var(--lg-shadow-inset-strong), var(--lg-glow) !important;
}

/* ── Chat welcome card (.welcome-glow) ── */
.welcome-glow {
  -webkit-backdrop-filter: saturate(180%) blur(var(--lg-blur-heavy)) !important;
          backdrop-filter: saturate(180%) blur(var(--lg-blur-heavy)) !important;
  box-shadow: var(--lg-shadow-lg), var(--lg-shadow-inset) !important;
  border-color: var(--glass-border) !important;
  transition: box-shadow var(--spring-card), border-color var(--spring-micro) !important;
}

/* ── Message bubbles (.msg-assistant bubble) — subtle glass upgrade ── */
.msg-assistant .msg-text {
  position: relative;
}

/* ── Proposal / Mission cards (.po-card, .mc-phase, launch-card) ── */
.po-card,
.launch-card,
.mc-phase {
  position: relative;
  overflow: hidden;
  transition: transform var(--spring-card), box-shadow var(--spring-card) !important;
}

.po-card:hover,
.launch-card:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: var(--lg-shadow-lg), var(--lg-shadow-inset-strong), var(--lg-glow) !important;
}

/* ── Frosted primary action buttons (.de-btn.primary, .po-btn) ── */
.de-btn.primary,
.btn.primary,
.po-btn.primary {
  transition: transform var(--spring-micro), box-shadow var(--spring-micro) !important;
}

.de-btn.primary:hover,
.btn.primary:hover,
.po-btn.primary:hover {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 16px var(--accent-glow, rgba(0,255,163,0.4)) !important;
}

.de-btn.primary:active,
.btn.primary:active,
.po-btn.primary:active {
  transform: scale(0.95) !important;
  transition: transform 0.08s ease !important;
}

/* ── Clean/iOS dock (#clean-dock) — upgrade to liquid ── */
#clean-dock {
  -webkit-backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy)) !important;
          backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy)) !important;
  box-shadow: var(--lg-shadow-lg), var(--lg-shadow-inset) !important;
  border-color: rgba(255,255,255,0.32) !important;
}

.clean-dock-icon {
  transition: transform var(--spring-snappy), box-shadow var(--spring-micro) !important;
}

.clean-dock-icon:hover {
  transform: translateY(-8px) scale(1.10) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.2) !important;
}

.clean-dock-icon:active {
  transform: scale(0.92) !important;
  transition: transform 0.08s ease !important;
}

/* ── app-drawer backdrop and panel ── */
#os-app-drawer {
  -webkit-backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy)) !important;
          backdrop-filter: saturate(200%) blur(var(--lg-blur-heavy)) !important;
}

/* Platform-specific guards removed 2026-07-11 — one universal design.
   Use data-reduce-motion=true (HyThemes.setAnimations('off')) to kill animations. */

/* ═══════════════════════════════════════════════════════════════════════
   §17  @supports Guard
       Graceful fallback for browsers without backdrop-filter
   ═══════════════════════════════════════════════════════════════════════ */
@supports not (backdrop-filter: blur(1px)) {
  .liquid-card,
  .liquid-panel,
  .btn-frosted,
  .liquid-toolbar,
  .liquid-tabs,
  .liquid-modal {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: var(--bg-card, rgba(0,14,8,0.96));
    border-color: var(--border, rgba(0,255,163,0.14));
  }

  [data-mode="light"] .liquid-card,
  [data-mode="light"] .liquid-panel,
  [data-mode="light"] .btn-frosted {
    background: rgba(255,255,255,0.97);
  }
}