/* ====== Studio base ====== */
:root{
  --vs-bg: #0c1218;
  --vs-panel: #0f151c;
  --vs-text: #e6eefb;
  --vs-muted:#a5b2c2;
  --vs-accent:#78a7ff;
  --vs-glow: rgba(120,167,255,.35);
  --vs-border: rgba(120,167,255,.35);
}

#vtsu-studio, #vtsu-studio *{ box-sizing: border-box; }
#vtsu-studio{
  color:var(--vs-text);
  background:transparent;
}

/* ====== Top bar（はみ出し防止 & タイトル非表示） ====== */
.vs-topbar{
  display:flex; align-items:center; gap:.75rem;
  padding:.5rem 0;
  border:1px solid var(--vs-border);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(120,167,255,.06), rgba(23,31,41,.2));
  box-shadow:0 0 0 1px rgba(120,167,255,.15) inset, 0 10px 30px rgba(0,0,0,.25);
  overflow:hidden;
}
.vs-topbar .brand{ display:none; } /* サイトタイトル重複回避 */
.vs-topbar .stats{ margin-left:auto; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.vs-topbar .btn{
  border:1px solid var(--vs-border); color:var(--vs-text);
  padding:.45rem .9rem; border-radius:12px; background:#121a23;
}
.vs-topbar .btn.ghost{ background:transparent; }

/* ====== 大枠カード（右端はみ出し対策） ====== */
.vs-stage, .vs-controls{
  border:1px solid var(--vs-border);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(120,167,255,.06), rgba(23,31,41,.2));
  box-shadow:0 0 0 1px rgba(120,167,255,.15) inset, 0 10px 30px rgba(0,0,0,.25);
  overflow:hidden;
}

/* ====== プレイヤー＆ガイダンス ====== */
#vs-player-area{ padding:1.2rem 1.2rem 1.4rem; }
#vs-guidance{
  margin-bottom:.8rem; line-height:1.6; color:var(--vs-muted);
  display:flex; align-items:center; gap:.6rem;
}
#vs-guidance .note{ display:none; } /* ♪ は不要 */
#vs-guidance strong{ color:var(--vs-text); }

/* ビジュアライザー（大きめアクション） */
#vs-visual{
  width:100%; height:140px; display:block;
  background:radial-gradient(1200px 140px at 10% -30%, rgba(120,167,255,.06), transparent 60%);
  border-radius:12px; margin:.25rem 0 1rem;
  box-shadow:0 0 0 1px rgba(120,167,255,.15) inset;
}

/* audio コントロールの余白・視認性を確保 */
.vs-audio{ width:100%; }

/* ====== テキスト入力 ====== */
.field{ padding:1rem 1.2rem 1.2rem; }
.field > label{ display:block; margin-bottom:.5rem; font-weight:600; }
#vs-text{
  width:100%; min-height:220px; resize:vertical;
  color:var(--vs-text); background:#0f151c;
  border:1px solid var(--vs-border); border-radius:14px;
  padding:1rem 1.1rem;
  box-shadow:0 0 0 1px rgba(120,167,255,.15) inset;
}
.counter{ text-align:right; color:var(--vs-muted); margin-top:.4rem; }

/* ====== セレクタ（VOICE / スタイル / VIBE） ====== */
.group{ padding:1rem 1.2rem; }
.group-title{ font-weight:700; margin:.25rem 0 .6rem; }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.card{
  width:100%; padding:.9rem 1rem; border-radius:14px;
  border:1px solid var(--vs-border);
  background:#111823; color:var(--text, var(--vs-text));
  text-align:center;
  box-shadow:0 0 0 1px rgba(120,167,255,.12) inset;
}
.card.active{
  outline:0; border-color:var(--vs-accent);
  box-shadow:0 0 0 1px var(--vs-accent) inset, 0 0 22px var(--vs-glow);
}

/* ====== スライダ（視認性UP） ====== */
.sliders{ padding: .2rem 1.2rem 1.2rem; display:grid; grid-template-columns: 1fr 1fr auto; gap:1rem; align-items:center; }
.slider label{ display:block; margin-bottom:.35rem; color:var(--vs-muted); }
input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px;
  background:linear-gradient(90deg, var(--vs-accent), rgba(120,167,255,.18));
  outline:none;
  box-shadow:0 0 0 1px rgba(120,167,255,.15) inset;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.45), 0 0 0 4px rgba(120,167,255,.35);
  border:0;
}
input[type="range"]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 2px 8px rgba(0,0,0,.45), 0 0 0 4px rgba(120,167,255,.35);
}

/* ====== フォーマット選択（MP3/WAV） ====== */
.format{
  display:flex; gap:1rem; align-items:center; justify-content:flex-end; color:var(--vs-text);
}
.format label{ display:flex; align-items:center; gap:.45rem; cursor:pointer; }
.format input[type=radio]{ transform:scale(1.15); }

/* ====== 下部の生成ボタン & ガイダンス ====== */
.footer{
  display:flex; align-items:center; gap:1rem; padding:0 1.2rem 1.2rem;
}
.btn.primary{
  background:#3b6ff6; color:#fff; border:none; border-radius:12px;
  padding:.7rem 1.1rem; box-shadow:0 12px 24px rgba(59,111,246,.25), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.points{ margin-left:auto; color:var(--vs-muted); }

/* ====== ダウンロードボタン（常時視認しやすく） ====== */
#vs-dl.btn{
  border:1px solid var(--vs-border); background:#121a23; color:var(--vs-text);
}
#vs-dl.btn:not([disabled]):hover{
  border-color:var(--vs-accent); box-shadow:0 0 0 1px var(--vs-accent) inset;
}

/* ====== 右端はみ出しの最終ガード ====== */
.vs-stage, .vs-controls, .field, .group, .sliders, .footer{ max-width:100%; }