*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#e8e8e8;
  --surface:#ffffff;
  --surface2:#f4f4f4;
  --surface3:#efefef;
  --border:#000000;
  --border2:#aaaaaa;
  --text:#000000;
  --muted:#888888;
  --muted2:#555555;
  --accent:#000000;
  --accent-dim:#333333;
  --accent-glow:rgba(0,0,0,0.06);
  --sidebar-w:296px;
  --radius:0px;
  --font-mono:'JetBrains Mono',monospace;
  --font-ui:'Inter',system-ui,sans-serif;
}
html,body{height:100%;overflow:hidden;background:var(--bg);}
body{font-family:var(--font-ui);color:var(--text);font-size:13px;line-height:1.5;}

/* ── LAYOUT ── */
.app{display:flex;height:100vh;overflow:hidden;}

/* ── SIDEBAR ── */
.sidebar{
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border-right:2px solid var(--border);
  overflow:hidden;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px 11px;
  border-bottom:2px solid var(--border);
  flex-shrink:0;
}
.brand-pip{
  width:7px;height:7px;
  background:var(--accent);
  border-radius:0;
  flex-shrink:0;
}
.brand-name{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.18em;
  color:var(--text);
  text-transform:uppercase;
}
.brand-version{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:9px;
  color:var(--muted);
  letter-spacing:0.05em;
}

.sidebar-scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#ccc transparent;}
.sidebar-scroll::-webkit-scrollbar{width:3px;}
.sidebar-scroll::-webkit-scrollbar-thumb{background:#ccc;}

/* ── ACCORDION PANEL ── */
.panel{border-bottom:1px solid #d0d0d0;}
.panel-hdr{
  display:flex;align-items:center;gap:8px;
  width:100%;
  padding:9px 16px;
  background:none;border:none;cursor:pointer;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:9px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  transition:color 0.1s,background 0.1s;
  text-align:left;
}
.panel-hdr:hover{color:var(--text);background:var(--surface2);}
.panel-hdr.open{color:var(--text);}
.panel-chevron{
  margin-left:auto;
  width:14px;height:14px;
  flex-shrink:0;
  transition:transform 0.2s;
  color:#bbb;
}
.panel-hdr.open .panel-chevron{transform:rotate(180deg);color:var(--text);}
.panel-body{
  overflow:hidden;
  max-height:0;
  transition:max-height 0.22s ease;
}
.panel-body.open{max-height:900px;}
.panel-inner{padding:4px 16px 14px;}

/* ── CONTROLS ── */
.ctrl{margin-bottom:13px;}
.ctrl:last-child{margin-bottom:0;}
.ctrl-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.ctrl-label{
  font-family:var(--font-mono);
  font-size:9px;font-weight:500;
  letter-spacing:0.06em;
  color:var(--muted);
  text-transform:uppercase;
}
.ctrl-val{
  font-family:var(--font-mono);
  font-size:9.5px;font-weight:600;
  color:var(--text);
  background:var(--surface2);
  border:1px solid #d0d0d0;
  padding:1px 6px;
  min-width:48px;text-align:right;
}
.slider-wrap{display:flex;align-items:center;gap:8px;}
input[type="range"]{
  flex:1;height:4px;
  background:var(--surface3);
  border-radius:2px;
  outline:none;
  appearance:none;-webkit-appearance:none;
  cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:13px;height:13px;
  border-radius:0;
  background:var(--text);
  cursor:pointer;
  border:none;
}
input[type="range"]::-webkit-slider-thumb:hover{background:#333;}
input[type="range"]::-moz-range-thumb{
  width:13px;height:13px;border-radius:0;
  background:var(--text);cursor:pointer;
  border:none;
}
.num-in{
  width:52px;
  background:var(--surface);
  border:1px solid #bbb;
  border-radius:0;
  color:var(--text);
  font-family:var(--font-mono);
  font-size:10px;
  padding:3px 5px;
  text-align:right;
}
.num-in:focus{outline:none;border-color:var(--text);}
select.ctrl-select{
  width:100%;
  background:var(--surface);
  border:1px solid #bbb;
  border-radius:0;
  color:var(--text);
  font-family:var(--font-mono);
  font-size:10.5px;
  padding:6px 8px;
  cursor:pointer;
  outline:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  padding-right:24px;
}
select.ctrl-select:focus{border-color:var(--text);}

/* ── WAVE BUTTONS ── */
.wave-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:2px;}
.wave-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:7px 4px 5px;
  background:var(--surface);
  border:1px solid #bbb;
  border-radius:0;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:8px;font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.12s;
}
.wave-btn:hover{border-color:var(--text);color:var(--text);background:var(--surface2);}
.wave-btn.active{
  background:var(--text);
  border-color:var(--text);
  color:var(--surface);
}
.wave-btn.active svg{stroke:#fff;}
.wave-btn svg{display:block;}

/* ── PALETTE ── */
#palette-swatches{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:5px;
  margin-bottom:10px;
}
.palette-swatch{
  background:var(--surface);
  border:1px solid #d0d0d0;
  padding:7px;
}
.swatch-color-row{display:flex;align-items:center;gap:5px;}
.swatch-color-row input[type="color"]{
  width:28px;height:28px;
  border:1px solid #bbb;
  background:none;cursor:pointer;padding:2px;
  flex-shrink:0;
}
.swatch-hex{
  flex:1;min-width:0;
  background:var(--surface);
  border:1px solid #bbb;
  color:var(--text);
  font-family:var(--font-mono);
  font-size:9.5px;
  padding:3px 4px;
  text-transform:uppercase;
}
.swatch-hex:focus{outline:none;border-color:var(--text);}
.swatch-trans{
  margin-top:5px;
  font-family:var(--font-mono);
  font-size:8.5px;
  color:var(--muted);
  display:flex;align-items:center;gap:4px;
  cursor:pointer;
}
.swatch-trans input[type="checkbox"]{accent-color:var(--text);cursor:pointer;}
.palette-actions{display:flex;gap:5px;margin-top:2px;}
.btn-sm{
  flex:1;
  padding:6px 8px;
  background:var(--surface);
  border:1px solid #bbb;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:9px;font-weight:600;
  letter-spacing:0.04em;
  cursor:pointer;
  transition:all 0.12s;
  text-align:center;
}
.btn-sm:hover{border-color:var(--text);color:var(--text);}

/* ── WAVE VIDEO TOGGLE ── */
.checkbox-row{
  display:flex;align-items:center;gap:7px;
  padding:7px 0 0;
  font-family:var(--font-mono);
  font-size:9.5px;
  color:var(--muted);
  cursor:pointer;
}
.checkbox-row input[type="checkbox"]{accent-color:var(--text);cursor:pointer;}

/* ── GENERATE BUTTON ── */
.sidebar-footer{
  flex-shrink:0;
  padding:10px;
  border-top:2px solid var(--border);
  background:var(--surface);
}
#btn-generate{
  width:100%;
  padding:13px 16px;
  background:var(--text);
  border:2px solid var(--text);
  color:var(--surface);
  font-family:var(--font-mono);
  font-size:11px;font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.12s;
}
#btn-generate:hover:not(:disabled){background:#222;border-color:#222;}
#btn-generate:disabled{background:var(--surface);border-color:#bbb;color:#bbb;cursor:not-allowed;}

/* ── PROGRESS ── */
#progress-wrapper{margin-top:10px;}
.prog-labels{
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);
  font-size:9px;
  color:var(--muted);
  margin-bottom:5px;
}
#progress-container{
  height:2px;
  background:#d0d0d0;
  overflow:hidden;
}
#progress-bar{
  height:100%;
  background:var(--text);
  width:0%;
  transition:width 0.15s linear;
}

/* ── MAIN AREA ── */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--bg);
  scrollbar-width:thin;
  scrollbar-color:#ccc transparent;
}
/* split view: preview + output side by side */
.main-split{
  flex:1;
  display:flex;
  gap:0;
  min-height:0;
  padding:0 12px 12px;
}
.preview-pane{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}
#tile-output{
  display:none;
  flex:1;
  flex-direction:column;
  min-width:0;
  border-left:2px solid var(--border);
  margin-left:12px;
  padding-left:12px;
}
.main-split.has-output #tile-output{
  display:flex;
}

/* ── UPLOAD ZONE ── */
#dropZone{
  flex-shrink:0;
  position:relative;
  margin:12px 12px 0;
  border:1.5px dashed #bbb;
  padding:36px 24px;
  text-align:center;
  cursor:pointer;
  transition:border-color 0.15s,background 0.15s;
  background:var(--surface);
}
#dropZone:hover,#dropZone.drag-active{
  border-color:var(--text);
  background:var(--surface2);
}
#fileInput{
  position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;
}
.drop-icon{
  width:40px;height:40px;
  border:1.5px dashed #bbb;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:12px;
  color:var(--muted);
}
.drop-title{
  font-size:13px;font-weight:600;
  color:var(--text);margin-bottom:4px;
}
.drop-sub{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--muted);
  letter-spacing:0.04em;
}
#fileName{
  margin-top:0;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--muted);
  font-weight:500;
  letter-spacing:0.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* compact drop zone when media is loaded */
.main:has(#preview-canvas:not(.hidden)) #dropZone{
  padding:8px 16px;
  margin-bottom:0;
}
.main:has(#preview-canvas:not(.hidden)) #dropZone .drop-icon,
.main:has(#preview-canvas:not(.hidden)) #dropZone .drop-title,
.main:has(#preview-canvas:not(.hidden)) #dropZone .drop-sub{
  display:none;
}
.main:has(#preview-canvas:not(.hidden)) #dropZone #fileName{
  margin-top:0;
}

/* Video samples row — only in sidebar panel, hidden by default */
.video-samples-row{margin-top:10px;}

/* ── PREVIEW AREA ── */
.preview-section{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.preview-meta{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;
  flex-shrink:0;
  border-bottom:1px solid #d0d0d0;
  margin-bottom:8px;
}
#res-display{
  font-family:var(--font-mono);
  font-size:9px;
  color:var(--muted);
  letter-spacing:0.04em;
}
#preview-nav{
  display:flex;align-items:center;gap:5px;
  margin-left:auto;
}
.nav-btn{
  width:24px;height:24px;
  background:var(--surface);
  border:1px solid #bbb;
  color:var(--muted);
  font-size:11px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.12s;
}
.nav-btn:hover:not(:disabled){border-color:var(--text);color:var(--text);}
.nav-btn:disabled{opacity:0.3;cursor:not-allowed;}
#preview-frame-label{
  font-family:var(--font-mono);
  font-size:9px;
  color:var(--muted);
  min-width:60px;text-align:center;
}
.btn-dl-preview{
  margin-left:auto;
  padding:4px 10px;
  background:var(--surface);
  border:1px solid #bbb;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:9px;font-weight:600;
  letter-spacing:0.06em;
  text-decoration:none;
  text-transform:uppercase;
  transition:all 0.12s;
  white-space:nowrap;
}
.btn-dl-preview:hover{border-color:var(--text);color:var(--text);}

.checker{
  flex:1;
  min-height:260px;
  background-color:#e0e0e0;
  background-image:
    linear-gradient(45deg,#d0d0d0 25%,transparent 25%,transparent 75%,#d0d0d0 75%),
    linear-gradient(45deg,#d0d0d0 25%,transparent 25%,transparent 75%,#d0d0d0 75%);
  background-size:16px 16px;
  background-position:0 0,8px 8px;
  border:1px solid #bbb;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  position:relative;
}
#placeholder-text{
  font-family:var(--font-mono);
  font-size:11px;
  color:#999;
  letter-spacing:0.06em;
}
#preview-canvas,#preview-canvas img{
  max-width:100%;max-height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;
}

/* ── OUTPUT ── */
/* #tile-output controlled by .has-output class on .main-split */
#output-section{display:flex;flex-direction:column;flex:1;min-height:0;}
.output-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 0 8px;
}
.output-label{
  font-family:var(--font-mono);
  font-size:9px;font-weight:600;
  color:var(--text);
  letter-spacing:0.10em;
  text-transform:uppercase;
}
.output-actions{display:flex;gap:6px;align-items:center;}
#btn-download{
  padding:5px 12px;
  background:var(--text);
  border:1px solid var(--text);
  color:var(--surface);
  font-family:var(--font-mono);
  font-size:9px;font-weight:700;
  letter-spacing:0.1em;
  text-decoration:none;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.12s;
}
#btn-download:hover{background:#333;}
#btn-clear{
  padding:5px 10px;
  background:var(--surface);
  border:1px solid #bbb;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:9px;font-weight:600;
  cursor:pointer;
  transition:all 0.12s;
}
#btn-clear:hover{border-color:var(--text);color:var(--text);}
.output-canvas{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  background-color:#e0e0e0;
  background-image:
    linear-gradient(45deg,#d0d0d0 25%,transparent 25%,transparent 75%,#d0d0d0 75%),
    linear-gradient(45deg,#d0d0d0 25%,transparent 25%,transparent 75%,#d0d0d0 75%);
  background-size:16px 16px;
  background-position:0 0,8px 8px;
  border:1px solid #bbb;
  padding:12px;
  min-height:160px;
}
#result-gif{
  max-width:100%;max-height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;
}

/* ── UTILITIES ── */
.hidden{display:none!important;}
.sep{
  height:1px;background:#d0d0d0;
  margin:10px 0;
}

/* ── SCROLLBAR (main) ── */
.main::-webkit-scrollbar{width:4px;}
.main::-webkit-scrollbar-thumb{background:#ccc;}

/* ── UPLOAD SECTION IN SIDEBAR ── */
.upload-info{
  padding:10px 16px;
  border-bottom:1px solid #d0d0d0;
}
.upload-info-label{
  font-family:var(--font-mono);
  font-size:9px;font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:8px;
}
.video-samples-ctrl{display:flex;align-items:center;gap:8px;}
.video-samples-ctrl label{
  font-family:var(--font-mono);
  font-size:9.5px;
  color:var(--muted2);
  white-space:nowrap;
}

/* ── RESPONSIVE ── */
@media(max-width:700px){
  .sidebar{width:100%;min-width:unset;max-height:50vh;}
  .app{flex-direction:column;}
  .main{min-height:50vh;}
  .main-split{flex-direction:column;}
  #tile-output{border-left:none;border-top:2px solid var(--border);margin-left:0;padding-left:0;margin-top:12px;padding-top:12px;}
}