:root {
  --bg-top: #0b0e16;
  --bg-bot: #05060a;
  --card-bg: #12151f;
  --card-bg-soft: #171b28;
  --card-bg-raised: #1b202f;
  --border: #232838;
  --border-soft: #1a1e2b;
  --text: #eceef4;
  --text-dim: #8b90a3;
  --text-dimmer: #5c6178;
  --accent: #4f9dff;
  --accent-2: #7c6cff;
  --accent-glow: rgba(79, 157, 255, 0.32);
  --accent-glow-soft: rgba(79, 157, 255, 0.14);
  --purple: #a78bfa;
  --purple-glow: rgba(167, 139, 250, 0.22);
  --success: #34d399;
  --success-glow: rgba(52, 211, 153, 0.18);
  --warn: #f5a623;
  --error: #f5576c;
  --radius-lg: 18px;
  --radius: 14px;
  --radius-sm: 10px;
  --gap: 24px;
}

* { box-sizing: border-box; }

body {
  /* Page-wide decorative backdrop (spec: 背景画像実装 item H) -- kept very
     subtle (8-15% strength) via the dark gradient stacked on top; the
     singer silhouette sits toward the right so it doesn't fight page
     content, which reads left-aligned throughout. */
  background:
    linear-gradient(180deg, rgba(5,6,10,0.72) 0%, rgba(5,6,10,0.82) 45%, rgba(5,6,10,0.95) 100%),
    url('/assets/backgrounds/singer-hero-bg.png') right center / cover no-repeat fixed,
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  margin: 0;
  padding: 0 0 5.5rem 0;
  min-height: 100vh;
}
a { color: inherit; }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }

/* ---------- Header ---------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.95rem 2rem;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(8, 10, 16, 0.82);
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 0.65rem; }
.brand-icon {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 0 16px var(--accent-glow);
}
.brand-icon .icon { width: 17px; height: 17px; }
.brand h1 { font-size: 1.02rem; margin: 0; font-weight: 700; letter-spacing: 0.01em; }
.beta-badge {
  font-size: 0.65rem; color: var(--accent); border: 1px solid rgba(79,157,255,0.4);
  border-radius: 999px; padding: 0.1rem 0.55rem; margin-left: 0.5rem; font-weight: 600;
}
/* "現在利用中のプラン確認" -- deliberately quiet/small so it reads as a
   status indicator, not a pricing ad, per spec ("料金広告のように見えすぎ
   ないように"). */
.plan-badge {
  display: inline-flex; align-items: baseline; gap: 0.45rem; margin-left: 0.7rem;
  padding: 0.12rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card-bg-soft);
}
.plan-badge-name { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; color: var(--text-dim); }
.plan-badge-price { font-size: 0.62rem; color: var(--text-dimmer); }
.header-nav { display: flex; align-items: center; gap: 1.5rem; }
.header-nav button {
  background: none; border: none; color: var(--text-dim); font-size: 0.8rem;
  cursor: pointer; display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.1rem;
}
.header-nav button .icon { width: 15px; height: 15px; }
.header-nav button:hover { color: var(--text); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--card-bg-soft);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.avatar .icon { width: 15px; height: 15px; }

/* ---------- Layout ---------- */
main {
  max-width: 1680px;
  margin: 1.75rem auto;
  padding: 0 32px;
  display: flex; flex-direction: column; gap: var(--gap);
}
@media (max-width: 900px) { main { padding: 0 16px; } header { padding: 0.9rem 1.1rem; } }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
}
.card.hidden { display: none; }

/* ---------- Section background imagery (spec: 背景画像実装) ----------
   Shared pattern for every card below: a ::before layer carries the image
   (never the card itself, so text/inputs/canvas are never affected), sits
   behind all real content via z-index, and uses `border-radius: inherit`
   rather than `overflow: hidden` on the card so it never clips anything
   that intentionally bleeds past the card edge (e.g. .mix-button's glow).
   Each card keeps its own dark gradient baked directly into the image
   layer (not a separate `opacity` on top of it -- opacity on the whole
   layer compounds with the gradient's own alpha and crushes the image to
   near-invisibility, which is what happened the first time around) so the
   picture can never win a contrast fight with text on top of it. The
   gradient's alpha stops are the single per-section "background strength"
   knob called out in the spec. */
.upload-card--vocal,
.upload-card--inst,
.upload-card--vocal2,
.upload-card--harmony,
.insights-card,
.mix-card,
.compare-card,
.pitch-timing-card,
.easy-card {
  position: relative;
}
.upload-card--vocal::before,
.upload-card--inst::before,
.upload-card--vocal2::before,
.upload-card--harmony::before,
.insights-card::before,
.mix-card::before,
.compare-card::before,
.pitch-timing-card::before,
.easy-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
  pointer-events: none;
}
.upload-card--vocal > *,
.upload-card--inst > *,
.upload-card--vocal2 > *,
.upload-card--harmony > *,
.insights-card > *,
.mix-card > *,
.compare-card > *,
.pitch-timing-card > *,
.easy-card > * {
  position: relative;
  z-index: 1;
}

/* プロジェクトステータス: kept transparent (no card-bg fill, no image of
   its own) so the page's own back-most background shows through it
   directly, per explicit user request -- unlike every other card here,
   this one is meant to feel like glass over the page, not its own panel. */
.status-card { background: transparent; }

