:root{
  --bg: #0d0f0c;
  --bg-2: #14170f;
  --panel: #17190f;
  --panel-2: #1c1f14;
  --line: #33361f;
  --line-soft: #26281a;
  --ink: #eef0dd;
  --ink-dim: #9ba184;
  --acid: #d6ff3f;
  --acid-dim: #8ea82a;
  --rust: #ff6a3d;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --disp: 'Unbounded', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(214,255,63,0.05), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(255,106,61,0.05), transparent 40%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
}

.grain{
  position: fixed; inset:0; pointer-events:none; z-index: 500; opacity:.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scan-overlay{
  position: fixed; inset:0; pointer-events:none; z-index: 499;
  background: linear-gradient(180deg, transparent, rgba(214,255,63,0.03) 50%, transparent);
  animation: scan 7s linear infinite;
}
@keyframes scan{ 0%{ transform: translateY(-100%); } 100%{ transform: translateY(100%); } }

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.brand-mark{
  font-family: var(--disp); font-weight:900; font-size: 30px; color: var(--acid);
  letter-spacing: -0.02em;
}
.brand-en{
  font-family: var(--disp); font-weight:600; font-size: 13px; color: var(--ink-dim);
  letter-spacing: 0.18em; margin-left:6px;
}
.brand-tag{
  font-size: 11px; color: var(--ink-dim); letter-spacing: 0.08em; flex:1;
  border-left: 1px solid var(--line); padding-left: 16px; margin-left: 4px;
}
.brand-chip{
  font-size: 11px; padding: 5px 12px; border:1px solid var(--acid-dim); color: var(--acid);
  border-radius: 2px; letter-spacing: 0.05em; background: rgba(214,255,63,0.06);
}

/* ---------- layout ---------- */
.layout{
  display: grid;
  grid-template-columns: 260px 1fr 300px;
  gap: 0;
  min-height: calc(100vh - 130px);
}
.panel{
  padding: 20px;
  border-right: 1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
}
.panel-right{ border-right:none; border-left: 1px solid var(--line); }
.panel-head{
  font-family: var(--disp); font-weight:800; font-size: 13px; letter-spacing:0.03em;
  display:flex; align-items:center; gap:10px; color: var(--ink);
  padding-bottom:10px; border-bottom: 1px dashed var(--line);
}
.panel-head .idx{
  font-family: var(--mono); font-size: 11px; color: var(--bg);
  background: var(--acid); padding: 2px 6px; border-radius:1px;
}

/* ---------- dropzone ---------- */
.dropzone{
  border: 1.5px dashed var(--line);
  border-radius: 3px;
  padding: 28px 14px;
  text-align:center;
  cursor:pointer;
  transition: border-color .2s, background .2s;
  background: var(--panel);
}
.dropzone:hover, .dropzone.drag{
  border-color: var(--acid);
  background: rgba(214,255,63,0.04);
}
.dz-icon{ font-size: 26px; color: var(--acid-dim); margin-bottom:8px; }
.dz-title{ margin:0 0 4px; font-size: 13px; color: var(--ink); }
.dz-sub{ margin:0; font-size: 11px; color: var(--ink-dim); }

.meta-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-size: 11px;
}
.meta-grid > div{
  background: var(--panel-2); border:1px solid var(--line-soft); border-radius:2px; padding:8px 10px;
  display:flex; flex-direction:column; gap:3px;
}
.meta-k{ color: var(--ink-dim); font-size:10px; letter-spacing:0.04em; }
.meta-v{ color: var(--acid); font-weight:600; font-size: 12px; }

.frame-strip{
  display:flex; flex-wrap:wrap; gap:6px; overflow-y:auto; max-height: 320px;
  padding: 2px;
}
.frame-strip canvas, .frame-strip img{
  width: 48px; height: 48px; object-fit:cover; border-radius:2px;
  border: 1px solid var(--line-soft); cursor:pointer;
}
.frame-thumb.active{ outline: 2px solid var(--acid); }

.hidden{ display:none !important; }

