/* =============================================================
   frontend/css/style.css  —  LAS ルナーダークUI v3.1
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Noto+Sans+JP:wght@300;400;500;600;700&family=Orbitron:wght@700;800;900&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  --bg:           #050510;
  --surface:      #0a0a1a;
  --card:         #0d0d22;
  --card2:        #0f0f28;
  --border:       rgba(192,192,192,.10);
  --border-hi:    rgba(192,192,192,.28);
  --silver:       #c0c0c0;
  --silver-dim:   rgba(192,192,192,.45);
  --silver-faint: rgba(192,192,192,.15);
  --navy:         #000080;
  --accent:       #4040ff;
  --accent-dim:   rgba(64,64,255,.22);
  --accent-glow:  rgba(64,64,255,.48);
  --gold:         #ffc840;
  --success:      #40d080;
  --warn:         #ffa040;
  --danger:       #ff6060;
  --cyan:         #40c0ff;
  --r-card:       16px;
  --r-btn:        10px;
  --font-display: 'Orbitron', sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Noto Sans JP', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--silver); font-family: var(--font-body);
  min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-size: 15px; line-height: 1.6; letter-spacing: 0.01em;
}
::-webkit-scrollbar             { width: 5px; }
::-webkit-scrollbar-track       { background: var(--surface); }
::-webkit-scrollbar-thumb       { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--silver-faint); }
::selection { background: var(--accent-dim); color: #fff; }

/* ── カード ── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(192,192,192,.022) 0%, transparent 55%, rgba(64,64,255,.022) 100%);
}
.sec-head {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(192,192,192,.5); margin-bottom: 10px;
}
.sec-head svg { color: #8080ff; flex-shrink: 0; }

/* ── グラデーションテキスト（カクカク防止） ── */
.grad-text {
  background: linear-gradient(135deg, #c0c0c0 0%, #e0e0ff 50%, #c0c0c0 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  backface-visibility: hidden;
}

/* ── プログレス ── */
.prog-track { height: 6px; border-radius: 100px; background: rgba(192,192,192,.07); overflow: hidden; position: relative; }
.prog-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, #000080, #4040ff, #8080ff);
  background-size: 200% 100%; animation: progShimmer 2.2s linear infinite;
  transition: width .55s cubic-bezier(.4,0,.2,1); position: relative;
}
.prog-fill::after {
  content: ''; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; background: #fff; border-radius: 50%;
  box-shadow: 0 0 10px rgba(64,64,255,.9);
}
.prog-sm .prog-track { height: 3px; }
.prog-sm .prog-fill::after { display: none; }
@keyframes progShimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }

/* ── バッジ ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 5px;
  font-family: var(--font-body); font-size: .6rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.badge-accent  { background: rgba(64,64,255,.15);  border: 1px solid rgba(64,64,255,.35);  color: #8080ff; }
.badge-silver  { background: rgba(192,192,192,.08); border: 1px solid rgba(192,192,192,.22); color: #c0c0c0; }
.badge-gold    { background: rgba(255,200,0,.10);   border: 1px solid rgba(255,200,0,.28);   color: var(--gold); }
.badge-success { background: rgba(64,208,128,.10);  border: 1px solid rgba(64,208,128,.25);  color: var(--success); }
.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(192,192,192,.08), transparent); }

/* ── ボタン ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; cursor: pointer; font-family: var(--font-body); font-weight: 600;
  letter-spacing: .04em; transition: .25s; position: relative; overflow: hidden;
}
.btn:disabled { opacity: .3; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, #000070, #0000b0 40%, #3030e0);
  border: 1px solid rgba(64,64,255,.55); color: #fff;
  box-shadow: 0 0 32px rgba(64,64,255,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-primary:not(:disabled):hover { box-shadow: 0 0 52px rgba(64,64,255,.48); }
.btn-primary::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  transform: skewX(-20deg); animation: btnShine 2.8s linear infinite;
}
@keyframes btnShine { 0%{left:-100%} 100%{left:200%} }
.btn-ghost {
  background: transparent; border: 1px solid rgba(192,192,192,.2); color: rgba(192,192,192,.55);
}
.btn-ghost:not(:disabled):hover { background: rgba(192,192,192,.06); color: #c0c0c0; }
.btn-logout-red {
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  background: rgba(220,50,50,.10); border: 1px solid rgba(220,50,50,.28);
  color: rgba(220,90,90,.85); transition: .18s; cursor: pointer;
  font-size: .62rem; font-weight: 600; border-radius: 8px; padding: 5px 10px;
}
.btn-logout-red:hover { background: rgba(220,50,50,.22); border-color: rgba(220,50,50,.5); color: #ff6868; }
.btn-sm { padding: 5px 12px; border-radius: 8px; font-size: .68rem; }

/* ── 星空 ── */
#star-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .68; }

/* ── ヘッダー ── */
#app-header {
  position: relative; z-index: 20; border-bottom: 1px solid rgba(192,192,192,.07);
  backdrop-filter: blur(22px);
  background: linear-gradient(180deg, rgba(5,5,16,.96) 0%, rgba(10,10,26,.8) 100%);
}
.header-inner {
  max-width: 1380px; margin: 0 auto; padding: 0 20px;
  height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.logo-wrap { display: flex; align-items: center; gap: 10px; }
.logo-orb {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 33% 33%, #dcdcf0, #8888a8 45%, #404068 100%);
  border: 1px solid rgba(192,192,192,.25); display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; box-shadow: 0 0 18px rgba(64,64,255,.22);
}
.logo-orb::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: rgba(64,64,255,.6);
  animation: orbSpin 8s linear infinite;
}
@keyframes orbSpin { to { transform: rotate(360deg); } }
.logo-name { font-family: var(--font-display); font-size: .78rem; font-weight: 800; letter-spacing: .2em; color: #d0d0e8; }
.logo-sub  { font-family: var(--font-body); font-size: .52rem; font-weight: 500; letter-spacing: .18em; color: rgba(192,192,192,.33); }
.header-status { display: flex; align-items: center; gap: 18px; }
.status-chip {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: .68rem; font-weight: 500; color: rgba(192,192,192,.45);
}
.status-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 6px var(--success); animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:.5} 50%{opacity:1} }
.plan-chip {
  padding: 4px 12px; border-radius: 20px; font-size: .62rem; font-weight: 600;
  border: 1px solid rgba(192,192,192,.14); background: rgba(192,192,192,.04);
  color: rgba(192,192,192,.5); letter-spacing: .1em; font-family: var(--font-body);
}
.plan-chip-pro   { border-color: rgba(64,64,255,.35);  background: rgba(64,64,255,.1);   color: #8080ff; }
.plan-chip-ultra { border-color: rgba(255,200,0,.35);   background: rgba(255,200,0,.08);  color: var(--gold); }

/* ── ユーザーアバター ── */
.user-avatar-wrap { display: flex; align-items: center; gap: 8px; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(64,64,255,.4); object-fit: cover;
}
.user-avatar-fallback {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(64,64,255,.12); border: 1px solid rgba(64,64,255,.3);
  display: flex; align-items: center; justify-content: center; color: #8080ff;
}
.user-name-chip {
  font-family: var(--font-body); font-size: .7rem; font-weight: 500; color: rgba(192,192,192,.6);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── メインレイアウト ── */
#main-content { max-width: 1380px; margin: 0 auto; padding: 28px 20px 70px; position: relative; z-index: 10; }

/* ── ページタイトル（カクカク防止） ── */
.page-title { margin-bottom: 26px; }
.page-title h1 {
  font-family: var(--font-body);
  font-size: 2rem; font-weight: 800; letter-spacing: .02em;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.2;
}
.page-title p { font-size: .84rem; font-weight: 400; color: rgba(192,192,192,.45); margin-top: 6px; }
.beta-tag {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: .56rem; border: 1px solid rgba(64,64,255,.28); color: #6060ff;
  letter-spacing: .12em; margin-left: 8px; vertical-align: middle;
  font-family: var(--font-body); font-weight: 600;
}

/* ── app-body ── */
.app-body { display: flex; gap: 16px; align-items: flex-start; }

/* ── セクションサイドバー ── */
.section-sidebar {
  width: 74px; flex-shrink: 0; position: sticky; top: 72px;
  display: flex; flex-direction: column; gap: 4px; padding: 8px 6px;
  background: rgba(13,13,34,.7); border: 1px solid rgba(192,192,192,.08);
  border-radius: 18px; backdrop-filter: blur(16px);
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 10px 4px; border-radius: 12px;
  border: none; cursor: pointer; transition: all .22s;
  background: transparent; color: rgba(192,192,192,.3); width: 100%;
}
.nav-item:hover  { background: rgba(192,192,192,.06); color: rgba(192,192,192,.7); }
.nav-item.active { background: rgba(64,64,255,.14); color: #8080ff; box-shadow: 0 0 12px rgba(64,64,255,.15); }
.nav-label { font-family: var(--font-body); font-size: .52rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }

/* ── セクション表示/非表示 ── */
.section-wrap { transition: all .28s; }
.section-wrap.section-hidden { display: none !important; }

/* ── メイングリッド ── */
.main-grid {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start;
}
@media (max-width: 1100px) { .main-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .app-body { flex-direction: column; }
  .section-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; position: static; padding: 8px; }
  .nav-item { flex-direction: row; gap: 6px; width: auto; flex: 1; padding: 8px 10px; min-width: 80px; }
  .nav-label { font-size: .6rem; }
}
.left-col, .right-col { display: flex; flex-direction: column; gap: 20px; }

/* ── アップロードゾーン ── */
.dropzone {
  border: 2px dashed rgba(192,192,192,.14); border-radius: 14px; min-height: 162px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; padding: 30px 20px; transition: .3s; background: rgba(192,192,192,.015);
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--accent); background: rgba(64,64,255,.05);
  box-shadow: inset 0 0 40px rgba(64,64,255,.08), 0 0 34px rgba(64,64,255,.16);
}
.dz-icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: rgba(64,64,255,.1); border: 1px solid rgba(64,64,255,.2);
  display: flex; align-items: center; justify-content: center; transition: .3s;
}
.dropzone:hover .dz-icon, .dropzone.drag-over .dz-icon { transform: translateY(-5px); background: rgba(64,64,255,.18); }
.dz-main { font-size: .9rem; font-weight: 600; color: rgba(192,192,192,.7); }
.dz-sub  { font-size: .74rem; font-weight: 400; color: rgba(192,192,192,.3); }
.dz-btn-label {
  margin-top: 5px; padding: 4px 14px; border-radius: 20px; font-size: .72rem; font-weight: 500;
  border: 1px solid rgba(192,192,192,.14); color: rgba(192,192,192,.38);
}
.file-info-wrap { padding: 16px 18px; }
.file-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.file-icon-wrap {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: rgba(64,64,255,.12); border: 1px solid rgba(64,64,255,.22);
  display: flex; align-items: center; justify-content: center;
}
.file-name { font-size: .86rem; font-weight: 600; color: #c0c0c0; word-break: break-all; }
.file-meta { font-size: .7rem; font-weight: 400; color: rgba(192,192,192,.38); margin-top: 2px; font-family: var(--font-mono); }
.uploading-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 28px; min-height: 150px;
}
.spin { animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 波形 ── */
.waveform-canvas {
  width: 100%; height: 70px; background: rgba(0,0,0,.32);
  border: 1px solid rgba(192,192,192,.07); border-radius: 10px; display: block;
}

/* ── アップロードプレイヤー ── */
.upload-player {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-top: 10px;
  border-radius: 10px; background: rgba(64,64,255,.05); border: 1px solid rgba(64,64,255,.12);
}
.up-play-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(64,64,255,.22); color: #8080ff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: .2s;
}
.up-play-btn:hover { background: rgba(64,64,255,.4); }
.up-bar-wrap { flex: 1; display: flex; align-items: center; gap: 6px; }
.up-time { font-family: var(--font-mono); font-size: .6rem; color: rgba(192,192,192,.4); white-space: nowrap; flex-shrink: 0; }
.up-seek, .up-vol {
  -webkit-appearance: none; appearance: none; width: 100%; height: 3px;
  border-radius: 2px; background: rgba(192,192,192,.12); outline: none; cursor: pointer;
}
/* .up-seek is now inside wv-seek-wrap — transparent track */
.up-bar-wrap .up-seek { background: transparent; height: 100%; }
.up-seek::-webkit-slider-thumb, .up-vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 10px; border-radius: 50%; background: #8080ff; cursor: pointer;
}
.up-vol-wrap { display: flex; align-items: center; gap: 5px; flex-shrink: 0; width: 70px; color: rgba(192,192,192,.4); }

