* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#0e0e12; --panel:#151518; --panel2:#1c1c21;
  --border:#2a2a30; --text:#bbb; --text2:#666;
  --accent:#4a9eff; --accent2:#2563b0;
  --green:#00c868; --red:#e94560; --orange:#f0a030;
}
html, body {
  height:100%; overflow:hidden; background:var(--bg); color:var(--text);
  font:12px/1.4 Consolas,'SF Mono','Fira Code',monospace; user-select:none;
}
button {
  font:inherit; cursor:pointer; border:1px solid var(--border);
  background:var(--panel2); color:var(--text);
  padding:3px 8px; border-radius:3px; white-space:nowrap;
}
button:hover { background:#2a2a30; border-color:var(--accent); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.act { background:var(--accent2); border-color:var(--accent); color:#fff; }
button.act:hover { background:var(--accent); }
input, select {
  font:inherit; background:var(--panel2); color:var(--text);
  border:1px solid var(--border); padding:2px 6px; border-radius:3px; outline:none;
}
input:focus, select:focus { border-color:var(--accent); }
input[type=number] { width:56px; }
select { max-width:160px; padding-right:16px; }
label { display:inline-flex; align-items:center; gap:3px; cursor:pointer; }
canvas { image-rendering:pixelated; display:block; }

#app {
  display:grid;
  grid-template-rows:auto 1fr;
  grid-template-columns:260px 4px minmax(160px,1fr) 4px 380px;
  height:100vh; gap:1px; background:var(--border);
}
#toolbar {
  grid-column:1/-1; min-height:38px; background:var(--panel);
  padding:5px 10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
#toolbar .sep { color:var(--border); }
#fileInfo { color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }

#sidebar, #rpanel {
  background:var(--panel); overflow-y:auto; overflow-x:hidden;
  padding:8px; display:flex; flex-direction:column;
}
#sidebar { gap:4px; min-width:180px; max-width:600px; }
#rpanel  { gap:6px; min-width:340px; max-width:900px; overflow-x:auto; }

#main {
  background:var(--bg); position:relative; overflow:hidden;
  display:flex; flex-direction:column; min-width:160px;
}
.splitter { background:var(--border); cursor:col-resize; position:relative; z-index:10; }
.splitter:hover, .splitter.active { background:var(--accent); }
.splitter::after { content:''; position:absolute; top:0; bottom:0; left:-3px; right:-3px; }

.cwrap, #sourceWrap {
  flex:1; overflow:auto; position:relative;
  display:flex; align-items:center; justify-content:center; padding:12px;
}
#sourceCanvas { background:#000; border:1px solid var(--border); box-shadow:0 0 0 1px rgba(0,0,0,.6); }
#sourceCanvas[hidden] { display:none!important; width:0!important; height:0!important; border:0!important; }

.version-tag { color:var(--text2); font-size:10px; padding:0 8px; opacity:.7; letter-spacing:.5px; white-space:nowrap; }

/* HUD info moved into #playbar (no more absolute overlay). */

/* --- Tile edit frame nav (prev/play/stop/next + colored badge) --- */
.edit-frame-nav {
  align-items:center; gap:4px; margin:4px auto;
}
.edit-frame-nav button {
  padding:2px 8px; font-size:13px; line-height:1; margin-bottom:4px;
}
.edit-frame-nav button:disabled { opacity:.35; cursor:not-allowed; }
.edit-frame-nav button.act { background:var(--accent); color:#fff; }
.edit-frame-badge {
  padding:3px 10px; border-radius:4px;
  font-size:11px; color:#fff; font-weight:600;
  border:1px solid rgba(255,255,255,.15);
  text-align:center; letter-spacing:.3px;
  text-shadow:0 1px 1px rgba(0,0,0,.55);
  margin-left:4px;
width:auto;
display:block;
}

/* --- Tile edit shift arrows (rendered as a small pad next to the edit canvas) --- */
.edit-canvas-row {
  display:flex; justify-content:center; align-items:center;
  gap:14px; margin:6px 0;
}
.edit-canvas-row #editCanvas { flex:0 0 auto; }
.edit-shifts {
  display:grid; grid-template-columns:repeat(3, 30px); grid-template-rows:repeat(3, 24px);
  gap:2px; flex:0 0 auto;
}
.edit-shifts button {
  padding:0; font-size:13px; line-height:1;
  background:var(--panel2); border:1px solid var(--border);
  color:var(--text); cursor:pointer; border-radius:3px;
}
.edit-shifts button:hover { border-color:var(--accent); background:var(--panel); }
.edit-shifts .sh-u { grid-column:2; grid-row:1; }
.edit-shifts .sh-l { grid-column:1; grid-row:2; }
.edit-shifts .sh-r { grid-column:3; grid-row:2; }
.edit-shifts .sh-d { grid-column:2; grid-row:3; }
.edit-shifts .sh-mid {
  grid-column:2; grid-row:2; display:flex; align-items:center; justify-content:center;
  font-size:9px; color:var(--text2); user-select:none; pointer-events:none;
}
/* Narrow, centered color info bar under the edit canvas */
.edit-current-wrap { display:flex; justify-content:center; margin:6px 0 2px; }
.edit-current-wrap .edit-current {
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; background:var(--panel2);
  border:1px solid var(--border); border-radius:4px;
  font-size:11px; color:var(--text2); width:auto;
}
/* When a tile is being edited, hide the palette action buttons entirely
   (they're not usable while editing anyway). */
body.editing-tile #palActions { display:none; }

/* --- Language switcher (2 flag buttons, active one highlighted) --- */
.lang-switcher {
  display:flex; gap:2px; margin-left:auto;
  background:var(--panel2); border:1px solid var(--border); border-radius:4px;
  padding:2px;
}
.lang-flag {
  padding:1px 6px; font-size:14px; line-height:1.2;
  background:transparent; border:1px solid transparent; border-radius:3px;
  opacity:.45; cursor:pointer;
}
.lang-flag:hover { opacity:.85; background:var(--panel); }
.lang-flag.active {
  opacity:1; border-color:var(--accent); background:var(--panel);
  box-shadow:0 0 0 1px rgba(74,158,255,.25);
}

/* --- Fade modal preview (each candidate palette on its own row) --- */
.fade-preview-swatches {
  display:flex; flex-direction:column; gap:2px; margin:6px 0;
  padding:4px; background:var(--bg); border:1px solid var(--border); border-radius:3px;
  max-height:240px; overflow-y:auto;
}
.fade-preview-swatches .swatch-row {
  display:flex; align-items:center; gap:6px;
}
.fade-preview-swatches .swatch-row canvas {
  image-rendering:pixelated; height:12px;
  border:1px solid rgba(255,255,255,.06); flex:0 0 auto;
}
.fade-preview-swatches .swatch-row .swatch-label {
  font-size:9px; color:var(--text2); min-width:70px; text-align:right;
  white-space:nowrap;
}
.fade-preview-swatches .swatch-row.endpoint .swatch-label { color:var(--text); font-weight:600; }
.fade-preview-swatches .swatch-row.endpoint canvas { border-color:var(--accent); }

/* --- Palette variant "export" checkbox (auto-checked+locked if used by a frame) --- */
.palette-variant-export {
  margin-left:6px; flex:0 0 auto; cursor:pointer;
  accent-color:var(--accent);
}
.palette-variant-export:disabled { cursor:not-allowed; }

.empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; height:100%; gap:10px; color:var(--text2); font-size:13px;
}
.is-hidden { display:none!important; }

.sec {
  font-size:12px; color:var(--text2); letter-spacing:.6px;
  padding:6px 0 3px; border-bottom:1px solid var(--border); margin-bottom:2px;
}
.field-row { justify-content:space-between; gap:8px; width:100%; }
.field-row span { color:var(--text2); }

.hint {
  font-size:10px; color:var(--text2); line-height:1.5;
  padding:4px 6px; background:var(--panel2); border:1px solid var(--border);
  border-radius:3px; margin-top:4px;
}

.export-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:5px;
}
.export-grid button { width:100%; padding:6px 8px; }

.badge {
  padding:1px 8px; border-radius:10px; font-size:10px;
  font-weight:bold; text-transform:uppercase;
}
.badge.idle    { background:var(--border);  color:var(--text2); }
.badge.editing { background:var(--green);   color:#000; }
.badge.warning { background:var(--orange);  color:#000; }

.sec-head {
  display:flex; align-items:end; justify-content:space-between;
  gap:8px; border-bottom:1px solid var(--border); margin-bottom:2px;
}
.sec-head .sec { border:0; margin:0; flex:1; }
.head-actions {
  display:flex; gap:4px; margin-bottom:3px; flex-wrap:wrap; justify-content:flex-end;
}
.head-actions button { padding:2px 7px; font-size:11px; margin-bottom:3px; }

/* --- Frames list --- */
.frames-list {
  display:flex; flex-direction:column; gap:3px;
  border:1px solid var(--border); border-radius:4px;
  background:var(--panel2); padding:4px;
}
.frame-item {
  display:flex; align-items:center; gap:6px;
  padding:4px 6px; border-radius:3px; cursor:pointer;
  background:var(--panel); border:1px solid transparent;
  font-size:11px;
}
.frame-item:hover { border-color:var(--accent); }
.frame-item.active { border-color:var(--green); box-shadow:0 0 0 1px var(--green); }
.frame-thumb {
  width:32px; height:20px; background:#000; border:1px solid var(--border);
  flex:0 0 auto; image-rendering:pixelated;
}
.frame-name {
  flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--text);
}
.frame-pal-badge {
  font-size:9px; color:var(--text2); background:var(--panel2);
  border:1px solid var(--border); padding:1px 4px; border-radius:2px;
}

/* --- Playbar (buttons + HUD info in one bar under the canvas) --- */
#playbar {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; background:var(--panel);
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
#playbar button {
  padding:4px 10px; font-size:14px; line-height:1;
}
.playbar-fps { width:auto; margin-left:6px; }
.playbar-fps input { width:48px; }
.frame-label {
  color:var(--text2); font-size:11px;
  padding:3px 8px; background:var(--panel2); border:1px solid var(--border);
  border-radius:3px;
}
.playbar-sep { flex:1; }
.playbar-info {
  font-size:11px; color:var(--text2);
  padding:3px 8px; background:var(--panel2); border:1px solid var(--border);
  border-radius:3px;
}

/* --- Palette variants list --- */
.palette-variants {
  display:flex; flex-direction:column; gap:4px; margin-top:2px;
}
.palette-variant {
  border:1px solid var(--border); background:var(--panel2);
  border-radius:4px; padding:4px 6px;
  display:flex; align-items:center; gap:6px; cursor:pointer;
  font-size:11px;
}
.palette-variant.active { border-color:var(--green); box-shadow:0 0 0 1px var(--green); }
.palette-variant canvas { background:var(--bg); border:0; }
.palette-variant-name {
  color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:50px;
}
.palette-variant-usage { color:var(--text2); font-size:10px; margin-left:auto; }

/* --- Tileset & palette canvases --- */
#tilesCanvas, #paletteCanvas {
  background:var(--bg); border:1px solid var(--border); max-width:100%; cursor:default;
}
#paletteCanvas { display:none; border:0; max-width:none; }
#paletteCanvas.active-palette { display:block; }
#tilesCanvas.reorder-mode, #paletteCanvas.reorder-mode { cursor:grab; }
#tilesCanvas.edit-mode { cursor:pointer; }
#paletteCanvas.edit-mode, #paletteCanvas.pick-mode { cursor:pointer; }
body.tile-dragging, #tilesCanvas.reorder-mode:active, #paletteCanvas.reorder-mode:active { cursor:grabbing; }
body.resizing { cursor:col-resize; }

.empty-note {
  font-size:10px; color:var(--text2); line-height:1.6;
  padding:5px; margin-top:4px; background:var(--panel2);
  border-radius:3px; border:1px solid var(--border);
}

/* --- Tooltip --- */
#tileTooltip {
  position:fixed; display:none; z-index:9999;
  padding:6px 8px; background:#111; color:#fff;
  font:12px monospace; border-radius:4px;
  pointer-events:none; white-space:pre;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* --- Toast --- */
