:root { --ink:#07090d; --panel:#0b0e14; --line:#202631; --text:#edf3f8; --muted:#7d8898; --mint:#9effe6; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--ink); color:var(--text); }
body { font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; overflow:hidden; }
button,input { font:inherit; } button { -webkit-tap-highlight-color:transparent; }
.terminal-app { position:relative; min-height:100dvh; padding:clamp(10px,2vw,24px); overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 36%),#05070a; }
.terminal-app::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.19; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.23'/%3E%3C/svg%3E"); }
.ambient { position:fixed; width:48vw; height:48vw; border-radius:50%; filter:blur(110px); opacity:.15; pointer-events:none; animation:drift 12s ease-in-out infinite alternate; }
.ambient-one { left:-18vw; top:-24vw; background:#00ffd5; } .ambient-two { right:-16vw; bottom:-28vw; background:#8c56ff; animation-delay:-6s; }
.chroma-border { position:relative; isolation:isolate; }
.chroma-border::before { content:""; position:absolute; z-index:-2; inset:-1px; padding:1px; background:linear-gradient(115deg,#50ffd0,#527dff 28%,#d761ff 55%,#ff7861 78%,#50ffd0); background-size:300% 300%; animation:chromaflow 8s linear infinite; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,1px 1px,1px calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 1px,1px 1px); opacity:.72; pointer-events:none; }
.terminal-frame { height:calc(100dvh - clamp(20px,4vw,48px)); max-width:1680px; margin:0 auto; display:grid; grid-template-rows:70px minmax(0,1fr) auto; background:rgba(7,9,13,.94); box-shadow:0 28px 100px rgba(0,0,0,.5); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 20px; border-bottom:1px solid var(--line); background:rgba(12,15,21,.86); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; min-width:0; gap:12px; } .brand-logo { width:43px; height:43px; object-fit:contain; filter:drop-shadow(0 0 11px rgba(158,255,230,.13)); }
.brand div { display:grid; gap:3px; min-width:0; } .brand strong { font:700 14px/1.05 ui-monospace,monospace; letter-spacing:.17em; white-space:nowrap; } .brand span { color:var(--muted); font:500 9px/1 ui-monospace,monospace; letter-spacing:.1em; white-space:nowrap; }
.top-actions { display:flex; align-items:center; gap:14px; } .connection { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font:650 10px/1 ui-monospace,monospace; letter-spacing:.13em; }
.connection i { width:7px; height:7px; border-radius:50%; background:#d3a24c; box-shadow:0 0 12px currentColor; } .connection.live { color:#84ffa1; } .connection.live i { background:currentColor; }
.upload-button,.diagnostics-button { height:38px; display:inline-flex; align-items:center; gap:9px; padding:0 13px; color:var(--text); border:1px solid #313946; border-radius:0; background:#11151d; cursor:pointer; transition:.18s ease; }
.upload-button:hover,.diagnostics-button:hover { border-color:var(--mint); background:#141a21; } .upload-button svg,.update-card>svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:square; stroke-linejoin:miter; } .upload-button span,.diagnostics-button .action-label { font:700 10px/1 ui-monospace,monospace; letter-spacing:.12em; }
.terminal-surface { position:relative; min-height:0; padding:16px 18px 8px; background:radial-gradient(circle at 52% 0,rgba(94,150,186,.04),transparent 44%); } .terminal-surface .xterm { height:100%; } .terminal-surface .xterm-viewport { scrollbar-color:#303946 transparent; scrollbar-width:thin; }
.caret-hud { position:absolute; z-index:4; right:20px; bottom:12px; padding:5px 7px; color:#718e8d; border:1px solid transparent; background:rgba(8,12,16,.76); background-clip:padding-box; pointer-events:none; font:650 8px/1 ui-monospace,monospace; letter-spacing:.09em; opacity:.72; }
.caret-hud::before { content:""; position:absolute; z-index:-1; inset:-1px; background:linear-gradient(100deg,#50ffd0,#527dff,#d761ff,#ff7861,#50ffd0); background-size:300% 100%; animation:chromaflow 8s linear infinite; opacity:.35; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,1px 1px,1px calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 1px,1px 1px); }
.terminal-magnifier { position:fixed; z-index:60; width:148px; min-height:52px; display:grid; place-items:center; transform:translate(-50%,-100%); padding:11px 9px; overflow:hidden; color:#f6fbff; border:1px solid #8e99a9; background:rgba(9,13,19,.95); box-shadow:0 13px 35px #000,0 0 0 4px rgba(31,39,50,.65); backdrop-filter:blur(12px); pointer-events:none; }
.terminal-magnifier span { width:100%; overflow:hidden; text-align:center; white-space:pre; font:700 16px/1.2 ui-monospace,monospace; }
.terminal-magnifier i { position:absolute; left:50%; bottom:-7px; width:13px; height:13px; transform:translateX(-50%) rotate(45deg); border-right:1px solid #8e99a9; border-bottom:1px solid #8e99a9; background:#090d13; }
.top-cube-meter { width:24px; display:grid; grid-template-columns:repeat(5,3px); gap:2px; align-content:center; justify-content:center; }
.top-cube-meter i { width:3px; height:3px; border:1px solid #46505e; background:#171c24; transform:rotate(45deg); transition:.2s ease; }
.top-cube-meter i.filled { border-color:#7bffe4; background:#50ffd0; filter:hue-rotate(var(--hue)); box-shadow:0 0 5px currentColor; animation:cubeWave 2.8s ease-in-out infinite; animation-delay:calc(var(--i) * -85ms); }
.top-cube-meter i:nth-child(1),.cube-load-meter i:nth-child(1),.service-cubes i:nth-child(1){--i:0;--hue:0deg}.top-cube-meter i:nth-child(2),.cube-load-meter i:nth-child(2),.service-cubes i:nth-child(2){--i:1;--hue:17deg}.top-cube-meter i:nth-child(3),.cube-load-meter i:nth-child(3),.service-cubes i:nth-child(3){--i:2;--hue:34deg}.top-cube-meter i:nth-child(4),.cube-load-meter i:nth-child(4),.service-cubes i:nth-child(4){--i:3;--hue:51deg}.top-cube-meter i:nth-child(5),.cube-load-meter i:nth-child(5),.service-cubes i:nth-child(5){--i:4;--hue:68deg}
.top-cube-meter i:nth-child(6),.cube-load-meter i:nth-child(6),.service-cubes i:nth-child(6){--i:5;--hue:85deg}.top-cube-meter i:nth-child(7),.cube-load-meter i:nth-child(7),.service-cubes i:nth-child(7){--i:6;--hue:102deg}.top-cube-meter i:nth-child(8),.cube-load-meter i:nth-child(8),.service-cubes i:nth-child(8){--i:7;--hue:119deg}.top-cube-meter i:nth-child(9),.cube-load-meter i:nth-child(9),.service-cubes i:nth-child(9){--i:8;--hue:136deg}.top-cube-meter i:nth-child(10),.cube-load-meter i:nth-child(10),.service-cubes i:nth-child(10){--i:9;--hue:153deg}
.top-cube-meter i:nth-child(11),.cube-load-meter i:nth-child(11),.service-cubes i:nth-child(11){--i:10;--hue:170deg}.top-cube-meter i:nth-child(12),.cube-load-meter i:nth-child(12),.service-cubes i:nth-child(12){--i:11;--hue:187deg}.top-cube-meter i:nth-child(13),.cube-load-meter i:nth-child(13),.service-cubes i:nth-child(13){--i:12;--hue:204deg}.top-cube-meter i:nth-child(14),.cube-load-meter i:nth-child(14),.service-cubes i:nth-child(14){--i:13;--hue:221deg}.top-cube-meter i:nth-child(15),.cube-load-meter i:nth-child(15),.service-cubes i:nth-child(15){--i:14;--hue:238deg}
.top-cube-meter i:nth-child(16),.cube-load-meter i:nth-child(16),.service-cubes i:nth-child(16){--i:15;--hue:255deg}.top-cube-meter i:nth-child(17),.cube-load-meter i:nth-child(17),.service-cubes i:nth-child(17){--i:16;--hue:272deg}.top-cube-meter i:nth-child(18),.cube-load-meter i:nth-child(18),.service-cubes i:nth-child(18){--i:17;--hue:289deg}.top-cube-meter i:nth-child(19),.cube-load-meter i:nth-child(19),.service-cubes i:nth-child(19){--i:18;--hue:306deg}.top-cube-meter i:nth-child(20),.cube-load-meter i:nth-child(20),.service-cubes i:nth-child(20){--i:19;--hue:323deg}
.shortcut-strip { display:flex; align-items:stretch; gap:6px; padding:9px; overflow-x:auto; border-top:1px solid var(--line); background:#0b0e13; scrollbar-width:none; } .shortcut-strip::-webkit-scrollbar { display:none; }
.shortcut-strip button { flex:0 0 auto; min-width:48px; height:40px; padding:0 13px; color:#aab4c1; border:1px solid #252c36; border-radius:0; background:#10141a; font:650 10px/1 ui-monospace,monospace; letter-spacing:.08em; cursor:pointer; }
.shortcut-strip button:active { color:#08100e; border-color:var(--mint); background:var(--mint); } .shortcut-strip .paste-key { margin-left:auto; color:var(--mint); }
.update-overlay { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:20px; background:rgba(2,4,7,.76); backdrop-filter:blur(12px); }
.update-card { width:min(440px,100%); min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; padding:34px; text-align:center; background:#0a0d12; box-shadow:0 26px 90px #000; }
.update-card>svg { width:38px; height:38px; color:var(--mint); } .update-card strong { font:700 14px/1.25 ui-monospace,monospace; letter-spacing:.14em; } .update-card>span,.update-card small { color:var(--muted); font-size:12px; line-height:1.55; }
.update-card .file-name { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#cfd6df; font-family:ui-monospace,monospace; }
.update-mark { width:52px; height:52px; display:grid; place-items:center; border:1px solid #37414f; } .update-mark span { width:20px; height:20px; border:2px solid #34404c; border-top-color:var(--mint); border-radius:50%; animation:spin .8s linear infinite; }
.update-mark svg { width:27px; fill:none; stroke:currentColor; stroke-width:1.6; } .update-mark.success { color:#84ffa1; border-color:#386d48; } .update-mark.error { color:#ff7c8d; border-color:#713d47; }
.progress { width:100%; height:2px; margin:7px 0 3px; overflow:hidden; background:#252b34; } .progress i { display:block; height:100%; background:linear-gradient(90deg,#50ffd0,#567cff,#cf5fff); transition:width .25s ease; }
.update-card button { margin-top:8px; padding:11px 19px; color:var(--text); border:1px solid #38414e; background:transparent; font:700 10px ui-monospace,monospace; letter-spacing:.14em; } .dragging .update-card { background:#0c1117; }
@keyframes chromaflow { 0%{background-position:0 50%} 100%{background-position:300% 50%} } @keyframes drift { to{transform:translate3d(5vw,4vh,0) scale(1.12)} } @keyframes spin { to{transform:rotate(360deg)} }
@keyframes cubeWave { 0%,100%{opacity:.45;transform:rotate(45deg) scale(.82)} 50%{opacity:1;transform:rotate(45deg) scale(1.12)} }
@keyframes cubePulse { 0%,100%{filter:hue-rotate(var(--hue,0deg));opacity:.65} 50%{filter:hue-rotate(calc(var(--hue,0deg) + 100deg));opacity:1} }
@keyframes cornerBlink { 0%,86%,92%,100%{box-shadow:none;border-color:#3b4552} 89%{box-shadow:0 0 10px #fff;border-color:#fff} }
@media(max-width:640px){ .terminal-app{padding:0}.terminal-frame{height:100dvh;grid-template-rows:59px minmax(0,1fr) auto}.terminal-frame::before{display:none}.topbar{padding:0 9px;gap:6px}.brand{gap:7px}.brand-logo{width:34px;height:34px}.brand strong{font-size:10.5px;letter-spacing:.1em}.brand span{font-size:7.2px;letter-spacing:.02em}.connection{display:none}.top-actions{gap:5px}.upload-button,.diagnostics-button{width:40px;height:38px;justify-content:center;padding:0}.upload-button span,.diagnostics-button .action-label{display:none}.terminal-surface{padding:11px 7px 5px}.caret-hud{right:9px;bottom:7px}.shortcut-strip{padding:7px;gap:5px;padding-bottom:calc(7px + env(safe-area-inset-bottom))}.shortcut-strip button{min-width:45px;height:39px;padding:0 10px}.shortcut-strip .paste-key{margin-left:0} }
@media(prefers-reduced-motion:reduce){.ambient,.chroma-border::before,.update-mark span{animation:none}}

.diagnostics-overlay { position:fixed; z-index:40; inset:0; display:flex; justify-content:flex-end; padding:clamp(8px,2vw,22px); background:rgba(2,4,7,.7); backdrop-filter:blur(12px); }
.diagnostics-card { width:min(560px,100%); height:100%; display:flex; flex-direction:column; gap:16px; padding:22px; overflow:hidden; background:#090c12; box-shadow:-26px 0 90px #000; }
.diagnostics-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.diagnostics-head>div { display:grid; gap:5px; } .diagnostics-head strong { font:750 15px/1 ui-monospace,monospace; letter-spacing:.17em; } .diagnostics-head span { color:var(--muted); font:600 8px/1 ui-monospace,monospace; letter-spacing:.1em; }
.diagnostics-head button { width:36px; height:36px; padding:0 0 3px; color:#aab4c1; border:1px solid #313946; border-radius:0; background:#10141a; font:300 27px/1 ui-monospace,monospace; cursor:pointer; }
.diagnostics-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.scope-switch { display:grid; grid-template-columns:1fr 1fr; min-width:210px; border:1px solid #29313c; }
.scope-switch button,.metric-filters button { height:34px; padding:0 12px; color:#7f8997; border:0; border-radius:0; background:#0d1117; font:700 9px/1 ui-monospace,monospace; letter-spacing:.1em; cursor:pointer; }
.scope-switch button+button { border-left:1px solid #29313c; } .scope-switch button.active,.metric-filters button.active { color:#08100e; background:var(--mint); }
.cube-toggle { position:relative; height:35px; display:flex; align-items:center; gap:9px; padding:0 10px; color:#7f8997; border:1px solid #323b48; border-radius:0; background:#0d1117; cursor:pointer; }
.cube-toggle b { font:700 8px/1 ui-monospace,monospace; letter-spacing:.1em; } .twin-cubes { position:relative; width:27px; height:17px; display:block; }
.twin-cubes i { position:absolute; top:4px; width:9px; height:9px; border:1px solid #46505e; background:#151a21; transform:rotate(45deg); animation:cornerBlink 7s linear infinite; }
.twin-cubes i:first-child { left:1px; } .twin-cubes i:last-child { right:1px; animation-delay:-3.4s; }
.cube-toggle.active { color:var(--mint); border-color:#557b77; } .cube-toggle.active .twin-cubes i { border-color:#72ffe2; background:#173f3a; animation:cubePulse 3.2s ease-in-out infinite; }
.cube-toggle.active .twin-cubes i:first-child { left:5px; } .cube-toggle.active .twin-cubes i:last-child { right:5px; }
.metric-filters { display:flex; gap:5px; overflow-x:auto; scrollbar-width:none; } .metric-filters::-webkit-scrollbar { display:none; }
.metric-filters button { flex:0 0 auto; height:31px; border:1px solid #252d37; } .metric-filters button:disabled { opacity:.22; cursor:not-allowed; }
.diagnostics-summary { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.diagnostics-summary>div { display:grid; gap:4px; } .diagnostics-summary span { color:var(--muted); font:650 8px/1.3 ui-monospace,monospace; letter-spacing:.09em; } .diagnostics-summary strong { font:700 34px/1 ui-monospace,monospace; letter-spacing:-.05em; }
.diagnostics-summary>span { max-width:240px; padding-bottom:3px; text-align:right; }
.cube-load-meter { display:grid; grid-template-columns:repeat(10,22px); justify-content:space-between; row-gap:13px; padding:10px 3px 8px; }
.cube-load-meter i { position:relative; width:20px; height:20px; border:1px solid #303846; background:#11161d; transform:rotate(30deg) skewY(-8deg); transition:.25s ease; }
.cube-load-meter i::before,.cube-load-meter i::after { content:""; position:absolute; opacity:.45; background:inherit; border:inherit; }
.cube-load-meter i::before { left:3px; top:-5px; width:100%; height:4px; transform:skewX(-42deg); } .cube-load-meter i::after { right:-5px; top:-3px; width:4px; height:100%; transform:skewY(-48deg); }
.cube-load-meter i.filled { border-color:#76ffe4; background:#31cdb0; filter:hue-rotate(var(--hue)); box-shadow:0 0 12px rgba(80,255,208,.24); animation:cubePulse 3s ease-in-out infinite; animation-delay:calc(var(--i) * -95ms); }
.diagnostics-details { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#202731; border:1px solid #202731; }
.diagnostics-details div { min-width:0; display:grid; gap:5px; padding:12px; background:#0d1117; } .diagnostics-details span { color:#6f7a89; font:650 8px/1 ui-monospace,monospace; letter-spacing:.1em; } .diagnostics-details b { overflow:hidden; color:#cbd3dc; text-overflow:ellipsis; white-space:nowrap; font:650 11px/1.1 ui-monospace,monospace; }
.service-list { min-height:0; display:flex; flex:1; flex-direction:column; gap:7px; overflow:auto; padding-right:3px; scrollbar-color:#303946 transparent; }
.service-row { display:grid; gap:9px; padding:11px 12px; border:1px solid #222a34; background:#0c1016; }
.service-row>div:first-child { display:flex; align-items:start; justify-content:space-between; gap:10px; } .service-row span { min-width:0; display:grid; gap:3px; } .service-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 10px/1.1 ui-monospace,monospace; letter-spacing:.05em; } .service-row small { overflow:hidden; color:#6d7785; text-overflow:ellipsis; white-space:nowrap; font:8px/1.1 ui-monospace,monospace; } .service-row b { color:#bfc8d4; font:700 11px/1 ui-monospace,monospace; }
.service-cubes { display:grid; grid-template-columns:repeat(20,1fr); gap:3px; } .service-cubes i { height:5px; border:1px solid #2b333e; background:#161b22; } .service-cubes i.filled { border-color:#61d9c2; background:#50ffd0; filter:hue-rotate(var(--hue)); animation:cubePulse 3.2s ease-in-out infinite; animation-delay:calc(var(--i) * -70ms); }
.service-list p,.diagnostics-error { padding:20px; color:#7d8898; border:1px solid #29313c; text-align:center; font:650 9px/1.5 ui-monospace,monospace; letter-spacing:.09em; }
.diagnostics-error { color:#ff7c8d; border-color:#713d47; }

@media(max-width:640px){.diagnostics-overlay{padding:0}.diagnostics-card{width:100%;padding:15px 13px;gap:13px}.diagnostics-head{padding-bottom:13px}.diagnostics-controls{gap:8px}.scope-switch{min-width:0;flex:1}.diagnostics-summary>span{max-width:170px}.cube-load-meter{grid-template-columns:repeat(10,18px);row-gap:12px}.cube-load-meter i{width:16px;height:16px}.diagnostics-details div{padding:10px}.service-row{padding:10px}.terminal-magnifier{width:138px}.diagnostics-summary strong{font-size:30px}}

[hidden]{display:none!important}
.login-overlay{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:20px;background:#05070af2;backdrop-filter:blur(16px)}
.login-card{width:min(380px,100%);display:grid;gap:14px;padding:34px;background:#0a0d12;box-shadow:0 26px 90px #000}
.login-card img{width:72px;height:72px;object-fit:contain;margin:0 auto}.login-card p{text-align:center;margin:0 0 12px;font:700 14px ui-monospace,monospace;letter-spacing:.18em}
.login-card label{color:var(--muted);font:700 9px ui-monospace,monospace;letter-spacing:.12em}.login-card input{height:48px;padding:0 14px;color:var(--text);border:1px solid #313946;border-radius:0;outline:0;background:#07090d;font:16px ui-monospace,monospace}.login-card input:focus{border-color:var(--mint)}
.login-card button{height:45px;color:#07110e;border:0;border-radius:0;background:var(--mint);font:800 11px ui-monospace,monospace;letter-spacing:.14em}.login-card small{min-height:18px;color:#ff7c8d;text-align:center;font-size:11px}
.connection b{font:inherit}.update-log{display:none}.update-card pre{width:100%;max-height:118px;margin:2px 0;overflow:auto;color:#8994a4;text-align:left;white-space:pre-wrap;font:10px/1.45 ui-monospace,monospace}.update-mark svg{height:27px}