/* ── グローバルプレイヤー ── */
.global-player {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 10px;
  border-radius: 10px; background: rgba(64,64,255,.06); border: 1px solid rgba(64,64,255,.14);
}
.gp-play-btn {
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(64,64,255,.22); color: #8080ff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: .2s;
}
.gp-play-btn:hover { background: rgba(64,64,255,.4); }
.gp-seek-wrap { flex: 1; display: flex; align-items: center; gap: 6px; }
.gp-time { font-family: var(--font-mono); font-size: .6rem; color: rgba(192,192,192,.4); white-space: nowrap; flex-shrink: 0; }
.gp-seek {
  -webkit-appearance: none; appearance: none; flex: 1; height: 3px;
  border-radius: 2px; background: rgba(192,192,192,.12); outline: none; cursor: pointer;
}
.gp-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 10px; height: 10px;
  border-radius: 50%; background: #8080ff; cursor: pointer;
}
.gp-vol-wrap { display: flex; align-items: center; gap: 5px; flex-shrink: 0; width: 80px; color: rgba(192,192,192,.4); }
.gp-vol {
  -webkit-appearance: none; appearance: none; flex: 1; height: 3px;
  border-radius: 2px; background: rgba(192,192,192,.12); outline: none; cursor: pointer;
}
.gp-vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 10px; height: 10px;
  border-radius: 50%; background: #8080ff; cursor: pointer;
}
/* 曲名表示 */
.gp-track-name {
  font-size: .62rem; font-weight: 600; color: rgba(192,192,192,.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px;
  font-family: var(--font-body);
}

/* ── プレイリストコントロール ── */
.playlist-controls {
  display: flex; gap: 7px; margin-bottom: 12px;
}
.playlist-controls .btn {
  flex: 1; padding: 7px 10px; border-radius: 9px; font-size: .66rem; gap: 5px;
}

/* ── 分離モード ── */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 600px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-card {
  border: 1px solid rgba(192,192,192,.1); border-radius: 14px; padding: 14px 14px 12px;
  cursor: pointer; transition: .22s; position: relative; background: rgba(192,192,192,.015); text-align: left;
}
.tier-card:hover { background: rgba(192,192,192,.04); }
.tier-card.selected { border-color: rgba(64,64,255,.55); background: rgba(64,64,255,.07); box-shadow: 0 0 26px rgba(64,64,255,.15); }
.tier-card.locked { opacity: .42; cursor: not-allowed; }
.tier-name { font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .06em; color: rgba(192,192,192,.48); margin-bottom: 3px; }
.tier-card.selected .tier-name { color: #c0c0c0; }
.tier-sub  { font-size: .7rem; font-weight: 500; color: rgba(128,128,255,.52); margin-bottom: 8px; }
.tier-card.selected .tier-sub { color: #8080ff; }
.stem-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.stem-chip {
  padding: 2px 7px; border-radius: 5px; font-size: .6rem;
  background: rgba(192,192,192,.06); border: 1px solid rgba(192,192,192,.1);
  color: rgba(192,192,192,.35); font-family: var(--font-mono);
}
.tier-card.selected .stem-chip { background: rgba(64,64,255,.14); border-color: rgba(64,64,255,.28); color: rgba(192,192,192,.88); }
.tier-limit { margin-top: 8px; font-size: .62rem; color: rgba(192,192,192,.24); font-family: var(--font-mono); }
.card-badge {
  position: absolute; top: -10px; right: 9px; padding: 2px 8px; border-radius: 4px;
  font-family: var(--font-body); font-size: .58rem; font-weight: 700; letter-spacing: .04em;
}
.cb-popular { background: rgba(64,64,255,.18); border: 1px solid rgba(64,64,255,.35); color: #8080ff; }
.cb-ultra   { background: rgba(255,200,0,.12);  border: 1px solid rgba(255,200,0,.28);  color: var(--gold); }
.sel-check {
  position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(64,64,255,.6);
}
.lock-ic {
  position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(192,192,192,.1); display: flex; align-items: center; justify-content: center;
}

/* ── エフェクト ── */
.effect-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 700px) { .effect-grid { grid-template-columns: repeat(2, 1fr); } }
.effect-card {
  border: 1px solid rgba(192,192,192,.08); border-radius: 12px; padding: 10px 10px 8px;
  cursor: pointer; transition: .2s; position: relative; text-align: left; background: rgba(192,192,192,.015);
}
.effect-card:hover { background: rgba(192,192,192,.04); }
.effect-card.selected { border-color: rgba(64,64,255,.5); background: rgba(64,64,255,.09); box-shadow: 0 0 18px rgba(64,64,255,.12); }
.effect-card.locked { opacity: .55; }
.eff-icon {
  width: 30px; height: 30px; border-radius: 8px; background: rgba(192,192,192,.06);
  display: flex; align-items: center; justify-content: center; margin-bottom: 6px; transition: .2s; color: rgba(192,192,192,.38);
}
.effect-card.selected .eff-icon { background: rgba(64,64,255,.18); color: #8080ff; }
.eff-name { font-family: var(--font-body); font-size: .66rem; font-weight: 700; letter-spacing: .02em; color: rgba(192,192,192,.55); }
.effect-card.selected .eff-name { color: #c0c0c0; }
.eff-desc { font-size: .6rem; font-weight: 400; color: rgba(192,192,192,.28); margin-top: 2px; line-height: 1.4; word-break: break-all; }
.eff-req   { margin-top: 5px; display: inline-block; font-size: .56rem; padding: 1px 5px; border-radius: 4px; font-family: var(--font-body); font-weight: 700; letter-spacing: .04em; }
.req-pro   { background: rgba(64,64,255,.1);  border: 1px solid rgba(64,64,255,.22);  color: #6060ff; }
.req-ultra { background: rgba(255,200,0,.1);  border: 1px solid rgba(255,200,0,.22);  color: var(--gold); }
.eff-limit { font-size: .56rem; color: rgba(192,192,192,.25); font-family: var(--font-mono); margin-top: 5px; }
.eff-sel-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(64,64,255,.8); }
.eff-lock { position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; border-radius: 50%; background: rgba(192,192,192,.08); display: flex; align-items: center; justify-content: center; }
.free-note {
  font-family: var(--font-body); font-size: .65rem; font-weight: 500; color: rgba(128,128,255,.5); letter-spacing: .04em;
  padding: 3px 10px; border: 1px solid rgba(64,64,255,.18); border-radius: 20px; margin-left: auto; white-space: nowrap;
}

/* ── 処理ボタン ── */
.process-btn { width: 100%; padding: 15px; border-radius: 14px; font-family: var(--font-body); font-size: .86rem; font-weight: 700; letter-spacing: .08em; }

/* ── ステータスカード ── */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px;
  font-family: var(--font-body); font-size: .66rem; font-weight: 600; letter-spacing: .04em;
}
.sb-idle       { background: rgba(192,192,192,.05); border: 1px solid rgba(192,192,192,.12); color: rgba(192,192,192,.4); }
.sb-queued     { background: rgba(255,160,64,.06);  border: 1px solid rgba(255,160,64,.18);  color: var(--warn); }
.sb-processing { background: rgba(64,192,255,.06);  border: 1px solid rgba(64,192,255,.2);   color: var(--cyan); }
.sb-completed  { background: rgba(64,208,128,.07);  border: 1px solid rgba(64,208,128,.2);   color: var(--success); }
.sb-error      { background: rgba(255,96,96,.07);   border: 1px solid rgba(255,96,96,.2);    color: var(--danger); }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; animation: blink 1.4s ease-in-out infinite; }
.queue-bar {
  background: rgba(255,160,64,.045); border: 1px solid rgba(255,160,64,.1);
  border-radius: 12px; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between;
}
.queue-info-box {
  background: rgba(192,192,192,.03); border: 1px solid rgba(192,192,192,.07);
  border-radius: 12px; padding: 14px;
}
.phase-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 10px; }
.phase-item {
  border-radius: 8px; padding: 6px; text-align: center; font-family: var(--font-body); font-size: .62rem; font-weight: 500;
  transition: .4s; background: rgba(192,192,192,.02); border: 1px solid rgba(192,192,192,.06); color: rgba(192,192,192,.28);
}
.phase-item.done { background: rgba(64,192,255,.07); border-color: rgba(64,192,255,.18); color: var(--cyan); }
.phase-item.active { background: rgba(64,64,255,.07); border-color: rgba(64,64,255,.2); color: #8080ff; }
.completed-ic {
  width: 44px; height: 44px; border-radius: 14px; margin: 0 auto 10px;
  background: rgba(64,208,128,.1); border: 1px solid rgba(64,208,128,.22);
  display: flex; align-items: center; justify-content: center;
}

/* ── ダウンロード ── */
.fmt-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.fmt-btn {
  padding: 5px 10px; border-radius: 8px; font-size: .66rem; cursor: pointer; transition: .2s;
  letter-spacing: .04em; font-weight: 600; font-family: var(--font-body);
  border: 1px solid; display: inline-flex; align-items: center; gap: 4px;
}
.fmt-active   { border-color: rgba(64,64,255,.5);   background: rgba(64,64,255,.12);   color: #c0c0c0; }
.fmt-inactive { border-color: rgba(192,192,192,.1);  background: rgba(192,192,192,.02);  color: rgba(192,192,192,.45); }
.fmt-locked   { border-color: rgba(192,192,192,.06); background: transparent;           color: rgba(192,192,192,.2); cursor: not-allowed; }
.fmt-plan-badge { font-size: .48rem; padding: 1px 4px; border-radius: 3px; font-family: var(--font-body); font-weight: 700; }
.fmt-pro   { background: rgba(64,64,255,.12); border: 1px solid rgba(64,64,255,.25); color: #6060ff; }
.fmt-ultra { background: rgba(255,200,0,.1);  border: 1px solid rgba(255,200,0,.25);  color: var(--gold); }

/* ── ステムリスト ── */
.stem-list { display: flex; flex-direction: column; gap: 6px; }
.stem-row {
  border-radius: 11px; border: 1px solid rgba(192,192,192,.07);
  background: rgba(192,192,192,.018); transition: .2s; overflow: hidden;
}
.stem-row:hover { background: rgba(192,192,192,.04); border-color: rgba(192,192,192,.12); }
.stem-row.playing-row {
  border-color: rgba(64,64,255,.35); background: rgba(64,64,255,.06);
  box-shadow: 0 0 16px rgba(64,64,255,.12);
}
.stem-row-top {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px;
}

/* チェックボックス */
.stem-check {
  width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid rgba(192,192,192,.22);
  background: rgba(192,192,192,.04); cursor: pointer; flex-shrink: 0; appearance: none;
  transition: .2s; position: relative;
}
.stem-check:checked {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 8px rgba(64,64,255,.5);
}
.stem-check:checked::after {
  content: ''; position: absolute; left: 3px; top: 1px;
  width: 8px; height: 5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}

.stem-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.stem-name { font-size: .78rem; font-weight: 600; color: rgba(192,192,192,.75); font-family: var(--font-body); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stem-ext  { font-size: .65rem; color: rgba(192,192,192,.28); }
.stem-size { font-size: .6rem; color: rgba(192,192,192,.28); font-family: var(--font-mono); margin-right: 2px; white-space: nowrap; }
.stem-row.playing-row .stem-name { color: #d0d0ff; }

/* ミニプレイヤー（アクティブステム用） */
.stem-mini-player {
  display: flex; align-items: center; gap: 7px; padding: 6px 10px 8px 10px;
  border-top: 1px solid rgba(64,64,255,.12); background: rgba(64,64,255,.04);
}
.stem-mini-time { font-family: var(--font-mono); font-size: .58rem; color: rgba(192,192,192,.4); white-space: nowrap; flex-shrink: 0; }
.stem-mini-seek {
  -webkit-appearance: none; appearance: none; flex: 1; height: 3px;
  border-radius: 2px; outline: none; cursor: pointer;
  background: linear-gradient(to right, rgba(64,64,255,.7) var(--pct, 0%), rgba(192,192,192,.12) var(--pct, 0%));
}
.stem-mini-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 10px; height: 10px;
  border-radius: 50%; background: #8080ff; cursor: pointer;
}

.icon-btn {
  width: 26px; height: 26px; border-radius: 8px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: .2s; flex-shrink: 0;
}
.play-stem-btn { background: rgba(64,64,255,.1); color: rgba(128,128,255,.7); }
.play-stem-btn:hover, .play-stem-btn.playing { background: rgba(64,64,255,.28); color: #a0a0ff; }
.mute-btn  { background: rgba(192,192,192,.06); color: rgba(192,192,192,.45); }
.mute-btn:hover, .mute-btn.muted { background: rgba(255,96,96,.1); color: var(--danger); }
.dl-btn    { background: rgba(64,64,255,.12); color: #8080ff; }
.dl-btn:hover { background: rgba(64,64,255,.24); }
.empty-stems {
  text-align: center; padding: 22px; border: 1px dashed rgba(192,192,192,.08);
  border-radius: 10px; background: rgba(192,192,192,.015);
}
.empty-stems p { font-size: .75rem; font-weight: 400; color: rgba(192,192,192,.28); margin-top: 6px; }

/* ── 使用状況 ── */
.usage-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.usage-plan-badge {
  padding: 2px 9px; border-radius: 20px; font-size: .58rem; font-weight: 700;
  font-family: var(--font-body); letter-spacing: .06em; border: 1px solid;
}
.usage-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.usage-row + .usage-row { border-top: 1px solid rgba(192,192,192,.05); }
.usage-label { font-size: .76rem; font-weight: 400; color: rgba(192,192,192,.45); }
.usage-val   { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; }
.usage-suf   { font-size: .65rem; color: rgba(192,192,192,.28); font-weight: 400; }
.usage-unlimited { color: var(--success); font-size: .72rem; font-weight: 600; }

/* 使用量プログレスバー */
.usage-prog-wrap { margin-top: 4px; }
.usage-prog-track { height: 3px; border-radius: 100px; background: rgba(192,192,192,.07); overflow: hidden; }
.usage-prog-fill  { height: 100%; border-radius: 100px; transition: width .5s ease; }

/* ── 料金プラン ── */
.pricing-header { text-align: center; margin-bottom: 38px; }
.pricing-pre { font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .3em; color: rgba(192,192,192,.3); margin-bottom: 10px; }
.pricing-header h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; letter-spacing: .08em; margin-bottom: 8px; }
.pricing-header p { font-size: .84rem; font-weight: 400; color: rgba(192,192,192,.4); }
.plans-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;
  max-width: 1000px; margin: 0 auto; padding-top: 14px;
}
@media (max-width: 768px) { .plans-grid { grid-template-columns: 1fr; } }
.plan-card {
  border: 1px solid rgba(192,192,192,.1); border-radius: 18px; padding: 32px 24px 24px;
  display: flex; flex-direction: column; position: relative; overflow: visible; transition: .28s;
}
.plan-card:hover { transform: translateY(-3px); }
.plan-card.popular { border-color: rgba(64,64,255,.4); box-shadow: 0 0 50px rgba(64,64,255,.16), inset 0 0 50px rgba(64,64,255,.03); }
.plan-card.ultra-plan { border-color: rgba(255,200,0,.24); box-shadow: 0 0 34px rgba(255,200,0,.1); }
.plan-top-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 4px 16px; border-radius: 20px; font-family: var(--font-body);
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap; z-index: 2;
}
.plan-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.plan-name-text { font-family: var(--font-body); font-size: .96rem; font-weight: 800; letter-spacing: .06em; margin-bottom: 4px; }
.plan-price { display: flex; align-items: baseline; gap: 3px; margin-bottom: 18px; }
.price-amount { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; letter-spacing: .02em; color: #c0c0c0; }
.price-period { font-size: .76rem; font-weight: 400; color: rgba(192,192,192,.38); }
.plan-features { list-style: none; flex: 1; margin-bottom: 20px; }
.plan-features li { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; line-height: 1.5; }
.feat-ck   { flex-shrink: 0; margin-top: 2px; }
.feat-text { font-size: .76rem; font-weight: 400; color: rgba(192,192,192,.65); word-break: break-word; line-height: 1.5; }
.plan-btn {
  width: 100%; padding: 12px; border-radius: 12px; font-family: var(--font-body); font-size: .76rem;
  font-weight: 700; letter-spacing: .06em; cursor: pointer; transition: .3s;
  display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid;
}
.plan-btn-current { background: rgba(192,192,192,.04); border-color: rgba(192,192,192,.1); color: rgba(192,192,192,.28); cursor: default; }
.plan-btn-pro { background: linear-gradient(135deg, #000070, #3030e0); border-color: rgba(64,64,255,.5); color: #fff; box-shadow: 0 0 22px rgba(64,64,255,.28); }
.plan-btn-pro:hover { box-shadow: 0 0 40px rgba(64,64,255,.52); }
.plan-btn-ultra { background: linear-gradient(135deg, #402000, #804010); border-color: rgba(255,200,0,.35); color: #fff; box-shadow: 0 0 22px rgba(255,200,0,.14); }
.plan-btn-ultra:hover { box-shadow: 0 0 32px rgba(255,200,0,.32); }
.pricing-note { text-align: center; margin-top: 20px; font-size: .72rem; font-weight: 400; color: rgba(192,192,192,.22); }

/* ── モーダル ── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(5,5,16,.86); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--card2); border: 1px solid var(--border-hi); border-radius: 20px; padding: 28px 26px;
  width: 100%; max-width: 440px;
  box-shadow: 0 28px 80px rgba(0,0,0,.8), 0 0 60px rgba(64,64,255,.1);
  animation: modalIn .3s cubic-bezier(.16,1,.3,1);
}
@keyframes modalIn { from{opacity:0;transform:scale(.9) translateY(16px)} to{opacity:1;transform:none} }
.modal-header {
  font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: #c0c0c0;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(192,192,192,.1);
  display: flex; justify-content: space-between; align-items: center;
}
.modal-close-btn {
  width: 26px; height: 26px; border-radius: 7px; border: none; background: transparent;
  cursor: pointer; color: rgba(192,192,192,.4); display: flex; align-items: center; justify-content: center;
}
.modal-close-btn:hover { background: rgba(255,255,255,.06); color: #c0c0c0; }
.modal-icon { width: 58px; height: 58px; border-radius: 18px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.modal-body { text-align: center; }
.modal-body h3 { font-size: .92rem; font-weight: 600; color: #c0c0c0; margin-bottom: 8px; }
.modal-body p  { font-size: .8rem; font-weight: 400; color: rgba(192,192,192,.42); line-height: 1.75; margin-bottom: 6px; }
.modal-btns    { display: flex; gap: 10px; margin-top: 22px; }

/* ── トースト ── */
#toast-area {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 10000; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.toast {
  padding: 10px 20px; border-radius: 10px; background: rgba(13,13,34,.96);
  border: 1px solid rgba(64,208,128,.25); color: var(--success); font-size: .78rem; font-weight: 500;
  white-space: nowrap; box-shadow: 0 8px 32px rgba(0,0,0,.6); animation: toastIn .3s ease;
}
.toast.error { border-color: rgba(255,96,96,.25); color: var(--danger); }
@keyframes toastIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ── フッター ── */
#app-footer {
  border-top: 1px solid rgba(192,192,192,.06); padding-top: 22px; margin-top: 56px;
  text-align: center; font-family: var(--font-body); font-size: .7rem; font-weight: 400; color: rgba(192,192,192,.18);
}

/* ── ユーティリティ ── */
.hidden  { display: none !important; }
.flex    { display: flex; }
.items-c { align-items: center; }
.jc-sb   { justify-content: space-between; }
.mb-10   { margin-bottom: 10px; }
.mb-12   { margin-bottom: 12px; }
.mb-14   { margin-bottom: 14px; }
.mt-10   { margin-top: 10px; }
.w-full  { width: 100%; }
.prog-wrap { }

/* ── 出力形式 横長グリッド ── */
.fmt-wide-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
@media (max-width: 700px) { .fmt-wide-grid { grid-template-columns: repeat(2, 1fr); } }
.fmt-wide-btn {
  border: 1px solid rgba(192,192,192,.1); border-radius: 12px; padding: 10px 12px;
  cursor: pointer; transition: .2s; background: rgba(192,192,192,.018); text-align: left;
  display: flex; flex-direction: column; gap: 3px;
}
.fmt-wide-btn:hover { background: rgba(192,192,192,.04); border-color: rgba(192,192,192,.2); }
.fmt-wide-btn.active {
  border-color: rgba(64,64,255,.55); background: rgba(64,64,255,.09);
  box-shadow: 0 0 18px rgba(64,64,255,.12);
}
.fmt-wide-btn.locked { opacity: .42; cursor: not-allowed; }
.fmt-wide-top {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
}
.fmt-wide-label {
  font-family: var(--font-body); font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; color: rgba(192,192,192,.55); display: flex; align-items: center; gap: 4px;
}
.fmt-wide-btn.active .fmt-wide-label { color: #c0c0c0; }
.fmt-wide-desc {
  font-size: .62rem; color: rgba(192,192,192,.3); font-family: var(--font-body);
  line-height: 1.3;
}
.fmt-wide-btn.active .fmt-wide-desc { color: rgba(192,192,192,.55); }
.fmt-req-badge {
  font-size: .52rem; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  font-family: var(--font-body); letter-spacing: .04em; flex-shrink: 0;
}

/* ── 同時再生コントロール ── */
.sync-controls {
  display: flex; gap: 7px; margin-bottom: 10px; flex-wrap: wrap;
}
.sync-controls .btn { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 9px; font-size: .66rem; gap: 5px; }
.btn-danger-ghost {
  background: transparent; border: 1px solid rgba(255,96,96,.25); color: rgba(255,96,96,.7);
}
.btn-danger-ghost:hover { background: rgba(255,96,96,.08); color: var(--danger); }

.sync-player {
  display: flex; flex-direction: column; gap: 6px; padding: 9px 12px; margin-bottom: 10px;
  border-radius: 10px; background: rgba(64,64,255,.05); border: 1px solid rgba(64,64,255,.14);
}
.sync-bar-row {
  display: flex; align-items: center; gap: 7px;
}
.sync-time {
  font-family: var(--font-mono); font-size: .6rem; color: rgba(192,192,192,.4); white-space: nowrap; flex-shrink: 0;
}
/* old plain seek bars are now replaced by wv-seek-wrap — keep for fallback */
.sync-seek {
  -webkit-appearance: none; appearance: none; flex: 1; height: 3px;
  border-radius: 2px; background: rgba(192,192,192,.12); outline: none; cursor: pointer;
  display: none; /* replaced by wv-seek-wrap */
}
.sync-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 11px; height: 11px;
  border-radius: 50%; background: #8080ff; cursor: pointer;
  box-shadow: 0 0 6px rgba(64,64,255,.6);
}
.sync-vol-row { display: flex; align-items: center; gap: 7px; }
.sync-vol {
  -webkit-appearance: none; appearance: none; flex: 1; height: 3px;
  border-radius: 2px; background: rgba(192,192,192,.12); outline: none; cursor: pointer;
}
.sync-vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 10px; height: 10px;
  border-radius: 50%; background: #8080ff; cursor: pointer;
}

/* ── 波形シークバー共通 ── */
.wv-seek-wrap {
  position: relative; flex: 1; height: 40px; border-radius: 6px;
  overflow: hidden; background: rgba(192,192,192,.04);
  border: 1px solid rgba(192,192,192,.08);
}
.seek-wv-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; display: block;
}
.seek-progress-overlay {
  position: absolute; top: 0; left: 0; height: 100%;
  background: rgba(64,64,255,.12); pointer-events: none;
  transition: width .1s linear;
  border-right: 2px solid rgba(128,128,255,.6);
}
.wv-seek-wrap input[type=range] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-appearance: none; appearance: none;
  background: transparent; outline: none; cursor: pointer; margin: 0;
  z-index: 2;
}
.wv-seek-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 40px; background: rgba(255,255,255,.15);
  border-left: 2px solid rgba(255,255,255,.5); cursor: pointer;
  border-radius: 0;
}
.wv-seek-wrap input[type=range]::-webkit-slider-runnable-track {
  background: transparent;
}
/* アップロードプレイヤー専用波形 */
.up-bar-wrap { flex: 1; }
.up-wv-canvas { background: transparent; }

/* ── ソロ再生バー 波形対応 ── */
.stem-solo-bar { align-items: center; }
.stem-solo-bar .wv-seek-wrap { height: 34px; }
.stem-solo-bar .wv-seek-wrap input[type=range]::-webkit-slider-thumb { height: 34px; }

/* sync player 波形 */
.sync-bar-row .wv-seek-wrap { height: 38px; }
.sync-bar-row .wv-seek-wrap input[type=range]::-webkit-slider-thumb { height: 38px; }


.plan-btn-lower {
  background: rgba(192,192,192,.03); border-color: rgba(192,192,192,.08);
  color: rgba(192,192,192,.2); cursor: default;
}

/* ═══════════════ v3.3 追加スタイル ═══════════════ */

/* ── ステムリスト（横長レイアウト対応） ── */
.stem-row-main {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
}
/* インライン波形キャンバス */
.stem-wv-canvas {
  flex: 1; height: 36px; min-width: 80px; max-width: 100%;
  background: transparent; display: block; border-radius: 6px;
  cursor: default; pointer-events: none;
}
/* ソロ再生バー */
.stem-solo-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px 8px; border-top: 1px solid rgba(64,64,255,.1);
  background: rgba(64,64,255,.03);
}
.stem-solo-time {
  font-family: var(--font-mono); font-size: .58rem; color: rgba(192,192,192,.38);
  white-space: nowrap; flex-shrink: 0;
}
.stem-solo-seek {
  -webkit-appearance: none; appearance: none; flex: 1; height: 3px;
  border-radius: 2px; background: rgba(192,192,192,.12); outline: none; cursor: pointer;
  display: none; /* replaced by wv-seek-wrap */
}
.stem-solo-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 11px; border-radius: 50%; background: #8080ff; cursor: pointer;
  box-shadow: 0 0 6px rgba(64,64,255,.6);
}
/* ソロ再生ボタン */
.solo-play-btn { background: rgba(64,64,255,.1); color: rgba(128,128,255,.65); }
.solo-play-btn:hover { background: rgba(64,64,255,.28); color: #a0a0ff; }
.solo-play-btn.playing { background: rgba(64,64,255,.32); color: #c0c0ff; box-shadow: 0 0 10px rgba(64,64,255,.4); }
/* ステム行アクティブ状態 */
.stem-row.in-sync { border-color: rgba(64,64,255,.3); background: rgba(64,64,255,.04); }
.stem-row.in-sync .stem-name { color: #d0d0ff; }
.stem-row.solo-active { border-color: rgba(64,64,255,.5); background: rgba(64,64,255,.07); box-shadow: 0 0 14px rgba(64,64,255,.12); }
.stem-row.solo-active .stem-name { color: #e0e0ff; }

/* ── 1%精度プログレス ── */
.prog-main-wrap { margin-bottom: 2px; }
.prog-pct-label {
  font-family: var(--font-mono); font-size: .86rem; font-weight: 700; color: #c0c0ff;
  letter-spacing: .02em; min-width: 38px; text-align: right;
}
.mb-8 { margin-bottom: 8px; }
.phase-pct {
  display: inline-block; margin-left: 4px;
  font-family: var(--font-mono); font-size: .56rem; color: var(--cyan); opacity: .7;
}
.phase-item svg { display: inline-block; margin-right: 3px; vertical-align: middle; color: var(--success); }

/* ── エフェクトグリッド（Ultra増加対応）── */
.effect-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
@media (max-width: 900px) { .effect-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .effect-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── フォーマットバッジ ── */
.fmt-pro   { background: rgba(64,64,255,.12); border: 1px solid rgba(64,64,255,.25); color: #6060ff; }
.fmt-ultra { background: rgba(255,200,0,.1);  border: 1px solid rgba(255,200,0,.25);  color: var(--gold); }

/* ── デザイン洗練 ── */
/* セクションヘッドをより洗練 */
.section-wrap { border-radius: var(--r-card); }
.sec-head {
  font-size: .68rem; letter-spacing: .06em;
  padding-bottom: 0;
}
/* カード内部の余白を統一 */
.card { padding: 18px; }

/* プランカードのホバー */
.plan-card::after {
  content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.018) 0%, transparent 50%);
}

/* ステムサイズラベル */
.stem-size {
  font-size: .58rem; color: rgba(192,192,192,.25); font-family: var(--font-mono);
  white-space: nowrap; flex-shrink: 0; padding: 0 2px;
}

/* ダウンロードカードがリッチになったので少し広げる */
.main-grid { grid-template-columns: 1fr 360px; }
@media (min-width: 1300px) { .main-grid { grid-template-columns: 1fr 380px; } }

/* ═══════════════ v4.0 追加スタイル ═══════════════ */

/* ── ヘッダーアイコンボタン ── */
.header-icon-btn {
  min-width: 32px; height: 32px; border-radius: 9px;
  background: rgba(192,192,192,.06); border: 1px solid rgba(192,192,192,.12);
  color: rgba(192,192,192,.5); transition: .2s; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.header-icon-btn:hover {
  background: rgba(64,64,255,.12); border-color: rgba(64,64,255,.3);
  color: #8080ff;
}
.header-btn-label {
  font-size: .62rem; font-weight: 600; letter-spacing: .04em;
  font-family: var(--font-body);
}
/* ── ログアウトボタン（赤め） ── */
a[href="/auth/logout"], .logout-btn {
  color: rgba(255, 80, 80, .65) !important;
  border-color: rgba(255, 80, 80, .25) !important;
}
a[href="/auth/logout"]:hover, .logout-btn:hover {
  background: rgba(255, 60, 60, .15) !important;
  color: rgba(255, 120, 120, .9) !important;
  border-color: rgba(255, 80, 80, .45) !important;
}
/* ── 履歴ダウンロードボタン ── */
.hist-dl-row {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px;
}
.hist-dl-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 6px; font-size: .58rem; font-weight: 600;
  border: 1px solid rgba(128,128,255,.3); color: #8080ff;
  text-decoration: none; background: rgba(64,64,255,.06);
  transition: .15s;
}
.hist-dl-btn:hover { background: rgba(64,64,255,.15); }
.hist-dl-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
/* ヘッダーは常にモーダルより下・コンテンツより上 */
#app-header {
  position: sticky !important; top: 0; z-index: 500 !important;
  background: rgba(5,0,30,.95) !important; backdrop-filter: blur(12px);
}

/* ══════════════════════════════════════════════════════════
   スマホ・タブレット対応 (responsive)
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .header-inner { padding: 0 12px; gap: 6px; }
  .logo-name { font-size: .9rem; }
  .logo-sub  { display: none; }
  .header-status { display: none; }
  .header-btn-label { display: none; }   /* アイコンのみ表示 */
  #to-pricing-btn { padding: 6px 10px !important; font-size: .62rem !important; }
  .header-icon-btn { padding: 7px !important; }
  #main-content { padding: 14px 10px 60px; }
  .app-body { flex-direction: column; gap: 0; }
  .section-sidebar { flex-direction: row; overflow-x: auto; gap: 4px;
    padding: 8px 10px; border-right: none; border-bottom: 1px solid rgba(192,192,192,.08);
    min-width: unset; width: 100%; }
  .nav-item { flex-direction: column; min-width: 54px; padding: 6px 8px; }
  .nav-label { font-size: .5rem; }
  .main-grid { grid-template-columns: 1fr !important; }
  .left-col, .right-col { padding: 0; }
  .section-wrap { margin-bottom: 10px; }
  .card { padding: 12px; border-radius: 12px; }
  .stem-row-main { gap: 5px; padding: 8px 10px; }
  .stem-wv-canvas { min-width: 50px; }
  .sync-controls { flex-wrap: wrap; gap: 5px; }
  .upload-player { flex-wrap: wrap; gap: 6px; }
  .up-bar-wrap { width: 100%; order: 3; }
  .up-vol-wrap { display: none; }
  .page-topnav { padding: 0 10px; gap: 6px; }
  .page-tab { padding: 8px 10px; font-size: .68rem; }
  .plans-grid { grid-template-columns: 1fr !important; }
  .tier-grid  { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
  .tier-card  { padding: 10px 6px; }
  .tier-name  { font-size: .72rem; }
  .modal-panel { max-width: 95vw !important; max-height: 88vh; }
  .history-entry { padding: 10px 12px; }
  .hist-name { font-size: .76rem; }
  .how-steps { gap: 10px; }
  .how-step  { flex-direction: column; align-items: flex-start; gap: 5px; }
}
@media (max-width: 400px) {
  .tier-grid { grid-template-columns: 1fr 1fr !important; }
  .stem-size { display: none; }
  .stem-vol-row { display: none; }
}

/* ── フォーム ── */
.form-group { margin-bottom: 12px; }
.form-label {
  display: block; font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(192,192,192,.5); margin-bottom: 5px; font-family: var(--font-body);
}
.form-input {
  width: 100%; padding: 10px 13px; border-radius: 10px; font-size: .82rem;
  background: rgba(192,192,192,.04); border: 1px solid rgba(192,192,192,.14);
  color: #c0c0c0; font-family: var(--font-body); outline: none; transition: .2s;
  -webkit-appearance: none;
}
.form-input::placeholder { color: rgba(192,192,192,.22); }
.form-input:focus {
  border-color: rgba(64,64,255,.5); background: rgba(64,64,255,.04);
  box-shadow: 0 0 0 3px rgba(64,64,255,.1);
}
.form-error {
  min-height: 18px; font-size: .72rem; color: var(--danger);
  margin-bottom: 6px; font-family: var(--font-body);
}
.auth-form { padding-top: 4px; }

/* ── Googleログインボタン ── */
.google-login-btn {
  width: 100%; padding: 12px; border-radius: 12px; font-size: .8rem;
  text-decoration: none; justify-content: center; gap: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: #c0c0c0; transition: .2s; display: flex; align-items: center;
}
.google-login-btn:hover { background: rgba(255,255,255,.1); }

/* ── 区切り ── */
.auth-divider {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 12px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(192,192,192,.1);
}
.auth-divider span {
  font-size: .68rem; color: rgba(192,192,192,.3); white-space: nowrap;
  font-family: var(--font-body);
}

/* ── 認証タブ ── */
.auth-tabs {
  display: flex; gap: 3px; margin-bottom: 14px;
  background: rgba(192,192,192,.04); border-radius: 10px; padding: 3px;
  border: 1px solid rgba(192,192,192,.08);
}
.auth-tab-btn {
  flex: 1; padding: 7px; border-radius: 8px; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: .03em; transition: .2s;
  background: transparent; color: rgba(192,192,192,.4);
}
.auth-tab-btn.active {
  background: rgba(64,64,255,.18); color: #a0a0ff;
  box-shadow: 0 1px 8px rgba(64,64,255,.2);
}
.auth-tab-pane { }

/* ── 設定モーダル ── */
.settings-section {
  margin-bottom: 12px;
  background: rgba(192,192,192,.025);
  border: 1px solid rgba(192,192,192,.08);
  border-radius: 12px; padding: 14px 16px;
}
.settings-section:last-child { margin-bottom: 0; }
.settings-section-title {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  color: rgba(192,192,192,.35); text-transform: uppercase;
  margin-bottom: 12px; font-family: var(--font-body);
}
.settings-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(192,192,192,.05);
  gap: 12px;
}
.settings-row:last-child { border-bottom: none; padding-bottom: 0; }
.settings-label {
  font-size: .76rem; color: rgba(192,192,192,.45); font-family: var(--font-body);
  flex-shrink: 0;
}
.settings-val {
  font-size: .76rem; font-weight: 600; color: rgba(192,192,192,.8);
  font-family: var(--font-mono); text-align: right; word-break: break-all;
}
.settings-note {
  font-size: .76rem; color: rgba(192,192,192,.3); font-family: var(--font-body);
}
.plan-val-lite  { color: rgba(192,192,192,.7) !important; }
.plan-val-pro   { color: #8080ff !important; }
.plan-val-ultra { color: var(--gold) !important; }

/* ── 履歴モーダル ── */
.history-empty {
  text-align: center; padding: 32px 16px;
  color: rgba(192,192,192,.25); font-size: .8rem;
}
.history-empty svg { opacity: .3; margin-bottom: 10px; }
.history-empty p { margin-top: 5px; }
.history-entry {
  border-radius: 11px; border: 1px solid rgba(192,192,192,.07);
  background: rgba(192,192,192,.016); transition: .2s; margin-bottom: 7px;
}
.history-entry:hover { background: rgba(192,192,192,.04); border-color: rgba(192,192,192,.12); }
.hist-row-main {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
}
.hist-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: rgba(64,64,255,.1); border: 1px solid rgba(64,64,255,.18);
  display: flex; align-items: center; justify-content: center; color: #8080ff; margin-top: 1px;
}
.hist-info { flex: 1; min-width: 0; }
.hist-name {
  font-size: .82rem; font-weight: 600; color: rgba(192,192,192,.85);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 5px; font-family: var(--font-body);
}
.hist-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 5px; }
.hist-chip {
  padding: 1px 7px; border-radius: 5px; font-size: .6rem; font-weight: 700;
  letter-spacing: .04em; font-family: var(--font-body);
}
.hist-chip-plain {
  padding: 1px 7px; border-radius: 5px; font-size: .6rem;
  background: rgba(192,192,192,.06); border: 1px solid rgba(192,192,192,.1);
  color: rgba(192,192,192,.45); font-family: var(--font-mono);
}
.hist-chip-lite  { background: rgba(192,192,192,.08); border: 1px solid rgba(192,192,192,.15); color: rgba(192,192,192,.6); }
.hist-chip-pro   { background: rgba(64,64,255,.1); border: 1px solid rgba(64,64,255,.22); color: #8080ff; }
.hist-chip-ultra { background: rgba(255,200,0,.08); border: 1px solid rgba(255,200,0,.2); color: var(--gold); }
.hist-stems { display: flex; gap: 4px; flex-wrap: wrap; }
.hist-stem-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 5px rgba(128,128,255,.4);
}
.hist-time {
  font-size: .58rem; color: rgba(192,192,192,.28); font-family: var(--font-mono);
  white-space: nowrap; flex-shrink: 0; padding-top: 3px;
}

/* ── 全体的なUIの洗練 ── */

/* ヘッダーをより洗練 */
#app-header {
  background: linear-gradient(180deg, rgba(5,5,16,.98) 0%, rgba(8,8,22,.92) 100%);
  border-bottom: 1px solid rgba(64,64,255,.1);
  box-shadow: 0 1px 40px rgba(0,0,0,.5);
}

/* カードのグロー効果を追加 */
.card {
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
  transition: box-shadow .3s;
}
.card:hover {
  box-shadow: 0 4px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(64,64,255,.06);
}

/* セクションのタイトル余白をより適切に */
.section-wrap > .sec-head {
  padding: 0 0 10px 0;
}

/* ページタイトルのサブテキストをより洗練 */
.page-title p {
  color: rgba(192,192,192,.4);
  letter-spacing: .02em;
}

/* ステータスチップをより繊細に */
.status-chip {
  font-size: .65rem;
  letter-spacing: .02em;
}

/* ナビラベルの視認性向上 */
.nav-item.active .nav-label { color: #9090ff; }
.nav-label { font-size: .53rem; }

/* ドロップゾーンのホバーアニメーション改善 */
.dropzone {
  transition: border-color .25s, background .25s, box-shadow .3s;
}

/* 処理ボタンのグロー強化 */
.process-btn {
  background: linear-gradient(135deg, #000070, #0000b0 40%, #3030e0);
  border: 1px solid rgba(64,64,255,.6);
  box-shadow: 0 4px 32px rgba(64,64,255,.2), inset 0 1px 0 rgba(255,255,255,.08);
  transition: box-shadow .3s;
}
.process-btn:not(:disabled):hover {
  box-shadow: 0 4px 48px rgba(64,64,255,.42), 0 0 80px rgba(64,64,255,.15);
}

/* モーダルをより洗練 */
.modal-box {
  box-shadow: 0 32px 80px rgba(0,0,0,.85), 0 0 0 1px rgba(64,64,255,.1), 0 0 60px rgba(64,64,255,.08);
}

/* 使用状況カードの改善 */
#sec-usage {
  border: 1px solid rgba(192,192,192,.07);
  background: var(--card);
  position: relative; overflow: hidden;
}
#sec-usage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(64,64,255,.04) 0%, transparent 60%);
}

/* ステムリストの行間を統一 */
.stem-list { gap: 7px; }

/* ティアカードのグラデーション改善 */
.tier-card.selected {
  background: linear-gradient(135deg, rgba(64,64,255,.1) 0%, rgba(32,32,200,.06) 100%);
}

/* ═══════════════════════════════════════════
   URL入力 / 取り込みモード
═══════════════════════════════════════════ */
.upload-mode-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(192,192,192,.07);
  border-radius: 10px;
  padding: 4px;
}
.upload-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: .75rem;
  font-weight: 600;
  color: rgba(192,192,192,.35);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: .2s;
  font-family: var(--font-body);
  letter-spacing: .02em;
}
.upload-tab:hover { color: rgba(192,192,192,.6); }
.upload-tab.active {
  background: rgba(64,64,255,.14);
  color: rgba(128,128,255,.9);
  box-shadow: 0 1px 8px rgba(64,64,255,.12);
}
.url-tab-pro-badge {
  display: inline-flex; align-items: center;
  padding: 1px 5px; border-radius: 4px;
  font-size: .5rem; font-weight: 700; letter-spacing: .06em;
  background: rgba(64,64,255,.18); border: 1px solid rgba(64,64,255,.3); color: #8080ff;
  margin-left: 4px; vertical-align: middle;
}

