:root {
  --bg: #f6efe4;
  --panel: #fffaf2;
  --ink: #4f3422;
  --muted: #8f6e57;
  --accent: #f59f6b;
  --accent-2: #ffd66b;
  --line: #6a4a34;
  --shadow: 0 12px 30px rgba(92, 57, 31, 0.14);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background: linear-gradient(180deg, #fff7ef 0%, #f3e4d1 100%);
  color: var(--ink);
}

.app-shell {
  min-height: 100vh;
  padding: 20px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

h1, h2, p { margin: 0; }
h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: 18px; margin-bottom: 12px; }

.pill-group { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pill {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 4px 4px 0 rgba(79,52,34,.14);
  font-weight: 700;
}
.pill.subtle { font-weight: 500; color: var(--muted); }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr);
  gap: 18px;
}

.scene-card, .panel {
  background: var(--panel);
  border: 3px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.scene-card { padding: 16px; }
.sidebar { display: grid; gap: 18px; }
.panel { padding: 18px; }

.scene {
  position: relative;
  min-height: 560px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8ead9 0 58%, #dcae7e 58% 100%);
  border: 3px solid #7a5237;
}

.sky-window {
  position: absolute;
  left: 50%; top: 48px;
  transform: translateX(-50%);
  width: 220px; height: 150px;
  background: linear-gradient(180deg, #95d8ff, #dff4ff);
  border: 10px solid #7b4b2c;
  border-bottom-width: 12px;
  box-shadow: inset 0 -8px 0 rgba(255,255,255,.2);
}
.sky-window::before, .sky-window::after {
  content: "";
  position: absolute;
  background: #7b4b2c;
}
.sky-window::before { width: 100%; height: 8px; top: calc(50% - 4px); left: 0; }
.sky-window::after { width: 8px; height: 100%; left: calc(50% - 4px); top: 0; }
.cloud {
  position: absolute; display: block;
  width: 42px; height: 16px;
  background: rgba(255,255,255,.85);
  box-shadow: 12px -8px 0 rgba(255,255,255,.9), 24px 0 0 rgba(255,255,255,.85);
}
.c1 { left: 26px; top: 38px; }
.c2 { right: 48px; top: 80px; }

.shelf {
  position: absolute;
  right: 50px; top: 78px;
  width: 116px; height: 18px;
  background: #855233;
  box-shadow: 0 8px 0 #6e4328;
}
.zone-title {
  font-size: 12px;
  font-weight: 700;
  color: #6a4a34;
}
.whiteboard {
  position: absolute;
  left: 74px;
  top: 110px;
  width: 110px;
  height: 90px;
  background: #fbfff9;
  border: 6px solid #8b6241;
  box-shadow: 6px 6px 0 rgba(79,52,34,.12);
}
.whiteboard .zone-title {
  position: absolute;
  left: 8px;
  top: 6px;
}
.scribble {
  position: absolute;
  height: 4px;
  background: #83a598;
}
.scribble.s1 { left: 10px; top: 34px; width: 72px; }
.scribble.s2 { left: 18px; top: 52px; width: 54px; background: #f59f6b; }

.book, .plant {
  position: absolute; bottom: 18px;
  display: block;
}
.book { width: 18px; border: 3px solid rgba(0,0,0,.08); }
.b1 { left: 6px; height: 36px; background: #f4978e; }
.b2 { left: 30px; height: 44px; background: #84c69b; }
.b3 { left: 54px; height: 30px; background: #f6bd60; }
.plant {
  right: 8px; width: 24px; height: 26px;
  background: #6b4226;
}
.plant::before {
  content: ""; position: absolute; left: -4px; bottom: 16px;
  width: 32px; height: 24px; background: #67b36f;
  clip-path: polygon(50% 0, 100% 60%, 76% 100%, 24% 100%, 0 60%);
}

.lamp {
  position: absolute; left: 86px; top: 44px;
  width: 18px; height: 150px; background: #6d5039;
}
.lamp::before {
  content: ""; position: absolute; left: -18px; top: 0;
  width: 54px; height: 26px; background: #ffe08a;
  border: 3px solid #6d5039;
}

.desk {
  position: absolute; left: 190px; bottom: 132px;
  width: 250px; height: 92px; background: #a7683f;
  box-shadow: inset 0 -12px 0 rgba(0,0,0,.12);
}
.desk::before, .desk::after {
  content: ""; position: absolute; bottom: -46px;
  width: 18px; height: 46px; background: #805032;
}
.desk::before { left: 18px; }
.desk::after { right: 18px; }

.monitor {
  position: absolute; left: 258px; bottom: 238px;
  width: 110px; height: 72px; background: #3c4050;
  border: 8px solid #242635;
}
.monitor::before {
  content: ""; position: absolute; inset: 8px;
  background: linear-gradient(180deg, #95d8ff, #7ed3c1);
}
.monitor::after {
  content: ""; position: absolute; left: 40px; bottom: -22px;
  width: 18px; height: 22px; background: #242635;
  box-shadow: -18px 22px 0 0 #242635, 18px 22px 0 0 #242635;
}

.keyboard {
  position: absolute; left: 244px; bottom: 154px;
  width: 136px; height: 20px; background: #e9dfcf;
  border: 3px solid #826246;
}
.coffee {
  position: absolute; left: 404px; bottom: 168px;
  width: 24px; height: 28px; background: #fff5ea;
  border: 3px solid #826246;
}
.coffee::before {
  content: ""; position: absolute; right: -10px; top: 5px;
  width: 8px; height: 12px; border: 3px solid #826246; border-left: none;
}
.sofa {
  position: absolute; left: 70px; bottom: 112px;
  width: 92px; height: 70px; background: #d88c6a;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.12);
}
.sofa::before, .sofa::after {
  content: ""; position: absolute; top: 12px; width: 18px; height: 48px; background: #b46e51;
}
.sofa::before { left: 0; }
.sofa::after { right: 0; }
.rug {
  position: absolute; left: 150px; bottom: 36px;
  width: 320px; height: 88px; background: repeating-linear-gradient(90deg, #f3c969 0 18px, #f7d987 18px 36px);
  border: 4px solid #8c6741;
}
.bug-corner {
  position: absolute;
  right: 34px;
  bottom: 74px;
  width: 100px;
  height: 84px;
  background: #ffe8e1;
  border: 4px dashed #a5574c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bug-icon { font-size: 26px; }
.research-desk,
.dev-rack,
.tool-cart,
.report-board {
  position: absolute;
  z-index: 1;
}
.research-desk {
  left: 58px;
  top: 230px;
  width: 78px;
  height: 24px;
  background: #9b6b43;
  border: 3px solid #6f4b31;
}
.research-desk::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 24px;
  height: 12px;
  background: #f8f1e8;
  border: 2px solid #6f4b31;
  box-shadow: 28px 0 0 #84c69b;
}
.dev-rack {
  left: 302px;
  top: 228px;
  width: 44px;
  height: 58px;
  background: #56657b;
  border: 3px solid #2f3a4a;
  box-shadow: inset 0 10px 0 #7aa2d6, inset 0 24px 0 #9be0c6, inset 0 38px 0 #f2c14e;
}
.tool-cart {
  left: 410px;
  top: 238px;
  width: 46px;
  height: 32px;
  background: #d8b26a;
  border: 3px solid #6f4b31;
}
.tool-cart::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -10px;
  width: 34px;
  height: 8px;
  background: #6f4b31;
}
.tool-cart::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  width: 8px;
  height: 8px;
  background: #8fd3ff;
  box-shadow: 12px 0 0 #ff8f8f, 24px 0 0 #9be0c6;
}
.report-board {
  right: 34px;
  top: 230px;
  width: 70px;
  height: 52px;
  background: #fffaf2;
  border: 4px solid #8b6241;
}
.report-board::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 46px;
  height: 4px;
  background: #d88c6a;
  box-shadow: 0 10px 0 #84c69b, 0 20px 0 #f2c14e;
}
.cat-bed {
  position: absolute;
  left: 62px;
  bottom: 46px;
  width: 74px;
  height: 34px;
  background: #e7b4a5;
  border: 4px solid #8b5a44;
  border-radius: 20px;
}
.water-bowl,
.food-bowl {
  position: absolute;
  bottom: 52px;
  width: 26px;
  height: 14px;
  border: 3px solid #6f4b31;
  border-radius: 0 0 14px 14px;
}
.water-bowl {
  left: 150px;
  background: #8fd3ff;
}
.food-bowl {
  left: 184px;
  background: #d89b52;
}

.npc, .agent {
  position: absolute;
  transition: left .8s ease, bottom .8s ease, transform .4s ease;
}
.npc { z-index: 2; }
.agent { left: 120px; bottom: 132px; z-index: 3; }

.npc-label, .agent-label {
  margin-bottom: 8px;
  background: rgba(255,255,255,.96);
  border: 3px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 4px 4px 0 rgba(79,52,34,.12);
  white-space: nowrap;
}
.npc-label {
  font-size: 12px;
  padding: 6px 10px;
}

.npc-sprite, .agent-sprite {
  position: relative;
  width: 64px;
  height: 64px;
  background: #ffd8a8;
  border: 4px solid #6f4b31;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.08);
}
.agent-sprite {
  background-color: #cfd4d8;
}
.npc-sprite.cat::before, .npc-sprite.cat::after,
.ear {
  content: "";
  position: absolute;
  top: -16px;
  width: 16px;
  height: 16px;
  background: #ffbf80;
  border: 4px solid #6f4b31;
  border-bottom: 0;
}
.npc-sprite.cat::before { left: 6px; }
.npc-sprite.cat::after { right: 6px; }
.ear.left { left: 6px; }
.ear.right { right: 6px; }
.face { position: absolute; inset: 0; }
.eye {
  position: absolute; top: 22px; width: 8px; height: 12px; background: #2f3133;
}
.eye.left { left: 16px; }
.eye.right { right: 16px; }
.mouth {
  position: absolute; left: 50%; bottom: 14px;
  width: 16px; height: 8px; transform: translateX(-50%);
  border-bottom: 4px solid #8c9399;
}

.npc-sprite.cat { border-radius: 6px; }
.npc-sprite.soda {
  background-color: #cfd4d8;
  background-image:
    radial-gradient(circle at 18px 24px, #2f3133 0 3px, transparent 4px),
    radial-gradient(circle at 42px 24px, #2f3133 0 3px, transparent 4px),
    linear-gradient(#8c9399, #8c9399),
    linear-gradient(90deg, #aeb4ba 0 8px, transparent 8px 56px, #aeb4ba 56px 64px);
  background-repeat: no-repeat;
  background-size: auto, auto, 14px 4px, 100% 18px;
  background-position: 0 0, 0 0, 25px 42px, 0 6px;
}
.npc-sprite.guanson {
  width: 72px;
  height: 68px;
  background-color: #b97a56;
  background-image:
    radial-gradient(circle at 20px 26px, #2f1f17 0 3px, transparent 4px),
    radial-gradient(circle at 48px 26px, #2f1f17 0 3px, transparent 4px),
    linear-gradient(#6b3f2a, #6b3f2a),
    radial-gradient(circle at 36px 46px, #d29a73 0 14px, transparent 15px);
  background-repeat: no-repeat;
  background-size: auto, auto, 16px 4px, 28px 18px;
  background-position: 0 0, 0 0, 28px 42px, center 36px;
  border-radius: 10px;
}
.npc-sprite.guan {
  background-color: #b9d7ff;
  background-image:
    radial-gradient(circle at 18px 24px, #203040 0 3px, transparent 4px),
    radial-gradient(circle at 42px 24px, #203040 0 3px, transparent 4px),
    linear-gradient(#58708a, #58708a),
    linear-gradient(180deg, #6b8fb3 0 10px, transparent 10px 100%);
  background-repeat: no-repeat;
  background-size: auto, auto, 14px 4px, 100% 100%;
  background-position: 0 0, 0 0, 25px 42px, 0 0;
}
.npc-sprite.hat {
  background-color: #9a6a4b;
  background-image:
    radial-gradient(circle at 18px 24px, #2f2118 0 3px, transparent 4px),
    radial-gradient(circle at 42px 24px, #2f2118 0 3px, transparent 4px),
    linear-gradient(#603a28, #603a28),
    radial-gradient(circle at 10px 6px, #9a6a4b 0 10px, transparent 11px),
    radial-gradient(circle at 54px 6px, #9a6a4b 0 10px, transparent 11px);
  background-repeat: no-repeat;
  background-size: auto, auto, 14px 4px, 22px 18px, 22px 18px;
  background-position: 0 0, 0 0, 25px 42px, 2px -2px, 40px -2px;
  border-radius: 16px 16px 12px 12px;
}
.npc-sprite.hat::before,
.npc-sprite.hat::after {
  top: -8px;
  width: 12px;
  height: 10px;
  background: #9a6a4b;
  border-bottom: 4px solid #6f4b31;
  border-radius: 0 0 10px 10px;
}
.npc-sprite.flower {
  background-color: #f2caa3;
  background-image:
    radial-gradient(circle at 18px 24px, #3c2a20 0 3px, transparent 4px),
    radial-gradient(circle at 42px 24px, #3c2a20 0 3px, transparent 4px),
    linear-gradient(#9b6a50, #9b6a50),
    radial-gradient(circle at 18px 14px, #f28c28 0 8px, transparent 9px),
    radial-gradient(circle at 47px 12px, #3a2a1f 0 9px, transparent 10px),
    radial-gradient(circle at 32px 10px, #fff4dc 0 6px, #ffcadf 6px 10px, transparent 10px);
  background-repeat: no-repeat;
  background-size: auto, auto, 14px 4px, 18px 18px, 20px 20px, 24px 24px;
  background-position: 0 0, 0 0, 25px 42px, 6px 6px, 38px 4px, center 0px;
}

.npc-guanson { left: 92px; bottom: 228px; }
.npc-guan { left: 364px; bottom: 214px; }
.npc-hat { left: 422px; bottom: 124px; }
.npc-flower { left: 512px; bottom: 228px; }

.agent[data-state="idle"] { left: 112px; bottom: 138px; }
.agent[data-state="writing"] { left: 250px; bottom: 182px; }
.agent[data-state="researching"] { left: 106px; bottom: 210px; }
.agent[data-state="syncing"] { left: 298px; bottom: 214px; transform: translateY(-4px); }
.agent[data-state="executing"] { left: 346px; bottom: 214px; }
.agent[data-state="error"] { left: 486px; bottom: 126px; }

.big-status {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 700;
}
.progress-wrap {
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
}
.progress-bar {
  flex: 1; height: 18px; background: #efe0cf; border: 3px solid var(--line); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .5s ease;
}
.memo {
  min-height: 180px;
  line-height: 1.75;
  white-space: pre-wrap;
  color: var(--ink);
}
.memo.empty { color: var(--muted); }
.roster {
  display: grid;
  gap: 10px;
}
.roster-item {
  border: 2px solid #d7c2ad;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fffefb;
}
.roster-item strong {
  display: block;
  margin-bottom: 4px;
}
.roster-item p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.roster-model {
  margin-top: 6px;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f6efe4;
  color: #6a4a34;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .scene { min-height: 480px; }
}