/* ── Reset ── */

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



/* ── Tokens ── */

:root{

  --bg:#000;

  --panel:#000;

  --border:#1f1f1f;

  --label:#555;

  --btn-bg:#111;

  --btn-fg:#888;

  --btn-active-bg:#fff;

  --btn-active-fg:#000;

  --accent:#cdabfe;

  --accent2:#fe7141;

  --font:'Geist Mono',monospace;

  --font-body:'Geist',sans-serif;

  --panel-w:325px;

  --gap:16px;

  --header-h:48px;

  --radius:4px;

}



/* ── Base ── */

html,body{height:100%;background:#191919 !important;color:#fff;font-family:var(--font-body);font-size:11px;overflow:hidden}



/* ── Header ── */

header{

  position:fixed;top:0;left:0;right:0;

  height:var(--header-h);

  background:#000;

  border-bottom:1px solid rgba(255,255,255,0.1);

  display:flex;align-items:center;

  padding:0;z-index:100;

}

.logo-svg{

  display:flex;align-items:center;

  height:var(--header-h);

  flex-shrink:0;

  overflow:hidden;

  padding-left:0;

  margin-left:0;

}

.logo-svg svg{height:var(--header-h);width:auto;display:block;}

.logo span{font-weight:400}

.nav-subtitle{font-size:9px;font-weight:400;color:rgba(255,255,255,0.55);letter-spacing:0.04em;position:absolute;left:calc(100% - var(--panel-w) - var(--gap));white-space:nowrap;}



/* ── Canvas area ── */

.canvas-area{

  position:fixed;

  top:var(--header-h);left:0;

  right:calc(var(--panel-w) + var(--gap));

  bottom:0;

  display:flex;align-items:center;justify-content:center;

  background:#191919;

}

.canvas-wrapper{

  position:relative;

  display:flex;align-items:center;justify-content:center;

  background:#191919;

}

#glCanvas,#bloomCanvas{

  display:block;

  position:absolute;

  background:transparent;inset:0;

  pointer-events:none;

  width:100%!important;height:100%!important;

}

#bloomCanvas{background:#000}



/* drop overlay */

#dropOverlay{

  position:fixed;

  top:var(--header-h);left:0;

  right:calc(var(--panel-w) + var(--gap));

  bottom:0;

  display:flex;flex-direction:column;align-items:center;justify-content:center;

  cursor:pointer;

  z-index:5;

}

/* Drop border: covers full canvas-area with 16px padding (Figma spec) */

.drop-border{

  position:absolute;

  inset:16px;

  pointer-events:none;

  z-index:3;

}

.drop-border svg{

  position:absolute;inset:0;width:100%;height:100%;overflow:visible;

}

/* Hide drop-border when media is loaded */

.drop-border.hidden{display:none;}

#dropOverlay.has-media{display:none}

#dropOverlay.drag-over .drop-border{border-color:#666}

.drop-arrow{font-size:20px;margin-bottom:12px;color:#888;line-height:1;}

.drop-title{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#999;margin-bottom:4px}

.drop-sub{font-size:10px;color:#666;letter-spacing:0.06em}

#replaceHover{

  position:absolute;inset:0;

  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;

  background:rgba(0,0,0,0.35);

  opacity:0;pointer-events:none;

  transition:opacity .2s;z-index:6;

}

#canvasArea.has-source #canvasWrapper:hover #replaceHover{opacity:1;pointer-events:auto;cursor:pointer;}

.replace-icon{font-size:40px;color:rgba(255,255,255,0.85);line-height:1;}

.replace-label{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.75);}



/* canvas change btn */





/* ── Floating panel ── */

.panel{

  position:fixed;

  top:calc(var(--header-h) + var(--gap));

  right:var(--gap);

  bottom:var(--gap);

  width:var(--panel-w);

  background:var(--panel);

  border:1px solid rgba(255,255,255,0.15);

  display:flex;flex-direction:column;

  z-index:50;

  overflow:hidden;

}

.panel-scroll{flex:1;overflow-y:auto;overflow-x:hidden}

.panel-scroll::-webkit-scrollbar{width:3px}

.panel-scroll::-webkit-scrollbar-thumb{background:#222}



/* ── Sections ── */

.section{border-top:1px solid rgba(255,255,255,0.15)}

.section-header{

  display:flex;align-items:center;justify-content:space-between;

  padding:0 16px;height:40px;cursor:pointer;

  user-select:none;

}

.section-header:hover{background:#0a0a0a}

.section-label{

  font-size:9px;font-weight:600;

  letter-spacing:0.14em;text-transform:uppercase;

  color:#fff;

  font-family:'Geist Mono','GeistMono','Geist Mono Variable',ui-monospace,monospace !important;

}

.section-chevron{

  display:flex;align-items:center;

  transition:transform .2s;

  flex-shrink:0;

}

.section.collapsed .section-chevron{transform:rotate(180deg)}

.section-body{padding:14px 16px 16px}

.section.collapsed .section-body{display:none}



/* ── Toggle groups ── */

.toggle-group{display:flex;gap:2px}

.toggle-group .tbtn{

  flex:1;height:32px!important;min-height:32px;

  background:var(--btn-bg);border:1px solid var(--border);

  color:var(--btn-fg);font-family:var(--font-body);

  font-size:9px;font-weight:500;letter-spacing:.06em;

  cursor:pointer;transition:all .1s;text-transform:uppercase;

}

.toggle-group .tbtn.active{

  background:var(--btn-active-bg);border-color:var(--btn-active-bg);

  color:var(--btn-active-fg);

}

.toggle-group .tbtn:hover:not(.active){background:#1a1a1a;color:#aaa}



/* Effect tab: slightly taller */

.effect-tabs .tbtn{height:36px;font-size:9px}



/* ── Sliders ── */

.slider-item{margin-top:10px}

.slider-header{display:flex;justify-content:space-between;margin-bottom:4px}

.slider-label-text{font-size:9px;color:#555;letter-spacing:.08em;text-transform:uppercase}

.slider-val{font-size:9px;color:#777;min-width:36px;text-align:right}

.slider{

  width:100%;height:2px;

  -webkit-appearance:none;appearance:none;

  background:#1f1f1f;border-radius:1px;cursor:pointer;outline:none;

}

.slider::-webkit-slider-thumb{

  -webkit-appearance:none;width:10px;height:10px;

  border-radius:50%;background:#fff;cursor:pointer;

}

.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}

.toggle-row span{font-size:9px;color:#555;letter-spacing:.08em;text-transform:uppercase}

.switch{width:28px;height:16px;background:#1f1f1f;border:1px solid #333;border-radius:8px;position:relative;cursor:pointer;transition:background .2s}

.switch input{display:none}

.switch-thumb{position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#555;transition:all .2s}

.switch input:checked~.switch-thumb{transform:translateX(12px);background:#fff}

.switch:has(input:checked){background:#333}



/* ── Gradient editor ── */

.gradient-preview{height:20px;width:100%;cursor:crosshair;position:relative;border:1px solid #222;margin-bottom:2px;border-radius:2px}

.handles-track{height:16px;position:relative;width:100%;cursor:crosshair}

.ghandle{

  position:absolute;top:0;width:12px;height:12px;

  border:2px solid #fff;border-radius:2px;

  transform:translateX(-50%);cursor:pointer;

  box-shadow:0 0 0 1px #000;

}

.ghandle.selected{border-color:var(--accent)}

.stop-editor{margin-top:8px;padding:8px;background:#0a0a0a;border:1px solid #1f1f1f;border-radius:2px}

.stop-editor-row{display:flex;align-items:center;gap:6px;margin-bottom:6px}

.stop-editor-swatch{width:20px;height:20px;border:1px solid #333;cursor:pointer;border-radius:2px;flex-shrink:0;position:relative;overflow:hidden}

.stop-editor-swatch input[type=color]{position:absolute;inset:-4px;opacity:0;cursor:pointer;width:200%;height:200%}

.stop-editor-label{font-size:9px;color:#555;letter-spacing:.06em;text-transform:uppercase}

.stop-editor-pos{

  width:38px;background:#111;border:1px solid #1f1f1f;

  color:#aaa;font-family:var(--font);font-size:10px;

  padding:2px 4px;text-align:center;border-radius:2px;

}

.stop-editor-del{background:none;border:none;color:#444;cursor:pointer;font-size:13px;padding:0 2px}

.stop-editor-del:hover{color:#fff}

.add-stop-btn{

  flex:1;height:24px;background:#111;border:1px solid #1f1f1f;

  color:#aaa;font-family:var(--font);font-size:9px;

  cursor:pointer;letter-spacing:.06em;text-transform:uppercase;

  border-radius:2px;

}

.add-stop-btn:hover{background:#1a1a1a;color:#ccc;border-color:#333}

#invertStopsBtn,#randomStopsBtn{

  font-size:14px;color:#666;letter-spacing:0;

  border-color:#2a2a2a;

}

#invertStopsBtn:hover,#randomStopsBtn:hover{

  background:#1f1f1f;color:#ddd;border-color:#444;

}

.stop-actions{display:flex;gap:4px;margin-top:6px}



/* ── Presets ── */

.preset-actions{display:flex;gap:2px;margin-bottom:10px}

.preset-actions .tbtn{height:28px;font-size:9px}

.presets-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}

.preset-card{cursor:pointer;border:1px solid #1f1f1f;border-radius:2px;overflow:hidden;transition:border-color .1s}

.preset-card:hover{border-color:#333}

.preset-card.active{border-color:var(--accent)}

.preset-thumb{height:24px;width:100%}

.preset-name{font-size:9px;color:#aaa;letter-spacing:.08em;text-transform:uppercase;padding:3px 6px}



/* ── Video playback ── */

.video-controls{display:flex;align-items:center;gap:8px;margin-top:6px}

.play-btn{width:28px;height:28px;background:#333;border:1px solid rgba(255,255,255,0.2);border-radius:50%;color:#fff;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;}

.play-btn:hover{background:#444;}

.video-progress{flex:1;height:3px;-webkit-appearance:none;background:#333;cursor:pointer}

.video-progress::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:#fff}

.video-time{font-size:9px;color:#444;min-width:28px;text-align:right}



/* ── Panel footer ── */

.panel-footer{

  /* Figma: VERTICAL, padding 16px all sides, black bg */

  display:flex;flex-direction:column;

  padding:16px;gap:0;

  border-top:1px solid rgba(255,255,255,0.15);

  background:#000;flex-shrink:0;

}

.footer-btn-row{

  /* Figma: HORIZONTAL, gap 2px between buttons */

  display:flex;gap:2px;width:100%;

}

.panel-footer button{

  /* Figma: paddingTop/Bottom 16px, paddingLeft/Right 4px, height HUG */

  flex:1;height:auto;

  padding:16px 4px;

  font-family:var(--font-body);font-size:9px;

  font-weight:500;letter-spacing:.08em;text-transform:uppercase;

  border:none;cursor:pointer;transition:opacity .1s;

}

.panel-footer button:hover{opacity:.85}

#uploadBtn{background:#1D1D1D;color:#fff;font-weight:500;}

#exportBtn{background:#fff;color:#000;font-weight:500;}

#exportBtn:disabled{background:#fff;color:#000;cursor:not-allowed;}



/* ── Misc ── */

.hidden{display:none!important}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:#222;color:#fff;padding:8px 16px;font-size:10px;border-radius:2px;opacity:0;transition:all .25s;pointer-events:none;z-index:999;letter-spacing:.06em}

.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.panel-scroll{display:flex!important;flex-direction:column;}

#secStyle{order:10;}#secCanvas{order:20;}#secAdjustments{order:30;}#secColor{order:40;}#secPlayback{order:80;}#secGrain{order:70;}

.bloom-mode #secCanvas{order:10;}.bloom-mode #secAdjustments{order:20;}.bloom-mode #secColor{order:30;}.bloom-mode #secGrain{order:60;}.bloom-mode #secPlayback{order:70;}

#secPlayback.img-mode .section-header{opacity:0.4;}#secPlayback.img-mode .section-body{opacity:0.2;pointer-events:none;}

.color-swatch{width:22px;height:22px;border:1px solid #555;cursor:pointer;position:relative;overflow:hidden;flex-shrink:0;}

.color-swatch input[type="color"]{position:absolute;inset:-3px;width:calc(100%+6px);height:calc(100%+6px);border:none;cursor:pointer;opacity:0;}

.slider-label-text{color:#fff!important;}.slider-val{color:#fff!important;}.toggle-row span,.stop-editor-label{color:#fff!important;}

.toggle-group .tbtn{height:21px!important;min-height:21px!important;max-height:21px!important;padding:0!important;line-height:21px!important;}

.add-stop-btn,.preset-actions .tbtn{height:21px!important;max-height:21px!important;padding:0!important;line-height:21px!important;}

#uploadBtn,#exportBtn{height:42px!important;padding:16px 4px!important;}

/* ═══════════════════════════════════════════════════════════

   MOBILE LAYOUT  ≤ 768px

   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {



  /* ── Header ── */

  header { padding: 0 16px; }

  .logo-svg { width: auto; }

  .logo-svg svg { height: 32px; width: auto; }

  .nav-subtitle {

    position: static !important;

    left: auto !important;

    margin-left: auto;

    font-size: 9px;

  }



  /* ── Canvas area: full width, fixed height ── */

  .canvas-area {

    right: 0 !important;

    bottom: auto !important;

    height: calc(50vh - var(--header-h));

    min-height: 180px;

  }

  #dropOverlay {

    right: 0 !important;

    bottom: auto !important;

    height: calc(50vh - var(--header-h));

    min-height: 180px;

  }



  /* ── Panel: full width below canvas, scroll above button bar ── */

  .panel {

    position: fixed !important;

    top: 50vh !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 58px !important;

    width: 100% !important;

    border-radius: 0 !important;

    border: none !important;

    border-top: 1px solid rgba(255,255,255,0.15) !important;

    overflow-y: auto;

  }

  .panel-scroll {

    padding-bottom: 8px;

    overflow-y: visible !important;

    max-height: none !important;

  }



  /* ── Footer buttons: fixed to bottom, full width ── */

  .panel-footer {

    position: fixed !important;

    bottom: 0; left: 0; right: 0;

    z-index: 100;

    padding: 0 !important;

    border-top: 1px solid rgba(255,255,255,0.15) !important;

    background: #000;

  }

  .footer-btn-row {

    gap: 0 !important;

  }

  .panel-footer button {

    height: 58px !important;

    padding: 0 !important;

    font-size: 11px !important;

    letter-spacing: 0.08em;

  }

  #uploadBtn, #exportBtn {

    height: 58px !important;

    padding: 0 !important;

  }



  /* ── Sections: full width toggle buttons ── */

  .toggle-group button,

  .tbtn {

    font-size: 10px;

  }



  /* ── Canvas wrapper fills area ── */

  #canvasWrapper {

    max-width: 100%;

    max-height: 100%;

  }

}



/* ── Status banner (export / error) ── */

#statusBanner{

  position:absolute;

  left:50%;top:50%;

  transform:translate(-50%,-50%);

  width:511px;max-width:90%;

  height:64px;

  background:#fff;

  color:#000;

  display:none;

  align-items:center;justify-content:center;

  font-family:var(--font);font-size:12px;font-weight:500;

  letter-spacing:0.01em;

  z-index:10;

  pointer-events:none;

}

#statusBanner.visible{display:flex;}