:root { color-scheme: dark; --bg:#07121d; --panel:rgba(12,27,42,.9); --line:rgba(162,184,208,.16); --text:#f6f8fb; --muted:#8fa2b7; --green:#66f2a4; --cyan:#4ed9ff; --danger:#ff7185; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { min-width:320px; min-height:100vh; margin:0; overflow-x:hidden; color:var(--text); background:linear-gradient(rgba(78,217,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(78,217,255,.025) 1px,transparent 1px),radial-gradient(circle at 85% 8%,#163654 0,transparent 34%),var(--bg); background-size:42px 42px,42px 42px,auto,auto; }
button,input { font:inherit; } button { color:inherit; }
.glow { position:fixed; border-radius:50%; filter:blur(100px); pointer-events:none; opacity:.15; }
.glow-a { width:430px; height:430px; right:-260px; top:25%; background:var(--cyan); }
.glow-b { width:360px; height:360px; left:-220px; bottom:-220px; background:var(--green); }
.shell { position:relative; width:min(1180px,calc(100% - 40px)); margin:auto; padding:28px 0 38px; }
header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand-mark { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(102,242,164,.42); border-radius:14px; background:rgba(102,242,164,.09); color:var(--green); font-weight:900; }
.brand strong,.brand small { display:block; }.brand strong { font-size:14px; letter-spacing:.16em; }.brand small { margin-top:3px; color:var(--muted); font-size:9px; letter-spacing:.18em; }
.node-state { display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid var(--line); border-radius:99px; background:rgba(8,19,30,.7); color:var(--muted); font-size:11px; }
.node-state i,.badge i { width:7px; height:7px; border-radius:50%; background:#78899b; }.node-state.online i,.channel-card.ready .badge i { background:var(--green); box-shadow:0 0 13px var(--green); }.node-state.offline i,.channel-card.failed .badge i { background:var(--danger); }
.hero { padding:82px 0 42px; }.eyebrow { margin:0 0 18px; color:var(--green); font-size:11px; font-weight:900; letter-spacing:.22em; }
h1 { margin:0; font-size:clamp(45px,6.5vw,78px); line-height:.99; letter-spacing:-.062em; } h1 em { color:transparent; -webkit-text-stroke:1px rgba(246,248,251,.75); font-style:normal; }
.lead { max-width:760px; margin:25px 0 0; color:#a9b8c8; font-size:15px; line-height:1.85; }
.summary-card { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-bottom:14px; padding:22px 24px; border:1px solid rgba(78,217,255,.2); border-radius:19px; background:linear-gradient(120deg,rgba(78,217,255,.08),rgba(102,242,164,.04)); }
.summary-main { display:flex; align-items:center; gap:16px; }.summary-icon { width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; background:rgba(78,217,255,.1); color:var(--cyan); font-size:23px; }
.summary-main small { color:var(--cyan); font-size:9px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }.summary-main h2 { margin:3px 0; font-size:18px; }.summary-main p { margin:0; color:var(--muted); font-size:10px; }
#refreshAllButton { min-height:42px; flex:0 0 auto; padding:0 17px; border:0; border-radius:11px; background:var(--green); color:#06140d; font-size:11px; font-weight:900; cursor:pointer; } #refreshAllButton:disabled { opacity:.55; cursor:wait; }
.summary-actions { display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.export-button,#refreshAllButton { min-height:42px; display:flex; align-items:center; justify-content:center; padding:0 17px; border-radius:11px; font-size:11px; font-weight:900; cursor:pointer; }
.export-button { border:1px solid rgba(78,217,255,.3); background:rgba(78,217,255,.08); color:var(--cyan); text-decoration:none; }
.channel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.channel-card { min-width:0; padding:20px; border:1px solid var(--line); border-radius:19px; background:rgba(10,22,35,.88); box-shadow:0 20px 60px rgba(0,0,0,.18); transition:border-color .2s,transform .2s; }
.channel-card.ready { border-color:rgba(102,242,164,.22); }.channel-card.failed { border-color:rgba(255,113,133,.25); }.channel-card:hover { transform:translateY(-1px); }
.channel-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; }.channel-logo { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,var(--green),var(--cyan)); color:#06131e; font-size:18px; font-weight:950; }
.channel-head small { display:block; color:var(--muted); font-size:8px; letter-spacing:.13em; }.channel-head h2 { margin:2px 0; font-size:16px; }.channel-head code { color:#6f8499; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:9px; }
.channel-card[data-provider="sbs"] .channel-logo { background:linear-gradient(135deg,#ff7185,#ffb45e); }
.badge { display:flex; align-items:center; gap:6px; padding:7px 8px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:8px; letter-spacing:.1em; text-transform:uppercase; }.channel-card.ready .badge { color:var(--green); border-color:rgba(102,242,164,.2); }.channel-card.failed .badge { color:var(--danger); border-color:rgba(255,113,133,.2); }
.command { overflow:hidden; margin:15px 0; padding:10px 11px; border:1px solid var(--line); border-radius:9px; background:#071421; color:#8296aa; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.command code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.channel-card label { display:block; margin:0 0 7px 2px; color:#6f8499; font-size:8px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.output-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }.output-row input { min-width:0; border:1px solid rgba(102,242,164,.18); outline:none; border-radius:9px; padding:11px; background:#071421; color:#b8dcc9; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:9px; }.copy { min-width:58px; border:0; border-radius:9px; background:var(--green); color:#06140d; font-size:10px; font-weight:900; cursor:pointer; }
.channel-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; color:#6f8499; font-size:8px; }.channel-foot b { color:#aab9c8; font-weight:600; }.refresh-one { border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:rgba(255,255,255,.025); color:#9cafc0; font-size:8px; cursor:pointer; }.refresh-one:disabled { opacity:.55; cursor:wait; }
.how-it-works { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }.how-it-works article { display:flex; gap:14px; min-height:130px; padding:20px; border:1px solid var(--line); border-radius:17px; background:rgba(14,29,44,.68); }.how-it-works article>span { flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:rgba(78,217,255,.09); color:var(--cyan); font-size:9px; font-weight:900; }.how-it-works strong { font-size:13px; }.how-it-works p { margin:8px 0 0; color:var(--muted); font-size:11px; line-height:1.7; }
.notice { display:grid; grid-template-columns:auto 1fr; gap:20px; margin-top:12px; padding:18px 20px; border:1px solid rgba(255,255,255,.08); border-radius:15px; background:rgba(255,255,255,.025); }.notice strong { color:#b9c6d3; font-size:11px; }.notice p { margin:0; color:#708499; font-size:10px; line-height:1.7; }
footer { display:flex; justify-content:space-between; gap:20px; padding:26px 4px 0; color:#51667b; font-size:9px; font-weight:800; letter-spacing:.12em; }
@media (max-width:760px) { .shell { width:min(100% - 24px,1180px); padding-top:18px; }.node-state span { display:none; }.node-state { padding:11px; }.hero { padding:60px 2px 31px; }h1 { font-size:clamp(43px,14vw,64px); }.lead { font-size:13px; }.summary-card { align-items:stretch; flex-direction:column; }.channel-grid { grid-template-columns:1fr; }.how-it-works { grid-template-columns:1fr; }.how-it-works article { min-height:auto; }.notice { grid-template-columns:1fr; gap:7px; }footer { flex-direction:column; gap:7px; } }
@media (max-width:430px) { .channel-card { padding:16px; }.channel-head { grid-template-columns:auto 1fr; }.badge { grid-column:1/-1; width:max-content; }.output-row { grid-template-columns:1fr; }.copy { min-height:39px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }