@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Serif+SC:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#17231f; --muted:#65716c; --paper:#f2f2ec; --panel:#fffefa; --line:#d9ddd6; --green:#123c35; --bright:#d7ff6f; --cream:#e9e0ca; --accent:#d86538; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Space Grotesk","PingFang SC",sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
h1,h2,h3,p { margin-top:0; }
h2,h3 { font-family:"Space Grotesk","PingFang SC",sans-serif; }
.eyebrow { margin:0 0 4px; color:#55746a; font:500 9px "DM Mono",monospace; letter-spacing:.1em; }

/* ---------- console frame ---------- */
.console { display:grid; grid-template-columns:232px minmax(0,1fr); height:100vh; }
.main { display:flex; flex-direction:column; min-width:0; min-height:0; }

/* ---------- sidebar ---------- */
.sidebar { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line); background:#ecece5; }
.sidebar-brand { display:flex; align-items:center; gap:8px; padding:14px 14px 12px; border-bottom:1px solid var(--line); letter-spacing:.05em; font-size:10px; font-weight:500; }
.sidebar-brand b { letter-spacing:.11em; }
.brand-mark { display:grid; place-items:center; width:24px; height:24px; border:2px solid var(--green); color:var(--green); font-size:20px; line-height:1; }
.sidebar-label { display:flex; align-items:center; justify-content:space-between; padding:12px 14px 8px; color:#77857e; font:500 9px "DM Mono",monospace; letter-spacing:.12em; }
.sidebar-count { padding:1px 6px; border:1px solid #c6cec6; border-radius:20px; color:#5c6a62; font-size:9px; }
.project-list { flex:1; min-height:0; overflow-y:auto; padding:0 8px; }
.history-item { display:flex; gap:10px; align-items:flex-start; padding:9px 8px; border:1px solid transparent; border-radius:3px; cursor:pointer; }
.history-item:hover { background:#f6f6ef; }
.history-item.is-selected { background:var(--panel); border-color:var(--line); box-shadow:0 1px 2px rgba(23,35,31,.06); }
.history-color { flex:none; width:10px; height:10px; margin-top:3px; border-radius:2px; background:#21594a; }
.history-item > div { min-width:0; flex:1; }
.history-item b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:600; }
.history-item span { display:block; margin-top:2px; color:#7c8882; font-size:10px; }
.history-item em { flex:none; color:#98a39c; font:400 9px "DM Mono",monospace; font-style:normal; }
.sidebar-foot { padding:10px; border-top:1px solid var(--line); }
.new-project { width:100%; padding:9px 0; border:1px solid #b8d0c4; border-radius:3px; background:#f0f7f2; color:#285b4d; font-size:11px; font-weight:700; }
.new-project:hover { background:#dfeee5; }
.sidebar-note { margin:8px 2px 0; color:#98a39c; font-size:9px; line-height:1.5; }

/* ---------- toolbar ---------- */
.toolbar { display:flex; align-items:center; gap:12px; height:46px; padding:0 14px; border-bottom:1px solid var(--line); background:#f7f7f1; }
.toolbar-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34%; font-size:12px; font-weight:600; }
.toolbar-spacer { flex:1; }
.toolbar-divider { width:1px; height:18px; background:var(--line); }
.tag { padding:4px 8px; border:1px solid #b8d0c4; border-radius:30px; color:#285b4d; background:#f0f7f2; font-size:9px; white-space:nowrap; }
.save-state { display:flex; align-items:center; color:var(--muted); font-size:10px; white-space:nowrap; }
.live-dot { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:100%; background:#79b49d; }
.save-state [data-type="error"] { color:#c04a2a; }
.tool-btn { padding:6px 10px; border:1px solid #c8d2cb; border-radius:3px; background:transparent; color:#31584d; font-size:10px; font-weight:600; white-space:nowrap; }
.tool-btn:hover { background:#edf4ef; }

/* ---------- workbench ---------- */
.workbench { flex:1; display:grid; grid-template-columns:296px minmax(0,1fr) 330px; min-height:0; }
.panel { min-height:0; background:var(--panel); }
.panel-head { padding:12px 14px 10px; }
.panel-head h2 { margin:0; font-size:11px; font-weight:600; letter-spacing:.08em; color:#48554e; }
#previewTitle { font-size:13px; font-weight:600; letter-spacing:0; color:var(--ink); }
.panel-head-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.panel-sub { margin:-2px 14px 8px; color:var(--muted); font-size:10px; line-height:1.5; }

/* brief */
.panel-brief { overflow-y:auto; border-right:1px solid var(--line); }
.panel-brief form { padding:0 14px 14px; }
label { display:block; margin-bottom:11px; color:#52625c; font-size:10px; font-weight:600; }
input,select,textarea { width:100%; margin-top:5px; padding:8px 9px; border:1px solid #d9dfd9; border-radius:2px; outline:none; background:#fff; color:var(--ink); font-size:12px; }
textarea { resize:vertical; line-height:1.55; }
input:focus,textarea:focus,select:focus { border-color:#609b88; box-shadow:0 0 0 3px #dcece5; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
fieldset { padding:0; margin:0 0 11px; border:0; }
legend { margin-bottom:5px; color:#52625c; font-size:10px; font-weight:600; }
.dimensions { display:grid; grid-template-columns:1fr 10px 1fr 10px 1fr; align-items:end; gap:6px; }
.dimensions label { margin:0; }
.dimensions span { padding-bottom:8px; color:#90a098; text-align:center; font-size:11px; }
.dimensions input { margin-top:5px; }
.actions { display:flex; gap:8px; margin-top:2px; }
.primary,.secondary,.upload-button { border:0; border-radius:2px; padding:9px 12px; font-size:11px; font-weight:700; transition:.15s ease; }
.primary { flex:1; background:var(--green); color:#fff; }
.primary:hover { background:#1b564b; }
.secondary { border:1px solid #c8d2cb; background:transparent; color:#31584d; }
.secondary:hover { background:#edf4ef; }
.form-note { margin:10px 0 0; color:#8a938f; font-size:9px; line-height:1.5; }

/* preview viewport */
.panel-preview { display:flex; flex-direction:column; min-width:0; background:#eaebe7; }
.icon-button { flex:none; width:28px; height:28px; border:1px solid #bed0c4; border-radius:50%; background:#eff6ef; color:var(--green); font-size:16px; line-height:1; }
.scene { position:relative; flex:1; min-height:280px; overflow:hidden;
  background-image:linear-gradient(rgba(30,35,32,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(30,35,32,.05) 1px,transparent 1px);
  background-size:28px 28px; }
.scene:before,.scene:after { content:""; position:absolute; width:14px; height:14px; border:1px solid rgba(30,35,32,.3); }
.scene:before { top:10px; left:10px; border-right:0; border-bottom:0; }
.scene:after { right:10px; bottom:10px; border-left:0; border-top:0; }
.preview-footer { display:flex; justify-content:space-between; padding:10px 14px; border-top:1px solid #d4d7d0; color:#6a726c; font:10px "DM Mono",monospace; }
.swatch { display:inline-block; width:11px; height:11px; margin-right:6px; vertical-align:-2px; background:#21594a; }

/* right column */
.right-col { display:flex; flex-direction:column; min-height:0; border-left:1px solid var(--line); }
.panel-directions { flex:1; overflow-y:auto; }
.panel-activity { flex:none; height:196px; display:flex; flex-direction:column; border-top:1px solid var(--line); }
.activity-list { flex:1; overflow-y:auto; padding:2px 14px 10px; font:10px "DM Mono",monospace; }
.log-row { display:flex; gap:10px; padding:5px 0; border-bottom:1px dashed #e4e7e0; color:#4c5a53; }
.log-row:last-child { border-bottom:0; }
.log-row time { flex:none; color:#98a39c; }
.log-row span { min-width:0; }
.activity-empty { padding:14px 0; color:#98a39c; font-size:10px; }

/* direction rows */
.directions { display:flex; flex-direction:column; }
.direction-card { display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; padding:10px 14px; border-top:1px solid #e6e8e2; }
.direction-card:first-child { border-top:0; }
.direction-card.is-selected { background:#f2f7f3; box-shadow:inset 2px 0 0 #4c8b75; }
.direction-visual { display:flex; flex-direction:column; align-self:start; width:34px; height:40px; border:1px solid rgba(0,0,0,.14); }
.direction-visual i { flex:1; }
.direction-visual .sw-a { background:var(--direction-main); }
.direction-visual .sw-b { background:var(--direction-top); }
.direction-visual .sw-c { background:var(--direction-side); }
.direction-content { min-width:0; }
.direction-line { display:flex; align-items:center; gap:7px; }
.direction-index { color:#8a948d; font:9px "DM Mono",monospace; }
.direction-kicker { margin:0; color:#8a948d; font:9px "DM Mono",monospace; }
.direction-content h3 { margin:0; font-size:12px; font-weight:600; }
.select-direction { margin-left:auto; padding:4px 9px; border:1px solid #c8d2cb; border-radius:2px; background:transparent; color:#31584d; font-size:10px; font-weight:600; white-space:nowrap; }
.select-direction:hover { background:#edf4ef; }
.direction-card.is-selected .select-direction { border-color:#4c8b75; color:#2b594d; background:#e4f0e8; }
.direction-desc { margin:4px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#6a756e; font-size:10px; line-height:1.5; }
.chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.chips span { padding:1px 5px; border:1px solid #dde1da; color:#7a857d; font-size:9px; }

/* references strip */
.panel-refs { display:flex; align-items:stretch; height:132px; border-top:1px solid var(--line); background:var(--panel); }
.refs-side { flex:none; width:150px; padding:12px 14px; border-right:1px solid var(--line); }
.upload-button { display:inline-block; margin-top:4px; padding:7px 10px; border:1px solid #b8d0c4; background:#f0f7f2; color:#285b4d; font-size:10px; cursor:pointer; }
.upload-button:hover { background:#dfeee5; }
.refs-note { margin:8px 0 0; color:#98a39c; font-size:9px; line-height:1.5; }
.library-grid { flex:1; display:flex; gap:10px; align-items:stretch; padding:12px 14px; overflow-x:auto; }
.reference { position:relative; flex:none; width:150px; padding:10px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; color:#fff; }
.reference span { font:600 11px/1.4 "Space Grotesk","PingFang SC",sans-serif; }
.reference small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:8px "DM Mono",monospace; }
.ref-empty { background:#f4f4ee; border:1px dashed #c3cfc5; color:#8a9a90; }
.user-reference { background:#315b51; }
.reference-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.48; mix-blend-mode:screen; }
.reference-content { position:relative; z-index:1; }

/* ---------- 3D box: joined isometric projection (dimensions never pull faces apart) ---------- */
.box { --front:#21594a; --right:#103b33; --top:#3b7967; --depth:72px; position:absolute; top:47%; left:50%; width:222px; height:174px; transform:translateX(-57%) translateY(-50%) skewY(-8deg); transform-style:flat; transition:transform .6s cubic-bezier(.2,.8,.2,1),width .45s,height .45s; }
.box.is-turned { transform:translateX(-43%) translateY(-50%) skewY(8deg) scaleX(-1); }
.box-face { position:absolute; display:flex; box-sizing:border-box; overflow:hidden; }
.face-front { top:36px; width:100%; height:100%; padding:23px; flex-direction:column; color:#f3f2e7; background:var(--front); border:1px solid rgba(255,255,255,.12); z-index:3; }
.face-right { left:100%; right:auto; top:36px; width:var(--depth); height:100%; align-items:center; justify-content:center; color:#ddedbf; background:var(--right); clip-path:polygon(0 0,100% 12%,100% 100%,0 88%); z-index:2; }
.face-top { left:0; top:0; width:calc(100% + var(--depth)); height:36px; align-items:center; justify-content:center; color:#f6eed8; background:var(--top); clip-path:polygon(0 100%,14% 0,100% 0,86% 100%); z-index:1; }
.stamp { display:inline-flex; width:49px; height:49px; align-items:center; justify-content:center; border:1px solid #dfd9b8; border-radius:50%; color:#fff8db; text-align:center; font-family:"Noto Serif SC",serif; font-size:11px; line-height:1.15; }
.stamp small { font:6px "DM Mono",monospace; }
.front-copy { margin-top:auto; font:600 26px "Noto Serif SC",serif; letter-spacing:.06em; }
.front-subcopy { margin-top:4px; font:8px "DM Mono",monospace; letter-spacing:.08em; opacity:.8; }
.seal { position:absolute; right:22px; top:27px; font:9px "DM Mono",monospace; writing-mode:vertical-rl; opacity:.75; }
.face-right span { transform:rotate(90deg); font:10px "DM Mono",monospace; letter-spacing:.22em; }
.top-line { position:absolute; left:23px; right:23px; top:20px; height:1px; background:rgba(255,255,255,.38); }
.face-top #topCopy { font:600 20px "Noto Serif SC",serif; letter-spacing:.25em; }
.ground-shadow { position:absolute; bottom:12%; left:50%; width:290px; height:55px; transform:translateX(-50%); border-radius:50%; background:rgba(40,46,41,.16); filter:blur(14px); }
.dimension-label { position:absolute; z-index:2; color:#7d8580; font:10px "DM Mono",monospace; }
.dim-length { bottom:10%; left:calc(50% - 118px); width:235px; border-top:1px solid #b3bab2; text-align:center; }
.dim-length span { position:relative; top:-5px; background:#eaebe7; padding:0 7px; }
.dim-height { right:14%; top:30%; height:175px; border-left:1px solid #b3bab2; writing-mode:vertical-rl; text-align:center; }
.dim-height span { position:relative; left:-5px; background:#eaebe7; padding:6px 0; }

/* ---------- responsive ---------- */
@media (max-width:1100px) {
  .workbench { grid-template-columns:280px minmax(0,1fr) 300px; }
}
@media (max-width:960px) {
  body { overflow:auto; }
  .console { grid-template-columns:1fr; height:auto; }
  .sidebar { border-right:0; border-bottom:1px solid var(--line); }
  .project-list { max-height:180px; }
  .workbench { grid-template-columns:1fr; }
  .panel-brief { border-right:0; border-bottom:1px solid var(--line); }
  .panel-preview { min-height:420px; }
  .right-col { border-left:0; border-top:1px solid var(--line); }
  .panel-activity { height:180px; }
  .panel-refs { height:auto; min-height:120px; }
  .toolbar { flex-wrap:wrap; height:auto; padding:8px 14px; }
  .toolbar-title { max-width:100%; }
}