/* AQUA SI ocean materials for Voice Studio. Loaded after route styles.
   All visual enhancements are optional; forms, status and audio remain native. */
body.aqua-premium {
  color-scheme: dark;
  --aqua-bg: #080f21;
  --aqua-panel: #121d33;
  --aqua-raised: #19253c;
  --aqua-text: #f5f2ee;
  --aqua-muted: #b9c1d2;
  --aqua-accent: #f0cda0;
  --aqua-accent-soft: #f6d9b2;
  --aqua-border: #b8c6e02b;
  --bg: var(--aqua-bg);
  --panel: var(--aqua-panel);
  --panel2: var(--aqua-raised);
  --text: var(--aqua-text);
  --muted: var(--aqua-muted);
  --teal: var(--aqua-accent);
  --teal2: var(--aqua-accent-soft);
  --line: var(--aqua-border);
  --line2: #b8c6e01c;
  --ocean-violet: #b8a8ed;
  --ocean-blue: #9bbfe8;
  --ocean-line-strong: #c7c6dc48;
  --ocean-glass: #142039e0;
  --ocean-field: #0c172bd9;
  --ocean-shadow: 0 20px 64px #0007153b;
  --ocean-ease: cubic-bezier(.22, 1, .36, 1);
  background: var(--aqua-bg);
  color: var(--aqua-text);
  isolation: isolate;
}

