/* GLASS HELPERS */
.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  border-radius: var(--r-2);
}
.glass-strong {
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(1.25);
  border-radius: var(--r-2);
}
.glass-card { padding: var(--sp-3); box-shadow: var(--shadow-lg); }

/* ELEVATION / SHADOW */
.elev-1 { box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.elev-2 { box-shadow: 0 10px 32px rgba(0,0,0,.45); }

/* LAYOUT UTILS */
.container { width: min(1200px, 92vw); margin-inline: auto; }
.center { display: grid; place-items: center; }
.stack > * + * { margin-top: var(--sp-3); }
.hstack { display:flex; align-items:center; gap: var(--sp-2); }
.vstack { display:flex; flex-direction:column; gap: var(--sp-2); }

/* TEXT & BADGES */
.muted { color: var(--muted); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-1);
  background: var(--surface); font-size: var(--fs-14);
}
.tag { padding: 2px 6px; border-radius: var(--r-round); border: 1px solid var(--border); }

/* VISIBILITY/ACCESSIBILITY */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* SPACING */
.mt-2{margin-top:var(--sp-2);} .mt-3{margin-top:var(--sp-3);} .mt-4{margin-top:var(--sp-4);}
.mb-2{margin-bottom:var(--sp-2);} .mb-3{margin-bottom:var(--sp-3);} .mb-4{margin-bottom:var(--sp-4);}
.p-2{padding:var(--sp-2);} .p-3{padding:var(--sp-3);} .p-4{padding:var(--sp-4);}

/* BORDERS/RADIUS */
.rounded { border-radius: var(--r-2); }
.border { border: 1px solid var(--border); }

/* BLUR OVERLAYS */
.backdrop-soft { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.backdrop-strong { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }