:root { color-scheme: dark; font: 14px/1.45 "Segoe UI", system-ui, sans-serif; background: #060c13; color: #eaf3fa; --muted: #98aabd; --cyan: #8ad3ef; --line: #8eb9d226; --panel: #0a141f; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse at 48% 42%, #102235 0, #08111b 46%, #050a10 100%); }
button, input { font: inherit; }
.shell { width: min(1800px, 100%); min-height: 100vh; margin: 0 auto; padding: 20px clamp(12px,2vw,28px) 12px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:0 4px 14px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(1.45rem,2.5vw,2.2rem); letter-spacing:.015em; }
.eyebrow { color:var(--cyan); font-size:.65rem; letter-spacing:.18em; font-weight:800; margin-bottom:4px; }
.topbar-actions { display:flex; gap:10px; align-items:center; }
.search { display:flex; align-items:center; gap:8px; min-width:min(360px,42vw); padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:#09131ddd; color:var(--muted); }
.search input { width:100%; border:0; outline:0; background:transparent; color:#fff; }
.search:focus-within { border-color:#8ad3ef88; box-shadow:0 0 0 3px #8ad3ef14; }
.icon-button { width:38px;height:38px;border:1px solid #8ad3ef55;border-radius:10px;background:#112232;color:var(--cyan);font-size:1.1rem;cursor:pointer; }
.layers { display:flex; gap:9px; align-items:center; flex-wrap:wrap; padding:10px 12px; margin-bottom:12px; background:#08121ddd; border:1px solid var(--line); border-radius:12px; }
.layers label { display:flex; align-items:center; gap:7px; color:#c9d7e3; font-size:.78rem; padding:4px 8px; cursor:pointer; }
.layers input { accent-color:#8ad3ef; }
.layers .motion-toggle { margin-left:auto; border-left:1px solid var(--line); padding-left:15px; }
.dot { width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--layer-color,#8ad3ef);box-shadow:0 0 8px color-mix(in srgb,var(--layer-color,#8ad3ef) 55%,transparent); }.orbit-icon{color:var(--cyan);font-size:1.15rem;line-height:0}
.workspace { display:grid; grid-template-columns:minmax(185px, .72fr) minmax(420px, 2.35fr) minmax(260px, 1fr); gap:12px; height:min(76vh,800px); min-height:560px; }
.panel { min-width:0; border:1px solid var(--line); border-radius:14px; background:linear-gradient(160deg,#0d1926f2,#08111bf2); box-shadow:0 20px 60px #0004; }
.region-panel,.detail-panel { padding:15px; display:flex; flex-direction:column; overflow:hidden; }
.panel-heading,.map-head,.list-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; }
h2 { font-size:1rem; }.count-pill { min-width:26px; padding:2px 8px; border-radius:99px; background:#8ad3ef18; color:var(--cyan); text-align:center; font-size:.7rem; }
.body-list { display:grid; gap:4px; margin-top:14px; overflow:auto; min-height:0; }
.body-row { display:flex; align-items:center; gap:8px; width:100%; min-width:0; padding:7px 8px; border:1px solid transparent; border-radius:8px; background:transparent; color:#c6d2df; cursor:pointer; text-align:left; font:inherit; font-size:.75rem; }
.body-row:hover,.body-row.is-selected { border-color:#8ad3ef35; background:#8ad3ef12; color:#fff; }
.body-row>span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.body-row small { margin-left:auto; color:var(--muted); font-size:.61rem; }
.body-mark { width:13px; height:13px; flex:0 0 13px; border:1px solid #a6d7eb; border-radius:50%; background:radial-gradient(circle at 35% 35%,#bcecff99,#3d778f55 58%,#07111b 75%); }
.body-mark.flat { border-radius:40% 58% 48% 52%; background:#b9b0a577; border-color:#d0d9de99; transform:rotate(-18deg); }
.body-mark.textured { box-shadow:0 0 8px #8ad3ef22; }
.body-button { display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:1px solid transparent; border-radius:8px; color:#c6d2df; background:transparent; padding:7px 8px; cursor:pointer; font-size:.78rem; }
.body-button:hover,.body-button.active { border-color:#8ad3ef35; background:#8ad3ef12; color:#fff; }
.body-glyph { width:17px;height:17px; flex:0 0 17px; border:1px solid #8ad3ef91; border-radius:50%; background:radial-gradient(circle at 35% 35%,#bcecff88,#3d778f55 58%,#07111b 75%); }
.body-glyph.gas { background:repeating-linear-gradient(0deg,#bd9d6655 0 3px,#142636 3px 5px); border-color:#e3c386aa; }
.body-glyph.flat { border-radius:40% 58% 48% 52%; background:#b9b0a577; border-color:#d0d9de99; transform:rotate(-18deg); }
.precision-key { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:12px; color:var(--muted); font-size:.67rem; border-top:1px solid var(--line); }.precision-dot{width:7px;height:7px;border-radius:50%;background:#f1c978}
.map-panel { display:flex; flex-direction:column; overflow:hidden; }.map-head { padding:16px 18px 8px; }.map-actions { display:flex; align-items:center; gap:10px; }.view-nav { display:flex; padding:3px; gap:2px; border:1px solid #80c8e333; border-radius:9px; background:#06111c; }.view-nav button { padding:5px 9px; border:1px solid transparent; border-radius:6px; color:#9fb4c5; background:transparent; font-size:.65rem; cursor:pointer; transition:all .18s ease; }.view-nav button:hover:not(:disabled) { color:#e7f7ff; background:#8ad3ef12; }.view-nav button.is-active { color:#d9f7ff; border-color:#75dfff55; background:linear-gradient(180deg,#60cce922,#3185a522); box-shadow:0 0 12px #62d8ff17; }.view-nav button:disabled { opacity:.35; cursor:not-allowed; }.schematic-badge { padding:4px 8px; border-radius:99px; color:#f1c978; border:1px solid #f1c97855; font-size:.59rem; letter-spacing:.14em; white-space:nowrap; }
.canvas-wrap { position:relative; flex:1; min-height:420px; overflow:hidden; background:radial-gradient(ellipse at center,#081625 0,#040a10 68%); }
#map { display:block; width:100%; height:100%; min-height:420px; cursor:grab; }#map:active{cursor:grabbing}
.canvas-hint { position:absolute; right:14px; bottom:12px; color:#8297a9; font-size:.65rem; pointer-events:none; text-align:right; }
.map-footer { display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:.68rem; }.speed-control { display:flex;align-items:center;gap:8px; }.speed-control input{width:88px;accent-color:var(--cyan)}.speed-control span{color:#eaf3fa;min-width:27px}
.detail-content { flex:2 1 0; min-height:0; max-height:none; margin-top:14px; padding:11px; overflow:auto; border:1px solid var(--line); border-radius:10px; background:#06101a; scrollbar-color:#5f9fb7 #07111c; }
.type-tag { color:var(--cyan); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; }
.detail-grid { display:grid; grid-template-columns:auto 1fr; gap:8px 12px; margin-top:12px; font-size:.72rem; }
.detail-grid dt { color:var(--muted); }.detail-grid dd { margin:0; color:#d8e3eb; text-align:right; }
.detail-content h3 { font-size:1.05rem; margin-bottom:2px; }.detail-content .kind { color:var(--cyan);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em }.detail-stats { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }.stat { padding:7px;background:#0b1a27;border-radius:7px; }.stat b {display:block;color:var(--muted);font-size:.57rem;text-transform:uppercase;letter-spacing:.09em}.stat span{font-size:.75rem}.focus-button { margin-top:10px;width:100%;padding:7px;border-radius:7px;border:1px solid #8ad3ef44;background:#8ad3ef11;color:var(--cyan);cursor:pointer; }
.detail-description { margin-top:14px; padding-top:11px; border-top:1px solid var(--line); }.detail-description h3 { color:#bfe9f8; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }.detail-description p { margin-top:6px; color:#d8e3eb; font-size:.72rem; line-height:1.55; white-space:pre-line; }
.object-list-wrap { display:flex; flex:1 1 0; flex-direction:column; min-height:0; margin-top:16px; }.list-heading { margin-bottom:8px; }.list-heading h3 { font-size:.76rem; }.record-list { display:grid; align-content:start; gap:11px; overflow:auto; min-height:0; }.record-group { display:grid; gap:5px; }.record-group-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:2px 2px 1px; padding-bottom:5px; border-bottom:1px solid #8ad3ef24; color:#bfe9f8; font-size:.63rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.record-group-heading small { color:var(--muted); font-size:.6rem; }.record-list-note { margin:0; padding:6px 3px 2px; color:var(--muted); font-size:.62rem; line-height:1.4; }.record-item { display:flex;gap:8px;align-items:start;width:100%;text-align:left;padding:7px 8px;border:1px solid transparent;border-radius:8px;background:#ffffff05;color:#d8e3eb;cursor:pointer; }.record-item:hover{background:#8ad3ef0e;border-color:#8ad3ef2a}.record-type {flex:0 0 6px;width:6px;height:6px;margin-top:5px;border-radius:50%}.record-copy{min-width:0}.record-name{display:block;font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.record-meta{display:block;color:var(--muted);font-size:.61rem}.muted{color:var(--muted)}.small{font-size:.66rem}
.record-card { position:relative; display:flex; align-items:center; gap:8px; width:100%; min-height:48px; overflow:hidden; padding:7px 8px; border:1px solid color-mix(in srgb,var(--faction-color) 36%,transparent); border-radius:8px; background:linear-gradient(105deg,color-mix(in srgb,var(--faction-color) 8%,#07121e),#091521 62%); color:#d8e3eb; text-align:left; cursor:pointer; box-shadow:inset 0 0 18px color-mix(in srgb,var(--faction-color) 5%,transparent); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.record-card:hover,.record-card:focus-visible,.record-card.is-selected { transform:translateY(-1px); outline:none; border-color:color-mix(in srgb,var(--faction-color) 82%,white); box-shadow:0 0 16px color-mix(in srgb,var(--faction-color) 22%,transparent),inset 0 0 20px color-mix(in srgb,var(--faction-color) 9%,transparent); }
.record-card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; background:repeating-linear-gradient(180deg,transparent 0 5px,color-mix(in srgb,var(--faction-color) 13%,transparent) 6px,transparent 7px); }
.record-card>* { min-width:0; position:relative; z-index:1; }.record-card .record-copy { flex:1; }.record-card strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; }.record-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:.61rem; }.record-card .faction-label { color:var(--faction-color); }
.back-to-body { margin-top:10px; padding:6px 9px; border:1px solid #68c8e555; border-radius:6px; background:#0b1b28; color:#bcecff; font:inherit; font-size:.68rem; cursor:pointer; }
.holo-object-icon { position:relative; z-index:1; display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border:1px solid color-mix(in srgb,var(--faction-color) 55%,transparent); border-radius:7px; background:color-mix(in srgb,var(--faction-color) 8%,#07121e); box-shadow:0 0 12px color-mix(in srgb,var(--faction-color) 34%,transparent),inset 0 0 12px color-mix(in srgb,var(--faction-color) 18%,transparent); animation:holo-pulse 3.6s ease-in-out infinite; }
.holo-object-icon img { width:21px; height:21px; object-fit:contain; filter:brightness(0) saturate(100%) invert(83%) sepia(30%) saturate(1000%) hue-rotate(157deg) drop-shadow(0 0 4px var(--faction-color)); }
.faction-logo-wrap { position:relative; z-index:1; display:grid; place-items:center; flex:0 0 29px; width:29px; height:29px; margin-left:auto; overflow:hidden; border:1px solid color-mix(in srgb,var(--faction-color) 48%,transparent); border-radius:50%; background:#05101bbd; box-shadow:0 0 12px color-mix(in srgb,var(--faction-color) 36%,transparent); }
.faction-logo { max-width:22px; max-height:22px; object-fit:contain; filter:drop-shadow(0 0 4px var(--faction-color)); }.faction-monogram { color:var(--faction-color); font-size:.75rem; font-weight:800; text-shadow:0 0 8px var(--faction-color); }
.habitat-image-section { margin-bottom:12px; }.habitat-image-section__label { margin-bottom:7px; color:var(--muted); font-size:.6rem; font-weight:800; letter-spacing:.13em; }.habitat-image-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:7px; }.habitat-image-thumb { display:block; width:100%; padding:0; overflow:hidden; border:1px solid #8ad3ef44; border-radius:8px; background:#040a10; cursor:zoom-in; }.habitat-image-thumb:hover,.habitat-image-thumb:focus-visible { outline:2px solid #8ad3efaa; outline-offset:2px; }.habitat-image-thumb img { display:block; width:100%; max-height:112px; object-fit:cover; transition:transform .2s ease; }.habitat-image-thumb:hover img { transform:scale(1.04); }.habitat-image-thumb span { display:block; padding:5px 7px; overflow:hidden; color:#c7d9e5; font-size:.59rem; text-overflow:ellipsis; white-space:nowrap; }
.habitat-image-dialog { width:min(96vw,1800px); max-width:96vw; max-height:96dvh; padding:14px; overflow:hidden; border:1px solid #8ad3ef66; border-radius:14px; color:#eaf3fa; background:linear-gradient(155deg,#0b1724f5,#03070df7); box-shadow:0 24px 100px #000b; }.habitat-image-dialog::backdrop { background:rgba(0,5,11,.88); backdrop-filter:blur(8px); }.habitat-image-dialog__header,.habitat-image-dialog__footer { display:flex; align-items:center; justify-content:space-between; gap:16px; }.habitat-image-dialog__header { padding:2px 2px 10px; }.habitat-image-dialog__header h2 { font-size:1rem; }.habitat-image-dialog__stage { display:grid; place-items:center; width:100%; height:min(78dvh,calc(96dvh - 116px)); min-height:160px; overflow:hidden; background:#02060c; border:1px solid #8eb9d226; border-radius:9px; }.habitat-image-dialog__stage img { display:block; max-width:100%; max-height:100%; object-fit:contain; }.habitat-image-dialog__footer { min-height:44px; padding:8px 2px 0; color:#a9bdcc; font-size:.72rem; }.habitat-image-dialog__nav { display:flex; align-items:center; gap:10px; }.habitat-image-dialog__nav .icon-button { width:32px;height:32px; }.habitat-image-dialog__nav [disabled] { opacity:.35;cursor:default; }
@keyframes holo-pulse { 0%,100% { opacity:.82; box-shadow:0 0 8px color-mix(in srgb,var(--faction-color) 22%,transparent),inset 0 0 8px color-mix(in srgb,var(--faction-color) 12%,transparent); } 50% { opacity:1; box-shadow:0 0 17px color-mix(in srgb,var(--faction-color) 48%,transparent),inset 0 0 13px color-mix(in srgb,var(--faction-color) 24%,transparent); } }
:root:fullscreen { height:100%; overflow:hidden; background:#060c13; }:root:fullscreen body { width:100%;height:100%;overflow:hidden; }.shell:fullscreen { width:100vw;height:100vh;min-height:0;padding:12px clamp(12px,2vw,28px);display:flex;flex-direction:column; }.shell:fullscreen .workspace { flex:1;min-height:0;height:auto; }.shell:fullscreen .canvas-wrap,.shell:fullscreen #map { min-height:0; }.shell:fullscreen .footer { flex:0 0 auto; }
.footer { display:flex;justify-content:space-between;gap:12px;padding:9px 4px 0;color:#6f8294;font-size:.63rem; }
@media(max-width:1100px){.workspace{height:auto;min-height:0;grid-template-columns:minmax(160px,.65fr) minmax(400px,2fr);grid-template-rows:minmax(560px,76vh) auto}.map-panel{min-height:560px}.region-panel{max-height:560px}.detail-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 2fr;gap:16px}.detail-panel>.panel-heading{grid-column:1/-1}.detail-content{max-height:300px;margin-top:0}.object-list-wrap{margin-top:0;max-height:300px}}
@media(max-width:720px){.shell{padding:12px 8px}.topbar{align-items:flex-start;flex-direction:column}.topbar-actions{width:100%}.search{flex:1;min-width:0}.layers{gap:2px}.layers label{font-size:.68rem;padding:4px}.layers .motion-toggle{margin-left:0;border-left:0;padding-left:8px}.workspace{display:flex;flex-direction:column;height:auto;min-height:0}.region-panel{max-height:230px}.body-list{grid-template-columns:repeat(3,minmax(0,1fr))}.body-button{font-size:.67rem;padding:5px}.precision-key{margin-top:8px}.map-panel{min-height:520px}.canvas-wrap{min-height:420px}.detail-panel{display:flex}.object-list-wrap{max-height:280px}.map-footer{align-items:flex-start;flex-direction:column}.footer{flex-direction:column}}