#toastLayer {
  position:fixed; top:46px; right:10px; z-index:20000;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:6px; pointer-events:none;
}
.toast {
  position:relative; background:var(--green); color:#000;
  padding:6px 14px; border-radius:4px; font-size:12px; font-weight:bold;
  animation:fo 2.5s forwards; box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.toast.error { background:var(--red); color:#fff; }
@keyframes fo { 0%,70%{opacity:1} 100%{opacity:0} }

/* --- Color picker modal --- */
.palette-picker { position:fixed; inset:0; z-index:10000; background:transparent; display:block; pointer-events:none; }
.palette-picker[hidden] { display:none!important; }
.palette-picker-box {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(300px,92vw); background:var(--panel);
  border:1px solid var(--border); border-radius:8px;
  box-shadow:0 14px 45px rgba(0,0,0,.45);
  padding:10px; pointer-events:auto;
}
.modal-head {
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-bottom:10px; cursor:move;
}
.modal-title { color:#fff; font-size:14px; }
.modal-close { padding:1px 8px; font-size:14px; line-height:1.2; }
.palette-current {
  display:flex; align-items:center; gap:8px;
  color:var(--text2); font-size:11px; margin-bottom:10px;
  background:var(--panel2); border:1px solid var(--border);
  border-radius:4px; padding:6px; flex-wrap:wrap;
}
.palette-current-swatch {
  width:22px; height:22px; border:1px solid var(--border);
  border-radius:3px; flex:0 0 auto;
}
.palette-origin { flex-basis:100%; padding-left:30px; }
.sms-grid { display:grid; grid-template-columns:repeat(8,22px); gap:2px; }
.sms-cell {
  width:22px; height:22px; min-width:22px; border-radius:3px;
  padding:0; border:1px solid rgba(255,255,255,.16);
}
.sms-cell:hover, .sms-cell.sel {
  border-color:#fff; box-shadow:0 0 0 1px var(--accent);
}
.palette-picker-actions { display:flex; justify-content:flex-end; margin-top:10px; }
.sms-grid[hidden] { display:none!important; }

/* --- Tile edit panel --- */
.tile-edit {
  margin-top:8px; background:var(--panel2); border:1px solid var(--border);
  border-radius:4px; padding:6px; display:flex; flex-direction:column; gap:6px;
}
.tile-edit .sec-head { border-bottom:1px solid var(--border); margin-bottom:2px; }
.edit-info { font-size:10px; color:var(--text2); line-height:1.5; }
#editCanvas { background:#000; width:192px; height:192px; cursor:crosshair; }
#editColorSwatch {
  width:14px; height:14px; border:1px solid var(--border);
  border-radius:2px; flex:0 0 auto;
}

.gg-picker { display:flex; flex-direction:column; gap:8px; }
.gg-picker[hidden] { display:none!important; }
.gg-color-line {
  justify-content:space-between; width:100%; background:var(--panel2);
  border:1px solid var(--border); border-radius:4px; padding:6px;
}
.gg-color-line input[type=color] {
  width:96px; height:32px; padding:0; border:1px solid var(--border);
}
.gg-rgb-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.gg-rgb-grid label {
  background:var(--panel2); border:1px solid var(--border);
  border-radius:4px; padding:5px; justify-content:space-between;
}
.gg-rgb-grid input { width:52px; }
#ggEye { width:100%; }

.palette-mode-row {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:var(--panel2); border:1px solid var(--border); border-radius:4px;
  padding:5px; margin-bottom:2px;
}
.palette-mode-row select { width:72px; }
.palette-sec-head { margin-top:8px; }
.palette-export-title { margin-top:8px; }
.palette-export-grid { margin-bottom:2px; }

/* --- Choice popup --- */
.choice-pop {
  position:fixed; inset:0; z-index:21000; background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; pointer-events:auto;
}
.choice-pop[hidden] { display:none!important; }
.choice-box {
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 14px 45px rgba(0,0,0,.45); padding:12px; min-width:260px;
}
.choice-title { font-size:14px; color:#fff; margin-bottom:10px; }
.choice-actions { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }

@media(max-width:800px){
  #app { grid-template-columns:200px 4px minmax(160px,1fr) 4px 360px; }
  .export-grid { grid-template-columns:1fr; }
}