/* =========================================================
   LyricFlow Studio - Premium Dark Theme Stylesheet
   ========================================================= */

:root {
  --bg-main: #0a0c10;
  --bg-panel: #12151d;
  --bg-card: #181d28;
  --bg-hover: #222938;
  --bg-active: #2c3547;
  --border-subtle: #232938;
  --border-glow: #00f0ff44;

  --accent-cyan: #00f0ff;
  --accent-pink: #ff007f;
  --accent-purple: #9d4edd;
  --accent-yellow: #ffd60a;
  --text-main: #f0f4f8;
  --text-muted: #8892b0;
  --text-dim: #505c75;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --timeline-sec-width: 60px; /* 1秒あたりの幅 */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body.dark-theme {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-sans);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* App Layout Grid */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

/* Header */
.app-header {
  height: 54px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  z-index: 100;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  font-size: 1.4rem;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.4));
}

.brand-text h1 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  display: inline-block;
}

.brand-text span {
  color: var(--accent-cyan);
}

.badge-tag {
  font-size: 0.65rem;
  background: #202738;
  color: var(--accent-cyan);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  font-weight: 700;
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.brand-zone {
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 0.75rem;
}

.header-center {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aspect-ratio-selector {
  display: flex;
  background: var(--bg-main);
  border-radius: var(--radius-sm);
  padding: 2px;
  border: 1px solid var(--border-subtle);
}

.ratio-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.ratio-btn.active, .ratio-btn:hover {
  background: var(--bg-card);
  color: var(--accent-cyan);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.header-divider {
  width: 1px;
  height: 20px;
  background: var(--border-subtle);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary {
  background: linear-gradient(135deg, #00d2ff, #0070f3);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 112, 243, 0.35);
}

.btn-primary:hover {
  filter: brightness(1.15);
  box-shadow: 0 4px 14px rgba(0, 210, 255, 0.5);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-subtle);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--text-dim);
}

.btn-outline {
  background: transparent;
  color: var(--accent-cyan);
  border-color: rgba(0, 240, 255, 0.4);
}

.btn-outline:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: var(--accent-cyan);
}

.full-width {
  width: 100%;
  justify-content: center;
}

/* Main Workspace (4 columns) */
.workspace {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 54px - 290px); /* 54px header, 290px timeline */
}

.panel {
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-header {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.panel-header h3 {
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-main);
}

.panel-header .sub-text {
  font-size: 0.7rem;
  color: var(--accent-cyan);
}

/* ============================================================
   Integrated Library Panel (Tabs: Effects, Favorites, Backgrounds)
   ============================================================ */
.library-panel {
  width: 580px;
  min-width: 460px;
  max-width: 680px;
  border-right: 1px solid var(--border-subtle);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #0e1118;
}

/* Tabs Navigation Header */
.library-tabs-header {
  display: flex;
  background: #080a0f;
  border-bottom: 1px solid var(--border-subtle);
  padding: 6px 8px 0;
  gap: 6px;
  flex-shrink: 0;
}

.lib-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.lib-tab-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.04);
}

.lib-tab-btn.active {
  color: #fff;
  background: #0e1118;
  border-color: var(--border-subtle) var(--border-subtle) transparent var(--border-subtle);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4);
}

.lib-tab-btn[data-tab="effects"].active {
  color: var(--accent-cyan);
  border-bottom: 2px solid var(--accent-cyan);
}

.lib-tab-btn[data-tab="favorites"].active {
  color: var(--accent-yellow);
  border-bottom: 2px solid var(--accent-yellow);
}

.lib-tab-btn[data-tab="backgrounds"].active {
  color: #c084fc;
  border-bottom: 2px solid #c084fc;
}

.lib-tab-btn .tab-icon {
  font-size: 0.95rem;
}

/* Tab Panes */
.library-tab-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.pane-action-bar-info {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.pane-info-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
}

.pane-info-desc {
  font-size: 0.68rem;
  color: var(--accent-cyan);
}

/* Background Patterns Grid List */
.bg-palette-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  align-content: start;
}

.bg-pattern-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.bg-pattern-card:hover {
  background: var(--bg-hover);
  border-color: #c084fc;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(192, 132, 252, 0.2);
}

.bg-pattern-card.active {
  background: rgba(192, 132, 252, 0.14);
  border-color: #c084fc;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.35);
}

.bg-card-preview {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: #151922;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.bg-card-info {
  flex: 1;
  min-width: 0;
}

.bg-card-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bg-pattern-card.active .bg-card-title {
  color: #d8b4fe;
}

