:root{--color-bg: #09090b;--color-surface: rgba(30, 41, 59, .4);--color-surface-hover: rgba(30, 41, 59, .7);--color-border: rgba(255, 255, 255, .05);--color-border-hover: rgba(239, 68, 68, .3);--color-text: #ffffff;--color-text-muted: #94A3B8;--color-primary: #8B5CF6;--color-accent: #06B6D4;--color-alert: #EF4444;--color-success: #10B981;--color-warning: #F59E0B;--font-display: "Outfit", sans-serif;--font-body: "Inter", sans-serif;--shadow-glow-alert: 0 0 30px rgba(239, 68, 68, .2);--shadow-glow-primary: 0 0 30px rgba(139, 92, 246, .2)}body{margin:0;padding:0;background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-body);overflow-x:hidden;min-height:100vh}.bg-grid-pattern{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to right,rgba(79,79,79,.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(79,79,79,.18) 1px,transparent 1px);background-size:14px 24px;mask-image:radial-gradient(ellipse 60% 50% at 50% 0%,#000 70%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 0%,#000 70%,transparent 100%);opacity:.5;z-index:-1}.bg-glow-red{position:absolute;top:0;right:25%;width:24rem;height:24rem;background-color:#dc26261a;border-radius:9999px;filter:blur(120px);z-index:-1}.bg-glow-orange{position:absolute;top:20%;left:25%;width:24rem;height:24rem;background-color:#ea580c0d;border-radius:9999px;filter:blur(120px);z-index:-1}.app-container{position:relative;min-height:100vh}.main-content{position:relative;max-width:64rem;margin:0 auto;padding:3rem 1.5rem}.header-container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:4rem}@media (min-width: 768px){.header-container{flex-direction:row}}.header-left{display:flex;align-items:center;gap:1rem}.radar-icon-container{position:relative}.radar-icon-pulse{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--color-alert);filter:blur(16px);opacity:.3;border-radius:9999px;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.radar-icon-box{position:relative;width:3.5rem;height:3.5rem;background-color:#18181b;border:1px solid rgba(239,68,68,.3);border-radius:1rem;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow-alert)}.radar-icon{color:var(--color-alert)}.title{font-family:var(--font-display);font-size:1.875rem;font-weight:800;letter-spacing:-.025em;background-image:linear-gradient(to right,#fff,#a1a1aa);-webkit-background-clip:text;color:transparent;margin:0}.connection-status{display:flex;align-items:center;gap:.5rem;margin-top:.25rem}.status-dot-container{position:relative;display:flex;width:.625rem;height:.625rem}.status-dot-ping{position:absolute;display:inline-flex;height:100%;width:100%;border-radius:9999px;background-color:#34d399;opacity:.75;animation:ping 1s cubic-bezier(0,0,.2,1) infinite}.status-dot{position:relative;display:inline-flex;border-radius:9999px;height:.625rem;width:.625rem}.status-dot.connected{background-color:var(--color-success)}.status-dot.disconnected{background-color:var(--color-alert)}.status-text{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);font-weight:600}.nav-button{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background-color:#18181b80;border:1px solid #27272a;border-radius:.75rem;color:#d4d4d8;font-size:.875rem;font-weight:500;text-decoration:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all .3s ease;cursor:pointer}.nav-button:hover{background-color:#27272a;border-color:#3f3f46;color:#fff}.nav-icon-link{opacity:.5;transition:all .3s ease}.nav-button:hover .nav-icon-link{opacity:1;transform:translate(.125rem)}.list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.list-title{font-family:var(--font-display);font-size:1.125rem;font-weight:500;color:#d4d4d8;display:flex;align-items:center;gap:.5rem;margin:0}.list-title-icon{color:var(--color-alert)}.frequency-cloud{display:flex;align-items:center;gap:.75rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1rem;-ms-overflow-style:none;scrollbar-width:none}.frequency-cloud::-webkit-scrollbar{display:none}.frequency-pill{display:flex;align-items:center;gap:.375rem;padding:.375rem 1rem;background-color:#18181b66;border:1px solid rgba(39,39,42,.6);border-radius:9999px;color:var(--color-text-muted);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;transition:all .3s ease}.frequency-pill:hover{background-color:#8b5cf61a;border-color:#8b5cf64d;color:#c4b5fd}.frequency-pill.active{background-color:#8b5cf633;border-color:var(--color-primary);color:#fff;box-shadow:0 0 15px #8b5cf633}.frequency-pill-icon{width:.75rem;height:.75rem}.btn-dev{font-size:.75rem;display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;background-color:#6366f11a;color:#818cf8;border:1px solid rgba(99,102,241,.2);border-radius:.5rem;cursor:pointer;transition:background-color .2s}.btn-dev:hover{background-color:#6366f133}.spikes-list{display:flex;flex-direction:column;gap:1rem}.spike-card{position:relative;overflow:hidden;background-color:var(--color-surface);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--color-border);border-radius:.75rem;padding:.75rem;display:flex;flex-direction:column;gap:1rem;transition:all .5s ease;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (min-width: 768px){.spike-card{flex-direction:row;align-items:center}}.spike-card:hover{border-color:var(--color-border-hover);transform:translateY(-2px)}.spike-card-indicator{position:absolute;left:0;top:0;bottom:0;width:.25rem;background-image:linear-gradient(to bottom,var(--color-alert),transparent);opacity:0;transition:opacity .5s ease}.spike-card:hover .spike-card-indicator{opacity:1}.spike-card-thumb-wrapper{position:relative;flex-shrink:0;width:100%;aspect-ratio:16/9;border-radius:.5rem;overflow:hidden;background-color:#27272a;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@media (min-width: 768px){.spike-card-thumb-wrapper{width:8rem}}.spike-card-img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(0,0,.2,1)}.spike-card:hover .spike-card-img{transform:scale(1.05)}.spike-card-gradient{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to top,rgba(0,0,0,.6),transparent)}.spike-card-content{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}.spike-card-channel{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-alert);margin-bottom:.125rem;display:flex;align-items:center;gap:.375rem}.spike-card-title{font-family:var(--font-display);font-size:1rem;font-weight:600;line-height:1.375;color:#f4f4f5;margin:0 0 .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}.spike-card:hover .spike-card-title{color:#fff}.gemini-block{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.75rem;background-color:#1e1b4b4d;border:1px solid rgba(99,102,241,.2);border-radius:.375rem;padding:.5rem}.gemini-icon{flex-shrink:0;color:#818cf8;margin-top:.125rem}.gemini-content{flex:1;min-width:0}.gemini-category{font-size:.625rem;font-weight:700;color:#818cf8;text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:.125rem}.gemini-insight{font-size:.75rem;color:#c7d2fecc;line-height:1.625;font-style:italic;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.spike-card-stats{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.75rem;margin-top:auto}.stat-badge{display:flex;align-items:center;gap:.375rem;background-color:#09090b80;border-radius:.375rem;padding:.25rem .5rem;border:1px solid rgba(39,39,42,.5)}.stat-label{color:var(--color-text-muted)}.stat-value{font-family:monospace}.stat-value.font-bold{font-weight:700}.stat-value.font-medium{font-weight:500}.stat-value.critical{color:#f87171;filter:drop-shadow(0 0 8px rgba(248,113,113,.5))}.stat-value.warning{color:#fb923c}.stat-value.normal{color:#d4d4d8}.card-action{display:none;flex-shrink:0;width:2rem;height:2rem;border-radius:9999px;border:1px solid #27272a;align-items:center;justify-content:center;color:#52525b;transition:all .3s ease;align-self:center;margin-right:.5rem}@media (min-width: 768px){.card-action{display:flex}}.spike-card:hover .card-action{background-color:#ef44441a;border-color:#ef44444d;color:#f87171}.action-icon{transform:translateY(-1px) translate(1px)}.empty-state{text-align:center;padding:5rem 0;border:1px dashed #27272a;border-radius:1.5rem;background-color:#18181b33}.empty-icon{margin:0 auto;color:#52525b;width:3rem;height:3rem;margin-bottom:1rem}.empty-title{color:#a1a1aa;font-weight:500;margin:0}.empty-subtitle{color:#52525b;font-size:.875rem;margin:.25rem 0 0}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}