html, body { margin: 0; padding: 0; }
body { overscroll-behavior: none; overflow-x: hidden; } /* safety net: the Pro workspace's wider, waveform-heavy layout must never cause horizontal scroll */
main > :first-child { margin-top: 0 !important; }
main > :last-child { margin-bottom: 0 !important; }
::-webkit-scrollbar { display: none; }

/* min touch target + focus visibility (accessibility) */
button, a { min-height: 44px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #a8372f; outline-offset: 2px; }

/* Shared page background (was an inline style on only some pages) */
body.vibe-bg {
  background-image: url("../images/bg-scene.webp");
  background-size: cover; background-position: center bottom;
  background-attachment: fixed; background-repeat: no-repeat;
  /* Crisp pixel-art edges instead of the browser's smoothed/blurred upscale-on-cover look. */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/*
 * Frosted glass WITHOUT any gaussian blur (no gaussian filters anywhere).
 * The "frost" is a fine film-grain layer + a soft milky gradient + a bright inner edge,
 * so the background stays sharp behind the panels and text stays readable.
 */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }

.vibe-header {
  background: var(--grain), rgba(229, 255, 248, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 24px rgba(5, 32, 27, 0.06);
}
.pixel-glass-card, .pixel-glass, .glass-pixel-panel {
  background: var(--grain), linear-gradient(135deg, rgba(232, 255, 249, 0.74) 0%, rgba(203, 231, 224, 0.62) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 36px -8px rgba(5, 32, 27, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.28) inset, 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  position: relative;
}
.pixel-glass-pill {
  background: var(--grain), linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(196, 240, 227, 0.58) 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 12px rgba(5, 32, 27, 0.06), 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.pixel-glass-zone {
  background: var(--grain), linear-gradient(135deg, rgba(226, 252, 244, 0.62) 0%, rgba(210, 236, 229, 0.5) 100%);
  border: 1px dashed rgba(60, 102, 91, 0.4);
  box-shadow: 0 6px 16px rgba(0, 32, 26, 0.05), inset 0 0 16px rgba(229, 255, 248, 0.6);
}
.pixel-glass-zone:hover { border-color: rgba(168, 55, 47, 0.5); }
.pixel-glass-item {
  background: var(--grain), rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.65);
  transition: all 0.2s ease;
}
.pixel-glass-item:hover { background: var(--grain), rgba(255, 255, 255, 0.66); border-color: rgba(255, 255, 255, 0.9); transform: translateY(-1px); }

/* plan / usage strip */
.plan-strip { background: var(--grain), rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.65); }

@media (prefers-reduced-motion: reduce) {
  #ambient-canvas { display: none !important; }
}

/* ---- Sliders: thin visible track, generous invisible touch area ---- */
.vibe-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 40px; min-height: 0; margin: 0; padding: 0;
  background: transparent; cursor: pointer; --fill: 50%;
}
.vibe-range:focus { outline: none; }
.vibe-range:focus-visible { outline: 2px solid #a8372f; outline-offset: 2px; border-radius: 9999px; }
.vibe-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 9999px;
  background: linear-gradient(to right, #a8372f 0 var(--fill), rgba(60, 102, 91, 0.28) var(--fill) 100%);
  box-shadow: inset 0 1px 2px rgba(5, 32, 27, 0.15);
}
.vibe-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: #fff; border: 2px solid #a8372f;
  box-shadow: 0 2px 6px rgba(5, 32, 27, 0.25);
  transition: transform 0.12s ease;
}
.vibe-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.vibe-range::-moz-range-track {
  height: 6px; border-radius: 9999px; background: rgba(60, 102, 91, 0.28);
  box-shadow: inset 0 1px 2px rgba(5, 32, 27, 0.15);
}
.vibe-range::-moz-range-progress { height: 6px; border-radius: 9999px; background: #a8372f; }
.vibe-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid #a8372f;
  box-shadow: 0 2px 6px rgba(5, 32, 27, 0.25);
}

/* preset chips */
.preset-chip, .ft-preset-chip { min-height: 36px; }
.preset-chip[aria-pressed="true"], .ft-preset-chip[aria-pressed="true"], .ft-preset-chip.bg-secondary-fixed-dim { background: rgba(163, 208, 194, 0.85); border-color: #a8372f; }


/* account menu (auth.js): hide the default <details> marker */
#auth-menu > summary { list-style: none; }
#auth-menu > summary::-webkit-details-marker { display: none; }

/* Smooth cross-fade between pages (Studio/Pro Unlock/FAQ/...) instead of the default hard cut —
   native browser feature, no JS. Unsupported browsers just keep today's behavior (safe fallback).
   Skipped for prefers-reduced-motion, per the standard pattern for this feature. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}