.upload-card--vocal::before {
  background-image:
    linear-gradient(100deg, rgba(5,8,18,0.35) 0%, rgba(5,8,18,0.62) 55%, rgba(5,8,18,0.4) 100%),
    url('/assets/backgrounds/vocal-bg.png');
  background-position: left center;
}
.upload-card--inst::before {
  background-image:
    linear-gradient(100deg, rgba(5,8,18,0.4) 0%, rgba(5,8,18,0.6) 55%, rgba(5,8,18,0.35) 100%),
    url('/assets/backgrounds/instrumental-bg.png');
  background-position: right bottom;
}
.upload-card--vocal2::before {
  background-image:
    linear-gradient(rgba(5,10,22,0.4), rgba(5,10,22,0.6)),
    url('/assets/backgrounds/vocal2-bg.png');
  background-position: center center;
}
.upload-card--harmony::before {
  background-image:
    linear-gradient(rgba(5,10,22,0.4), rgba(5,10,22,0.6)),
    url('/assets/backgrounds/harmony-bg.png');
  background-position: center center;
}
.insights-card::before {
  background-image:
    linear-gradient(160deg, rgba(5,8,18,0.52) 0%, rgba(5,8,18,0.38) 100%),
    url('/assets/backgrounds/ai-analysis-bg.png');
  background-position: right center;
}
.mix-card::before {
  background-image:
    linear-gradient(180deg, rgba(5,8,18,0.25) 0%, rgba(5,8,18,0.55) 100%),
    url('/assets/backgrounds/ai-mix-center-bg.png');
  background-position: center center;
}
.compare-card::before {
  background-image:
    linear-gradient(160deg, rgba(5,8,18,0.6) 0%, rgba(5,8,18,0.48) 100%),
    url('/assets/backgrounds/before-after-bg.png');
  background-position: center 30%;
}
.pitch-timing-card::before {
  background-image:
    linear-gradient(160deg, rgba(5,8,18,0.55) 0%, rgba(5,8,18,0.42) 100%),
    url('/assets/backgrounds/pitch-editor-bg.png');
  background-position: center center;
}
.easy-card::before {
  background-image:
    linear-gradient(160deg, rgba(5,8,18,0.5) 0%, rgba(5,8,18,0.38) 100%),
    url('/assets/backgrounds/easy-settings-bg.png');
  background-position: center center;
}

@media (max-width: 900px) {
  /* Narrower single-column layout -- keep positions centered so a card's
     focal point (mic, keyboard, etc.) doesn't get cropped out to one side. */
  .upload-card--vocal::before,
  .upload-card--inst::before,
  .insights-card::before,
  .compare-card::before {
    background-position: center center;
  }
}
.eyebrow { color: var(--text-dimmer); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.3rem 0; font-weight: 700; }
.section-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 0.2rem 0; display: flex; align-items: center; gap: 0.5rem; }
.section-title .icon { width: 18px; height: 18px; color: var(--accent); }
.section-sub { color: var(--text-dim); font-size: 0.82rem; margin: 0 0 1rem 0; line-height: 1.5; }

/* ---------- Hero row: uploads / mix / status ---------- */
.hero-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}
@media (max-width: 1150px) { .hero-row { grid-template-columns: 1fr; } }
.hero-col { display: flex; flex-direction: column; gap: var(--gap); }

.upload-card { padding: 1.15rem 1.3rem; }
.upload-card .card-head { display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; font-weight: 700; margin-bottom: 0.75rem; }
.upload-card .card-head .icon { width: 17px; height: 17px; color: var(--accent); }
.dropzone {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 1.3rem 0.8rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  position: relative;
  /* Sits as its own semi-transparent panel over the card's background
     image (spec: 背景画像実装 item「Drag&Drop領域」) so the dashed border
     and text stay crisp regardless of what's behind the card, without
     going back to a flat opaque gray box. */
  background: rgba(9, 12, 22, 0.5);
  backdrop-filter: blur(3px);
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-glow-soft);
  box-shadow: 0 0 0 1px rgba(79,157,255,0.25), 0 0 18px var(--accent-glow-soft);
}
.dropzone .dz-icon { color: var(--text-dimmer); margin-bottom: 0.5rem; }
.dropzone .dz-icon .icon { width: 26px; height: 26px; }
.dropzone .dz-link { color: var(--accent); text-decoration: underline; }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-row {
  display: none; align-items: center; justify-content: space-between; margin-top: 0.65rem;
  background: var(--card-bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem; font-size: 0.8rem;
}
.file-row.show { display: flex; }
.file-row .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.file-row .fdur { color: var(--text-dim); margin-left: auto; margin-right: 0.6rem; }
.file-row .play-btn { width: 26px; height: 26px; flex-shrink: 0; margin-left: 0.4rem; }
.file-row .play-btn:first-of-type { margin-left: 0; }
#harmony-remove-btn:hover { color: var(--error); border-color: var(--error); }
#vocal2-remove-btn:hover { color: var(--error); border-color: var(--error); }

.mix-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; text-align: center; padding: 2rem 1.5rem;
  background: radial-gradient(circle at 50% 20%, var(--accent-glow-soft), transparent 60%), var(--card-bg);
}
.mix-button {
  width: 168px; height: 168px; border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 50% 35%, rgba(79,157,255,0.28), rgba(20,23,33,0.95) 72%);
  color: var(--text);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 0 0 1.5px rgba(79,157,255,0.55), 0 0 40px var(--accent-glow);
  transition: box-shadow 0.18s;
  animation: pulse-ring 3.6s ease-in-out infinite;
}
.mix-button .mb-icon { color: var(--accent); margin-bottom: 0.25rem; }
.mix-button .mb-icon .icon { width: 26px; height: 26px; }
.mix-button:hover:not(:disabled) { box-shadow: 0 0 0 1.5px var(--accent), 0 0 70px var(--accent-glow); }
.mix-button:active:not(:disabled) { transform: scale(0.99); }
.mix-button:disabled { opacity: 0.5; cursor: not-allowed; animation: none; }
.mix-button .mb-title { font-size: 1.2rem; font-weight: 800; margin: 0.05rem 0; letter-spacing: 0.01em; }
.mix-button .mb-sub { font-size: 0.68rem; color: var(--text-dim); }
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(79,157,255,0.45), 0 0 22px var(--accent-glow); }
  50% { box-shadow: 0 0 0 1.5px rgba(79,157,255,0.85), 0 0 68px var(--accent-glow), 0 0 110px var(--accent-glow-soft); }
}
.mix-hint { font-size: 0.8rem; color: var(--text-dim); max-width: 260px; line-height: 1.5; }

.status-card, .insights-card { padding: 1.15rem 1.3rem; }
.status-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--success); font-weight: 700; font-size: 0.84rem;
  background: var(--success-glow); border-radius: 999px; padding: 0.25rem 0.7rem; margin-bottom: 0.7rem;
}
.status-pill .icon { width: 15px; height: 15px; }
.status-pill.processing { color: var(--accent); background: var(--accent-glow-soft); }
.status-pill.failed { color: var(--error); background: rgba(245, 87, 108, 0.15); }
.status-meta { font-size: 0.78rem; color: var(--text-dim); display: flex; flex-direction: column; gap: 0.35rem; }
.status-meta .fname { color: var(--text); word-break: break-all; }
.status-grid { display: flex; gap: 1.4rem; margin-top: 0.7rem; }
.status-grid div { font-size: 0.72rem; color: var(--text-dimmer); }
.status-grid div b { display: block; font-size: 0.98rem; color: var(--text); font-weight: 700; margin-top: 0.1rem; }

/* MIX処理中の進捗メーター -- lives right under the status pill so the
   "処理中" state has a real progress readout instead of just a spinner. */
.mix-progress { margin-bottom: 0.8rem; }
.mix-progress.hidden { display: none; }
.mix-progress-bar {
  height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden;
}
.mix-progress-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.3s ease;
}
.mix-progress.done .mix-progress-fill { background: var(--success); }
.mix-progress-row {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.4rem;
  font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
#mix-progress-percent { font-weight: 800; color: var(--accent); }
.mix-progress.done #mix-progress-percent { color: var(--success); }
#mix-progress-eta { color: var(--text-dim); }
.mix-progress-stage { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.35rem; }

.mix-error { margin-bottom: 0.8rem; }
.mix-error.hidden { display: none; }
.mix-error-text {
  font-size: 0.8rem; color: var(--error); background: rgba(245,87,108,0.12);
  border: 1px solid rgba(245,87,108,0.35); border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem; margin: 0 0 0.6rem 0; line-height: 1.5;
}
.mix-retry-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; color: var(--text-dim); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.4rem 0.85rem; font-size: 0.8rem; cursor: pointer;
}
.mix-retry-btn .icon { width: 14px; height: 14px; }
.mix-retry-btn:hover { color: var(--text); border-color: var(--accent); }

.insight-item { display: flex; gap: 0.65rem; margin-bottom: 0.85rem; }
.insight-item:last-child { margin-bottom: 0; }
.insight-icon {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-glow-soft); color: var(--accent);
}
.insight-icon .icon { width: 15px; height: 15px; }
.insight-icon.purple { background: var(--purple-glow); color: var(--purple); }
.insight-text .it-title { font-size: 0.82rem; font-weight: 700; }
.insight-text .it-sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.1rem; }

.spinner {
  width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.25); border-top-color: currentColor;
  border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Before/After + segment preview ---------- */
.compare-card .ba-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1.2rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
@media (max-width: 900px) { .compare-card .ba-row { grid-template-columns: minmax(0, 1fr); } .ba-arrow { display: none; } }
.ba-arrow { color: var(--text-dimmer); }
.ba-arrow .icon { width: 22px; height: 22px; }
.ba-col { min-width: 0; }
.ba-col .ba-label { font-size: 0.78rem; font-weight: 700; color: var(--text-dim); margin-bottom: 0.5rem; display:flex; align-items:center; gap:0.4rem;}
.ba-col.after .ba-label { color: var(--accent); }
.player-controls { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; min-width: 0; }
.play-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card-bg-soft); color: var(--text);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.play-btn .icon { width: 14px; height: 14px; }
.play-btn:hover { border-color: var(--accent); color: var(--accent); }
/* 先頭に戻る/マークに戻る (spec: 再生ボタンのみで不足していた操作を追加)
   -- visually secondary to the main play button, so sized down a touch
   rather than repeating a full 36px circle three times in a row. */
.play-btn-sm { width: 30px; height: 30px; }
.play-btn-sm .icon { width: 13px; height: 13px; }
.player-time { font-size: 0.72rem; color: var(--text-dim); flex-shrink: 0; font-variant-numeric: tabular-nums; margin-left: 0.15rem; }
.compare-note { color: var(--text-dim); font-size: 0.78rem; margin: 0.9rem 0 0 0; text-align: center; border-top: 1px solid var(--border-soft); padding-top: 0.85rem; }

/* ---------- Waveform component (Before/After + segment preview share this
   structure). Three nested layers, each with an explicit job, so canvas
   resizing (the actual root cause of the old "waveform grows during
   playback" bug -- resizing canvas.width every timeupdate tick fed back
   into flex/grid intrinsic sizing with no min-width:0 guard) can never
   happen mid-playback:
     .wf-outer  -- fixed visual box, clips everything, never resizes.
     .wf-scroll -- the only element that scrolls (horizontally), for long
                   songs whose .wf-inner is wider than the visible box.
     .wf-inner  -- width = duration * pixels-per-second, set once when
                   peaks/zoom are (re)computed, NOT per animation frame.
   Progress/playhead are cheap absolutely-positioned overlays whose CSS
   `left`/`width` move every tick -- never touches canvas.width/height. */
.wf-outer {
  position: relative; min-width: 0; max-width: 100%;
  border-radius: var(--radius-sm); overflow: hidden; background: #0d0f16;
}
.wf-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.wf-scroll::-webkit-scrollbar { height: 6px; }
.wf-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.wf-inner { position: relative; height: 46px; min-width: 100%; }
.wf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.wf-dim { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: rgba(5,6,10,0.6); pointer-events: none; }
.wf-playhead {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); pointer-events: none;
  z-index: 2;
}
.wf-playhead.hidden { display: none; }
/* "マークに戻る" position (spec: マーキング機能) -- wherever the user last
   clicked the waveform to seek. A different color/shape from the playhead
   (dashed purple + small flag) so the two are never confused at a glance,
   and sits below the playhead in z-index since the playhead is the more
   important of the two to always read clearly. */
.wf-mark {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  border-left: 2px dashed var(--purple); pointer-events: none; z-index: 1;
}
.wf-mark::before {
  content: ""; position: absolute; top: -1px; left: -1px; width: 8px; height: 8px;
  background: var(--purple); border-radius: 2px 2px 2px 0;
  box-shadow: 0 0 6px var(--purple-glow);
}
.wf-mark.hidden { display: none; }

/* Custom scrub bar (spec: 波形のスライダー操作) standing in for the tiny,
   easy-to-miss native scrollbar on .wf-scroll -- same large-thumb visual
   language as .pt-gain-slider elsewhere in the app, so it reads as an
   intentional, grabbable control rather than a native browser widget.
   Kept as a *separate* control from .wf-scroll's own native scrollbar
   (rather than replacing it) so trackpad/wheel scrolling still works too;
   the two stay in sync via the scroll listener in createWaveform(). */
.wf-scrub-slider {
  width: 100%; margin-top: 0.5rem; -webkit-appearance: none; appearance: none;
  height: 5px; border-radius: 999px; background: var(--border-soft); outline: none;
  cursor: pointer;
}
.wf-scrub-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); cursor: grab; border: 2px solid #0f1015;
  margin-top: 0;
}
.wf-scrub-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow); cursor: grab; border: 2px solid #0f1015;
}
.wf-scrub-slider::-moz-range-track { height: 5px; border-radius: 999px; background: var(--border-soft); }
.wf-selection {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: rgba(79, 157, 255, 0.22);
  border-left: 2px solid var(--accent); border-right: 2px solid var(--accent);
  pointer-events: none;
}
.wf-selection-time {
  position: absolute; top: 3px; font-size: 0.62rem; font-weight: 700; color: var(--accent);
  background: rgba(5,6,10,0.85); padding: 0.08rem 0.32rem; border-radius: 4px; white-space: nowrap;
}
.wf-selection-time-start { left: 3px; }
.wf-selection-time-end { right: 3px; }
.wf-gain-marker {
  position: absolute; bottom: 3px; height: 13px; font-size: 0.56rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border-radius: 3px;
  pointer-events: none; color: #0b0e16; white-space: nowrap; overflow: hidden;
}
.wf-gain-marker.boost { background: rgba(52,211,153,0.8); }
.wf-gain-marker.cut { background: rgba(245,166,35,0.8); }

.segment-panel { margin-top: 1.3rem; border-top: 1px solid var(--border-soft); padding-top: 1.1rem; }
.segment-panel .section-title { font-size: 0.9rem; }
.segment-controls { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.segment-controls label { font-size: 0.75rem; color: var(--text-dim); display: flex; align-items: center; gap: 0.4rem; }
.segment-controls input[type="text"] {
  width: 84px; background: #0e1018; border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 0.3rem 0.5rem; font-size: 0.78rem;
}
.segment-btn {
  background: var(--accent-glow-soft); border: 1px solid var(--accent); color: var(--accent);
  border-radius: 8px; padding: 0.4rem 0.9rem; font-size: 0.78rem; cursor: pointer;
  display: flex; align-items: center; gap: 0.4rem; font-weight: 600;
}
.segment-btn .icon { width: 13px; height: 13px; }
.segment-btn:hover { background: var(--accent-glow); }
#preview-status { display: block; margin-top: 0.5rem; font-size: 0.78rem; }
#preview-status.busy { color: var(--warn); }
#preview-status.ok { color: var(--success); }
#preview-status.error { color: var(--error); }
#audio-live-preview { width: 100%; margin-top: 0.6rem; height: 36px; }
.note { color: var(--text-dim); font-size: 0.78rem; margin: 0.4rem 0 0 0; }

/* ---------- Pitch/Timing correction ---------- */
.pitch-timing-card { border: 1px solid rgba(124,108,255,0.28); }
.pt-track-toggle { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; }
.pt-track-toggle.hidden { display: none; }
.pt-track-btn {
  background: var(--card-bg-soft); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.8rem; cursor: pointer; font-weight: 600;
}
.pt-track-btn:hover { color: var(--text); }
.pt-track-btn.active { background: var(--purple-glow); border-color: var(--purple); color: var(--purple); }

/* "この区間のボーカル音量" -- range-level control (applies to the whole
   drag-selected span, no note selection needed), shown at the top of the
   panel since it's usable immediately after a drag-select. */
.pt-range-gain {
  background: var(--card-bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.pt-gain-row { display: flex; align-items: center; gap: 0.7rem; }
.pt-gain-tag { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
.pt-gain-slider {
  flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
  background: var(--border); outline: none; cursor: pointer; margin: 0;
}
.pt-gain-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); cursor: grab; border: 2px solid #0f1015;
}
.pt-gain-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow); cursor: grab; border: 2px solid #0f1015;
}
.pt-gain-footer { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.7rem; flex-wrap: wrap; }
.pt-divider { border-top: 1px solid var(--border-soft); margin: 1.2rem 0; }

.pt-roll-wrap {
  position: relative; height: 200px; border-radius: var(--radius-sm);
  background: #0d0f16; border: 1px solid var(--border-soft); overflow: hidden;
}
.pt-roll-canvas { width: 100%; height: 100%; display: block; cursor: pointer; }
.pt-roll-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 0.85rem; background: rgba(13,15,22,0.7);
}
.pt-roll-loading.hidden { display: none; }

.pt-note-info { margin-top: 1.1rem; }
.pt-note-info.hidden { display: none; }
.pt-note-name {
  font-size: 1.1rem; font-weight: 800; color: var(--accent); margin-bottom: 0.9rem;
}
.pt-control-group { margin-bottom: 1rem; }
.pt-control-label { font-size: 0.72rem; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; font-weight: 700; }
.pt-control-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.pt-btn {
  background: var(--card-bg-soft); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 0.5rem 0.9rem; font-size: 0.8rem; cursor: pointer;
  font-weight: 600; white-space: nowrap;
}
.pt-btn:hover { border-color: var(--accent); color: var(--accent); }
.pt-btn-reset { color: var(--text-dim); font-weight: 500; }
.pt-btn-accent { background: var(--accent-glow-soft); border-color: rgba(79,157,255,0.4); color: var(--accent); }
.pt-value { font-size: 0.85rem; font-weight: 700; min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.pt-preview-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.4rem; flex-wrap: wrap; }
.pt-footer {
  display: flex; align-items: center; gap: 0.8rem; margin-top: 1.3rem; padding-top: 1rem;
  border-top: 1px solid var(--border-soft); flex-wrap: wrap;
}
.pt-edit-count { font-size: 0.75rem; color: var(--text-dimmer); margin-left: auto; }

