:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c2230; --line:#2a3140;
  --ink:#e6edf3; --muted:#8b97a7; --accent:#ff4655; --accent2:#3aa0ff;
  --good:#3fb950;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.4 "Segoe UI",system-ui,-apple-system,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:linear-gradient(180deg,#1a2030,#12161f);
  border-bottom:1px solid var(--line); flex:0 0 auto;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  font-size:30px; width:46px; height:46px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),#7a1420); border-radius:10px;
  color:#fff; box-shadow:0 2px 10px rgba(255,70,85,.35)
}
h1{font-size:18px; margin:0; letter-spacing:.3px}
#subtitle{margin:0; color:var(--muted); font-size:12px}
.head-actions{display:flex; align-items:center; gap:14px}

button{
  background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  padding:7px 12px; border-radius:7px; cursor:pointer; font-size:13px;
}
button:hover{border-color:#3d475a; background:#232b3b}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button:disabled{opacity:.4; cursor:not-allowed}

.cols{flex:1 1 auto; display:flex; min-height:0}
aside,#center{min-height:0}
#sidebar{width:270px; flex:0 0 270px; border-right:1px solid var(--line); display:flex; flex-direction:column; background:var(--panel)}
.side-head{padding:10px; display:flex; flex-direction:column; gap:8px; border-bottom:1px solid var(--line)}
#search,select,input[type=text]{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  padding:7px 9px; border-radius:7px; font-size:13px;
}
.side-hint{font-size:10.5px; color:var(--muted); line-height:1.35}
.anim-list{overflow-y:auto; padding:6px}
.cat-group{margin-bottom:4px}
.cat-label{
  font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--muted);
  padding:8px 8px 4px; position:sticky; top:0; background:var(--panel); z-index:1
}
.anim-item{
  display:flex; align-items:center; gap:9px; padding:6px; border-radius:8px; cursor:pointer;
  border:1px solid transparent;
}
.anim-item:hover{background:var(--panel2)}
.anim-item.active{background:#20304a; border-color:var(--accent2)}
.anim-item.dragging{opacity:.35}
.anim-item canvas{
  width:44px; height:44px; background:#0a0d12; border-radius:6px; flex:0 0 auto;
  image-rendering:pixelated; border:1px solid var(--line)
}
.anim-item .nmwrap{flex:1 1 auto; min-width:0}
.anim-item .nm{font-size:12.5px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.anim-item .sub{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.anim-item .trash{
  opacity:0; flex:0 0 auto; padding:3px 6px; font-size:13px; line-height:1;
  background:transparent; border:1px solid transparent; border-radius:6px;
}
.anim-item:hover .trash{opacity:.55}
.anim-item .trash:hover{opacity:1; color:var(--accent); border-color:var(--line); background:#2a1418}
.nm-edit{
  width:100%; font-size:12.5px; padding:2px 5px; border-radius:5px;
  background:var(--bg); border:1px solid var(--accent2); color:var(--ink);
}
.cat-group.drop-hover{
  outline:2px dashed var(--accent2); outline-offset:-2px; border-radius:8px;
  background:rgba(58,160,255,.07)
}
.cat-label.empty{opacity:.4; font-style:italic}

#center{flex:1 1 auto; display:flex; flex-direction:column; min-width:0}
#stageWrap{
  flex:1 1 auto; position:relative; display:grid; place-items:center; overflow:hidden;
  min-height:0;
}
#stage{image-rendering:pixelated; box-shadow:0 6px 30px rgba(0,0,0,.5)}
#stageInfo{position:absolute; left:12px; top:10px; font-size:11px; color:var(--muted); pointer-events:none}

#transport{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-top:1px solid var(--line); background:var(--panel)
}
#transport button{min-width:40px}
#scrub{flex:1 1 auto}
input[type=range]{accent-color:var(--accent)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--muted); white-space:nowrap}

#viewControls{
  flex:0 0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:8px 14px; border-top:1px solid var(--line); background:var(--panel); font-size:12.5px
}
#viewControls label{display:flex; align-items:center; gap:6px; color:var(--muted)}
#viewControls select{width:auto}
.chk{cursor:pointer; user-select:none}
.bg-swatches{display:flex; gap:6px; margin-left:auto}
.bg-swatches i{width:20px; height:20px; border-radius:5px; cursor:pointer; border:2px solid transparent; display:block}
.bg-swatches i.active{border-color:var(--accent2)}

#filmstrip{
  flex:0 0 auto; height:96px; display:flex; gap:4px; overflow-x:auto; overflow-y:hidden;
  padding:8px 10px; background:#0a0d12; border-top:1px solid var(--line)
}
#filmstrip .fcell{
  height:100%; aspect-ratio:auto; position:relative; flex:0 0 auto; cursor:pointer;
  border:2px solid transparent; border-radius:6px; background:#12161f; padding:2px
}
#filmstrip .fcell canvas{height:calc(100% - 14px); display:block; image-rendering:pixelated}
#filmstrip .fcell.active{border-color:var(--accent)}
#filmstrip .fcell span{position:absolute; bottom:1px; left:0; right:0; text-align:center; font-size:9px; color:var(--muted)}

#inspector{
  width:300px; flex:0 0 300px; border-left:1px solid var(--line); background:var(--panel);
  overflow-y:auto; padding:14px
}
#inspector h2{font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin:6px 0 10px}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:10px; font-size:12px; color:var(--muted)}
.meta-grid{display:grid; grid-template-columns:auto 1fr; gap:4px 10px; font-size:12px; margin-bottom:12px}
.meta-grid .k{color:var(--muted)}
.meta-grid .v{font-family:ui-monospace,Menlo,Consolas,monospace; text-align:right}
.btn-row{display:flex; gap:8px; margin-bottom:10px}
.btn-row button{flex:1}
.hint{font-size:11px; color:var(--muted); margin-top:14px; line-height:1.6}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:#2a3140; border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* link to the playable simulator */
.play-link{
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  padding:7px 12px; border-radius:7px; font-size:13px; font-weight:600;
  text-decoration:none;
}
.play-link:hover{filter:brightness(1.08)}