:root {
  --bg-dark: #07090e;
  --panel-bg: rgba(13,17,27,.78);
  --panel-border: rgba(255,255,255,.08);
  --neon-cyan: #00f0ff;
  --neon-red: #ff0055;
  --neon-green: #39ff14;
  --neon-amber: #ffc400;
  --text-bright: #f0f6fc;
  --text-muted: #8b949e;
  --glow-cyan: 0 0 15px rgba(0,240,255,.4);
  --font-logo: 'Orbitron', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--bg-dark);color:var(--text-bright);font-family:var(--font-mono)}
body.dragging{user-select:none;cursor:grabbing}

#stars-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;background:#05060c;pointer-events:none}
#vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 35%,transparent 50%,rgba(2,6,14,.62) 100%)}

/* Boot */
.boot-screen{position:fixed;inset:0;background:#05070a;z-index:1000;display:flex;flex-direction:column;justify-content:space-between;padding:40px;font-family:var(--font-mono)}
.boot-log{flex-grow:1;max-width:800px;margin:0 auto;width:100%;overflow:hidden}
.boot-line{margin:8px 0;font-size:14px;opacity:0;animation:fadeIn .25s forwards}
.boot-line.cyan{color:var(--neon-cyan)}
.boot-line.green{color:var(--neon-green)}
.boot-loading-bar{width:100%;max-width:600px;height:4px;background:#161b22;margin:0 auto;border-radius:2px;overflow:hidden}
.boot-progress{width:0;height:100%;background:var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan);animation:loadbar 2.4s forwards}
@keyframes fadeIn{to{opacity:1}}
@keyframes loadbar{to{width:100%}}

/* Desktop */
.desktop-env{position:relative;width:100%;height:100%;z-index:2;display:none}

/* Top bar */
.top-bar{position:absolute;top:0;left:0;width:100%;height:34px;z-index:500;display:flex;justify-content:space-between;align-items:center;padding:0 14px;background:var(--panel-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--panel-border);font-family:var(--font-mono);font-size:13px}
.top-bar-left{display:flex;align-items:center;gap:8px}
.orbit-logo{filter:drop-shadow(0 0 3px var(--neon-cyan))}
.system-title{cursor:pointer;letter-spacing:1px;transition:color .2s,text-shadow .2s}
.system-title:hover{color:var(--neon-cyan);text-shadow:0 0 8px rgba(0,240,255,.6)}
.os-version{font-size:10px;color:var(--text-muted);letter-spacing:1px}
.top-bar-right{display:flex;align-items:center;gap:14px}
.topbar-btn{background:rgba(0,240,255,.06);border:1px solid rgba(0,240,255,.4);color:var(--neon-cyan);font-family:var(--font-mono);font-size:11px;letter-spacing:1px;padding:3px 10px;border-radius:4px;cursor:pointer;transition:all .2s}
.topbar-btn:hover{background:rgba(0,240,255,.16);box-shadow:0 0 10px rgba(0,240,255,.35)}
.date-display{color:var(--text-muted);font-size:12px;letter-spacing:1px}
.clock-display{color:var(--neon-cyan);text-shadow:0 0 8px rgba(0,240,255,.5);letter-spacing:1px}

/* Icons */
.desktop-icons{position:absolute;top:60px;left:14px;display:flex;flex-direction:column;gap:8px;z-index:5}
.desktop-icon{width:82px;padding:9px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:8px;border:1px solid transparent;cursor:pointer;user-select:none;transition:background .15s,border-color .15s,box-shadow .15s}
.desktop-icon:hover{background:rgba(255,255,255,.06)}
.desktop-icon.selected{background:rgba(0,240,255,.10);border-color:rgba(0,240,255,.55);box-shadow:0 0 14px rgba(0,240,255,.25)}
.desktop-icon svg{width:40px;height:40px;filter:drop-shadow(0 0 6px rgba(0,240,255,.35))}
.desktop-icon span{font-size:11px;letter-spacing:.5px;text-align:center;text-shadow:0 1px 4px #000}

.hint-bar{position:absolute;bottom:10px;right:14px;z-index:6;font-size:10px;letter-spacing:.5px;color:rgba(139,148,158,.75);pointer-events:none}

/* Windows */
.window{position:absolute;display:flex;flex-direction:column;width:480px;max-height:78vh;overflow-y:auto;background:var(--panel-bg);backdrop-filter:blur(16px);border:1px solid rgba(0,240,255,.4);border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.6),var(--glow-cyan);z-index:10;will-change:transform}
.window.hidden{display:none}
#welcome-window{top:11%;left:24%}
#flightlog-window{top:22%;left:52%;width:470px}
#about-window{top:34%;left:33%;width:430px}

/* Cheaper blur while actively dragging a window — backdrop-filter over a
   constantly-repainting canvas is the main source of drag lag */
body.dragging .window{backdrop-filter:blur(4px)}

.window.win-pop{animation:winPop .28s cubic-bezier(.2,.9,.3,1.2)}
.window.closing{animation:winClose .2s ease forwards}
@keyframes winPop{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:none}}
@keyframes winClose{to{opacity:0;transform:scale(.94)}}