/* ---------- Easy mode ---------- */
.easy-card { border: 1px solid rgba(79,157,255,0.28); background: linear-gradient(180deg, rgba(79,157,255,0.045), transparent 40%), var(--card-bg); }
.easy-card .section-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.1rem; gap: 1rem; }

.easy-group { margin-top: 1.6rem; }
.easy-group:first-of-type { margin-top: 0; }
.easy-group-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 0.7rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-soft);
}
.easy-group-title .icon { width: 15px; height: 15px; color: var(--accent); }
.eq-sub { margin: -0.3rem 0 0.9rem 0; }

.eq-slider-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .eq-slider-row { grid-template-columns: 1fr; } }
.eq-slider {
  background: var(--card-bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; transition: border-color 0.15s;
}
.eq-slider.eq-slider-active { border-color: rgba(79,157,255,0.4); }
.eq-slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.7rem; }
.eq-slider-label { font-size: 0.92rem; font-weight: 800; }
.eq-slider-jp { font-size: 0.7rem; color: var(--text-dimmer); font-weight: 600; margin-left: 0.35rem; }
.eq-slider-value { font-size: 0.85rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.eq-slider-track-wrap { position: relative; height: 22px; display: flex; align-items: center; }
.eq-slider-center-tick {
  position: absolute; left: 50%; top: 3px; bottom: 3px; width: 2px;
  background: rgba(255,255,255,0.28); transform: translateX(-1px); pointer-events: none; z-index: 0;
}
.eq-slider-input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px;
  background: var(--border); outline: none; cursor: pointer; position: relative; z-index: 1; margin: 0;
}
.eq-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); cursor: grab; border: 2px solid #0f1015;
}
.eq-slider-input::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
  cursor: grab; border: 2px solid #0f1015;
}
.eq-slider-input:active::-webkit-slider-thumb { cursor: grabbing; }
.eq-slider-input:disabled { cursor: not-allowed; opacity: 0.5; }
.eq-slider-input:disabled::-webkit-slider-thumb { cursor: not-allowed; box-shadow: none; }
.eq-slider-input:disabled::-moz-range-thumb { cursor: not-allowed; box-shadow: none; }
.eq-slider-sub { font-size: 0.7rem; color: var(--text-dimmer); margin-top: 0.7rem; line-height: 1.4; }

/* "ハモリの広がり" -- always visible (spec: even without a harmony track
   the control should explain itself, not just vanish), greyed + disabled
   until a harmony track is present. */
.harmony-width-slider { margin-top: 1.1rem; }
.harmony-width-slider.disabled { opacity: 0.55; }
.harmony-width-slider.disabled .eq-slider-value { color: var(--text-dimmer); }
.reset-btn {
  background: var(--card-bg-soft); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: var(--radius-sm); padding: 0.5rem 0.9rem; font-size: 0.8rem; cursor: pointer;
  display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; flex-shrink: 0;
}
.reset-btn .icon { width: 14px; height: 14px; }
.reset-btn:hover { color: var(--text); border-color: var(--accent); }

/* prominent "adjusting" status badge, shown inline at the top of the easy
   card so it sits right where the user is actually looking/interacting */
.easy-status {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--accent-glow-soft); border: 1px solid rgba(79,157,255,0.4);
  border-radius: 999px; padding: 0.5rem 1.1rem; margin-bottom: 1.1rem;
  max-width: 480px; margin-left: auto; margin-right: auto;
}
.easy-status.hidden { display: none; }
.easy-status.state-ok { background: var(--success-glow); border-color: rgba(52,211,153,0.45); }
.easy-status.state-error { background: rgba(245,87,108,0.12); border-color: rgba(245,87,108,0.45); }
.easy-status-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  animation: status-pulse 1s ease-in-out infinite;
}
.easy-status.state-ok .easy-status-dot { background: var(--success); animation: none; }
.easy-status.state-error .easy-status-dot { background: var(--error); animation: none; }
@keyframes status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
.easy-status-text { font-size: 0.82rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.easy-status.state-ok .easy-status-text { color: var(--success); }
.easy-status.state-error .easy-status-text { color: var(--error); }
.easy-status-bar {
  flex: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; min-width: 60px;
}
.easy-status-bar-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px; transition: width 0.12s linear;
}
.easy-status.state-ok .easy-status-bar-fill { background: var(--success); }
.easy-status-eta { font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }

.knob-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}
@media (max-width: 1300px) { .knob-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .knob-grid { grid-template-columns: repeat(2, 1fr); } }

.knob {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  text-align: center; background: var(--card-bg-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 1.3rem 0.9rem 1.15rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.knob.knob-active { border-color: rgba(79,157,255,0.4); box-shadow: 0 0 0 1px rgba(79,157,255,0.15); }

.knob-dial { position: relative; width: 136px; height: 136px; cursor: grab; touch-action: none; user-select: none; }
.knob-dial:active { cursor: grabbing; }
.knob-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }

/* outer ring = TRIM (fine adjustment) */
.knob-dial .trim-track { fill: none; stroke: var(--border); stroke-width: 6; }
.knob-dial .trim-fill {
  fill: none; stroke: var(--purple); stroke-width: 6; stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--purple-glow)); transition: filter 0.15s;
}
/* inner ring = GAIN (coarse adjustment) */
.knob-dial .gain-track { fill: none; stroke: var(--border); stroke-width: 10; }
.knob-dial .gain-fill {
  fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round;
  filter: drop-shadow(0 0 7px var(--accent-glow)); transition: filter 0.15s;
}
.knob-dial .baseline-mark { fill: rgba(255, 255, 255, 0.55); }

.knob-dial.dragging-coarse .gain-fill { filter: drop-shadow(0 0 14px var(--accent-glow)); }
.knob-dial.dragging-fine .trim-fill { filter: drop-shadow(0 0 12px var(--purple-glow)); }
.knob-dial.dragging-coarse .gain-track { stroke: rgba(79,157,255,0.35); }
.knob-dial.dragging-fine .trim-track { stroke: rgba(167,139,250,0.4); }

.knob-dial .value {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800; color: var(--text); pointer-events: none;
}

.zone-label {
  position: absolute; left: 50%; bottom: -4px; transform: translate(-50%, 100%);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.1s;
  background: var(--card-bg-raised); border: 1px solid var(--border); color: var(--text-dim);
}
.zone-label.show { opacity: 1; }
.zone-label.zone-gain { color: var(--accent); border-color: rgba(79,157,255,0.5); }
.zone-label.zone-trim { color: var(--purple); border-color: rgba(167,139,250,0.5); }

.knob-label { font-size: 0.86rem; font-weight: 700; }
.knob-sub { font-size: 0.7rem; color: var(--text-dimmer); line-height: 1.4; min-height: 2.4em; }
.knob-offsets { font-size: 0.66rem; color: var(--text-dimmer); font-variant-numeric: tabular-nums; }
.knob-offsets b.g { color: var(--accent); font-weight: 700; }
.knob-offsets b.t { color: var(--purple); font-weight: 700; }

/* ---------- Advanced settings ---------- */
.advanced-toggle {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  padding: 0.2rem 0;
}
.advanced-toggle .at-left { display: flex; align-items: center; gap: 0.6rem; }
.advanced-toggle .at-left .icon { width: 18px; height: 18px; color: var(--text-dim); }
.advanced-toggle .at-title { font-weight: 700; font-size: 0.95rem; }
.advanced-toggle .at-sub { font-size: 0.75rem; color: var(--text-dimmer); margin-top: 0.15rem; }
.advanced-toggle .chev { transition: transform 0.2s; color: var(--text-dim); }
.advanced-toggle .chev .icon { width: 18px; height: 18px; }
.advanced-toggle.open .chev { transform: rotate(180deg); }

.advanced-body { display: none; margin-top: 1.2rem; }
.advanced-body.show { display: block; }
.track-toggle { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; }
.track-tab {
  background: var(--card-bg-soft); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.8rem; cursor: pointer; font-weight: 600;
}
.track-tab:hover { color: var(--text); }
.track-tab.active { background: var(--accent-glow-soft); border-color: var(--accent); color: var(--accent); }
.module-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.module-btn {
  background: var(--card-bg-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 0.75rem 0.4rem; text-align: center; cursor: pointer; color: var(--text-dim);
  font-size: 0.68rem; display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
}
.module-btn .mi { color: var(--text-dim); }
.module-btn .mi .icon { width: 17px; height: 17px; }
.module-btn:hover { border-color: rgba(79,157,255,0.4); color: var(--text); }
.module-btn.active { border-color: var(--accent); color: var(--text); background: var(--accent-glow-soft); }
.module-btn.active .mi { color: var(--accent); }

.param-group {
  border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1rem 1.2rem; display: none;
  background: var(--card-bg-soft);
}
.param-group.active { display: block; }
.param-group h4 { margin: 0 0 0.7rem 0; font-size: 0.9rem; color: var(--accent); }
.param-field { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.82rem; margin-bottom: 0.45rem; }
.param-field label { color: var(--text-dim); flex: 1; }
.param-field input[type="number"] {
  width: 92px; background: #0e1018; border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 0.25rem 0.5rem; font-variant-numeric: tabular-nums;
}
.param-field input[type="checkbox"] { transform: scale(1.15); }
.param-field input:disabled {
  opacity: 0.55; cursor: not-allowed;
}
.param-field input[type="number"]:disabled { background: #0a0b10; color: var(--text-dimmer); }

/* Pro機能 gate: 詳細設定 is viewable but not editable on the Standard plan
   (spec item 3/4) -- inputs stay real <input disabled> (not just visually
   dimmed) so nothing can actually be changed underneath the styling. */
.pro-gate-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem;
  background: linear-gradient(135deg, rgba(124,108,255,0.12), rgba(79,157,255,0.06));
  border: 1px solid rgba(124,108,255,0.35); border-radius: var(--radius);
  padding: 0.9rem 1.1rem; margin-bottom: 1.1rem;
}
.pro-gate-banner.hidden { display: none; }
.pro-lock-badge {
  font-size: 0.72rem; font-weight: 800; color: var(--purple);
  border: 1px solid rgba(167,139,250,0.5); background: rgba(124,108,255,0.14);
  border-radius: 999px; padding: 0.25rem 0.7rem; white-space: nowrap; flex-shrink: 0;
}
.pro-gate-banner p { flex: 1; min-width: 220px; font-size: 0.8rem; color: var(--text-dim); line-height: 1.55; margin: 0; }
.pro-gate-banner p b { color: var(--text); }
.pro-upsell-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 0.55rem 1.1rem; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.pro-upsell-btn:hover { filter: brightness(1.08); }

details.raw-analysis { margin-top: 1.3rem; }
details.raw-analysis summary { cursor: pointer; color: var(--text-dim); font-size: 0.82rem; margin-bottom: 0.8rem; }
.analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.data-table td { padding: 0.24rem 0.4rem; border-bottom: 1px solid var(--border-soft); }
.data-table td:first-child { color: var(--text-dim); }
.data-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Bottom action bar ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; gap: 0.9rem; padding: 0.95rem 32px;
  background: rgba(7, 9, 14, 0.9);
  border-top: 1px solid var(--border-soft);
  backdrop-filter: blur(12px);
  z-index: 25; flex-wrap: wrap;
}
.action-bar-inner { display: flex; gap: 0.9rem; width: 100%; max-width: 1680px; margin: 0 auto; flex-wrap: wrap; }
.action-bar .primary {
  flex: 1.5; min-width: 220px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white; border: none; border-radius: var(--radius-sm);
  padding: 0.9rem 1.3rem; font-weight: 700; font-size: 0.92rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  box-shadow: 0 0 26px var(--accent-glow);
}
.action-bar .primary .icon { width: 18px; height: 18px; }
.action-bar .primary:hover:not(:disabled) { box-shadow: 0 0 36px var(--accent-glow); transform: translateY(-1px); }
.action-bar .primary:disabled { opacity: 0.55; cursor: not-allowed; }
.action-bar a, .action-bar .secondary {
  flex: 1; min-width: 175px;
  background: var(--card-bg-soft); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 0.75rem 1rem; font-size: 0.82rem;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.55rem;
  text-decoration: none; cursor: pointer; text-align: left;
}
.action-bar a .icon, .action-bar .secondary .icon { width: 17px; height: 17px; color: var(--text-dim); flex-shrink: 0; }
.action-bar a .abtn-label, .action-bar .secondary .abtn-label { display: flex; flex-direction: column; }
.action-bar .sub { color: var(--text-dimmer); font-size: 0.68rem; }
.action-bar a:hover, .action-bar .secondary:hover { border-color: var(--accent); }
.action-bar .upsell { border-color: rgba(167,139,250,0.4); }
.action-bar .upsell .icon { color: var(--purple); }
.action-bar .upsell:hover { background: var(--purple-glow); border-color: var(--purple); }

