:root{
  --bg:#07070a; --panel:#0f1116; --muted:#9aa0a6; --accent:#ff6a00; --accent-2:#ee0979;
  --card:#0b0c10; --radius:10px; --gap:12px; --control-h:44px; --font-sans: "Segoe UI", Roboto, Arial, sans-serif;
}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#05050a,#0b0b0f);color:#fff;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;}
.container{max-width:1200px;margin:18px auto;padding:12px;box-sizing:border-box;}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.brand{display:flex;align-items:center;gap:12px;}
.logo{width:48px;height:48px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;}
h1{margin:0;font-size:18px;}
.muted{color:var(--muted);font-size:13px;}

/* Controls layout */
.controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.card { background:var(--card); padding:10px; border-radius:10px; box-shadow: 0 8px 30px rgba(0,0,0,0.6); }
.control { display:flex; align-items:center; gap:8px; padding:6px; border-radius:8px; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); border:1px solid rgba(255,255,255,0.02); min-height:var(--control-h); }
label { font-size:13px; color:var(--muted); min-width:90px; }
input[type="range"] { width:160px; }
input[type="color"] { width:40px; height:32px; border-radius:6px; border:none; padding:0; }

/* Buttons */
.btn { background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; border:none; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:600; }
.btn.ghost { background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--muted); }
.btn.small { padding:8px 10px; font-size:13px; }

/* Player area */
.player { display:flex; gap:12px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.time { font-family:monospace; color:var(--muted); font-size:13px; }

/* Canvas area preview */
#previewWrap { background:#000; border-radius:10px; overflow:hidden; height:420px; display:flex; align-items:center; justify-content:center; position:relative; }
#previewCanvas { width:100%; height:100%; display:block; background:#000; }

/* Panel for advanced options */
.panel { display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; }

/* ===== Combobox readable theme ===== */
select, .select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  padding: 8px 36px 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  box-shadow: none;
}
select option, .select option { color: #ffffff; background: #0b0c10; }
select:focus, .select:focus { box-shadow: 0 0 0 4px rgba(255,106,0,0.12); border-color: rgba(255,106,0,0.9); }
select.custom-arrow, .select.custom-arrow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 40px;
}
select::-ms-expand { display: none; }
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #fff; }

/* Stage mode: hide controls and expand preview */
.stage-mode body, .stage-mode .container { padding:0; margin:0; }
.stage-mode .topbar, .stage-mode header, .stage-mode .controls, .stage-mode .panel, .stage-mode .player { display:none !important; }
.stage-mode #previewWrap { height:100vh; border-radius:0; }

/* Responsive */
@media (max-width:900px) {
  #previewWrap { height:320px; }
  .control label { display:none; }
}

/* Visualizer page specific */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding:14px 18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-bottom:1px solid rgba(255,255,255,0.03);box-shadow:0 6px 30px rgba(0,0,0,0.6);
}
.title{font-size:16px;font-weight:600;}
.controls-row{display:flex;gap:12px;align-items:center;}
.control{background:var(--panel);border-radius:8px;padding:8px;display:flex;gap:8px;align-items:center;min-height:var(--control-h);box-shadow:inset 0 -1px 0 rgba(255,255,255,0.02);}
.btn{height:40px;min-width:44px;padding:0 12px;border-radius:8px;border:none;cursor:pointer;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-weight:600;box-shadow:0 8px 26px rgba(238,9,121,0.18);}
.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:8px 12px;border-radius:8px;}
.stage{display:flex;gap:18px;padding:18px;height:calc(100vh - 86px);box-sizing:border-box;}
#canvasWrap{flex:1;background:#000;border-radius:12px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 20px 60px rgba(0,0,0,0.6);}
canvas{display:block;width:100%;height:100%;background:#000;}
.panel{width:360px;max-width:38%;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:14px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;}
.group{background:var(--card);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;}
.row{display:flex;gap:8px;align-items:center;}
.label{font-size:12px;color:var(--muted);width:120px;}
.select,.input{flex:1;background:transparent;border:none;color:#fff;padding:8px 10px;border-radius:8px;outline:none;}
.range{width:100%;}
.toggle{width:46px;height:26px;background:rgba(255,255,255,0.06);border-radius:999px;position:relative;cursor:pointer;}
.toggle .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:all .18s;}
.toggle.on{background:linear-gradient(90deg,var(--accent),var(--accent-2));}
.toggle.on .knob{left:23px;background:#fff;}
.divider{height:1px;background:rgba(255,255,255,0.03);margin:6px 0;border-radius:2px;}