:root{
  --bar:48px; --drawer:280px; --ink:#0d1c28; --bar-bg:#0b1723; --panel:#f7f9fb; --line:#d6e0e8;
  --blue:#1778d4; --blue-soft:#eaf4ff; --muted:#718596; --canvas:#edf2f6; --white:#fff;
}
*{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#dbe3e9}
button{font:inherit}.app-shell{height:100dvh;display:grid;grid-template-columns:var(--drawer) minmax(0,1fr) var(--drawer);grid-template-rows:var(--bar) minmax(0,1fr) var(--bar);grid-template-areas:"top top top" "left work right" "bottom bottom bottom";background:#e7edf1}
.topbar{grid-area:top;background:var(--bar-bg);color:white;display:grid;grid-template-columns:var(--drawer) minmax(0,1fr) var(--drawer);align-items:center;padding:0 12px;border-bottom:1px solid #1f3545;z-index:20}.brand-zone,.top-actions,.context-nav{display:flex;align-items:center;gap:10px}.brand-zone{min-width:0}.brand-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(145deg,#2b98ff,#1260a8);display:grid;place-items:center;font-weight:900}.brand-copy{display:grid;line-height:1.05}.brand-copy strong{font-size:12px;letter-spacing:.08em}.brand-copy span{font-size:9px;color:#9bb0c2;margin-top:3px}.context-nav{justify-content:center;gap:4px}.nav-pill{border:0;background:transparent;color:#a9bdcd;padding:7px 12px;border-radius:7px;font-size:11px}.nav-pill.active{background:#1c3346;color:#fff}.top-actions{justify-content:flex-end}.icon-btn{width:30px;height:30px;border:0;border-radius:7px;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer}.icon-btn:hover{background:rgba(255,255,255,.08)}.user-chip{border:0;background:#162b3c;color:white;border-radius:18px;height:32px;padding:3px 10px 3px 4px;display:flex;align-items:center;gap:7px;font-size:10px}.user-chip span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#2687dd;font-size:9px}
.shell-drawer{background:var(--panel);min-height:0;border-color:var(--line);display:flex;flex-direction:column;overflow:hidden;z-index:10}.left-drawer{grid-area:left;border-right:1px solid var(--line)}.right-drawer{grid-area:right;border-left:1px solid var(--line)}.drawer-title{height:42px;min-height:42px;padding:0 11px 0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:.1em}.drawer-title .icon-btn{color:#506779}.project-card{margin:12px;border:1px solid #d8e2ea;background:white;border-radius:10px;padding:12px;display:grid;gap:3px;box-shadow:0 3px 12px rgba(20,40,55,.04)}.project-card small{font-size:8px;color:#7d91a0;letter-spacing:.08em}.project-card strong{font-size:12px}.project-card span{font-size:9px;color:#8295a3}.side-nav{overflow:auto;padding:2px 8px;display:grid;gap:2px}.side-nav button{height:39px;border:0;background:transparent;border-radius:7px;display:grid;grid-template-columns:26px minmax(0,1fr) 20px;align-items:center;text-align:left;color:#456072;padding:0 8px;font-size:10px}.side-nav button span{font-size:12px;color:#678091}.side-nav button b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-nav button em{font-style:normal;color:#9aabb6;font-size:8px;text-align:right}.side-nav button.active{background:var(--blue-soft);color:#0d5da9}.side-nav button.active span{color:#0d76cf}.drawer-bottom{margin-top:auto;border-top:1px solid var(--line);padding:9px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.drawer-bottom button{height:32px;border:1px solid var(--line);background:#fff;border-radius:7px;color:#526b7c;font-size:9px}
.workspace{grid-area:work;min-width:0;min-height:0;padding:12px;display:grid;place-items:center;overflow:hidden;background:#dfe7ec}.a3-stage{position:relative;width:min(100%,calc((100dvh - (2 * var(--bar)) - 24px) * 1.41421356));aspect-ratio:1.41421356/1;max-height:100%;background:#fff;border:1px solid #bfcbd4;box-shadow:0 10px 30px rgba(18,39,54,.12);display:grid;grid-template-rows:38px minmax(0,1fr) 42px;border-radius:4px;overflow:hidden}.stage-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 10px;border-bottom:1px solid #d7e0e7;background:#fbfcfd;font-size:9px}.stage-toolbar>div{display:flex;align-items:center;gap:7px}.stage-toolbar>div:nth-child(2){justify-content:center}.stage-toolbar>div:nth-child(3){justify-content:flex-end}.stage-toolbar small{color:#879aa8}.status-dot{width:7px;height:7px;border-radius:50%;background:#3ac775;display:inline-block}.segmented{background:#edf2f5;border-radius:7px;padding:2px}.segmented button,.tiny-btn{height:24px;border:0;background:transparent;border-radius:5px;font-size:8px;color:#637887;padding:0 9px}.segmented button.active{background:#fff;color:#156cba;box-shadow:0 1px 4px rgba(24,49,66,.13)}.tiny-btn{border:1px solid #d8e1e8;background:white;padding:0 7px}.canvas{position:relative;min-height:0;background:var(--canvas);padding:12px;overflow:hidden}.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(84,111,129,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(84,111,129,.08) 1px,transparent 1px);background-size:20px 20px}.drawing-frame{position:relative;width:100%;height:100%;background:#fff;border:1px solid #9eb0bd;box-shadow:0 4px 18px rgba(17,38,53,.08);overflow:hidden}.drawing-title{position:absolute;left:18px;top:15px;display:grid;gap:3px}.drawing-title span{font-size:7px;color:#7f929f;letter-spacing:.08em}.drawing-title b{font-size:10px}.model-ghost{position:absolute;left:15%;right:18%;top:18%;bottom:22%;transform:skewY(-2deg)}.beam,.column{position:absolute;background:linear-gradient(180deg,#c3d4e0,#97afbf);border:1px solid #718da0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}.beam{height:10%;border-radius:2px}.b1{width:72%;left:5%;top:20%;transform:rotate(7deg)}.b2{width:78%;left:15%;top:51%;transform:rotate(-7deg)}.b3{width:56%;left:20%;top:72%;transform:rotate(5deg)}.column{width:8%;height:74%;top:7%}.c1{left:18%;transform:rotate(-4deg)}.c2{right:17%;transform:rotate(3deg)}.node{position:absolute;width:14px;height:14px;border:3px solid #2f84c6;background:#fff;border-radius:50%}.n1{left:18%;top:22%}.n2{right:17%;top:23%}.n3{left:20%;bottom:19%}.n4{right:18%;bottom:20%}.callout{position:absolute;background:rgba(11,23,35,.92);color:#fff;border-radius:7px;padding:8px 10px;display:grid;gap:2px;box-shadow:0 4px 12px rgba(0,0,0,.15)}.callout b{font-size:8px;letter-spacing:.07em}.callout span{font-size:7px;color:#b8c9d5}.callout-a{left:6%;bottom:15%}.callout-b{right:6%;top:16%}.scale-note{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);font-size:7px;color:#6f8594;white-space:nowrap}.title-block{position:absolute;right:0;bottom:0;width:39%;height:14%;border-top:1px solid #9eb0bd;border-left:1px solid #9eb0bd;display:grid;grid-template-columns:2fr 2fr 1fr .6fr;background:white}.title-block>div{padding:6px;border-right:1px solid #c0ccd4;display:grid;align-content:center;gap:2px}.title-block small{font-size:6px;color:#7c8f9d}.title-block b{font-size:7px}.toolrail{display:flex;align-items:center;justify-content:center;gap:2px;border-top:1px solid #d7e0e7;background:#fbfcfd;padding:4px}.toolrail button{height:30px;min-width:62px;border:0;background:transparent;border-radius:6px;color:#617887;font-size:10px}.toolrail button span{font-size:8px;margin-left:4px}.toolrail button.active{background:#eaf4ff;color:#0c6fc2}
.tabs{height:38px;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);padding:0 8px}.tabs button{border:0;background:transparent;font-size:9px;color:#758a99;border-bottom:2px solid transparent}.tabs button.active{color:#0f6ebb;border-color:#0f7cd4}.panel{padding:12px 14px;border-bottom:1px solid var(--line)}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:9px}.panel-heading button{border:0;background:transparent;color:#738897}.badge{min-width:18px;height:18px;border-radius:9px;background:#e6f2fd;color:#0871c8;display:grid;place-items:center;font-size:8px}.selection{background:#fff;border:1px solid #d9e2e8;border-radius:8px;padding:9px;display:flex;gap:9px;align-items:center}.selection-icon{width:30px;height:30px;background:#eef5fa;border:1px solid #cedbe5;border-radius:6px;display:grid;place-items:center;font-size:9px;font-weight:700;color:#537084}.selection>div:last-child{display:grid;gap:2px}.selection strong{font-size:9px}.selection span{font-size:8px;color:#8295a2}.panel dl{display:grid;grid-template-columns:1fr 1.2fr;margin:0;font-size:9px;row-gap:8px}.panel dt{color:#7d909e}.panel dd{margin:0;font-weight:600;text-align:right}.status-chip{display:inline-block;padding:3px 7px;background:#e6f8ed;color:#188a49;border-radius:10px;font-size:7px}.panel label{height:29px;display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#587081}.panel input{accent-color:#1979cb}.right-actions{margin-top:auto;padding:10px;display:grid;grid-template-columns:1fr 1.35fr;gap:7px;border-top:1px solid var(--line)}.right-actions button{height:34px;border-radius:7px;font-size:9px}.secondary{border:1px solid #cedae3;background:#fff;color:#5b7180}.primary{border:1px solid #126fbd;background:#177acc;color:white}
.bottombar{grid-area:bottom;background:var(--bar-bg);color:#9eb4c5;display:grid;grid-template-columns:var(--drawer) minmax(0,1fr) var(--drawer);align-items:center;padding:0 14px;font-size:8px}.footer-brand{display:flex;align-items:baseline;gap:8px}.footer-brand b{color:white;font-size:10px;letter-spacing:.08em}.dimension-readout{display:flex;align-items:center;justify-content:center;gap:10px}.dimension-readout i{height:12px;width:1px;background:#314656}.dimension-readout b{color:#fff;font-weight:600}.system-status{display:flex;justify-content:flex-end;align-items:center;gap:6px;white-space:nowrap}
body.left-collapsed{--drawer-left:64px}.drawer-toggle{display:grid}
@media (max-width:1180px){:root{--drawer:220px}.brand-copy span,.footer-brand span,.dimension-readout span:nth-of-type(2),.dimension-readout i:nth-of-type(2){display:none}.side-nav button{grid-template-columns:24px minmax(0,1fr);}.side-nav button em{display:none}.context-nav .nav-pill:nth-child(4){display:none}.panel{padding:10px}.a3-stage{width:min(100%,calc((100dvh - 120px) * 1.41421356))}}
@media (max-width:920px){:root{--drawer:176px;--bar:44px}.brand-copy{display:none}.topbar{grid-template-columns:var(--drawer) minmax(0,1fr) var(--drawer)}.context-nav .nav-pill:nth-child(3){display:none}.user-chip b{display:none}.project-card{margin:8px;padding:9px}.project-card span{display:none}.side-nav{padding:2px 5px}.side-nav button{height:36px;padding:0 5px;font-size:9px}.drawer-bottom{grid-template-columns:1fr}.drawer-bottom button:nth-child(2){display:none}.tabs{padding:0 4px}.panel:nth-of-type(3){display:none}.dimension-readout{gap:5px}.dimension-readout span:nth-of-type(3),.dimension-readout i:nth-of-type(3){display:none}.workspace{padding:8px}.canvas{padding:8px}.toolrail button{min-width:48px}.toolrail button span{display:none}}
@media (max-width:760px) and (orientation:portrait){body::before{content:"Rotate tablet to landscape for the unified A3 workspace";position:fixed;inset:0;z-index:999;background:#0b1723;color:white;display:grid;place-items:center;text-align:center;padding:32px;font-size:16px;letter-spacing:.02em}.app-shell{filter:blur(4px)}}

/* ============================================================
   CORRECTED SHELL GEOMETRY — the center grid cell IS the A3 viewport.
   JS solves --bar / --drawer so all five regions close exactly to the
   browser width and height while viewportW / viewportH = sqrt(2).
   ============================================================ */
.app-shell{
  width:100vw;
  height:100dvh;
  grid-template-columns:var(--drawer) var(--viewport-w) var(--drawer);
  grid-template-rows:var(--bar) var(--viewport-h) var(--bar);
}
.workspace{
  padding:0 !important;
  width:var(--viewport-w);
  height:var(--viewport-h);
  position:relative;
  overflow:hidden;
  background:#edf2f6;
}
.a3-stage{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  border:0;
  border-radius:0;
  display:block;
  box-shadow:inset 0 0 0 1px #aebdc8;
  overflow:hidden;
}
.canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0 !important;
  z-index:1;
}
.drawing-frame{
  width:100%;
  height:100%;
  border:0;
  box-shadow:none;
}
.stage-toolbar{
  position:absolute;
  left:12px;
  right:12px;
  top:12px;
  height:38px;
  z-index:7;
  border:1px solid #d7e0e7;
  border-radius:7px;
  box-shadow:0 5px 18px rgba(17,38,53,.10);
}
.toolrail{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  height:42px;
  z-index:7;
  border:1px solid #d7e0e7;
  border-radius:8px;
  box-shadow:0 5px 18px rgba(17,38,53,.10);
  white-space:nowrap;
}
.viewport-dimension-tag{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:8;
  display:grid;
  gap:2px;
  padding:7px 9px;
  border-radius:6px;
  background:rgba(11,23,35,.88);
  color:#fff;
  pointer-events:none;
}
.viewport-dimension-tag b{font-size:9px;letter-spacing:.03em}
.viewport-dimension-tag span{font-size:6px;color:#b9cad6;letter-spacing:.06em}

/* Compact tablet mode: side regions remain part of the geometric frame,
   but full drawer content expands over the viewport rather than changing it. */
body.compact-shell .project-card,
body.compact-shell .left-drawer .side-nav b,
body.compact-shell .left-drawer .side-nav em,
body.compact-shell .left-drawer .drawer-bottom,
body.compact-shell .right-drawer .tabs,
body.compact-shell .right-drawer .panel,
body.compact-shell .right-drawer .right-actions{display:none}
body.compact-shell .drawer-title{padding:0;justify-content:center}
body.compact-shell .drawer-title>span{display:none}
body.compact-shell .left-drawer .side-nav{padding:8px 5px;display:grid;justify-items:stretch}
body.compact-shell .left-drawer .side-nav button{
  width:100%;height:38px;padding:0;display:grid;grid-template-columns:1fr;place-items:center
}
body.compact-shell .left-drawer .side-nav button span{font-size:12px}

body.compact-shell .shell-drawer.expanded{
  position:fixed;
  top:var(--bar);
  bottom:var(--bar);
  width:280px;
  z-index:80;
  box-shadow:0 16px 42px rgba(10,28,42,.24);
}
body.compact-shell .left-drawer.expanded{left:0;right:auto}
body.compact-shell .right-drawer.expanded{right:0;left:auto}
body.compact-shell .shell-drawer.expanded .drawer-title{
  padding:0 11px 0 16px;
  justify-content:space-between;
}
body.compact-shell .shell-drawer.expanded .drawer-title>span{display:inline}
body.compact-shell .left-drawer.expanded .project-card{display:grid}
body.compact-shell .left-drawer.expanded .side-nav{padding:2px 8px;display:grid}
body.compact-shell .left-drawer.expanded .side-nav button{
  width:auto;height:39px;padding:0 8px;
  display:grid;grid-template-columns:26px minmax(0,1fr) 20px;place-items:initial;align-items:center
}
body.compact-shell .left-drawer.expanded .side-nav b,
body.compact-shell .left-drawer.expanded .side-nav em{display:block}
body.compact-shell .left-drawer.expanded .drawer-bottom{display:grid}
body.compact-shell .right-drawer.expanded .tabs{display:grid}
body.compact-shell .right-drawer.expanded .panel{display:block}
body.compact-shell .right-drawer.expanded .right-actions{display:grid}

body.narrow-shell .topbar,
body.narrow-shell .bottombar{
  grid-template-columns:var(--drawer) var(--viewport-w) var(--drawer);
}
body.narrow-shell .brand-zone{justify-content:center}
body.narrow-shell .brand-mark,
body.narrow-shell .brand-copy,
body.narrow-shell .top-actions .icon-btn,
body.narrow-shell .footer-brand,
body.narrow-shell .system-status{display:none}
body.narrow-shell .context-nav{overflow:hidden}
body.narrow-shell .dimension-readout{font-size:7px;gap:5px}

@media (max-width:920px){
  .workspace{padding:0 !important}
  .canvas{padding:0 !important}
  .stage-toolbar{left:8px;right:8px;top:8px}
  .toolrail{bottom:8px}
}