/* STARSHIP BRIDGE / holographic terminal */
:root { color-scheme:dark; --phosphor:#8dff9a; --cyan:#50dfff; --edge:rgba(59,175,255,.65); }
* { box-sizing:border-box; }
body { margin:0; background:#010814; color:var(--phosphor); font:14px/1.5 Consolas,"Cascadia Mono",monospace; overflow:hidden; }
body::before,body::after { display:none !important; }
.starship { height:100vh; display:flex; flex-direction:column; background:linear-gradient(180deg,rgba(0,7,25,.22),rgba(0,3,15,.1) 70%,rgba(0,0,10,.8)),url("olegreen/cosmos.jpg") center center/cover no-repeat; }
.bridge-header { height:58px; flex-shrink:0; display:flex; justify-content:space-between; align-items:center; padding:0 2%; background:linear-gradient(#06152b,#010917e8); border-bottom:2px solid #1b7fc1; box-shadow:0 0 24px #0b78ba66; color:#70d6ff; font-size:11px; letter-spacing:2px; }
.bridge-header strong { color:#94ff9c; font-size:24px; text-shadow:0 0 15px #25ed6b88; }
.viewport { display:grid; grid-template-columns:minmax(190px,16%) minmax(0,1fr) minmax(190px,16%); gap:12px; flex:1; min-height:0; padding:14px 12px 0; }
.ship-side { align-self:start; background:linear-gradient(125deg,rgba(0,14,31,.93),rgba(0,7,20,.78)); border:1px solid var(--edge); box-shadow:inset 0 0 22px #0088ff15,0 0 12px #001e49aa; clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px); padding:18px 13px 22px; min-height:360px; }
.ship-side>div:not(.radar):not(.panel-heading):not(.tiny-note) { margin:7px 0; font-size:11px; }
.ship-side b { display:block; font-weight:500; color:#59ddff; font-size:11px; overflow-wrap:anywhere; }
.panel-heading { color:#5ce9ff; font-size:15px; font-weight:bold; letter-spacing:1px; border-bottom:1px solid #17639c; padding-bottom:7px; margin-bottom:14px; }
.spacer-heading { margin-top:24px; }
.tiny-note { font-size:9px; color:#69a4c6; margin-top:18px; }
.radar { width:min(150px,100%); aspect-ratio:1; margin:14px auto; border:1px solid #168bdb; border-radius:50%; background:repeating-radial-gradient(circle,#1585d433 0 1px,transparent 2px 27px),linear-gradient(90deg,transparent 49.7%,#1585d466 50%,transparent 50.3%),linear-gradient(transparent 49.7%,#1585d466 50%,transparent 50.3%); position:relative; overflow:hidden; }
.radar-line { position:absolute; inset:50% 50% 0 0; transform-origin:100% 0; background:linear-gradient(20deg,transparent,#1fbbff44); animation:radarSpin 12s linear infinite; }
.radar-dot { position:absolute; width:7px;height:7px;left:65%;top:33%;background:#6fffff;border-radius:50%;box-shadow:0 0 12px #6fffff; }
@keyframes radarSpin { to {transform:rotate(360deg)} }
.hologram-zone { display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:0; }
.holo-topline { align-self:stretch;display:flex;justify-content:space-between; color:#9ce9ff; font-size:10px; letter-spacing:1px; padding:0 18px 8px;text-shadow:0 0 8px #39baff; }
.hologram { position:relative; width:min(100%,980px); flex:1; min-height:0; max-height:calc(100vh - 210px); display:flex;flex-direction:column; padding:14px 22px 10px; border:2px solid #38baff; border-radius:24px 24px 10px 10px; background:linear-gradient(125deg,rgba(1,25,69,.84),rgba(0,35,91,.72) 50%,rgba(0,15,46,.9)); box-shadow:0 0 15px #22b7ff,0 0 60px #0286ff55,inset 0 0 55px #147aff55; backdrop-filter:blur(8px); overflow:hidden; }
.hologram::before { content:"";position:absolute;inset:5px;border:1px solid #7bdfff44;border-radius:17px;pointer-events:none; }
.hologram::after { content:"";position:absolute;inset:0; background:repeating-linear-gradient(0deg,transparent 0 5px,#5ebfff08 6px);pointer-events:none; }
.holo-bracket { position:absolute;width:55px;height:24px;border:4px solid #8bf7ff;filter:drop-shadow(0 0 8px #30bfff);z-index:2;pointer-events:none; }
.tl {top:0;left:0;border-right:0;border-bottom:0;border-radius:20px 0 0 0}
.tr {top:0;right:0;border-left:0;border-bottom:0;border-radius:0 20px 0 0}
.bl {bottom:0;left:0;border-right:0;border-top:0}
.br {bottom:0;right:0;border-left:0;border-top:0}
.holo-upper { height:62px;display:flex;justify-content:space-around;align-items:center;flex-shrink:0;opacity:.85; }
.dial {border:2px solid #51dfff;border-radius:50%;box-shadow:0 0 13px #1fc6ff,inset 0 0 13px #2cb9ff;background:repeating-radial-gradient(circle,#44dfff55 0 2px,transparent 3px 12px); }
.dial-small {width:40px;height:40px}
.dial-center {width:57px;height:57px;animation:radarSpin 20s linear infinite}
.holo-title { color:#8cecff;text-align:center;font-size:12px;letter-spacing:3px;border-bottom:1px solid #2ab6ff88;padding-bottom:9px;margin-bottom:9px;flex-shrink:0; }
.terminal-output { flex:1;min-height:0;overflow:auto;padding:8px 6px;color:#aaffb4;font-size:13px;line-height:1.5;scrollbar-color:#24b5e9 transparent; }
.terminal-output .line { margin-bottom:7px;white-space:pre-wrap;overflow-wrap:anywhere;text-shadow:none; }
.terminal-output .line.system {color:#8fe8ff}
.terminal-output .line.user {color:#b8ffbd}
.terminal-output .line.user::before {content:"> ";color:#69ff8a}
.terminal-output .line.assistant {color:#ecfff0}
.terminal-output .line.error {color:#ff8888}
.terminal-input-row { display:flex;align-items:center;gap:10px;flex-shrink:0;padding:10px 8px;margin-top:8px;background:#001325bb;border:1px solid #32bfff;border-radius:5px;box-shadow:inset 0 0 15px #0a6da744; }
.terminal-input-row .prompt {color:#80ff9b;white-space:nowrap}
.terminal-input-row input {flex:1;min-width:0;color:#d1ffe0;background:transparent;border:0;outline:0;font:14px Consolas,monospace;animation:none;text-shadow:none; }
.terminal-input-row input::placeholder {color:#80c3d1}
.holo-footer {display:flex;justify-content:space-between;gap:10px;flex-shrink:0;color:#79dfff;font-size:10px;padding-top:8px;overflow:hidden; }
.holo-footer span {white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.projector {height:82px;width:min(350px,60%);position:relative;flex-shrink:0;display:flex;align-items:end;justify-content:center; }
.projector-glow {position:absolute;top:-10px;left:16%;width:68%;height:65px;background:linear-gradient(#2bd9ff55,transparent);filter:blur(18px);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.projector-base {width:90%;height:42px;border-radius:50%;background:radial-gradient(ellipse,#a3fbff 0,#24b9fa 30%,#083e88 56%,#020e27 75%);border:3px solid #35caff;box-shadow:0 0 26px #12b5ff,inset 0 0 20px #8deeff}
.bridge-footer {height:34px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;background:#020b19ee;border-top:1px solid #1b80c4;color:#74b5d4;font-size:10px;letter-spacing:1px;flex-shrink:0}
.code-viewer {background:#001020;max-height:30%;overflow:auto;border:1px solid #3bb9ff;flex-shrink:0}
.code-viewer.hidden {display:none}
.code-viewer-titlebar {display:flex;justify-content:space-between}
.code-viewer-tabs {display:flex;gap:10px}
.code-viewer-close {background:#001d39;color:#9af;border:0;cursor:pointer}
.code-viewer-body {display:flex;overflow:auto}
.code-line-numbers {color:#6cb;white-space:pre}
.code-pre {overflow:auto;margin:0;color:#d9f}
@media(max-width:1050px){.viewport{grid-template-columns:170px minmax(0,1fr)}.right-side{display:none}.ship-side{padding:12px 9px}.hologram{padding:10px 14px}}
@media(max-width:680px){.viewport{grid-template-columns:1fr;padding:7px}.ship-side{display:none}.bridge-header span{display:none}.bridge-header{justify-content:center}.holo-topline{display:none}.hologram{max-height:calc(100vh - 145px)}.projector{height:45px}.projector-base{height:25px}.terminal-output{font-size:12px}}