:root{
  --bg:#0b0c0e;
  --panel:#131417;
  --panel-2:#191b1f;
  --border:#2a2c31;
  --border-soft:#202226;
  --text:#f2f0ea;
  --text-dim:#8b8d93;
  --text-dimmer:#5c5e64;
  --accent:#ff5a1f;
  --accent-soft:#3a1f12;
  --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --radius:3px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  min-height:100vh;
  background-image:
    radial-gradient(var(--border-soft) 1px, transparent 1px);
  background-size:22px 22px;
  background-position:-11px -11px;
}
.wrap{max-width:1360px;margin:0 auto;padding:28px 24px 60px;}

/* header */
header{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--border);}
.brand{display:flex;align-items:baseline;gap:12px;}
.brand h1{font-size:19px;letter-spacing:0.06em;margin:0;font-weight:700;}
.brand h1 .cursor{display:inline-block;width:9px;height:16px;background:var(--accent);margin-left:2px;vertical-align:-2px;animation:blink 1.1s steps(1) infinite;}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
header .tag{color:var(--text-dim);font-size:12px;letter-spacing:0.02em;}
header .nav-portfolio{
  color:var(--accent);
  font-size:11.5px;
  letter-spacing:0.04em;
  text-decoration:none;
  padding:5px 11px;
  border:1px solid var(--accent);
  border-radius:var(--radius);
  background:var(--accent-soft);
  transition:background .12s ease, opacity .12s ease;
}
header .nav-portfolio:hover{
  opacity:0.85;
}

/* layout */
.app{display:grid;grid-template-columns:1fr 336px;gap:22px;align-items:start;}
@media (max-width:920px){ .app{grid-template-columns:1fr;} }

/* canvas stage */
.stage{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px;}
.frame{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:
    linear-gradient(135deg, var(--panel-2) 25%, transparent 25%) -11px 0/22px 22px,
    linear-gradient(225deg, var(--panel-2) 25%, transparent 25%) -11px 0/22px 22px,
    var(--bg);
  border:1px solid var(--border-soft);
  overflow:hidden;
  cursor:pointer;
}
.frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;}
.dropzone{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;
  background:rgba(11,12,14,0.72);
  opacity:0;pointer-events:none;transition:opacity .15s ease;
  text-align:center;padding:20px;
}
.frame.drag .dropzone,.frame.empty .dropzone{opacity:1;pointer-events:auto;}
.dropzone .icon{font-size:22px;color:var(--accent);}
.dropzone p{margin:0;color:var(--text);font-size:13px;}
.dropzone span{color:var(--text-dim);font-size:11px;}

.status-line{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);
  font-size:11px;color:var(--text-dim);letter-spacing:0.02em;
}
.status-line b{color:var(--accent);font-weight:600;}

.stage-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}

/* buttons */
button{font-family:var(--mono);cursor:pointer;}
.btn{
  background:var(--panel-2);border:1px solid var(--border);color:var(--text);
  padding:9px 14px;font-size:11.5px;letter-spacing:0.04em;text-transform:uppercase;
  border-radius:var(--radius);transition:border-color .12s ease, color .12s ease;
}
.btn:hover{border-color:var(--text-dim);}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#160a04;font-weight:700;}
.btn.primary:hover{opacity:0.92;}
.btn:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

/* sidebar */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.section{margin-bottom:20px;}
.section:last-child{margin-bottom:0;}
.section-label{font-size:10.5px;letter-spacing:0.12em;color:var(--text-dimmer);text-transform:uppercase;margin-bottom:9px;display:flex;align-items:center;gap:8px;}
.section-label::after{content:'';flex:1;height:1px;background:var(--border);}

.seg{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.seg button{
  flex:1;background:var(--panel-2);color:var(--text-dim);border:none;padding:10px 8px;
  font-size:12px;letter-spacing:0.03em;text-transform:uppercase;font-weight:600;
  border-right:1px solid var(--border);
}
.seg button:last-child{border-right:none;}
.seg button.active{background:var(--accent-soft);color:var(--accent);}

.row{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;gap:10px;}
.row label{font-size:12px;color:var(--text-dim);}
.row .val{font-size:11px;color:var(--text-dimmer);min-width:34px;text-align:right;}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--border);
  border-radius:2px;outline-offset:4px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:2px;background:var(--accent);
  cursor:pointer;border:none;margin-top:-5px;
}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:2px;background:var(--accent);border:none;cursor:pointer;}
input[type=range]::-moz-range-track{height:3px;background:var(--border);border-radius:2px;}

select{
  width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--border);
  padding:8px 10px;font-size:12px;font-family:var(--mono);border-radius:var(--radius);
}

.swatches{
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px;
  max-height:250px;overflow-y:auto;padding-right:4px;margin-right:-4px;
}
.swatches::-webkit-scrollbar{width:6px;}
.swatches::-webkit-scrollbar-track{background:transparent;}
.swatches::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.swatches::-webkit-scrollbar-thumb:hover{background:var(--text-dimmer);}
.swatch{
  border:1px solid var(--border);border-radius:var(--radius);padding:6px 6px 7px;
  background:var(--panel-2);text-align:left;
}
.swatch.active{border-color:var(--accent);}
.swatch .chips{display:flex;height:14px;border-radius:2px;overflow:hidden;margin-bottom:6px;}
.swatch .chips i{flex:1;}
.swatch .name{font-size:9.5px;letter-spacing:0.04em;color:var(--text-dim);text-transform:uppercase;}
.swatch.active .name{color:var(--text);}

.toggle-row{display:flex;align-items:center;justify-content:space-between;}
.switch{position:relative;width:34px;height:18px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;cursor:pointer;flex-shrink:0;}
.switch i{position:absolute;top:1px;left:1px;width:14px;height:14px;background:var(--text-dim);border-radius:50%;transition:transform .12s ease, background .12s ease;}
.switch.on{border-color:var(--accent);}
.switch.on i{transform:translateX(16px);background:var(--accent);}

.hint{font-size:10.5px;color:var(--text-dimmer);line-height:1.5;margin-top:10px;}
#fileInput{display:none;}

/* footer */
footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--border);
  font-size:11px;
  color:var(--text-dimmer);
  line-height:1.5;
}
footer .credit{
  max-width:720px;
}
footer .credit a{
  color:var(--text-dim);
  text-decoration:none;
  transition:color .12s ease;
}
footer .credit a:hover{
  color:var(--accent);
  text-decoration:underline;
}
footer .portfolio a{
  color:var(--accent);
  text-decoration:none;
  transition:opacity .12s ease;
}
footer .portfolio a:hover{
  text-decoration:underline;
  opacity:0.85;
}
footer .portfolio{
  white-space:nowrap;
}