* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font: 12px/1.4 "Segoe UI", system-ui, sans-serif;
  background: #141418; color: #cfd0d8;
  display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(0, 250px);
  overflow: hidden; user-select: none;
}
button, select, input { font: inherit; color: inherit; }
button {
  background: #2a2a32; border: 1px solid #3a3a44; border-radius: 4px;
  padding: 4px 10px; cursor: pointer;
}
button:hover { background: #34343e; }
button.primary { background: #5b48c2; border-color: #7b68e2; }
button.primary:hover { background: #6a57d4; }
button.un-button { background: #173c39; border-color: #286e67; color: #a5eee4; }
button.un-button:hover { background: #20504c; }
.toolbox-button { color: #b9adff; border-color: #5b48c2; }
button.on { color: #e7e2ff; border-color: #8f7aff; background: #393052; }
input[type="number"], input[type="text"], select {
  background: #1c1c22; border: 1px solid #3a3a44; border-radius: 3px;
  padding: 2px 5px; width: 58px;
}
input[type="text"] { width: 120px; }
input[type="color"] { width: 32px; height: 20px; border: none; background: none; padding: 0; cursor: pointer; }
input[type="range"] { flex: 1; accent-color: #8f7aff; min-width: 40px; }
label { display: inline-flex; align-items: center; gap: 4px; }

/* topbar */
#topbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  padding: 5px 12px; min-height: 40px;
  background: #1b1b21; border-bottom: 1px solid #2c2c34;
}
#logo { font-weight: 300; letter-spacing: 2px; font-size: 14px; color: #9aa; }
#logo b { color: #8f7aff; font-weight: 700; }
#mcpDot { margin-left: 6px; font-size: 10px; color: #555; transition: color .3s; }
#mcpDot.on { color: #4cd964; }
.tb-group { display: flex; align-items: center; gap: 6px; }
#projSettings { gap: 8px; color: #8a8b96; }

/* main */
#main { display: grid; grid-template-columns: 210px 1fr 300px; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.panel { background: #1b1b21; overflow-y: auto; overflow-x: hidden; min-height: 0; }
#layersPanel { border-right: 1px solid #2c2c34; }
#propsPanel { border-left: 1px solid #2c2c34; }
.panel-title {
  padding: 6px 10px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: #7a7b86; border-bottom: 1px solid #2c2c34; position: sticky; top: 0; background: #1b1b21; z-index: 2;
}
.hint { padding: 12px; color: #62636e; }

/* viewport */
#viewportWrap { display: flex; flex-direction: column; min-width: 0; }
#viewport {
  flex: 1; display: flex; align-items: safe center; justify-content: safe center;
  overflow: auto; position: relative; background: #101014;
}
#viewport:focus { outline: none; }
#viewport:focus-visible { box-shadow: inset 0 0 0 1px #47bdb2; }
#viewport.panning { cursor: grab; }
#viewport.panning:active { cursor: grabbing; }
#viewport.masking #stage { cursor: crosshair; }
#viewport.pan-dragging, #viewport.pan-dragging #stage { cursor: grabbing; }
#stage { cursor: move; }
#viewport.panning #stage { cursor: grab; }
#stage {
  background:
    repeating-conic-gradient(#26262c 0% 25%, #1d1d23 0% 50%) 0 0 / 16px 16px;
  box-shadow: 0 0 0 1px #33333d, 0 8px 30px #0008;
  will-change: transform;
}
.pixelated { image-rendering: pixelated; }
#emptyHint {
  position: absolute; text-align: center; color: #565762; pointer-events: none;
  font-size: 13px;
}
#viewBar {
  display: flex; align-items: center; gap: 10px; padding: 4px 10px;
  background: #1b1b21; border-top: 1px solid #2c2c34; color: #7a7b86;
}
#viewBar button { padding: 2px 7px; }
#btnZoomFit { color: #9ddbd4; }

/* layers */
.layer-row {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px;
  border-bottom: 1px solid #24242c; cursor: pointer;
}
.layer-row.multi-sel { background: #203237; box-shadow: inset 3px 0 #47bdb2; }
.layer-row.sel { background: #2b2740; box-shadow: inset 3px 0 #9d87ff; }
.layer-row.dragging { opacity: .45; }
.layer-row.drop-target { outline: 1px solid #8f7aff; outline-offset: -1px; background: #2b2740; }
body.parent-dragging { cursor: grabbing; }
.layer-row .lname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-row .mini { background: none; border: none; padding: 1px 3px; color: #8a8b96; font-size: 11px; }
.layer-row .mini:hover { color: #fff; }
.layer-row .fold { width: 12px; padding: 1px 0; }
.layer-row .fold:disabled { visibility: hidden; }
.layer-row .eye.off { opacity: .25; }

/* props */
.prop-section { padding: 6px 10px 10px; border-bottom: 1px solid #24242c; }
.prop-section h4 {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: #6f7080; margin: 4px 0 6px;
}
.multi-selection-info {
  margin: 8px 10px 4px; padding: 7px 9px;
  color: #a5eee4; background: #18302f; border: 1px solid #286e67;
  border-radius: 4px; font-size: 11px; line-height: 1.35;
}
.particle-image-row { align-items: flex-start; flex-wrap: wrap; }
.particle-image-row .particle-image-status {
  flex: 1 1 100px; min-width: 0; color: #777b88; font-size: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pose-set-row {
  display: grid; grid-template-columns: 72px minmax(90px, 1fr) auto auto;
  align-items: center; gap: 5px; margin-top: 7px;
}
.pose-set-row .plabel { width: auto; }
.prop-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.prop-row .plabel { width: 72px; color: #9a9ba6; flex: none; }
.plabel.scrub { cursor: ew-resize; }
.plabel.scrub:hover { color: #b9a8ff; }
input[type="number"] { cursor: ew-resize; }
input[type="number"]:focus { cursor: text; }
.prop-row input[type="number"] { width: 62px; }
.stopwatch {
  background: none; border: none; padding: 0 2px; color: #565762; font-size: 12px; cursor: pointer;
}
.stopwatch.on { color: #ffd23f; }
.fx-card { background: #202028; border: 1px solid #2f2f39; border-radius: 5px; margin: 6px 0; }
.fx-card.sel { border-color: #8f7aff; box-shadow: 0 0 0 1px #8f7aff88; }
.fx-card.sel .fname { color: #cfc4ff; }
#tlLabels .tl-label.effect.sel { background: #2a2440; }
.tl-row.effect.sel { background: #221d33aa; box-shadow: inset 3px 0 #8f7aff; }
.fx-head { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-bottom: 1px solid #2b2b34; }
.fx-head .fname { flex: 1; font-weight: 600; color: #b9baC4; }
.fx-head .mini { background: none; border: none; color: #8a8b96; padding: 0 3px; cursor: pointer; }
.fx-head .mini:hover { color: #fff; }
.fx-body { padding: 5px 8px 7px; }
.fx-card.disabled .fx-body { opacity: .4; }
.fx-mask {
  margin: 7px 0 2px; padding: 6px 7px;
  border: 1px solid #30394a; border-radius: 4px; background: #1b2029;
}
.fx-mask.active { border-color: #47bdb2; background: #172625; }
.fx-mask-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.fx-mask-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #7f9c98;
}
.fx-mask.active .fx-mask-title { color: #8fded4; }
.fx-mask-badge {
  font-size: 9px; text-transform: uppercase; letter-spacing: .5px;
  color: #d9fffb; background: #24413f; border: 1px solid #47bdb2;
  border-radius: 3px; padding: 1px 5px;
}
.fx-mask-badge.invert { color: #ffd6a5; background: #3a2b1a; border-color: #a8763a; }
.fx-mask-hint { color: #7f8592; font-size: 10px; line-height: 1.4; margin: 2px 0 5px; }
.fx-mask-share { margin-top: 7px; padding-top: 6px; border-top: 1px solid #2a3340; }
.fx-mask-subhead {
  font-size: 9px; text-transform: uppercase; letter-spacing: .6px; color: #6f7787; margin-bottom: 4px;
}
.fx-mask .prop-row:first-child { margin-top: 0; }
.mask-paint-row { align-items: flex-start; }
.mask-paint-row .plabel { white-space: normal; line-height: 1.35; }
.mask-paint-row button { flex: 0 0 auto; }
.mask-invert { cursor: pointer; }
.effect-stack-actions { display: flex; gap: 6px; margin: 4px 0 7px; }
.effect-stack-actions button { flex: 1; }
.fx-sub { margin: 5px 0 5px 8px; border-left: 2px solid #4a4060; padding-left: 6px; }
.fx-sub-head { display: flex; align-items: center; gap: 6px; }
.fx-sub-head .fname { color: #a99ad4; font-size: 11px; }
.fx-sub.disabled .fx-body { opacity: .4; }
.addfx { display: flex; gap: 6px; margin-top: 6px; }
.addfx select { flex: 1; width: auto; }

/* timeline */
#timeline {
  display: flex; flex-direction: column; background: #17171d;
  border-top: 1px solid #2c2c34; min-height: 0;
}
#tlToolbar {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px;
  border-bottom: 1px solid #2c2c34; background: #1b1b21;
}
#tlToolbar .spacer { flex: 1; }
#keyTools { display: inline-flex; align-items: center; gap: 7px; }
#keyTools select { width: 82px; }
#tilePreview { position: absolute; right: 10px; bottom: 10px; width: 168px; height: auto; max-height: 168px; border: 1px solid #3a3a44; box-shadow: 0 3px 12px #000a; background: #14141a; z-index: 6; pointer-events: none; }
#docNameLabel { color: #9a9ba6; font-size: 12px; padding: 0 6px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; border-bottom: 1px dotted #4a4a56; }
#docNameLabel:hover { color: #cfc4ff; }
#frameLabel { color: #9a9ba6; min-width: 70px; }
#clipTools { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
#clipTools select { max-width: 120px; }
#clipTools #btnDelClip { color: #c26; }
#btnPlay { width: 34px; }
#btnAutokey { color: #565762; }
#btnAutokey.on { color: #ff5a5a; border-color: #ff5a5a; background: #3a2026; }
#btnPath.on { color: #8f7aff; border-color: #8f7aff; background: #262040; }
/* align-items:flex-start + min-height:100% so the label column and the track column both
   grow to their content and scroll together — otherwise overflow:hidden on #tlTracksWrap gets
   flex-stretched to the viewport height and clips every track row past the first screenful
   (labels scroll, diamonds don't). min-height keeps them filling the pane when content is short. */
#tlBody { flex: 1; display: flex; align-items: flex-start; overflow-y: auto; min-height: 0; }
#tlLabels { width: 200px; flex: none; min-height: 100%; border-right: 1px solid #2c2c34; }
#tlLabels .tl-label {
  height: 22px; display: flex; align-items: center; gap: 5px; padding: 0 8px;
  border-bottom: 1px solid #202028; white-space: nowrap; overflow: hidden;
}
#tlLabels .tl-label.layer { background: #1e1e26; cursor: pointer; }
#tlLabels .tl-label.layer.multi-sel { background: #203237; box-shadow: inset 3px 0 #47bdb2; }
#tlLabels .tl-label.layer.sel { background: #2b2740; box-shadow: inset 3px 0 #9d87ff; }
#tlLabels .tl-label.track { color: #8a8b96; padding-left: 26px; font-size: 11px; }
#tlLabels .tl-label.track.sub { padding-left: 40px; }
#tlLabels .tl-label.effect { padding-left: 20px; color: #b9adff; gap: 4px; cursor: pointer; }
#tlLabels .tl-label.effect.child { padding-left: 32px; color: #a99ad4; }
#tlLabels .tl-label.effect .fx-en { margin: 0; cursor: pointer; }
#tlLabels .tl-label.effect .fx-name { overflow: hidden; text-overflow: ellipsis; }
#tlLabels .tl-label .tl-curve {
  margin-left: auto; background: none; border: none; color: #6f7080;
  font-size: 13px; padding: 0 4px; cursor: pointer; line-height: 1;
}
#tlLabels .tl-label .tl-curve:hover { color: #b9a8ff; }
#tlLabels .spacer-row { height: 20px; border-bottom: 1px solid #2c2c34; }
.expander { width: 12px; color: #6f7080; cursor: pointer; }
#tlTracksWrap { flex: 1; min-height: 100%; position: relative; overflow: hidden; }
#tlRuler {
  height: 20px; position: relative; border-bottom: 1px solid #2c2c34;
  background: #1b1b21; cursor: ew-resize;
}
#tlRuler .tick { position: absolute; top: 12px; bottom: 0; width: 1px; background: #33333d; }
#tlRuler .tick.major { top: 4px; background: #444450; }
#tlRuler .ticklabel { position: absolute; top: 1px; font-size: 9px; color: #6f7080; transform: translateX(2px); }
#tlRuler .clip-bar {
  position: absolute; top: 10px; bottom: 0; box-sizing: border-box;
  background: #8f7aff22; border-left: 1px solid #8f7aff99; border-right: 1px solid #8f7aff99;
  font-size: 8px; line-height: 10px; color: #b9adff; padding: 0 3px;
  overflow: hidden; white-space: nowrap; cursor: pointer;
}
#tlRuler .clip-bar:hover { background: #8f7aff3a; }
#tlRuler .clip-bar.active { background: #8f7aff55; color: #efeaff; border-color: #cfc4ff; }
#tlRows { position: relative; }
.tl-row { height: 22px; border-bottom: 1px solid #202028; position: relative; }
.tl-row.layer { background: #1e1e2611; }
.tl-row.layer .range { position: absolute; top: 8px; height: 6px; background: #3d3d58; border-radius: 3px; }
.tl-row.effect { background: #201d2e22; }
.fx-span {
  position: absolute; top: 4px; height: 13px; border-radius: 3px;
  background: #4a3d7a; border: 1px solid #6f5cc0; cursor: grab;
  display: flex; align-items: center; overflow: hidden; z-index: 2;
}
.fx-span:active { cursor: grabbing; }
.tl-row.effect.off .fx-span { background: #33333d; border-color: #45454f; opacity: .6; }
.fx-span .fx-span-label {
  flex: 1; padding: 0 6px; font-size: 9px; color: #d8d0ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.fx-span .handle { width: 5px; align-self: stretch; cursor: ew-resize; background: #8f7aff44; flex: none; }
.fx-span .handle:hover { background: #8f7aff; }
.fx-keymark {
  position: absolute; top: 7px; width: 5px; height: 5px; background: #ffd23f;
  transform: rotate(45deg); border: 1px solid #b8933a; z-index: 3; pointer-events: none;
}
.marquee { position: absolute; border: 1px dashed #8f7aff; background: #8f7aff22; z-index: 6; pointer-events: none; }
.tl-row .cell-line { position: absolute; top: 0; bottom: 0; width: 1px; background: #1f1f27; }
.key {
  position: absolute; top: 6px; width: 9px; height: 9px;
  background: #ffd23f; transform: rotate(45deg); cursor: pointer;
  border: 1px solid #b8933a; z-index: 3;
}
.key.sel { background: #fff; border-color: #8f7aff; box-shadow: 0 0 5px #8f7affcc; }
#playhead {
  position: absolute; top: 0; bottom: 0; width: 1px; background: #ff5a5a;
  pointer-events: none; z-index: 5;
}
#playhead::before {
  content: ""; position: absolute; top: 0; left: -4px;
  border: 5px solid transparent; border-top-color: #ff5a5a;
}

/* graph editor */
#graphEd {
  position: fixed; right: 316px; bottom: 262px; z-index: 30;
  background: #1f1f27; border: 1px solid #3a3a44; border-radius: 8px;
  box-shadow: 0 10px 30px #000a; padding: 8px;
}
#graphEd[hidden] { display: none; }
#graphHead {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: #7a7b86; margin-bottom: 6px; display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
}
#graphClose {
  background: none; border: none; color: #8a8b96; padding: 0 2px;
  font-size: 12px; line-height: 1; cursor: pointer;
}
#graphClose:hover { color: #fff; }
#graphVals { text-transform: none; letter-spacing: 0; color: #565762; }
#graphCanvas {
  background: #17171d; border: 1px solid #2c2c34; border-radius: 4px;
  cursor: crosshair; touch-action: none; display: block;
}
#graphPresets { display: flex; gap: 6px; margin-top: 6px; }
#graphPresets button { flex: 1; padding: 2px 4px; font-size: 11px; }
#onionCount { width: 40px; }

/* modal */
#modal {
  position: fixed; inset: 0; background: #000a; display: flex;
  align-items: center; justify-content: center; z-index: 50;
}
#modal[hidden] { display: none; }
#sheetOpts[hidden], #graalOpts[hidden], #graalBoundsWrap[hidden] { display: none; }
#unModal[hidden] { display: none; }
#maskModal[hidden] { display: none; }
#unLiveConfirmRow[hidden], #unResult[hidden] { display: none; }
#keyTools[hidden] { display: none; }
#emptyHint[hidden] { display: none; }
#modalBox {
  background: #1f1f27; border: 1px solid #3a3a44; border-radius: 8px;
  width: 560px; max-width: 92vw;
}
#modalPreviewWrap {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; background: #14141a; max-height: 260px; overflow: hidden;
}
#modalPreview { max-width: 100%; }
.modal-row { display: flex; align-items: center; gap: 14px; padding: 8px 14px; }
.modal-row.right { justify-content: flex-end; border-top: 1px solid #2c2c34; }
#graalOpts { flex-wrap: wrap; border-top: 1px solid #2c2c34; }
#graalOpts select { width: 200px; }
.template-info { flex: 1 1 100%; color: #7fd8d0; }
.template-info.error { color: #ff8888; }

#unModal {
  position: fixed; inset: 0; background: #000b; display: flex;
  align-items: center; justify-content: center; z-index: 55;
}
#maskModal {
  position: fixed; inset: 0; background: #000c; display: flex;
  align-items: center; justify-content: center; z-index: 58;
}
#maskModalBox {
  background: #1f1f27; border: 1px solid #3a3a44; border-radius: 8px;
  width: min(780px, 94vw); max-height: 94vh; overflow: auto;
  box-shadow: 0 18px 60px #000d;
}
#maskCanvasWrap {
  min-height: 220px; max-height: 470px; padding: 14px; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  background-color: #101015;
  background-image:
    linear-gradient(45deg, #191920 25%, transparent 25%),
    linear-gradient(-45deg, #191920 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #191920 75%),
    linear-gradient(-45deg, transparent 75%, #191920 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
#maskCanvas {
  max-width: 100%; max-height: 440px; min-width: 64px; min-height: 64px;
  image-rendering: pixelated; cursor: crosshair; touch-action: none;
  border: 1px solid #4b4b58; box-shadow: 0 4px 20px #000a;
}
.mask-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 12px; border-top: 1px solid #30303a;
}
.mask-toolbar.auto { background: #1a2023; }
.mask-toolbar.options { color: #aaaab5; }
.mask-toolbar label { display: flex; align-items: center; gap: 5px; }
.mask-toolbar input[type="number"] { width: 58px; }
.mask-toolbar button.on {
  color: #d9fffb; border-color: #47bdb2; background: #24413f;
}
#maskPaintStats { margin-left: auto; color: #7fd8d0; }
#maskPaintStatus {
  min-height: 32px; padding: 7px 12px; color: #a9aab5; background: #17171d;
  border-top: 1px solid #30303a;
}
#maskPaintStatus.pick { color: #ffe091; }
.fx-script { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 7px 0; }
.fx-script textarea {
  width: 100%; resize: vertical; min-height: 54px; padding: 5px 6px;
  color: #cfe9e7; background: #15151a; border: 1px solid #393945; border-radius: 4px;
  font: 11px/1.35 Consolas, "Cascadia Mono", monospace; user-select: text;
}
.script-status { color: #6fbaae; font-size: 10px; }
.script-status.bad { color: #ff8a96; }
.shared-mask-row select { flex: 1; min-width: 88px; }

#toolboxModal {
  position: fixed; inset: 0; z-index: 59; display: flex; align-items: center; justify-content: center;
  background: #000c;
}
#toolboxModal[hidden] { display: none; }
#toolboxModalBox {
  width: min(1040px, 96vw); max-height: 94vh; display: flex; flex-direction: column;
  overflow: hidden; background: #1c1c23; border: 1px solid #454553; border-radius: 9px;
  box-shadow: 0 20px 70px #000e;
}
.toolbox-title {
  position: static; display: flex; justify-content: space-between; gap: 12px;
  color: #a99cf7; background: #20202a;
}
#toolSelection {
  max-width: 68%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #78cbc1; text-transform: none; letter-spacing: 0;
}
.toolbox-grid {
  display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 10px;
  padding: 12px; overflow: auto;
  /* size each row to its content so cards with more controls (e.g. Separate by color)
     grow instead of overflowing — a wrapping flex row under-reports its height to an
     auto grid track, pinning rows to the 126px min-height and clipping the extra controls */
  grid-auto-rows: min-content;
}
.tool-card {
  min-height: 126px; padding: 10px; border: 1px solid #30303b; border-radius: 6px;
  background: #202028;
}
.tool-card h3 {
  margin-bottom: 5px; color: #d0c9ff; font-size: 11px; letter-spacing: .4px;
  text-transform: uppercase;
}
.tool-card p { margin-bottom: 8px; color: #858692; line-height: 1.42; }
.tool-card > button { margin-top: 5px; }
.tool-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tool-actions label { color: #9798a4; }
.tool-actions select { width: 150px; }
.tool-actions input[type="number"] { width: 64px; }
.tool-list { display: flex; flex-direction: column; gap: 4px; margin: 5px 0 8px; max-height: 76px; overflow: auto; }
.tool-list .hint { padding: 3px 0; }
.tool-list-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tool-list-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-status { margin: 4px 0 8px; color: #75c8bd; }
#toolOutput {
  min-height: 62px; max-height: 120px; margin: 0 12px 10px; padding: 9px 10px; overflow: auto;
  user-select: text; white-space: pre-wrap; color: #a9d8d2; background: #131318;
  border: 1px solid #303039; border-radius: 5px; font: 11px/1.45 Consolas, monospace;
}
@media (max-width: 920px) {
  .toolbox-grid { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
}
#unModalBox {
  background: #1f1f27; border: 1px solid #3a3a44; border-radius: 8px;
  width: 470px; max-width: 92vw; box-shadow: 0 18px 60px #000c;
}
.un-body { display: flex; flex-direction: column; gap: 11px; padding: 14px; }
.un-lede { color: #92939e; line-height: 1.5; }
.un-lede code, .un-command-row code { color: #a5eee4; }
.un-field { display: flex; flex-direction: column; align-items: stretch; gap: 5px; color: #aaaab5; }
.un-field > input, .un-field > select { width: 100%; height: 29px; }
.un-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.un-danger {
  border: 1px solid #7a3535; background: #321f22; border-radius: 5px; padding: 9px;
  color: #f1b5b5;
}
.un-status {
  min-height: 34px; padding: 8px 9px; border-radius: 5px;
  background: #18181e; border: 1px solid #2d2d36; color: #8f909b;
  user-select: text; white-space: pre-wrap;
}
.un-status.ok { border-color: #286e67; color: #a5eee4; }
.un-status.error { border-color: #873d48; color: #ffabb7; }
.un-result { display: flex; flex-direction: column; gap: 5px; color: #8f909b; }
.un-command-row { display: flex; align-items: center; gap: 8px; }
.un-command-row code {
  flex: 1; padding: 7px 8px; background: #15151a; border: 1px solid #33333c;
  border-radius: 4px; user-select: text; overflow-x: auto; white-space: nowrap;
}

#toast {
  position: fixed; left: 14px; bottom: 14px; z-index: 60;
  background: #2b2740; border: 1px solid #5b48c2; border-radius: 6px;
  padding: 8px 14px; color: #cfd0d8; box-shadow: 0 6px 20px #000a;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
#toast.show { opacity: 1; }
#btnUndo:disabled, #btnRedo:disabled { opacity: .35; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #33333d; border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ===== responsive tiers ===== */
.mobile-only { display: none; }  /* legacy drawer buttons — unused now */
.phone-only { display: none; }
.touch-only { display: none; }
body.coarse .touch-only { display: inline-flex; align-items: center; justify-content: center; }
#stage, #viewport { touch-action: none; } /* canvas gestures shouldn't scroll/zoom the page */
#drawerBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; }
/* enlarge keyframe tap target on touch devices without changing the drawn diamond */
body.coarse #tlRows .key::after { content: ''; position: absolute; inset: -9px; }

/* ---- Tablet (601–1024px): keep desktop layout, just bigger touch targets ---- */
@media (min-width: 601px) and (max-width: 1024px) {
  #topbar button, #viewBar button, #tlToolbar button { min-height: 34px; }
  #topbar select, #viewBar select, #tlToolbar select, #topbar input[type="number"] { min-height: 30px; }
  .layer-row { min-height: 32px; }
}

/* ================= PHONE SHELL (body.phone, ≤600px) ================= */
body.phone .phone-only { display: flex; }
body.phone #topbar, body.phone #timeline .spacer { display: none; }
body.phone { grid-template-columns: 1fr; grid-template-rows: 46px minmax(0,1fr) 54px 60px; }
body.phone #phoneTop { grid-row: 1; grid-column: 1; }
body.phone #main { grid-row: 2; grid-column: 1; grid-template-columns: 1fr; }
body.phone #phoneTransport { grid-row: 3; grid-column: 1; }
body.phone #phoneTabbar { grid-row: 4; grid-column: 1; }
body.phone #viewportWrap { grid-column: 1; }
body.phone #viewBar { display: none; }

/* top bar */
#phoneTop { align-items: center; justify-content: space-between; padding: 0 10px env(safe-area-inset-top) 10px; background: #1b1b21; border-bottom: 1px solid #2c2c34; }
#phoneDoc { color: #cfd0d8; font-size: 14px; max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-top-actions { display: flex; gap: 6px; }
#phoneTop button { min-width: 40px; min-height: 36px; font-size: 17px; }

/* transport */
#phoneTransport { align-items: center; gap: 8px; padding: 0 10px; background: #17171c; border-top: 1px solid #2c2c34; }
#phoneTransport button { min-width: 40px; min-height: 40px; font-size: 16px; }
#phoneScrub { flex: 1; min-width: 40px; }
#phoneFrameLabel { color: #9a9ba6; font-size: 12px; min-width: 46px; text-align: right; }

/* bottom tab bar */
#phoneTabbar { align-items: stretch; background: #1b1b21; border-top: 1px solid #2c2c34; padding-bottom: env(safe-area-inset-bottom); }
#phoneTabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; color: #8a8b96; font-size: 10px; letter-spacing: .3px; }
#phoneTabbar button b { font-size: 18px; font-weight: 400; }
#phoneTabbar button.on { color: #b9adff; }

/* floating tool dock (left edge of canvas) + zoom pill (bottom-right) */
#phoneDock { position: fixed; left: 8px; top: 56px; z-index: 30; flex-direction: column; gap: 6px; background: #1b1b21cc; border: 1px solid #2c2c34; border-radius: 10px; padding: 5px; backdrop-filter: blur(4px); }
#phoneDock button { width: 42px; height: 42px; font-size: 18px; border-radius: 8px; }
#phoneDock button.on { color: #e7e2ff; border-color: #8f7aff; background: #393052; }
#phoneZoom { position: fixed; right: 8px; z-index: 30; bottom: calc(60px + 54px + 8px); align-items: center; gap: 4px; background: #1b1b21cc; border: 1px solid #2c2c34; border-radius: 20px; padding: 3px 5px; backdrop-filter: blur(4px); }
#phoneZoom button { min-width: 34px; min-height: 34px; border-radius: 16px; }
#phoneZoomLabel { color: #9a9ba6; font-size: 11px; min-width: 42px; text-align: center; }

/* bottom sheets: the existing panels + the new sheets, slid up from the bottom */
#phoneScrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 43; display: none; }
#phoneScrim.on { display: block; }
body.phone #layersPanel, body.phone #propsPanel, body.phone #timeline,
body.phone .phone-sheet {
  position: fixed; left: 0; right: 0; bottom: 114px; top: auto; width: auto; max-width: none; /* 114 = tabbar 60 + transport 54 stay visible */
  max-height: 60vh; z-index: 44; display: flex; flex-direction: column;
  background: #1b1b21; border: 1px solid #2c2c34; border-bottom: none; border-radius: 16px 16px 0 0;
  transform: translateY(calc(100% + 130px)); transition: transform .24s ease; box-shadow: 0 -10px 34px #000c;
  overflow: hidden;
  pointer-events: none; /* closed sheets never intercept taps meant for the tab bar/canvas */
}
body.phone #layersPanel.open, body.phone #propsPanel.open, body.phone #timeline.open,
body.phone .phone-sheet.open { transform: translateY(0); pointer-events: auto; }
/* keep the tab bar + transport tappable above any sheet */
body.phone #phoneTabbar, body.phone #phoneTransport { position: relative; z-index: 46; }
.sheet-handle { flex: 0 0 auto; width: 40px; height: 4px; border-radius: 2px; background: #44444f; margin: 8px auto 4px; }
.sheet-title { flex: 0 0 auto; padding: 4px 14px 8px; font-size: 13px; color: #cfd0d8; display: flex; align-items: center; justify-content: space-between; }
.sheet-title button { min-height: 32px; }
.sheet-subhead { padding: 10px 14px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #7a7b86; }
.phone-sheet .sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 12px calc(14px + env(safe-area-inset-bottom)); touch-action: auto; }
/* existing panels as sheets: give their scroll body room + a handle spacer */
body.phone #layersPanel .panel-title, body.phone #propsPanel .panel-title { position: static; }
body.phone #layersPanel::before, body.phone #propsPanel::before, body.phone #timeline::before {
  content: ''; flex: 0 0 auto; width: 40px; height: 4px; border-radius: 2px; background: #44444f; margin: 8px auto 2px;
}
body.phone #layerList, body.phone #propsBody, body.phone #tlBody { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: auto; }
body.phone #tlToolbar { flex-wrap: wrap; }

/* tool / paint / view controls in the Tools sheet */
.phone-toolrow { display: flex; gap: 8px; flex-wrap: wrap; }
.phone-toolrow button { flex: 1 0 28%; min-height: 46px; font-size: 13px; }
.phone-toolrow button.on { color: #e7e2ff; border-color: #8f7aff; background: #393052; }
#phonePaintControls { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
#phonePaintControls .prow { display: flex; align-items: center; gap: 8px; }
#phonePaintControls label { flex: 0 0 auto; color: #9a9ba6; min-width: 54px; }
#phonePaintControls input[type="range"] { flex: 1; }
#phonePaintControls input[type="color"] { width: 40px; height: 32px; }
.phone-chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.phone-chiprow button { min-height: 40px; padding: 6px 12px; }
.phone-chiprow button.on { color: #e7e2ff; border-color: #8f7aff; background: #393052; }

/* Share sheet + Add grid */
#phoneShareBody { display: flex; flex-direction: column; gap: 12px; }
#phoneShareBody .prow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#phoneShareBody .prow > * { min-height: 40px; }
#phoneShareBody select { flex: 1; }
.phone-addgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.phone-addgrid button { min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; }
body.phone button, body.phone select, body.phone input { min-height: 40px; }
body.phone #phoneTabbar button, body.phone #phoneDock button, body.phone #phoneZoom button, body.phone #phoneTop button { min-height: unset; }

/* full-screen modals on phone */
body.phone #modalBox, body.phone #unModalBox, body.phone #maskModalBox, body.phone #toolboxModalBox {
  position: fixed; inset: 0; max-width: none; max-height: none; width: 100%; height: 100dvh;
  border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
body.phone .toolbox-grid { grid-template-columns: 1fr; }