/* ---------- Final action-bar background imagery (spec: 完了アクション背景)
   Same ::before-layer pattern as every other card in this app (image never
   touches the real background/children, so icon/label/hover stay exactly
   as before) -- but noticeably lighter overlays than upload cards/etc.,
   since these three are meant to read as "brighter, final-step" actions
   that pick up the accent blue/purple of the "この設定でフルMIX" button
   next to them, not as another dark content panel. Visual priority is
   intentionally graded left-to-right: Final WAV brightest/bluest (primary
   download), Preview MP3 calmer (secondary), Nekoneに仕上げを依頼 leans
   purple and sits slightly forward of the two downloads (spec: "少し目立
   つ" but not ad-like) via a stronger border glow, not a bigger overlay. */
.action-final-wav,
.action-preview-mp3,
.action-bar .upsell {
  position: relative;
  overflow: hidden;
}
.action-final-wav::before,
.action-preview-mp3::before,
.action-bar .upsell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: 0;
  pointer-events: none;
  transition: filter 0.15s;
}
.action-final-wav > *,
.action-preview-mp3 > *,
.action-bar .upsell > * {
  position: relative;
  z-index: 1;
}

.action-final-wav::before {
  background-image:
    linear-gradient(rgba(6,10,26,0.18), rgba(6,10,26,0.38)),
    url('/assets/backgrounds/final-wav-bg.png');
}
/* `.action-bar` prefixed throughout below (not just `.action-final-wav`)
   so these beat the base `.action-bar a` / `.action-bar a:hover` / `.action-
   bar a .icon` rules above on specificity, not just source order -- a
   bare single-class selector here would silently lose to those (they carry
   an extra `a` type-selector) despite appearing later in the file. */
