.header{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:1rem 1.5rem}.header-content{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}.header-left{display:flex;align-items:center;gap:.75rem}.header-brand{display:flex;align-items:center;gap:.75rem;color:var(--color-text);text-decoration:none}.header-brand:hover{color:var(--color-text)}.header-icon{color:var(--color-danger);display:flex;align-items:center}.header-title{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}.header-subtitle{font-size:.8rem;color:var(--color-text-muted);margin-top:.125rem}.header-nav{display:flex;align-items:center;gap:1.25rem}.header-link{font-size:.875rem;font-weight:500;color:var(--color-text-muted);transition:color .2s}.header-link:hover,.header-link-active{color:var(--color-text)}.header-link-github{display:flex;align-items:center;gap:.375rem}@media(max-width:768px){.header-content{flex-direction:column;text-align:center}.header-nav{flex-wrap:wrap;justify-content:center}.header-subtitle{display:none}}.stats-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}.stats-bar-error{display:block;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:1rem 1.5rem;color:var(--color-text-muted);text-align:center}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.25rem;border-left:3px solid transparent;transition:transform .15s,box-shadow .15s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.stat-card-blue{border-left-color:#4f7df9}.stat-card-orange{border-left-color:#f59e0b}.stat-card-red{border-left-color:#e74c3c}.stat-card-green{border-left-color:#10b981}.stat-card-purple{border-left-color:#a855f7}.stat-value{font-size:1.75rem;font-weight:700;font-family:var(--font-mono);letter-spacing:-.02em}.stat-label{font-size:.8rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.skeleton{min-height:80px;background:linear-gradient(90deg,var(--color-surface) 25%,var(--color-border) 50%,var(--color-surface) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.top-usernames{display:flex;align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;margin-bottom:1rem;overflow:hidden}.top-usernames-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);flex-shrink:0;padding:.6rem .75rem .6rem 1rem;border-right:1px solid var(--color-border);background:var(--color-surface);z-index:1}.top-usernames-track{flex:1;overflow:hidden;mask-image:linear-gradient(to right,transparent 0%,black 3%,black 97%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 3%,black 97%,transparent 100%)}.top-usernames-scroll{display:flex;width:max-content;animation:marquee 60s linear infinite}.top-usernames-scroll:hover{animation-play-state:paused}.top-usernames-list{display:flex;align-items:center;gap:.5rem;padding:.6rem .5rem;flex-shrink:0}.top-usernames-list+.top-usernames-list{margin-left:.5rem}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.top-username-chip{display:flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:4px;border:1px solid var(--color-border);font-family:var(--font-mono);font-size:.78rem;white-space:nowrap;transition:border-color .2s}.top-username-chip:hover{border-color:var(--color-danger)}.top-username-rank{color:var(--color-text-muted);font-size:.65rem;opacity:.6}.top-username-name{color:var(--color-danger);font-weight:500}.top-username-count{color:var(--color-text-muted);font-size:.7rem}@media(max-width:768px){.top-usernames{border-radius:6px}.top-usernames-label{font-size:.65rem;padding:.5rem .5rem .5rem .6rem;letter-spacing:.03em}.top-username-chip{font-size:.68rem;padding:.15rem .4rem;gap:.25rem}.top-usernames-list{gap:.35rem;padding:.5rem .35rem}.top-usernames-scroll{animation-duration:45s}.top-username-count{font-size:.6rem}.top-username-rank{font-size:.58rem}}.live-feed{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;overflow:hidden;margin-bottom:1rem}.live-feed-header{display:flex;align-items:center;padding:0 1rem 0 0;border-bottom:1px solid var(--color-border);width:100%;background:none;color:var(--color-text-muted)}.live-feed-toggle-btn{display:flex;align-items:center;justify-content:space-between;flex:1;padding:.75rem .75rem .75rem 1rem;background:none;border:none;cursor:pointer;color:inherit}.live-feed-toggle-btn:hover{color:var(--color-text)}.sound-toggle{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;border:1px solid var(--color-border);background:none;color:var(--color-text-muted);cursor:pointer;opacity:.5;transition:opacity .2s,color .2s,border-color .2s;flex-shrink:0}.sound-toggle:hover{opacity:.8;color:var(--color-text)}.sound-toggle-on{opacity:1;color:var(--color-accent);border-color:var(--color-accent)}.live-feed-title{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:inherit}.live-feed-toggle{transition:transform .2s;flex-shrink:0}.live-feed-toggle-open{transform:rotate(180deg)}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--color-danger);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 #e74c3c66}50%{opacity:.7;box-shadow:0 0 0 6px #e74c3c00}}.live-feed-subtitle{font-size:.75rem;color:var(--color-text-muted)}.live-feed-list{max-height:320px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-border) transparent}.live-feed-list::-webkit-scrollbar{width:6px}.live-feed-list::-webkit-scrollbar-track{background:transparent}.live-feed-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.live-feed-row{display:flex;align-items:center;gap:.5rem;padding:.4rem 1rem;font-family:var(--font-mono);font-size:.78rem;color:var(--color-text-muted);border-bottom:1px solid rgba(42,45,58,.5);transition:background .3s}.live-feed-row:last-child{border-bottom:none}.live-feed-row:hover{background:#4f7df90d}.live-feed-row-new{background:#e74c3c14;animation:fadeHighlight 3s ease-out forwards}@keyframes fadeHighlight{0%{background:#e74c3c26}to{background:transparent}}.feed-time{color:var(--color-text-muted);flex-shrink:0;min-width:65px}.feed-separator{color:var(--color-border);flex-shrink:0}.feed-user{color:var(--color-danger);font-weight:500;min-width:80px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.feed-ip{color:var(--color-accent);min-width:120px;flex-shrink:0}.feed-location{color:var(--color-text-muted);margin-left:auto;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.live-feed-row{font-size:.7rem;gap:.35rem;padding:.35rem .75rem}.feed-user{min-width:60px;max-width:80px}.feed-ip{min-width:90px}.feed-location{display:none}.live-feed-list{max-height:250px}}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.dashboard-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}.panel-wide{grid-column:1 / -1}.panel-half{grid-column:span 1}.panel-title{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);padding:.75rem 1rem 0}.panel-iframe{width:100%;height:350px;border:none;flex:1}.panel-wide .panel-iframe{height:450px}.panel-map .panel-iframe{height:600px;flex:none}.panel-map-collapsed{cursor:pointer}.panel-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;padding:.75rem 1rem}.panel-toggle:hover{color:var(--color-text)}.panel-toggle-icon{transition:transform .2s}.panel-toggle-open{transform:rotate(180deg)}.panel-pie .panel-iframe{height:550px;flex:none}@media(max-width:768px){.dashboard-grid{grid-template-columns:1fr}.panel-half{grid-column:span 1}.panel-iframe{height:300px}.panel-wide .panel-iframe{height:350px}.panel-map .panel-iframe{height:500px}}.about{max-width:720px;margin:0 auto}.about-title{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem;color:var(--color-text)}.about-content p{margin-bottom:1.25rem;color:var(--color-text-muted);font-size:1.05rem;line-height:1.8}.about-content code{font-family:var(--font-mono);font-size:.9em;background:var(--color-surface);border:1px solid var(--color-border);padding:.15em .4em;border-radius:4px;color:var(--color-accent)}.about-author{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:.95rem}:root{--color-bg: #0f1117;--color-surface: #1a1d27;--color-border: #2a2d3a;--color-text: #e1e4ed;--color-text-muted: #8b8fa3;--color-accent: #4f7df9;--color-accent-hover: #6b93ff;--color-danger: #e74c3c;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}a{color:var(--color-accent);text-decoration:none;transition:color .2s}a:hover{color:var(--color-accent-hover)}.app{min-height:100vh;display:flex;flex-direction:column}.main{flex:1;max-width:1400px;margin:0 auto;padding:2rem 1.5rem;width:100%}.footer{text-align:center;padding:1.5rem;color:var(--color-text-muted);font-size:.875rem;border-top:1px solid var(--color-border)}