/*
  Sala VIP da Voz V20.2 — atualização visual completa.
  Escopo estritamente visual: não altera IDs, estrutura do DOM, motores de áudio,
  pontuação, autenticação, ranking, gravação, transposição, biblioteca ou Divisão Vocal.
*/

:root{
  --svv-bg-0:#070b16;
  --svv-bg-1:#0c1325;
  --svv-bg-2:#111b31;
  --svv-card:#121c31;
  --svv-card-soft:#17243d;
  --svv-card-light:#1d2b49;
  --svv-line:rgba(172,192,255,.18);
  --svv-line-strong:rgba(190,164,255,.42);
  --svv-text:#fbfbff;
  --svv-muted:#c2cbe0;
  --svv-purple:#a85cff;
  --svv-purple-2:#7b3cff;
  --svv-pink:#ff7fc8;
  --svv-blue:#65c7ff;
  --svv-mint:#5ee0b7;
  --svv-yellow:#ffd86f;
  --svv-red:#ff8298;
  --svv-shadow:0 18px 44px rgba(0,0,0,.28);
  --svv-shadow-soft:0 10px 24px rgba(0,0,0,.18);
  --svv-radius-xl:30px;
  --svv-radius-lg:24px;
  --svv-radius-md:18px;
  --svv-radius-sm:14px;
  --primary:var(--svv-purple-2);
  --primary2:#d2b0ff;
  --green:var(--svv-mint);
  --yellow:var(--svv-yellow);
  --red:var(--svv-red);
  --text:var(--svv-text);
  --muted:var(--svv-muted);
  --line:var(--svv-line);
}

html{
  background:var(--svv-bg-0);
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  min-height:100vh;
  min-height:100dvh;
  color:var(--svv-text);
  font-family:ui-rounded,"SF Pro Rounded","Segoe UI Rounded","Nunito Sans",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 7% 3%,rgba(255,127,200,.14),transparent 25rem),
    radial-gradient(circle at 94% 5%,rgba(101,199,255,.15),transparent 27rem),
    radial-gradient(circle at 65% 88%,rgba(94,224,183,.08),transparent 30rem),
    linear-gradient(180deg,var(--svv-bg-0) 0%,#09101f 52%,#070b15 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.42;
  background-image:
    radial-gradient(circle at 12% 17%,rgba(255,255,255,.48) 0 1px,transparent 1.7px),
    radial-gradient(circle at 86% 23%,rgba(255,255,255,.34) 0 1px,transparent 1.7px),
    radial-gradient(circle at 73% 69%,rgba(255,255,255,.28) 0 1px,transparent 1.7px),
    radial-gradient(circle at 20% 78%,rgba(255,255,255,.26) 0 1px,transparent 1.7px);
  background-size:155px 155px,190px 190px,230px 230px,270px 270px;
}

button,input,select,textarea,summary{font-family:inherit}
button{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{
  outline:3px solid #f0c6ff!important;
  outline-offset:3px!important;
}

/* ============================================================
   Estrutura geral, cabeçalho e navegação
   ============================================================ */
#svv-app{
  width:min(100%,800px);
  padding:16px;
}

#svv-app .app-shell{
  position:relative;
  border:1px solid rgba(191,174,255,.22);
  border-radius:var(--svv-radius-xl);
  background:
    radial-gradient(circle at 96% 0%,rgba(101,199,255,.08),transparent 24rem),
    radial-gradient(circle at 0% 30%,rgba(255,127,200,.06),transparent 22rem),
    linear-gradient(165deg,rgba(19,29,50,.98),rgba(8,14,27,.98));
  box-shadow:0 32px 100px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.04);
}

#svv-app .topbar{
  min-height:84px;
  padding:18px 22px 12px;
  border-bottom:1px solid rgba(255,255,255,.045);
  background:linear-gradient(180deg,rgba(14,21,39,.94),rgba(14,21,39,.56));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

#svv-app .brand{gap:12px}
#svv-app .brand-mark{
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-radius:17px;
  color:#fff;
  background:linear-gradient(145deg,var(--svv-pink),var(--svv-purple-2));
  box-shadow:0 10px 24px rgba(135,62,255,.34),inset 0 1px 0 rgba(255,255,255,.42);
}
#svv-app .brand-mark .ux-icon{width:29px;height:29px}
#svv-app .brand-copy h1{
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.015em;
  text-transform:none;
  color:#f5d4ff;
}
#svv-app .runtime{
  margin-top:4px;
  color:#c7d2e8;
  font-size:.9rem;
  font-weight:560;
}
#svv-app .runtime::before{
  content:"●";
  margin-right:6px;
  color:var(--svv-mint);
  font-size:.65rem;
  text-shadow:0 0 10px rgba(94,224,183,.8);
}

#svv-app #ux-account-open,
#svv-app .ux-icon-button{
  border:1px solid rgba(198,158,255,.26);
  background:linear-gradient(145deg,rgba(168,92,255,.16),rgba(101,199,255,.08));
  color:#f5dcff;
  border-radius:17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
#svv-app .ux-icon-button:hover{
  transform:translateY(-1px);
  border-color:rgba(229,197,255,.62);
  background:linear-gradient(145deg,rgba(168,92,255,.25),rgba(101,199,255,.13));
}

#svv-app .app-body{padding:0 26px calc(var(--ux-dock-size) + 24px)}
#svv-app .ux-nav{
  margin:10px -4px 17px;
  padding:9px 6px;
  border-radius:18px;
  background:rgba(18,28,49,.55);
  border:1px solid rgba(255,255,255,.045);
}
#svv-app .ux-nav h2{
  font-size:1.46rem;
  font-weight:900;
  letter-spacing:-.025em;
}

#svv-app .ux-steps{
  position:relative;
  margin:2px 2px 24px;
  padding:12px 8px;
  border:1px solid rgba(183,164,255,.16);
  border-radius:20px;
  background:rgba(13,21,39,.68);
}
#svv-app .ux-steps li{font-size:.92rem;font-weight:700;color:#aab6ce}
#svv-app .ux-step-number{
  width:36px;
  height:36px;
  border:2px solid #465675;
  background:#101a2d;
  font-weight:900;
}
#svv-app .ux-steps li:before{top:29px;background:linear-gradient(90deg,#44516e,#6e4c99)}
#svv-app .ux-steps li[aria-current="step"] .ux-step-number{
  border-color:#efb9ff;
  background:linear-gradient(145deg,var(--svv-pink),var(--svv-purple-2));
  box-shadow:0 0 0 5px rgba(168,92,255,.13),0 8px 18px rgba(92,37,185,.28);
}
#svv-app .ux-steps li.done .ux-step-number{
  color:#071b16;
  border-color:#b5f8df;
  background:linear-gradient(145deg,#86f0ce,var(--svv-mint));
}

/* ============================================================
   Tela inicial — lúdica, clara e inclusiva para todas as idades
   ============================================================ */
#svv-app .ux-home{padding-bottom:8px}
#svv-app .ux-hero{
  min-height:282px;
  margin:0 0 20px;
  padding:29px 18px 25px;
  border:1px solid rgba(223,183,255,.25);
  border-radius:30px;
  background:
    radial-gradient(circle at 12% 13%,rgba(255,216,111,.15),transparent 12rem),
    radial-gradient(circle at 90% 8%,rgba(101,199,255,.17),transparent 13rem),
    linear-gradient(135deg,rgba(71,30,102,.74),rgba(16,31,57,.94));
  box-shadow:var(--svv-shadow-soft),inset 0 1px 0 rgba(255,255,255,.08);
}
#svv-app .ux-hero::before{
  content:"✦";
  position:absolute;
  top:18px;
  right:22px;
  z-index:1;
  color:var(--svv-yellow);
  font-size:1.25rem;
  text-shadow:28px 34px 0 rgba(101,199,255,.75),-238px 20px 0 rgba(255,127,200,.65);
}
#svv-app .ux-hero-photo{
  width:46%;
  opacity:.92;
  object-position:50% 30%;
  filter:saturate(1.08) contrast(1.02);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 92%);
  mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 92%);
}
#svv-app .ux-hero::after{
  background:
    linear-gradient(90deg,#17142a 0%,rgba(23,20,42,.93) 34%,rgba(23,20,42,.34) 70%,rgba(23,20,42,.05)),
    linear-gradient(0deg,rgba(12,18,33,.90),transparent 35%);
}
#svv-app .ux-hero-copy{max-width:69%;padding:8px 4px}
#svv-app .ux-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 11px;
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  color:#fff0bd;
  background:rgba(255,216,111,.11);
  font-size:.72rem;
  letter-spacing:.11em;
}
#svv-app .ux-hero h2{
  max-width:440px;
  margin:0 0 14px;
  font-size:clamp(2.25rem,6.2vw,3.25rem);
  line-height:1.01;
  font-weight:950;
  letter-spacing:-.055em;
  text-wrap:balance;
}
#svv-app .ux-hero-copy>p:last-child{max-width:430px;color:#e2e8f4;font-size:1.1rem;font-weight:580}

#svv-app .ux-home-options{gap:15px}
#svv-app .ux-choice{
  position:relative;
  grid-template-columns:66px minmax(0,1fr) 30px;
  gap:16px;
  min-height:122px;
  padding:17px 19px;
  border-radius:26px;
  border-width:1px;
  box-shadow:0 13px 30px rgba(0,0,0,.19),inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
#svv-app .ux-choice::before{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-34px;
  bottom:-62px;
  border-radius:50%;
  background:rgba(255,255,255,.065);
}
#svv-app .ux-choice::after{
  position:absolute;
  top:12px;
  right:15px;
  padding:4px 8px;
  border-radius:999px;
  color:rgba(255,255,255,.72);
  background:rgba(0,0,0,.12);
  font-size:.63rem;
  font-weight:900;
  letter-spacing:.08em;
}
#svv-app .ux-choice[data-friendly="music"]::after{content:"MÚSICA"}
#svv-app .ux-choice[data-friendly="exercise"]::after{content:"EXERCÍCIOS"}
#svv-app .ux-choice[data-friendly="division"]::after{content:"HARMONIA"}
#svv-app .ux-choice[data-friendly="music"]{
  background:linear-gradient(135deg,rgba(255,127,200,.31),rgba(108,48,194,.31));
  border-color:rgba(255,166,218,.64);
}
#svv-app .ux-choice[data-friendly="exercise"]{
  background:linear-gradient(135deg,rgba(101,199,255,.25),rgba(54,102,210,.25));
  border-color:rgba(122,210,255,.57);
}
#svv-app .ux-choice[data-friendly="division"]{
  background:linear-gradient(135deg,rgba(94,224,183,.23),rgba(38,125,114,.26));
  border-color:rgba(120,239,202,.54);
}
#svv-app .ux-choice:hover{transform:translateY(-2px);box-shadow:0 18px 35px rgba(0,0,0,.25)}
#svv-app .ux-choice:active{transform:scale(.985)}
#svv-app .ux-choice-icon{
  width:66px;
  height:70px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:22px;
  box-shadow:0 8px 18px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.35);
}
#svv-app .ux-choice-icon svg{width:36px;height:36px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}
#svv-app .ux-choice strong{font-size:1.28rem;font-weight:900;letter-spacing:-.015em}
#svv-app .ux-choice small{max-width:470px;color:#eef2fa;font-size:1rem;font-weight:530}
#svv-app .ux-chevron{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.13);
  font-size:1.65rem;
}
#svv-app .ux-home #ux-how{
  min-height:52px;
  margin:20px auto 4px;
  padding:10px 17px;
  border:1px solid rgba(203,174,255,.21);
  border-radius:999px;
  background:rgba(145,84,232,.08);
}
#svv-app .ux-credit{margin-top:16px;color:#9eabc4;font-size:.92rem}

/* ============================================================
   Galeria — busca, filtros, categorias e arquivos do aparelho
   ============================================================ */
#svv-app #ux-gallery-intro{
  margin-bottom:14px;
  padding:14px 16px;
  border:1px solid rgba(101,199,255,.18);
  border-radius:18px;
  color:#dce8f8;
  background:linear-gradient(135deg,rgba(101,199,255,.09),rgba(168,92,255,.07));
}
#svv-app .ux-search{
  min-height:60px;
  border:1px solid rgba(151,184,234,.28);
  border-radius:19px;
  background:#121d31;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
#svv-app .ux-search:focus-within{
  border-color:#c99aff;
  box-shadow:0 0 0 4px rgba(168,92,255,.12),inset 0 1px 0 rgba(255,255,255,.05);
}
#svv-app .ux-search .ux-icon{color:var(--svv-blue)}
#svv-app .ux-search input{font-size:1.05rem;font-weight:600}
#svv-app .ux-categories{gap:9px;margin-bottom:21px}
#svv-app .ux-categories button{
  min-height:46px;
  padding:8px 15px;
  border-radius:999px;
  border:1px solid rgba(150,173,218,.26);
  background:#111b2f;
  color:#d2d9e9;
  font-weight:750;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
