/* Small, shared finishing details for the Sonelle customer pages. */
.night::after,.studio::after,.portal::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 58% 48% at 82% 12%,#bc929d0d,transparent 72%); }
.portal { position:relative; isolation:isolate; }

.night-header,.night-intro,.night-player,.studio-main,.portal-main,.auth-story,.auth-form-panel { animation:sonelle-enter .48s ease-out both; }
.night-player,.auth-form-panel { animation-delay:.08s; }
.studio .voice-inspector,.portal .developer-toc { animation:sonelle-enter .5s .1s ease-out both; }
.portal .account-page:not([hidden]),.studio .voice-library:not([hidden]) { animation:sonelle-panel .3s ease-out both; }
@keyframes sonelle-enter { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes sonelle-panel { from { opacity:.35; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes sonelle-breathe { 50% { opacity:.7; transform:translateY(-50%) scaleY(1.055); } }
@keyframes sonelle-spin { to { transform:rotate(360deg); } }
@keyframes sonelle-pulse { 50% { opacity:.45; } }

.night-actions { display:flex; align-items:center; flex-wrap:wrap; gap:26px; margin-top:44px; }
.night .night-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:36px; min-height:54px; padding:0 21px; border-radius:7px; background:#bc929d; color:#241d23; font-size:16px; transition:background .18s,transform .18s,box-shadow .18s; }
.night .night-cta:hover { background:#d1aab5; color:#241d23; transform:translateY(-2px); box-shadow:0 12px 28px #0b080b30; }
.night .night-cta:active { transform:translateY(0); }
.night-cta img { width:20px; height:20px; filter:none; }
.night .night-docs { color:var(--night-muted); font-size:14px; text-decoration:underline; text-underline-offset:6px; }
.night-wave { isolation:isolate; }
.night-wave-progress { position:absolute; left:0; right:0; bottom:0; width:100%; height:3px; z-index:1; border:0; appearance:none; background:#ffffff27; pointer-events:none; }
.night-wave-progress::-webkit-progress-bar { background:#ffffff27; }
.night-wave-progress::-webkit-progress-value { background:#d8b1bc; transition:width .12s linear; }
.night-wave-progress::-moz-progress-bar { background:#d8b1bc; }
.night-wave input { z-index:2; }
.night-player[data-playing="true"] .night-wave img { animation:sonelle-breathe 2.3s ease-in-out infinite; }
.night-player[data-playing="true"] .night-play { box-shadow:0 0 0 8px #bc929d16; }
.night .voice-option { transition:background .18s,padding .18s; }
.night .voice-option:hover,.night .voice-option[aria-pressed="true"] { background:#bc929d0d; padding-inline:9px; }

.studio .studio-primary,.portal .portal-primary { transition:background .18s,border-color .18s,transform .18s,box-shadow .18s; }
.studio .studio-primary:hover:not(:disabled),.portal .portal-primary:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 10px 24px #0b080b30; }
.studio .studio-primary:active,.portal .portal-primary:active { transform:translateY(0); }
.studio .studio-secondary,.studio .current-voice,.portal .portal-button:not(.portal-primary),.portal .account-action { transition:border-color .18s,background .18s,transform .18s; }
.studio [data-open-key][data-connected="true"]::after { content:""; width:6px; height:6px; border-radius:50%; background:#a5c5ab; box-shadow:0 0 0 3px #a5c5ab1b; }
.studio .current-voice:hover,.portal .account-action:hover { transform:translateY(-2px); }
.studio .voice-row:hover,.portal .data-table tbody tr:hover td { background:#bc929d0a; }
.studio .creation-grid[aria-busy="true"] .generate-button { opacity:1; cursor:progress; }
.studio .creation-grid[aria-busy="true"] .generate-button::after { content:""; width:15px; height:15px; border:2px solid #241d2350; border-top-color:#241d23; border-radius:50%; animation:sonelle-spin .8s linear infinite; }
.studio .result-activity:not([hidden]) { display:inline-flex; align-items:center; gap:8px; color:#d9b5bf; font-size:12px; }
.studio .result-activity:not([hidden])::before { content:""; width:7px; height:7px; border-radius:50%; background:#d9b5bf; animation:sonelle-pulse 1s ease-in-out infinite; }
.studio-dialog[open],.portal-dialog[open],.voice-dialog[open] { animation:sonelle-panel .22s ease-out both; }
.studio-dialog::backdrop,.portal-dialog::backdrop,.voice-dialog::backdrop { animation:sonelle-fade .2s ease-out both; }
@keyframes sonelle-fade { from { opacity:0; } to { opacity:1; } }

.portal input:focus,.portal textarea:focus,.portal select:focus,.studio textarea:focus,.studio input:focus,.studio select:focus { border-color:#b9919d; box-shadow:0 0 0 3px #bc929d1b; }
.portal .account-user .account-refresh { color:var(--muted); }
.portal .account-refresh:hover { color:var(--fg); }
.portal .account-refresh:disabled { opacity:.5; cursor:progress; }
.portal .account-gate[data-action="loading"]>img { animation:sonelle-pulse 1.4s ease-in-out infinite; }
.portal .account-summary { background:linear-gradient(135deg,#2a272b88,#24232766 72%); }
.portal .account-metric strong { letter-spacing:-.025em; }
.portal .account-tabs a,.portal .developer-toc a { transition:color .18s,border-color .18s; }
.portal .auth-story { position:relative; }
.portal .auth-story::after { content:""; display:block; width:52px; height:1px; background:#bc929d; margin-top:34px; }
.auth-password { position:relative; }
.portal .auth-password input { padding-right:83px; }
.auth-password button { position:absolute; top:3px; right:5px; min-height:42px; padding:0 11px; border:0; background:transparent; color:var(--muted); font-size:12px; }
.auth-password button:hover { color:var(--fg); }
.portal .auth-mode button { transition:color .18s,border-color .18s; }
.portal .code-block { transition:border-color .18s; }
.portal .code-block:hover { border-color:#75636d; }
.portal .code-heading button { min-width:70px; }
.portal .doc-progress { position:fixed; top:0; left:0; z-index:30; width:100%; height:3px; appearance:none; border:0; background:transparent; pointer-events:none; }
.portal .doc-progress::-webkit-progress-bar { background:transparent; }
.portal .doc-progress::-webkit-progress-value { background:#bc929d; }
.portal .doc-progress::-moz-progress-bar { background:#bc929d; }

@media(max-width:760px) { .night-actions { margin-top:30px; gap:20px; } .night .night-cta { min-height:48px; font-size:14px; } }
@media(prefers-reduced-motion:reduce) {
  .night::after,.studio::after,.portal::before { background:none; }
  .night *,.studio *,.portal * { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}