:root {
  --bg: #0e0e0e;
  --panel: #141414;
  --panel-2: #181818;
  --panel-3: #1c1c1c;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #f3f3f3;
  --muted: rgba(255, 255, 255, 0.56);
  --muted-2: rgba(255, 255, 255, 0.38);
  --lime: #c5f955;
  --lime-2: #c7ff4f;
  --lime-dim: #8fb82e;
  --pink: #ff97c2;
  --pink-2: #ffb3d4;
  --blue: #3b82f6;
  --gold: #f5c84b;
  --danger: #ff6b6b;
  --radius: 16px;
  --radius-sm: 10px;
  --header: 56px;
  --rail: 64px;
  --gen: 280px;
  --assets: 360px;
  --font: Inter, Figtree, system-ui, sans-serif;
  --tight: "Inter Tight", Inter, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  overflow: hidden;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
img { display: block; max-width: 100%; }

.topbar {
  height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 12px;
  border-bottom: 1px solid var(--line);
  background: #0c0c0c;
}
.top-left, .top-right { display: flex; align-items: center; gap: 10px; }
.brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--lime);
  font-weight: 700; font-size: 20px; letter-spacing: -0.04em;
  font-family: var(--tight);
}
.brand img { width: 28px; height: 28px; }
.top-nav { display: flex; gap: 2px; margin-left: 10px; }
.top-nav button {
  color: var(--muted); padding: 6px 10px; border-radius: 8px;
}
.top-nav button:hover { color: #fff; background: #ffffff0d; }
.has-caret::after { content: "▾"; margin-left: 4px; font-size: 9px; opacity: .7; }
.agent-chip {
  display: flex; align-items: center; gap: 6px;
  color: var(--lime); font-weight: 600; padding: 4px 8px; border-radius: 999px;
}
.agent-chip img { width: 18px; height: 18px; }
.ws-chip {
  background: var(--lime); color: #111; font-weight: 700;
  border-radius: 999px; padding: 6px 14px 6px 16px;
}
.ws-chip::after { content: "▾"; margin-left: 6px; font-size: 10px; }
.credit-chip {
  display: flex; align-items: center; gap: 6px;
  background: #1a1a1a; border: 1px solid var(--line-2);
  border-radius: 999px; padding: 3px 4px 3px 8px;
}
.credit-chip img { width: 16px; height: 16px; }
.credit-chip b { font-weight: 650; min-width: 24px; }
.credit-chip .upgrade {
  background: var(--blue); color: #fff; border-radius: 999px;
  padding: 4px 10px; font-size: 12px; font-weight: 600;
}
.icon-btn {
  width: 32px; height: 32px; border-radius: 8px; color: var(--muted);
  display: grid; place-items: center; position: relative;
}
.icon-btn:hover { background: #ffffff12; color: #fff; }
.icon-btn svg { width: 18px; height: 18px; }
.bell i {
  position: absolute; top: 6px; right: 7px; width: 7px; height: 7px;
  background: #ef4444; border-radius: 50%; border: 1px solid #0c0c0c;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #3a3a3a; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}

.workspace {
  height: calc(100vh - var(--header));
  display: grid;
  grid-template-columns: var(--rail) var(--gen) 1fr var(--assets);
  gap: 8px;
  padding: 8px 8px 8px 0;
}
.rail {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0 10px; gap: 2px;
}
.rail-item {
  width: 56px; padding: 8px 0 6px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--muted); position: relative;
}
.rail-item img, .rail-item svg { width: 26px; height: 26px; }
.rail-item svg { color: #9a9a9a; }
.rail-item.on svg { color: var(--lime); }
.rail-item span { font-size: 10px; }
.rail-item.on { color: var(--lime); }
.rail-item.on svg { color: var(--lime); }
.rail-item:hover { background: #ffffff0d; }
.rail-item .new {
  position: absolute; top: 2px; right: 2px;
  background: #ff4d6d; color: #fff; font-size: 8px; font-style: normal;
  font-weight: 700; border-radius: 6px; padding: 1px 4px; letter-spacing: .02em;
}
.rail-spacer { flex: 1; }

.gen-panel, .assets {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
}
.gen-panel {
  display: flex; flex-direction: column; padding: 10px 12px 12px;
  overflow: auto; position: relative;
}
.mode-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.mode-tab {
  width: 44px; height: 44px; border-radius: 12px;
  background: #101010; border: 1px solid transparent;
  display: grid; place-items: center;
}
.mode-tab img { width: 30px; height: 30px; }
.mode-tab.on { background: #1a1f12; border-color: #c5f95555; }
.topo-seg {
  display: flex; background: #0f0f0f; border-radius: 8px; padding: 2px; margin-bottom: 10px;
}
.topo-seg button {
  flex: 1; padding: 6px 0; border-radius: 6px; color: var(--muted); font-weight: 500;
}
.topo-seg button.on { background: #232323; color: #fff; }
.model-select {
  width: 100%; text-align: left; background: linear-gradient(180deg, #1b2612, #151c10);
  border: 1px solid #2a3a16; border-radius: 12px; padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.model-select strong { display: block; font-size: 13px; }
.model-select small { color: var(--muted); font-size: 11px; }
.model-select svg { width: 12px; height: 12px; color: var(--muted); }
.model-menu {
  background: #1a1a1a; border: 1px solid var(--line-2); border-radius: 12px;
  overflow: auto; max-height: 360px;
  position: absolute; left: 12px; right: 12px; z-index: 30;
  box-shadow: 0 16px 40px #000a;
}
.model-menu button {
  display: block; width: 100%; text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.model-menu button:last-child { border-bottom: 0; }
.model-menu button.on, .model-menu button:hover { background: #1f2a14; }
.model-menu strong { display: block; }
.model-menu small { display: block; color: var(--muted); }
.model-menu .need-img { color: #e8c56b; }

.field-label {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); margin-bottom: 8px; font-size: 12px;
}
.field-tools { display: flex; gap: 6px; color: var(--muted-2); }
.mini-ico { width: 22px; height: 22px; border-radius: 6px; color: var(--muted); }
.dropzone {
  display: block; border: 1.5px dashed #4a4a4a; border-radius: 12px;
  padding: 22px 12px; text-align: center; color: var(--muted); position: relative;
  min-height: 132px; background: #121212; cursor: pointer;
}
.dropzone.drag { border-color: var(--lime); background: #c5f9550f; }
.dropzone.has-img .dz-icon, .dropzone.has-img .dz-title, .dropzone.has-img .dz-sub { visibility: hidden; }
.dz-icon { color: #8a8a8a; display: flex; justify-content: center; margin-bottom: 8px; }
.dz-icon svg { width: 32px; height: 32px; }
.dz-title { color: #e8e8e8; font-weight: 500; margin-bottom: 6px; }
.dz-sub { font-size: 11px; line-height: 1.45; color: #8d8d8d; }
#previewImg {
  position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px);
  object-fit: contain; border-radius: 8px; background: #0a0a0a;
}
.mv-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 4px; }
.slot {
  height: 48px; border-radius: 8px; background: #101010; border: 1px dashed #333;
  display: grid; place-items: center; color: #555; overflow: hidden; position: relative;
}
.slot img { height: 36px; opacity: .55; }
.slot span { position: absolute; bottom: 2px; font-size: 9px; color: #888; }
.slot.has img { opacity: 1; height: 100%; width: 100%; object-fit: cover; }
textarea {
  width: 100%; resize: none; background: #101010; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; min-height: 110px; outline: none;
}
textarea:focus { border-color: #c5f95566; }

.opts { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 2px; color: #ddd;
}
.opt .right { display: flex; align-items: center; gap: 8px; }
.info {
  display: inline-grid; place-items: center; width: 14px; height: 14px;
  border-radius: 50%; border: 1px solid #555; color: #888; font-size: 9px;
  font-style: normal; margin-left: 4px; vertical-align: 1px;
}
.pill {
  display: inline-block; background: #ff4d6d; color: #fff; font-size: 9px;
  font-style: normal; border-radius: 6px; padding: 1px 5px; margin-left: 6px;
  font-weight: 700;
}
.crown {
  width: 14px; height: 14px; display: inline-block;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23e8c56b' d='M2 12h12l-1-6-3 3-2-5-2 5-3-3z'/></svg>") center/contain no-repeat;
}
input[type="checkbox"] {
  appearance: none; width: 36px; height: 20px; border-radius: 999px;
  background: #2a2a2a; position: relative; cursor: pointer; border: 1px solid #333;
}
input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #9a9a9a; transition: .15s;
}
input[type="checkbox"]:checked { background: var(--lime); border-color: var(--lime); }
input[type="checkbox"]:checked::after { left: 18px; background: #111; }
.pose-seg, .license-seg {
  display: flex; gap: 6px; background: #101010; padding: 4px; border-radius: 10px; margin: 0 0 8px;
}
.pose-seg button, .license-seg button {
  flex: 1; padding: 6px 0; border-radius: 8px; color: var(--muted); font-size: 12px;
}
.pose-seg button.on, .license-seg button.on { background: #2a2a2a; color: #fff; }

.gen-bar {
  margin-top: auto; padding-top: 10px; position: sticky; bottom: 0;
  background: linear-gradient(180deg, transparent, var(--panel) 18%);
  z-index: 2;
}
.mini-select, .mini-input, .model-select-native {
  background: #101010; border: 1px solid var(--line); border-radius: 8px;
  color: #fff; padding: 6px 8px; outline: none;
}
.model-select-native { width: 100%; margin-bottom: 10px; }
.mini-input { width: 110px; }
.hint { color: var(--muted); line-height: 1.5; font-size: 12px; }
.agent-log {
  flex: 1; min-height: 180px; max-height: 42vh; overflow: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 0 10px;
}
.agent-msg {
  background: #101010; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.agent-msg.user { background: #18240e; border-color: #c5f95533; }
.agent-msg.assistant { color: #ddd; }
.agent-msg .who { display: block; font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.ref-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 10px; }
.img-gallery {
  position: absolute; left: 12px; right: 12px; bottom: 56px; z-index: 4;
  display: flex; gap: 8px; overflow: auto; padding: 4px 0;
}
.img-gallery[hidden] { display: none !important; }
.img-gallery button {
  flex: none; width: 76px; height: 76px; border-radius: 10px; overflow: hidden;
  border: 1px solid #ffffff22; padding: 0; background: #000;
}
.img-gallery button.on { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.img-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.chip {
  border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; color: var(--muted);
}
.chip.on { background: #1f2a14; border-color: #c5f95566; color: var(--lime); }
.muted { color: var(--muted); font-weight: 400; }
.clip-search { width: 100%; margin: 0 0 8px; }
.clip-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.clip-groups button {
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
  color: var(--muted); font-size: 12px;
}
.clip-groups button.on { background: #1f2a14; border-color: #c5f95566; color: var(--lime); }
.clip-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  min-height: 260px; max-height: min(46vh, 480px);
  overflow: auto; padding-bottom: 8px;
  flex: 1 1 auto; align-content: start;
}
.clip-card {
  background: #1a1a1a; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; cursor: pointer; text-align: left; padding: 0;
  min-height: 118px;
}
.clip-card.on { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.clip-card video, .clip-card .clip-ph {
  width: 100%; height: 78px; object-fit: cover; background: #161616; display: block;
}
.clip-card .clip-ph {
  display: grid; place-items: center; color: #9aa; font-size: 20px; font-weight: 700;
  background: radial-gradient(circle at 30% 20%, #2a2a2a, #101010);
}
.clip-card .meta { padding: 6px 8px 8px; }
.clip-card strong { display: block; font-size: 11px; font-weight: 600; color: #eee; line-height: 1.3; }
.clip-card small { color: var(--muted); font-size: 10px; }
.clip-card .free { color: var(--lime); }
.view-hud {
  position: absolute; right: 12px; top: 12px; left: auto; z-index: 4;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.view-hud button, .view-hud select {
  background: #000a; border: 1px solid #ffffff22; border-radius: 8px;
  padding: 6px 10px; color: #eee; backdrop-filter: blur(8px);
}
.view-hud button.on { border-color: var(--lime); color: var(--lime); }
.view-hud select { max-width: 160px; }
.gen-btn.ghost {
  background: #1a1a1a; color: #eee;
  box-shadow: none; border: 1px solid var(--line-2);
}
.tex-pop {
  position: absolute; right: 12px; bottom: 52px; z-index: 5;
  width: 260px; background: #161616; border: 1px solid var(--line-2);
  border-radius: 12px; padding: 10px; display: grid; gap: 8px;
}
.menu-label {
  font-size: 11px; color: var(--muted); padding: 8px 12px 4px; text-transform: uppercase;
}
.need-img { color: #e8c56b; }
.eta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--muted); margin-bottom: 8px;
}
.eta img { width: 14px; height: 14px; }
.gen-btn {
  width: 100%; height: 42px; border-radius: 12px; font-weight: 700; font-size: 15px;
  color: #111;
  background: linear-gradient(90deg, #c5f955 0%, #e7ff8a 42%, #ffc1dc 78%, #ff97c2 100%);
  box-shadow: 0 0 0 1px #ffffff1a inset, 0 8px 24px #c5f95522;
}
.gen-btn:hover { filter: brightness(1.05); }
.gen-btn:disabled { filter: grayscale(.2) brightness(.8); cursor: wait; }
.spark { margin-right: 4px; }

.stage {
  position: relative; border-radius: 14px; overflow: hidden; background: #101010;
  min-width: 0;
}
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: none; touch-action: none; }
#view.show { display: block; cursor: grab; }
#view.show:active { cursor: grabbing; }
.empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
}
.geom { width: 84px; height: 84px; position: relative; margin-bottom: 20px; filter: drop-shadow(0 0 12px #c5f95555); }
.geom i { position: absolute; background: var(--lime); }
.geom .tri {
  width: 0; height: 0; background: none;
  border-left: 16px solid transparent; border-right: 16px solid transparent;
  border-bottom: 28px solid #c5f955; left: 2px; top: 4px;
}
.geom .circ { width: 26px; height: 26px; border-radius: 50%; right: 4px; top: 6px; background: #d8ff6a; }
.geom .sq { width: 24px; height: 24px; border-radius: 5px; left: 8px; bottom: 6px; background: #b8f54a; }
.geom .dia {
  width: 22px; height: 22px; right: 8px; bottom: 8px; background: #c7ff4f;
  transform: rotate(45deg); border-radius: 4px;
}
.empty h1 {
  font-family: var(--tight); font-size: 28px; font-weight: 600; margin: 0 0 10px;
  color: #d6ff6a;
}
.empty p { max-width: 420px; color: var(--muted); line-height: 1.6; margin: 0 0 18px; }
.empty-cta {
  background: var(--lime); color: #111; font-weight: 700;
  border-radius: 999px; padding: 10px 18px; display: inline-flex; gap: 6px; align-items: center;
}
.stats {
  position: absolute; left: 12px; top: 12px; z-index: 3;
  background: #000c; border: 1px solid #ffffff14; border-radius: 10px;
  padding: 8px 10px; display: grid; gap: 4px; min-width: 140px;
}
.stats div { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; }
.stats span { color: var(--muted); }
.busy {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; background: #0e0e0ecc; z-index: 2;
}
.ring {
  width: 88px; height: 88px; border-radius: 50%;
  background: conic-gradient(var(--lime) var(--p, 0%), #222 0);
  display: grid; place-items: center; position: relative;
}
.ring::before {
  content: ""; width: 70px; height: 70px; border-radius: 50%; background: #101010;
  position: absolute;
}
.ring b { position: relative; z-index: 1; font-size: 16px; }
.busy-title { font-weight: 600; }
.busy-sub { color: var(--muted); }
.stage-tools { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 6px; }
.still {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; background: #080808;
}
.still.pip {
  inset: auto; left: 12px; bottom: 12px; width: 168px; height: 168px;
  border-radius: 12px; border: 1px solid #ffffff22; overflow: hidden; z-index: 4;
  box-shadow: 0 8px 24px #0008;
}
.still img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.still-zoom {
  position: absolute; right: 6px; bottom: 6px;
  background: #000a; border-radius: 6px; padding: 2px 6px; font-size: 11px;
}
.busy .busy-preview {
  width: min(320px, 70%); max-height: 40vh; object-fit: contain;
  border-radius: 12px; margin-bottom: 12px; background: #000;
}
.stage-tools button {
  background: #ffffff12; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 7px 10px;
}
#dlBtn {
  background: #ffffff12; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 7px 10px;
}

.assets { display: flex; flex-direction: column; overflow: hidden; }
.assets-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 0; font-size: 13px;
}
#assetsClose { display: none; }
.promo {
  margin: 10px 10px 0; background: #152238; border: 1px solid #2a4a7a;
  border-radius: 10px; padding: 10px; display: flex; gap: 8px; align-items: center;
}
.promo p { margin: 0; color: #cfe1ff; font-size: 12px; line-height: 1.45; flex: 1; }
.promo button {
  background: var(--blue); color: #fff; border-radius: 8px; padding: 6px 10px;
  font-weight: 600; white-space: nowrap;
}
.search-row { display: flex; gap: 8px; padding: 10px; }
.search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: #101010; border: 1px solid var(--line); border-radius: 999px; padding: 0 10px;
}
.search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.search input {
  flex: 1; background: none; border: 0; outline: none; height: 34px; color: #fff;
}
.upload-btn {
  background: var(--lime); color: #111; font-weight: 700;
  border-radius: 999px; padding: 0 12px; display: flex; align-items: center; gap: 4px;
}
.upload-btn svg { width: 14px; height: 14px; }
.asset-tools {
  display: flex; align-items: center; gap: 4px; padding: 0 10px 8px; color: var(--muted);
}
.asset-tools button { width: 28px; height: 28px; border-radius: 6px; }
.asset-tools button.on, .asset-tools button:hover { background: #ffffff12; color: #fff; }
.sep { width: 1px; height: 14px; background: #ffffff22; margin: 0 4px; }
.flex { flex: 1; }
.asset-grid {
  flex: 1; overflow: auto; padding: 0 10px 10px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: start;
}
.card {
  aspect-ratio: 1; border-radius: 10px; background: #0a0a0a;
  border: 1px solid var(--line); overflow: hidden; position: relative; cursor: pointer;
}
.card:hover, .card.on { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.card img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.card .ph {
  position: absolute; inset: 0; display: grid; place-items: center; color: #333; font-size: 11px;
}
.card .tag {
  position: absolute; left: 6px; top: 6px; font-size: 10px; background: #000a;
  border-radius: 4px; padding: 1px 5px; color: var(--lime);
}
.card .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, #000d 70%);
  padding: 18px 6px 6px; font-size: 11px; line-height: 1.3;
  display: flex; justify-content: space-between; gap: 6px; align-items: flex-end;
}
.card .cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .dl {
  flex: none; background: var(--lime); color: #111; border-radius: 6px;
  padding: 2px 6px; font-size: 10px; font-weight: 700;
}
.asset-empty { display: none; color: var(--muted); text-align: center; padding: 40px 0; }
.asset-empty.show { display: block; }
.pager {
  display: flex; align-items: center; gap: 4px; padding: 8px 10px;
  border-top: 1px solid var(--line); color: var(--muted);
}
.pager .mini, .pager .nav {
  width: 28px; height: 24px; border-radius: 6px;
}
.pager .mini.on { background: #ffffff14; color: #fff; }
.pager .page {
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: #ddd;
}
.pager select {
  background: #101010; border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px;
}

.popover {
  position: absolute; top: 58px; right: 120px; width: 320px;
  background: #161616; border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 16px 40px #0008; z-index: 20; padding: 10px;
}
.pop-hd { display: flex; justify-content: space-between; margin-bottom: 8px; }
.pop-hd span { color: var(--gold); font-weight: 700; }
.pop-list { max-height: 240px; overflow: auto; display: grid; gap: 6px; }
.pop-row {
  display: flex; justify-content: space-between; gap: 8px;
  background: #101010; border-radius: 8px; padding: 8px;
  font-size: 12px;
}
.pop-row small { color: var(--muted); display: block; }
.pop-ft { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px; }
.pop-ft span { color: var(--muted); font-size: 12px; }
#refillBtn {
  background: var(--lime); color: #111; font-weight: 700; border-radius: 8px; padding: 6px 10px;
}
.toasts {
  position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 30;
}
.toast {
  background: #1b1b1b; border: 1px solid var(--line-2); border-radius: 10px;
  padding: 10px 12px; min-width: 220px; box-shadow: 0 10px 24px #0006;
}
.toast.err { border-color: #ff6b6b55; }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: var(--rail) var(--gen) 1fr; }
  .assets {
    position: fixed; top: var(--header); right: 0; bottom: 0; width: min(380px, 92vw);
    z-index: 40; display: none; box-shadow: -16px 0 40px #0008;
  }
  .assets.open { display: flex; }
  #assetsClose { display: grid; }
}
@media (max-width: 760px) {
  .top-nav, .agent-chip, .ws-chip, .icon-btn { display: none; }
  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    height: auto; min-height: calc(100vh - var(--header));
    overflow: auto;
  }
  .rail { flex-direction: row; width: 100%; height: 56px; overflow: auto; }
  .gen-panel { width: 100%; max-height: 68vh; overflow: auto; }
  .stage { min-height: 360px; }
  .popover { left: 12px; right: 12px; width: auto; top: 58px; }
}