#svv-app .ux-categories button:nth-child(2){border-color:rgba(255,157,99,.32)}
#svv-app .ux-categories button:nth-child(3){border-color:rgba(101,199,255,.32)}
#svv-app .ux-categories button:nth-child(4){border-color:rgba(255,127,200,.32)}
#svv-app .ux-categories button[aria-pressed="true"]{
  color:#fff;
  border-color:#d7acff;
  background:linear-gradient(135deg,#8e43e8,#6d33c7);
  box-shadow:0 8px 18px rgba(86,38,155,.28);
}

#svv-app .library-grid{gap:26px}
#svv-app .library-category{
  padding:15px;
  border:1px solid rgba(155,176,217,.13);
  border-radius:23px;
  background:rgba(15,24,42,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#svv-app .library-category-head{padding:0 2px 13px}
#svv-app .library-category-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(145deg,rgba(255,127,200,.18),rgba(101,199,255,.13));
  border:1px solid rgba(255,255,255,.08);
}
#svv-app .library-category-copy strong{font-size:1.18rem;font-weight:900}
#svv-app .library-category-copy small{color:#b9c6dc;font-size:.94rem}
#svv-app .library-category-count{
  padding:5px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#d2dcef;
  font-size:.84rem;
  font-weight:800;
}
#svv-app .library-category-cards{gap:11px}
#svv-app .library-card{
  min-height:88px;
  grid-template-columns:56px minmax(0,1fr) 26px;
  gap:13px;
  padding:13px 14px;
  border:1px solid rgba(137,166,215,.20);
  border-radius:19px;
  background:linear-gradient(135deg,#17233a,#111a2d);
  box-shadow:0 7px 18px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.025);
}
#svv-app .library-card:hover{
  transform:translateY(-1px);
  border-color:rgba(209,170,255,.55);
  background:linear-gradient(135deg,#1d2943,#171f34);
}
#svv-app .library-card.selected{
  border:2px solid #c891ff;
  background:linear-gradient(135deg,rgba(112,53,177,.40),rgba(24,35,58,.98));
  box-shadow:0 0 0 4px rgba(168,92,255,.10),0 10px 24px rgba(0,0,0,.17);
}
#svv-app .library-number,
#svv-app .library-number.icon{
  width:56px;
  height:60px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(101,199,255,.20),rgba(168,92,255,.20));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#svv-app .library-card[data-category="aquecimento"] .library-number{background:linear-gradient(145deg,rgba(255,168,89,.27),rgba(255,102,112,.17))}
#svv-app .library-card[data-category="respiratorio"] .library-number{background:linear-gradient(145deg,rgba(101,199,255,.27),rgba(56,130,197,.17))}
#svv-app .library-card[data-category="afinacao"] .library-number{background:linear-gradient(145deg,rgba(255,127,200,.24),rgba(168,92,255,.20))}
#svv-app .library-copy strong{font-size:1.13rem;font-weight:900}
#svv-app .library-copy small{color:#bec9dd;font-size:.96rem}
#svv-app .library-action::after{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:50%;
  color:#f7eaff;
  background:rgba(168,92,255,.16);
  font-size:1.55rem;
}

#svv-app .ux-device-audio{
  margin:26px 0 10px;
  padding:18px;
  border:1px solid rgba(101,199,255,.34);
  border-radius:25px;
  background:
    radial-gradient(circle at 92% 10%,rgba(255,216,111,.10),transparent 9rem),
    linear-gradient(145deg,rgba(101,199,255,.14),rgba(168,92,255,.09));
  box-shadow:var(--svv-shadow-soft);
}
#svv-app .ux-device-audio-head>span{
  width:52px;
  height:52px;
  flex-basis:52px;
  border-radius:18px;
  background:linear-gradient(145deg,#397bc5,#5c3dc1);
  box-shadow:0 8px 18px rgba(20,64,128,.28);
}
#svv-app .ux-device-audio-head strong{font-size:1.13rem;font-weight:900}
#svv-app .ux-device-audio-head small{color:#c4d0e4}
#svv-app .ux-device-actions{gap:11px}
#svv-app .ux-device-button{
  min-height:55px;
  border-radius:17px;
  border-color:rgba(153,178,222,.30);
  background:#17243b;
  font-weight:850;
}
#svv-app .ux-device-button.ux-device-primary{
  background:linear-gradient(120deg,#a44bf5,#7136df);
  border-color:#d5a4ff;
  box-shadow:0 9px 19px rgba(96,43,175,.27);
}
#svv-app .ux-device-audio p{
  padding:11px 12px;
  border-radius:14px;
  background:rgba(8,15,28,.42);
  color:#c3cde0;
}

/* ============================================================
   Preparação — checklist visual, gravação e opções avançadas
   ============================================================ */
#svv-app .selected-source{
  margin-bottom:16px;
  padding:15px;
  border:1px solid rgba(195,164,255,.34);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(168,92,255,.16),rgba(101,199,255,.08));
  box-shadow:var(--svv-shadow-soft);
}
#svv-app .selected-icon{
  width:54px;
  height:58px;
  flex-basis:54px;
  border-radius:19px;
  background:linear-gradient(145deg,var(--svv-pink),var(--svv-purple-2));
  border-color:rgba(255,255,255,.25);
  box-shadow:0 8px 18px rgba(98,39,174,.25);
}
#svv-app .selected-copy strong{font-size:1.25rem;font-weight:900}
#svv-app .selected-copy small{color:#c6d0e2}
#svv-app #svv-clear{
  border-radius:999px!important;
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.16)!important;
}

