/* ObsiLabs Arch Studio — dark studio chrome, light drafting surface */
:root{
  --bg:#0e0f11;
  --panel:#15171a;
  --panel-2:#1b1e22;
  --line:#262a2f;
  --line-soft:#1f2226;
  --ink:#e8e6e1;
  --ink-2:#a9a49b;
  --ink-3:#6f6b64;
  --accent:#e0a44a;
  --accent-2:#f2c078;
  --blue:#5fa8d3;
  --danger:#c96a5a;
  --paper:#f4f1ea;
  --r:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);
  border-radius:8px;padding:7px 9px;width:100%;outline:none}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,164,74,.12)}
h1{font-size:21px;letter-spacing:-.35px;margin:0 0 4px;font-weight:650}
p{margin:0;color:var(--ink-2);font-size:13px;max-width:62ch}

.app{display:grid;grid-template-columns:224px minmax(0,1fr) 292px;height:100vh}

/* ---------------- rail ---------------- */
.rail{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px}
.brand{display:flex;gap:10px;align-items:center;padding:2px 6px 20px}
.logo{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(150deg,#2a2118,#1a1510);border:1px solid #3a2f22;color:var(--accent-2)}
.logo svg{width:19px;height:19px}
.brand-name{font-weight:650;letter-spacing:-.2px;font-size:13.5px}
.brand-sub{font-size:11px;color:var(--ink-3);letter-spacing:.02em}

.steps{display:flex;flex-direction:column;gap:4px}
.step{display:flex;gap:11px;align-items:center;padding:10px 10px;border-radius:10px;
  text-align:left;color:var(--ink-3);transition:.15s;border:1px solid transparent}
.step:hover{background:var(--panel-2);color:var(--ink-2)}
.step.is-active{background:#1d1f23;border-color:var(--line);color:var(--ink)}
.step-num{width:22px;height:22px;border-radius:50%;border:1px solid #33383e;display:grid;place-items:center;
  font-size:11px;font-weight:600;color:var(--ink-3);flex:0 0 auto}
.step.is-active .step-num{border-color:var(--accent);color:var(--accent);background:rgba(224,164,74,.1)}
.step.is-done .step-num{border-color:#3f6b4f;color:#7fc08c;background:rgba(90,180,120,.1)}
.step-txt{display:flex;flex-direction:column;line-height:1.25}
.step-txt b{font-weight:600;font-size:13px}
.step-txt i{font-style:normal;font-size:11px;color:var(--ink-3)}

.rail-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.statline{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3)}
.statline b{color:var(--ink-2);font-weight:550;font-variant-numeric:tabular-nums}

/* ---------------- main ---------------- */
.main{position:relative;overflow:hidden;display:flex;flex-direction:column}
.view{display:flex;flex-direction:column;height:100%;min-height:0}
.view.is-hidden{display:none}
.view-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;
  padding:20px 24px 16px;border-bottom:1px solid var(--line-soft)}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.seg button{padding:6px 11px;border-radius:6px;font-size:12.5px;color:var(--ink-3)}
.seg button:hover{color:var(--ink-2)}
.seg button.on{background:#2a2d31;color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}

.btn{border:1px solid var(--line);background:var(--panel);padding:8px 13px;border-radius:9px;font-size:13px;
  transition:.15s;white-space:nowrap}
.btn:hover{background:#1e2126;border-color:#333}
.btn.primary{background:linear-gradient(180deg,#e8b060,#d1903a);border-color:#b97f2c;color:#241a0c;font-weight:650}
.btn.primary:hover{filter:brightness(1.06)}
.btn.primary[disabled]{opacity:.5;cursor:default;filter:none}
.btn.ghost{color:var(--ink-2)}
.btn.danger{color:var(--danger);border-color:#3a2521;margin-top:14px;width:100%}
.btn.danger:hover{background:#231a18}

/* ---------------- canvas ---------------- */
.canvas-wrap{position:relative;flex:1;min-height:0;margin:14px;border-radius:var(--r);overflow:hidden;
  background:#0b0c0d;border:1px solid var(--line)}
#plan{display:block;width:100%;height:100%;cursor:crosshair}
.canvas-hint{position:absolute;left:14px;bottom:12px;font-size:11.5px;color:#7d786f;
  background:rgba(12,13,14,.72);padding:5px 10px;border-radius:20px;border:1px solid #24272b;
  pointer-events:none;backdrop-filter:blur(6px)}
.zoom{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px}
.zoom button{width:30px;height:30px;border-radius:8px;background:rgba(20,22,25,.9);border:1px solid #2b2f34;
  color:var(--ink-2);font-size:15px;line-height:1;display:grid;place-items:center}
.zoom button:hover{color:var(--ink);border-color:#3b4046}

/* ---------------- style view ---------------- */
.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 24px;overflow:auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card.wide{grid-column:1/-1}
.card-title{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.palettes{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pal{border:1px solid var(--line);border-radius:10px;padding:9px;text-align:left;transition:.15s;background:var(--panel-2)}
.pal:hover{border-color:#3a3f45}
.pal.on{border-color:var(--accent);background:rgba(224,164,74,.07)}
.pal-name{font-size:12.5px;margin-bottom:7px;color:var(--ink-2)}
.pal.on .pal-name{color:var(--ink)}
.swatches{display:flex;height:22px;border-radius:5px;overflow:hidden}
.swatches i{flex:1}

.drop{border:1.5px dashed #33383e;border-radius:10px;padding:22px;text-align:center;cursor:pointer;transition:.15s}
.drop:hover{border-color:var(--accent);background:rgba(224,164,74,.04)}
.drop-ico{font-size:20px;color:var(--ink-3);line-height:1}
.drop-txt{font-size:12.5px;color:var(--ink-2);margin-top:6px}
.drop-sub{font-size:11px;color:var(--ink-3);margin-top:3px}
.extracted{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.extracted .sw{width:38px;height:38px;border-radius:8px;border:1px solid #2e3237;position:relative;cursor:pointer}
.extracted .sw:hover{transform:translateY(-2px)}
.extracted .sw span{position:absolute;bottom:-16px;left:0;right:0;font-size:9px;color:var(--ink-3);text-align:center}

.fields{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px}
.fields label,.field{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--ink-3);
  letter-spacing:.04em;text-transform:uppercase}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}

/* ---------------- build view ---------------- */
.build-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;padding:16px 24px;min-height:0;flex:1}
.stages{display:flex;flex-direction:column;gap:6px;overflow:auto;padding-right:4px}
.stage{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;border:1px solid transparent;
  transition:.2s;opacity:.45}
.stage.is-on{opacity:1;background:#1a1d21;border-color:var(--line)}
.stage.is-done{opacity:1;cursor:pointer}
.stage-dot{width:18px;height:18px;border-radius:50%;border:1px solid #343a40;flex:0 0 auto;display:grid;
  place-items:center;font-size:10px;color:var(--ink-3)}
.stage.is-on .stage-dot{border-color:var(--accent);color:var(--accent);animation:pulse 1.2s infinite}
.stage.is-done .stage-dot{border-color:#3f6b4f;color:#7fc08c;background:rgba(90,180,120,.12)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,164,74,.35)}50%{box-shadow:0 0 0 5px rgba(224,164,74,0)}}
.stage-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.stage-txt b{font-size:12.5px;font-weight:600}
.stage-txt i{font-style:normal;font-size:11px;color:var(--ink-3)}
.stage-thumb{width:64px;height:43px;border-radius:6px;background:#0c0d0e;margin-left:auto;object-fit:cover;
  border:1px solid #24272b;flex:0 0 auto}

.stage-view{display:flex;flex-direction:column;gap:12px;min-height:0}
.stage-img{flex:1;min-height:260px;border-radius:var(--r);border:1px solid var(--line);background:#0b0c0d;
  display:grid;place-items:center;overflow:hidden;position:relative}
.stage-img img{width:100%;height:100%;object-fit:contain;display:block}
.stage-img .ph{color:var(--ink-3);font-size:13px}
.finals{display:flex;gap:8px;flex-wrap:wrap;min-height:0}
.final{border:1px solid var(--line);border-radius:9px;overflow:hidden;width:112px;cursor:pointer;
  background:var(--panel);transition:.15s}
.final:hover{border-color:var(--accent)}
.final img{width:100%;height:70px;object-fit:cover;display:block}
.final span{display:block;font-size:10.5px;color:var(--ink-3);padding:5px 7px;text-transform:capitalize}
.dl{display:flex;gap:8px;flex-wrap:wrap}
.dl a{border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:12.5px;color:var(--ink-2);
  text-decoration:none;background:var(--panel)}
.dl a:hover{border-color:var(--accent);color:var(--ink)}

/* ---------------- inspector ---------------- */
.inspector{background:var(--panel);border-left:1px solid var(--line);padding:18px 16px;overflow:auto}
.insp-title{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.insp-empty p{font-size:12.5px;color:var(--ink-3);line-height:1.55}
.insp-empty b{color:var(--ink-2)}
.field{margin-bottom:10px}
.dimline{margin-top:12px;padding:9px 10px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);
  font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.is-hidden{display:none !important}

@media (max-width:1100px){
  .app{grid-template-columns:76px minmax(0,1fr) 260px}
  .brand-name,.brand-sub,.step-txt,.rail-foot{display:none}
  .brand{justify-content:center;padding-bottom:14px}
  .step{justify-content:center;padding:9px}
  .fields{grid-template-columns:1fr 1fr}
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2a2e33;border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* --- refinements --- */
.view-head{align-items:center}
.view-head > div:first-child{min-width:0;flex:1}
.view-head p{max-width:56ch}
.toolbar{flex-wrap:nowrap;flex:0 0 auto}
.seg button{padding:6px 10px}
.btn{padding:8px 12px}

.ph{text-align:center;color:var(--ink-3);font-size:13px;line-height:1.7;max-width:44ch}
.ph-big{color:var(--ink-2);font-size:15px;font-weight:600;margin-bottom:8px}
.ph small{font-size:11.5px;color:var(--ink-3)}
.ph-files{margin-top:12px;font-size:11.5px;color:var(--ink-3)}
.ph-files b{color:var(--ink-2);font-weight:600}

.stage-view{justify-content:flex-start}
.stage-img{flex:1 1 auto;min-height:0}
.stage-img img{max-height:100%}

.cta-card{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(100deg,rgba(224,164,74,.08),rgba(224,164,74,.02));border-color:#3a3020}
.cta-title{font-size:15px;font-weight:650;margin-bottom:3px}
.cta-sub{font-size:12.5px;color:var(--ink-3)}
.style-grid{max-width:1180px}

/* --- the inspector is a reserved column: it never covers the sheet --- */
.app{display:flex;overflow:hidden}
.rail{flex:0 0 224px}
.main{flex:1 1 auto;min-width:0;position:relative}
.inspector{
  flex:0 0 0;width:0;overflow:hidden;padding:0;
  background:var(--panel);border-left:1px solid transparent;
  transition:flex-basis .18s ease,width .18s ease,padding .18s ease;
}
.inspector.is-open{flex:0 0 292px;width:292px;padding:18px 16px;border-left-color:var(--line)}
.inspector > *{min-width:252px}
@media (max-width:1100px){
  .rail{flex:0 0 76px}
  .inspector.is-open{flex:0 0 248px;width:248px}
}

.build-sum{margin-top:auto;border-top:1px solid var(--line);padding-top:10px;display:flex;
  flex-direction:column;gap:5px;width:100%}
.bs-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3)}
.bs-row b{color:var(--ink-2);font-weight:550}
.stages{display:flex;flex-direction:column}

.tpl-menu{position:fixed;z-index:50;width:308px;background:#17191c;border:1px solid var(--line);
  border-radius:11px;padding:6px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.tpl-item{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:9px 10px;
  border-radius:8px}
.tpl-item:hover{background:#20242a}
.tpl-item b{font-size:13px;font-weight:600}
.tpl-item span{font-size:11.5px;color:var(--ink-3)}

/* ---------------- requirements ---------------- */
.brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px 24px;overflow:auto;
  max-width:1180px}
.brief-grid .card:first-child{grid-column:1/-1}
.fields.two{grid-template-columns:1fr 1fr}
.fields.three{grid-template-columns:1fr 1fr 1fr}
.hintline{margin-top:10px;font-size:11.5px;color:var(--ink-3);line-height:1.5}
input[readonly]{color:var(--ink-3);background:#16181b}

/* ---------------- chat bar ---------------- */
.chatbar{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;width:min(760px,calc(100% - 120px));
  display:flex;align-items:center;gap:8px;background:rgba(18,20,23,.95);
  border:1px solid #2e3238;border-radius:12px;padding:6px 6px 6px 12px;
  box-shadow:0 14px 40px rgba(0,0,0,.55);backdrop-filter:blur(12px);z-index:6}
.chatbar:focus-within{border-color:var(--accent)}
.chat-ico{color:var(--accent);font-size:15px;line-height:1}
#chatIn{flex:1;background:none;border:0;padding:8px 0;font-size:13px;color:var(--ink)}
#chatIn::placeholder{color:#6b675f}
#chatIn:focus{box-shadow:none}
.chat-send{width:30px;height:30px;border-radius:8px;background:#2a2d31;color:var(--ink-2);
  display:grid;place-items:center;font-size:14px}
.chat-send:hover{background:var(--accent);color:#241a0c}
.chatlog{position:absolute;left:50%;transform:translateX(-50%);bottom:66px;width:min(700px,calc(100% - 160px));
  display:flex;flex-direction:column;gap:5px;pointer-events:none;z-index:5}
.chat-msg{font-size:11.5px;padding:6px 10px;border-radius:9px;max-width:92%;
  background:rgba(24,26,30,.95);border:1px solid #2b2f34;color:var(--ink-2);
  animation:pop .18s ease-out}
.chat-msg.mine{background:rgba(224,164,74,.12);border-color:#4a3a20;color:#f0d3a0;align-self:flex-end}
.chat-msg.bad{border-color:#5b322b;color:#f0b9ab;background:rgba(60,28,24,.92)}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.undo-btn{position:absolute;right:56px;bottom:14px;z-index:6;width:30px;height:30px;border-radius:8px;
  background:rgba(20,22,25,.9);border:1px solid #2b2f34;color:var(--ink-2)}
.undo-btn:hover{color:var(--ink)}

/* import dialog */
.imp{position:fixed;z-index:60;width:330px;background:#17191c;border:1px solid var(--line);
  border-radius:12px;padding:14px;box-shadow:0 24px 70px rgba(0,0,0,.65)}
.imp h4{margin:0 0 4px;font-size:13.5px;font-weight:650}
.imp p{margin:0 0 10px;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.imp .row{display:flex;gap:8px;margin-top:10px}
.imp .row .btn{flex:1}