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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0a0a1a; color: #e0e0e0;
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  padding: 20px;
}

body.init-pending {
  visibility: hidden;
}

/* Top bar with title + lang switch */
.top-bar {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  width: 100%; max-width: 640px;
}
.top-bar h1 { flex: 1; text-align: center; }

.lang-btn {
  padding: 4px 10px; border-radius: 6px; border: 1px solid #2a2a4a;
  background: #1a1a32; color: #7eb8ff; font-size: 0.78em; cursor: pointer;
  white-space: nowrap; transition: all 0.15s;
}
.lang-btn:hover { background: #252548; border-color: #7eb8ff; }

h1 { color: #7eb8ff; margin-bottom: 4px; font-size: 1.7em; }
.subtitle { color: #888; margin-bottom: 16px; font-size: 0.85em; }

.warning {
  background: #2a1a00; border: 1px solid #664400; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 16px; max-width: 640px;
  font-size: 0.82em; color: #ffaa44; line-height: 1.5;
}

.container {
  background: #12122a; border-radius: 16px; padding: 24px;
  max-width: 640px; width: 100%; box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* Tabs */
.tabs { display: flex; gap: 4px; margin-bottom: 18px; }
.tab-btn {
  flex: 1; padding: 10px 6px; border: 1px solid #2a2a4a; border-radius: 8px;
  background: #1a1a32; color: #999; cursor: pointer; font-size: 0.9em;
  transition: all 0.15s; text-align: center;
}
.tab-btn.active { background: #252560; color: #7eb8ff; border-color: #7eb8ff; font-weight: 600; }
.tab-btn:hover { background: #252548; color: #ccc; }

/* Play button */
.play-btn {
  width: 100%; padding: 14px; font-size: 1.2em; border: none; border-radius: 10px;
  cursor: pointer; transition: all 0.2s; font-weight: 600; letter-spacing: 1px;
}
.play-btn.off { background: linear-gradient(135deg, #2a5298, #1e3c72); color: #fff; }
.play-btn.on { background: linear-gradient(135deg, #c0392b, #96281b); color: #fff; }
.play-btn:hover { transform: scale(1.01); filter: brightness(1.15); }

/* Panels */
.panel { display: none; margin: 16px 0; }
.panel.active { display: block; }

/* Controls */
.controls { margin-top: 12px; }
.control-group { margin-bottom: 14px; }
.control-label {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px;
}
.control-label .name { font-size: 0.88em; color: #aaa; }
.control-label .value {
  font-size: 1em; color: #7eb8ff; font-weight: 600; font-variant-numeric: tabular-nums;
}

input[type="range"] {
  -webkit-appearance: none; width: 100%; height: 5px; border-radius: 3px;
  background: #1e1e3a; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #7eb8ff; cursor: pointer; box-shadow: 0 0 6px rgba(126,184,255,0.3);
}

select {
  width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid #2a2a4a;
  background: #1a1a32; color: #ccc; font-size: 0.9em; cursor: pointer;
}

/* File upload */
.file-area {
  border: 2px dashed #2a2a5a; border-radius: 10px; padding: 20px; text-align: center;
  cursor: pointer; transition: all 0.2s; color: #666; font-size: 0.9em;
}
.file-area:hover { border-color: #7eb8ff; color: #aaa; }
.file-area.loaded { border-color: #4adf8a; border-style: solid; color: #4adf8a; }
.file-area.dragover { border-color: #7eb8ff; color: #aaa; }
.file-area input { display: none; }

/* Channel info */
.channel-info {
  display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.8em; color: #666;
}
.channel-info span { padding: 3px 8px; border-radius: 4px; }
.ch-left { background: #1a1a2e; color: #ff7eb3; }
.ch-right { background: #1a1a2e; color: #7effd1; }

canvas {
  width: 100%; height: 80px; margin-top: 12px; border-radius: 8px; background: #0a0a18;
}

.info-panel {
  margin-top: 14px; padding: 12px; background: #0e0e20; border-radius: 8px;
  font-size: 0.82em; line-height: 1.7;
}
.band-delta { color: #b07aff; font-weight: 700; }
.band-theta { color: #5aafff; font-weight: 700; }
.band-alpha { color: #4adf8a; font-weight: 700; }
.band-beta { color: #ffe44a; font-weight: 700; }
.band-collapse { color: #ff6a6a; font-weight: 700; }

/* Presets */
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.preset-btn {
  padding: 8px 4px; border: 1px solid #2a2a4a; border-radius: 6px;
  background: #1a1a32; color: #ccc; cursor: pointer; font-size: 0.78em;
  transition: all 0.15s; text-align: center; line-height: 1.3;
}
.preset-btn:hover { background: #252548; border-color: #7eb8ff; color: #fff; }
.preset-btn .freq { font-weight: 700; color: #7eb8ff; font-size: 1.05em; }
.preset-btn .desc { color: #888; font-size: 0.82em; }

/* Mobile responsive */
@media (max-width: 480px) {
  body { padding: 10px; }
  h1 { font-size: 1.3em; }
  .subtitle { font-size: 0.75em; }
  .container { padding: 14px; border-radius: 12px; }
  .tabs { gap: 2px; margin-bottom: 12px; }
  .tab-btn { padding: 8px 4px; font-size: 0.78em; }
  .play-btn { padding: 12px; font-size: 1.05em; }
  .presets { grid-template-columns: repeat(2, 1fr); }
  .channel-info { flex-direction: column; gap: 4px; font-size: 0.75em; }
  .info-panel { font-size: 0.78em; padding: 10px; }
  canvas { height: 60px; }
  select { font-size: 0.82em; }
}

@media (max-width: 360px) {
  .presets { grid-template-columns: 1fr 1fr; gap: 4px; }
  .preset-btn { padding: 6px 2px; font-size: 0.72em; }
}

/* Touch optimization */
@media (hover: none) and (pointer: coarse) {
  input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
  .tab-btn { min-height: 44px; }
  .play-btn { min-height: 48px; }
  .preset-btn { min-height: 44px; }
}

/* ======================================
   Marketing Edition Theme (Satirical)
   ====================================== */

body.marketing {
  background: linear-gradient(180deg, #0a0014 0%, #1a0030 40%, #0d0020 100%);
}

/* Starfield particle overlay */
body.marketing::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.2), transparent),
              radial-gradient(2px 2px at 40% 70%, rgba(212,175,55,0.15), transparent),
              radial-gradient(1px 1px at 70% 20%, rgba(155,89,182,0.2), transparent),
              radial-gradient(2px 2px at 90% 60%, rgba(255,255,255,0.15), transparent),
              radial-gradient(1px 1px at 10% 80%, rgba(212,175,55,0.1), transparent),
              radial-gradient(1px 1px at 60% 50%, rgba(255,255,255,0.12), transparent);
  pointer-events: none; z-index: 0;
}

body.marketing > * { position: relative; z-index: 1; }

body.marketing h1 { color: #d4af37; }
body.marketing .subtitle { color: #b388d9; }

body.marketing .warning {
  background: linear-gradient(135deg, #2a1040, #1a0030);
  border-color: #9b59b6; color: #d4af37;
}

body.marketing .container {
  background: linear-gradient(180deg, #1a1035, #12082a);
  border: 1px solid rgba(155,89,182,0.2);
  box-shadow: 0 4px 32px rgba(155,89,182,0.15), 0 0 80px rgba(212,175,55,0.05);
}

body.marketing .lang-btn {
  border-color: #3a2a5a; background: #2a1a42; color: #d4af37;
}
body.marketing .lang-btn:hover { background: #3a2a52; border-color: #d4af37; }

body.marketing .tab-btn {
  border-color: #3a2a5a; background: #2a1a42; color: #a88ac0;
}
body.marketing .tab-btn.active {
  background: linear-gradient(135deg, #3a1a6a, #2a1050);
  color: #d4af37; border-color: #d4af37;
}
body.marketing .tab-btn:hover { background: #3a2a52; color: #d4af37; }

body.marketing .play-btn.off {
  background: linear-gradient(135deg, #6a3aaf, #4a2090, #d4af37);
  background-size: 200% 200%;
  animation: marketingGlow 3s ease-in-out infinite;
  color: #fff; text-shadow: 0 0 10px rgba(212,175,55,0.5);
}
body.marketing .play-btn.on {
  background: linear-gradient(135deg, #9b59b6, #6a3aaf);
  box-shadow: 0 0 20px rgba(155,89,182,0.4);
}

@keyframes marketingGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

body.marketing .control-label .name { color: #b388d9; }
body.marketing .control-label .value { color: #d4af37; font-weight: 700; }

body.marketing input[type="range"] { background: #2a1a42; }
body.marketing input[type="range"]::-webkit-slider-thumb {
  background: linear-gradient(135deg, #d4af37, #9b59b6);
  box-shadow: 0 0 8px rgba(212,175,55,0.5);
}

body.marketing select {
  background: #2a1a42; border-color: #3a2a5a; color: #d4af37;
}

body.marketing .file-area {
  border-color: #3a2a5a; color: #8a6aaf;
  background: rgba(42,26,66,0.3);
}
body.marketing .file-area:hover { border-color: #d4af37; color: #d4af37; }
body.marketing .file-area.loaded { border-color: #d4af37; color: #d4af37; }

body.marketing .ch-left { background: #2a1040; color: #d4af37; }
body.marketing .ch-right { background: #2a1040; color: #b388d9; }

body.marketing canvas { background: #0a0018; }

body.marketing .info-panel {
  background: linear-gradient(135deg, #1a0830, #0e0418);
  border: 1px solid rgba(155,89,182,0.15);
}

body.marketing .preset-btn {
  border-color: #3a2a5a; background: #2a1a42; color: #d4af37;
}
body.marketing .preset-btn:hover {
  background: linear-gradient(135deg, #3a2060, #2a1050);
  border-color: #d4af37; color: #fff;
}
body.marketing .preset-btn .freq { color: #d4af37; }
body.marketing .preset-btn .desc { color: #b388d9; }

body.marketing .band-delta { color: #d4af37; }
body.marketing .band-theta { color: #9b59b6; }
body.marketing .band-alpha { color: #d4af37; }
body.marketing .band-beta { color: #e8c547; }
body.marketing .band-collapse { color: #ff6aff; }

/* Edition switch button */
.edition-btn {
  padding: 8px 20px;
  border-radius: 8px; border: 1px dashed #2a2a4a;
  background: transparent; color: #666; font-size: 0.82em;
  cursor: pointer; transition: all 0.2s;
}
.edition-btn:hover { border-color: #7eb8ff; color: #aaa; }

body.marketing .edition-btn {
  border-color: #3a2a5a; color: #8a6aaf;
}
body.marketing .edition-btn:hover {
  border-color: #d4af37; color: #d4af37;
}

/* Marketing fake stats bar */
.marketing-stats {
  display: none; margin-top: 8px; padding: 10px 12px;
  background: linear-gradient(135deg, #1a0830, #0e0418);
  border: 1px solid rgba(155,89,182,0.15); border-radius: 8px;
  font-size: 0.78em; line-height: 1.8; color: #b388d9;
}
body.marketing .marketing-stats { display: block; }

.marketing-stats .stat-value { color: #d4af37; font-weight: 700; }
.marketing-stats .stat-bar {
  display: inline-block; width: 80px; height: 8px;
  background: #1a0830; border-radius: 4px; vertical-align: middle;
  margin-left: 4px; overflow: hidden;
}
.marketing-stats .stat-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #9b59b6, #d4af37);
  transition: width 1s ease;
}
.marketing-stats .stat-label { color: #8a6aaf; }

/* ======================================
   Mystic / Spiritual Guru Edition Theme
   ====================================== */

body.mystic {
  background: linear-gradient(180deg, #0c0400 0%, #1a0a00 40%, #0e0600 100%);
}

/* Incense smoke / mandala overlay */
body.mystic::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(3px 3px at 25% 25%, rgba(255,165,0,0.12), transparent),
              radial-gradient(2px 2px at 50% 50%, rgba(255,200,50,0.08), transparent),
              radial-gradient(2px 2px at 75% 35%, rgba(200,100,20,0.1), transparent),
              radial-gradient(1px 1px at 15% 70%, rgba(255,215,0,0.1), transparent),
              radial-gradient(2px 2px at 85% 65%, rgba(180,80,0,0.08), transparent),
              radial-gradient(1px 1px at 45% 85%, rgba(255,180,50,0.06), transparent);
  pointer-events: none; z-index: 0;
}

body.mystic > * { position: relative; z-index: 1; }

body.mystic h1 { color: #ff9900; }
body.mystic .subtitle { color: #daa520; }

body.mystic .warning {
  background: linear-gradient(135deg, #1a0800, #0e0400);
  border-color: #c87020; color: #ff9900;
}

body.mystic .container {
  background: linear-gradient(180deg, #1a0e02, #100800);
  border: 1px solid rgba(200,112,32,0.2);
  box-shadow: 0 4px 32px rgba(200,112,32,0.12), 0 0 80px rgba(255,153,0,0.05);
}

body.mystic .lang-btn {
  border-color: #4a2800; background: #2a1600; color: #ff9900;
}
body.mystic .lang-btn:hover { background: #3a2000; border-color: #ff9900; }

body.mystic .tab-btn {
  border-color: #4a2800; background: #2a1600; color: #c88040;
}
body.mystic .tab-btn.active {
  background: linear-gradient(135deg, #4a2000, #2a1000);
  color: #ff9900; border-color: #ff9900;
}
body.mystic .tab-btn:hover { background: #3a2000; color: #ff9900; }

body.mystic .play-btn.off {
  background: linear-gradient(135deg, #c87020, #8a4010, #ff9900);
  background-size: 200% 200%;
  animation: mysticGlow 4s ease-in-out infinite;
  color: #fff; text-shadow: 0 0 10px rgba(255,153,0,0.5);
}
body.mystic .play-btn.on {
  background: linear-gradient(135deg, #c87020, #8a4010);
  box-shadow: 0 0 20px rgba(200,112,32,0.4);
}

@keyframes mysticGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

body.mystic .control-label .name { color: #daa520; }
body.mystic .control-label .value { color: #ff9900; font-weight: 700; }

body.mystic input[type="range"] { background: #2a1600; }
body.mystic input[type="range"]::-webkit-slider-thumb {
  background: linear-gradient(135deg, #ff9900, #c87020);
  box-shadow: 0 0 8px rgba(255,153,0,0.5);
}

body.mystic select {
  background: #2a1600; border-color: #4a2800; color: #ff9900;
}

body.mystic .file-area {
  border-color: #4a2800; color: #a06830;
  background: rgba(42,22,0,0.3);
}
body.mystic .file-area:hover { border-color: #ff9900; color: #ff9900; }
body.mystic .file-area.loaded { border-color: #ff9900; color: #ff9900; }

body.mystic .ch-left { background: #1a0800; color: #ff9900; }
body.mystic .ch-right { background: #1a0800; color: #daa520; }

body.mystic canvas { background: #080400; }

body.mystic .info-panel {
  background: linear-gradient(135deg, #1a0800, #0a0400);
  border: 1px solid rgba(200,112,32,0.15);
}

body.mystic .preset-btn {
  border-color: #4a2800; background: #2a1600; color: #ff9900;
}
body.mystic .preset-btn:hover {
  background: linear-gradient(135deg, #3a1800, #2a1000);
  border-color: #ff9900; color: #fff;
}
body.mystic .preset-btn .freq { color: #ff9900; }
body.mystic .preset-btn .desc { color: #daa520; }

body.mystic .band-delta { color: #ff9900; }
body.mystic .band-theta { color: #c87020; }
body.mystic .band-alpha { color: #ff9900; }
body.mystic .band-beta { color: #ffb340; }
body.mystic .band-collapse { color: #ff6600; }

body.mystic .edition-btn {
  border-color: #4a2800; color: #a06830;
}
body.mystic .edition-btn:hover {
  border-color: #ff9900; color: #ff9900;
}

/* Mystic fake stats bar */
.mystic-stats {
  display: none; margin-top: 8px; padding: 10px 12px;
  background: linear-gradient(135deg, #1a0800, #0a0400);
  border: 1px solid rgba(200,112,32,0.15); border-radius: 8px;
  font-size: 0.78em; line-height: 1.8; color: #daa520;
}
body.mystic .mystic-stats { display: block; }

.mystic-stats .stat-value { color: #ff9900; font-weight: 700; }
.mystic-stats .stat-bar {
  display: inline-block; width: 80px; height: 8px;
  background: #1a0800; border-radius: 4px; vertical-align: middle;
  margin-left: 4px; overflow: hidden;
}
.mystic-stats .stat-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #c87020, #ff9900);
  transition: width 1s ease;
}
.mystic-stats .stat-label { color: #a06830; }

/* Edition switch: two buttons side by side */
.edition-btns {
  display: flex; gap: 8px; justify-content: center; margin-top: 12px;
}
.edition-btns .edition-btn { margin: 0; }