#svv-app .ux-prep-tips{gap:12px}
#svv-app .ux-tip{
  position:relative;
  min-height:92px;
  padding:15px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:21px;
  background:linear-gradient(135deg,rgba(101,199,255,.11),rgba(17,27,47,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#svv-app .ux-tip:nth-child(2){background:linear-gradient(135deg,rgba(94,224,183,.10),rgba(17,27,47,.88))}
#svv-app .ux-tip>.ux-icon{
  width:46px;
  height:46px;
  padding:10px;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(145deg,#4f9ddd,#5f55d7);
  box-shadow:0 7px 17px rgba(41,82,142,.25);
}
#svv-app .ux-tip:nth-child(2)>.ux-icon{background:linear-gradient(145deg,#39b58e,#4c8fd4)}
#svv-app .ux-tip strong{font-size:1.08rem;font-weight:900}
#svv-app .ux-tip p{margin-top:4px;color:#c2ccdf}

#svv-app .v17-record-options{
  margin:15px 0;
  padding:16px;
  border:1px solid rgba(255,127,200,.24);
  border-radius:23px;
  background:
    radial-gradient(circle at 92% 8%,rgba(255,127,200,.09),transparent 9rem),
    linear-gradient(145deg,rgba(94,42,95,.18),rgba(15,25,44,.94));
}
#svv-app .v17-record-options::before{
  content:"OPCIONAL · GUARDE UMA LEMBRANÇA DO TREINO";
  display:block;
  margin:0 0 11px;
  color:#f0c4ff;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.08em;
}
#svv-app .v17-toggle{
  min-height:62px;
  padding:9px 10px;
  border-radius:17px;
  background:rgba(255,255,255,.035);
}
#svv-app .v17-toggle+ .v17-toggle{margin-top:8px}
#svv-app .v17-toggle input{
  width:23px;
  height:23px;
  accent-color:var(--svv-pink);
}
#svv-app .v17-toggle strong{font-weight:900}
#svv-app .v17-toggle small{color:#bec7d9}

#svv-app .ux-disclosure{
  border:1px solid rgba(145,169,211,.18);
  border-radius:19px;
  background:rgba(15,24,42,.70);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#svv-app .ux-disclosure>summary{
  min-height:58px;
  padding:14px 15px;
  color:#f0e6ff;
  font-weight:800;
}
#svv-app .ux-disclosure>summary:hover{background:rgba(168,92,255,.055)}
#svv-app .ux-disclosure[open]>summary{border-bottom:1px solid rgba(255,255,255,.07)}
#svv-app .ux-disclosure-body{padding:10px 15px 16px}
#svv-app .ux-tone-controls button{
  min-height:76px;
  border-radius:18px;
  border-color:rgba(151,176,219,.25);
  background:#16233b;
}
#svv-app .ux-tone-controls button[aria-pressed="true"]{
  border-color:#d4a0ff;
  background:linear-gradient(145deg,#8140d6,#5e32b8);
  box-shadow:0 8px 18px rgba(81,35,148,.26);
}
#svv-app .segmented.level{
  padding:5px;
  border-radius:18px;
  background:#101a2d;
}
#svv-app .segmented.level button{min-height:46px;border-radius:13px;font-weight:850}
#svv-app .segmented.level button[aria-pressed="true"]{
  background:linear-gradient(145deg,#a04ff0,#6e39d2);
  box-shadow:0 7px 15px rgba(87,40,151,.24);
}

#svv-app .ux-dock{
  border-top:1px solid rgba(213,181,255,.16);
  background:linear-gradient(180deg,rgba(8,13,25,.82),rgba(8,13,25,.97));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 -18px 40px rgba(0,0,0,.22);
}
#svv-app .ux-dock-inner{padding-top:13px}
#svv-app .ux-primary{
  position:relative;
  min-height:60px;
  border-radius:20px;
  border:1px solid #e0b4ff;
  background:linear-gradient(115deg,#ad55f2 0%,#7e39e4 55%,#6042d6 100%);
  box-shadow:0 11px 25px rgba(94,39,176,.35),inset 0 1px 0 rgba(255,255,255,.28);
  font-size:1.16rem;
  font-weight:900;
}
#svv-app .ux-primary:hover{filter:brightness(1.08)}
#svv-app .ux-secondary{
  border-radius:18px;
  border-color:rgba(153,177,218,.27);
  background:#17243b;
  font-weight:800;
}
#svv-app .ux-action-hint{color:#d0d8e8;font-weight:650}

/* ============================================================
   Microfone — uma etapa simples, visual e acolhedora
   ============================================================ */
#svv-app .ux-microphone{
  padding:18px 17px;
  border:1px solid rgba(101,199,255,.18);
  border-radius:27px;
  background:
    radial-gradient(circle at 50% 25%,rgba(101,199,255,.12),transparent 17rem),
    linear-gradient(160deg,rgba(21,35,59,.90),rgba(10,18,32,.90));
  text-align:center;
}
#svv-app .ux-microphone h3{font-weight:950;letter-spacing:-.025em}
#svv-app .ux-mic-ring{
  position:relative;
  border:2px solid rgba(132,209,255,.42);
  background:
    radial-gradient(circle,rgba(101,199,255,.18),rgba(168,92,255,.10) 55%,rgba(8,15,28,.30) 72%);
  box-shadow:0 0 0 12px rgba(101,199,255,.035),0 0 50px rgba(91,130,255,.16),inset 0 0 35px rgba(255,255,255,.05);
}
#svv-app .ux-mic-ring::before,
#svv-app .ux-mic-ring::after{
  content:"";
  position:absolute;
  inset:-13px;
  border:1px solid rgba(168,92,255,.20);
  border-radius:50%;
}
#svv-app .ux-mic-ring::after{inset:-27px;border-color:rgba(101,199,255,.10)}
#svv-app .ux-big-mic{
  border-radius:22px;
  color:#fff;
  background:linear-gradient(145deg,var(--svv-pink),var(--svv-purple-2));
  box-shadow:0 12px 25px rgba(115,48,203,.32);
}
#svv-app .ux-signal{
  height:12px;
  border-radius:999px;
  background:#111d32;
  overflow:hidden;
}
#svv-app .ux-signal>span{border-radius:999px;background:linear-gradient(90deg,var(--svv-blue),var(--svv-mint),var(--svv-yellow))}
#svv-app .ux-mic-ready{
  border-radius:18px;
  border-color:rgba(94,224,183,.34);
  background:rgba(47,145,114,.12);
}

/* ============================================================
   Treinador em tempo real — feedback primeiro, detalhes depois
   ============================================================ */
#svv-app .ux-train-track{
  padding:13px 14px;
  border:1px solid rgba(159,177,219,.16);
  border-radius:20px;
  background:rgba(15,24,42,.66);
}
#svv-app .ux-train-icon{
  width:50px;
  height:54px;
  flex-basis:50px;
  border-radius:17px;
  background:linear-gradient(145deg,rgba(255,127,200,.26),rgba(168,92,255,.24));
  border-color:rgba(255,255,255,.11);
}
#svv-app .ux-train-track h3{font-weight:900}
#svv-app .ux-mic-badge{
  border-radius:999px;
  border-color:rgba(94,224,183,.34);
  background:rgba(94,224,183,.10);
  color:#bff8e5;
}