/* ---------- center stage ---------- */
.panel-center{ align-items:stretch; }
.stage-wrap{
  flex:1; display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(45deg, #1a1c11 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(-45deg, #1a1c11 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(45deg, transparent 75%, #1a1c11 75%) -8px 0/16px 16px,
    linear-gradient(-45deg, transparent 75%, #1a1c11 75%) -8px 0/16px 16px,
    #121409;
  border: 1px solid var(--line);
  border-radius: 3px;
  min-height: 340px;
  position: relative;
  overflow:hidden;
}
.stage{ position:relative; }
#viewCanvas, #pickCanvas{
  image-rendering: pixelated;
  max-width: 100%;
  display:block;
}
.pick-layer{
  position:absolute; top:0; left:0; cursor: crosshair;
}
.stage-empty{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color: var(--ink-dim); gap:8px; text-align:center; padding: 20px;
}
.stage-empty-glyph{ font-size:34px; color: var(--acid-dim); }
.crosshair{
  position:absolute; width:14px; height:14px; border:1.5px solid var(--acid);
  border-radius:50%; pointer-events:none; transform: translate(-50%,-50%);
  display:none; box-shadow: 0 0 0 2px rgba(0,0,0,0.5);
}

.transport{
  display:flex; align-items:center; gap:12px; padding: 4px 2px;
}
.transport input[type=range]{ flex:1; }
.seek-label{ font-size:11px; color: var(--ink-dim); min-width: 60px; text-align:right; }

.mode-tabs{ display:flex; gap:2px; border-bottom: 1px solid var(--line); }
.tab{
  flex:1; background:none; border:none; color: var(--ink-dim); font-family: var(--mono);
  padding: 10px 6px; font-size: 12px; cursor:pointer; border-bottom: 2px solid transparent;
  letter-spacing:0.03em;
}
.tab.active{ color: var(--acid); border-bottom-color: var(--acid); }

.mode-panel{ display:flex; flex-direction:column; gap:12px; padding-top: 4px; }
.hint{ font-size: 11.5px; color: var(--ink-dim); line-height:1.6; margin:0; }

.row{ display:flex; gap:8px; flex-wrap:wrap; }
.checkbox-row{ font-size: 12px; }
.chk{ display:flex; align-items:center; gap:6px; color: var(--ink-dim); cursor:pointer; }
.chk input{ accent-color: var(--acid); }

.swatches{ display:flex; gap:8px; flex-wrap:wrap; min-height: 30px; }
.swatch{
  width: 30px; height:30px; border-radius:3px; border:1.5px solid var(--line);
  position:relative; cursor:pointer;
}
.swatch::after{
  content:'×'; position:absolute; top:-6px; right:-6px; width:14px; height:14px;
  background: var(--rust); color:#111; font-size:10px; line-height:14px; text-align:center;
  border-radius:50%; opacity:0; transition:opacity .15s;
}
.swatch:hover::after{ opacity:1; }

.slider-block{ display:flex; flex-direction:column; gap:6px; }
.slider-block label{ font-size:11.5px; color: var(--ink-dim); display:flex; justify-content:space-between; }
.slider-block label span{ color: var(--acid); }
input[type=range]{
  -webkit-appearance:none; height: 4px; background: var(--line); border-radius:2px; outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background: var(--acid); cursor:pointer; border: 2px solid var(--bg);
}
select{
  background: var(--panel-2); color: var(--ink); border:1px solid var(--line); border-radius:2px;
  padding: 8px 10px; font-family: var(--mono); font-size: 12px;
}

/* ---------- buttons ---------- */
.btn{
  font-family: var(--mono); font-size:12px; letter-spacing:0.02em; cursor:pointer;
  border-radius: 2px; padding: 10px 14px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--ink); transition: all .15s;
}
.btn:hover:not(:disabled){ border-color: var(--acid-dim); color: var(--acid); }
.btn:disabled{ opacity:.35; cursor:not-allowed; }
.btn-sm{ padding: 7px 10px; font-size:11px; }
.btn-outline{ background:transparent; }
.btn-ghost{ background:transparent; border-color: var(--line); }
.btn-primary{
  background: var(--acid); color:#101207; border-color: var(--acid); font-weight:600;
  padding: 12px; text-align:center;
}
.btn-primary:hover:not(:disabled){ filter: brightness(1.08); color:#101207; }
.btn-export{
  width:100%; background: var(--panel-2); border-color: var(--line); color: var(--ink);
  padding: 11px; text-align:left; position:relative;
}
.btn-export:hover:not(:disabled){
  border-color: var(--rust); color: var(--rust); background: rgba(255,106,61,0.06);
}

/* ---------- export panel ---------- */
.export-card{
  background: var(--panel); border:1px solid var(--line-soft); border-radius:3px;
  padding: 14px; display:flex; flex-direction:column; gap:8px;
}
.export-card h3{ margin:0; font-family: var(--disp); font-size: 13px; color: var(--ink); font-weight:600; }
.export-card p{ margin:0; font-size:11px; color: var(--ink-dim); line-height:1.5; }

.progress-wrap{ display:flex; align-items:center; gap:10px; }
.progress-bar{ flex:1; height:6px; background: var(--line); border-radius:3px; overflow:hidden; }
.progress-fill{ height:100%; width:0%; background: var(--acid); transition: width .2s; }
#aiProgressLabel{ font-size:11px; color: var(--ink-dim); min-width:60px; text-align:right; }

.export-log{
  margin-top:auto; font-size: 10.5px; color: var(--ink-dim); border-top:1px dashed var(--line);
  padding-top:10px; max-height: 160px; overflow-y:auto; line-height:1.6;
}
.export-log div{ display:flex; gap:6px; }
.export-log .t{ color: var(--acid-dim); }

.footbar{
  padding: 12px 28px; border-top:1px solid var(--line); font-size: 10.5px; color: var(--ink-dim);
  text-align:center; letter-spacing: 0.03em;
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .panel{ border-right:none; border-bottom: 1px solid var(--line); }
  .panel-right{ border-left:none; }
}