/* One static image layer: no parallax, canvas, full-screen blur or frame loop. */
body.aqua-premium::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #08122670 0%, #080f2148 42%, #080f21d9 100%),
    url("/static/assets/aqua-si-ocean.webp") center 56% / cover no-repeat,
    #080f21;
}
body.aqua-premium.authenticated::before {
  background:
    linear-gradient(110deg, #080f21de, #0a142ba8 55%, #11152dbf),
    url("/static/assets/aqua-si-ocean.webp") center / cover no-repeat,
    #080f21;
}
body.aqua-premium ::selection { background: #c5a1ed45; color: #fff8ef; }
body.aqua-premium :is(h1, h2, h3, h4) { color: var(--aqua-text); }
body.aqua-premium a { color: var(--aqua-accent-soft); }
body.aqua-premium a:hover { color: #fff0db; }
body.aqua-premium :is(.muted, .hint, .field-hint, .helper-text, .audio-status) {
  color: var(--aqua-muted);
}
body.aqua-premium :is(.eyebrow, .section-label, .premium-kicker, .premium-example-type) {
  color: var(--aqua-accent);
}
body.aqua-premium :is(.tiny-line, .premium-principles i) { background: var(--aqua-accent); }
body.aqua-premium :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid #f4d5ad;
  outline-offset: 4px;
}

/* Champagne actions, lavender navigation and consistent tactile states. */
body.aqua-premium .button {
  background: #1a2942;
  color: var(--aqua-text);
  border-color: var(--aqua-border);
  border-radius: 13px;
  box-shadow: inset 0 1px 0 #e9e0fb08;
  transition: transform 220ms var(--ocean-ease), background-color 220ms,
    border-color 220ms, box-shadow 220ms;
}
body.aqua-premium .button.primary {
  background: linear-gradient(115deg, #f7dfba, #e5c39b 70%, #cbaa88);
  border-color: #ffe8c66b;
  color: #241e2c;
  box-shadow: inset 0 1px 0 #fff6e9a6, 0 5px 22px #eacba014;
}
body.aqua-premium .button.ghost { background: #111e334d; color: #d4d8e6; border-color: #b8c6e01c; }
body.aqua-premium .button:active { transform: translateY(0); }
body.aqua-premium .button:disabled,
body.aqua-premium button:disabled { transform: none; box-shadow: none; cursor: not-allowed; }
body.aqua-premium .icon-button { border-radius: 12px; color: #e8dfec; }
body.aqua-premium .icon-button:hover { background: #b6a7e514; }
body.aqua-premium :is(.text-button, .private-card .text-button) { color: #f0cda0; }
body.aqua-premium .danger-text { color: #edb8b5; }

/* Opaque-enough glass keeps long forms and account details readable. */
body.aqua-premium :is(.card, .panel, .bank-panel, .metric-card, .song-card,
  .library-song, .premium-auth-card, .premium-example, .premium-path,
  .premium-credit-card, .premium-prompt-band) {
  background: linear-gradient(138deg, #e2d8ff0b, transparent 65%), var(--ocean-glass);
  border: 1px solid var(--aqua-border);
  border-radius: 22px;
  box-shadow: var(--ocean-shadow), inset 0 1px 0 #f2e4ff08;
}
body.aqua-premium :is(.premium-credit-card.featured, .private-card) {
  background: linear-gradient(130deg, #ddbb8e17, #a99ae10b 50%, #122039d9);
  border-color: #edcca142;
}
body.aqua-premium :is(.empty-state, .premium-prompt, .guide-summary,
  .guide-lyric-starter, .choice-tile, .cost-preview) {
  background: #101c32e8;
  border-color: #b8c6e032;
  border-radius: 17px;
}
body.aqua-premium .card,
body.aqua-premium :is(.premium-example, .premium-path, .library-song, .metric-card) {
  transition: border-color 320ms var(--ocean-ease), box-shadow 320ms var(--ocean-ease),
    transform 320ms var(--ocean-ease);
}
body.aqua-premium .notice { background: #17243be8; border-color: #b8c6e040; color: #e0e4ef; }
body.aqua-premium .notice.error { background: #34202be8; border-color: #e8a5a057; color: #f8d3d0; }
body.aqua-premium .notice.success { background: #192f32ed; border-color: #91c5ad4d; color: #d2f1e0; }
body.aqua-premium :is(.staging-banner, .release-notice) {
  background: #101b30eb;
  color: #c9cde0;
  border-color: #b8c6e022;
}
body.aqua-premium .release-notice strong { color: #f2d7b3; }
body.aqua-premium .notice-dot { background: #edcca1; box-shadow: 0 0 9px #edcca127; }
body.aqua-premium .preview-notice { background: #302b24; border-color: #bba27f55; }
body.aqua-premium .preview-notice strong { color: #ffe5be; }

/* A shared ocean horizon and editorial hierarchy, as in AQUA SI. */
body.aqua-premium .public-header {
  position: relative;
  z-index: 60;
  max-width: 1440px;
  background: linear-gradient(120deg, #101b31d9, #18243ac2);
  border: 1px solid var(--aqua-border);
  border-radius: 22px;
  margin: 20px auto 0;
  width: calc(100% - 40px);
  padding-inline: clamp(20px, 3vw, 42px);
  box-shadow: 0 14px 40px #03081524, inset 0 1px 0 #e9ddff0c;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.aqua-premium .public-brand > span { color: #f5f2ee; }
body.aqua-premium :is(.public-brand small, .brand span) { color: #b2bed4; }
body.aqua-premium .public-nav a { color: #c5cadd; }
body.aqua-premium .public-nav a:hover,
body.aqua-premium .public-nav a[aria-current="page"] { color: #f3d6b1; }
body.aqua-premium .premium-public { --public-line: #b8c6e02b; }
body.aqua-premium .premium-hero { gap: clamp(34px, 5vw, 76px); padding-block: 88px 78px; isolation: isolate; }
body.aqua-premium .premium-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 20px -24px;
  border-radius: 32px;
  background: linear-gradient(90deg, #081226b0, #08122630 63%, transparent);
}
body.aqua-premium :is(.premium-hero h1, .premium-auth-story h1,
  .premium-examples-page h1) {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(3.4rem, 6.1vw, 5.35rem);
  line-height: 1.04;
  letter-spacing: -.055em;
  text-shadow: 0 4px 32px #03081936;
}
body.aqua-premium :is(.premium-hero h1 em, .premium-public h2 em,
  .premium-auth h1 em, .premium-examples-page h1 em) {
  color: var(--aqua-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}
body.aqua-premium :is(.premium-section-heading h2, .premium-bottom-cta h2,
  .premium-faq-layout h2, .premium-about h2, .premium-prompt-band h2) {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.045em;
}
body.aqua-premium .premium-hero .premium-lede { color: #d1d5e3; line-height: 1.85; }
body.aqua-premium :is(.premium-public p, .premium-auth-story > p,
  .premium-credit-card li, .premium-credit-card p, .premium-about p) { color: #bac3d5; }
body.aqua-premium .premium-proof-card {
  border-color: #d6c3e04d;
  background: linear-gradient(135deg, #e1d5ff12, #111d34ed 60%, #22253be8);
  box-shadow: 0 28px 80px #00081748, inset 0 1px 0 #fff2da1a;
  border-radius: 25px;
}
body.aqua-premium .premium-proof-card::before {
  width: 290px;
  height: 290px;
  background: radial-gradient(circle, #f2cba126, #aa8ee015 48%, transparent 70%);
  filter: none;
  animation: none;
}
body.aqua-premium :is(.premium-track-top, .premium-track-meta,
  .premium-principles, .premium-credit-amount span, .premium-auth-benefits li) { color: #c3cadd; }
body.aqua-premium .premium-track-top span:last-child {
  background: #e3c19d09;
  border-color: #edcca138;
  color: #e5d3bd;
}
body.aqua-premium .premium-track-meta strong { color: #f0d3b1; }
body.aqua-premium .premium-record-art {
  position: relative;
  overflow: visible;
  background:
    repeating-radial-gradient(circle at center, transparent 0 11px, #afbae70c 12px 13px),
    radial-gradient(circle at 35% 28%, #dec7a178, #7466a13b 25%, #192c4b 55%, #101a30 76%);
  border-color: #d7bdd14d;
  box-shadow: inset 0 0 45px #0b122b9c, 0 0 62px #ae96d512;
}
body.aqua-premium .premium-record-art::before {
  background: linear-gradient(140deg, #baa3d326, #19304b);
  border-color: #e9cba16b;
}
body.aqua-premium .premium-record-art::after { background: #f5d8b2; box-shadow: 0 0 24px #f2cda038; }
body.aqua-premium .premium-path .premium-path-symbol {
  color: #efd0a9;
  background: linear-gradient(135deg, #eac79b0d, #ad97e712);
  border-color: #c6b2d445;
}
body.aqua-premium :is(.premium-example > small a, .premium-path > a,
  .premium-auth-card .auth-switch a, .premium-auth-card .consent-check a) { color: #f0d4af; }
body.aqua-premium .premium-faq summary::after { color: #efcea4; }
body.aqua-premium .premium-auth-benefits li::before { color: #d9c9f5; }
body.aqua-premium .premium-step-number { color: #efd0a9; background: #15223a; }
body.aqua-premium .premium-password-toggle { color: #ebd1b2; }
body.aqua-premium .premium-password-toggle:hover { background: #e8c9a315; }
body.aqua-premium :is(.public-footer, .main-footer) { border-color: #b8c6e02b; }
body.aqua-premium .public-footer :is(p, nav a) { color: #b6c0d4; }

/* The authenticated studio uses the same quiet materials, without changing grids. */
body.aqua-premium .sidebar {
  background: linear-gradient(160deg, #192139ed, #0c172bed 65%);
  border-color: #b8c6e02b;
  box-shadow: 12px 0 36px #01091921;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.aqua-premium .topbar {
  background: linear-gradient(90deg, #101b31ef, #1a243be6);
  border-color: var(--aqua-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.aqua-premium :is(.nav-item, .sidebar-footer > span) { color: #b8c3d8; }
body.aqua-premium .nav-item.active {
  color: #f1d6b5;
  background: linear-gradient(110deg, #efd1a51c, #ad97e60c);
  border-color: #dfc6ab3b;
  box-shadow: inset 2px 0 0 #efcea4;
}
body.aqua-premium .nav-item:hover { color: #f4e5d2; background: #ced1ed0b; }
body.aqua-premium .nav-item .count { background: #28324b; color: #cdc9e7; }
body.aqua-premium :is(.sidebar-label, .breadcrumbs span) { color: #a2adc6; }
body.aqua-premium .breadcrumbs strong { color: #ede8f0; }
body.aqua-premium .credit-chip { color: #f0d4af; border-color: #e4c69c4d; background: #ead1ae0a; }
body.aqua-premium .private-card p { color: #b9c3d6; }
body.aqua-premium :is(.metric-card > span, .metric-card small,
  .song-tile-body p, .song-facts dt, .song-prompt) { color: #b3bed3; }
body.aqua-premium :is(.song-art, .empty-orbit) {
  color: #efcfa7;
  background: radial-gradient(ellipse at 35% 20%, #d2b2e92e, transparent 55%),
    linear-gradient(140deg, #1c3150, #101c32);
  border-color: #b8c6e02b;
}
body.aqua-premium .creation-mode-switch { background: #111d33db; border-color: #b8c6e02b; }
body.aqua-premium .creation-mode-switch a.active {
  background: linear-gradient(120deg, #e9c79e1a, #ac98e414);
  border-color: #dfc5a94a;
  color: #f2d7b4;
}
body.aqua-premium .song-card .step { color: #f0cda0; background: #efcea40c; border-color: #efcea42c; }
body.aqua-premium :is(.song-inspiration button, .creation-summary) { color: #d4d5e6; }
body.aqua-premium .song-inspiration button { background: #ac98e30a; border-color: #c7b6e338; }
body.aqua-premium .song-inspiration button:hover { background: #ac98e31b; border-color: #d1bdd967; }
body.aqua-premium :is(.progress-track, .status-badge) { background-color: #15223b; }
body.aqua-premium .progress-track > div { background: linear-gradient(90deg, #96b7e1, #baa4e4, #e9c59d); }
body.aqua-premium .library-song:target { outline-color: #efd0a7; }
body.aqua-premium .song-detail-text { color: #ccd0e2; }

body.aqua-premium input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body.aqua-premium select,
body.aqua-premium textarea,
body.aqua-premium .song-card :is(input, select, textarea),
body.aqua-premium .premium-auth-card .field input:not([type="checkbox"]) {
  color: #f2eef2;
  background-color: var(--ocean-field);
  border-color: #aebbd140;
  border-radius: 12px;
}
body.aqua-premium :is(input, textarea)::placeholder { color: #9faec7; opacity: 1; }
body.aqua-premium :is(input, select, textarea):focus,
body.aqua-premium .song-card :is(input, select, textarea):focus {
  border-color: #d5bee8;
  box-shadow: 0 0 0 3px #b8a8ed13;
}
body.aqua-premium :is(input[type="checkbox"], input[type="radio"]) { accent-color: #e3c29e; }
body.aqua-premium :is(label, .field label, .premium-auth-card .field label,
  .premium-auth-card .label-row label) { color: #d7dbea; }

/* Optional local SVG ornament installed by aqua-ocean-si.v1.js. */
body.aqua-premium .aqua-orbit-enhanced { background: radial-gradient(ellipse at 40% 25%, #ab8ddd18, transparent 70%); border-color: #bba7d733; }
body.aqua-premium .aqua-orbit-enhanced::before,
body.aqua-premium .aqua-orbit-enhanced::after { content: none; }
body.aqua-premium .aqua-harmonic-orbit { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
body.aqua-premium .aqua-orbit-track { fill: none; stroke: #e8c7a2; stroke-width: .8; transition: stroke-opacity 600ms ease; }
body.aqua-premium .aqua-orbit-plane-2 .aqua-orbit-track { stroke: #9ebfe2; }
body.aqua-premium .aqua-orbit-plane-3 .aqua-orbit-track { stroke: #b5a2e9; }
body.aqua-premium .aqua-orbit-plane { transform-box: view-box; transform-origin: 160px 160px; }
body.aqua-premium .aqua-orbit-core { transform-origin: 160px 160px; }
body.aqua-premium .aqua-orbit-spark { fill: #f3d5b0; }
body.aqua-premium .aqua-orbit-playing .aqua-orbit-track { stroke-opacity: .8; }

@media (hover: hover) and (pointer: fine) {
  body.aqua-premium .button:not(:disabled):not([aria-disabled="true"]):hover { background: #25334d; border-color: #c6bdd550; transform: translateY(-2px); box-shadow: 0 8px 24px #00061130; }
  body.aqua-premium .button.primary:not(:disabled):not([aria-disabled="true"]):hover { background: linear-gradient(115deg, #ffe9ca, #edcfa9 70%, #d6b48f); color: #241e2c; border-color: #ffebcc9c; box-shadow: 0 9px 30px #edcca126; }
  body.aqua-premium .button.ghost:not(:disabled):not([aria-disabled="true"]):hover { background: #b8a8ed12; }
  body.aqua-premium :is(.premium-example, .premium-path, .library-song):hover { border-color: #d3bddb55; transform: translateY(-3px); box-shadow: 0 24px 64px #00071745; }
}
@media (prefers-reduced-motion: no-preference) {
  body.aqua-premium .aqua-orbit-plane { animation: aqua-harmonic-turn 55s linear infinite; animation-play-state: paused; }
  body.aqua-premium .aqua-orbit-plane-2 { animation-duration: 72s; animation-direction: reverse; }
  body.aqua-premium .aqua-orbit-plane-3 { animation-duration: 88s; }
  body.aqua-premium .aqua-orbit-core { animation: aqua-harmonic-breathe 8s ease-in-out infinite; animation-play-state: paused; }
  body.aqua-premium .aqua-orbit-visible :is(.aqua-orbit-plane, .aqua-orbit-core) { animation-play-state: running; }
}
@keyframes aqua-harmonic-turn { to { rotate: 360deg; } }
@keyframes aqua-harmonic-breathe { 0%, 100% { scale: .98; opacity: .86; } 50% { scale: 1.025; opacity: 1; } }
html.aqua-motion-paused body.aqua-premium :is(.aqua-orbit-plane, .aqua-orbit-core) { animation-play-state: paused; }

@media (max-width: 1200px) {
  body.aqua-premium .public-nav { background: #111d33fa; border-color: #c7b6df40; }
  body.aqua-premium .public-nav a:hover { background: #b8a8ed10; }
}
@media (max-width: 800px) {
  body.aqua-premium .public-header { margin-top: 14px; width: calc(100% - 28px); border-radius: 18px; }
  body.aqua-premium .premium-hero { padding-block: 58px 48px; gap: 36px; }
  body.aqua-premium .premium-hero h1 { font-size: clamp(3.4rem, 9vw, 4.6rem); }
  body.aqua-premium .premium-auth-story h1 { font-size: clamp(2.9rem, 5.6vw, 3.8rem); }
}
@media (max-width: 620px) {
  body.aqua-premium::before { background-position: center, 58% center; }
  body.aqua-premium .public-header { width: calc(100% - 24px); margin-top: 12px; padding-inline: 14px; border-radius: 16px; }
  body.aqua-premium .public-brand > span { font-size: 17px; }
  body.aqua-premium .public-brand img { width: 32px; height: 32px; }
  body.aqua-premium .public-brand { gap: 9px; }
  body.aqua-premium .public-actions .button { padding-inline: 11px; }
  body.aqua-premium .premium-hero { padding-top: 43px; }
  body.aqua-premium .premium-hero::before { inset-inline: -18px; }
  body.aqua-premium .premium-hero h1 { font-size: clamp(3rem, 12.5vw, 4rem); letter-spacing: -.055em; }
  body.aqua-premium .premium-hero .premium-lede { font-size: 17px; line-height: 1.8; }
  body.aqua-premium .premium-auth-story h1 { font-size: 2.75rem; }
  body.aqua-premium :is(.card, .panel, .bank-panel, .song-card, .library-song,
    .premium-auth-card, .premium-example, .premium-path, .premium-credit-card) { border-radius: 18px; }
  body.aqua-premium .premium-proof-card { border-radius: 21px; }
  body.aqua-premium .premium-record-art { max-width: 76%; }
  body.aqua-premium .premium-section-heading h2 { font-size: 2.25rem; }
}
@media (prefers-reduced-transparency: reduce) {
  body.aqua-premium .public-header, body.aqua-premium .topbar, body.aqua-premium .sidebar { background: #111d33; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.aqua-premium { --ocean-glass: #142039; }
}
@media (prefers-reduced-motion: reduce) {
  body.aqua-premium *, body.aqua-premium *::before, body.aqua-premium *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  body.aqua-premium .button:hover,
  body.aqua-premium :is(.premium-example, .premium-path, .library-song):hover { transform: none; }
}
@media (forced-colors: active) {
  body.aqua-premium::before, body.aqua-premium .premium-proof-card::before,
  body.aqua-premium .premium-record-art { display: none; }
  body.aqua-premium, body.aqua-premium .public-header, body.aqua-premium .topbar,
  body.aqua-premium .sidebar, body.aqua-premium .card, body.aqua-premium .panel,
  body.aqua-premium .premium-proof-card, body.aqua-premium .premium-auth-card { color: CanvasText; background: Canvas; box-shadow: none; border-color: CanvasText; backdrop-filter: none; }
  body.aqua-premium .button, body.aqua-premium .button.primary { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; box-shadow: none; }
  body.aqua-premium .nav-item.active { border-color: Highlight; box-shadow: none; }
}