:root { --bg:#020408; --cyan:#00f0ff; --gold:#ffd700; --green:#00ff88; --border:rgba(0,240,255,0.2); --text:#e0e8f0; --muted:#4a6080; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--text); font-family:'Share Tech Mono', monospace; overflow:hidden; height:100vh; }
.scan-line { position:fixed; left:0; right:0; height:2px; background:var(--cyan); opacity:0.1; z-index:100; pointer-events:none; animation:scan 6s linear infinite; }
@keyframes scan { 0%{top:0;} 100%{top:100vh;} }
.hud-header { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; border-bottom:1px solid var(--border); background:rgba(0,0,0,0.8); position:relative; z-index:200; }
.logo { font-family:'Orbitron'; font-size:1.4rem; color:var(--cyan); letter-spacing:3px; text-shadow:0 0 10px var(--cyan); }
.subtitle { color:var(--muted); font-size:0.7rem; }
.header-center { display:flex; gap:8px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); animation:pulse 1.5s infinite; }
.status-dot.online { background:var(--green); box-shadow:0 0 10px var(--green); }
@keyframes pulse { 50%{opacity:0.4;} }
.header-right { display:flex; gap:8px; }
.brain-url-input { background:rgba(0,240,255,0.05); border:1px solid var(--border); color:var(--text); padding:5px 10px; width:120px; outline:none; }
.hud-btn { background:transparent; border:1px solid var(--cyan); color:var(--cyan); padding:5px 10px; cursor:pointer; font-family:'Share Tech Mono'; letter-spacing:2px; font-size:0.75rem; }
.hud-btn:hover { background:rgba(0,240,255,0.2); }
.hud-btn.gold { border-color:var(--gold); color:var(--gold); }
.hud-btn.green { border-color:var(--green); color:var(--green); }
.hud-btn.full-width { width:100%; margin-bottom:10px; }
.hud-btn.active { background:var(--cyan); color:var(--bg); }
.tab-nav { display:flex; gap:2px; padding:0 20px; background:rgba(0,0,0,0.9); border-bottom:1px solid var(--border); position:relative; z-index:200; }
.tab-btn { background:transparent; border:none; color:var(--muted); padding:10px 20px; cursor:pointer; font-family:'Share Tech Mono'; border-bottom:2px solid transparent; }
.tab-btn.active { color:var(--cyan); border-bottom:2px solid var(--cyan); }
.hud-content { height:calc(100vh - 100px); padding:0; position:relative; }
.tab-content { display:none; height:100%; }
.tab-content.active { display:block; }
#chat-tab.active, #code-tab.active, #files-tab.active { display:block; padding:16px; }

.draggable-panel { position:absolute; z-index:10; }
body.edit-mode .draggable-panel { border:1px dashed var(--cyan); cursor:move; box-shadow:0 0 15px rgba(0,240,255,0.2); }
.panel { background:rgba(5,10,20,0.6); border:1px solid var(--border); padding:16px; position:relative; backdrop-filter:blur(5px); height:100%; }
.panel-label { font-size:0.6rem; color:var(--muted); letter-spacing:3px; margin-bottom:10px; text-align:center; }

/* Arc Reactor */
.arc-reactor-container { display:flex; justify-content:center; align-items:center; height:100%; }
.arc-reactor { width:400px; height:400px; position:relative; display:flex; align-items:center; justify-content:center; }
.ring { position:absolute; border-radius:50%; border:2px solid rgba(0,240,255,0.1); }
.ring-outer { width:400px; height:400px; border-top-color:var(--cyan); border-bottom-color:var(--cyan); animation:rotate 10s linear infinite; box-shadow:0 0 30px rgba(0,240,255,0.2); }
.ring-mid { width:300px; height:300px; border-left-color:var(--cyan); border-right-color:var(--cyan); animation:rotate 7s linear infinite reverse; }
.ring-inner { width:200px; height:200px; border-top-color:var(--gold); border-bottom-color:var(--gold); animation:rotate 4s linear infinite; }
.core { width:120px; height:120px; border-radius:50%; background:radial-gradient(circle, var(--cyan) 0%, #004466 60%, transparent 100%); box-shadow:0 0 60px var(--cyan); animation:corePulse 2s ease-in-out infinite; }
@keyframes rotate { to { transform:rotate(360deg); } }
@keyframes corePulse { 50% { transform:scale(1.1); box-shadow:0 0 80px var(--cyan); } }
.reactor-text { position:absolute; bottom:20%; font-family:'Orbitron'; font-size:1.5rem; color:var(--cyan); text-shadow:0 0 10px var(--cyan); }
.reactor-date { position:absolute; top:20%; font-size:0.8rem; color:var(--gold); letter-spacing:2px; }

/* Fake Data Streams */
#neural-canvas { width:100%; height:100px; }
#data-stream-box { font-size:0.7rem; color:var(--green); height:150px; overflow:hidden; font-family:'Fira Code'; }
#data-stream-box div { opacity:0.8; }

/* App Launcher */
.app-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.app-icon { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px; border:1px solid var(--border); cursor:pointer; font-size:1.5rem; transition:all 0.3s; }
.app-icon:hover { border-color:var(--cyan); background:rgba(0,240,255,0.1); box-shadow:0 0 10px var(--cyan); }
.app-icon span { font-size:0.6rem; color:var(--muted); margin-top:5px; }
.app-icon:hover span { color:var(--cyan); }

/* Chat & Code */
.chat-layout { display:flex; gap:16px; height:100%; }
.chat-sidebar { width:200px; background:rgba(5,10,20,0.6); border:1px solid var(--border); padding:10px; overflow-y:auto; }
.chat-history-item, .file-cat-btn { padding:8px; cursor:pointer; border-bottom:1px solid var(--border); font-size:0.8rem; color:var(--muted); }
.chat-history-item:hover, .file-cat-btn:hover { color:var(--cyan); }
.chat-history-item.active, .file-cat-btn.active { color:var(--cyan); border-left:2px solid var(--cyan); }
.chat-panel-full { flex:1; display:flex; flex-direction:column; background:rgba(5,10,20,0.6); border:1px solid var(--border); padding:16px; backdrop-filter:blur(5px); }
.chat-log-full { flex:1; overflow-y:auto; padding:8px; background:rgba(0,0,0,0.3); }
.chat-msg { margin-bottom:10px; padding:10px; border-left:3px solid var(--cyan); background:rgba(0,240,255,0.05); white-space:pre-wrap; }
.user-msg { border-left-color:var(--gold); background:rgba(255,215,0,0.05); text-align:right; }
.code-block { background:#1e1e1e; border-left:3px solid var(--green); padding:12px; margin:8px 0; font-family:'Fira Code'; font-size:0.85rem; overflow-x:auto; }
.file-item { padding:10px; border-bottom:1px solid var(--border); cursor:pointer; color:var(--text); }
.file-item:hover { background:rgba(0,240,255,0.1); }
.chat-input-row { display:flex; gap:8px; margin-top:8px; }
.chat-input-row input { flex:1; background:rgba(0,240,255,0.05); border:1px solid var(--border); color:var(--text); padding:10px; font-family:'Share Tech Mono'; outline:none; }

/* Custom Widgets & Spotify */
#widgets-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:50; }
.custom-widget { position:absolute; background:rgba(5,10,20,0.8); border:1px solid var(--cyan); box-shadow:0 0 15px rgba(0,240,255,0.2); padding:10px; pointer-events:auto; min-width:150px; min-height:100px; resize:both; overflow:auto; }
.widget-header { display:flex; justify-content:space-between; color:var(--cyan); font-size:0.7rem; margin-bottom:5px; cursor:move; }
.widget-close { color:#ff3366; cursor:pointer; font-weight:bold; }
.widget-content img { max-width:100%; max-height:100%; }
.widget-content iframe { width:100%; height:calc(100% - 20px); border:none; }

.spotify-player { position:fixed; bottom:0; left:0; width:300px; height:80px; z-index:150; border:1px solid var(--border); box-shadow:0 0 15px rgba(0,240,255,0.2); }
.spotify-player iframe { width:100%; height:100%; border:none; }