:root {
  color-scheme: dark;
  --bg: #070b13;
  --panel: rgba(13, 20, 34, 0.88);
  --panel-strong: rgba(18, 29, 48, 0.96);
  --line: rgba(180, 205, 255, 0.18);
  --text: #eef5ff;
  --muted: #94a6c6;
  --accent: #5eead4;
  --accent-2: #60a5fa;
  --danger: #fb7185;
  --shadow: 0 22px 70px rgba(0,0,0,.42);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); touch-action: none; overscroll-behavior: none; }
button, input { font: inherit; }
button { min-height: 44px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.055); color: var(--text); padding: 0 14px; font-weight: 750; touch-action: manipulation; }
button:active { transform: translateY(1px); }
button.primary { background: linear-gradient(135deg, #2dd4bf, #38bdf8); color: #06111c; border: 0; box-shadow: 0 10px 30px rgba(45,212,191,.22); }
button.ghost { background: rgba(8, 13, 22, .48); color: var(--muted); }
button.danger { color:#ffe4e8; border-color:rgba(251,113,133,.42); background:rgba(251,113,133,.14); }

.app-shell { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background:
  radial-gradient(circle at top left, rgba(94,234,212,.12), transparent 34%),
  linear-gradient(135deg, #070b13, #0b1220 48%, #07111f); }
.topbar { min-height: 66px; padding: 10px clamp(12px, 3vw, 22px); display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); background: rgba(5, 9, 16, .76); backdrop-filter: blur(14px); }
.brand { display:flex; align-items:center; gap:12px; min-width:0; flex: 1 1 auto; }
.mark { width:38px; height:38px; flex:0 0 auto; border-radius:12px; background: conic-gradient(from 210deg, #5eead4, #60a5fa, #818cf8, #5eead4); box-shadow:0 0 0 5px rgba(255,255,255,.05); }
.brand strong { display:block; font-size:16px; letter-spacing:-.02em; }
.brand small { display:block; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:48vw; }
.top-actions { display:flex; flex: 0 0 auto; gap:6px; padding:4px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.045); }
.pill { min-height:36px; min-width:44px; border-radius:13px; padding:0 10px; font-size:13px; border:0; color:var(--muted); background:transparent; white-space:nowrap; }
.pill.active { background:#eafcff; color:#06111c; }

.workspace { min-height:0; display:grid; gap:12px; padding:12px; padding-bottom: calc(64px + var(--safe-bottom)); }
.workspace.split { grid-template-columns: minmax(0, 1fr) minmax(340px, .88fr); }
.workspace.plan-only { grid-template-columns: 1fr; }
.workspace.view3d-only { grid-template-columns: 1fr; }
.workspace.plan-only .scene-panel, .workspace.view3d-only .plan-panel { display:none; }
.panel { min-height:0; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:var(--panel); box-shadow:var(--shadow); display:flex; flex-direction:column; }
.panel-head { padding:14px 16px; display:flex; justify-content:space-between; gap:12px; align-items:flex-start; border-bottom:1px solid var(--line); }
.panel-head.compact { padding:12px 14px; }
.scene-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.scene-actions button { min-height:40px; }
h1,h2 { margin:0; font-size:18px; letter-spacing:-.03em; }
p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.35; }
.canvas-wrap, .three-mount { position:relative; flex:1; min-height:0; background:#08101d; overflow:hidden; }
#planCanvas { width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }
.three-mount canvas { width:100% !important; height:100% !important; display:block; touch-action:none; }
.hint-chip, .scene-badge { position:absolute; left:12px; bottom:12px; z-index:2; padding:9px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(3,8,16,.72); color:#cde2ff; font-size:12px; backdrop-filter: blur(10px); pointer-events:none; }
.scene-badge { left:auto; right:12px; bottom:auto; top:72px; }

.menu-toggle { position:fixed; z-index:12; right:12px; bottom:12px; bottom:calc(12px + var(--safe-bottom)); min-width:74px; background:#eafcff; color:#06111c; border:0; box-shadow:0 12px 34px rgba(0,0,0,.34); }
.control-dock { position:fixed; z-index:10; left:12px; right:12px; bottom:66px; bottom: calc(66px + var(--safe-bottom)); border:1px solid var(--line); border-radius:24px; background:var(--panel-strong); box-shadow:var(--shadow); padding:12px; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; backdrop-filter: blur(18px); transform: translateY(0); opacity:1; transition: transform .22s ease, opacity .22s ease, visibility .22s ease; }
.control-dock.collapsed { transform: translateY(calc(100% + 90px)); opacity:0; visibility:hidden; pointer-events:none; }
.grab { display:none; width:42px; height:4px; border-radius:99px; background:rgba(255,255,255,.24); justify-self:center; grid-column:1/-1; }
.control-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:8px; grid-column:1/-1; }
.field { display:flex; flex-direction:column; gap:7px; min-width:0; color:var(--muted); font-size:12px; }
.field span { display:flex; justify-content:space-between; gap:6px; }
.field b { color:var(--text); }
input[type="range"] { width:100%; accent-color: var(--accent); }
input[type="url"] { min-height:44px; min-width:0; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.055); color:var(--text); padding:0 12px; outline:none; }
.inline-input { display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:8px; }
.field.two { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start; }
.field.two label { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--line); border-radius:14px; padding:0 12px; background:rgba(255,255,255,.04); }
.upload-field input { color:var(--muted); max-width:100%; }
.mini-help { grid-column:auto; padding:10px 12px; border:1px solid var(--line); border-radius:16px; color:var(--muted); font-size:12px; line-height:1.35; background:rgba(255,255,255,.04); }
.mini-help b { display:block; color:var(--text); margin-bottom:4px; }

#jsonDialog, .modal-card { width:min(720px, calc(100vw - 28px)); border:1px solid var(--line); border-radius:22px; color:var(--text); background:#0b1220; padding:0; box-shadow:var(--shadow); }
#jsonDialog::backdrop, .modal-card::backdrop { background:rgba(0,0,0,.72); backdrop-filter: blur(4px); }
#jsonDialog form, .modal-card form { padding:16px; display:grid; gap:12px; }
#jsonDialog h3, .modal-card h3 { margin:0; }
#jsonOut { width:100%; height:44dvh; border:1px solid var(--line); border-radius:14px; background:#050913; color:#d9e7ff; padding:12px; resize:none; }
.modal-card { width:min(430px, calc(100vw - 28px)); }
.modal-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.modal-head p { margin-top:4px; }
.icon-close { min-width:44px; width:44px; padding:0; border-radius:999px; font-size:24px; line-height:1; color:var(--muted); }
.height-field { padding:12px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.04); }
.height-field span { font-size:14px; }
.height-number-row { display:grid; grid-template-columns: minmax(0, 1fr) auto; align-items:center; gap:10px; }
.height-number-row input { min-height:48px; min-width:0; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.055); color:var(--text); padding:0 14px; outline:none; font-weight:800; font-size:18px; }
.height-number-row span { color:var(--muted); font-weight:800; }
.modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

@media (max-width: 820px) {
  .app-shell { grid-template-rows:auto 1fr; }
  .topbar { min-height:60px; align-items:center; padding:9px 8px; gap:8px; }
  .brand { gap:9px; }
  .brand strong { font-size:15px; }
  .brand small { max-width:38vw; font-size:11px; }
  .mark { width:34px; height:34px; }
  .top-actions { align-self:center; }
  .pill { min-height:34px; min-width:40px; padding:0 8px; font-size:12px; }
  .workspace, .workspace.split { grid-template-columns:1fr; padding:8px; padding-bottom: calc(64px + var(--safe-bottom)); gap:8px; }
  .workspace.split .plan-panel { min-height: 44dvh; }
  .workspace.split .scene-panel { min-height: 28dvh; }
  .panel { border-radius:20px; }
  .panel-head { padding:10px 12px; }
  .panel-head p { display:none; }
  h1,h2 { font-size:16px; }
  .scene-badge { top:56px; font-size:11px; }
  .menu-toggle { right:10px; bottom:10px; bottom:calc(10px + var(--safe-bottom)); }
  .control-dock { left:8px; right:8px; bottom:62px; bottom:calc(62px + var(--safe-bottom)); grid-template-columns:1fr; gap:10px; border-radius:22px; max-height:min(72dvh, 420px); overflow:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
  .grab { display:block; }
  .control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field.two { grid-template-columns:1fr 1fr; }
  .mini-help { display:none; }
  button { border-radius:13px; }
}

@media (min-width: 1100px) {
  .control-dock { grid-template-columns: 1.2fr 1fr 1.2fr 1fr; align-items:end; }
  .control-grid { grid-column:auto; }
}

body.fullscreen-3d .topbar,
body.fullscreen-3d .plan-panel,
body.fullscreen-3d .control-dock,
body.fullscreen-3d .menu-toggle { display:none; }
body.fullscreen-3d .app-shell { grid-template-rows: 1fr; }
body.fullscreen-3d .workspace,
body.fullscreen-3d .workspace.split,
body.fullscreen-3d .workspace.view3d-only,
body.fullscreen-3d .workspace.plan-only { grid-template-columns:1fr; padding:0; }
body.fullscreen-3d .scene-panel { display:flex !important; border:0; border-radius:0; }
body.fullscreen-3d .scene-panel .panel-head { position:absolute; z-index:3; left:10px; right:10px; top:10px; border:1px solid var(--line); border-radius:18px; background:rgba(3,8,16,.68); backdrop-filter:blur(12px); }
body.fullscreen-3d .three-mount { min-height:100dvh; }
body.fullscreen-3d .scene-badge { top:auto; bottom:16px; right:16px; }