*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #06040f;--surface: rgba(255,255,255,.04);--border: rgba(255,255,255,.08);--text: #e2e8f0;--muted: #64748b;--purple: #a855f7;--pink: #ec4899;--cyan: #22d3ee;--orange: #f97316}body.light{--bg: #f1f5f9;--surface: rgba(255,255,255,.8);--border: rgba(0,0,0,.1);--text: #1e293b;--muted: #64748b}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s}.bg-mesh{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(168,85,247,.18) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 80%,rgba(236,72,153,.14) 0%,transparent 55%),radial-gradient(ellipse 70% 40% at 60% 40%,rgba(34,211,238,.08) 0%,transparent 50%)}body.light .bg-mesh{background:radial-gradient(ellipse 80% 60% at 20% 10%,rgba(168,85,247,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 80%,rgba(236,72,153,.06) 0%,transparent 55%)}.app{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 24px 80px}.header{padding:28px 0 16px;border-bottom:1px solid var(--border);margin-bottom:24px;animation:fadeDown .5s ease both}.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.logo{display:flex;align-items:center;gap:14px}.logo-icon{font-size:2.2rem}.stream-thumb{width:80px;height:45px;object-fit:cover;border-radius:8px;border:2px solid var(--purple);box-shadow:0 0 16px #a855f766}.logo h1{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.stream-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:500px;margin-top:2px}.stream-category{color:var(--purple);font-weight:600;font-size:.78rem;white-space:nowrap}.meta-sep{color:var(--muted);font-size:.75rem}.stream-title{color:var(--muted);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px;cursor:default;position:relative}.stream-title:hover:after{content:attr(title);position:absolute;top:calc(100% + 8px);left:0;background:#1a0d2e;border:1px solid rgba(168,85,247,.4);color:var(--text);padding:8px 12px;border-radius:8px;font-size:.8rem;white-space:normal;max-width:320px;z-index:100;box-shadow:0 8px 24px #00000080;line-height:1.4}.last-stream{color:var(--muted);font-size:.78rem}.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.theme-toggle{background:var(--surface);border:1.5px solid var(--border);border-radius:999px;padding:7px 12px;font-size:1rem;cursor:pointer;transition:all .2s}.theme-toggle:hover{border-color:var(--purple);transform:scale(1.08)}.live-badge{display:flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;font-weight:700;font-size:.85rem;letter-spacing:.08em;border:1.5px solid;transition:all .4s}.live-badge.live{color:#4ade80;border-color:#4ade80;background:rgba(74,222,128,.08)}.live-badge.offline{color:var(--muted);border-color:var(--border)}.pulse-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.live-badge.live .pulse-dot{animation:pulse 1.4s ease infinite}.refresh-timer{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);font-size:.78rem;color:var(--muted);white-space:nowrap}.refresh-timer strong{color:var(--purple);font-weight:700;min-width:22px;display:inline-block;text-align:center}.refresh-icon{font-size:.85rem;animation:spin 3s linear infinite}.hype-meter{margin-top:16px;padding:14px 18px;background:var(--surface);border:1.5px solid var(--border);border-radius:14px}.hype-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.hype-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}.hype-level{font-size:.82rem;font-weight:700}.hype-low{color:var(--muted)}.hype-mid{color:#22d3ee}.hype-high{color:#f97316}.hype-hype{color:#a855f7;animation:glow 1s ease infinite alternate}.hype-bar-bg{height:8px;background:var(--border);border-radius:999px;overflow:hidden}.hype-bar{height:100%;border-radius:999px;transition:width 1s ease}.hype-bar-low{background:var(--muted)}.hype-bar-mid{background:linear-gradient(90deg,#22d3ee,#a855f7)}.hype-bar-high{background:linear-gradient(90deg,#f97316,#ec4899)}.hype-bar-hype{background:linear-gradient(90deg,#a855f7,#ec4899,#f97316);background-size:200%;animation:shimmer 1.5s linear infinite}.hype-footer{display:flex;justify-content:space-between;margin-top:6px;font-size:.72rem;color:var(--muted)}.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:28px;scrollbar-width:none;animation:fadeUp .5s .1s ease both}.tabs::-webkit-scrollbar{display:none}.tab{display:flex;flex-direction:column;align-items:center;padding:10px 20px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .25s;font-size:.8rem}.tab:hover{border-color:var(--purple);color:var(--text)}.tab.active{border-color:var(--purple);color:var(--purple);background:rgba(168,85,247,.12);box-shadow:0 0 20px #a855f733}.tab-label{font-weight:600;font-size:.85rem}.tab-date{font-size:.7rem;opacity:.6;margin-top:2px}.main{display:flex;flex-direction:column;gap:24px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;animation:fadeUp .5s .2s ease both}.stat-card{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:16px;background:var(--surface);border:1.5px solid var(--border);transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;z-index:1}.stat-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.07;background:var(--card-accent, transparent);pointer-events:none}.stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 32px #0003}.stat-card.accent-purple{--card-accent: var(--purple);border-color:#a855f740}.stat-card.accent-pink{--card-accent: var(--pink);border-color:#ec489940}.stat-card.accent-cyan{--card-accent: var(--cyan);border-color:#22d3ee40}.stat-card.accent-orange{--card-accent: var(--orange);border-color:#f9731640}.stat-icon{font-size:1.8rem;flex-shrink:0}.stat-body{display:flex;flex-direction:column;gap:2px}.stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.stat-value{font-size:1.6rem;font-weight:800;letter-spacing:-.02em}.stat-sub{font-size:.72rem;color:var(--muted)}.section-tabs{display:flex;gap:8px;flex-wrap:wrap}.section-tab{padding:9px 20px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;font-size:.85rem;font-weight:600;transition:all .2s}.section-tab:hover{border-color:var(--purple);color:var(--text)}.section-tab.active{border-color:var(--purple);color:var(--purple);background:rgba(168,85,247,.12)}.glass{background:var(--surface);border:1.5px solid var(--border);border-radius:20px;padding:28px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.chart-section{animation:fadeUp .5s .3s ease both}.section-title{font-size:1.1rem;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px}.section-sub{font-size:.75rem;font-weight:400;color:var(--muted);margin-left:auto}.viewer-stats{display:flex;justify-content:center;gap:40px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);flex-wrap:wrap}.vstat{display:flex;flex-direction:column;align-items:center;gap:4px}.vstat-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}.vstat-value{font-size:1.4rem;font-weight:800}.custom-tooltip{background:#12091e;border:1px solid rgba(168,85,247,.4);border-radius:10px;padding:10px 14px;font-size:.82rem}.tooltip-time{color:var(--muted);margin-bottom:4px}.tooltip-viewers{display:flex;align-items:center;gap:6px;font-weight:600}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot.purple{background:var(--purple)}.dot.pink{background:var(--pink)}.chat-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (max-width: 768px){.chat-grid{grid-template-columns:1fr}}.leaderboard{animation:fadeUp .5s .4s ease both}.leader-list{display:flex;flex-direction:column;gap:6px;max-height:520px;overflow-y:auto;padding-right:6px}.leader-list::-webkit-scrollbar{width:4px}.leader-list::-webkit-scrollbar-thumb{background:var(--purple);border-radius:4px}.leader-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;border:1px solid transparent;transition:background .2s,border-color .2s}.leader-row:hover{background:rgba(255,255,255,.04);border-color:var(--border)}.leader-row.top3{background:rgba(168,85,247,.06);border-color:#a855f733}.leader-rank{width:36px;font-size:1rem;text-align:center;flex-shrink:0}.leader-name{flex:1;font-weight:500;font-size:.9rem}.leader-count{color:var(--purple);font-size:.82rem;font-weight:600;white-space:nowrap}.emote-section{animation:fadeUp .5s .5s ease both}.emote-list{display:flex;flex-direction:column;gap:10px}.emote-row{display:flex;align-items:center;gap:10px}.emote-rank{width:28px;font-size:.75rem;color:var(--muted);flex-shrink:0}.emote-name{width:100px;font-size:.85rem;font-weight:600;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.emote-bar-wrap{flex:1;height:8px;background:var(--border);border-radius:999px;overflow:hidden}.emote-bar{height:100%;background:linear-gradient(90deg,var(--purple),var(--pink));border-radius:999px;transition:width .8s ease}.emote-count{font-size:.78rem;color:var(--muted);white-space:nowrap;width:50px;text-align:right}.clip-section{animation:fadeUp .5s .3s ease both}.clip-wrapper{position:relative;padding-bottom:56.25%;height:0;border-radius:12px;overflow:hidden;margin-bottom:16px}.clip-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.clip-info{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}.clip-title{font-weight:600;font-size:.9rem}.clip-views{color:var(--muted);font-size:.82rem}.empty-state{display:flex;justify-content:center;align-items:center;min-height:120px;color:var(--muted);font-size:.9rem}.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin .8s linear infinite}.footer{text-align:center;color:var(--muted);font-size:.75rem;margin-top:60px;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:center;align-items:center;gap:0;flex-wrap:wrap}.footer-author{background:linear-gradient(135deg,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}.footer-sep{margin:0 10px;color:var(--border)}@keyframes fadeDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes pulse{0%,to{box-shadow:0 0 #4ade8080}50%{box-shadow:0 0 0 6px #4ade8000}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes glow{0%{text-shadow:0 0 8px #a855f7}to{text-shadow:0 0 20px #ec4899}}@keyframes shimmer{0%{background-position:0% 50%}to{background-position:200% 50%}}@media (max-width: 600px){.app{padding:0 14px 60px}.logo h1,.stat-value{font-size:1.3rem}.glass{padding:18px}.viewer-stats{gap:24px}.stream-title{max-width:180px}}.chat-tab-wrapper{display:flex;flex-direction:column;gap:20px}.hype-section{padding:20px 24px}.stream-title-full{color:var(--muted);font-size:.78rem;line-height:1.4;word-break:break-word;max-width:420px}.stream-thumb{cursor:zoom-in;transition:transform .2s,box-shadow .2s}.stream-thumb:hover{transform:scale(1.05);box-shadow:0 0 24px #a855f799}.lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;animation:fadeUp .2s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer}.lightbox-inner{position:relative;cursor:default;max-width:900px;width:90%;background:#0f0818;border:1.5px solid rgba(168,85,247,.3);border-radius:16px;overflow:hidden;box-shadow:0 24px 64px #000c;animation:fadeUp .25s ease}.lightbox-close{position:absolute;top:12px;right:12px;z-index:10;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;width:32px;height:32px;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.lightbox-close:hover{background:rgba(168,85,247,.5)}.lightbox-img{width:100%;display:block}.lightbox-meta{padding:16px 20px;display:flex;flex-direction:column;gap:4px}.lightbox-category{font-size:.75rem;color:var(--purple);font-weight:600}.lightbox-title{font-size:.95rem;font-weight:600;color:var(--text);line-height:1.4}body.light{--chart-tick: #475569}body.dark{--chart-tick: #94a3b8}body.light .custom-tooltip{background:#ffffff;border-color:#a855f74d;color:#1e293b}body.light .tooltip-time{color:#475569}.new-badge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;background:rgba(34,211,238,.15);color:#22d3ee;font-size:.65rem;font-weight:700;letter-spacing:.05em;vertical-align:middle}.notif-btn{background:var(--surface);border:1.5px solid var(--border);border-radius:999px;padding:7px 12px;font-size:1rem;cursor:pointer;transition:all .2s}.notif-btn:hover{border-color:var(--cyan);transform:scale(1.08)}.notif-on{font-size:.9rem;opacity:.7}.besttime-info{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);text-align:center;font-size:.9rem;color:var(--muted)}.besttime-info strong{color:var(--text)}.records-section{animation:fadeUp .4s ease both}.records-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.record-card{display:flex;align-items:center;gap:16px;padding:20px;border-radius:14px;background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.08);border-left:3px solid var(--record-color);transition:transform .2s}.record-card:hover{transform:translateY(-2px)}.record-icon{font-size:1.8rem;flex-shrink:0}.record-body{display:flex;flex-direction:column;gap:3px}.record-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.record-value{font-size:1.4rem;font-weight:800}.record-sub{font-size:.72rem;color:var(--muted)}.follower-stats-row{display:flex;justify-content:center;gap:40px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap}.settings-wrapper{position:static}.settings-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:var(--surface);border:1.5px solid var(--border);border-radius:50%;color:var(--muted);cursor:pointer;transition:all .25s}.settings-btn:hover,.settings-btn.open{border-color:var(--purple);color:var(--purple);background:rgba(168,85,247,.1);box-shadow:0 0 16px #a855f740}.settings-btn.open svg{animation:spin 3s linear infinite}.settings-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99998}.settings-panel{position:fixed;top:80px;right:24px;width:310px;z-index:99999;background:#0f0818;border:1.5px solid rgba(168,85,247,.35);border-radius:16px;box-shadow:0 20px 60px #000000d9,0 0 0 1px #a855f71a;overflow:hidden;animation:fadeDown .2s ease;isolation:isolate}body.light .settings-panel{background:#f8fafc;box-shadow:0 20px 60px #00000040,0 0 0 1px #a855f733}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 14px;border-bottom:1px solid var(--border);font-weight:700;font-size:.95rem}.settings-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:2px 6px;border-radius:6px;transition:background .2s}.settings-close:hover{background:var(--surface);color:var(--text)}.settings-section{padding:14px 18px 10px;border-bottom:1px solid var(--border)}.settings-section:last-of-type{border-bottom:none}.settings-section-label{display:block;font-size:.65rem;font-weight:700;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}.settings-row+.settings-row{border-top:1px solid rgba(255,255,255,.04)}.settings-row-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.settings-row-title{font-size:.85rem;font-weight:500}.settings-row-sub{font-size:.72rem;color:var(--muted)}.toggle-switch{flex-shrink:0;width:44px;height:24px;background:var(--border);border:none;border-radius:999px;cursor:pointer;position:relative;transition:background .3s}.toggle-switch:has(.toggle-knob.on){background:var(--purple)}.toggle-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .3s}.toggle-knob.on{transform:translate(20px)}.settings-badge{flex-shrink:0;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:600;background:var(--surface);border:1px solid var(--border);color:var(--muted);white-space:nowrap}.settings-badge.active{background:rgba(74,222,128,.1);border-color:#4ade80;color:#4ade80}.settings-enable-btn{flex-shrink:0;padding:5px 12px;border-radius:8px;font-size:.78rem;font-weight:600;background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.4);color:var(--purple);cursor:pointer;transition:all .2s;white-space:nowrap}.settings-enable-btn:hover{background:rgba(168,85,247,.25)}.settings-footer{padding:12px 18px;text-align:center;font-size:.72rem;color:var(--muted);border-top:1px solid var(--border)}.settings-footer strong{color:var(--purple)}.settings-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999999;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;animation:fadeUp .2s ease}.settings-modal{width:360px;max-width:90vw;background:#0f0818;border:1.5px solid rgba(168,85,247,.4);border-radius:20px;box-shadow:0 24px 80px #000000e6;overflow:hidden;animation:fadeUp .25s ease}body.light .settings-modal{background:#ffffff;border-color:#a855f74d;box-shadow:0 24px 80px #0003}