.action-bar .action-final-wav {
  border-color: rgba(103,180,255,0.5);
  box-shadow: 0 0 14px rgba(79,157,255,0.18);
}
.action-bar .action-final-wav .icon { color: #8fc4ff; }
.action-bar .action-final-wav:hover { border-color: #8fc4ff; box-shadow: 0 0 22px rgba(79,157,255,0.32); }
.action-final-wav:hover::before { filter: brightness(1.18); }

.action-preview-mp3::before {
  background-image:
    linear-gradient(rgba(7,12,30,0.28), rgba(7,12,30,0.48)),
    url('/assets/backgrounds/preview-mp3-bg.png');
}
.action-bar .action-preview-mp3 {
  border-color: rgba(103,150,255,0.35);
}
.action-bar .action-preview-mp3 .icon { color: #a9c4ff; }
.action-bar .action-preview-mp3:hover { border-color: rgba(103,150,255,0.7); }
.action-preview-mp3:hover::before { filter: brightness(1.12); }

.action-bar .upsell::before {
  background-image:
    linear-gradient(rgba(10,8,28,0.22), rgba(10,8,28,0.4)),
    url('/assets/backgrounds/nekone-finish-bg.png');
}
.action-bar .upsell {
  border-color: rgba(167,139,250,0.55);
  box-shadow: 0 0 14px var(--purple-glow);
}
.action-bar .upsell:hover {
  background: none; /* the ::before image layer replaces the old flat hover fill */
  border-color: var(--purple);
  box-shadow: 0 0 26px var(--purple-glow), 0 0 42px rgba(124,108,255,0.18);
}
.action-bar .upsell:hover::before { filter: brightness(1.2); }

.action-final-wav:hover,
.action-preview-mp3:hover,
.action-bar .upsell:hover {
  transform: translateY(-1px);
}

/* Disabled (spec: ダウンロード等が使えない状態) -- .disabled is a plain CSS
   hook for the two <a> download buttons (anchors have no native :disabled);
   nothing currently toggles it, this just makes sure it looks inert
   wherever it's applied, matching #nekone-request-btn's native :disabled. */
.action-final-wav.disabled,
.action-preview-mp3.disabled,
.action-bar .upsell:disabled {
  pointer-events: none;
  color: var(--text-dimmer);
}
.action-final-wav.disabled::before,
.action-preview-mp3.disabled::before,
.action-bar .upsell:disabled::before {
  filter: grayscale(0.6) brightness(0.55);
}
.action-final-wav.disabled,
.action-preview-mp3.disabled { opacity: 0.55; }
.action-bar .upsell:disabled { opacity: 0.55; cursor: not-allowed; }
.action-final-wav.disabled .sub,
.action-preview-mp3.disabled .sub,
.action-bar .upsell:disabled .sub { color: var(--text-dimmer); }

.error-text { color: var(--error); font-size: 0.82rem; margin-top: 0.6rem; }
.warnings {
  background: rgba(245,166,35,0.1); border: 1px solid var(--warn); color: var(--warn);
  border-radius: var(--radius-sm); padding: 0.8rem 1.1rem; margin-top: 1rem; font-size: 0.85rem;
}
.warnings.hidden { display: none; }

.toast {
  position: fixed; bottom: 6.2rem; left: 50%; transform: translateX(-50%);
  background: var(--card-bg-raised); border: 1px solid var(--accent); color: var(--text);
  padding: 0.65rem 1.2rem; border-radius: 999px; font-size: 0.82rem;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5); z-index: 50; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }
.hidden { display: none !important; }

/* ---------- Betaテスト運用機能 ---------- */
.beta-banner {
  background: linear-gradient(90deg, rgba(79,157,255,0.14), rgba(124,108,255,0.14));
  border-bottom: 1px solid rgba(124,108,255,0.3);
  padding: 0.55rem 32px;
}
.beta-banner-inner {
  max-width: 1680px; margin: 0 auto; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
}
.beta-banner-tag {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; color: var(--purple);
  background: var(--purple-glow); border: 1px solid rgba(167,139,250,0.4);
  border-radius: 999px; padding: 0.18rem 0.7rem;
}
.beta-banner-usage { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.beta-banner-slots {
  font-size: 0.74rem; color: var(--text-dimmer); font-weight: 600;
  padding-left: 0.9rem; border-left: 1px solid var(--border-soft);
}

.beta-closed-banner {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(245,166,35,0.12); border-bottom: 1px solid var(--warn); color: var(--warn);
  padding: 0.7rem 32px; font-size: 0.85rem; font-weight: 600;
}
.beta-closed-banner .icon { width: 18px; height: 18px; flex-shrink: 0; }

/* 使用期限: 「使用開始」ゲート画面 -- 押すまでは本体UIより先に単独表示 */
.beta-start-gate {
  max-width: 1680px; margin: 3rem auto; padding: 0 32px;
}
.beta-start-gate-card {
  max-width: 560px; margin: 0 auto; text-align: center;
  padding: 3rem 2.2rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  background: radial-gradient(circle at 50% 0%, var(--purple-glow), transparent 65%), var(--card-bg);
  border: 1px solid rgba(167,139,250,0.3);
}
.beta-start-gate-tag {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; color: var(--purple);
  background: var(--purple-glow); border: 1px solid rgba(167,139,250,0.4);
  border-radius: 999px; padding: 0.2rem 0.8rem;
}
.beta-start-gate-card h2 { margin: 0; font-size: 1.3rem; }
.beta-start-gate-card p { margin: 0 0 0.6rem 0; color: var(--text-dim); font-size: 0.88rem; line-height: 1.7; white-space: pre-line; }
.beta-start-btn {
  display: flex; align-items: center; gap: 0.55rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white; border: none; border-radius: 999px;
  padding: 0.9rem 2.2rem; font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: inherit;
  box-shadow: 0 0 30px var(--accent-glow);
}
.beta-start-btn .icon { width: 16px; height: 16px; }
.beta-start-btn:hover { box-shadow: 0 0 42px var(--accent-glow); transform: translateY(-1px); }
.beta-start-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.beta-audio-notice {
  display: flex; align-items: flex-start; gap: 0.5rem; text-align: left;
  background: var(--card-bg-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; margin-top: 0.9rem;
  font-size: 0.72rem; color: var(--text-dim); line-height: 1.6; white-space: pre-line;
}
.beta-audio-notice .icon { width: 15px; height: 15px; color: var(--purple); flex-shrink: 0; margin-top: 0.1rem; }
.beta-limit-text {
  color: var(--warn); font-size: 0.82rem; font-weight: 700; margin-top: 0.7rem;
}

.beta-consent-group {
  display: flex; flex-direction: column; gap: 0.55rem; text-align: left;
  background: var(--card-bg-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 0.8rem 0.9rem; margin-bottom: 0.9rem;
}
.beta-consent-item {
  display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer;
  font-size: 0.76rem; color: var(--text-dim); line-height: 1.5;
}
.beta-consent-item input[type="checkbox"] { margin-top: 0.15rem; flex-shrink: 0; }
.beta-consent-hint {
  margin: 0.2rem 0 0 0; font-size: 0.7rem; color: var(--purple); font-weight: 600;
}
.beta-mix-paused-text {
  color: var(--warn); font-size: 0.82rem; font-weight: 700; margin-bottom: 0.7rem;
  background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.3);
  border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; white-space: pre-line;
}
.mix-queue-text {
  color: var(--text-dim); font-size: 0.8rem; margin: 0 0 0.6rem 0;
}

.beta-feedback-card { border: 1px solid rgba(167,139,250,0.3); }
.beta-feedback-card .section-title .icon { color: var(--purple); }
#beta-usage-rights-text { white-space: pre-line; }
.beta-feedback-ask { color: var(--purple); font-weight: 600; }

.beta-rating-row {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap;
}
.beta-rating-row label { font-size: 0.82rem; color: var(--text); font-weight: 600; min-width: 150px; }
.beta-rating-stars { display: flex; gap: 0.35rem; }
.beta-rating-stars button {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--card-bg-soft); border: 1px solid var(--border); color: var(--text-dim);
  cursor: pointer; font-weight: 700; font-size: 0.85rem;
}
.beta-rating-stars button:hover { border-color: var(--purple); color: var(--purple); }
.beta-rating-stars button.active { background: var(--purple-glow); border-color: var(--purple); color: var(--purple); }

.beta-field { margin-bottom: 0.9rem; }
.beta-field label { display: block; font-size: 0.82rem; color: var(--text); font-weight: 600; margin-bottom: 0.4rem; }
.beta-field textarea {
  width: 100%; background: #0e1018; border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; font-size: 0.82rem;
  font-family: inherit; resize: vertical;
}
.beta-choice-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.beta-choice-group button {
  background: var(--card-bg-soft); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 999px; padding: 0.45rem 0.9rem; font-size: 0.78rem; cursor: pointer; font-weight: 600;
}
.beta-choice-group button:hover { color: var(--text); }
.beta-choice-group button.active { background: var(--purple-glow); border-color: var(--purple); color: var(--purple); }

.beta-feedback-done {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--success-glow); border-radius: var(--radius-sm); padding: 0.9rem 1.1rem;
  color: var(--success); font-size: 0.85rem; font-weight: 600;
}
.beta-feedback-done .icon { width: 20px; height: 20px; flex-shrink: 0; }
.beta-feedback-done p { margin: 0; white-space: pre-line; }