.bg-card-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Background Pattern Previews */
.pattern-cyber-tunnel { background: linear-gradient(135deg, #090919, #1e1b4b); border-color: rgba(99, 102, 241, 0.4); }
.pattern-retro-grid { background: linear-gradient(135deg, #1a0826, #3b0764); border-color: rgba(217, 70, 239, 0.4); }
.pattern-particle-starfield { background: linear-gradient(135deg, #050510, #0f172a); border-color: rgba(148, 163, 184, 0.4); }
.pattern-audio-equalizer { background: linear-gradient(135deg, #022018, #064e3b); border-color: rgba(16, 185, 129, 0.4); }
.pattern-liquid-gradient { background: linear-gradient(135deg, #1e0533, #4c0519); border-color: rgba(244, 63, 94, 0.4); }
.pattern-matrix-rain { background: linear-gradient(135deg, #021a05, #052e16); border-color: rgba(34, 197, 94, 0.4); }
.pattern-geometric-kaleido { background: linear-gradient(135deg, #1c0529, #2e1065); border-color: rgba(168, 85, 247, 0.4); }
.pattern-floating-bokeh { background: linear-gradient(135deg, #1c1917, #292524); border-color: rgba(251, 191, 36, 0.4); }
.pattern-vhs-scanlines { background: linear-gradient(135deg, #111827, #1f2937); border-color: rgba(156, 163, 175, 0.4); }
.pattern-speed-lines { background: linear-gradient(135deg, #261205, #451a03); border-color: rgba(245, 158, 11, 0.4); }
.pattern-city-night { background: linear-gradient(135deg, #050515, #1e1b4b); border-color: rgba(99, 102, 241, 0.4); }
.pattern-sakura { background: linear-gradient(135deg, #1f0d1a, #501138); border-color: rgba(244, 114, 182, 0.4); }
.pattern-rainy { background: linear-gradient(135deg, #081420, #0c2738); border-color: rgba(56, 189, 248, 0.4); }
.pattern-prism { background: linear-gradient(135deg, #18092a, #3b1359); border-color: rgba(216, 180, 254, 0.4); }
.pattern-glitch-stream { background: linear-gradient(135deg, #150015, #002222); border-color: rgba(34, 211, 238, 0.4); }
.pattern-aurora { background: linear-gradient(135deg, #021a1a, #063d2e); border-color: rgba(52, 211, 153, 0.4); }
.pattern-halftone { background: linear-gradient(135deg, #240a16, #450a0a); border-color: rgba(251, 146, 60, 0.4); }
.pattern-nebula { background: linear-gradient(135deg, #14052b, #2e0854); border-color: rgba(168, 85, 247, 0.4); }
.pattern-underwater { background: linear-gradient(135deg, #02182b, #003554); border-color: rgba(14, 165, 233, 0.4); }
.pattern-fireworks { background: linear-gradient(135deg, #1a0510, #380b20); border-color: rgba(244, 63, 94, 0.4); }

/* Procedural Canvas Layer (Inside Preview Viewport) */
.bg-procedural-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

/* Favorites Action Bar & List */
.favorites-action-bar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.favorites-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  align-content: start;
}

.favorite-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.favorite-card:hover {
  border-color: var(--accent-yellow);
  background: var(--bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 214, 10, 0.18);
}

.fav-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fav-card-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fav-card-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-fav-apply {
  font-size: 0.65rem;
  padding: 2px 8px;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--accent-cyan);
  border-radius: 3px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.15s;
}

.btn-fav-apply:hover {
  background: var(--accent-cyan);
  color: #000;
}

.btn-fav-del {
  font-size: 0.7rem;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
}

.btn-fav-del:hover {
  color: var(--accent-pink);
  background: rgba(255, 0, 127, 0.15);
}

.fav-card-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.fav-badge {
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
  line-height: 1.2;
}

.fav-badge.badge-in {
  background: rgba(0, 240, 255, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(0, 240, 255, 0.25);
}

.fav-badge.badge-out {
  background: rgba(255, 0, 127, 0.12);
  color: #f43f5e;
  border: 1px solid rgba(255, 0, 127, 0.25);
}

.fav-badge.badge-mode {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.fav-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--text-muted);
}

.fav-color-chip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-block;
  vertical-align: middle;
}

.empty-fav-hint {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.75rem;
  padding: 24px 10px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-top: 10px;
}

.effect-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  align-content: start;
}

.effect-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: grab;
  transition: all 0.2s ease;
}

.effect-card:hover {
  border-color: var(--accent-cyan);
  background: var(--bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0, 240, 255, 0.18);
}

.effect-card:active {
  cursor: grabbing;
}

.effect-preview {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: #0f1218;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95rem;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* Card mini previews */
.bounce-preview { color: #00f0ff; }
.kinetic-preview { color: #ff007f; }
.glitch-preview { color: #00ff66; text-shadow: 1px 0 #ff0055, -1px 0 #00ffff; }
.neon-preview { color: #ffff00; text-shadow: 0 0 6px #ffff00; }
.typewriter-preview { font-family: monospace; color: #ff9900; }
.flip-preview { color: #a855f7; }
.zoom-preview { color: #f43f5e; font-size: 1.1rem; }
.wave-preview { color: #38bdf8; }

.effect-info {
  flex: 1;
  min-width: 0;
}

.effect-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.effect-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  margin-top: 2px;
}

.drag-handle {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.batch-apply-section {
  padding: 10px;
  border-top: 1px solid var(--border-subtle);
  position: relative;
}

.batch-btn-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-icon {
  padding: 6px 10px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.batch-config-panel {
  margin-top: 8px;
  padding: 10px 12px;
  background: #0d111a;
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 240, 255, 0.15);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fadeIn 0.15s ease-out;
}

.batch-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.batch-config-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.btn-close-sm {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 4px;
  transition: color 0.2s;
}

.btn-close-sm:hover {
  color: #fff;
}

.batch-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}

.config-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
}

.config-check-label input[type="checkbox"] {
  accent-color: var(--accent-cyan);
  cursor: pointer;
  width: 13px;
  height: 13px;
}

.config-check-label:hover span {
  color: var(--accent-cyan);
}

.batch-config-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 6px;
}

.btn-link-sm {
  background: transparent;
  border: none;
  color: var(--accent-cyan);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.btn-link-sm:hover {
  text-decoration: underline;
  color: #fff;
}

/* Center: Preview Stage */
.preview-panel {
  flex: 1;
  background: #07080b;
  display: flex;
  flex-direction: column;
}

.viewport-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}

.preview-viewport {
  position: relative;
  background: #000;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px; /* 3D空間深度を劇的に強化 */
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.preview-viewport.ratio-16-9 {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: min(860px, calc((100vh - 380px) * 16 / 9));
  height: auto;
  max-height: calc(100vh - 380px);
}

.preview-viewport.ratio-9-16 {
  aspect-ratio: 9 / 16;
  height: 100%;
  max-height: calc(100vh - 380px);
  width: auto;
  max-width: calc((100vh - 380px) * 9 / 16);
}

.preview-viewport.ratio-1-1 {
  aspect-ratio: 1 / 1;
  height: 100%;
  max-height: calc(100vh - 380px);
  width: auto;
  max-width: calc(100vh - 380px);
}

/* Background Layers */
.bg-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bg-video-element {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
  display: none;
}

.bg-cyber-grid {
  background: 
    linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
    radial-gradient(ellipse at center, #111a2e 0%, #05070a 80%);
  background-size: 30px 30px, 30px 30px, 100% 100%;
}

.bg-deep-space {
  background: radial-gradient(circle at 50% 50%, #1a0b2e 0%, #000000 90%);
}

.bg-neon-gradient {
  background: linear-gradient(135deg, #180327 0%, #061e38 50%, #050b14 100%);
}

.bg-minimal-dark {
  background: #11141a;
}

.bg-pure-black {
  background: #000000;
}

#visualizerCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Lyric Stage (Dual Lane Overlap Support) */
.lyric-stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  transform-style: preserve-3d;
}

.lyric-lane-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  pointer-events: none;
  transform-style: preserve-3d;
}

.lyric-stage.position-top, .lyric-lane-stage.position-top {
  align-items: flex-start;
  padding-top: 40px;
}

.lyric-stage.position-center, .lyric-lane-stage.position-center {
  align-items: center;
  justify-content: center;
}

.lyric-stage.position-bottom, .lyric-lane-stage.position-bottom {
  align-items: flex-end;
  padding-bottom: 40px;
}

.lyric-stage.position-left, .lyric-lane-stage.position-left {
  align-items: center;
  justify-content: flex-start;
  padding-left: 60px;
}

.lyric-stage.position-right, .lyric-lane-stage.position-right {
  align-items: center;
  justify-content: flex-end;
  padding-right: 60px;
}

/* 縦書きモード (y4ma3 空中分解 & 和風モダン) */
.lyric-text-container.writing-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.16em;
  line-height: 1.6;
  max-height: 85%;
  max-width: 90%;
  display: inline-block;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

.lyric-text-container.writing-vertical .char-unit,
.lyric-text-container.writing-vertical span {
  display: inline-block;
}

.lyric-text-container {
  text-align: center;
  font-weight: 900;
  line-height: 1.25;
  max-width: 92%;
  max-height: 85%;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.95));
  transform-origin: center center;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  transition: font-size 0.15s ease;
}

.demo-placeholder-text {
  color: rgba(255, 255, 255, 0.35);
  font-size: 1.2rem;
  font-weight: 400;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-radius: 8px;
}

/* Playback Control Bar */
.playback-bar {
  height: 48px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
}

.play-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ctrl-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ctrl-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-cyan);
}

.ctrl-btn.play-main {
  width: 38px;
  height: 38px;
  background: var(--accent-cyan);
  color: #000;
  font-weight: bold;
  border: none;
}

.ctrl-btn.play-main:hover {
  filter: brightness(1.2);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.time-readout {
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--accent-cyan);
  font-weight: bold;
  background: var(--bg-main);
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

.time-readout span:last-child {
  color: var(--text-muted);
}

.volume-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-main);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.volume-controls .mute-btn {
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.volume-controls .mute-btn:hover {
  filter: brightness(1.2);
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 75px;
  height: 4px;
  background: #2a2e39;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.6);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.volume-label {
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 32px;
  text-align: right;
}

.bg-style-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Middle: Inspector Panel (エフェクトライブラリの右横) */
.inspector-panel {
  width: 290px;
  border-right: 1px solid var(--border-subtle);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.inspector-action-bar {
  padding: 10px 12px;
  background: #0e1117;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.action-btn-row {
  display: flex;
  gap: 8px;
}

.action-btn-row .file-upload-btn {
  font-size: 0.75rem;
  padding: 6px 10px;
}

.inspector-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.property-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.property-group label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.property-row {
  display: flex;
  gap: 10px;
}

.flex-1 {
  flex: 1;
}

.styled-textarea {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  resize: none;
  outline: none;
}

.styled-textarea:focus {
  border-color: var(--accent-cyan);
}

.active-effect-pill {
  display: inline-block;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(255, 0, 127, 0.15));
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
}

.styled-select {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  outline: none;
  cursor: pointer;
}

.styled-select:focus {
  border-color: var(--accent-cyan);
}

.range-with-val {
  display: flex;
  align-items: center;
  gap: 8px;
}

.range-with-val input[type="range"] {
  flex: 1;
  accent-color: var(--accent-cyan);
}

.range-with-val span {
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--text-muted);
  width: 40px;
  text-align: right;
}

.styled-color-picker {
  -webkit-appearance: none;
  border: 1px solid var(--border-subtle);
  width: 100%;
  height: 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--bg-card);
  padding: 2px;
}

.styled-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.styled-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}

.quick-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}

.chip {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.chip:hover {
  border-color: var(--accent-pink);
  color: #fff;
  background: rgba(255, 0, 127, 0.1);
}

/* =========================================================
   Bottom: Timeline Area
   ========================================================= */
.timeline-section {
  height: 420px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.timeline-header {
  height: 28px;
  background: #0f1218;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 0 14px;
}

.timeline-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.timeline-zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.timeline-info-badge {
  font-size: 0.68rem;
  color: var(--accent-cyan);
  margin-left: auto;
  white-space: nowrap;
}

.zoom-label {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.zoom-value {
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-cyan);
  background: rgba(0, 240, 255, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(0, 240, 255, 0.2);
  min-width: 48px;
  text-align: center;
}

.btn-zoom {
  background: #1a1e27;
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-zoom:hover {
  background: #252a36;
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.btn-zoom-fit {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(168, 85, 247, 0.15));
  border-color: rgba(0, 240, 255, 0.3);
  color: #e2e8f0;
}

.btn-zoom-fit:hover {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), rgba(168, 85, 247, 0.3));
  border-color: var(--accent-cyan);
}

.timeline-container {
  position: relative;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  background: #0b0d13;
}

/* Timeline Ruler */
.timeline-ruler {
  height: 22px;
  position: relative;
  background: #11151e;
  border-bottom: 1px solid var(--border-subtle);
}

/* Top Horizontal Scrollbar (秒数直下の横スクロールバー) */
.timeline-top-scrollbar {
  position: sticky;
  left: 0;
  width: 100%;
  height: 16px;
  background: #0f131c;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
  z-index: 28;
  display: flex;
}

.timeline-top-scrollbar-track {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}

.top-scrollbar-header {
  width: 100px;
  height: 100%;
  background: #131720;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.top-scrollbar-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: -0.2px;
  user-select: none;
}

.top-scrollbar-viewport {
  flex: 1;
  overflow-x: scroll;
  overflow-y: hidden;
  height: 16px;
  scrollbar-width: thin;
  scrollbar-color: #00d2ff #090c13;
}

.top-scrollbar-viewport::-webkit-scrollbar {
  height: 12px;
  background: #090c13;
}

.top-scrollbar-viewport::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}

.top-scrollbar-viewport::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #00d2ff 0%, #7928ca 100%);
  border-radius: 6px;
  border: 2px solid #0b0d13;
  cursor: grab;
}

.top-scrollbar-viewport::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #00f0ff 0%, #c084fc 100%);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.top-scrollbar-viewport::-webkit-scrollbar-thumb:active {
  cursor: grabbing;
}

.top-scrollbar-content {
  height: 1px;
}

.ruler-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--text-dim);
  font-size: 0.65rem;
  color: var(--text-muted);
  padding-left: 4px;
  pointer-events: none;
}

.timeline-end-marker {
  position: absolute;
  top: 0;
  height: 250px;
  width: 1px;
  border-left: 1px dashed rgba(239, 68, 68, 0.7);
  pointer-events: none;
  z-index: 25;
}

.timeline-end-marker::before {
  content: 'END';
  position: absolute;
  top: 3px;
  left: 3px;
  font-size: 0.58rem;
  font-weight: 800;
  color: #ef4444;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 0 3px;
  border-radius: 2px;
}

/* Playhead */
.timeline-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--accent-cyan);
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 0 8px var(--accent-cyan);
}

.playhead-handle {
  position: absolute;
  top: 0;
  left: -6px;
  width: 14px;
  height: 12px;
  background: var(--accent-cyan);
  clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
  cursor: ew-resize;
  pointer-events: auto;
}

.playhead-line {
  position: absolute;
  top: 12px;
  bottom: 0;
  width: 2px;
  background: var(--accent-cyan);
}

/* Tracks */
.track-row {
  display: flex;
  height: 60px;
  border-bottom: 1px solid var(--border-subtle);
}

.track-row.video-track {
  height: 60px;
}

.track-row.lyric-track {
  height: 72px;
}

.track-row.audio-track {
  height: 64px;
}

.track-row.lyric-lane1 {
  background: rgba(0, 240, 255, 0.02);
}

.track-row.lyric-lane2 {
  background: rgba(255, 0, 127, 0.02);
}

.track-title-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.track-lane-badge {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  line-height: 1.1;
  width: fit-content;
}

.lyric-lane1 .track-lane-badge {
  background: rgba(0, 240, 255, 0.15);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.lyric-lane2 .track-lane-badge {
  background: rgba(255, 0, 127, 0.15);
  color: var(--accent-pink);
  border: 1px solid rgba(255, 0, 127, 0.3);
}

.phrase-block.lane-1 {
  border-left: 3px solid var(--accent-pink);
  background: rgba(255, 0, 127, 0.08);
}
.phrase-block.lane-1:hover {
  border-color: var(--accent-pink);
}
.phrase-block.lane-1.selected {
  border-color: var(--accent-pink);
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.4);
}

.track-header {
  width: 100px;
  background: #131720;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
  position: sticky;
  left: 0;
  z-index: 20;
}

.track-title-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-add-clip {
  padding: 2px 6px;
  font-size: 0.65rem;
  font-weight: 600;
  background: rgba(0, 240, 255, 0.15);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-add-clip:hover {
  background: rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.track-content {
  position: relative;
  flex: 1;
  height: 100%;
}

/* Video Track */
.video-track {
  height: 56px;
  background: rgba(14, 18, 28, 0.6);
}

.video-clip-block {
  position: absolute;
  top: 4px;
  height: 46px;
  background: linear-gradient(135deg, rgba(14, 80, 160, 0.6), rgba(88, 28, 135, 0.6));
  border: 1px solid #38bdf8;
  border-radius: 6px;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: border-color 0.2s, box-shadow 0.2s;
  user-select: none;
}

.video-clip-block:hover {
  border-color: #00f0ff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.4);
}

.video-clip-block.selected {
  border-color: #ffd60a;
  box-shadow: 0 0 14px rgba(255, 214, 10, 0.5);
  background: linear-gradient(135deg, rgba(30, 90, 180, 0.7), rgba(120, 40, 160, 0.7));
}

.video-clip-block.playing-active {
  border-color: #c084fc;
  box-shadow: 0 0 16px rgba(192, 132, 252, 0.6);
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.85), rgba(147, 51, 234, 0.75));
}

.video-clip-block:active {
  cursor: grabbing;
}

.video-clip-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.video-clip-thumb {
  font-size: 1rem;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.5));
}

.video-clip-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.video-clip-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-clip-range {
  font-size: 0.62rem;
  font-family: monospace;
  color: #94a3b8;
}

.video-clip-delete {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  border-radius: 4px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.video-clip-delete:hover {
  background: #ef4444;
  color: #fff;
}

.audio-track {
  height: 48px;
}

.waveform-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Phrase Block on Timeline (上下幅拡大 & お気に入り追加対応) */
.lyric-track {
  height: 110px;
  background: rgba(18, 22, 32, 0.45);
}

.phrase-block {
  position: absolute;
  top: 8px;
  height: 94px;
  background: linear-gradient(180deg, #1e2638, #161c2b);
  border: 1px solid #36415d;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 8px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.phrase-block:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.phrase-block.selected {
  border: 2px solid var(--accent-cyan);
  background: linear-gradient(180deg, #243049, #1c253b);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.4);
}

.phrase-block.active-phrase {
  border-color: var(--accent-pink);
  box-shadow: 0 0 16px rgba(255, 0, 127, 0.55);
}

/* Drop target highlight */
.phrase-block.drag-over {
  border: 2px dashed var(--accent-yellow) !important;
  background: rgba(255, 214, 10, 0.2) !important;
  transform: scale(1.02);
}

/* Phrase Block Header (テキスト ＋ お気に入りボタン) */
.phrase-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.phrase-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* タイムラインの「⭐ お気に入り追加」ボタン */
.btn-phrase-fav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 214, 10, 0.14);
  border: 1px solid rgba(255, 214, 10, 0.35);
  color: #fbbf24;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  line-height: 1.2;
}

.btn-phrase-fav:hover {
  background: #fbbf24;
  color: #000;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  transform: scale(1.05);
}

/* バッジ行 (IN, OUT, 書字方向) */
.phrase-badge-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.phrase-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--text-dim);
}

.phrase-time {
  font-size: 0.65rem;
  color: var(--text-dim);
  font-family: monospace;
}

.phrase-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  color: var(--text-muted);
}

.phrase-effect-badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 240, 255, 0.2);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 240, 255, 0.4);
  white-space: nowrap;
}

/* Resize Handles (重複・尺調整用) */
.resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9px;
  cursor: ew-resize;
  z-index: 10;
  transition: background 0.15s ease;
}
.resize-handle.left {
  left: 0;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px 0 0 4px;
}
.resize-handle.right {
  right: 0;
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 0 4px 4px 0;
}
.resize-handle:hover {
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
}
.phrase-block.lane-1 .resize-handle:hover {
  background: var(--accent-pink);
  box-shadow: 0 0 8px var(--accent-pink);
}

/* フレーズブロックのドラッグカーソル */
.phrase-block {
  cursor: grab;
  user-select: none;
}
.phrase-block:active {
  cursor: grabbing;
}

/* クイック重複調整ボタン群 */
.overlap-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.btn-overlap-quick {
  flex: 1;
  background: #191e2b;
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #7dd3fc;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-overlap-quick:hover {
  background: rgba(0, 240, 255, 0.2);
  color: #fff;
  border-color: var(--accent-cyan);
}

/* =========================================================
   Effect Palette Tabs
   ========================================================= */
.palette-tabs {
  display: flex;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border-subtle);
  padding: 4px 8px 0;
  gap: 4px;
}

.palette-tab-btn {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.palette-tab-btn.active {
  background: var(--bg-card);
  color: var(--accent-cyan);
  border-color: var(--border-subtle);
}

.palette-tab-btn.tab-out.active {
  color: var(--accent-pink);
}

.phrase-effect-badges {
  display: flex;
  gap: 4px;
}

.phrase-badge-in {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 240, 255, 0.2);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 240, 255, 0.4);
}

.phrase-badge-out {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 0, 127, 0.2);
  color: var(--accent-pink);
  border: 1px solid rgba(255, 0, 127, 0.4);
}

/* =========================================================
   Lyric Motion Animations - IN & OUT
   ========================================================= */

/* =========================================================
   Lyric Motion Animations - DYNAMIC IN & OUT
   ========================================================= */

/* =========================================================
   After Effects / 文字PV 特化テンプレート (13種)
   参考: 『リリックモーションの作り方、全部見せます。』
   ========================================================= */

/* 1. 一文字バラバラ飛び込み (Scatter Chars In) */
.anim-in-scatter-chars {
  display: inline-block;
  animation: scatterCharsIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.char-stagger {
  display: inline-block;
  animation: charFlyIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes charFlyIn {
  0% {
    opacity: 0;
    transform: translateY(80px) rotate(45deg) scale(0.2);
    filter: blur(8px);
  }
  70% {
    opacity: 1;
    transform: translateY(-8px) rotate(-5deg) scale(1.1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

/* 2. 文字伸ばしストレッチ出現 (Stretch & Snap In) */
.anim-in-stretch-snap {
  animation: stretchSnapIn 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes stretchSnapIn {
  0% {
    opacity: 0;
    transform: scaleX(3.5) scaleY(0.2) skewX(-30deg);
    letter-spacing: 20px;
    filter: blur(10px);
  }
  60% {
    opacity: 1;
    transform: scaleX(0.85) scaleY(1.3) skewX(5deg);
    letter-spacing: 0px;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) skewX(0);
    letter-spacing: 2px;
  }
}

/* 3. 背景帯シェイプ連動 (Shape Box Reveal) */
.anim-in-shape-box {
  position: relative;
  display: inline-block;
  padding: 4px 16px;
  background: linear-gradient(90deg, #ff007f, #7928ca);
  color: #fff;
  border-radius: 4px;
  animation: shapeBoxIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: 0 4px 20px rgba(255, 0, 127, 0.5);
}
@keyframes shapeBoxIn {
  0% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* 4. ボヨンと弾むゼリー変形 (Elastic Bounce In) */
.anim-in-elastic-bounce {
  animation: elasticBounceIn 0.65s cubic-bezier(0.25, 1.4, 0.5, 1) forwards;
}
@keyframes elasticBounceIn {
  0% { opacity: 0; transform: scale(0.1) translateY(100px); }
  45% { opacity: 1; transform: scaleX(1.4) scaleY(0.6) translateY(-25px); }
  65% { transform: scaleX(0.8) scaleY(1.2) translateY(8px); }
  85% { transform: scaleX(1.1) scaleY(0.95) translateY(-3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 5. 色ズレ・RGBグリッチ (RGB Split In) */
.anim-in-rgb-split {
  animation: rgbSplitIn 0.5s ease forwards;
}
@keyframes rgbSplitIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
    text-shadow: -25px 0 #ff0055, 25px 0 #00ffff;
    filter: blur(6px);
  }
  40% {
    opacity: 1;
    transform: scale(1.05);
    text-shadow: 15px -8px #ff0055, -15px 8px #00ffff, 0 10px #00ff66;
  }
  75% {
    text-shadow: -4px 2px #ff0055, 4px -2px #00ffff;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    text-shadow: -1px 0 #ff0055, 1px 0 #00ffff;
  }
}

/* 6. 文字並べリピーター帯 (Repeat Marquee In) */
.anim-in-repeat-marquee {
  animation: marqueeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards, marqueeLoop 4s linear 0.5s infinite;
}
@keyframes marqueeIn {
  0% { opacity: 0; transform: translateY(-40px) scale(0.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes marqueeLoop {
  0% { transform: translateX(0); }
  50% { transform: translateX(-15px); }
  100% { transform: translateX(0); }
}

/* 7. 3Dアイソメトリック傾き (Isometric 3D In) */
.anim-in-isometric-3d {
  animation: iso3DIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes iso3DIn {
  0% {
    opacity: 0;
    transform: rotateX(55deg) rotateY(-20deg) rotateZ(30deg) translateZ(-800px);
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    transform: rotateX(25deg) rotateY(-15deg) rotateZ(-5deg) translateZ(0);
    filter: blur(0);
    text-shadow: 2px 4px 0 #ff007f, 4px 8px 0 #7928ca;
  }
}

/* 8. 激震ウィグル振動 (Jitter Wiggle In) */
.anim-in-jitter-wiggle {
  animation: jitterIn 0.4s ease forwards, jitterLoop 0.08s infinite 0.4s;
}
@keyframes jitterIn {
  0% { opacity: 0; transform: scale(1.8); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes jitterLoop {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-3px, 2px) rotate(-1deg); }
  50% { transform: translate(2px, -3px) rotate(1.5deg); }
  75% { transform: translate(-2px, -1px) rotate(-0.5deg); }
  100% { transform: translate(1px, 2px) rotate(1deg); }
}

/* 9. 曲線パスうねり (S-Curve Wave In) */
.anim-in-curve-wave {
  animation: curveWaveIn 0.6s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
@keyframes curveWaveIn {
  0% {
    opacity: 0;
    transform: translateX(-60vw) translateY(50px) rotate(-18deg) skewX(-20deg);
  }
  50% {
    transform: translateX(10vw) translateY(-20px) rotate(5deg) skewX(5deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0deg) skewX(0);
  }
}

/* 10. 円形軌道周回 (Circle Orbit In) */
.anim-in-circle-orbit {
  animation: circleOrbitIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes circleOrbitIn {
  0% {
    opacity: 0;
    transform: rotate(-180deg) translateX(160px) rotate(180deg) scale(0.2);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) translateX(0) rotate(0deg) scale(1);
  }
}

/* 11. 斜め歪みシアー (Skew Shear In) */
.anim-in-skew-shear {
  animation: skewShearIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes skewShearIn {
  0% {
    opacity: 0;
    transform: skewX(-45deg) scaleY(0.3) translateY(60px);
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    transform: skewX(15deg) scaleY(1.1) translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: skewX(0deg) scaleY(1) translateY(0);
  }
}

/* 12. 点滅・ストロボネオン点灯 (Strobe Flicker In) */
.anim-in-strobe-flicker {
  animation: strobeFlickerIn 0.6s ease-out forwards;
}
@keyframes strobeFlickerIn {
  0% { opacity: 0; filter: brightness(0.1); }
  10% { opacity: 0.9; filter: brightness(3); }
  20% { opacity: 0.1; filter: brightness(0.2); }
  35% { opacity: 1; filter: brightness(4) drop-shadow(0 0 30px #fff); }
  50% { opacity: 0.2; }
  65% { opacity: 0.8; filter: brightness(2); }
  80% { opacity: 0.4; }
  100% { opacity: 1; filter: brightness(1.2) drop-shadow(0 0 15px currentColor); }
}

/* 13. 巨大ズームイン (Mega Zoom In) */
.anim-in-mega-zoom {
  animation: megaZoomIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes megaZoomIn {
  0% { opacity: 0; transform: scale(8); filter: blur(30px); }
  60% { opacity: 1; transform: scale(0.95); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}


/* --- 文字PV 特化 OUT (退場) モーション --- */

/* バラバラ四散 (Scatter Out) */
.anim-out-scatter-out {
  animation: scatterOut 0.45s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes scatterOut {
  0% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-80px) rotate(-35deg) scale(0.2); filter: blur(12px); }
}

/* 縦横ビヨーン伸長消滅 (Stretch Out) */
.anim-out-stretch-out {
  animation: stretchOut 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes stretchOut {
  0% { opacity: 1; transform: scale(1); }
  30% { transform: scaleX(0.7) scaleY(1.3); }
  100% { opacity: 0; transform: scaleX(4) scaleY(0.05) skewX(40deg); filter: blur(15px); }
}

/* ネオンショート・プツン消滅 (Flicker Die Out) */
.anim-out-flicker-die {
  animation: flickerDieOut 0.4s ease-in forwards;
}
@keyframes flickerDieOut {
  0% { opacity: 1; filter: brightness(1.2); }
  20% { opacity: 0.1; filter: brightness(0.2); }
  40% { opacity: 0.9; filter: brightness(3); }
  60% { opacity: 0; }
  75% { opacity: 0.6; filter: brightness(1.5); }
  100% { opacity: 0; filter: brightness(0); transform: scale(0.95); }
}

/* シェイプ帯と一緒にワイプ消滅 (Shape Wipe Out) */
.anim-out-shape-wipe {
  animation: shapeWipeOut 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes shapeWipeOut {
  0% { opacity: 1; transform: scaleX(1); transform-origin: right center; }
  100% { opacity: 0; transform: scaleX(0); transform-origin: right center; }
}

/* 激震フェードアウト (Jitter Out) */
.anim-out-jitter-out {
  animation: jitterLoop 0.08s infinite, jitterFade 0.4s ease-in forwards;
}
@keyframes jitterFade {
  0% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(12px) brightness(2); transform: scale(1.4); }
}

/* 1. 画面左外から超爆速突進 (Drive-In Left) */
.anim-in-drive-left {
  animation: driveInLeft 0.55s cubic-bezier(0.12, 1, 0.2, 1) forwards;
}
@keyframes driveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-120vw) skewX(-40deg) scale(0.8);
    filter: blur(20px) brightness(3);
    letter-spacing: 25px;
  }
  65% {
    opacity: 1;
    transform: translateX(3vw) skewX(8deg) scale(1.08);
    filter: blur(0px) brightness(1.3);
    letter-spacing: 2px;
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0deg) scale(1);
    filter: blur(0px) brightness(1);
    letter-spacing: 0px;
  }
}

/* 2. 3D空間奥底ワープ出現 (Warp-3D In) */
.anim-in-warp-3d {
  animation: warp3DIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes warp3DIn {
  0% {
    opacity: 0;
    transform: translateZ(-2500px) rotateX(75deg) rotateY(-60deg) scale(0.1);
    filter: blur(25px) contrast(3);
  }
  70% {
    opacity: 1;
    transform: translateZ(100px) rotateX(-10deg) rotateY(10deg) scale(1.15);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) rotateX(0deg) rotateY(0deg) scale(1);
    filter: blur(0);
  }
}

/* 3. 超天空メテオ爆撃 (Meteor Smash) */
.anim-in-meteor-smash {
  animation: meteorSmashIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25) forwards;
}
@keyframes meteorSmashIn {
  0% {
    opacity: 0;
    transform: translateY(-120vh) scale(3) rotate(-15deg);
    filter: blur(15px);
  }
  75% {
    opacity: 1;
    transform: translateY(10px) scale(0.92) rotate(2deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* 4. バウンスポップ (大迫力化) */
.anim-in-bounce-pop {
  animation: bouncePopDynamic 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.35) forwards;
}
@keyframes bouncePopDynamic {
  0% { opacity: 0; transform: scale(0.05) translateY(120px); filter: blur(8px); }
  60% { opacity: 1; transform: scale(1.25) translateY(-20px); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* 5. キネティックスライド (画面横断ダイナミック) */
.anim-in-kinetic-slide {
  animation: kineticSlideDynamic 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes kineticSlideDynamic {
  0% { opacity: 0; transform: translateX(-80vw) skewX(-35deg) scaleX(1.8); letter-spacing: 20px; }
  70% { opacity: 1; transform: translateX(20px) skewX(8deg) scaleX(0.95); }
  100% { opacity: 1; transform: translateX(0) skewX(0) scaleX(1); letter-spacing: 2px; }
}

/* 6. サイバーグリッチ (大暴走破壊スライス) */
.anim-in-cyber-glitch {
  animation: glitchDynamic 0.55s ease forwards;
}
@keyframes glitchDynamic {
  0% { transform: translate(-80px, 40px) skewX(30deg) scale(1.4); opacity: 0; text-shadow: 20px 0 #ff007f, -20px 0 #00f0ff; filter: blur(8px); }
  25% { transform: translate(60px, -30px) skewX(-25deg) scale(0.8); opacity: 1; text-shadow: -15px 0 #ff007f, 15px 0 #00f0ff; }
  50% { transform: translate(-30px, 15px) skewX(15deg); text-shadow: 10px 0 #00ff66, -10px 0 #ff007f; }
  75% { transform: translate(10px, -5px) skewX(-5deg); text-shadow: 4px 0 #ff007f, -4px 0 #00f0ff; }
  100% { transform: translate(0); opacity: 1; text-shadow: 0 0 16px rgba(0, 240, 255, 0.9); }
}

/* 7. ネオンパルス (爆光フラッシュ) */
.anim-in-neon-glow {
  animation: neonDynamic 0.6s ease-out forwards;
}
@keyframes neonDynamic {
  0% { opacity: 0; transform: scale(0.5) rotate(-8deg); filter: brightness(0.1) blur(20px); }
  50% { opacity: 1; transform: scale(1.2) rotate(2deg); filter: brightness(4) drop-shadow(0 0 40px #fff); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1.3) blur(0px); }
}

/* 8. タイプライター */
.anim-in-typewriter {
  animation: typewriterDynamic 0.3s ease forwards;
}
@keyframes typewriterDynamic {
  from { opacity: 0; transform: translateY(12px) scale(0.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 9. 3Dフリップ (超立体縦回転) */
.anim-in-flip-3d {
  animation: flip3DDynamic 0.65s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes flip3DDynamic {
  0% { opacity: 0; transform: rotateX(120deg) translateY(180px) scale(0.3); filter: blur(10px); }
  70% { opacity: 1; transform: rotateX(-15deg) translateY(-10px) scale(1.08); filter: blur(0); }
  100% { opacity: 1; transform: rotateX(0deg) translateY(0) scale(1); }
}

/* 10. ズームバースト (超爆発インパクト) */
.anim-in-zoom-burst {
  animation: zoomBurstDynamic 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes zoomBurstDynamic {
  0% { opacity: 0; transform: scale(6) rotate(15deg); filter: blur(30px); }
  60% { opacity: 1; transform: scale(0.9) rotate(-3deg); filter: blur(1px); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}

/* 11. ウェーブフロート */
.anim-in-wave-float {
  animation: waveInDynamic 0.6s ease-out forwards;
}
@keyframes waveInDynamic {
  0% { opacity: 0; transform: translateY(100px) rotate(-12deg) scale(0.7); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}


/* --- OUT ANIMATIONS (ダイナミック退場) --- */

/* 1. 画面右外へ光速突破 (Drive-Out Right) */
.anim-out-drive-right {
  animation: driveOutRight 0.45s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes driveOutRight {
  0% {
    opacity: 1;
    transform: translateX(0) skewX(0deg) scale(1);
    filter: blur(0);
  }
  25% {
    transform: translateX(-4vw) skewX(-8deg) scale(0.96);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateX(120vw) skewX(45deg) scaleX(2.5);
    filter: blur(25px) brightness(3);
    letter-spacing: 20px;
  }
}

/* 2. 3D空間奥底歪み吸い込み消滅 (Vortex Warp-Depth Out) */
.anim-out-warp-depth {
  animation: warpDepthOut 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes warpDepthOut {
  0% {
    opacity: 1;
    transform: translateZ(0) rotateX(0deg) rotateZ(0deg) scale(1);
    filter: blur(0);
  }
  30% {
    opacity: 1;
    transform: translateZ(80px) rotateX(-15deg) rotateZ(5deg) scale(1.15);
    filter: brightness(1.5);
  }
  100% {
    opacity: 0;
    transform: translateZ(-2500px) rotateX(85deg) rotateZ(270deg) skewX(60deg) scale(0.01);
    filter: blur(30px) contrast(4);
  }
}

/* 3. カメラ手前粉砕突き抜け (Crash-Forward Out) */
.anim-out-crash-forward {
  animation: crashForwardOut 0.45s cubic-bezier(0.6, 0.05, 0.28, 0.98) forwards;
}
@keyframes crashForwardOut {
  0% {
    opacity: 1;
    transform: translateZ(0) scale(1);
    filter: blur(0);
  }
  40% {
    opacity: 1;
    transform: translateZ(200px) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translateZ(1200px) scale(8) rotate(15deg);
    filter: blur(25px) brightness(2.5);
  }
}

/* 4. グリッチ爆散 (Glitch Scatter) */
.anim-out-glitch-scatter {
  animation: outGlitchDynamic 0.45s ease forwards;
}
@keyframes outGlitchDynamic {
  0% { transform: translate(0); opacity: 1; }
  25% { transform: translate(30px, -25px) skewX(-35deg) scale(1.2); text-shadow: -20px 0 #ff007f, 20px 0 #00f0ff; opacity: 0.95; }
  60% { transform: translate(-50px, 40px) skewX(40deg) scale(1.5); text-shadow: 30px 0 #ff0055, -30px 0 #00ffff; opacity: 0.7; }
  100% { transform: translate(120px, -60px) scale(2.2); opacity: 0; filter: blur(20px); text-shadow: 40px 0 #ff007f; }
}

/* 5. 高速スライド左方突き抜け (Slide Out Left) */
.anim-out-slide-left {
  animation: outSlideLeftDynamic 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes outSlideLeftDynamic {
  0% { opacity: 1; transform: translateX(0) skewX(0); }
  25% { transform: translateX(30px) skewX(10deg); }
  100% { opacity: 0; transform: translateX(-120vw) skewX(-45deg) scaleX(2); filter: blur(20px); }
}

/* 6. 上空急上昇アウェイ (Slide Out Up) */
.anim-out-slide-up {
  animation: outSlideUpDynamic 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes outSlideUpDynamic {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  30% { transform: translateY(20px) scale(0.9); }
  100% { opacity: 0; transform: translateY(-120vh) scale(0.2) skewY(-20deg); filter: blur(15px); }
}

/* 7. 重力崩落奈落へ (Gravity Drop) */
.anim-out-gravity-drop {
  animation: outGravityDropDynamic 0.45s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}
@keyframes outGravityDropDynamic {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-30px) rotate(-5deg) scale(1.05); }
  100% { opacity: 0; transform: translateY(120vh) rotate(35deg) scale(0.6); filter: blur(12px); }
}

/* 8. ズーム縮小消滅 (Zoom Shrink) */
.anim-out-zoom-shrink {
  animation: outZoomShrinkDynamic 0.45s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}
@keyframes outZoomShrinkDynamic {
  0% { opacity: 1; transform: scale(1); }
  30% { transform: scale(1.3) rotate(5deg); filter: brightness(1.5); }
  100% { opacity: 0; transform: scale(0.01) rotate(-45deg); filter: blur(15px); }
}

/* 9. スモーク蒸発 (Smoke Evaporate) */
.anim-out-smoke-evaporate {
  animation: outSmokeEvaporateDynamic 0.5s ease-out forwards;
}
@keyframes outSmokeEvaporateDynamic {
  0% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(2.2) translateY(-60px); filter: blur(25px) brightness(2.5); }
}

/* 10. 3Dスピンアウェイ (3D Spin Away) */
.anim-out-spin-away {
  animation: outSpinAwayDynamic 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}
@keyframes outSpinAwayDynamic {
  0% { opacity: 1; transform: rotateY(0deg) translateZ(0) scale(1); }
  100% { opacity: 0; transform: rotateY(180deg) translateZ(-800px) scale(0.1); filter: blur(15px); }
}

/* 11. フラッシュ爆縮 (Flash Implode) */
.anim-out-flash-implode {
  animation: outFlashImplodeDynamic 0.4s ease-in forwards;
}
@keyframes outFlashImplodeDynamic {
  0% { opacity: 1; filter: brightness(1) drop-shadow(0 0 0 transparent); transform: scale(1); }
  40% { opacity: 1; filter: brightness(5) drop-shadow(0 0 50px #fff); transform: scale(1.3); }
  100% { opacity: 0; filter: brightness(8); transform: scale(0.02) rotate(180deg); }
}

/* 12. フェードディゾルブ */
.anim-out-fade-dissolve {
  animation: outFadeDissolveDynamic 0.45s ease-in forwards;
}
@keyframes outFadeDissolveDynamic {
  0% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(0.9) translateY(-10px); filter: blur(16px); }
}

/* =========================================================
   【空中分解・y4ma3】特選アニメーション (IN & OUT)
   ========================================================= */

/* IN-1: 【空中分解】縦書き連鎖落下 (Vertical Drop) */
.anim-in-vertical-drop {
  animation: inVerticalDropContainer 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.anim-in-vertical-drop .char-unit {
  display: inline-block;
  opacity: 0;
  animation: inVerticalDropChar 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--char-i, 0) * 0.045s);
}
@keyframes inVerticalDropContainer {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes inVerticalDropChar {
  0% {
    opacity: 0;
    transform: translateY(-80px) scaleY(1.8) scaleX(0.7);
    filter: blur(10px) brightness(2);
  }
  60% {
    opacity: 1;
    transform: translateY(8px) scaleY(0.9) scaleX(1.1);
    filter: blur(0) brightness(1.3);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

/* IN-2: 【空中分解】斜めスライス切断 (Slice Split) */
.anim-in-slice-split {
  animation: inSliceSplitDynamic 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}
@keyframes inSliceSplitDynamic {
  0% {
    opacity: 0;
    transform: scale(1.4) skewX(-35deg) translateX(-60px);
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 65%);
    filter: contrast(250%) blur(6px) brightness(2);
  }
  45% {
    opacity: 1;
    transform: scale(1.05) skewX(12deg) translateX(12px);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 45%);
    filter: contrast(160%) blur(0);
  }
  75% {
    transform: scale(0.98) skewX(-3deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    opacity: 1;
    transform: scale(1) skewX(0);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    filter: contrast(100%) brightness(1);
  }
}

/* IN-3: 【空中分解】衝撃スナップ停止 (Impact Snap) */
.anim-in-impact-snap {
  animation: inImpactSnapDynamic 0.45s cubic-bezier(0.12, 0.8, 0.32, 1.35) forwards;
}
@keyframes inImpactSnapDynamic {
  0% {
    opacity: 0;
    transform: scale(4.8) translateZ(300px);
    filter: brightness(6) blur(24px);
  }
  30% {
    opacity: 1;
    transform: scale(0.88);
    filter: brightness(2) blur(0);
  }
  65% {
    transform: scale(1.08);
    filter: brightness(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

/* IN-4: 【空中分解】ブラインド展開 (Curtain Reveal) */
.anim-in-curtain-reveal {
  animation: inCurtainRevealDynamic 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes inCurtainRevealDynamic {
  0% {
    opacity: 0;
    transform: scaleY(0.01) skewY(18deg);
    filter: blur(10px) brightness(2.5);
  }
  55% {
    opacity: 1;
    transform: scaleY(1.15) skewY(-4deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1) skewY(0deg);
    filter: brightness(1);
  }
}

/* IN-5: 【空中分解】ネガポジ反転発光 (Invert Burst) */
.anim-in-invert-burst {
  animation: inInvertBurstDynamic 0.5s ease-out forwards;
}
@keyframes inInvertBurstDynamic {
  0% {
    opacity: 0;
    filter: invert(1) contrast(300%) brightness(5) drop-shadow(0 0 40px #fff);
    transform: scale(0.6) rotate(-5deg);
  }
  20% {
    opacity: 1;
    filter: invert(1) contrast(250%) brightness(4);
    transform: scale(1.2) rotate(2deg);
  }
  45% {
    filter: invert(0) contrast(200%) brightness(2.5) drop-shadow(0 0 25px var(--accent-cyan));
    transform: scale(0.96);
  }
  75% {
    filter: invert(0) contrast(130%) brightness(1.3);
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    filter: invert(0) contrast(100%) brightness(1);
    transform: scale(1) rotate(0deg);
  }
}

/* OUT-1: 【空中分解】完全空中四散 (Bunkai Scatter) */
.anim-out-bunkai-scatter {
  animation: outBunkaiScatterContainer 0.45s ease-out forwards;
}
.anim-out-bunkai-scatter .char-unit {
  display: inline-block;
  animation: outBunkaiScatterChar 0.45s cubic-bezier(0.12, 0, 0.39, 0) forwards;
  animation-delay: calc(var(--char-i, 0) * 0.02s);
}
@keyframes outBunkaiScatterContainer {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes outBunkaiScatterChar {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    filter: brightness(1);
  }
  25% {
    opacity: 1;
    transform: translate(calc((var(--char-i, 0) - 4) * 8px), -15px) scale(1.25);
    filter: brightness(3);
  }
  100% {
    opacity: 0;
    transform: translate(calc((var(--char-i, 0) - 4) * 45px), calc((var(--char-i, 0) % 2 == 0 ? 1 : -1) * 90px)) rotate(calc((var(--char-i, 0) - 4) * 35deg)) scale(0.2);
    filter: blur(14px) brightness(4);
  }
}

/* OUT-2: 【空中分解】スライス滑走切断 (Slice Fade) */
.anim-out-slice-fade {
  animation: outSliceFadeDynamic 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes outSliceFadeDynamic {
  0% {
    opacity: 1;
    transform: translateY(0) skewX(0);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    filter: blur(0);
  }
  35% {
    opacity: 1;
    transform: translateY(6px) skewX(-18deg);
    clip-path: polygon(0 0, 100% 0, 100% 55%, 0 45%);
    filter: brightness(2) contrast(180%);
  }
  100% {
    opacity: 0;
    transform: translateY(70px) translateX(50px) skewX(-40deg);
    clip-path: polygon(0 0, 100% 0, 100% 20%, 0 10%);
    filter: blur(16px);
  }
}

/* OUT-3: 【空中分解】縦書き光速ロケット (Vertical Shoot) */
.anim-out-vertical-shoot {
  animation: outVerticalShootDynamic 0.45s cubic-bezier(0.6, 0.04, 0.98, 0.335) forwards;
}
@keyframes outVerticalShootDynamic {
  0% {
    opacity: 1;
    transform: translateY(0) scaleY(1) scaleX(1);
    filter: blur(0);
  }
  20% {
    opacity: 1;
    transform: translateY(18px) scaleY(0.85) scaleX(1.1);
    filter: brightness(1.5);
  }
  100% {
    opacity: 0;
    transform: translateY(-160vh) scaleY(4) scaleX(0.4);
    filter: blur(20px) brightness(5);
  }
}

/* OUT-4: 【空中分解】縦シャッター崩落 (Shutter Drop) */
.anim-out-shutter-drop {
  animation: outShutterDropDynamic 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}
@keyframes outShutterDropDynamic {
  0% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
  25% {
    opacity: 1;
    transform: translateY(-15px) rotateX(-25deg) scale(1.05);
    filter: brightness(1.8);
  }
  100% {
    opacity: 0;
    transform: translateY(120vh) rotateX(80deg) skewX(20deg) scale(0.6);
    filter: blur(18px);
  }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: #252c3c;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
}

/* =========================================================
   歌詞が踊る文字アニメーション 5選
   YouTube: 初心者OK！After Effectsで作るリリックビデオ (BlkiOJg86Cc)
   ========================================================= */

/* --- 1. 巨大縮小＋明暗反転フラッシュ (Scale Invert) --- */
.anim-in-ae-scale-invert {
  animation: aeScaleSnap 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             aeInvertFlash 0.55s ease-out forwards;
}
@keyframes aeScaleSnap {
  0% {
    transform: scale(2.8);
    opacity: 0;
  }
  30% {
    transform: scale(1.15);
    opacity: 1;
  }
  70% {
    transform: scale(0.95);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes aeInvertFlash {
  0% { filter: invert(0) drop-shadow(0 0 0 transparent); }
  28% { filter: invert(0); }
  32% { filter: invert(1) drop-shadow(0 0 35px #ffffff) contrast(300%); }
  45% { filter: invert(1) drop-shadow(0 0 45px #ffffff) contrast(300%); }
  52% { filter: invert(0) drop-shadow(0 0 10px rgba(0,0,0,0.5)); }
  100% { filter: invert(0) drop-shadow(0 4px 12px rgba(0,0,0,0.7)); }
}

/* --- 2. 超特大虹色コロラマ回転 (Colorama Hue Flash) --- */
.anim-in-ae-colorama-flash {
  position: relative;
  animation: aeColoramaZoom 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards,
             aeColoramaHue 0.6s linear forwards;
}
@keyframes aeColoramaZoom {
  0% {
    transform: scale(2.4);
    opacity: 0;
  }
  20% {
    transform: scale(1.8);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes aeColoramaHue {
  0% {
    filter: hue-rotate(0deg) saturate(350%) brightness(2.5) drop-shadow(0 0 25px #ff0055);
  }
  25% {
    filter: hue-rotate(120deg) saturate(400%) brightness(2.8) drop-shadow(0 0 35px #00ffcc);
  }
  50% {
    filter: hue-rotate(240deg) saturate(400%) brightness(2.6) drop-shadow(0 0 40px #ffee00);
  }
  75% {
    filter: hue-rotate(360deg) saturate(200%) brightness(1.5) drop-shadow(0 0 15px #00e5ff);
  }
  100% {
    filter: hue-rotate(360deg) saturate(100%) brightness(1) drop-shadow(0 4px 15px rgba(0,0,0,0.6));
  }
}

/* --- 3. スラッシュライン連動・斜めスライド (Slash Slide) --- */
.anim-in-ae-slash-slide {
  position: relative;
  transform: rotate(-15deg);
  animation: aeSlashSlideContainer 0.7s cubic-bezier(0.12, 0.8, 0.32, 1) forwards;
}
.anim-in-ae-slash-slide::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -20%;
  width: 140%;
  height: 8px;
  background: #ffffff;
  box-shadow: 0 0 25px #00e5ff, 0 0 45px #fff;
  transform: translateY(-50%) skewX(-30deg) scaleX(0);
  transform-origin: left center;
  animation: aeSlashLine 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
  z-index: 5;
}
.anim-in-ae-slash-slide::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -25%;
  width: 150%;
  height: 4px;
  background: #ff0055;
  box-shadow: 0 0 18px #ff0055;
  transform: translateY(-50%) skewX(-30deg) scaleX(0);
  transform-origin: right center;
  animation: aeSlashLine 0.4s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
  z-index: 4;
}
.anim-in-ae-slash-slide .char-unit {
  display: inline-block;
  opacity: 0;
  animation: aeSlashCharSlide 0.6s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  animation-delay: calc(var(--char-i, 0) * 0.05s);
}
/* サイズ不揃い配置 (1文字目大、2文字目小、3文字目中) */
.anim-in-ae-slash-slide .char-unit:nth-child(3n+1) {
  font-size: 1.35em;
  transform-origin: bottom center;
}
.anim-in-ae-slash-slide .char-unit:nth-child(3n+2) {
  font-size: 0.75em;
  opacity: 0.9;
  transform: translateY(-6px);
}
.anim-in-ae-slash-slide .char-unit:nth-child(3n+3) {
  font-size: 1.1em;
}
@keyframes aeSlashSlideContainer {
  0% {
    transform: rotate(-15deg) translate(-120px, 80px);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    transform: rotate(-15deg) translate(8px, -5px);
  }
  100% {
    transform: rotate(-15deg) translate(0, 0);
    opacity: 1;
  }
}
@keyframes aeSlashLine {
  0% {
    transform: translateY(-50%) skewX(-30deg) scaleX(0);
    opacity: 1;
  }
  45% {
    transform: translateY(-50%) skewX(-30deg) scaleX(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) skewX(-30deg) scaleX(1.3);
    opacity: 0;
  }
}
@keyframes aeSlashCharSlide {
  0% {
    opacity: 0;
    transform: translate(-140px, 90px) skewX(-25deg);
    filter: blur(12px);
  }
  55% {
    opacity: 1;
    transform: translate(6px, -4px) skewX(0deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0);
  }
}

/* --- 4. 部首空中分解・超合体スナップ (Radical Assemble) --- */
.anim-in-ae-radical-assemble {
  position: relative;
  color: #ff2a55 !important;
  text-shadow: 0 0 20px rgba(255, 42, 85, 0.7), 0 0 40px rgba(255, 0, 80, 0.4) !important;
  animation: aeAssembleShockwave 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.anim-in-ae-radical-assemble .char-unit {
  display: inline-block;
  animation: aeAssembleChar 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.anim-in-ae-radical-assemble .char-unit:nth-child(4n+1) {
  --scatter-x: -120px;
  --scatter-y: -140px;
  --scatter-rot: -55deg;
}
.anim-in-ae-radical-assemble .char-unit:nth-child(4n+2) {
  --scatter-x: 140px;
  --scatter-y: -100px;
  --scatter-rot: 45deg;
}
.anim-in-ae-radical-assemble .char-unit:nth-child(4n+3) {
  --scatter-x: -130px;
  --scatter-y: 110px;
  --scatter-rot: 65deg;
}
.anim-in-ae-radical-assemble .char-unit:nth-child(4n+4) {
  --scatter-x: 120px;
  --scatter-y: 130px;
  --scatter-rot: -40deg;
}
@keyframes aeAssembleChar {
  0% {
    opacity: 0;
    transform: translate(var(--scatter-x, -90px), var(--scatter-y, -80px)) rotate(var(--scatter-rot, -45deg)) scale(0.4);
    filter: blur(14px);
  }
  60% {
    opacity: 1;
    transform: translate(calc(var(--scatter-x, -90px) * -0.1), calc(var(--scatter-y, -80px) * -0.1)) rotate(calc(var(--scatter-rot, -45deg) * -0.2)) scale(1.15);
    filter: blur(0);
  }
  80% {
    transform: translate(0, 0) rotate(0deg) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    filter: blur(0);
  }
}
@keyframes aeAssembleShockwave {
  0% { transform: scale(1.3); }
  65% { transform: scale(1.12); }
  75% { transform: scale(0.96); filter: brightness(2.5); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* --- 5. サイズ散らし＋ステップ横移動 (Stagger Step) --- */
.anim-in-ae-stagger-step {
  display: inline-flex;
  align-items: baseline;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
  animation: aeStepShift 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
.anim-in-ae-stagger-step .char-unit {
  display: inline-block;
  opacity: 0;
  animation: aeStaggerPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--char-i, 0) * 0.12s);
}
.anim-in-ae-stagger-step .char-unit:nth-child(3n+1) {
  font-size: 1.25em;
  transform-origin: center bottom;
  --char-rot: -12deg;
}
.anim-in-ae-stagger-step .char-unit:nth-child(3n+2) {
  font-size: 0.65em;
  transform-origin: center center;
  --char-rot: 18deg;
  margin: 0 4px;
}
.anim-in-ae-stagger-step .char-unit:nth-child(3n+3) {
  font-size: 0.95em;
  transform-origin: center top;
  --char-rot: -8deg;
}
@keyframes aeStaggerPop {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.3) rotate(calc(var(--char-rot, 0deg) * 2));
    filter: blur(10px);
  }
  65% {
    opacity: 1;
    transform: translateY(-8px) scale(1.15) rotate(var(--char-rot, 0deg));
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(var(--char-rot, 0deg));
    filter: blur(0);
  }
}
@keyframes aeStepShift {
  0% { transform: translateX(80px); }
  35% { transform: translateX(45px); }
  65% { transform: translateX(15px); }
  100% { transform: translateX(0); }
}

/* ============================================================
   SRT Auto Generator & Benchmark Styles
   ============================================================ */
.btn-api-srt {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: var(--accent-cyan);
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-api-srt:hover {
  background: rgba(0, 240, 255, 0.2);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
  transform: translateY(-1px);
}

.btn-browser-srt {
  background: rgba(192, 132, 252, 0.08);
  border: 1px solid rgba(192, 132, 252, 0.4);
  color: #d8b4fe;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-browser-srt:hover {
  background: rgba(192, 132, 252, 0.2);
  border-color: #c084fc;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.3);
  transform: translateY(-1px);
}

/* Benchmark Modal */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 7, 13, 0.82);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-dialog,
.modal-dialog.modal-benchmark {
  width: 620px;
  max-width: 95vw;
  max-height: 90vh;
  background: #0f1420;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 240, 255, 0.15);
  overflow: hidden;
  animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0b0e17;
}

.modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-icon {
  font-size: 1.6rem;
}

.modal-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.modal-sub-text {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s;
}
.modal-close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
  background: #0b0e17;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Audio Status Box */
.audio-status-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.audio-icon {
  font-size: 1.4rem;
}

.audio-info {
  flex: 1;
  min-width: 0;
}

.audio-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-duration {
  font-size: 0.7rem;
  color: var(--accent-cyan);
  margin-top: 2px;
}

.btn-xs {
  padding: 4px 8px;
  font-size: 0.7rem;
}

/* Form controls */
.bench-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bench-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.bench-config-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.2);
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
}

.label-with-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.helper-link {
  font-size: 0.7rem;
  color: var(--accent-cyan);
  text-decoration: none;
  transition: opacity 0.2s;
}
.helper-link:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.input-hint {
  font-size: 0.65rem;
  color: var(--text-dim);
}

.info-alert {
  background: rgba(192, 132, 252, 0.1);
  border: 1px solid rgba(192, 132, 252, 0.3);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.72rem;
  color: #e9d5ff;
  line-height: 1.4;
}

/* Progress & Timer */
.bench-progress-card {
  background: #080b12;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.1);
}

.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-indicator.live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: pulseLive 1s infinite alternate;
  display: inline-block;
  margin-right: 6px;
}

@keyframes pulseLive {
  from { opacity: 0.4; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1.15); }
}

.progress-status {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
  flex: 1;
}

.timer-display {
  font-family: monospace;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-yellow);
  background: rgba(255, 214, 10, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 214, 10, 0.3);
}

.progress-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), #a855f7);
  transition: width 0.2s ease;
}

.progress-detail {
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* Benchmark Result Card */
.bench-result-card {
  background: #0d121c;
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.15);
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.result-badge {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
}

.result-method-name {
  font-size: 0.78rem;
  color: var(--text-main);
  font-weight: 700;
}

.result-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.result-stat-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.result-stat-item .stat-label {
  font-size: 0.62rem;
  color: var(--text-muted);
}

.result-stat-item .stat-val {
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
}

.result-stat-item .stat-val.highlight {
  color: var(--accent-yellow);
  font-size: 1rem;
}

.result-stat-item .stat-val.green {
  color: #4ade80;
}

.srt-preview-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.srt-preview-box label {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.srt-code-preview {
  background: #080a10;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: monospace;
  font-size: 0.68rem;
  color: var(--accent-cyan);
  max-height: 120px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  font-weight: 700;
}
.btn-success:hover {
  filter: brightness(1.15);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}



.btn-danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  border: none;
  font-weight: 700;
}
.btn-danger:hover {
  filter: brightness(1.15);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

/* Drag and Drop & Visual Feedback Styles */
.effect-card {
  cursor: grab !important;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.effect-card:active {
  cursor: grabbing !important;
}
.effect-card.is-dragging {
  opacity: 0.45;
  transform: scale(0.95);
  border-color: var(--accent-cyan) !important;
}
.phrase-applied-flash {
  animation: phraseAppliedGlow 0.6s ease-out !important;
}
@keyframes phraseAppliedGlow {
  0% {
    box-shadow: 0 0 0 3px #00f0ff, 0 0 25px #00f0ff;
    transform: scale(1.04);
  }
  50% {
    box-shadow: 0 0 0 2px #ffd60a, 0 0 15px #ffd60a;
  }
  100% {
    box-shadow: none;
    transform: scale(1);
  }
}
.toast-notification {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #fff;
  padding: 10px 22px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 255, 0.3);
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast-notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.lyric-track-content.track-drag-over {
  background: rgba(0, 240, 255, 0.08) !important;
  outline: 2px dashed var(--accent-cyan) !important;
  outline-offset: -2px;
}

/* Welcome / Intro Modal */
.modal-dialog.modal-welcome {
  width: 680px;
  max-width: 95vw;
  max-height: 90vh;
  background: #0d121d;
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 240, 255, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.welcome-body {
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.welcome-intro-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.welcome-lead {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.welcome-lead strong {
  color: #fff;
}

.welcome-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.welcome-feature-item {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.welcome-feature-item .feature-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.welcome-feature-item .feature-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.welcome-feature-item .feature-text strong {
  font-size: 0.82rem;
  color: #fff;
}
.welcome-feature-item .feature-text span {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.welcome-action-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.welcome-action-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.badge-step {
  background: linear-gradient(135deg, #00d2ff, #0070f3);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.welcome-buttons-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.welcome-upload-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(145deg, rgba(16, 24, 40, 0.85), rgba(10, 15, 25, 0.95));
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.welcome-upload-btn:hover {
  border-color: var(--accent-cyan);
  background: linear-gradient(145deg, rgba(20, 32, 54, 0.95), rgba(12, 20, 34, 1));
  box-shadow: 0 6px 20px rgba(0, 240, 255, 0.25);
  transform: translateY(-2px);
}
.welcome-btn-icon {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 240, 255, 0.4));
}
.welcome-btn-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.welcome-btn-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
.welcome-btn-hint {
  font-size: 0.75rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.welcome-demo-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}
.demo-divider-text {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.welcome-footer {
  padding: 14px 24px;
  background: #090d15;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.welcome-checkbox-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.welcome-checkbox-label input {
  cursor: pointer;
  accent-color: var(--accent-cyan);
}

/* ==========================================================================
   Video Ad Overlay (Google IMA SDK)
   ========================================================================== */
.ad-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: #000000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-video-element {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000000;
}