.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid var(--border);background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.nav-left{display:flex;align-items:center;gap:12px}.nav-brand{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-strong);letter-spacing:.06em;text-transform:uppercase}.nav-brand .brand-icon{color:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}.nav-right{display:flex;align-items:center;gap:14px}.status{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--btn)}.status .dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px #10b9812e,0 0 10px #10b98199;animation:pulse 1.8s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}.hero{max-width:1100px;margin:0 auto;padding:56px 24px 20px;text-align:center;position:relative}.hero h1{margin:0 0 14px;font-size:34px;font-weight:700;letter-spacing:.02em;color:var(--text-strong);display:inline-flex;align-items:center;gap:14px;text-shadow:0 0 30px rgba(34,211,238,.25)}.hero h1 .icon{color:var(--accent);filter:drop-shadow(0 0 12px var(--accent));animation:float 4s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.info-card{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;background:var(--card);border:1px solid var(--border);border-radius:4px;padding:16px 28px;max-width:820px;margin:0 auto 32px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--glow-soft),inset 0 1px #ffffff0a}.info-card:before,.info-card:after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--accent);pointer-events:none}.info-card:before{top:-1px;left:-1px;border-right:none;border-bottom:none}.info-card:after{bottom:-1px;right:-1px;border-left:none;border-top:none}.info-item{display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap}.info-item .label{font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}.info-item .label:after{content:""}.info-item .value{font-family:JetBrains Mono,Menlo,Consolas,ui-monospace,monospace;font-size:14px;font-weight:500;color:var(--text-strong);font-variant-numeric:tabular-nums;letter-spacing:.02em}.monitor{max-width:1100px;margin:0 auto;padding:0 24px}.monitor-frame{position:relative;background:var(--frame-bg);border:1px solid var(--border-strong);border-radius:4px;overflow:hidden;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center;box-shadow:var(--glow),inset 0 0 60px #00000080}.monitor-frame .layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .7s ease;will-change:opacity}.monitor-frame .layer.show{opacity:1}.monitor-frame .placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--muted);font-size:13px;text-align:center;padding:24px;letter-spacing:.1em;text-transform:uppercase}.placeholder-spinner{width:32px;height:32px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.corner{position:absolute;width:22px;height:22px;pointer-events:none;z-index:2}.corner:before,.corner:after{content:"";position:absolute;background:var(--accent);box-shadow:0 0 8px var(--accent)}.corner:before{width:100%;height:2px}.corner:after{width:2px;height:100%}.corner.tl{top:8px;left:8px}.corner.tr{top:8px;right:8px}.corner.tr:before{right:0}.corner.tr:after{right:0}.corner.bl{bottom:8px;left:8px}.corner.bl:before{bottom:0}.corner.br{bottom:8px;right:8px}.corner.br:before{bottom:0;right:0}.corner.br:after{right:0}.progress-bar{position:absolute;top:0;left:0;right:0;height:2px;z-index:3;overflow:hidden;pointer-events:none}.progress-bar:before{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--accent),rgba(255,255,255,.9),var(--accent),transparent);box-shadow:0 0 14px var(--accent);opacity:0;transition:opacity .2s ease}.progress-bar.active:before{opacity:1;animation:progress-slide 1.2s cubic-bezier(.4,0,.6,1) infinite}@keyframes progress-slide{0%{left:-40%}to{left:100%}}.refresh-badge{position:absolute;top:14px;left:50%;transform:translate(-50%);z-index:3;display:inline-flex;align-items:center;gap:8px;padding:5px 14px;font-size:11px;letter-spacing:.18em;font-weight:500;color:var(--accent);background:#030712bf;border:1px solid var(--border-strong);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--glow-soft);animation:badge-in .3s ease;pointer-events:none}.refresh-badge .badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:badge-blink 1s ease-in-out infinite}@keyframes badge-in{0%{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%)}}@keyframes badge-blink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.monitor-frame:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(34,211,238,.06) 50%,transparent 100%);background-size:100% 200%;animation:scan 6s linear infinite;z-index:1}@keyframes scan{0%{background-position:0 -100%}to{background-position:0 100%}}.retry-tip{margin-top:12px;color:var(--muted);font-size:12px;text-align:center;letter-spacing:.14em;text-transform:uppercase}.actions{max-width:1100px;margin:22px auto 48px;padding:0 24px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.btn{position:relative;background:var(--btn);border:1px solid var(--border);border-radius:4px;padding:11px 22px;font-size:12px;font-weight:600;color:var(--text-strong);cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:8px;letter-spacing:.14em;text-transform:uppercase}.btn:hover{background:var(--btn-hover);border-color:var(--border-strong);box-shadow:var(--glow-soft);color:var(--accent)}.btn:active{transform:translateY(1px)}.theme-toggle{background:var(--btn);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .2s ease;letter-spacing:.1em;text-transform:uppercase}.theme-toggle:hover{background:var(--btn-hover);border-color:var(--border-strong);color:var(--accent);box-shadow:var(--glow-soft)}.footer{border-top:1px solid var(--border);padding:22px 24px;background:var(--footer-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}.footer-left{text-align:left}.footer-center{text-align:right;color:var(--muted);font-size:12px;letter-spacing:.1em}.footer a{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500}@media (max-width: 720px){.hero h1{font-size:22px;gap:8px}.info-card{grid-template-columns:1fr;gap:12px;padding:16px 20px}.info-item{justify-content:space-between}.footer-inner{grid-template-columns:1fr;text-align:center}.footer-left,.footer-center{text-align:center}.nav{flex-wrap:wrap;gap:10px;padding:12px 16px}}:root,:root[data-theme=dark]{--bg: #030712;--bg-deep: #000308;--surface: rgba(10, 18, 40, .6);--text: #e0f2fe;--text-strong: #f0f9ff;--muted: #64748b;--link: #22d3ee;--link-hover: #67e8f9;--border: rgba(34, 211, 238, .18);--border-strong: rgba(34, 211, 238, .4);--card: rgba(15, 23, 42, .55);--success: #10b981;--accent: #22d3ee;--accent-2: #a78bfa;--btn: rgba(34, 211, 238, .08);--btn-hover: rgba(34, 211, 238, .18);--footer-bg: rgba(3, 7, 18, .8);--nav-bg: rgba(3, 7, 18, .7);--frame-bg: #000000;--glow: 0 0 20px rgba(34, 211, 238, .35);--glow-soft: 0 0 12px rgba(34, 211, 238, .2);color-scheme:dark}:root[data-theme=light]{--bg: #f8fafc;--bg-deep: #e2e8f0;--surface: rgba(255, 255, 255, .8);--text: #0f172a;--text-strong: #020617;--muted: #64748b;--link: #0891b2;--link-hover: #0e7490;--border: rgba(8, 145, 178, .2);--border-strong: rgba(8, 145, 178, .45);--card: rgba(255, 255, 255, .85);--success: #059669;--accent: #0891b2;--accent-2: #7c3aed;--btn: rgba(8, 145, 178, .08);--btn-hover: rgba(8, 145, 178, .16);--footer-bg: rgba(241, 245, 249, .9);--nav-bg: rgba(255, 255, 255, .75);--frame-bg: #0b1220;--glow: 0 0 18px rgba(8, 145, 178, .25);--glow-soft: 0 0 10px rgba(8, 145, 178, .15);color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;position:relative;overflow-x:hidden;transition:background-color .3s ease,color .3s ease}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-2;background:radial-gradient(ellipse 80% 60% at 20% 0%,rgba(34,211,238,.12),transparent 60%),radial-gradient(ellipse 70% 50% at 85% 100%,rgba(167,139,250,.1),transparent 60%),radial-gradient(ellipse 50% 40% at 50% 50%,rgba(14,165,233,.06),transparent 70%)}:root[data-theme=light] body:before{background:radial-gradient(ellipse 80% 60% at 20% 0%,rgba(8,145,178,.08),transparent 60%),radial-gradient(ellipse 70% 50% at 85% 100%,rgba(124,58,237,.06),transparent 60%)}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1;background-image:radial-gradient(1px 1px at 13% 22%,#ffffff 50%,transparent 100%),radial-gradient(1px 1px at 27% 78%,#ffffff 50%,transparent 100%),radial-gradient(1px 1px at 42% 35%,#cbd5e1 50%,transparent 100%),radial-gradient(1.5px 1.5px at 61% 61%,#ffffff 50%,transparent 100%),radial-gradient(1px 1px at 73% 18%,#93c5fd 50%,transparent 100%),radial-gradient(1px 1px at 88% 47%,#ffffff 50%,transparent 100%),radial-gradient(1.5px 1.5px at 8% 56%,#67e8f9 50%,transparent 100%),radial-gradient(1px 1px at 35% 90%,#ffffff 50%,transparent 100%),radial-gradient(1px 1px at 53% 8%,#c4b5fd 50%,transparent 100%),radial-gradient(1px 1px at 91% 82%,#ffffff 50%,transparent 100%),radial-gradient(1px 1px at 18% 12%,#ffffff 40%,transparent 100%),radial-gradient(1px 1px at 67% 92%,#ffffff 40%,transparent 100%);background-size:100% 100%;opacity:.6;animation:twinkle 6s ease-in-out infinite}:root[data-theme=light] body:after{opacity:0}@keyframes twinkle{0%,to{opacity:.55}50%{opacity:.85}}a{color:var(--link);text-decoration:none;transition:color .15s ease}a:hover{color:var(--link-hover);text-shadow:0 0 8px currentColor}button{font-family:inherit}