.url-input-wrap { padding: 6px 0; }
.url-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(192,192,192,.1);
  border-radius: 12px;
  padding: 10px 12px;
  transition: .25s;
}
.url-input-row:focus-within {
  border-color: rgba(64,64,255,.5);
  box-shadow: 0 0 0 3px rgba(64,64,255,.08);
}
.url-input-icon { flex-shrink: 0; display: flex; align-items: center; }
.url-text-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: rgba(192,192,192,.85);
  font-size: .82rem;
  font-family: var(--font-body);
  min-width: 0;
}
.url-text-input::placeholder { color: rgba(192,192,192,.22); }
.url-fetch-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px !important;
  font-size: .72rem !important;
  border-radius: 8px !important;
  white-space: nowrap;
}
.url-supported-note {
  margin-top: 10px;
  font-size: .72rem;
  color: rgba(192,192,192,.3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.url-spotify-note {
  margin-top: 6px;
  font-size: .7rem;
  color: rgba(255,200,60,.4);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* フッター */
#app-footer {
  border-top: 1px solid rgba(192,192,192,.07);
  padding: 24px 20px 32px;
  text-align: center;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.footer-links a {
  font-size: .73rem;
  color: rgba(128,128,255,.55);
  text-decoration: none;
  transition: .2s;
}
.footer-links a:hover { color: #8080ff; }
.footer-copy {
  font-size: .7rem;
  color: rgba(192,192,192,.2);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   トップページナビゲーション
═══════════════════════════════════════════ */
.page-topnav {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 14px 20px 0;
  position: sticky;
  top: 0;
  z-index: 80;
  background: linear-gradient(to bottom, rgba(3,3,8,.98) 80%, transparent);
  margin-bottom: -8px;
}
.page-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border-radius: 40px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(192,192,192,.35);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
  transition: .2s;
  font-family: var(--font-body);
}
.page-tab:hover {
  color: rgba(192,192,192,.65);
  border-color: rgba(255,255,255,.1);
}
.page-tab.active {
  background: rgba(64,64,255,.14);
  border-color: rgba(64,64,255,.35);
  color: rgba(160,160,255,.95);
  box-shadow: 0 2px 16px rgba(64,64,255,.18), inset 0 1px 0 rgba(255,255,255,.05);
}
.page-view { display: block; }
.page-view[style*="display:none"] { display: none !important; }

/* ═══════════════════════════════════════════
   個別ステム音量スライダー
═══════════════════════════════════════════ */
.stem-vol-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 7px 28px;
  border-top: 1px solid rgba(192,192,192,.04);
}
.stem-vol-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 2px;
  background: rgba(192,192,192,.1);
  outline: none;
  cursor: pointer;
  transition: .2s;
}
.stem-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(160,160,255,.85);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(64,64,255,.5);
  transition: .15s;
}
.stem-vol-slider::-webkit-slider-thumb:hover {
  transform: scale(1.3);
  background: #8080ff;
}
.stem-vol-slider:hover { background: rgba(192,192,192,.2); }
.stem-vol-val {
  font-size: .62rem;
  color: rgba(192,192,192,.3);
  min-width: 30px;
  text-align: right;
  font-family: var(--font-mono);
}

/* ─── 履歴ダウンロードボタン ──────────────────────────────────── */
.hist-dl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.hist-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: .62rem;
  font-weight: 600;
  border: 1px solid rgba(128,128,255,.25);
  color: rgba(128,128,255,.7);
  background: rgba(64,64,255,.07);
  text-decoration: none;
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
.hist-dl-btn:hover { background: rgba(64,64,255,.16); border-color: rgba(128,128,255,.45); }
.hist-dl-zip { border-color: rgba(255,200,0,.22); color: rgba(255,200,0,.65); background: rgba(255,200,0,.06); }
.hist-dl-zip:hover { background: rgba(255,200,0,.14); }
.hist-dl-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ─── 完成曲プレイヤー ──────────────────────────────────────────── */
#finished-player-wrap .section-wrap { margin-top: 0; }

/* ─── ログアウトボタン赤め ──────────────────────────────────────── */
.logout-btn { color: #ff6060 !important; }

/* ─── スマホ対応 ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* ヘッダー */
  .app-header { padding: 0 12px; gap: 8px; }
  .header-left { gap: 6px; }
  .logo-text { font-size: .7rem; letter-spacing: .06em; }
  .header-right { gap: 6px; }
  #settings-btn, #history-btn { padding: 6px 8px; font-size: .6rem; }
  .user-name-chip { display: none; }
  .plan-chip { padding: 3px 7px; font-size: .55rem; }

  /* メインコンテンツ */
  .main-content { padding: 10px 10px 60px; max-width: 100%; }
  .section-wrap { margin-bottom: 12px; }
  .card { padding: 12px; }

  /* ドロップゾーン */
  .upload-dropzone { padding: 18px 12px; }
  .dz-title { font-size: .85rem; }

  /* 分離モード */
  .tier-grid { grid-template-columns: 1fr; gap: 8px; }
  .tier-card { padding: 12px 14px; }

  /* エフェクトグリッド */
  .effect-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .effect-card { padding: 8px 6px; }
  .eff-name { font-size: .65rem; }
  .eff-desc { font-size: .55rem; }

  /* 出力形式 */
  .fmt-wide-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }

  /* ステムリスト */
  .stem-row-main { flex-wrap: wrap; gap: 4px; }
  .stem-name { font-size: .7rem; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stem-wv-canvas { width: 60px !important; }
  .stem-size { display: none; }

  /* 同時再生コントロール */
  .sync-controls { flex-wrap: wrap; gap: 6px; }
  .sync-controls .btn { font-size: .62rem; padding: 6px 10px; }

  /* プランカード */
  .plans-grid { grid-template-columns: 1fr; gap: 14px; }
  .plan-card { padding: 20px 16px; }

  /* ナビゲーション */
  .nav-bar { gap: 0; }
  .nav-item { padding: 10px 8px; font-size: .6rem; }

  /* 使用状況 */
  .usage-header { flex-wrap: wrap; gap: 6px; }

  /* 履歴モーダル */
  .hist-row-main { flex-wrap: wrap; gap: 6px; }
  .hist-time { font-size: .58rem; }
  .hist-dl-row { gap: 4px; }
  .hist-dl-btn { font-size: .58rem; padding: 2px 7px; }

  /* モーダル */
  .modal-box { width: 95vw; max-height: 92vh; margin: 4vw auto; padding: 20px 14px; }

  /* アップロードプレイヤー */
  .upload-player-inner { gap: 6px; }
  .up-seek-block { gap: 4px; }

  /* 同期プレイヤー */
  .sync-player { padding: 10px; }
}

@media (max-width: 400px) {
  .effect-grid { grid-template-columns: 1fr; }
  .fmt-wide-grid { grid-template-columns: 1fr; }
  .stem-wv-canvas { display: none; }
}

/* ─── タブレット対応 ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .main-layout { grid-template-columns: 1fr; }
  .main-sidebar { display: none; }
}

/* ─── ページ全体の最大幅緩和（スマホで横スクロール防止） ───────── */
html, body { max-width: 100vw; overflow-x: hidden; }

/* ─── BPMチップ ──────────────────────────────────────────────── */
.bpm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: .65rem; font-weight: 700;
  background: rgba(64,64,255,.08); border: 1px solid rgba(128,128,255,.22);
  color: rgba(160,160,255,.8);
}
.bpm-dot { width: 6px; height: 6px; border-radius: 50%; background: #8080ff; display: inline-block; }

/* ─── ミキサー ──────────────────────────────────────────────── */
.mixer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}
.mx-channel {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(192,192,192,.07);
  border-radius: 12px; padding: 12px 12px 10px;
  position: relative; overflow: hidden;
}
.mx-stem-name {
  font-size: .7rem; font-weight: 700; margin-bottom: 10px;
  letter-spacing: .04em; text-transform: uppercase;
}
.mx-row {
  display: flex; align-items: center; gap: 5px; margin-bottom: 6px;
}
.mx-label { font-size: .58rem; color: rgba(192,192,192,.35); min-width: 24px; }
.mx-slider {
  flex: 1; height: 3px; -webkit-appearance: none; appearance: none;
  background: rgba(128,128,255,.2); border-radius: 2px; outline: none; cursor: pointer;
}
.mx-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px;
  border-radius: 50%; background: #8080ff; cursor: pointer;
  border: 1px solid rgba(255,255,255,.3);
}
.mx-slider.mx-eq { background: rgba(64,192,255,.2); }
.mx-slider.mx-eq::-webkit-slider-thumb { background: #40c0ff; }
.mx-val { font-size: .56rem; color: rgba(192,192,192,.4); min-width: 30px; text-align: right; font-family: var(--font-mono); }
.mx-comp-label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.mx-comp-label input[type="checkbox"] { width: 12px; height: 12px; accent-color: #8080ff; }
.mx-color-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; opacity: .5; }

/* ─── ブックマーク ──────────────────────────────────────────── */
.bookmark-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(192,192,192,.07);
  background: rgba(255,255,255,.02); margin-bottom: 6px;
  font-size: .7rem;
}
.bm-name  { font-weight: 700; color: rgba(192,192,192,.7); flex: 1; min-width: 80px; }
.bm-tags  { display: flex; gap: 4px; flex-wrap: wrap; }
.bm-tag   {
  padding: 2px 7px; border-radius: 5px; font-size: .58rem;
  background: rgba(128,128,255,.1); border: 1px solid rgba(128,128,255,.2);
  color: rgba(128,128,255,.7);
}
.bm-time     { font-size: .58rem; color: rgba(192,192,192,.25); margin-left: auto; }
.bm-load-btn {
  padding: 3px 10px; border-radius: 6px; font-size: .62rem;
  background: rgba(128,128,255,.12); border: 1px solid rgba(128,128,255,.25);
  color: #8080ff; cursor: pointer; transition: .15s;
}
.bm-load-btn:hover { background: rgba(128,128,255,.24); }
.bm-del-btn {
  padding: 3px 8px; border-radius: 6px; font-size: .62rem;
  background: transparent; border: 1px solid rgba(255,80,80,.2);
  color: rgba(255,80,80,.5); cursor: pointer; transition: .15s;
}
.bm-del-btn:hover { background: rgba(255,80,80,.1); color: #ff6060; }

/* ─── WaveSurfer コンテナ ────────────────────────────────────── */
#ws-upload-container wave { overflow: hidden !important; }
#ws-upload-container ::part(cursor) { width: 2px; }

/* ─── PWAインストールバナー ─────────────────────────────────── */
.pwa-banner {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(20,20,40,.95); border: 1px solid rgba(128,128,255,.3);
  border-radius: 14px; padding: 12px 18px; display: flex; align-items: center;
  gap: 12px; z-index: 1000; backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.5); font-size: .75rem;
  animation: slideUp .4s cubic-bezier(.16,1,.3,1);
}
@keyframes slideUp { from{transform:translateX(-50%) translateY(20px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }
.pwa-banner-text { color: rgba(192,192,192,.8); }
.pwa-banner-btn { padding: 6px 14px; border-radius: 8px; font-size: .7rem; background: rgba(128,128,255,.2); border: 1px solid rgba(128,128,255,.35); color: #a0a0ff; cursor: pointer; }
.pwa-banner-close { color: rgba(192,192,192,.3); cursor: pointer; font-size: .9rem; padding: 0 4px; }

/* ─── スマホ追加調整 ────────────────────────────────────────── */
@media (max-width: 600px) {
  .mixer-grid { grid-template-columns: repeat(2, 1fr); }
  .bookmark-item { flex-direction: column; align-items: flex-start; }
  .bm-time { margin-left: 0; }
}

/* ─── チュートリアル ────────────────────────────────────────────── */
@keyframes tutPulse {
  0%,100% { box-shadow: 0 0 0 9999px rgba(0,0,0,.68), 0 0 0 2px rgba(128,128,255,.5); }
  50%      { box-shadow: 0 0 0 9999px rgba(0,0,0,.68), 0 0 0 5px rgba(128,128,255,.9); }
}
@keyframes tutSlideUp {
  from { opacity:0; transform:translateX(-50%) translateY(16px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ダイアログ本体 - 常に画面下部中央 */
#tut-dialog {
  background: rgba(14,14,30,.97);
  border: 1px solid rgba(128,128,255,.32);
  border-radius: 18px;
  padding: 20px 22px 18px;
  box-shadow: 0 16px 56px rgba(0,0,0,.7), 0 0 0 1px rgba(128,128,255,.08);
  backdrop-filter: blur(16px);
  animation: tutSlideUp .35s cubic-bezier(.16,1,.3,1) forwards;
}
.tut-dlg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.tut-dlg-steps {
  display: flex;
  gap: 5px;
  align-items: center;
}
.tut-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(192,192,192,.18);
  transition: all .25s;
}
.tut-dot.active {
  background: #8080ff;
  width: 18px;
  border-radius: 3px;
}
.tut-dot.done {
  background: rgba(128,128,255,.4);
}
.tut-close-btn {
  background: none;
  border: 1px solid rgba(192,192,192,.12);
  color: rgba(192,192,192,.4);
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: .2s;
}
.tut-close-btn:hover { border-color: rgba(255,80,80,.3); color: rgba(255,80,80,.6); }
.tut-step-label {
  font-size: .58rem;
  color: rgba(128,128,255,.5);
  letter-spacing: .1em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tut-dlg-title {
  font-size: .92rem;
  font-weight: 700;
  color: #d0d0f0;
  margin-bottom: 8px;
  line-height: 1.4;
}
.tut-dlg-text {
  font-size: .78rem;
  color: rgba(192,192,192,.55);
  line-height: 1.8;
  margin-bottom: 18px;
}
.tut-dlg-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.tut-btn {
  padding: 9px 22px;
  border-radius: 9px;
  font-size: .74rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  transition: .2s;
}
.tut-btn-prev {
  background: rgba(255,255,255,.04);
  border-color: rgba(192,192,192,.14);
  color: rgba(192,192,192,.5);
}
.tut-btn-prev:hover { background: rgba(255,255,255,.08); }
.tut-btn-next {
  background: rgba(128,128,255,.2);
  border-color: rgba(128,128,255,.45);
  color: #a0a0ff;
}
.tut-btn-next:hover { background: rgba(128,128,255,.35); }
.tut-btn-done {
  background: rgba(64,208,128,.15);
  border-color: rgba(64,208,128,.4);
  color: #40d080;
}
.tut-btn-done:hover { background: rgba(64,208,128,.28); }

/* プロンプト（初回表示） */
.tut-prompt {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(18,18,40,.97);
  border: 1px solid rgba(128,128,255,.32);
  border-radius: 14px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1100;
  font-size: .76rem;
  color: rgba(192,192,192,.7);
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  animation: tutSlideUp .4s cubic-bezier(.16,1,.3,1) forwards;
}
.tut-prompt-btn {
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(128,128,255,.2);
  border: 1px solid rgba(128,128,255,.4);
  color: #a0a0ff;
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
}
.tut-prompt-close {
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(192,192,192,.12);
  color: rgba(192,192,192,.3);
  font-size: .68rem;
  cursor: pointer;
}


/* ═══════════════════════════════════════════════
   高度な処理設定
═══════════════════════════════════════════════ */
.adv-head { padding-bottom: 2px !important; }
.adv-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid rgba(192,192,192,.06);
}
.adv-row:last-child { border-bottom: none; padding-bottom: 0; }
.adv-label { font-size: .8rem; font-weight: 600; color: rgba(192,192,192,.7); margin-bottom: 3px; }
.adv-desc  { font-size: .65rem; color: rgba(192,192,192,.3); line-height: 1.5; }
.adv-slider {
  width: 110px; flex-shrink: 0;
  -webkit-appearance: none; height: 4px;
  border-radius: 2px; background: rgba(128,128,255,.2);
  accent-color: #8080ff; cursor: pointer;
}
@media (max-width: 480px) {
  .adv-row { flex-direction: column; align-items: flex-start; }
  .adv-slider { width: 100%; }
}
/* トグルスイッチ */
.adv-switch { position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }
.adv-switch input { opacity:0; width:0; height:0; }
.adv-switch-track {
  position:absolute; inset:0; border-radius:22px; cursor:pointer;
  background:rgba(192,192,192,.12); border:1px solid rgba(192,192,192,.15);
  transition:.25s;
}
.adv-switch input:checked + .adv-switch-track {
  background:rgba(128,128,255,.4); border-color:rgba(128,128,255,.55);
}
.adv-switch-track::before {
  content:""; position:absolute; left:3px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%; background:rgba(192,192,192,.6); transition:.25s;
}
.adv-switch input:checked + .adv-switch-track::before { left:21px; background:#a0a0ff; }

/* ═══════════════════════════════════════════════
   バッチ処理
═══════════════════════════════════════════════ */
#batch-file-list { min-height: 32px; }

/* ═══════════════════════════════════════════════
   ポイント
═══════════════════════════════════════════════ */
.points-bal-row { display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
.points-amount  { font-size:2rem; font-weight:800; color:var(--gold); font-family:var(--font-mono); }
.points-unit    { font-size:.8rem; color:rgba(255,200,0,.5); }
.pts-buy-btn {
  padding:6px 14px; border-radius:8px; font-size:.68rem; font-weight:600; cursor:pointer;
  background:rgba(255,200,0,.08); border:1px solid rgba(255,200,0,.2); color:rgba(255,200,0,.7);
  transition:.2s;
}
.pts-buy-btn:hover { background:rgba(255,200,0,.16); }

/* ═══════════════════════════════════════════════
   A/B 比較
═══════════════════════════════════════════════ */
#ab-control-bar button { transition: background .2s; }

/* ═══════════════════════════════════════════════
   共有リンク
═══════════════════════════════════════════════ */
#share-duration { appearance:none; -webkit-appearance:none; cursor:pointer; }

/* ═══════════════════════════════════════════════
   hist-entry（検索フィルタ用）
═══════════════════════════════════════════════ */
.hist-entry { transition: opacity .15s; }