.app-shell { display:grid; grid-template-columns:var(--sidebar-width,228px) minmax(0,1fr); min-height:100vh; }.sidebar { position:relative; display:flex; flex-direction:column; gap:22px; padding:22px 12px 16px; background:#18212b; color:#ecf1f6; }.sidebar .brand { padding:0 12px; }.nav-group { display:grid; gap:3px; }.nav-separator { height:1px; margin:8px 12px; background:rgba(255,255,255,.12); }.sidebar-footer { margin-top:auto; }.nav-link { display:flex; align-items:center; gap:12px; width:100%; min-height:40px; padding:0 12px; border:0; border-radius:7px; background:transparent; color:inherit; text-align:left; }.nav-link:hover,.nav-link.active { background:#303b47; color:#fff; }.main-area { display:grid; grid-template-rows:78px minmax(0,1fr); min-width:0; }.toolbar { display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line); background:#fff; }.workspace { position:relative; min-height:0; background:#dce8ed; }.map-canvas { position:absolute; inset:0; overflow:hidden; background:#d9e5e9; }.map-canvas > div { height:100%; }.map-fallback { position:relative; height:100%; overflow:hidden; background:#dfeaec; isolation:isolate; }.map-fallback::before { content:""; position:absolute; inset:-20%; background:repeating-linear-gradient(20deg,transparent 0 39px,rgba(255,255,255,.73) 40px 43px,transparent 44px 79px),repeating-linear-gradient(108deg,transparent 0 59px,rgba(255,255,255,.65) 60px 64px,transparent 65px 116px); transform:rotate(-6deg); }.map-fallback::after { content:""; position:absolute; top:-10%; left:44%; width:18%; height:120%; transform:rotate(16deg); background:rgba(160,205,227,.75); border:6px solid rgba(255,255,255,.5); }.map-label { position:absolute; z-index:1; letter-spacing:.13em; font-size:18px; font-weight:700; color:rgba(24,33,43,.55); }.map-controls { position:absolute; z-index:5; right:calc(370px + 22px); bottom:22px; display:grid; gap:8px; }.saved-panel { position:absolute; z-index:10; top:0; right:0; bottom:0; width:360px; display:grid; grid-template-rows:auto minmax(0,1fr); background:#fff; border-left:1px solid var(--line); }.drawer { position:absolute; z-index:15; top:22px; right:calc(360px + 22px); width:360px; max-height:calc(100% - 44px); overflow:auto; border-radius:12px; background:#fff; box-shadow:var(--shadow); }.drawer[hidden],.saved-panel.is-hidden { display:none; }.toast-region { position:fixed; z-index:100; right:22px; bottom:22px; display:grid; gap:8px; }.modal-layer { position:fixed; z-index:80; inset:0; display:grid; place-items:center; padding:20px; background:rgba(24,33,43,.45); }.modal-layer[hidden] { display:none; }.mobile-nav { display:none; }
.public-page { min-height:100vh; padding:26px; background:var(--canvas); }.public-header { display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:0 auto 20px; }.public-hero { max-width:1180px; margin:auto; padding:40px; border-radius:14px; background:#18212b; color:#fff; }.public-hero p { margin-top:8px; color:#becad5; }.public-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; max-width:1180px; height:620px; margin:20px auto 0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; }