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

:root {
    --ink: #eef5f2;
    --muted: #81949f;
    --quiet: #536b78;
    --bg: #09121b;
    --panel: #0d1a25;
    --panel-raised: #112332;
    --line: #203646;
    --mint: #60e6c4;
    --mint-dim: #277a6c;
    --amber: #ffc875;
    --blue: #7fb6dc;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body { font-family: 'Space Grotesk', system-ui, sans-serif; }
button { font: inherit; }

.builder-shell { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(circle at 80% 0%, #122638 0, transparent 33rem), var(--bg); }
.topbar { height: 78px; padding: 0 30px; display: flex; align-items: center; gap: 42px; border-bottom: 1px solid var(--line); background: rgba(7, 15, 23, .82); }
.brand-lockup { display: flex; align-items: center; gap: 13px; min-width: 220px; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--mint); color: var(--mint); font-weight: 700; font-size: 20px; }
h1, h2, h3, p { margin: 0; }
.brand-lockup h1 { font-size: 19px; letter-spacing: -.03em; }
.eyebrow, .context-label, .revision, dt { color: var(--quiet); font: 500 10px/1.2 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.topbar-context { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.origin-badge, .read-only-badge { padding: 5px 8px; border: 1px solid #406558; color: var(--mint); background: #103229; font: 500 9px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.revision { margin-left: auto; }
.logout-form { margin: 0; }
.logout-button { padding: 7px 10px; border: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; font: 500 9px 'DM Mono', monospace; letter-spacing: .08em; }
.logout-button:hover { border-color: var(--mint-dim); color: var(--mint); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0%, #122638 0, transparent 36rem), var(--bg); }
.login-card { width: min(420px, 100%); padding: 34px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.login-card h1 { margin: 8px 0 6px; }
.login-copy { margin-bottom: 24px; color: var(--muted); font-size: 13px; }
.login-card label { display: block; margin-top: 14px; color: var(--muted); font: 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.login-card input { width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid var(--line); outline: none; color: var(--ink); background: #091722; font: 14px 'DM Mono', monospace; }
.login-card input:focus { border-color: var(--mint-dim); }
.login-button { width: 100%; margin-top: 22px; padding: 12px; border: 1px solid var(--mint); color: #06130f; background: var(--mint); cursor: pointer; font-weight: 700; }
.login-error { margin-top: 14px; color: #ff9bad; font-size: 13px; }
.workspace-grid { flex: 1; display: grid; grid-template-columns: minmax(370px, .93fr) minmax(510px, 1.42fr) minmax(260px, .65fr); gap: 14px; padding: 14px; min-height: 0; }
.panel { min-width: 0; border: 1px solid var(--line); background: rgba(13, 26, 37, .88); box-shadow: 0 18px 40px rgba(0,0,0,.13); }
.panel-heading { min-height: 70px; padding: 18px 18px 13px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin-top: 6px; font-size: 21px; font-weight: 500; letter-spacing: -.04em; }
.count-pill { color: var(--muted); font: 11px 'DM Mono', monospace; }
.canvas-frame { margin: 14px; border: 1px solid #1d3545; background: #0a1722; position: relative; }
.canvas-label { position: absolute; z-index: 1; top: 12px; left: 13px; color: var(--muted); font: 10px 'DM Mono', monospace; letter-spacing: .08em; }
.legend-swatch { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; }
.macro-swatch { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.local-swatch { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.spatial-canvas { display: block; width: 100%; user-select: none; }
.macro-canvas { aspect-ratio: 860 / 480; cursor: grab; }
.macro-canvas:active { cursor: grabbing; }
.local-canvas { aspect-ratio: 760 / 500; }
.map-label { fill: #456072; font: 10px 'DM Mono', monospace; letter-spacing: .1em; }
.canvas-hint { fill: #476474; font: 9px 'DM Mono', monospace; letter-spacing: .05em; }
.macro-site { cursor: pointer; }
.site-halo { fill: rgba(96,230,196,.08); stroke: rgba(96,230,196,.23); stroke-width: 1; }
.macro-site.selected .site-halo, .macro-site:hover .site-halo { fill: rgba(96,230,196,.18); stroke: var(--mint); }
.site-node { fill: #123d3e; stroke: var(--mint); stroke-width: 2; }
.site-core { fill: var(--mint); }
.site-name, .site-coord { pointer-events: none; }
.site-name { fill: var(--ink); font-size: 13px; font-weight: 600; }
.site-coord { fill: var(--muted); font: 9px 'DM Mono', monospace; }
.site-list { padding: 6px 14px 15px; }
.site-list > .eyebrow { display: block; padding: 12px 5px 7px; }
.site-row { width: 100%; padding: 12px 7px; display: flex; align-items: center; gap: 10px; color: var(--ink); border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; }
.site-row:hover, .site-row.active { border-color: #305b5c; background: rgba(38, 91, 86, .18); }
.site-status { width: 6px; height: 6px; border-radius: 50%; background: var(--mint-dim); }
.site-row.active .site-status { background: var(--mint); box-shadow: 0 0 9px var(--mint); }
.site-row strong, .site-row small { display: block; }
.site-row strong { font-size: 13px; font-weight: 500; }
.site-row small { margin-top: 2px; color: var(--muted); font: 10px 'DM Mono', monospace; }
.row-arrow { margin-left: auto; color: var(--quiet); }
.local-panel { display: flex; flex-direction: column; }
.local-heading { min-height: 70px; }
.local-meta { display: flex; gap: 13px; color: var(--muted); font: 10px 'DM Mono', monospace; text-align: right; }
.local-frame { flex: 1; margin-top: 16px; display: flex; align-items: center; }
.connection-line { stroke: #547489; stroke-width: 2; stroke-dasharray: 5 4; opacity: .9; }
.location-node { cursor: grab; }
.location-node:active { cursor: grabbing; }
.location-node rect { fill: #102638; stroke: #36546a; stroke-width: 1; }
.location-node:hover rect, .location-node.selected rect { fill: #153443; stroke: var(--amber); stroke-width: 1.5; }
.location-dot { fill: #183d4c; stroke: var(--amber); stroke-width: 1.5; }
.location-name { fill: var(--ink); font-size: 13px; font-weight: 600; }
.location-key { fill: #7c96a3; font: 9px 'DM Mono', monospace; }
.inspector-content { height: 100%; }
.inspector-heading { align-items: center; }
.inspector-empty { margin: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.inspector-section { padding: 18px; border-bottom: 1px solid var(--line); }
.inspector-section h3 { margin: 8px 0 16px; color: var(--ink); font-size: 16px; font-weight: 500; }
dl { display: grid; grid-template-columns: 1fr 1.4fr; gap: 9px 10px; margin: 0; }
dd { margin: 0; overflow: hidden; color: #bdd0d5; font: 10px 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.muted, .projection-note p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.selected-detail { background: rgba(255,200,117,.04); border-left: 2px solid var(--amber); }
.projection-note { border-bottom: 0; }
.statusbar { min-height: 35px; padding: 0 22px; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--line); color: var(--muted); font: 10px 'DM Mono', monospace; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.status-divider { width: 1px; height: 13px; background: var(--line); }
.status-spacer { flex: 1; }
.hint { color: var(--quiet); }
.loading-state, .empty-state { padding: 80px; color: var(--muted); }
.loading-state h1 { margin: 10px 0; color: var(--ink); font-size: 28px; }
.empty-state { flex: 1; display: grid; place-content: center; text-align: center; }

@media (max-width: 1180px) {
    .workspace-grid { grid-template-columns: 1fr 1.4fr; }
    .inspector-panel { grid-column: 1 / -1; }
    .inspector-content { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
    .inspector-heading { border-bottom: 0; }
}

@media (max-width: 820px) {
    .topbar { padding: 0 16px; gap: 14px; }
    .topbar-context, .revision, .hint { display: none; }
    .workspace-grid { display: block; padding: 8px; }
    .panel { margin-bottom: 8px; }
    .statusbar { padding: 0 12px; }
}

#blazor-error-ui { background: #551d2b; bottom: 0; box-shadow: 0 -1px 3px rgba(0,0,0,.2); color: #fff; display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }