:root {
  --bg: #2A2B39;
  --bg-panel: #292A37;
  --bg-elevated: #38394A;
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(133, 136, 176, 0.62);
  --text: #FFFFFF;
  --text-dim: #B5B5C1;
  --accent: #8588B0;
  --accent-hover: #A6A9CB;
  --accent-glow: rgba(133, 136, 176, 0.22);
  --accent-grad: linear-gradient(135deg, #8588B0 0%, #B5B5C1 100%);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --panel-scale: 1;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-elevated) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-elevated);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
  overscroll-behavior: none;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(24, 24, 27, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  row-gap: 8px;
  z-index: 10;
}

#topbar h1 {
  font-size: 15px;
  margin: 0 12px 0 0;
  font-weight: 700;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}

#fraxportLink {
  margin-left: auto;
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  transition: all 0.2s ease;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

#fraxportLink:hover {
  color: var(--accent);
  background: var(--accent-glow);
}

.btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
  background: var(--bg-panel);
  border-color: var(--border-hover);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

#undoRedoBar {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex: none;
}

.iconBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-sm);
}

.iconBtn svg {
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  transition: color 0.2s;
}

.iconBtn:hover svg {
  color: var(--text);
}

.iconBtn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.iconBtn:disabled:hover {
  background: transparent;
  border-color: var(--border);
  box-shadow: none;
  transform: none;
}

#filters, #linearWrap, #bgControls {
  display: flex;
  align-items: center;
  gap: 12px;
}

#filters label, #linearWrap label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 12.5px;
  user-select: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s;
}

#filters label:hover, #linearWrap label:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
  width: 14px;
  height: 14px;
}

#linearWrap {
  padding-left: 12px;
  border-left: 1px solid var(--border);
}

#bgControls span {
  color: var(--text-dim);
  font-size: 12.5px;
}

.bgOption {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: var(--bg-elevated);
}

.bgOption.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-glow);
  color: var(--accent);
}

#bgColorPicker {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  padding: 3px;
  cursor: pointer;
  transition: border-color 0.2s;
}

#bgColorPicker.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-glow);
}

#editorResizer, #mobileResizer {
  width: 4px;
  flex: none;
  cursor: col-resize;
  background: transparent;
  position: relative;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#editorResizer::before, #mobileResizer::before {
  content: "";
  width: 2px;
  height: 24px;
  border-radius: 2px;
  background: var(--bg-elevated);
  transition: all 0.2s;
}

#editorResizer:hover, #editorResizer.dragging,
#mobileResizer:hover, #mobileResizer.dragging {
  background: rgba(255, 107, 0, 0.1);
}

#editorResizer:hover::before, #editorResizer.dragging::before,
#mobileResizer:hover::before, #mobileResizer.dragging::before {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  height: 32px;
}

#main {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

#panelsRow {
  display: flex;
  min-height: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
}

#treePanel {
  width: 280px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border);
}

#tree {
  flex: 1;
  overflow: auto;
  padding: 8px 0 calc(16px + env(safe-area-inset-bottom)) 0;
}

#editorPanel {
  width: 290px;
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  overflow: auto;
  background: rgba(24, 24, 27, 0.5);
}

#editorPanel h2 {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  font-weight: 600;
}

#centerPanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #0a0a0c;
}

#viewport {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
}

#viewport.checker {
  background-image:
    linear-gradient(45deg, #1e1e22 25%, transparent 25%),
    linear-gradient(-45deg, #1e1e22 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1e1e22 75%),
    linear-gradient(-45deg, transparent 75%, #1e1e22 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: #141417;
}

#lottieContainer, #lottieContainerB {
  width: 480px;
  height: 480px;
  max-width: 100%;
  max-height: 100%;
}

#dropHint {
  position: absolute;
  color: var(--text-dim);
  text-align: center;
  pointer-events: none;
  font-size: 15px;
  line-height: 1.6;
  background: rgba(24, 24, 27, 0.8);
  backdrop-filter: blur(8px);
  padding: 20px 30px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border);
  transition: all 0.3s;
}

#player {
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#playBtn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-grad);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 4px 12px var(--accent-glow);
  transition: transform 0.2s, box-shadow 0.2s;
}

#playBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px var(--accent-glow);
}

#scrub {
  flex: 1;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-elevated);
  outline: none;
  cursor: pointer;
  transition: height 0.2s;
}

#scrub:hover {
  height: 6px;
}

#scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2), 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 0.2s;
}

#scrub::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

#frameLabel {
  width: 90px;
  text-align: right;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}

.row:hover {
  background: var(--bg-elevated);
}

.row.selected {
  background: rgba(133, 136, 176, 0.12);
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.caret {
  width: 14px;
  height: 14px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 10px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.caret.open {
  transform: rotate(90deg);
  color: var(--accent);
}

.caret.hidden {
  visibility: hidden;
}
.caret { padding:0; border:0; background:transparent; cursor:pointer; }
.caret.hidden { pointer-events:none; cursor:default; }

.icon {
  width: 16px;
  height: 16px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}

.row.selected .icon {
  opacity: 1;
}

.nm {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.row.selected .nm {
  color: var(--accent);
  font-weight: 600;
}

.nm.leaf {
  color: var(--text-dim);
  font-weight: 400;
}

.swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
  flex: none;
  margin-left: auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.tree-delete { width:22px; height:22px; flex:none; margin-left:auto; display:grid; place-items:center; padding:0; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--text-dim); opacity:.62; font:500 13px 'Montserrat',sans-serif; cursor:pointer; }
.swatch + .tree-delete { margin-left:4px; }
.tree-delete:hover { border-color:rgba(240,120,140,.35); background:rgba(240,120,140,.12); color:#ff9cab; opacity:1; }
.row:hover .tree-delete,.row.selected .tree-delete { opacity:1; }
.tree-text-row { margin-left:22px; }
.tree-section-label { padding:11px 14px 5px; color:var(--text-dim); font:600 9px 'Montserrat',sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.vector-group-row { min-height:31px; padding-top:4px; padding-bottom:4px; gap:7px; border:1px solid transparent; }
.vector-group-row .nm { min-width:0; flex:1; font-size:11px; }
.vector-group-count { flex:none; padding:3px 6px; border:1px solid rgba(255,255,255,.07); border-radius:6px; background:rgba(255,255,255,.035); color:var(--text-dim); font:500 9px 'Montserrat',sans-serif; }
.vector-group-badge { flex:none; padding:3px 6px; border-radius:6px; background:var(--accent-glow); color:var(--accent-hover); font:600 8px 'Montserrat',sans-serif; letter-spacing:.03em; }
.vector-group-row .tree-delete { margin-left:0; }
.vector-group-row:hover { border-color:var(--border); }

.catHeader {
  color: var(--text-dim);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 12px 16px 6px;
  font-weight: 600;
}

.gradbar-wrap {
  margin-bottom: 16px;
}

.gradToolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.chainBtn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 14px;
  transition: all 0.2s;
}

.chainBtn:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

.chainBtn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(255, 107, 0, 0.1);
  box-shadow: 0 0 8px var(--accent-glow);
}

.deleteStopBtn {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s;
}

.deleteStopBtn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fff;
}

.gradbar {
  position: relative;
  height: calc(28px * var(--panel-scale));
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin: calc(20px * var(--panel-scale)) 0 calc(18px * var(--panel-scale)) 0;
  user-select: none;
  background-image:
    linear-gradient(45deg, #1e1e22 25%, transparent 25%),
    linear-gradient(-45deg, #1e1e22 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1e1e22 75%),
    linear-gradient(-45deg, transparent 75%, #1e1e22 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.gradbar-fill {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius-md) - 1px);
}

.stopZone {
  position: absolute;
  left: 0;
  right: 0;
}

.stopZone.top {
  top: -16px;
  height: 16px;
}

.stopZone.bottom {
  bottom: -16px;
  height: 16px;
}

.stop {
  position: absolute;
  top: 2px;
  width: 12px;
  transform: translateX(-6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
  touch-action: none;
  user-select: none;
  transition: transform 0.1s;
}

.stop.dragging {
  transform: translateX(-6px) scale(1.2);
  z-index: 10;
}

.stop .chip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
}

.stop .arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-dim);
  margin-top: 2px;
  transition: border-color 0.2s;
}

.stop.selected .arrow {
  border-top-color: var(--accent);
}

.stop.selected .chip {
  box-shadow: 0 0 0 2px var(--accent), 0 0 8px var(--accent-glow);
}

.astop {
  position: absolute;
  bottom: 2px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid var(--text-dim);
  transform: translateX(-6px);
  touch-action: none;
  user-select: none;
  transition: all 0.2s;
}

.astop.dragging {
  transform: translateX(-6px) scale(1.2);
  z-index: 10;
}

.astop.selected {
  border-bottom-color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

.astop.snapped {
  border-bottom-color: #fbbf24;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}

.picker {
  display: flex;
  flex-direction: column;
  gap: 14px;
  user-select: none;
}

#svSquare {
  position: relative;
  width: 100%;
  height: calc(140px * var(--panel-scale));
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  cursor: crosshair;
  touch-action: none;
  box-shadow: var(--shadow-sm);
}

#svThumb {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.1s;
}

#hueSlider, #alphaSlider {
  position: relative;
  width: 100%;
  height: calc(12px * var(--panel-scale));
  border-radius: 6px;
  touch-action: none;
  box-shadow: var(--shadow-sm);
}

#hueSlider {
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

#alphaSlider {
  background-image:
    linear-gradient(45deg, #1e1e22 25%, transparent 25%),
    linear-gradient(-45deg, #1e1e22 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1e1e22 75%),
    linear-gradient(-45deg, transparent 75%, #1e1e22 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

#hueThumb, #alphaThumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: #fff;
}

.fields {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  font-size: 11.5px;
  color: var(--text-dim);
}

.fields input[type=number] {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  transition: border-color 0.2s;
}

.fields input[type=number]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.hexrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.hexrow input {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  transition: border-color 0.2s;
}

.hexrow input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.preview {
  width: calc(40px * var(--panel-scale));
  height: calc(40px * var(--panel-scale));
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-image:
    linear-gradient(45deg, #1e1e22 25%, transparent 25%),
    linear-gradient(-45deg, #1e1e22 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1e1e22 75%),
    linear-gradient(-45deg, transparent 75%, #1e1e22 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.preview-inner {
  width: 100%;
  height: 100%;
}

.rowflex {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

#fileInput {
  display: none;
}

@media (max-width: 820px) {
  #topbar {
    padding: 8px 12px;
    gap: 8px;
  }
  #topbar h1 {
    display: none;
  }
  #main {
    flex-direction: column;
  }
  #centerPanel {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
  }
  #editorResizer {
    display: none;
  }
  #panelsRow {
    order: 2;
    flex: 0 0 42vh;
    min-height: 160px;
    border-top: 1px solid var(--border);
    border-right: none;
  }
  #treePanel {
    width: auto;
    flex: 0 0 var(--mtree-w, 50%);
    border-right: none;
  }
  #editorPanel {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  #mobileResizer {
    display: flex;
  }
  #player {
    gap: 10px;
    padding: 10px 12px;
    flex-wrap: nowrap;
  }
  #frameLabel {
    width: auto;
    min-width: 0;
    font-size: 11px;
  }
  #player #undoRedoBar {
    display: flex;
    gap: 6px;
    flex: none;
    order: 3;
    margin: 0;
    padding: 0;
    border: none;
  }
  #player #undoRedoBar .iconBtn {
    width: 30px;
    height: 30px;
  }
  #player #scrub {
    order: 2;
  }
  #player #playBtn {
    order: 1;
  }
  #player #frameLabel {
    order: 4;
  }
}
#topbar { background:rgba(46,48,60,.96); padding:12px 18px; gap:10px; }
#topbar h1 { font-family:'Montserrat Alternates',sans-serif; font-size:20px; letter-spacing:-.04em; margin:0; }
.brand { display:flex; align-items:center; gap:10px; margin-right:12px; } .brand img { width:22px; height:30px; object-fit:contain; }
.brand-caption { color:var(--text-dim); font-size:12px; letter-spacing:.12em; font-weight:600; margin-left:auto; }
.btn { font-family:'Montserrat',sans-serif; font-size:13px; } .btn.primary { background:var(--accent); color:#202230; border-color:transparent; font-weight:700; } .btn.primary:hover { background:var(--accent-hover); color:#202230; }
#treePanel,#editorPanel { background:#292A37; } #main { background:#2A2B39; } #editorPanel { border-left:1px solid rgba(255,255,255,.07); }
#viewport { margin:16px; border:1px solid rgba(255,255,255,.08); border-radius:16px; } #dropHint { color:#B5B5C1; font-size:15px; line-height:1.8; }
.editor-title { font-family:'Montserrat Alternates',sans-serif; color:#fff; font-size:17px; font-weight:700; margin-bottom:18px; } .field-label { display:block; color:var(--text-dim); font-weight:600; }
.text-layer-input { display:block; width:100%; margin-top:8px; resize:vertical; min-height:88px; padding:12px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:#2A2B39; color:#fff; font:500 15px/1.5 'Montserrat',sans-serif; outline:none; }
.text-layer-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.outline-text-input { min-height:0; resize:none; }
.outline-text-controls { display:flex; gap:8px; align-items:center; margin-top:10px; }
.outline-text-controls input[type="color"] { width:46px; height:42px; padding:4px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:#2A2B39; cursor:pointer; }
.outline-font-controls { display:flex; gap:8px; align-items:center; margin-top:12px; }
.outline-font-select { flex:1; min-width:0; height:40px; padding:0 10px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:#2A2B39; color:#fff; font:500 13px 'Montserrat',sans-serif; }
.outline-font-upload { white-space:nowrap; }
.emoji-title { margin-top:16px; }
.emoji-grid { display:grid; grid-template-columns:repeat(6,minmax(38px,1fr)); gap:7px; margin-top:9px; }
.emoji-chip { display:flex; align-items:center; justify-content:center; min-height:42px; padding:4px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:#2A2B39; color:#fff; font:24px/1 'Montserrat',sans-serif; cursor:pointer; transition:background .15s,border-color .15s,transform .15s; }
.emoji-chip:hover { background:rgba(133,136,176,.18); border-color:var(--accent); transform:translateY(-1px); }
.emoji-chip:active { transform:scale(.96); }
.emoji-hint { margin-top:9px; }
.outline-edit-button { margin-left:auto; flex:none; border:1px solid rgba(133,136,176,.38); border-radius:7px; background:rgba(133,136,176,.12); color:#fff; padding:4px 7px; font:600 11px 'Montserrat',sans-serif; cursor:pointer; }
.outline-edit-button:hover { background:rgba(133,136,176,.26); border-color:var(--accent); }
.outline-emoji-grid { margin-top:14px; }
.emoji-credit { font-size:12px; } .editor-hint { color:var(--text-dim); font-size:13px; margin-top:10px; line-height:1.55; } :focus-visible { outline:2px solid #8588B0; outline-offset:2px; }
@media (max-width:820px) { .brand-caption { display:none; } #topbar h1 { font-size:18px; } }
/* Hours Studio reference layout: layers left, preview center, inspector right. */
#topbar { height:72px; min-height:72px; flex:none; flex-wrap:nowrap; padding:0 22px; gap:9px; background:#303140; border-bottom:1px solid rgba(255,255,255,.09); }
#topbar h1 { background:none; -webkit-text-fill-color:#fff; color:#fff; font:700 17px 'Montserrat Alternates',sans-serif; letter-spacing:-.03em; }
.brand { min-width:225px; gap:11px; margin-right:14px; }
.brand img { width:38px; height:38px; padding:6px; border:1px solid rgba(137,147,216,.36); border-radius:12px; background:linear-gradient(145deg,#3C3E4B,#2E303C); box-shadow:0 8px 22px rgba(0,0,0,.24); }
.brand-copy span { display:block; color:var(--text-dim); font:600 9px 'Montserrat',sans-serif; letter-spacing:.12em; margin-top:2px; }
#openBtn { margin-left:auto; }
.btn { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:9px 13px; font-size:12px; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#242633; }
#main { display:grid; grid-template-columns:280px minmax(360px,1fr) 300px; grid-template-areas:"layers canvas inspector"; min-height:0; background:#2A2B39; }
#panelsRow { display:contents; }
#treePanel { grid-area:layers; width:auto; border-right:1px solid rgba(255,255,255,.09); background:#303140; }
#centerPanel { grid-area:canvas; background:#252633; }
#editorPanel { grid-area:inspector; width:auto; min-width:0; padding:0 0 14px; border-left:1px solid rgba(255,255,255,.09); border-right:0; background:#303140; }
#editorResizer,#mobileResizer { display:none; }
 .sidebar-project-menu { flex:none; display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:9px 10px; border-bottom:1px solid rgba(255,255,255,.09); background:linear-gradient(180deg,rgba(42,43,57,.3),rgba(37,38,51,.16)); }
 .sidebar-project-action { min-width:0; min-height:32px; padding:0 7px; border:1px solid rgba(178,186,235,.14); border-radius:10px; background:#383a4e; color:#e5e6f1; font:600 9px 'Montserrat',sans-serif; white-space:nowrap; cursor:pointer; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
 .sidebar-project-action:hover { border-color:rgba(178,186,235,.2); background:#3f4154; transform:translateY(-1px); }
 .sidebar-project-action:active { transform:translateY(0) scale(.985); }
 .sidebar-project-action:focus-visible { outline:2px solid rgba(150,158,194,.42); outline-offset:2px; }
 .sidebar-project-action-primary { border-color:rgba(203,210,255,.16); background:#8993c8; color:#222538; font-weight:700; }
 .sidebar-project-action-primary:hover { border-color:rgba(203,210,255,.2); background:#9099ca; }
 .reference-panel-head { padding:13px 17px 12px; border-bottom:0; }
.reference-empty { padding:18px 14px; color:var(--text-dim); font-size:11px; line-height:1.65; text-align:center; }
.inspector-empty { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:17px 13px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:#252633; }
.inspector-empty-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:rgba(133,136,176,.16); color:#c4c9ff; font:700 15px 'Montserrat Alternates',sans-serif; }
.inspector-empty strong { font:600 12px 'Montserrat Alternates',sans-serif; color:#fff; }
.inspector-empty span { color:var(--text-dim); font-size:10px; line-height:1.6; }
.layer-action-row { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:10px; margin-top:9px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:#252633; }
.layer-action-row span { min-width:0; overflow:hidden; color:#dedee5; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.layer-action-row .btn { flex:none; padding:7px 9px; font-size:10px; }
.position-card { margin:0 0 16px; padding:13px 12px 10px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:#252633; }
.position-title { margin:0 0 10px; color:#fff; font:600 12px 'Montserrat Alternates',sans-serif; }
.position-control { display:grid; grid-template-columns:18px minmax(60px,1fr) 43px; align-items:center; gap:8px; min-height:35px; }
.position-control label { color:#B5B5C1; font:600 11px 'Montserrat',sans-serif; }
.position-control input[type=range] { width:100%; margin:0; accent-color:#8588B0; }
.position-value { padding:4px 5px; border-radius:7px; background:#303140; color:#d8d8de; text-align:center; font:600 10px 'Montserrat',sans-serif; font-variant-numeric:tabular-nums; }
.transform-inspector-card { padding:12px; }
.transform-inspector-subtitle { margin:-3px 0 10px; color:#8993D8; font-size:9px; }
.transform-inspector-row { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:7px; }
.transform-inspector-field { min-width:0; height:34px; display:flex; align-items:center; gap:6px; padding:0 8px; border:1px solid rgba(255,255,255,.07); border-radius:8px; background:#303140; }
.transform-inspector-field span { width:23px; flex:none; color:#B1B2B7; font:600 10px 'Montserrat',sans-serif; }
.transform-inspector-field input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:#fff; font:600 10px 'Montserrat',sans-serif; font-variant-numeric:tabular-nums; }
.transform-inspector-field small { color:#8993D8; font-size:9px; }
.text-transform-box { position:absolute; z-index:8; display:none; min-width:30px; min-height:30px; border:1.5px solid #aeb0e0; border-radius:3px; background:rgba(133,136,176,.12); box-shadow:0 0 0 1px rgba(18,20,28,.8),0 0 12px rgba(133,136,176,.25); pointer-events:none; cursor:default !important; touch-action:none; user-select:none; }
.text-transform-box.visible { display:block; pointer-events:auto; cursor:move !important; }
.text-transform-box.dragging { cursor:grabbing !important; }
.text-transform-handle { position:absolute; z-index:3; width:14px; height:14px; border:2px solid #8588B0; border-radius:50%; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.5); transform:translate(-50%,-50%); pointer-events:auto; }
.text-transform-handle.top-left { top:0; left:0; cursor:nwse-resize; }
.text-transform-handle.bottom-right { top:100%; left:100%; cursor:nwse-resize; }
.text-transform-handle.top-right { top:0; left:100%; cursor:nesw-resize; }
.text-transform-handle.bottom-left { top:100%; left:0; cursor:nesw-resize; }
.text-transform-pivot { position:absolute; z-index:2; top:50%; left:50%; width:10px; height:10px; border:2px solid #8993D8; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(137,147,216,.2),0 1px 5px rgba(0,0,0,.4); transform:translate(-50%,-50%); pointer-events:none; }
.text-transform-rotate-stem { position:absolute; top:-23px; left:50%; width:1px; height:23px; background:#8993D8; transform:translateX(-50%); pointer-events:none; }
.text-transform-handle.rotate { top:-34px; left:50%; display:grid; place-items:center; width:23px; height:23px; padding:0; border:1px solid #8993D8; border-radius:50%; background:#2E303C; color:#fff; font:700 16px/1 'Montserrat',sans-serif; cursor:default !important; }
.text-transform-hint { margin:8px 0 13px; color:#B5B5C1; font-size:11px; line-height:1.45; }
  .vector-transform-lock { display:flex; align-items:center; gap:8px; margin:2px 0 10px; color:var(--text-dim); font-size:11px; cursor:pointer; }
  .vector-transform-lock input { width:14px; height:14px; margin:0; accent-color:var(--accent); }
  .vector-transform-actions { display:flex; gap:7px; margin:10px 0 8px; }
  .vector-transform-actions .btn { min-width:0; min-height:31px; padding:6px 10px; font-size:11px; }
  .vector-transform-actions .btn:first-child { flex:1; }
.text-discovery-action { width:100%; margin-top:12px; padding:11px 12px; border:1px dashed rgba(133,136,176,.58); border-radius:10px; background:rgba(133,136,176,.09); color:#e4e6ff; text-align:left; line-height:1.45; white-space:normal; }
.text-discovery-backdrop { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:18px; background:rgba(12,13,18,.72); backdrop-filter:blur(5px); }
.text-discovery-dialog { width:min(440px,100%); max-height:min(86vh,660px); overflow:auto; padding:20px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:#292A37; box-shadow:0 24px 70px rgba(0,0,0,.45); }
.text-discovery-title { margin:0 0 8px; color:#fff; font:700 18px 'Montserrat Alternates',sans-serif; }
.text-discovery-copy { margin:0 0 16px; color:#B5B5C1; font-size:13px; line-height:1.55; }
.text-discovery-dialog .field-label { display:block; margin:14px 0 6px; }
.text-discovery-dialog select,.text-discovery-dialog textarea { width:100%; padding:10px 11px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:#2A2B39; color:#fff; font:500 13px 'Montserrat',sans-serif; }
.text-discovery-dialog textarea { min-height:78px; resize:vertical; }
.text-discovery-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:16px; }
.text-discovery-actions .btn { min-width:100px; }
.text-discovery-status { min-height:18px; margin:9px 0 0; color:#e9a9a9; font-size:12px; }
.eyebrow { color:var(--text-dim); font:700 9px 'Montserrat',sans-serif; letter-spacing:1.5px; text-transform:uppercase; }
.panel-title { margin-top:5px; color:#fff; font:600 16px 'Montserrat Alternates',sans-serif; }
 .reference-search { width:100%; margin-top:10px; padding:9px 10px; border:1px solid rgba(255,255,255,.1); border-radius:9px; outline:none; background:#252633; color:#fff; font:500 11px 'Montserrat',sans-serif; }
.reference-search:focus { border-color:rgba(133,136,176,.65); }
.reference-layer-tools { padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.reference-tools-label { display:block; margin:0 0 5px 4px; color:#9A9BAA; font:700 9px 'Montserrat',sans-serif; letter-spacing:.08em; text-transform:uppercase; }
#filters { display:grid; grid-template-columns:1fr 1fr; gap:1px; }
#filters label,#linearWrap label { gap:5px; padding:4px; color:#B5B5C1; font-size:9px; line-height:1.35; }
#filters label:hover,#linearWrap label:hover { background:rgba(255,255,255,.05); }
#linearWrap { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:7px 0 0; margin-top:6px; border-top:1px solid rgba(255,255,255,.08); border-left:0; }
#tree { padding:9px 9px calc(14px + env(safe-area-inset-bottom)); }
#tree .row { border-radius:9px; }
#tree .row.selected { background:rgba(133,136,176,.12); border-color:rgba(133,136,176,.25); }
.precomp-tree-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 5px 12px; margin:0 3px 8px; border-bottom:1px solid rgba(255,255,255,.09); }
.precomp-tree-label { min-width:0; display:flex; flex-direction:column; gap:4px; color:var(--text-dim); font-size:9px; letter-spacing:.04em; text-transform:uppercase; }
.precomp-tree-label strong { overflow:hidden; color:#fff; font:600 12px 'Montserrat Alternates',sans-serif; letter-spacing:0; text-overflow:ellipsis; text-transform:none; }
.precomp-back { flex:none; padding:7px 9px; color:#e5e5f0; font-size:10px; }
.scoped-layer-row { min-height:36px; }
.inspector-head { flex:none; }
#editorBody { padding:17px; }
#editorPanel .editor-title { margin-bottom:14px; font-size:16px; }
#undoRedoBar { margin: auto 17px 0; padding-top:12px; }
.canvas-toolbar { height:58px; flex:none; display:flex; align-items:center; gap:12px; padding:0 17px; border-bottom:1px solid rgba(255,255,255,.09); background:#303140; }
.canvas-tool-group { display:flex; }
#canvasTools { display:flex; align-items:center; gap:3px; padding:4px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:#252633; }
.canvas-tool { width:32px; height:30px; display:grid; place-items:center; padding:0; border:0; border-radius:7px; background:transparent; color:#b1b2b7; cursor:pointer; transition:background .15s,color .15s; }
.canvas-tool svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.canvas-tool:hover { color:#fff; background:rgba(255,255,255,.08); }
.canvas-tool.active { color:#171923; background:#8993D8; }
#viewport.tool-hand { cursor:grab; }
#viewport.tool-hand * { cursor:inherit; }
#viewport.tool-hand.is-panning { cursor:grabbing; }
#viewport.is-panning #lottieContainer,#viewport.is-panning #lottieContainerB { transition:none !important; }
.canvas-toolbar-title { margin-top:3px; color:#fff; font:600 12px 'Montserrat Alternates',sans-serif; }
.canvas-spacer { flex:1; }
#bgControls { gap:7px; }
#precompControl { display:flex; align-items:center; gap:7px; color:var(--text-dim); font-size:10px; white-space:nowrap; }
#precompSelect { max-width:min(220px,22vw); height:32px; padding:0 9px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:#252633; color:#fff; font:500 10px 'Montserrat',sans-serif; }
#precompSelect:disabled { opacity:.55; }
#bgControls span { color:var(--text-dim); font-size:10px; }
#bgColorPicker { width:28px; height:28px; padding:3px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:#252633; }
#viewport { margin:0; border:0; border-radius:0; box-shadow:none; }
#viewport.checker { background-color:#252633; background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px); background-size:18px 18px; background-position:0 0; }
#dropHint { max-width:340px; padding:24px; border:1px dashed rgba(255,255,255,.22); border-radius:18px; background:rgba(46,48,60,.91); line-height:1.8; }
#player { min-height:64px; padding:10px 17px; background:#303140; border-top:1px solid rgba(255,255,255,.09); }
#playBtn { background:var(--accent); color:#252735; }
#scrub { accent-color:var(--accent); }
.precomp-control { display:none !important; }
#timelinePanel { height:222px; min-height:170px; flex:0 0 222px; display:flex; flex-direction:column; overflow:hidden; border-top:1px solid rgba(255,255,255,.1); background:#20212c; color:#fff; }
.timeline-topbar { min-height:39px; display:flex; align-items:stretch; gap:14px; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.08); background:#303140; }
.timeline-tabs { min-width:0; display:flex; align-items:stretch; gap:3px; overflow-x:auto; scrollbar-width:thin; }
.timeline-tab { position:relative; flex:none; max-width:220px; overflow:hidden; padding:0 13px; border:0; border-bottom:2px solid transparent; background:transparent; color:#aeb0be; font:600 10px 'Montserrat',sans-serif; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.timeline-tab::before { content:"⌗"; margin-right:7px; color:#8993D8; font-size:13px; }
.timeline-tab:hover { color:#fff; background:rgba(255,255,255,.035); }
.timeline-tab.active { border-bottom-color:#8993D8; background:rgba(137,147,216,.09); color:#fff; }
.timeline-summary { align-self:center; margin-left:auto; flex:none; color:#8993D8; font:500 9px 'Montserrat',sans-serif; }
.timeline-scroll { flex:1; min-height:0; overflow:auto; scrollbar-color:#505263 #252633; scrollbar-width:thin; }
.timeline-content { position:relative; min-width:100%; }
.timeline-ruler,.timeline-track { display:grid; grid-template-columns:196px auto; min-height:32px; }
.timeline-ruler { position:sticky; top:0; z-index:3; height:27px; min-height:27px; border-bottom:1px solid rgba(255,255,255,.08); background:#252633; }
.timeline-layer-name { position:sticky; left:0; z-index:2; min-width:0; display:flex; align-items:center; gap:8px; padding:0 11px; border-right:1px solid rgba(255,255,255,.08); background:#292b38; }
.timeline-ruler-label { color:#aeb0be; font:600 9px 'Montserrat',sans-serif; }
.timeline-scale { position:relative; height:27px; background-image:repeating-linear-gradient(to right,transparent 0,transparent 119px,rgba(255,255,255,.07) 119px,rgba(255,255,255,.07) 120px); cursor:crosshair; }
.timeline-tick { position:absolute; top:7px; transform:translateX(-4px); color:#9294a4; font:500 8px 'Montserrat',sans-serif; white-space:nowrap; }
.timeline-tick::before { content:""; position:absolute; top:12px; left:3px; width:1px; height:7px; background:rgba(255,255,255,.18); }
.timeline-track { height:33px; min-height:33px; border-bottom:1px solid rgba(255,255,255,.035); cursor:pointer; }
.timeline-track:hover .timeline-layer-name { background:#323441; }
.timeline-track.selected .timeline-layer-name { background:rgba(137,147,216,.17); }
.timeline-visibility { width:19px; height:20px; flex:none; padding:0; border:0; background:transparent; color:#bfc4ff; font-size:13px; cursor:pointer; }
.timeline-visibility.muted { color:#777988; }
.timeline-layer-icon { width:15px; flex:none; color:#8993D8; text-align:center; font-size:11px; }
.timeline-layer-title { min-width:0; overflow:hidden; color:#d6d7df; font:500 9px 'Montserrat',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.timeline-lane { position:relative; height:33px; background-image:repeating-linear-gradient(to right,transparent 0,transparent 119px,rgba(255,255,255,.035) 119px,rgba(255,255,255,.035) 120px); cursor:crosshair; }
.timeline-bar { position:absolute; top:7px; height:19px; min-width:7px; padding:0; overflow:hidden; border:1px solid rgba(137,147,216,.48); border-radius:5px; background:linear-gradient(90deg,rgba(137,147,216,.58),rgba(137,147,216,.28)); cursor:pointer; }
.timeline-bar:hover { border-color:#b2b8ff; background:linear-gradient(90deg,rgba(137,147,216,.82),rgba(137,147,216,.43)); }
.timeline-bar.precomp-bar { border-color:rgba(78,195,178,.62); background:linear-gradient(90deg,rgba(78,195,178,.58),rgba(78,195,178,.24)); }
.timeline-bar.hidden-layer { opacity:.3; border-style:dashed; }
.timeline-playhead { position:absolute; top:26px; bottom:0; z-index:4; width:1px; pointer-events:none; background:#f08a42; box-shadow:0 0 6px rgba(240,138,66,.32); }
.timeline-playhead::before { content:""; position:absolute; top:-3px; left:-4px; width:9px; height:9px; border-radius:2px; transform:rotate(45deg); background:#f08a42; }
.timeline-empty { padding:15px 12px; color:#8f91a1; font:500 10px 'Montserrat',sans-serif; }
.timeline-layer-empty { margin-left:190px; padding:7px 12px; border-bottom:1px solid rgba(255,255,255,.035); color:#aeb2c0; font:500 10px 'Montserrat',sans-serif; }
@media (max-width:820px) { #timelinePanel { height:190px; min-height:140px; flex-basis:190px; } .timeline-topbar { min-height:36px; padding:0 7px; gap:5px; } .timeline-tab { padding:0 8px; font-size:9px; } .timeline-summary { display:none; } .timeline-ruler,.timeline-track { grid-template-columns:145px auto; } .timeline-layer-name { padding:0 6px; gap:5px; } }
#app:not(.has-animation) #timelinePanel,#app:not(.has-animation) #player { display:none !important; }
#player { position:relative; width:max-content; max-width:calc(100% - 28px); min-height:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; gap:4px; margin:8px auto 11px; padding:5px 9px; border:1px solid rgba(255,255,255,.075); border-radius:16px; background:rgba(25,29,31,.96); box-shadow:0 8px 24px rgba(0,0,0,.24); }
#frameLabel { order:0; width:57px; min-width:57px; color:#f1f2f4; font:600 10px 'Montserrat',sans-serif; font-variant-numeric:tabular-nums; text-align:center; white-space:nowrap; }
#player button { flex:none; display:grid; place-items:center; width:27px; height:28px; padding:0; border:0; border-radius:8px; background:transparent; color:#aeb2b6; font:600 12px 'Montserrat',sans-serif; box-shadow:none; cursor:pointer; transition:background .14s,color .14s,transform .14s; }
#player button:hover { color:#fff; background:rgba(255,255,255,.09); }
#player button:active { transform:scale(.92); }
#player #playBtn { width:31px; height:31px; border-radius:10px; background:#8993D8; color:#202230; font-size:12px; }
#player #playBtn:hover { background:#a0a8e7; }
#player .player-loop { margin-left:2px; color:#858b91; font-size:16px; }
#player .player-loop.active { color:#55c4b4; }
#player #scrub { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
#timelinePanel { position:relative; }
.timeline-resize-handle { position:absolute; top:0; left:0; right:0; z-index:10; height:8px; display:grid; place-items:center; border:0; background:transparent; cursor:ns-resize; touch-action:none; }
.timeline-resize-handle::after { content:""; width:34px; height:3px; border-radius:3px; background:#626574; transition:background .15s,width .15s; }
.timeline-resize-handle:hover::after,.timeline-resize-handle.dragging::after { width:46px; background:#8993D8; }
.timeline-topbar { padding-top:3px; }
.timeline-scale,.timeline-lane { touch-action:none; }
@media (max-width:820px) { #player { margin:7px auto 9px; min-height:40px; height:40px; padding:4px 6px; } #player button { width:24px; height:26px; } #player #playBtn { width:28px; height:28px; } #frameLabel { width:52px; min-width:52px; } }
@media (max-width:1100px) and (min-width:821px) { #main { grid-template-columns:245px minmax(300px,1fr) 280px; } .brand { min-width:195px; margin-right:4px; } #topbar { padding:0 14px; } }
@media (max-width:820px) {
  #topbar { height:auto; min-height:62px; flex-wrap:wrap; padding:8px 12px; gap:7px; }
  #topbar h1 { display:block; font-size:15px; }
  .brand { min-width:0; margin-right:auto; }
  .brand img { width:32px; height:32px; }
  .brand-copy span { display:none; }
  #openBtn { margin-left:0; }
  #main { display:flex; flex-direction:column; }
  #centerPanel { order:1; flex:1 1 auto; min-height:50vh; }
  #panelsRow { display:flex; order:2; flex:0 0 42vh; min-height:220px; border-top:1px solid rgba(255,255,255,.09); }
  #treePanel { width:auto; flex:0 0 var(--mtree-w,50%); border-right:1px solid rgba(255,255,255,.09); }
  #editorPanel { width:auto; flex:1 1 auto; min-width:0; }
  #mobileResizer { display:flex; width:5px; }
  #editorResizer { display:none; }
  #editorBody { padding:13px; }
  .sidebar-project-menu { gap:5px; padding:8px 7px; }
  .sidebar-project-action { min-height:29px; padding:0 4px; border-radius:9px; font-size:8px; }
  .reference-panel-head { padding:11px 12px 9px; }
  .reference-layer-tools { padding:8px; }
  #tree { padding:5px; }
  #player { gap:9px; padding:9px 12px; }
  #frameLabel { min-width:0; width:auto; font-size:11px; }
}
@media (max-width:520px) { #topbar .btn { padding:8px 9px; font-size:10px; } .brand { gap:8px; } #topbar h1 { font-size:13px; } #filters { grid-template-columns:1fr; } .canvas-toolbar { gap:7px; padding:0 9px; } #precompControl span { display:none; } #precompSelect { max-width:34vw; padding:0 5px; font-size:9px; } }
.legal-open-button { display:inline-flex; align-items:center; gap:8px; margin-left:0; white-space:nowrap; color:#e7e8f5; border-color:rgba(137,147,216,.28); background:linear-gradient(135deg,rgba(137,147,216,.14),rgba(137,147,216,.05)); }
.legal-open-button:hover { color:#fff; border-color:rgba(137,147,216,.7); background:rgba(137,147,216,.2); transform:translateY(-1px); }
.legal-button-mark { width:23px; height:23px; flex:none; object-fit:contain; border:0; border-radius:0; background:transparent; }
.legal-shield { width:19px; height:19px; flex:none; display:grid; place-items:center; border:1px solid rgba(137,147,216,.45); border-radius:7px; background:rgba(137,147,216,.16); color:#c7cbff; font-size:11px; }
.legal-dialog { position:fixed; inset:0; margin:auto; width:min(560px,calc(100vw - 32px)); max-width:none; max-height:min(88vh,720px); overflow:auto; padding:28px; color:#fff; border:1px solid rgba(255,255,255,.1); border-radius:24px; background:linear-gradient(150deg,#343645 0%,#292b38 72%); box-shadow:0 28px 100px rgba(0,0,0,.58); font-family:'Montserrat',sans-serif; }
.legal-dialog::backdrop { background:rgba(12,13,20,.7); backdrop-filter:blur(7px); }
.legal-dialog[open] { animation:legal-dialog-in .18s ease-out; }
@keyframes legal-dialog-in { from { opacity:0; transform:translateY(9px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
.legal-dialog-glow { position:absolute; width:210px; height:150px; top:-100px; right:12px; pointer-events:none; background:rgba(137,147,216,.2); filter:blur(70px); }
.legal-dialog-head { position:relative; display:flex; align-items:flex-start; gap:15px; padding-right:25px; }
.legal-dialog-icon { width:44px; height:44px; flex:none; display:grid; place-items:center; border:0; border-radius:0; background:transparent; }
.legal-dialog-icon img { display:block; width:100%; height:100%; object-fit:contain; }
.legal-dialog-head .eyebrow { margin:2px 0 6px; color:#a9aedc; font-size:9px; letter-spacing:.14em; font-weight:700; }
.legal-dialog-head h2 { margin:0; font:700 22px 'Montserrat Alternates',sans-serif; letter-spacing:-.035em; }
.legal-dialog-head p { margin:7px 0 0; color:#b1b2b7; font-size:12px; line-height:1.6; }
.legal-close { position:absolute; top:0; right:0; width:32px; height:32px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:rgba(255,255,255,.05); color:#c8c9d2; font-size:22px; line-height:1; cursor:pointer; }
.legal-close:hover { color:#fff; background:rgba(255,255,255,.11); }
.legal-dialog-grid { display:grid; gap:10px; margin-top:24px; }
.legal-card { min-width:0; display:flex; align-items:center; gap:13px; padding:15px; border:1px solid rgba(255,255,255,.075); border-radius:15px; color:#fff; text-decoration:none; background:rgba(22,23,32,.28); transition:border-color .16s,background .16s,transform .16s; }
.legal-card:hover { transform:translateY(-1px); border-color:rgba(137,147,216,.55); background:rgba(137,147,216,.09); }
.legal-card-icon { width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:11px; color:#c6caff; background:rgba(137,147,216,.14); font-size:20px; }
.legal-card-copy { display:grid; gap:5px; min-width:0; }
.legal-card-copy strong { font-size:12px; font-weight:700; }
.legal-card-copy small,.legal-support-top small { color:#aeb0be; font-size:10px; line-height:1.45; }
.legal-card-arrow { margin-left:auto; color:#aeb3ed; font-size:16px; }
.legal-support-card { margin-top:16px; padding:16px; border:1px solid rgba(137,147,216,.2); border-radius:16px; background:linear-gradient(120deg,rgba(137,147,216,.11),rgba(137,147,216,.035)); }
.legal-support-top { display:flex; align-items:center; gap:11px; }
.legal-support-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:rgba(137,147,216,.17); color:#cbd0ff; font-size:17px; }
.legal-support-top div { display:grid; gap:4px; }
.legal-support-top strong { font-size:12px; }
.legal-contacts { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.legal-contacts a { display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:rgba(20,21,29,.35); color:#e5e6f5; font-size:11px; font-weight:600; text-decoration:none; transition:all .15s; }
.legal-contacts a:hover { border-color:rgba(137,147,216,.48); background:rgba(137,147,216,.15); }
.legal-contacts a span { color:#aeb3ed; }
.legal-dialog-foot { display:flex; align-items:center; gap:8px; margin-top:18px; color:#9699aa; font-size:10px; }
@media (max-width:700px) { .legal-open-button { gap:6px; padding:8px 9px; font-size:10px; } .legal-dialog { padding:22px 18px; border-radius:20px; } .legal-dialog-head { gap:11px; } .legal-dialog-icon { width:38px; height:38px; border-radius:13px; } .legal-dialog-head h2 { font-size:18px; } }
@media (max-width:420px) { .legal-open-button { font-size:0 !important; gap:0; width:36px; height:36px; justify-content:center; padding:0 !important; } .legal-card { padding:12px; gap:10px; } .legal-card-copy strong { font-size:11px; } .legal-card-copy small { font-size:9px; } }
#player #frameLabel { order:0; width:57px; min-width:57px; }
#player #firstFrameBtn { order:1; }
#player #prevFrameBtn { order:2; }
#player #playBtn { order:3; }
#player #nextFrameBtn { order:4; }
#player #lastFrameBtn { order:5; }
#player #loopBtn { order:6; }
#player {
  border-color:rgba(177,178,183,.22);
  background:#2E303C;
  box-shadow:0 8px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035);
}
#player #frameLabel { color:#FFFFFF; }
#player button { color:#B1B2B7; }
#player button:hover { color:#FFFFFF; background:rgba(137,147,216,.16); }
#player #playBtn { background:#8993D8; color:#FFFFFF; }
#player #playBtn:hover { background:#a0a8e7; }
#player .player-loop { color:#B1B2B7; }
#player .player-loop.active { color:#8993D8; background:rgba(137,147,216,.13); }
.reference-layer-tools,#tree .catHeader,#tree .color-control-row,#tree .outline-edit-button { display:none !important; }
#tree .tree-section-label { margin:9px 8px 5px; color:#8993D8; font:700 9px 'Montserrat',sans-serif; letter-spacing:.07em; text-transform:uppercase; }
.timeline-expand { width:17px; height:20px; flex:none; display:grid; place-items:center; padding:0; border:0; border-radius:5px; background:transparent; color:#B1B2B7; font:700 16px 'Montserrat',sans-serif; cursor:pointer; transition:transform .16s,color .16s,background .16s; }
.timeline-expand:hover { color:#fff; background:rgba(137,147,216,.15); }
.timeline-expand.open { transform:rotate(90deg); color:#8993D8; }
.timeline-expand.empty { cursor:default; }
.timeline-expand.empty:hover { background:transparent; }
.timeline-group-track .timeline-layer-name { padding-left:calc(38px + var(--group-depth,1) * 12px); background:#252633; }
.timeline-group-track:hover .timeline-layer-name { background:#303140; }
.timeline-group-indent { width:10px; height:16px; flex:none; border-left:1px solid rgba(177,178,183,.25); border-bottom:1px solid rgba(177,178,183,.25); border-radius:0 0 0 4px; opacity:.7; }
.timeline-group-marker { width:15px; flex:none; color:#B1B2B7; text-align:center; font-size:10px; }
.timeline-group-marker.is-text { color:#8993D8; font-weight:800; }
.timeline-text-badge { flex:none; padding:2px 5px; border:1px solid rgba(137,147,216,.25); border-radius:5px; background:rgba(137,147,216,.12); color:#c6caff; font:700 7px 'Montserrat',sans-serif; letter-spacing:.04em; }
.timeline-group-bar { height:15px; top:8px; opacity:.6; border-radius:5px; }
.timeline-group-bar.text-candidate-bar { border-color:rgba(137,147,216,.68); background:linear-gradient(90deg,rgba(137,147,216,.6),rgba(137,147,216,.24)); opacity:.95; }
.timeline-group-track.selected .timeline-layer-name { background:rgba(137,147,216,.16); }
.timeline-topbar { box-shadow:0 2px 12px rgba(0,0,0,.12); }
.timeline-ruler-label { color:#8993D8; font:700 9px 'Montserrat',sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.timeline-visibility { width:20px; height:22px; border-radius:6px; transition:background .14s,color .14s; }
.timeline-visibility:hover { background:rgba(137,147,216,.15); color:#fff; }
.timeline-layer-icon { width:17px; height:17px; display:grid; place-items:center; border:1px solid rgba(137,147,216,.2); border-radius:5px; background:rgba(137,147,216,.09); }
.timeline-track.selected .timeline-bar { border-color:#b4b9f1; box-shadow:0 0 0 2px rgba(137,147,216,.13); }
.timeline-playhead { pointer-events:none; }
.timeline-playhead::after { content:""; position:absolute; top:0; left:-4px; width:9px; height:calc(100% + 1px); background:linear-gradient(90deg,transparent,rgba(137,147,216,.07),transparent); }
.timeline-resize-handle::after { width:42px; height:4px; background:#777caa; }
.timeline-resize-handle:hover::after,.timeline-resize-handle.dragging::after { width:56px; background:#8993D8; }
.timeline-scroll { scrollbar-color:#56596f #252633; }
.timeline-scroll::-webkit-scrollbar { width:9px; height:9px; }
.timeline-scroll::-webkit-scrollbar-thumb { border:2px solid #252633; border-radius:9px; background:#55586d; }
.timeline-scroll::-webkit-scrollbar-thumb:hover { background:#8993D8; }
.timeline-scroll::-webkit-scrollbar-corner { background:#252633; }
.position-control { grid-template-columns:22px minmax(35px,1fr) 62px 18px; gap:7px; min-height:38px; }
.position-control label { color:#B1B2B7; }
.position-control input[type="range"] { min-width:0; accent-color:#8993D8; cursor:ew-resize; }
.position-number { width:62px; min-width:0; height:27px; padding:0 5px; border:1px solid rgba(177,178,183,.2); border-radius:7px; outline:0; background:#303140; color:#fff; text-align:center; font:600 10px 'Montserrat',sans-serif; font-variant-numeric:tabular-nums; }
.position-number:focus { border-color:#8993D8; box-shadow:0 0 0 2px rgba(137,147,216,.14); }
.position-unit { color:#8993D8; font:600 9px 'Montserrat',sans-serif; text-align:left; }
.position-control input[type="range"]::-webkit-slider-thumb { box-shadow:0 0 0 3px rgba(137,147,216,.14); }
.svg-import-btn { border-color:rgba(137,147,216,.38); background:rgba(137,147,216,.11); color:#e8eaff; }
.svg-import-btn:hover { border-color:#8993D8; background:rgba(137,147,216,.2); color:#fff; }
.svg-convert-stage { position:fixed !important; left:-10000px !important; top:0 !important; visibility:hidden !important; pointer-events:none !important; overflow:visible !important; }
#timelinePanel { height:274px; min-height:170px; flex-basis:274px; border-top-color:rgba(137,147,216,.22); background:#252633; box-shadow:0 -10px 28px rgba(0,0,0,.12); }
.timeline-topbar { min-height:42px; padding:0 13px; border-bottom-color:rgba(177,178,183,.11); background:#2E303C; }
.timeline-tab { max-width:235px; padding:0 14px; color:#B1B2B7; font-size:10px; }
.timeline-tab.active { border-bottom-color:#8993D8; background:rgba(137,147,216,.12); color:#fff; }
.timeline-summary { padding:5px 9px; border:1px solid rgba(137,147,216,.16); border-radius:7px; background:rgba(137,147,216,.07); color:#b8bdf1; font-size:9px; }
.timeline-ruler,.timeline-track { grid-template-columns:220px auto; }
.timeline-ruler { height:31px; min-height:31px; border-bottom-color:rgba(177,178,183,.12); background:#292B38; }
.timeline-ruler .timeline-layer-name { background:#2E303C; border-right-color:rgba(177,178,183,.13); }
.timeline-scale { height:31px; background-image:repeating-linear-gradient(to right,transparent 0,transparent 119px,rgba(177,178,183,.1) 119px,rgba(177,178,183,.1) 120px),repeating-linear-gradient(to right,transparent 0,transparent 29px,rgba(177,178,183,.025) 29px,rgba(177,178,183,.025) 30px); }
.timeline-tick { top:6px; color:#B1B2B7; font-size:9px; }
.timeline-tick::before { top:14px; height:9px; background:rgba(177,178,183,.24); }
.timeline-track { height:38px; min-height:38px; border-bottom-color:rgba(177,178,183,.055); }
.timeline-track:nth-child(even) { background:rgba(255,255,255,.012); }
.timeline-layer-name { gap:7px; padding:0 10px; border-right-color:rgba(177,178,183,.1); background:#292B38; }
.timeline-track:hover .timeline-layer-name { background:#343645; }
.timeline-track.selected .timeline-layer-name { background:rgba(137,147,216,.19); }
.timeline-layer-title { color:#e3e4ec; font-size:10px; }
.timeline-lane { height:38px; background-image:repeating-linear-gradient(to right,transparent 0,transparent 119px,rgba(177,178,183,.065) 119px,rgba(177,178,183,.065) 120px),repeating-linear-gradient(to right,transparent 0,transparent 29px,rgba(177,178,183,.02) 29px,rgba(177,178,183,.02) 30px); }
.timeline-bar { top:8px; height:22px; padding:0 9px; border-color:rgba(137,147,216,.56); border-radius:7px; background:linear-gradient(90deg,rgba(137,147,216,.48),rgba(137,147,216,.24)); color:#f3f3ff; font:600 9px 'Montserrat',sans-serif; line-height:20px; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.timeline-bar:hover { border-color:#b1b7f4; background:linear-gradient(90deg,rgba(137,147,216,.7),rgba(137,147,216,.36)); }
.timeline-bar.precomp-bar { border-color:rgba(137,147,216,.55); background:linear-gradient(90deg,rgba(137,147,216,.38),rgba(137,147,216,.18)); }
.timeline-playhead { top:31px; background:#8993D8; box-shadow:0 0 9px rgba(137,147,216,.55); }
.timeline-playhead::before { top:-4px; left:-5px; width:10px; height:10px; border-radius:50% 50% 3px 50%; transform:rotate(45deg); background:#8993D8; }
.timeline-group-track { height:34px; min-height:34px; }
.timeline-group-track .timeline-lane { height:34px; }
.timeline-group-bar { top:9px; height:16px; padding:0 7px; color:#dfe2ff; font-size:8px; line-height:14px; }
.timeline-group-track .timeline-layer-name { background:#252633; }
.timeline-group-track:hover .timeline-layer-name { background:#303140; }
.timeline-group-track.selected .timeline-layer-name { background:rgba(137,147,216,.16); }
@media (max-width:820px) { #timelinePanel { height:210px; min-height:140px; flex-basis:210px; } .timeline-ruler,.timeline-track { grid-template-columns:160px auto; } .timeline-summary { display:none; } #addSvgBtn { font-size:10px; padding:8px 9px; } }

/* Timeline layer operations: reorder, visibility and safe deletion controls. */
.timeline-ruler,.timeline-track { grid-template-columns:248px auto; }
.timeline-layer-name { gap:5px; padding:0 8px; }
.timeline-reorder,.timeline-delete { width:24px; height:26px; flex:none; display:grid; place-items:center; padding:0; border:1px solid transparent; border-radius:7px; background:transparent; color:#b1b2b7; font:700 14px 'Montserrat',sans-serif; line-height:1; cursor:pointer; transition:background .14s,border-color .14s,color .14s,opacity .14s,transform .14s; }
.timeline-reorder { cursor:grab; font-size:15px; touch-action:none; }
.timeline-reorder:active { cursor:grabbing; }
.timeline-reorder:hover { border-color:rgba(137,147,216,.22); background:rgba(137,147,216,.12); color:#dce0ff; }
.timeline-delete { opacity:1; color:#b1b2b7; font-size:18px; }
.timeline-layer-name:hover .timeline-delete,.timeline-group-track:hover .timeline-delete,.timeline-delete:focus-visible { opacity:1; }
.timeline-delete:hover { border-color:rgba(237,112,132,.28); background:rgba(237,112,132,.13); color:#ff9daa; }
.timeline-track.dragging { opacity:.42; }
.timeline-track.drop-target .timeline-layer-name { box-shadow:inset 0 2px #8993D8; }
.timeline-track.drop-nest-target .timeline-layer-name { background:rgba(137,147,216,.24); box-shadow:inset 0 0 0 2px #8993D8; color:#fff; }
.timeline-group-reorder { margin-left:auto; }
.timeline-group-track.drop-nest-target .timeline-layer-title { color:#fff; }
.timeline-track.dragging .timeline-layer-name { opacity:.48; }
.timeline-tracks.is-mutating .timeline-track { opacity:.7; }
.timeline-tracks.is-mutating .timeline-delete,.timeline-tracks.is-mutating .timeline-reorder { pointer-events:none; }
.timeline-group-track .timeline-delete { margin-left:auto; }
.timeline-group-name { padding-right:8px; }
@media (max-width:820px) { .timeline-ruler,.timeline-track { grid-template-columns:188px auto; } .timeline-layer-name { gap:3px; padding:0 5px; } .timeline-reorder,.timeline-delete { width:22px; height:24px; } }
.quota-pill { max-width:190px; overflow:hidden; padding:8px 11px; border:1px solid rgba(137,147,216,.34); border-radius:10px; background:rgba(137,147,216,.12); color:#dce0ff; cursor:pointer; font:600 10px 'Montserrat',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.quota-pill:hover { border-color:#8993D8; background:rgba(137,147,216,.2); }
.plans-dialog { width:min(500px,calc(100vw - 28px)); max-width:none; padding:0; border:1px solid rgba(137,147,216,.35); border-radius:18px; background:#2E303C; color:#fff; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.plans-dialog::backdrop { background:rgba(10,11,17,.68); backdrop-filter:blur(5px); }
.plans-dialog form { padding:22px; }
.plans-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.plans-dialog-head h2 { margin:5px 0 0; font:700 20px 'Montserrat Alternates',sans-serif; }
.plans-close { width:30px; height:30px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:#3C3E4B; color:#fff; cursor:pointer; font-size:20px; }
.plan-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.plan-card { min-width:0; padding:13px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#3C3E4B; }
.plan-card.active { border-color:#8993D8; box-shadow:inset 0 0 0 1px rgba(137,147,216,.2); }
.plan-card strong { display:block; margin-bottom:7px; font:700 12px 'Montserrat Alternates',sans-serif; }
.plan-card span { color:#B1B2B7; font-size:11px; line-height:1.5; }
.plan-card em { display:block; margin-top:6px; color:#8993D8; font-size:9px; font-style:normal; }
.plan-action { display:inline-flex; align-items:center; justify-content:center; margin-top:10px; padding:8px 10px; border:1px solid rgba(137,147,216,.55); border-radius:9px; background:rgba(137,147,216,.14); color:#fff; font-size:10px; font-weight:600; text-decoration:none; transition:background .16s,border-color .16s; }
.plan-action:hover { border-color:#8993D8; background:rgba(137,147,216,.28); }
.plans-note { margin:14px 0 0; color:#B1B2B7; font-size:10px; line-height:1.6; }
@media (max-width:820px) { #topbar { flex-wrap:wrap; } .quota-pill { order:5; max-width:unset; flex:1 0 calc(100% - 12px); text-align:left; } #openBtn { margin-left:0; } }
@media (max-width:520px) { .plans-dialog form { padding:17px; } .plans-dialog-head h2 { font-size:17px; } .plan-cards { grid-template-columns:1fr 1fr; } }

.templates-dialog { width:min(640px,calc(100vw - 28px)); max-width:none; max-height:min(90vh,760px); overflow:hidden; padding:0; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:#2E303C; color:#fff; box-shadow:0 24px 80px rgba(0,0,0,.55); font-family:'Montserrat',sans-serif; }
.templates-dialog::backdrop { background:rgba(10,11,17,.72); }
.templates-dialog[open] { animation:templates-dialog-in .16s ease-out; }
@keyframes templates-dialog-in { from { opacity:0; transform:translateY(7px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
.templates-dialog-content { max-height:min(90vh,760px); display:flex; flex-direction:column; padding:22px; }
.templates-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:19px; }
.templates-dialog-head h2 { margin:5px 0 0; font:700 20px 'Montserrat Alternates',sans-serif; }
.templates-dialog-head p { margin:6px 0 0; color:#B1B2B7; font-size:11px; line-height:1.5; }
.templates-close { width:30px; height:30px; flex:none; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:#3C3E4B; color:#fff; cursor:pointer; font-size:20px; line-height:1; }
.template-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.template-category { min-width:0; min-height:84px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:9px; padding:12px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#383a4e; color:#e5e6f1; text-align:left; cursor:pointer; transition:background .16s ease,border-color .16s ease; }
.template-category:hover { border-color:rgba(178,186,235,.2); background:#414353; }
.template-category:focus-visible,.templates-close:focus-visible { outline:2px solid rgba(150,158,194,.42); outline-offset:2px; }
.template-category strong { font:600 12px 'Montserrat Alternates',sans-serif; }
.template-category-count { color:#aeb0be; font:500 9px 'Montserrat',sans-serif; }
.template-category-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.template-category-sample { width:56px; height:56px; flex:none; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:#252633; }
.template-category-sample-mount,.template-category-sample-placeholder { grid-area:1 / 1; width:52px; height:52px; }
.template-category-sample-mount svg { display:block; width:100% !important; height:100% !important; }
.template-category-sample-placeholder { display:grid; place-items:center; color:#777b8c; font:600 9px 'Montserrat',sans-serif; }
.templates-gallery { min-height:0; display:flex; flex-direction:column; gap:10px; }
.templates-gallery[hidden],.templates-load-more[hidden],.templates-status[hidden] { display:none; }
.template-category-grid[hidden] { display:none; }
.templates-gallery-head { display:flex; align-items:center; gap:12px; }
.templates-back { flex:none; padding:7px 9px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:transparent; color:#d7d8e2; font:500 9px 'Montserrat',sans-serif; cursor:pointer; }
.templates-back:hover { border-color:rgba(178,186,235,.2); background:#383a4e; }
.templates-gallery-title { min-width:0; display:flex; align-items:baseline; gap:8px; }
.templates-gallery-title h3 { overflow:hidden; margin:0; font:600 13px 'Montserrat Alternates',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.templates-gallery-title span { color:#aeb0be; font:500 9px 'Montserrat',sans-serif; white-space:nowrap; }
.template-grid { max-height:min(36vh,280px); overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); align-content:start; gap:8px; padding:1px 3px 1px 0; overscroll-behavior:contain; scrollbar-gutter:stable; }
.template-card { min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:#303140; }
.template-card-preview { height:78px; display:grid; place-items:center; overflow:hidden; background:#252633; contain:layout paint; }
.template-preview-mount,.template-preview-placeholder { grid-area:1 / 1; width:68px; height:68px; }
.template-preview-mount svg { display:block; width:100% !important; height:100% !important; }
.template-preview-placeholder { display:grid; place-items:center; color:#777b8c; font:600 9px 'Montserrat',sans-serif; }
.template-preview-placeholder.is-error { color:#b1b2b7; }
.template-card-copy { min-width:0; display:flex; flex-direction:column; gap:2px; padding:6px 7px 5px; }
.template-card-name { overflow:hidden; color:#e5e6f1; font:600 9px 'Montserrat',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.template-card-group { overflow:hidden; color:#999baa; font:500 8px 'Montserrat',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.template-open { width:calc(100% - 12px); min-height:25px; margin:0 6px 6px; padding:3px 5px; border:1px solid rgba(255,255,255,.1); border-radius:7px; background:#383a4e; color:#e5e6f1; font:600 8px 'Montserrat',sans-serif; cursor:pointer; }
.template-open:hover:not(:disabled) { background:#414353; }
.template-open:disabled { opacity:.55; cursor:wait; }
.templates-load-more { grid-column:1 / -1; width:100%; min-height:31px; padding:0 12px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:#383a4e; color:#e5e6f1; font:600 9px 'Montserrat',sans-serif; cursor:pointer; }
.templates-load-more:hover { background:#414353; }
.templates-status { margin:11px 0 0; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:9px; color:#B1B2B7; font-size:10px; line-height:1.5; }
@media(max-width:520px) { .templates-dialog-content { padding:18px; } .templates-dialog-head { margin-bottom:14px; } .templates-gallery { gap:8px; } .template-category-grid { grid-template-columns:1fr; gap:7px; } .template-category { min-height:60px; padding:6px 11px; } .template-category-sample { width:48px; height:48px; } .template-category-sample-mount,.template-category-sample-placeholder { width:44px; height:44px; } .templates-dialog-head h2 { font-size:18px; } .template-grid { max-height:min(36vh,250px); grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:6px; } .template-card-preview { height:65px; } .template-preview-mount,.template-preview-placeholder { width:56px; height:56px; } .templates-back { padding:6px 8px; } }

/* Context menu for editing one vector layer at a time. */
.vector-group-context-menu { position:fixed; z-index:10000; width:min(270px,calc(100vw - 16px)); padding:6px; border:1px solid rgba(177,178,183,.18); border-radius:12px; background:#2E303C; box-shadow:0 14px 36px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.025); color:#fff; animation:context-menu-in .12s ease-out; }
.vector-group-context-title { overflow:hidden; padding:6px 9px 7px; color:#B1B2B7; font:500 11px 'Montserrat',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.vector-group-context-action { display:flex; width:100%; align-items:center; gap:9px; padding:10px 9px; border:0; border-radius:8px; background:transparent; color:#fff; font:600 12px 'Montserrat',sans-serif; text-align:left; cursor:pointer; }
.vector-group-context-action::before { content:'✎'; display:grid; width:23px; height:23px; flex:none; place-items:center; border-radius:7px; background:rgba(137,147,216,.18); color:#8993D8; font-size:13px; }
.vector-group-context-action:hover,.vector-group-context-action:focus-visible { outline:none; background:rgba(137,147,216,.16); color:#fff; }
@keyframes context-menu-in { from { opacity:0; transform:translateY(-3px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
.vector-group-context-action.is-svg-target { background:rgba(137,147,216,.10); color:#dce0ff; }
.vector-group-context-action.is-svg-target::before { content:'◇'; }
.vector-group-context-action + .vector-group-context-action { margin-top:3px; }
.text-layer-create-btn { border-color:rgba(137,147,216,.28); background:rgba(137,147,216,.1); color:#dfe2ff; }
.text-layer-create-btn:hover { border-color:rgba(137,147,216,.58); background:rgba(137,147,216,.2); }
.create-vector-text-backdrop { position:fixed; inset:0; z-index:12000; display:grid; place-items:center; padding:18px; background:rgba(12,13,20,.72); backdrop-filter:blur(7px); }
.create-vector-text-dialog { width:min(430px,100%); padding:22px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:linear-gradient(150deg,#343645,#292b38 72%); box-shadow:0 28px 90px rgba(0,0,0,.58); color:#fff; }
.create-vector-text-dialog h2 { margin:0; font:700 20px 'Montserrat Alternates',sans-serif; }
.create-vector-text-dialog p { margin:8px 0 16px; color:#b1b2b7; font-size:12px; line-height:1.55; }
.create-vector-text-dialog label { display:block; margin:13px 0 6px; color:#c5c6ce; font-size:11px; font-weight:600; }
.create-vector-text-dialog textarea,.create-vector-text-dialog select,.create-vector-text-dialog input[type=text] { box-sizing:border-box; width:100%; padding:11px 12px; border:1px solid rgba(255,255,255,.12); border-radius:10px; outline:none; background:#242631; color:#fff; font:500 13px 'Montserrat',sans-serif; }
.create-vector-text-dialog textarea { min-height:86px; resize:vertical; }
.create-vector-text-dialog textarea:focus,.create-vector-text-dialog select:focus,.create-vector-text-dialog input:focus { border-color:#8993D8; box-shadow:0 0 0 3px rgba(137,147,216,.13); }
.create-vector-text-row { display:grid; grid-template-columns:1fr 54px; gap:9px; }
.create-vector-text-row input[type=color] { width:54px; height:40px; padding:4px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:#242631; }
.create-vector-text-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.create-vector-text-status { min-height:17px; margin-top:10px; color:#c6c9ef; font-size:11px; }
.timeline-motion-button { position:relative; z-index:4; width:23px; height:23px; flex:none; display:grid; place-items:center; padding:0; border:1px solid rgba(137,147,216,.22); border-radius:7px; background:rgba(137,147,216,.09); color:#aab2ff; font:700 13px 'Montserrat',sans-serif; cursor:pointer; transition:background .14s,border-color .14s,transform .14s; }
.timeline-motion-button:hover,.timeline-motion-button:focus-visible { outline:none; border-color:rgba(137,147,216,.64); background:rgba(137,147,216,.23); color:#fff; transform:translateY(-1px); }
.timeline-track.motion-menu-open { position:relative; z-index:6; }
.timeline-motion-popover { position:fixed; top:8px; left:8px; z-index:20000; display:grid; grid-template-columns:1fr auto; gap:8px; width:min(300px,calc(100vw - 28px)); max-height:calc(100dvh - 24px); overflow:auto; padding:13px; border:1px solid rgba(137,147,216,.28); border-radius:13px; background:#13141b; box-shadow:0 16px 42px rgba(0,0,0,.56),inset 0 1px rgba(255,255,255,.035); color:#fff; cursor:default; }
.timeline-motion-popover[hidden] { display:none; }
.timeline-motion-heading { overflow:hidden; align-self:center; color:#f4f4fa; font:700 12px 'Montserrat Alternates',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.timeline-motion-hint { grid-column:1/-1; margin-top:-4px; color:#9da0ad; font:500 9px 'Montserrat',sans-serif; }
.timeline-motion-select { grid-column:1/-1; width:100%; min-width:0; padding:9px 30px 9px 10px; border:1px solid rgba(255,255,255,.1); border-radius:8px; outline:none; background:#22242e; color:#fff; font:500 10px 'Montserrat',sans-serif; }
.timeline-motion-select:focus { border-color:#8993D8; box-shadow:0 0 0 3px rgba(137,147,216,.14); }
.timeline-motion-status { grid-column:1/-1; min-height:12px; color:#aeb5fb; font:500 9px 'Montserrat',sans-serif; }
.timeline-motion-apply { grid-column:1/-1; width:100%; padding:9px 10px; border:1px solid rgba(137,147,216,.28); border-radius:8px; background:#8993D8; color:#1f2130; font:700 10px 'Montserrat',sans-serif; cursor:pointer; transition:filter .14s,transform .14s; }
.timeline-motion-apply:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-1px); }
.timeline-motion-apply:disabled { opacity:.45; cursor:not-allowed; }
.timeline-motion-close { grid-column:2; grid-row:1; width:22px; height:22px; padding:0; border:0; border-radius:6px; background:rgba(255,255,255,.06); color:#b1b2b7; font-size:15px; cursor:pointer; }
.timeline-motion-close:hover { background:rgba(255,255,255,.12); color:#fff; }
.gradient-apply-card { display:flex; flex-direction:column; gap:11px; margin-top:18px; padding:14px; border:1px solid rgba(137,147,216,.2); border-radius:12px; background:linear-gradient(145deg,rgba(137,147,216,.09),rgba(46,48,60,.55)); }
.gradient-apply-card > strong { color:#fff; font:600 13px 'Montserrat Alternates',sans-serif; }
.gradient-apply-card > p { margin:0; color:var(--text-dim); font-size:11px; line-height:1.55; }
.gradient-control-label { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--text-dim); font-size:11px; }
.gradient-type-select { min-width:132px; height:34px; padding:0 10px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:#252633; color:#fff; font:500 11px 'Montserrat',sans-serif; }
.gradient-color-pair { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.gradient-color-pair label { display:flex; align-items:center; justify-content:space-between; gap:7px; color:var(--text-dim); font-size:10px; }
.gradient-color-pair input[type=color] { width:40px; height:32px; padding:3px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:#252633; cursor:pointer; }
.gradient-motion-toggle { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(20,21,29,.24); cursor:pointer; }
.gradient-motion-toggle input { width:16px; height:16px; margin:0; accent-color:var(--accent); }
.gradient-motion-toggle span { display:flex; flex-direction:column; gap:3px; }
.gradient-motion-toggle strong { color:#fff; font-size:11px; font-weight:600; }
.gradient-motion-toggle small { color:var(--text-dim); font-size:9px; }
.gradient-apply-button { width:100%; justify-content:center; }
.gradient-settings-card { margin:0 0 14px; padding:11px; }

/* AE-style timeline zoom, visible motion keys and direct time scrubbing. */
.timeline-zoom { flex:none; display:flex; align-items:center; gap:5px; padding:0 0 0 7px; color:#B1B2B7; }
.timeline-zoom-button,.timeline-zoom-fit { height:25px; min-width:25px; padding:0 7px; border:1px solid rgba(177,178,183,.15); border-radius:7px; background:#292B38; color:#DDE0EA; font:600 11px 'Montserrat',sans-serif; cursor:pointer; }
.timeline-zoom-button:hover,.timeline-zoom-fit:hover { border-color:rgba(137,147,216,.55); background:rgba(137,147,216,.15); color:#fff; }
.timeline-zoom-fit { font-size:9px; }
.timeline-zoom input { width:78px; height:14px; margin:0 2px; accent-color:#8993D8; cursor:ew-resize; }
.timeline-zoom output { width:34px; color:#dfe1ff; font:600 9px 'Montserrat',sans-serif; font-variant-numeric:tabular-nums; text-align:right; }
.timeline-scale { background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--timeline-step) - 1px),rgba(255,255,255,.07) calc(var(--timeline-step) - 1px),rgba(255,255,255,.07) var(--timeline-step)); }
.timeline-lane { background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--timeline-step) - 1px),rgba(255,255,255,.035) calc(var(--timeline-step) - 1px),rgba(255,255,255,.035) var(--timeline-step)); }
.timeline-keyframe { position:absolute; top:50%; z-index:2; width:8px; height:8px; margin:-4px 0 0 -4px; border:1px solid #c4c9ff; border-radius:2px; transform:rotate(45deg); background:#8993D8; box-shadow:0 0 0 2px rgba(137,147,216,.18),0 1px 5px rgba(0,0,0,.45); cursor:pointer; }
.timeline-keyframe:hover { transform:rotate(45deg) scale(1.45); background:#fff; border-color:#fff; }
.timeline-scroll.is-scrubbing { cursor:ew-resize; user-select:none; }
.timeline-scroll.is-scrubbing * { cursor:ew-resize !important; }
@media(max-width:820px) { .timeline-zoom { gap:3px; padding-left:2px; } .timeline-zoom input { width:48px; } .timeline-zoom-button { min-width:23px; } .timeline-zoom-fit { padding:0 5px; } .timeline-zoom output { width:29px; } }

.timeline-zoom { flex:none; display:flex; align-items:center; gap:5px; padding:0 0 0 7px; color:#B1B2B7; }
.timeline-zoom-button,.timeline-zoom-fit { height:25px; min-width:25px; padding:0 7px; border:1px solid rgba(177,178,183,.15); border-radius:7px; background:#292B38; color:#DDE0EA; font:600 11px 'Montserrat',sans-serif; cursor:pointer; }
.timeline-zoom-button:hover,.timeline-zoom-fit:hover { border-color:rgba(137,147,216,.55); background:rgba(137,147,216,.15); color:#fff; }
.timeline-zoom-fit { font-size:9px; }
.timeline-zoom input { width:78px; height:14px; margin:0 2px; accent-color:#8993D8; cursor:ew-resize; }
.timeline-zoom output { width:34px; color:#dfe1ff; font:600 9px 'Montserrat',sans-serif; font-variant-numeric:tabular-nums; text-align:right; }
.timeline-scale { background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--timeline-step) - 1px),rgba(255,255,255,.07) calc(var(--timeline-step) - 1px),rgba(255,255,255,.07) var(--timeline-step)); }
.timeline-lane { background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--timeline-step) - 1px),rgba(255,255,255,.035) calc(var(--timeline-step) - 1px),rgba(255,255,255,.035) var(--timeline-step)); }
.timeline-keyframe { position:absolute; top:50%; z-index:2; width:8px; height:8px; margin:-4px 0 0 -4px; border:1px solid #c4c9ff; border-radius:2px; transform:rotate(45deg); background:#8993D8; box-shadow:0 0 0 2px rgba(137,147,216,.18),0 1px 5px rgba(0,0,0,.45); cursor:pointer; }
.timeline-keyframe:hover { transform:rotate(45deg) scale(1.45); background:#fff; border-color:#fff; }
.timeline-scroll.is-scrubbing { cursor:ew-resize; user-select:none; }
.timeline-scroll.is-scrubbing * { cursor:ew-resize !important; }
@media(max-width:820px) { .timeline-zoom { gap:3px; padding-left:2px; } .timeline-zoom input { width:48px; } .timeline-zoom-button { min-width:23px; } .timeline-zoom-fit { padding:0 5px; } .timeline-zoom output { width:29px; } }

.selected-layer-paints { display:flex; flex-direction:column; gap:7px; margin:16px 0 22px; padding:13px; border:1px solid rgba(137,147,216,.2); border-radius:12px; background:rgba(46,48,60,.72); }
.selected-layer-paints-title { color:#fff; font:600 12px 'Montserrat Alternates',sans-serif; }
.selected-layer-paints-hint { margin:0 0 3px; color:#B1B2B7; font:400 10px/1.5 'Montserrat',sans-serif; }
.selected-layer-paint { width:100%; min-width:0; display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:9px; padding:8px 9px; border:1px solid rgba(177,178,183,.12); border-radius:9px; background:#292B38; color:#fff; text-align:left; cursor:pointer; }
.selected-layer-paint:hover,.selected-layer-paint:focus-visible { outline:none; border-color:rgba(137,147,216,.66); background:rgba(137,147,216,.13); }
.selected-layer-paint-swatch { width:22px; height:22px; border:1px solid rgba(255,255,255,.55); border-radius:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.selected-layer-paint-label { min-width:0; overflow:hidden; color:#ececf2; font:500 10px 'Montserrat',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.selected-layer-paint small { color:#8993D8; font:500 8px 'Montserrat',sans-serif; }

.quick-text-btn { white-space:nowrap; border-color:rgba(137,147,216,.4); background:rgba(137,147,216,.12); color:#eff0ff; }
.quick-text-btn:hover { border-color:#8993D8; background:rgba(137,147,216,.22); }
.quick-text-dialog { width:min(500px,100%); }
.quick-text-dialog select,.quick-text-dialog textarea { margin-top:7px; }
.quick-text-dialog textarea { min-height:74px; }
.quick-text-vector-controls { display:grid; grid-template-columns:minmax(0,1fr) 86px; align-items:end; gap:12px; margin-top:13px; }
.quick-text-vector-controls[hidden] { display:none; }
.quick-text-color-label { display:flex; flex-direction:column; gap:6px; color:var(--text-dim); font-size:11px; font-weight:600; }
.quick-text-color-label input { width:100%; height:38px; padding:3px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:#2A2B39; cursor:pointer; }
.selected-layer-paint-batch { display:grid; grid-template-columns:minmax(0,1fr) 38px auto; align-items:center; gap:8px; padding:8px; border:1px solid rgba(137,147,216,.2); border-radius:9px; background:rgba(137,147,216,.07); }
.selected-layer-paint-batch-label { min-width:0; color:#ececf2; font:600 10px 'Montserrat',sans-serif; }
.selected-layer-paint-batch input[type=color] { width:36px; height:34px; padding:3px; border:1px solid rgba(255,255,255,.15); border-radius:7px; background:#292B38; cursor:pointer; }
.selected-layer-paint-apply { padding:7px 8px; font-size:9px; white-space:nowrap; }

/* Compact creation panel styled to match the editor's existing controls. */
.creation-tools { flex:none; display:flex; flex-direction:column; gap:8px; margin:10px 12px 9px; padding:11px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:transparent; }
.creation-tools-heading { display:flex; align-items:center; padding:0 2px 1px; }
.creation-tools-eyebrow { color:#9a9baa; font:700 8px 'Montserrat',sans-serif; letter-spacing:.12em; }
.creation-tool-feature { width:100%; min-height:45px; display:flex; align-items:center; padding:9px 11px; border:1px solid rgba(137,147,216,.3); border-radius:9px; background:rgba(137,147,216,.1); color:#f0f0f7; text-align:left; white-space:normal; }
.creation-tool-feature:hover { border-color:rgba(137,147,216,.62); background:rgba(137,147,216,.16); color:#fff; }
.creation-tool-feature-copy { min-width:0; display:flex; flex:1; flex-direction:column; gap:2px; }
.creation-tool-feature-copy strong { color:inherit; font:600 10px 'Montserrat Alternates',sans-serif; }
.creation-tool-feature-copy small { color:#aeb0be; font:500 8px 'Montserrat',sans-serif; }
.creation-tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.creation-tool-button { min-width:0; min-height:34px; display:flex; align-items:center; justify-content:center; padding:6px 8px; border-radius:8px; color:#dedee7; font:600 10px 'Montserrat',sans-serif; }
.creation-tool-button:hover { color:#fff; }
.creation-tools .btn { border-color:rgba(178,186,235,.14); background:transparent; color:#e5e6f1; box-shadow:none; transition:border-color .2s ease,color .2s ease; }
.creation-tools .btn:hover { border-color:rgba(178,186,235,.2); background:transparent; color:#e5e6f1; box-shadow:none; transform:none; }
.creation-tools .btn:active { transform:none; }
.creation-tools .btn:focus-visible { outline:2px solid rgba(150,158,194,.42); outline-offset:2px; }
.quick-text-svg-upload { border-color:rgba(137,147,216,.32); background:rgba(137,147,216,.1); color:#e3e5ff; }
.quick-text-svg-upload:hover:not(:disabled) { border-color:rgba(170,178,255,.68); background:rgba(137,147,216,.2); color:#fff; }
.quick-text-svg-upload:disabled { opacity:.42; cursor:not-allowed; }

@media(max-width:820px) {
  .creation-tools { gap:7px; margin:8px 8px 7px; padding:9px; border-radius:10px; }
  .creation-tools-eyebrow { font-size:7px; }
  .creation-tool-feature { min-height:41px; padding:7px 8px; }
  .creation-tool-feature-copy strong { font-size:9px; }
  .creation-tool-feature-copy small { font-size:7px; }
  .creation-tool-grid { gap:6px; }
  .creation-tool-button { min-height:30px; padding:5px 4px; font-size:9px; }
}
@media(max-width:520px) {
  .creation-tools { margin:7px 6px 6px; padding:8px; }
  .creation-tool-feature-copy small { display:none; }
  .text-discovery-actions { flex-wrap:wrap; }
  .text-discovery-actions .btn { flex:1 1 100px; min-width:0; }
}

/* Mobile editor: give each workspace a full-height tab instead of squeezing every panel together. */
.mobile-editor-nav { display:none; }
@media (max-width:820px) {
  #app { min-height:0; height:100%; }
  #topbar {
    order:0;
    flex:none;
    min-height:0;
    padding:max(8px,env(safe-area-inset-top)) 9px 8px;
    gap:6px;
    row-gap:6px;
  }
  #topbar h1 { display:block; font-size:14px; }
  .brand { flex:1 1 auto; min-width:74px; margin:0 auto 0 0; gap:7px; }
  .brand img { width:30px; height:30px; }
  #accountQuota { flex:0 1 auto; min-width:0; max-width:45vw; overflow:hidden; padding:7px 9px; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
  #topbar .btn { flex:1 1 76px; min-width:66px; min-height:39px; padding:7px 5px; font-size:9px; line-height:1.2; white-space:nowrap; }
  #main { order:1; flex:1 1 0; min-width:0; min-height:0; overflow:hidden; }
  #centerPanel { order:1; flex:1 1 0; min-width:0; min-height:0; }
  #panelsRow { order:1; flex:1 1 0; min-width:0; min-height:0; border:0; }
  #treePanel,#editorPanel { flex:1 1 0; min-width:0; width:auto; min-height:0; }
  #treePanel { border-right:0; }
  #editorPanel { overflow:auto; padding:0 0 max(10px,env(safe-area-inset-bottom)); }
  #editorBody { padding:12px; }
  #layerSearch { min-height:40px; font-size:16px; }
  #editorBody input:not([type=range]):not([type=color]):not([type=checkbox]),
  #editorBody select,
  #editorBody textarea,
  .quick-text-dialog input:not([type=color]),
  .quick-text-dialog select,
  .quick-text-dialog textarea { font-size:16px; }
  #editorBody .position-number { height:34px; }
  #undoRedoBar { margin:10px 12px 0; }
  #tree { padding:7px 7px max(14px,env(safe-area-inset-bottom)); }
  #mobileResizer,#editorResizer { display:none !important; }
  #centerPanel .canvas-toolbar { height:52px; min-height:52px; padding:0 10px; gap:7px; }
  #centerPanel #precompSelect { max-width:30vw; min-width:0; }
  #centerPanel #bgControls { gap:4px; }
  #centerPanel #bgControls span { display:none; }
  #player { max-width:calc(100% - 16px); gap:5px; margin:6px auto 8px; padding:4px 7px; }
  #player button { width:27px; min-height:32px; }
  #player #playBtn { width:32px; height:32px; }
  #timelinePanel { order:2; display:none !important; flex:1 1 0; height:auto !important; min-height:0; border-top:0; }
  .timeline-scroll { min-height:0; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  #timelinePanel .timeline-scale,#timelinePanel .timeline-lane { touch-action:pan-x pan-y; }
  .timeline-resize-handle { display:none; }
  .mobile-editor-nav {
    order:3;
    display:grid;
    flex:none;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    min-height:calc(56px + env(safe-area-inset-bottom));
    padding:5px 8px max(6px,env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.09);
    background:#303140;
  }
  .mobile-editor-tab {
    min-width:0;
    min-height:43px;
    padding:0 4px;
    border:1px solid transparent;
    border-radius:10px;
    background:transparent;
    color:#b1b2b7;
    font:600 10px 'Montserrat',sans-serif;
    white-space:nowrap;
    touch-action:manipulation;
  }
  .mobile-editor-tab.active { border-color:rgba(137,147,216,.22); background:rgba(137,147,216,.14); color:#fff; }
  #app:not(.has-animation) #mobileEditorNav { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #app:not(.has-animation) #mobileTimelineTab { display:none; }
  #app.mobile-view-canvas #main { display:flex; }
  #app.mobile-view-canvas #centerPanel { display:flex; }
  #app.mobile-view-canvas #panelsRow { display:none; }
  #app.mobile-view-layers #centerPanel,
  #app.mobile-view-settings #centerPanel { display:none; }
  #app.mobile-view-layers #panelsRow,
  #app.mobile-view-settings #panelsRow { display:flex; }
  #app.mobile-view-layers #treePanel { display:flex; }
  #app.mobile-view-layers #editorPanel,
  #app.mobile-view-settings #treePanel { display:none; }
  #app.mobile-view-settings #editorPanel { display:flex; }
  #app.mobile-view-timeline #main { display:none; }
  #app.mobile-view-timeline.has-animation #timelinePanel { display:flex !important; height:auto !important; min-height:0; flex:1 1 0; }
  #app.mobile-view-timeline.has-animation .timeline-topbar { min-height:58px; height:auto; flex-wrap:wrap; gap:3px; padding:4px 7px; }
  #app.mobile-view-timeline.has-animation .timeline-tabs { flex:1 1 100%; height:26px; }
  #app.mobile-view-timeline.has-animation .timeline-zoom { margin-left:auto; }
  #app.mobile-view-timeline.has-animation .timeline-tab { max-width:175px; padding:0 8px; }
  .timeline-ruler,.timeline-track { grid-template-columns:128px auto; }
  .timeline-layer-name { padding:0 5px; gap:4px; }
  .timeline-layer-title { font-size:9px; }
  .timeline-visibility { width:26px; min-width:26px; height:30px; }
}
@media (max-width:520px) {
  #topbar { padding-right:7px; padding-left:7px; }
  #topbar h1 { font-size:13px; }
  #topbar .btn { flex-basis:72px; min-width:60px; font-size:8px; }
  #centerPanel .canvas-toolbar { gap:5px; padding:0 7px; }
  #centerPanel .canvas-toolbar > :first-child { display:none; }
  #centerPanel .canvas-spacer { display:none; }
  #centerPanel #canvasTools { flex:none; }
  #centerPanel #precompControl { flex:1 1 0; min-width:0; }
  #centerPanel #precompSelect { width:100%; max-width:none; padding:0 4px; font-size:9px; }
  #centerPanel #bgControls { flex:none; }
  #timelinePanel .timeline-ruler,
  #timelinePanel .timeline-track { grid-template-columns:128px auto; }
  #timelinePanel .timeline-layer-icon { display:none; }
}
@media (max-width:360px) {
  #topbar .btn { flex-basis:66px; min-width:56px; font-size:9px; }
  .mobile-editor-tab { font-size:9px; }
  #timelinePanel .timeline-ruler,
  #timelinePanel .timeline-track { grid-template-columns:108px auto; }
  #timelinePanel .timeline-layer-name { gap:3px; padding:0 4px; }
}

.timeline-pan-controls { display:flex; flex:none; align-items:center; gap:4px; }
.timeline-pan-button { width:27px; min-width:27px; height:25px; padding:0; border:1px solid rgba(177,178,183,.15); border-radius:7px; background:#292B38; color:#DDE0EA; font:600 13px 'Montserrat',sans-serif; cursor:pointer; }
.timeline-pan-button:hover:not(:disabled) { border-color:rgba(137,147,216,.55); background:rgba(137,147,216,.15); color:#fff; }
.timeline-pan-button:disabled { opacity:.38; cursor:default; }
.timeline-ruler-label { cursor:grab; touch-action:none; }
.timeline-scroll.timeline-pan-pending { cursor:grab; }
.timeline-scroll .timeline-lane,.timeline-scroll .timeline-bar { cursor:grab; }
.timeline-tick.is-future { opacity:.32; }
.timeline-duration-handle { position:absolute; top:0; z-index:5; width:14px; height:100%; margin:0; padding:0; border:0; border-radius:4px; background:transparent; cursor:ew-resize; touch-action:none; }
.timeline-duration-handle::before { content:""; position:absolute; top:3px; bottom:3px; left:5px; width:4px; border-radius:3px; background:#8993D8; }
.timeline-duration-handle:hover::before,.timeline-duration-handle:focus-visible::before { background:#B8BDF3; }
.timeline-duration-handle:focus-visible { outline:1px solid #8993D8; }
.timeline-scroll.is-resizing-duration { cursor:ew-resize; user-select:none; }
.timeline-scroll.is-panning { cursor:grabbing; user-select:none; }
.timeline-scroll.is-panning * { cursor:grabbing !important; user-select:none; }
@media (max-width:820px) {
  .timeline-pan-controls { gap:4px; }
  .timeline-pan-button { width:30px; min-width:30px; height:30px; font-size:15px; }
  #app.mobile-view-timeline.has-animation .timeline-pan-controls { margin-right:auto; }
  #app.mobile-view-timeline.has-animation .timeline-zoom { margin-left:0; }
  #timelinePanel .timeline-scroll,
  #timelinePanel .timeline-ruler-label,
  #timelinePanel .timeline-scale,
  #timelinePanel .timeline-lane { touch-action:none; }
}

/* Beginner-friendly inspector: show common actions first and tuck precision controls away. */
.inspector-empty { gap:12px; padding:17px 15px; }
.inspector-empty-icon { width:34px; height:34px; font-size:15px; }
.inspector-empty strong { font-size:13px; line-height:1.4; }
.inspector-empty span,.inspector-empty li { color:#c2c3ce; font-size:11px; line-height:1.65; }
.inspector-empty ol { display:grid; gap:8px; width:100%; margin:0; padding-left:19px; }
.inspector-empty li::marker { color:#aeb5fb; font-weight:700; }
.inspector-empty > p { width:100%; margin:0; padding:9px 10px; border-radius:9px; background:rgba(137,147,216,.1); color:#dce0ff; font-size:10px; line-height:1.5; }
#editorPanel .inspector-head .panel-title { font-size:15px; }
.inspector-task-hint { margin:0 0 10px; font-size:11px; }
.inspector-disclosure { min-width:0; margin:10px 0 14px; overflow:hidden; border:1px solid rgba(177,178,235,.13); border-radius:11px; background:rgba(25,26,36,.34); }
.inspector-disclosure > summary { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:9px; padding:9px 11px; color:#e8e9f3; font:600 11px 'Montserrat',sans-serif; list-style:none; cursor:pointer; }
.inspector-disclosure > summary::-webkit-details-marker { display:none; }
.inspector-disclosure > summary::after { content:"+"; flex:none; color:#aeb5fb; font:600 17px/1 'Montserrat',sans-serif; }
.inspector-disclosure[open] > summary { border-bottom:1px solid rgba(255,255,255,.07); }
.inspector-disclosure[open] > summary::after { content:"−"; }
.inspector-disclosure > summary:focus-visible { outline:2px solid #aeb5fb; outline-offset:-3px; }
.inspector-disclosure-hint { margin:0; padding:0 11px 10px; color:#afb1bf; font:400 10px/1.55 'Montserrat',sans-serif; }
.inspector-disclosure > .position-card { margin:0; border:0; border-radius:0; background:transparent; }
.inspector-disclosure > .position-card > .position-title { display:none; }
.inspector-disclosure > .outline-font-controls { margin:0; padding:0 10px 11px; }
.inspector-disclosure > .gradient-apply-card { margin:0; padding:0 11px 12px; border:0; border-radius:0; background:transparent; }
.inspector-disclosure > .gradient-apply-card > strong { display:none; }
.inspector-color-editor { display:flex; flex-direction:column; gap:9px; }
.inspector-quick-color { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:#252633; color:#e7e8f1; font:600 11px 'Montserrat',sans-serif; cursor:pointer; }
.inspector-quick-color input[type="color"] { width:42px; height:34px; padding:3px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:#303140; cursor:pointer; }
.inspector-paint-list { margin:4px 0 0; padding:0; border:0; border-radius:0; background:transparent; }
.inspector-paint-list[open] { padding-top:7px; }
.selected-layer-paints-title { font-size:11px; }
.selected-layer-paints-hint { font-size:10px; line-height:1.6; }
.inspector-paint-list > .selected-layer-paint { margin-top:6px; }