@import"https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Exo+2:wght@400;600;700;900&display=swap";:root{--sp-bg: #0b0c0e;--sp-surface: #111318;--sp-border: #1e2330;--sp-accent: #7fff00;--sp-accent-dim: #4db800;--sp-amber: #ffb800;--sp-red: #ff3b3b;--sp-blue: #3b8eff;--sp-muted: #4a5068;--sp-text: #c8cfe0;--sp-text-bright: #eef0f8;--sp-mono: "Share Tech Mono", monospace;--sp-sans: "Exo 2", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--sp-bg);color:var(--sp-text);font-family:var(--sp-sans);min-height:100vh;-webkit-font-smoothing:antialiased}.sp-app{display:flex;flex-direction:column;min-height:100vh}.sp-header{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid var(--sp-border);background:var(--sp-surface);position:sticky;top:0;z-index:100}.sp-logo{display:flex;align-items:center;gap:10px}.sp-logo-mark{width:32px;height:32px;background:var(--sp-accent);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);flex-shrink:0}.sp-logo-text{font-family:var(--sp-mono);font-size:18px;color:var(--sp-accent);letter-spacing:.05em}.sp-logo-sub{font-size:10px;color:var(--sp-muted);font-family:var(--sp-mono);letter-spacing:.1em;text-transform:uppercase}.sp-nav{display:flex;gap:4px}.sp-nav-btn{padding:6px 14px;border-radius:4px;border:1px solid transparent;background:transparent;color:var(--sp-muted);font-family:var(--sp-mono);font-size:12px;cursor:pointer;transition:all .15s;letter-spacing:.05em;text-transform:uppercase}.sp-nav-btn:hover{color:var(--sp-text);border-color:var(--sp-border)}.sp-nav-btn.active{color:var(--sp-accent);border-color:var(--sp-accent);background:#7fff000f}.sp-connect-btn{padding:7px 16px;border-radius:4px;border:1px solid var(--sp-accent);background:transparent;color:var(--sp-accent);font-family:var(--sp-mono);font-size:12px;cursor:pointer;transition:all .15s;letter-spacing:.05em}.sp-connect-btn:hover{background:#7fff001a}.sp-connect-btn.connected{border-color:var(--sp-border);color:var(--sp-muted)}.sp-main{flex:1;padding:28px;max-width:1200px;margin:0 auto;width:100%}.sp-char-banner{display:flex;align-items:center;gap:20px;background:var(--sp-surface);border:1px solid var(--sp-border);border-left:3px solid var(--sp-accent);border-radius:6px;padding:20px 24px;margin-bottom:28px}.sp-char-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--sp-accent) 0%,var(--sp-accent-dim) 100%);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;overflow:hidden;border:2px solid var(--sp-accent)}.sp-char-name{font-family:var(--sp-sans);font-size:22px;font-weight:700;color:var(--sp-text-bright)}.sp-char-meta{font-family:var(--sp-mono);font-size:11px;color:var(--sp-muted);margin-top:3px}.sp-char-stats{margin-left:auto;display:flex;gap:28px}.sp-stat{text-align:center}.sp-stat-val{font-family:var(--sp-mono);font-size:22px;font-weight:700;color:var(--sp-accent)}.sp-stat-label{font-size:10px;color:var(--sp-muted);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}.sp-section-title{font-family:var(--sp-mono);font-size:11px;color:var(--sp-muted);text-transform:uppercase;letter-spacing:.15em;margin-bottom:14px;display:flex;align-items:center;gap:8px}.sp-section-title:after{content:"";flex:1;height:1px;background:var(--sp-border)}.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:28px}.sp-card{background:var(--sp-surface);border:1px solid var(--sp-border);border-radius:6px;padding:18px 20px;transition:border-color .15s;position:relative;overflow:hidden}.sp-card:hover{border-color:#2a3040}.sp-card.online{border-left:3px solid var(--sp-accent)}.sp-card.offline{border-left:3px solid var(--sp-muted)}.sp-card-type{font-family:var(--sp-mono);font-size:10px;color:var(--sp-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}.sp-card-name{font-size:16px;font-weight:700;color:var(--sp-text-bright);margin-bottom:4px}.sp-card-name.unnamed{color:var(--sp-muted);font-style:italic;font-weight:400}.sp-card-desc{font-size:12px;color:var(--sp-muted);margin-bottom:14px;font-style:italic;line-height:1.4}.sp-card-id{font-family:var(--sp-mono);font-size:10px;color:var(--sp-muted);margin-bottom:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:3px;font-family:var(--sp-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em}.sp-badge.online{background:#7fff001a;color:var(--sp-accent)}.sp-badge.offline{background:#4a506833;color:var(--sp-muted)}.sp-badge.warning{background:#ffb8001a;color:var(--sp-amber)}.sp-badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.sp-badge.online .sp-badge-dot{animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.sp-fuel{margin-top:12px}.sp-fuel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.sp-fuel-label{font-family:var(--sp-mono);font-size:10px;color:var(--sp-muted);text-transform:uppercase;letter-spacing:.08em}.sp-fuel-val{font-family:var(--sp-mono);font-size:11px;color:var(--sp-text)}.sp-fuel-bar{height:4px;background:var(--sp-border);border-radius:2px;overflow:hidden}.sp-fuel-fill{height:100%;border-radius:2px;transition:width .5s ease;background:var(--sp-accent)}.sp-fuel-fill.low{background:var(--sp-amber)}.sp-fuel-fill.critical{background:var(--sp-red)}.sp-energy-row{display:flex;justify-content:space-between;margin-top:10px;gap:8px}.sp-energy-item{flex:1;background:#ffffff08;border-radius:4px;padding:8px 10px;text-align:center}.sp-energy-val{font-family:var(--sp-mono);font-size:14px;color:var(--sp-text-bright);font-weight:700}.sp-energy-label{font-size:9px;color:var(--sp-muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}.sp-connected{margin-top:12px;font-family:var(--sp-mono);font-size:10px;color:var(--sp-muted)}.sp-connected-count{color:var(--sp-accent);font-weight:700}.sp-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;gap:16px;color:var(--sp-muted);font-family:var(--sp-mono);font-size:13px}.sp-spinner{width:32px;height:32px;border:2px solid var(--sp-border);border-top-color:var(--sp-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sp-error{background:#ff3b3b14;border:1px solid rgba(255,59,59,.2);border-radius:6px;padding:16px 20px;color:var(--sp-red);font-family:var(--sp-mono);font-size:12px;margin-bottom:20px}.sp-footer{padding:16px 28px;border-top:1px solid var(--sp-border);display:flex;justify-content:space-between;align-items:center;font-family:var(--sp-mono);font-size:10px;color:var(--sp-muted)}.sp-footer-accent{color:var(--sp-accent)}