.window::-webkit-scrollbar,.fl-list::-webkit-scrollbar{width:6px}
.window::-webkit-scrollbar-track,.fl-list::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
.window::-webkit-scrollbar-thumb,.fl-list::-webkit-scrollbar-thumb{background:rgba(0,240,255,.3);border-radius:3px}
.window::-webkit-scrollbar-thumb:hover,.fl-list::-webkit-scrollbar-thumb:hover{background:var(--neon-cyan)}

.window-header{height:46px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;background:rgba(21,23,30,.9);font-size:12px;color:var(--text-muted);cursor:grab;user-select:none;white-space:nowrap}
.window-header:active{cursor:grabbing}
.window-title{flex:1;overflow:hidden;text-overflow:ellipsis;letter-spacing:.5px}
.window-status-dot{width:6px;height:6px;border-radius:50%;background:var(--neon-cyan);box-shadow:0 0 6px var(--neon-cyan);animation:dotPulse 2.2s ease-in-out infinite;flex-shrink:0}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.35}}
.closebutton{width:12px;height:12px;border-radius:50%;background:var(--neon-red);cursor:pointer;flex-shrink:0;transition:background .15s,box-shadow .15s}
.closebutton:hover{background:#ff3377;box-shadow:0 0 8px var(--neon-red)}

.window-body{padding:24px;text-align:center}

/* Welcome */
.welcome-title{font-family:var(--font-logo);font-weight:900;font-size:26px;margin:10px 0 2px}
.gradient-metallic{background:linear-gradient(135deg,#e0e0e0,#fff 25%,#8a9ba8 50%,#fff 75%,#e0e0e0);background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shine 4s linear infinite}
@keyframes shine{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.welcome-subtitle{font-size:12px;font-weight:400;color:var(--neon-cyan);letter-spacing:1px;text-transform:uppercase;margin:0 0 12px}
.logo-container{margin:16px 0}
.spinning-logo{animation:spin 30s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.intro-box{background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.05);border-radius:6px;padding:14px;font-size:14px;line-height:1.6;text-align:left;min-height:72px}
.type-caret{display:inline-block;width:7px;height:14px;margin-left:2px;background:var(--neon-cyan);vertical-align:-2px;animation:caretBlink 1s steps(2) infinite}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.welcome-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}

.cyber-btn{display:inline-block;padding:9px 16px;border:1px solid var(--neon-red);background:transparent;color:var(--text-bright);font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-decoration:none;border-radius:3px;cursor:pointer;transition:all .25s}
.cyber-btn:hover{background:var(--neon-red);color:#fff;box-shadow:0 0 14px rgba(255,0,85,.45)}
.cyber-btn.cyan{border-color:var(--neon-cyan)}
.cyber-btn.cyan:hover{background:var(--neon-cyan);color:#03121a;box-shadow:0 0 14px rgba(0,240,255,.5)}

/* Flight Log */
.flightlog-body{text-align:left;padding:20px}
.fl-stats{display:flex;gap:10px;margin-bottom:14px}
.fl-stat{flex:1;background:rgba(0,0,0,.3);border:1px solid var(--panel-border);border-radius:6px;padding:10px 8px;text-align:center}
.fl-stat span{display:block;font-family:var(--font-logo);font-weight:700;font-size:20px;color:var(--neon-cyan);text-shadow:0 0 10px rgba(0,240,255,.5)}
.fl-stat small{font-size:9px;letter-spacing:1.5px;color:var(--text-muted)}
.fl-form{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.fl-form input,.fl-form select,.fl-form textarea{background:rgba(0,0,0,.35);border:1px solid var(--panel-border);border-radius:4px;color:var(--text-bright);font-family:var(--font-mono);font-size:13px;padding:9px 10px;outline:none;resize:none;transition:border-color .2s,box-shadow .2s}
.fl-form input:focus,.fl-form select:focus,.fl-form textarea:focus{border-color:var(--neon-cyan);box-shadow:0 0 0 1px rgba(0,240,255,.3),0 0 12px rgba(0,240,255,.15)}
.fl-form ::placeholder{color:rgba(139,148,158,.6)}
.fl-form select option{background:#0d1117}
.fl-row{display:flex;gap:8px}
.fl-row select{flex:0 0 40%}
.fl-row input{flex:1}
.fl-form .cyber-btn{align-self:flex-end}
.fl-list{list-style:none;margin:0;padding:0 4px 0 0;display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}
.fl-entry{background:rgba(0,0,0,.28);border:1px solid var(--panel-border);border-left:2px solid var(--neon-cyan);border-radius:4px;padding:10px 12px;animation:entryIn .25s ease}
@keyframes entryIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fl-entry-head{display:flex;align-items:center;gap:8px}
.fl-craft{font-family:var(--font-logo);font-weight:700;font-size:12px;letter-spacing:.5px}
.fl-tag{font-size:9px;padding:2px 6px;border:1px solid var(--neon-red);color:var(--neon-red);border-radius:3px;letter-spacing:1px;text-transform:uppercase;flex-shrink:0}
.fl-date{margin-left:auto;font-size:10px;color:var(--text-muted);flex-shrink:0}
.fl-delete{background:none;border:none;color:var(--text-muted);font-size:11px;padding:2px 4px;cursor:pointer;transition:color .15s;flex-shrink:0}
.fl-delete:hover{color:var(--neon-red)}
.fl-meta{font-size:11px;color:var(--text-muted);margin-top:5px}
.fl-notes{font-size:12px;line-height:1.5;margin:6px 0 0;color:#c9d4de}
.fl-empty{text-align:center;color:var(--text-muted);font-size:12px;font-style:italic;padding:14px 0 4px}

/* About */
.about-body{text-align:left;font-size:13px;line-height:1.65}
.about-body h2{font-family:var(--font-logo);font-weight:700;font-size:16px;color:var(--neon-cyan);margin:4px 0 10px;letter-spacing:.5px}
.about-body p{margin:0 0 12px;color:#d4dde6}
.about-body .mission{color:var(--text-muted);font-size:11px;letter-spacing:.5px;border-top:1px solid var(--panel-border);padding-top:10px;margin-top:14px}
.changelog{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:6px}
.changelog li{border-left:2px solid var(--neon-cyan);background:rgba(0,240,255,.04);padding:6px 10px;font-size:12px;border-radius:0 4px 4px 0}
.changelog b{color:var(--neon-cyan);font-weight:400}

/* Responsive */
@media (max-width:940px){
  #welcome-window,#flightlog-window,#about-window{left:4vw;width:92vw}
  #welcome-window{top:9vh}
  #flightlog-window{top:12vh}
  #about-window{top:11vh}
  .date-display,.os-version{display:none}
}

/* Mission Logs */
.ml-body{display:flex;gap:14px;padding:16px;text-align:left}
.ml-sidebar{flex:0 0 140px;display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.ml-entry-tab{background:rgba(0,0,0,0.28);border:1px solid var(--panel-border);border-left:2px solid transparent;border-radius:4px;padding:8px 10px;cursor:pointer;transition:all 0.15s}
.ml-entry-tab:hover{background:rgba(255,255,255,0.05)}
.ml-entry-tab.active{border-left-color: var(--neon-cyan);background:rgba(0,240,255,.08);box-shadow:0 0 10px rgba(0,240,255,0.1)}
.ml-entry-title{margin:0;font-size:12px;font-weight:700}
.ml-entry-date{margin:2px 0 0;font-size:10px;color:var(--text-muted)}
.ml-content{flex:1;background:rgba(0,0,0,.2);border-radius:6px;padding:14px 16px;overflow-y:auto;max-height:320px;}
.ml-content h3{margin:0 0 2px;font-family:var(--font-logo);font-size:15px;color:var(--neon-cyan);text-shadow:0 0 8px rgba(0,240,255,0.3)}
.ml-content-date{margin:0 0 10px;font-size:10px;color:var(--text-muted)}
.ml-content-body{margin:0;font-size:13px;line-height:1.6;color:#d4dde6}

/* Comms */
.comms-body{text-align:left;padding:20px}
.comms-status{font-size:12px;color:var(--neon-cyan);letter-spacing:1px;margin:0 0 16px;text-shadow:0 0 8px rgba(0,240,255,0.4);min-height:16px;}
.comms-channels{display:flex;flex-direction:column;gap:10px}
.comms-channel{display:flex;justify-content:space-between;align-items:center;width:100%;background:rgba(0,0,0,0.28);border:1px solid var(--panel-border);border-left:2px solid var(--neon-cyan);border-radius:4px;padding:12px 14px;text-decoration:none;color:var(--text-bright);font-family:var(--font-mono);font-size:inherit;cursor:pointer;transition:background 0.15s,box-shadow 0.15s}
.comms-channel:hover{background:rgba(0,240,255,0.08);box-shadow:0 0 12px rgba(0,240,255,0.15)}
.comms-name{font-family:var(--font-logo);font-size:12px;letter-spacing:0.5px}
.comms-flag{font-size:10px;color:var(--neon-green);letter-spacing:1px}