#svv-app .ux-instruction-wrap{
  margin:14px 0;
  padding:14px 16px;
  border:1px solid rgba(255,216,111,.18);
  border-radius:21px;
  background:linear-gradient(135deg,rgba(255,216,111,.08),rgba(168,92,255,.06));
}
#svv-app .ux-instruction-wrap h3{
  min-height:auto;
  color:#ffe087;
  font-weight:950;
  letter-spacing:-.02em;
}
#svv-app .ux-instruction-wrap p{color:#c8d3e5}

#svv-app .game-panel{
  padding:13px;
  border:1px solid rgba(255,216,111,.38);
  border-radius:24px;
  background:linear-gradient(160deg,rgba(21,31,52,.93),rgba(8,15,27,.97));
  box-shadow:0 14px 30px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035);
}
#svv-app .game-stage{
  border:1px solid rgba(107,199,255,.23);
  border-radius:20px;
  background:
    linear-gradient(rgba(101,199,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(101,199,255,.028) 1px,transparent 1px),
    radial-gradient(circle at 50% 25%,rgba(168,92,255,.10),transparent 55%),
    #080f1d;
  background-size:24px 24px,24px 24px,auto,auto;
  box-shadow:inset 0 0 26px rgba(0,0,0,.26);
}
#svv-app .ux-legend{
  margin-top:11px;
  padding:9px 11px;
  border-radius:15px;
  background:rgba(255,255,255,.025);
}
#svv-app .v183-color-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  margin:9px 0;
  padding:9px 11px;
  border-radius:15px;
  background:rgba(255,255,255,.025);
}
#svv-app .v183-color-legend>span{display:flex;align-items:center;gap:6px}
#svv-app .correction{padding:9px 10px;border-radius:16px;background:rgba(13,22,39,.64)}
#svv-app .meter{height:24px;border-radius:999px;border-color:rgba(158,181,220,.22)}
#svv-app .needle{width:16px;height:16px}
#svv-app .seek-row{margin:11px 1px;color:#c8d1e0;font-size:.86rem}
#svv-app .seek-row input{height:34px;accent-color:var(--svv-purple)}
#svv-app .more{
  margin-top:12px;
  border:1px solid rgba(153,175,215,.18);
  border-radius:19px;
  background:rgba(15,24,42,.70);
}
#svv-app .more>summary{
  min-height:56px;
  padding:14px 15px;
  color:#e4c7ff;
  font-weight:850;
}
#svv-app .more-content{padding:4px 14px 15px}
#svv-app .note-mini{
  border-radius:16px;
  background:#101a2d;
}
#svv-app .stats{gap:8px}
#svv-app .stat{
  padding:11px 6px;
  border-radius:16px;
  background:rgba(255,255,255,.035);
}
#svv-app .chart-wrap,
#svv-app .map-box{
  border-radius:18px;
  border-color:rgba(151,177,218,.20);
  background:#0a1221;
}
#svv-app .tech-grid .tech,
#svv-app .score-pill{
  border-radius:15px;
  background:#111b2e;
}
#svv-app #v17-finish,
#svv-app #ux-change-track{
  min-height:50px;
  margin:10px auto 0;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(195,160,255,.16);
  background:rgba(168,92,255,.06);
}

/* ============================================================
   Resultado — celebração clara, sem esconder dados
   ============================================================ */
.completion-overlay{
  background:rgba(4,7,16,.84)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.completion-card{
  border:1px solid rgba(222,184,255,.40)!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 50% -6%,rgba(255,216,111,.19),transparent 18rem),
    radial-gradient(circle at 95% 10%,rgba(101,199,255,.12),transparent 15rem),
    linear-gradient(165deg,#17213a,#0e1729)!important;
  box-shadow:0 35px 120px rgba(0,0,0,.62)!important;
}
.completion-close{
  border-radius:50%!important;
  background:rgba(255,255,255,.075)!important;
}
.completion-trophy{
  width:92px!important;
  height:92px!important;
  display:grid!important;
  place-items:center!important;
  margin:5px auto 15px!important;
  border:1px solid rgba(255,216,111,.48)!important;
  border-radius:30px!important;
  background:linear-gradient(145deg,rgba(255,216,111,.24),rgba(168,92,255,.22))!important;
  box-shadow:0 14px 34px rgba(95,43,166,.22),0 0 40px rgba(255,216,111,.12)!important;
}
.completion-card h2{font-weight:950!important;letter-spacing:-.035em!important}
.completion-stars{gap:8px!important;color:var(--svv-yellow)}
.completion-score{
  display:inline-grid;
  place-items:center;
  min-width:132px;
  min-height:132px;
  margin:13px auto 5px!important;
  padding:10px;
  border:5px solid rgba(255,255,255,.10);
  border-radius:50%;
  background:linear-gradient(145deg,rgba(168,92,255,.30),rgba(94,224,183,.14));
  box-shadow:0 0 0 7px rgba(168,92,255,.07),0 18px 38px rgba(0,0,0,.20);
  color:#fff!important;
  -webkit-text-fill-color:#fff;
  text-shadow:0 4px 15px rgba(0,0,0,.25)!important;
}
.completion-message{
  border-color:rgba(101,199,255,.22)!important;
  border-radius:19px!important;
  background:rgba(101,199,255,.07)!important;
}
.completion-actions{
  gap:10px!important;
  border-top-color:rgba(255,255,255,.07)!important;
  background:rgba(11,18,32,.96)!important;
}
.completion-actions button{border-radius:18px!important;font-weight:900!important}
.completion-repeat{
  background:linear-gradient(115deg,#ad55f2,#7337df)!important;
  border-color:#dda9ff!important;
}
.completion-another{background:#17243b!important;border-color:rgba(155,179,220,.25)!important}
.completion-stat,
.v17-breakdown>div,
.rank-result-card{
  border-radius:17px!important;
  border:1px solid rgba(151,174,214,.16)!important;
  background:rgba(255,255,255,.035)!important;
}
.v17-recording-result{
  border-radius:21px!important;
  border-color:rgba(255,127,200,.22)!important;
  background:rgba(255,127,200,.055)!important;
}
.v17-learning{border-radius:17px!important}

/* ============================================================
   Conta, ajuda, ranking e perfil — aparência de cartões simples
   ============================================================ */
.ux-overlay,
.svv-rank-overlay{
  background:rgba(4,7,16,.82)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.ux-dialog,
.svv-rank-dialog{
  border:1px solid rgba(213,179,255,.35)!important;
  border-radius:29px!important;
  background:
    radial-gradient(circle at 92% 0%,rgba(101,199,255,.09),transparent 14rem),
    linear-gradient(165deg,#17223b,#0f182a)!important;
  box-shadow:0 32px 100px rgba(0,0,0,.57)!important;
}
.ux-dialog-head,
.svv-rank-head{
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  background:rgba(255,255,255,.025)!important;
}
.ux-dialog-head h2,
.svv-rank-head h2{font-weight:950!important;letter-spacing:-.025em!important}
.ux-menu{display:grid;gap:10px}
.ux-menu button{
  min-height:58px;
  justify-content:flex-start;
  gap:13px;
  padding:12px 14px;
  border:1px solid rgba(151,177,219,.18);
  border-radius:18px;
  background:linear-gradient(135deg,#17243b,#131e33);
  color:#f5f3ff;
  font-size:1.05rem;
  font-weight:800;
}
.ux-menu button:hover{border-color:rgba(213,174,255,.48);background:#1d2943}
.ux-menu button .ux-icon{
  width:38px;
  height:38px;
  padding:8px;
  border-radius:13px;
  color:#f5dcff;
  background:rgba(168,92,255,.13);
}
.svv-access-bar{
  margin-top:15px;
  padding:14px;
  border-radius:20px;
  border-color:rgba(94,224,183,.28)!important;
  background:rgba(94,224,183,.07)!important;
}
.svv-access-actions button{border-radius:999px!important}
.svv-updates{
  margin-top:12px;
  padding:15px;
  border:1px solid rgba(101,199,255,.20);
  border-radius:19px;
  background:rgba(101,199,255,.06);
}
.svv-updates-primary{border-radius:17px!important}

.ux-help-step{
  margin:10px 0;
  padding:13px;
  border:1px solid rgba(151,176,218,.16);
  border-radius:19px;
  background:rgba(255,255,255,.028);
}
.ux-help-step>b{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(145deg,var(--svv-pink),var(--svv-purple-2));
}
.ux-info{
  border-radius:18px!important;
  border-color:rgba(101,199,255,.19)!important;
  background:rgba(101,199,255,.06)!important;
}

.svv-rank-head{
  background:linear-gradient(135deg,rgba(255,216,111,.10),rgba(168,92,255,.08))!important;
}
.svv-rank-week{
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  text-align:center;
}
.svv-rank-me{
  border-radius:20px!important;
  border-color:rgba(255,216,111,.28)!important;
  background:linear-gradient(135deg,rgba(255,216,111,.10),rgba(168,92,255,.07))!important;
}
.svv-rank-row{
  margin:7px 0;
  border:1px solid rgba(151,176,218,.14);
  border-radius:17px;
  background:rgba(255,255,255,.028);
}
.svv-rank-row:nth-child(1){border-color:rgba(255,216,111,.34);background:rgba(255,216,111,.06)}
.svv-rank-row:nth-child(2){border-color:rgba(196,210,231,.26)}
.svv-rank-row:nth-child(3){border-color:rgba(213,151,106,.26)}
.svv-rank-pos{border-radius:13px!important}
.svv-rank-actions button,
.svv-profile-save{border-radius:17px!important;font-weight:850!important}
.svv-profile-input{border-radius:16px!important}
.svv-profile-toggle{border-radius:18px!important;background:rgba(255,255,255,.035)!important}

/* ============================================================
   Autenticação — primeira experiência igualmente amigável
   ============================================================ */
.svv-auth-gate{
  padding:18px!important;
  background:
    radial-gradient(circle at 10% 10%,rgba(255,127,200,.17),transparent 20rem),
    radial-gradient(circle at 90% 8%,rgba(101,199,255,.17),transparent 22rem),
    linear-gradient(180deg,#080d19,#0a1222)!important;
}
.svv-auth-card{
  position:relative;
  overflow:hidden;
  width:min(100%,510px)!important;
  border:1px solid rgba(216,181,255,.36)!important;
  border-radius:31px!important;
  background:
    radial-gradient(circle at 93% 2%,rgba(101,199,255,.11),transparent 12rem),
    linear-gradient(165deg,#182440,#10192d)!important;
  box-shadow:0 35px 110px rgba(0,0,0,.54),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.svv-auth-card::before{
  content:"✦";
  position:absolute;
  top:18px;
  right:21px;
  color:var(--svv-yellow);
  font-size:1.25rem;
  text-shadow:-350px 70px 0 rgba(255,127,200,.55),-30px 115px 0 rgba(101,199,255,.55);
}
.svv-auth-head{padding:31px 27px 22px!important}
.svv-auth-logo{
  width:76px!important;
  height:76px!important;
  display:grid!important;
  place-items:center!important;
  margin:0 auto!important;
  border-radius:25px!important;
  background:linear-gradient(145deg,var(--svv-pink),var(--svv-purple-2))!important;
  box-shadow:0 13px 28px rgba(106,44,192,.34),inset 0 1px 0 rgba(255,255,255,.38)!important;
  font-size:2.2rem!important;
}
.svv-auth-head h1{font-size:1.86rem!important;font-weight:950!important;letter-spacing:-.03em!important}
.svv-auth-head p{color:#c8d3e6!important}
.svv-auth-body{padding:12px 27px 29px!important}
.svv-auth-label{font-weight:800!important;color:#eef2fa!important}
.svv-auth-input{
  min-height:58px!important;
  border:1px solid rgba(151,177,220,.28)!important;
  border-radius:18px!important;
  background:#0e182b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.svv-auth-input:focus{border-color:#d19cff!important;box-shadow:0 0 0 4px rgba(168,92,255,.11)!important}
.svv-auth-button{
  min-height:58px!important;
  border-radius:19px!important;
  font-weight:900!important;
  background:linear-gradient(115deg,#ad55f2,#7137dc)!important;
  border:1px solid #ddaaff!important;
  box-shadow:0 10px 22px rgba(92,38,169,.29)!important;
}
.svv-auth-button.secondary{
  background:#17243b!important;
  border-color:rgba(151,177,219,.26)!important;
  box-shadow:none!important;
}
.svv-auth-button.green{
  color:#062016!important;
  background:linear-gradient(115deg,#8bf1d2,var(--svv-mint))!important;
  border-color:#c4ffe9!important;
}
.svv-auth-link{color:#dfc5ff!important;font-weight:750!important}
.svv-auth-icon{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  margin:0 auto 12px;
  border-radius:24px;
  background:rgba(255,255,255,.06);
  font-size:2rem;
}

/* ============================================================
   Divisão Vocal — mesma linguagem visual do restante do app
   ============================================================ */
#svv-division{
  --dv-bg:var(--svv-bg-0);
  --dv-card:var(--svv-card);
  --dv-line:rgba(153,177,219,.22);
  --dv-purple:var(--svv-purple-2);
  --dv-lilac:#e0c5ff;
  --dv-text:var(--svv-text);
  --dv-muted:var(--svv-muted);
  max-width:800px;
  background:
    radial-gradient(circle at 7% 3%,rgba(255,127,200,.13),transparent 22rem),
    radial-gradient(circle at 94% 5%,rgba(101,199,255,.13),transparent 25rem),
    linear-gradient(180deg,var(--svv-bg-0),#091120);
}
#svv-division .dv-brand{
  padding:11px 13px;
  margin-bottom:16px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:19px;
  background:rgba(17,27,47,.72);
}
#svv-division .dv-brand img{
  width:48px;
  height:48px;
  border-radius:17px;
  box-shadow:0 8px 18px rgba(100,40,180,.24);
}
#svv-division .dv-brand strong{font-weight:950;color:#f1d2ff}
#svv-division .dv-nav{
  padding:8px 6px;
  border:1px solid rgba(255,255,255,.045);
  border-radius:18px;
  background:rgba(17,27,47,.54);
}
#svv-division .dv-nav h2{font-weight:950;letter-spacing:-.025em}
#svv-division .dv-icon{
  border:1px solid rgba(195,160,255,.20);
  border-radius:16px;
  background:rgba(168,92,255,.08);
}
#svv-division h3{font-weight:950;letter-spacing:-.02em}
#svv-division .dv-card{
  min-height:96px;
  padding:24px 15px 17px;
  border-radius:25px;
  box-shadow:0 12px 27px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.055);
}
#svv-division .dv-card::after{
  content:"";
  position:absolute;
  width:98px;
  height:98px;
  right:-38px;
  bottom:-58px;
  border-radius:50%;
  background:rgba(255,255,255,.05);
}
#svv-division .dv-step-tag{
  padding:6px 11px;
  border-radius:0 0 14px 0;
  font-size:.68rem;
  box-shadow:0 5px 14px rgba(0,0,0,.14);
}
#svv-division .dv-card-icon{
  width:54px;
  height:58px;
  border-radius:19px;
  border-color:rgba(255,255,255,.23);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
#svv-division .dv-card strong{font-size:1.18rem;font-weight:950}
#svv-division .dv-card small{color:#d0d8e8}
#svv-division [data-dv-kind="listen"]{background:linear-gradient(135deg,rgba(101,199,255,.20),rgba(30,57,102,.30));border-color:rgba(101,199,255,.50)}
#svv-division [data-dv-kind="train"]{background:linear-gradient(135deg,rgba(94,224,183,.20),rgba(28,93,80,.30));border-color:rgba(94,224,183,.50)}
#svv-division [data-dv-kind="song"]{background:linear-gradient(135deg,rgba(255,127,200,.20),rgba(91,39,143,.32));border-color:rgba(255,127,200,.50)}
#svv-division .dv-eyebrow{
  display:inline-flex;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,127,200,.09);
  color:#ffc8e8;
}
#svv-division .dv-roles{gap:11px}
#svv-division .dv-roles button{
  min-height:62px;
  border-radius:18px;
  background:#142139;
  font-weight:850;
}
#svv-division .dv-roles button[aria-pressed="true"]{
  border-color:#d9a5ff;
  background:linear-gradient(135deg,#7839c7,#53309f);
  box-shadow:0 8px 18px rgba(72,31,133,.25);
}
#svv-division .dv-main{
  min-height:60px;
  border-radius:19px;
  background:linear-gradient(115deg,#ad55f2,#7137dc);
  border-color:#ddaaff;
  box-shadow:0 10px 23px rgba(91,38,166,.28);
  font-weight:900;
}
#svv-division .dv-switch{
  border-radius:19px;
  background:linear-gradient(135deg,rgba(168,92,255,.20),rgba(101,199,255,.10));
}
#svv-division .dv-status{
  border-radius:21px;
  padding:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
#svv-division .dv-chart{
  border-radius:23px;
  border-color:rgba(101,199,255,.26);
  background:
    linear-gradient(rgba(101,199,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(101,199,255,.026) 1px,transparent 1px),
    #080f1d;
  background-size:24px 24px;
  box-shadow:inset 0 0 26px rgba(0,0,0,.25);
}
#svv-division .dv-legend{
  padding:9px 11px;
  border-radius:15px;
  background:rgba(255,255,255,.025);
}
#svv-division .dv-time input{accent-color:var(--svv-purple)}
#svv-division .dv-foot{
  border-top-color:rgba(210,174,255,.16);
  background:linear-gradient(180deg,rgba(8,13,25,.82),rgba(8,13,25,.98));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 -18px 38px rgba(0,0,0,.23);
}
#svv-division .dv-foot-row button{border-radius:17px}
#svv-division details{
  border:1px solid rgba(151,176,218,.16);
  border-radius:18px;
  padding:4px 13px 10px;
  background:rgba(15,24,42,.62);
}
#svv-division .dv-score{
  border-radius:25px;
  border-color:rgba(213,174,255,.32);
  background:linear-gradient(145deg,rgba(168,92,255,.12),rgba(94,224,183,.06));
}
#svv-division .dv-score strong{
  display:grid;
  place-items:center;
  width:124px;
  height:124px;
  margin:12px auto;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(168,92,255,.26),rgba(94,224,183,.13));
  box-shadow:0 0 0 7px rgba(168,92,255,.07);
}

