:root{
  --brand:#4B82FF;
  --bg:#0B1220;
  --panel:#121A2A;
  --text:#EAF0FF;
  --muted:#9BB0D8;
  --accent:#08C6A8;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 70% -10%, #12213c 0%, #0B1220 60%);
  color:var(--text);
}
a{color:var(--brand)}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header{display:flex;align-items:center;gap:14px;padding:14px 0}
.logo{
  display:flex;align-items:center;gap:10px; font-weight:800; letter-spacing:.2px;
}
.logo-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),#87B4FF);display:grid;place-items:center;box-shadow:var(--shadow)}
.badge{padding:4px 8px;border-radius:999px;background:#1c2540;color:#bcd1ff;border:1px solid #29365b;font-size:12px;margin-left:8px}
.grid{display:grid;grid-template-columns: 1fr 1fr; gap:22px}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} }
.panel{
  background: linear-gradient(180deg,#121a2a 0%,#0d1424 100%);
  border:1px solid #1e2a46; border-radius:16px; padding:18px; box-shadow:var(--shadow);
}
h1{font-size:28px;margin:6px 0 4px}
.sub{color:var(--muted);font-size:14px;margin-bottom:14px}
.upload-area{
  border:1.5px dashed #34476f; border-radius:14px;padding:16px; text-align:center; background:#0c1526
}
.btn{background:var(--brand); color:white; border:none; padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer}
.btn.secondary{background:#16233d;color:#bcd1ff;border:1px solid #23345c}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 12px;border:1px solid #263455;border-radius:10px;cursor:pointer;color:#cfe0ff;background:#111a2b}
.chip.active{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); color:white}
.stage{background:#0a1120;border-radius:14px;border:1px solid #152241; padding:16px; display:grid; place-items:center; min-height:420px;position:relative;overflow:hidden}
.canvas-wrap{width:100%;max-width:560px;aspect-ratio:1/1;background:#0a0f1d;border-radius:12px;display:grid;place-items:center}
#frameCanvas{width:100%;height:100%}
.room-stage{background:#0a1120;border-radius:14px;border:1px solid #152241;height:520px;display:grid;place-items:center;position:relative;overflow:hidden}
.room-canvas{width:100%;height:100%}
.footer{margin:18px auto 40px; color:#92a8d8; font-size:13px; display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.notice{font-size:12px;color:#92a8d8;margin-top:6px}
.section-title{font-size:18px;margin:6px 0 10px}
.desc{line-height:1.65;color:#cfe0ff;font-size:15px}
.spinner{width:18px;height:18px;border-radius:50%;border:3px solid #9bb0d8;border-top-color:transparent;animation:spin 1s linear infinite;display:none;margin-left:8px}
@keyframes spin{to{transform:rotate(360deg)}}