*{box-sizing:border-box} :root{color-scheme:dark;--bg:#111216;--panel:#1b1c23;--muted:#9295a2;--text:#f1f1f4;--accent:#f2d45c} body{margin:0;background:radial-gradient(ellipse at 12% 5%,#26233a 0,transparent 27%),radial-gradient(ellipse at 95% 88%,#252c45 0,transparent 24%),var(--bg);color:var(--text);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}.topbar{height:76px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,60px);background:#111216b8;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#292a34;color:var(--accent);font-size:23px}.brand strong,.brand small{display:block}.brand strong{font-size:15px;letter-spacing:.2px}.brand small{font-size:11px;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:22px}.local-tag{font-size:11px;color:#9fbba9}.quiet-btn,.small-btn{border:1px solid #ffffff1c;background:#ffffff08;color:#c9cbd3;border-radius:9px;padding:9px 13px;cursor:pointer}.layout{max-width:1480px;margin:0 auto;padding:38px clamp(16px,3vw,44px) 55px;display:grid;grid-template-columns:minmax(0,1.8fr) minmax(310px,.9fr);gap:30px}.section-head{display:flex;align-items:end;justify-content:space-between;margin:0 0 16px}.eyebrow{margin:0 0 5px;color:#8f91a0;font-size:10px;font-weight:750;letter-spacing:1.8px}.section-head h1,.section-head h2{font-size:24px;letter-spacing:-.7px;margin:0}.ratio-tag{font-size:11px;color:#a4a6b1;border:1px solid #ffffff1c;border-radius:20px;padding:5px 10px}.preview-shell{position:relative;width:100%;max-height:680px;margin-inline:auto;aspect-ratio:16/9;transition:aspect-ratio .25s ease,width .25s ease;border:1px solid #ffffff16;border-radius:15px;overflow:hidden;background:#17181d;box-shadow:0 25px 70px #0008}canvas{width:100%;height:100%;display:block}.preview-overlay{position:absolute;top:12px;left:14px;right:14px;display:flex;justify-content:space-between;pointer-events:none;color:#ffffff80;font-size:9px;letter-spacing:1.2px}.transport{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 4px 22px}.track-meta strong,.track-meta span{display:block}.track-meta strong{font-size:14px}.track-meta span{font-size:12px;color:var(--muted);margin-top:2px}.transport-controls{display:flex;align-items:center;gap:13px;min-width:55%;}.round-btn{width:40px;height:40px;border:1px solid #ffffff30;border-radius:50%;background:#ffffff0d;color:white;cursor:pointer;font-size:14px}.timeline-wrap{flex:1}.time-row{display:flex;justify-content:space-between;color:#a6a8b3;font-size:10px;font-variant-numeric:tabular-nums;margin-bottom:3px}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.export-card{position:relative;border:1px solid #ffffff16;border-radius:13px;padding:17px;background:#ffffff06}.export-card strong{font-size:13px}.export-card p{margin:4px 0 13px;color:var(--muted);font-size:11px}.export-actions{display:flex;gap:9px}select,.field-label input:not([type=color]):not([type=range]),.field-label select{width:100%;border:1px solid #ffffff1b;background:#15161c;color:#e7e7ec;border-radius:8px;padding:10px 11px;outline:none;font:inherit}select{min-width:0}.primary-btn{background:var(--accent);color:#1d1b12;border:0;border-radius:8px;padding:0 17px;font-weight:750;white-space:nowrap;cursor:pointer}.primary-btn:disabled{opacity:.4;cursor:not-allowed}.progress-track{height:3px;background:#ffffff13;border-radius:5px;margin-top:15px;overflow:hidden}.progress-track div{height:100%;width:0;background:var(--accent);transition:width .2s}.editor{min-width:0}.editor-heading{margin-bottom:16px}.panel{background:#1a1b22d9;border:1px solid #ffffff13;border-radius:13px;padding:17px;margin-bottom:13px}.panel h3{font-size:12px;letter-spacing:.3px;margin:0 0 15px;display:flex;gap:9px;align-items:center}.panel h3 span{font-size:10px;color:var(--accent);letter-spacing:1px}.field-label{display:block;color:#b9bbc5;font-size:11px;margin:0 0 12px}.field-label em{float:right;color:#747785;font-style:normal}.field-label input,.field-label select{display:block;margin-top:6px}.upload-box{display:flex;align-items:center;gap:10px;padding:11px;border:1px dashed #ffffff32;border-radius:9px;margin-top:9px;cursor:pointer;background:#ffffff04}.upload-box:hover{border-color:#aaa0ed;background:#ffffff08}.upload-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:#ffffff0d;color:var(--accent);font-size:19px}.upload-box span:nth-child(2){flex:1;min-width:0}.upload-box strong,.upload-box small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-box strong{font-size:11px}.upload-box small{font-size:9px;color:#858895;margin-top:2px}.upload-box b{font-size:10px;color:#d2c9ff}.hint{font-size:9px;color:#747785;margin:9px 0 0}.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-label input[type=color]{display:block;width:100%;height:36px;margin-top:6px;padding:3px;background:#15161c;border:1px solid #ffffff1b;border-radius:8px}.field-label output{float:right;color:#999cab;font-variant-numeric:tabular-nums}.tips p{font-size:10px;color:#a4a6b1;margin:0 0 9px}.tips p:last-child{margin-bottom:0}footer{text-align:center;color:#686b78;font-size:10px;padding:0 0 25px}footer span{padding:0 7px;color:var(--accent)}@media(max-width:950px){.layout{grid-template-columns:1fr;max-width:850px}.editor{display:grid;grid-template-columns:1fr 1fr;gap:12px}.editor-heading{grid-column:1/-1;margin-bottom:0}.panel{margin:0}.tips{grid-column:1/-1}}@media(max-width:580px){.topbar{height:64px}.local-tag{display:none}.layout{padding-top:22px}.section-head h1,.section-head h2{font-size:21px}.transport{align-items:flex-start;flex-direction:column}.transport-controls{width:100%;min-width:0}.editor{display:block}.panel{margin-bottom:12px}.export-actions{flex-direction:column}.primary-btn{padding:12px}.export-actions select{padding:12px}}

/* Template and canvas format selectors */
#templateSelect,#ratioSelect{border-color:#ffffff28;background:linear-gradient(135deg,#20212a,#15161c);padding:12px 13px;color:#f0eff7}
#templateSelect:focus,#ratioSelect:focus{border-color:#aaa0ed;box-shadow:0 0 0 3px #aaa0ed20}
#ratioTag{white-space:nowrap}

/* Separate collection for the 50 additional visualizer designs */
.new-design-section{margin:15px 0 17px;padding:14px;border:1px solid #a99aff35;border-radius:11px;background:linear-gradient(135deg,#a99aff0d,#ffffff03)}
.new-design-heading{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.new-design-heading strong{font-size:12px;color:#f0edf9}
.new-design-kicker{font-size:9px;letter-spacing:1.5px;font-weight:800;color:#b7a7ff}
#newVisualizerSelect{border-color:#a99aff55;background:linear-gradient(135deg,#282238,#15161c);padding:12px 13px;color:#f4efff}
#newVisualizerSelect:focus{border-color:#b7a7ff;box-shadow:0 0 0 3px #a99aff20}

/* Independent typography controls for label, title and artist */
.typography-panel{grid-column:1/-1}
.typography-intro{margin:-6px 0 13px}
.type-control{padding:12px;margin-top:10px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff04}
.type-control>strong{display:block;font-size:12px;color:#f0edf9;margin-bottom:10px}
.type-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.type-control .field-label{margin-bottom:9px}
.type-control input[type=range]{display:block;margin-top:9px}
.type-control input[type=color]{display:block;width:100%;height:35px;margin-top:6px;padding:3px;background:#15161c;border:1px solid #ffffff1b;border-radius:8px}
@media(max-width:950px){.typography-panel{grid-column:1/-1}}

/* Expand/collapse controls for editor and export sections */
.panel h3{justify-content:space-between;gap:12px}
.collapse-toggle{flex:0 0 30px;width:30px;height:30px;border:1px solid #ffffff25;border-radius:8px;background:#ffffff08;color:#e9e7f5;font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer}
.collapse-toggle:hover{background:#ffffff14;border-color:#a99aff77}
.collapse-toggle:focus-visible{outline:2px solid #b7a7ff;outline-offset:2px}
.panel-content{overflow:hidden}
.panel.is-collapsed .panel-content{display:none}
.export-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.export-card.is-collapsed> :not(:first-child),.export-card.is-collapsed .export-heading p{display:none}
.export-card.is-collapsed{padding-bottom:13px}
.new-design-heading strong{font-size:12px}
@media(max-width:580px){
 .type-row{grid-template-columns:1fr 1fr}
 .collapse-toggle{width:32px;height:32px}
}

/* Keep range values inside their panel: label, value and slider use a bounded grid. */
.field-label:has(output){
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:12px;
  row-gap:7px;
  min-width:0;
  width:100%;
}
.field-label:has(output) output{
  float:none;
  grid-column:2;
  grid-row:1;
  justify-self:end;
  max-width:100%;
  min-width:0;
  overflow-wrap:anywhere;
  text-align:right;
  white-space:nowrap;
  font-size:11px;
}
.field-label:has(output) input[type=range]{
  grid-column:1 / -1;
  grid-row:2;
  width:100%;
  min-width:0;
  max-width:100%;
  margin:0;
}
.field-label{min-width:0;max-width:100%;overflow-wrap:anywhere}
.panel,.panel-content,.type-control{min-width:0}
.panel-heading-actions{margin-left:auto;display:flex;align-items:center;gap:7px;flex:0 0 auto}
.section-reset{border:1px solid #ffffff22;background:#ffffff08;color:#c9c6dc;border-radius:7px;padding:5px 9px;font-size:10px;cursor:pointer;white-space:nowrap}
.section-reset:hover{background:#ffffff14;border-color:#b7a7ff77;color:#fff}
.panel h3 .panel-heading-actions .collapse-toggle{margin:0}
.download-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(5,6,12,.78);backdrop-filter:blur(9px);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.download-overlay.is-visible{opacity:1;visibility:visible}
.download-dialog{width:min(520px,100%);padding:30px 28px 25px;border:1px solid #ffffff24;border-radius:20px;background:linear-gradient(145deg,#242633,#14151c);box-shadow:0 28px 100px #000b;text-align:center;transform:translateY(14px) scale(.98);transition:transform .25s ease}
.download-overlay.is-visible .download-dialog{transform:translateY(0) scale(1)}
.download-spinner{width:46px;height:46px;margin:0 auto 17px;border:3px solid #ffffff20;border-top-color:var(--accent);border-right-color:var(--accent);border-radius:50%;animation:downloadSpin .9s linear infinite}
@keyframes downloadSpin{to{transform:rotate(360deg)}}
.download-kicker{margin:0 0 7px;color:var(--accent);font-size:10px;letter-spacing:2px;font-weight:800}
.download-dialog h2{margin:0 0 9px;color:#f4f4f7;font-size:21px}
.download-dialog>p:not(.download-kicker):not(.download-note){margin:0 auto 18px;max-width:390px;color:#b8bac7;font-size:12px;line-height:1.55}
.download-progress{height:9px;border-radius:20px;background:#ffffff19;overflow:hidden}
.download-progress>div{height:100%;width:0;border-radius:20px;background:linear-gradient(90deg,var(--accent),#ffffff);box-shadow:0 0 18px var(--accent);transition:width .35s ease}
.download-progress-meta{display:flex;justify-content:space-between;gap:12px;margin-top:9px;color:#e5e5ed;font-size:11px;font-variant-numeric:tabular-nums}
.download-note{margin:18px 0 0;color:#777b8d;font-size:10px}
@media(max-width:580px){
 .field-label:has(output) output{font-size:10px}
 .download-dialog{padding:25px 20px 21px}
}

/* Export controls: keep format, resolution and download action aligned and responsive. */
.export-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:stretch;gap:9px}
.export-actions select{min-width:0;max-width:100%;font-size:11px}
.export-actions .primary-btn{min-width:145px}
@media(max-width:580px){.export-actions{display:flex;flex-direction:column}.export-actions select,.export-actions .primary-btn{width:100%}}

/* Typography size controls: slider, numeric value and +/- stay aligned on mobile. */
.font-size-control{min-width:0;display:flex;flex-direction:column;gap:7px}
.font-size-caption{font-size:12px;color:var(--muted,#aeb2c2)}
.font-size-row{display:grid;grid-template-columns:34px minmax(60px,1fr) 48px 34px;align-items:center;gap:7px;min-width:0}
.font-size-row input[type=range]{width:100%;min-width:0;margin:0}
.font-size-row output{font-size:11px;text-align:center;color:var(--text,#f4f4f7);font-variant-numeric:tabular-nums;white-space:nowrap}
.font-size-step{height:32px;min-width:34px;border:1px solid #ffffff25;border-radius:8px;background:#ffffff0b;color:#f5f5f7;font-size:19px;line-height:1;cursor:pointer}
.font-size-step:active{background:var(--accent,#f2d45c);color:#151515}
.beat-pulse-toggle{display:flex;align-items:center;gap:11px;margin:13px 0;padding:12px;border:1px solid #ffffff1c;border-radius:11px;background:#ffffff06;cursor:pointer}
.beat-pulse-toggle input{position:absolute;opacity:0;pointer-events:none}
.beat-pulse-toggle>span:last-child{display:flex;flex-direction:column;gap:3px}
.beat-pulse-toggle strong{font-size:12px;color:#f1f1f5;font-weight:650}
.beat-pulse-toggle small{font-size:10px;color:#a9adbb}
.beat-switch{position:relative;flex:0 0 39px;width:39px;height:22px;border-radius:20px;background:#454653;transition:background .2s}
.beat-switch:after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#fff;transition:transform .2s}
.beat-pulse-toggle input:checked+.beat-switch{background:var(--accent,#f2d45c)}
.beat-pulse-toggle input:checked+.beat-switch:after{transform:translateX(17px);background:#171717}
.download-dialog{max-width:366px;border-radius:15px;padding:26px 20px 22px}
.download-dialog h2{font-size:17px;letter-spacing:-.2px}
.download-dialog>p:not(.download-kicker):not(.download-note){font-size:10px;line-height:1.5}
.download-kicker{font-size:8px;letter-spacing:1.7px}
.download-note{font-size:9px}
.download-progress-meta{font-size:9px}
.export-actions select{min-width:0}

/* Independent text placement controls */
.text-position-controls{margin-top:13px;padding:13px;border:1px solid #ffffff1c;border-radius:11px;background:#ffffff05;display:grid;gap:8px}
.text-position-controls>strong{font-size:12px;color:#e8e9f0;margin-bottom:2px}
.text-position-controls .field-label{font-size:11px;margin:0}
.text-position-controls .field-label output{float:right;color:#f2d45c;font-variant-numeric:tabular-nums}
.text-position-controls input[type=range]{width:100%;display:block;margin-top:6px}
.text-position-reset{justify-self:start;padding:7px 12px;font-size:11px}

/* WAVORA brand identity */
.brand{display:flex;align-items:center;min-width:0}
.brand-name{display:block;color:#f3efff;font-family:"Syne",sans-serif;font-size:clamp(25px,3vw,34px);font-weight:800;letter-spacing:3px;line-height:1}
footer strong{color:#f3efff;letter-spacing:1.8px}
footer small{display:inline-block;margin-top:7px;color:#85889a;font-size:10px}
.download-dialog{gap:12px}
/* Tablet adaptation */
@media (min-width:600px) and (max-width:1100px){
  .topbar{padding:0 22px}
  .layout{width:min(100% - 36px,1040px);grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:18px;align-items:start}
  .workspace,.editor{min-width:0}
  .editor{display:flex;flex-direction:column;gap:12px}
  .editor-heading{margin-bottom:0}
  .panel{margin:0;min-width:0;padding:16px}
  .preview-shell{width:100%;max-width:100%;overflow:hidden}
  .preview-shell canvas{display:block;width:100%;height:auto}
  .export-actions{flex-wrap:wrap}
  .export-actions select{min-width:0;flex:1 1 100%}
  .transport-controls{min-width:0}
  .field-label input,.field-label select{max-width:100%}
}
@media (min-width:600px) and (max-width:820px) and (orientation:portrait){
  .layout{grid-template-columns:1fr;max-width:760px}
  .editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .editor-heading,.tips{grid-column:1/-1}
  .panel{padding:15px}
}
@media (min-width:600px) and (max-width:1100px) and (orientation:landscape){
  .layout{grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:16px}
  .editor{display:flex;flex-direction:column}
  .panel{padding:14px}
}
@media (max-width:599px){
  .brand-logo{width:166px;height:52px}
}