/* ============================================================
   Responsividade
   ============================================================ */
@media(max-width:600px){
  body::before{opacity:.28}
  #svv-app{padding:0}
  #svv-app .app-shell{
    min-height:100dvh;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  #svv-app .topbar{min-height:78px;padding:14px 17px 11px}
  #svv-app .brand-mark{width:40px;height:40px;flex-basis:40px;border-radius:15px}
  #svv-app .brand-mark .ux-icon{width:25px;height:25px}
  #svv-app .brand-copy h1{font-size:1rem}
  #svv-app .runtime{font-size:.84rem}
  #svv-app .app-body{padding-inline:17px}
  #svv-app .ux-nav{margin:5px -4px 14px}
  #svv-app .ux-nav h2{font-size:1.28rem}
  #svv-app .ux-hero{min-height:245px;padding:23px 12px 18px;border-radius:25px}
  #svv-app .ux-hero-copy{max-width:76%}
  #svv-app .ux-eyebrow{display:none}
  #svv-app .ux-hero h2{font-size:2.22rem;line-height:1.05;max-width:285px}
  #svv-app .ux-hero-copy>p:last-child{font-size:1.03rem;line-height:1.45}
  #svv-app .ux-hero-photo{width:47%;object-position:47% 26%}
  #svv-app .ux-choice{grid-template-columns:52px minmax(0,1fr) 28px;gap:12px;min-height:112px;padding:16px 13px;border-radius:23px}
  #svv-app .ux-choice::after{top:9px;right:12px;font-size:.58rem}
  #svv-app .ux-choice-icon{width:52px;height:58px;border-radius:18px}
  #svv-app .ux-choice-icon svg{width:31px;height:31px}
  #svv-app .ux-choice strong{font-size:1.15rem;padding-top:4px}
  #svv-app .ux-choice small{font-size:.96rem;line-height:1.38}
  #svv-app .ux-chevron{width:28px;height:28px}
  #svv-app .ux-steps{margin-bottom:18px;padding:10px 4px}
  #svv-app .ux-steps li{font-size:.84rem}
  #svv-app .library-category{padding:13px;border-radius:21px}
  #svv-app .library-card{grid-template-columns:49px minmax(0,1fr) 24px;padding:12px 11px;border-radius:18px}
  #svv-app .library-number,#svv-app .library-number.icon{width:49px;height:54px;border-radius:16px}
  #svv-app .library-copy strong{font-size:1.08rem}
  #svv-app .library-copy small{font-size:.91rem}
  #svv-app .ux-device-actions{grid-template-columns:1fr}
  #svv-app .ux-device-button{min-height:53px}
  #svv-app .ux-tip{min-height:88px;padding:13px}
  #svv-app .ux-tip>.ux-icon{width:42px;height:42px}
  #svv-app .v17-record-options{padding:14px}
  #svv-app .ux-primary{min-height:58px;border-radius:18px}
  #svv-app .game-panel{padding:9px;border-radius:20px}
  #svv-app .game-stage{border-radius:17px}
  #svv-app .ux-instruction-wrap{padding:12px 13px;border-radius:18px}
  .completion-card,.ux-dialog,.svv-rank-dialog{border-radius:24px!important}
  .completion-score{min-width:116px;min-height:116px}
  .svv-auth-gate{padding:12px!important}
  .svv-auth-card{border-radius:26px!important}
  .svv-auth-head{padding:25px 19px 18px!important}
  .svv-auth-body{padding:9px 19px 24px!important}
  .svv-auth-logo{width:68px!important;height:68px!important;border-radius:22px!important}
  #svv-division{padding-inline:16px}
  #svv-division .dv-brand{padding:9px 10px}
  #svv-division .dv-brand img{width:42px;height:42px}
  #svv-division .dv-card{padding:23px 12px 15px;border-radius:22px}
  #svv-division .dv-card-icon{width:49px;height:53px;border-radius:17px}
}

@media(max-width:370px){
  #svv-app .app-body{padding-inline:13px}
  #svv-app .topbar{padding-inline:13px}
  #svv-app .brand-mark{width:37px;height:37px;flex-basis:37px}
  #svv-app .runtime{font-size:.78rem}
  #svv-app .ux-hero{min-height:218px;padding-inline:9px}
  #svv-app .ux-hero h2{font-size:1.94rem;max-width:245px}
  #svv-app .ux-hero-copy>p:last-child{font-size:.94rem}
  #svv-app .ux-choice{grid-template-columns:46px minmax(0,1fr) 25px;gap:10px;padding:14px 10px;min-height:105px}
  #svv-app .ux-choice-icon{width:46px;height:52px}
  #svv-app .ux-choice strong{font-size:1.07rem}
  #svv-app .ux-choice small{font-size:.91rem}
  #svv-app .ux-choice::after{display:none}
  #svv-app .ux-steps li span:last-child{font-size:.78rem}
  #svv-app .library-category{padding:10px}
  #svv-app .library-card{grid-template-columns:44px minmax(0,1fr) 20px;gap:9px;padding:11px 9px}
  #svv-app .library-number,#svv-app .library-number.icon{width:44px;height:50px}
  #svv-app .ux-tone-controls{grid-template-columns:1fr}
  #svv-app .ux-tone-controls button{min-height:58px}
}

@media(min-width:900px){
  #svv-app .ux-home-options{max-width:680px}
  #svv-app .ux-hero{min-height:320px}
  #svv-app .ux-hero-copy{padding:18px 12px}
  #svv-app .ux-choice{min-height:126px}
}

@media(prefers-reduced-motion:reduce){
  #svv-app .ux-choice,
  #svv-app .library-card,
  #svv-app .ux-icon-button{transition:none!important;transform:none!important}
}

/* ============================================================
   Refluxo com texto ampliado: a galeria nunca força largura extra
   ============================================================ */
#svv-app .library-wrap,
#svv-app .library-grid,
#svv-app .library-category,
#svv-app .library-category-head,
#svv-app .library-category-cards,
#svv-app .library-card,
#svv-app .library-copy{
  min-width:0;
  max-width:100%;
}
#svv-app .library-wrap,
#svv-app .library-grid,
#svv-app .library-category-cards,
#svv-app .library-card{width:100%}
#svv-app .library-category{overflow:hidden}
#svv-app .library-category-head{flex-wrap:wrap}
#svv-app .library-category-copy{
  flex:1 1 180px;
  min-width:0;
}
#svv-app .library-category-copy strong,
#svv-app .library-category-copy small,
#svv-app .library-copy strong,
#svv-app .library-copy small{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}
#svv-app .library-category-count{
  flex:0 1 auto;
  max-width:100%;
  white-space:normal;
  text-align:center;
}
#svv-app .library-card{overflow:hidden}
#svv-app .library-number,
#svv-app .library-number.icon,
#svv-app .library-category-icon{
  min-width:0;
  font-size:24px;
  line-height:1;
}
#svv-app .library-card[data-mode="music"] .library-number::after{font-size:28px}
#svv-app .library-action{min-width:0;max-width:100%}