@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap";:root{--bg-deep: #0a0b10;--bg-surface: #0f111a;--accent-primary: #00ef64;--accent-secondary: #00a8ff;--accent-success: #00ef64;--accent-warning: #ffcc00;--accent-error: #ff3e3e;--text-main: #e0e0e0;--text-muted: #6b7280;--terminal-dim: rgba(0, 239, 100, .1);--glass-border: #1e293b;--glass-shadow: 0 0 20px rgba(0, 0, 0, .8)}body{margin:0;padding:0;font-family:JetBrains Mono,monospace;background:var(--bg-deep);color:var(--text-main);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}body:before{content:" ";display:block;position:fixed;top:0;left:0;bottom:0;right:0;background:linear-gradient(#12101000 50%,#00000040 50%),linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f);z-index:9999;background-size:100% 2px,3px 100%;pointer-events:none}body:after{content:" ";display:block;position:fixed;top:0;left:0;bottom:0;right:0;background:#1210101a;opacity:0;z-index:9998;pointer-events:none;animation:flicker .15s infinite}@keyframes flicker{0%{opacity:.1}5%{opacity:.2}10%{opacity:.1}15%{opacity:.2}20%{opacity:.1}25%{opacity:.15}30%{opacity:.1}to{opacity:.1}}h1,h2,h3,h4{font-family:Share Tech Mono,monospace;text-transform:uppercase;letter-spacing:.05em;text-shadow:0 0 10px var(--accent-primary)}.App{max-width:1600px;margin:0 auto;padding:2rem;animation:terminalFade .5s ease-out}@keyframes terminalFade{0%{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}.glass{background:var(--bg-surface);border:1px solid var(--glass-border);border-radius:4px;box-shadow:var(--glass-shadow);transition:all .2s;position:relative;overflow:hidden}.glass:before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--accent-primary),transparent);opacity:.3}.glass:hover{border-color:var(--accent-primary);box-shadow:0 0 15px var(--terminal-dim)}button{cursor:pointer;border:1px solid var(--glass-border);border-radius:4px;padding:.8rem 1.4rem;font-weight:500;font-family:JetBrains Mono,monospace;transition:all .2s;display:flex;align-items:center;gap:8px;background:#ffffff05;color:var(--text-muted);text-transform:uppercase;font-size:.75rem}button:hover{color:var(--accent-primary);background:var(--terminal-dim);border-color:var(--accent-primary)}button.active{background:var(--accent-primary);color:#000;border-color:var(--accent-primary);box-shadow:0 0 15px var(--accent-primary);font-weight:700}.progress-bar{height:12px;background:#000;border:1px solid var(--glass-border);border-radius:2px;overflow:hidden;position:relative}.progress-fill{height:100%;transition:width .5s cubic-bezier(.4,0,.2,1);background:var(--accent-primary);position:relative}.progress-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shine 2s infinite}@keyframes shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.metric-card{padding:1.5rem;display:flex;flex-direction:column;gap:1rem;background:#0006}.status-badge{padding:2px 8px;border-radius:2px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;border:1px solid currentColor}.item-row{display:flex;align-items:center;padding:.75rem;border-bottom:1px solid rgba(255,255,255,.05);transition:.1s}.item-row:hover{background:var(--terminal-dim);color:var(--accent-primary)}.terminal-header{border-bottom:2px solid var(--accent-primary);margin-bottom:2rem;padding-bottom:1rem}.terminal-prompt{color:var(--accent-primary);margin-right:8px}.terminal-cursor{display:inline-block;width:10px;height:1.2em;background:var(--accent-primary);margin-left:5px;vertical-align:middle;animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#000}::-webkit-scrollbar-thumb{background:var(--glass-border)}::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}.dashboard-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}@media (max-width: 1024px){.dashboard-grid{grid-template-columns:repeat(6,1fr)}}@media (max-width: 768px){.dashboard-grid{display:flex;flex-direction:column;gap:1rem}}.rpi-dashboard{grid-column:span 12;display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;padding:2rem;background:radial-gradient(circle at center,rgba(0,239,100,.05) 0%,transparent 70%);border:1px solid var(--glass-border);position:relative;overflow:hidden}.rpi-col-left{display:flex;flex-direction:column;gap:4rem;align-items:flex-end}.rpi-col-right{display:flex;flex-direction:column;gap:4rem}.rpi-image-wrapper{position:relative;width:300px;display:flex;justify-content:center}.metric-panel{position:relative}.metric-card-inner{padding:1rem;width:220px;min-height:110px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}@media (max-width: 1024px){.metric-card-inner{width:180px;min-height:auto}}.connector{position:absolute;height:2px;width:40px;top:50%;transform:translateY(-50%);box-shadow:0 0 5px currentColor}.connector-right{right:-40px}.connector-left{left:-40px}.connector:after{content:"";position:absolute;width:0;height:0;background:transparent;border-radius:0;top:50%;transform:translateY(-50%);box-shadow:none}.connector-right:after{right:-8px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}.connector-left:after{left:-8px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:8px solid currentColor}@media (max-width: 1024px){.rpi-dashboard{gap:1rem;padding:1rem}.rpi-image-wrapper{width:220px}.rpi-col-left,.rpi-col-right{gap:2rem}.metric-panel>.glass{padding:.8rem}.connector{width:20px}.connector-right{right:-20px}.connector-left{left:-20px}}@media (max-width: 768px){.rpi-dashboard{display:grid!important;grid-template-columns:1fr auto 1fr!important;gap:.5rem!important;padding:.5rem!important;width:100%!important;box-sizing:border-box!important}.rpi-image-wrapper{width:180px!important;margin:0 auto}.rpi-image-wrapper img{width:100%!important;height:auto!important}.rpi-col-left,.rpi-col-right{gap:.5rem!important;justify-content:center;overflow:hidden}.connector{display:none!important}.metric-card-inner{padding:.2rem!important;min-width:0!important;width:auto!important;min-height:0!important;text-align:center!important;background:transparent!important;border:none!important;box-shadow:none!important}.mp-label-text,.mp-percent,.mp-progress{display:none!important}.mp-header{justify-content:center!important;margin-bottom:0!important}.mp-value{font-size:.9rem!important;line-height:1!important;opacity:.9}}@media (max-width: 400px){.rpi-image-wrapper{width:150px!important}}@keyframes float{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(1deg)}to{transform:translateY(0) rotate(0)}}.rpi-label{position:absolute;opacity:0;animation:fadeIn .5s forwards .3s}@keyframes fadeIn{to{opacity:1}}.connector{position:absolute;height:1px;background:var(--accent-primary);box-shadow:0 0 5px var(--accent-primary)}.connector:after{content:"";position:absolute;width:4px;height:4px;background:var(--accent-primary);border-radius:50%;right:0;top:-1.5px;box-shadow:0 0 5px var(--accent-primary)}.rpi-label[style*="left:"] .connector:after{right:auto;left:0}.metric-card.mini{padding:.8rem;gap:.5rem;flex-direction:row;align-items:center;background:#000c;border:1px solid var(--accent-primary);min-width:140px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.metric-card.mini .label{font-size:.6rem;color:var(--text-muted);letter-spacing:.1em}.metric-card.mini .value{font-size:1rem;font-weight:700;color:#fff;font-family:Share Tech Mono,monospace}.user-select-none{-webkit-user-select:none;user-select:none}.span-full{grid-column:span 12}.span-main{grid-column:span 8}.span-side{grid-column:span 4}@media (max-width: 1024px){.span-main,.span-side{grid-column:span 6}}