:root{color-scheme:dark;--bg:#090909;--surface:#151515;--surface-2:#1d1d1d;--ink:#f7f4ee;--muted:#aaa49b;--line:#ffffff16;--accent:#ff7a3d;--accent-2:#ffb15c;--green:#5dd39e;--red:#ff7085}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--ink);font:14px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Microsoft YaHei",sans-serif;background:radial-gradient(circle at 78% -10%,#8b3d1829 0,transparent 34%),radial-gradient(circle at 8% 35%,#4d231529 0,transparent 28%),var(--bg)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(#fff1 1px,transparent 1px),linear-gradient(90deg,#fff1 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,#000,transparent 65%)}
header{height:72px;padding:0 max(24px,calc((100vw - 1120px)/2));display:flex;align-items:center;gap:36px;position:sticky;top:0;z-index:10;background:#090909d9;border-bottom:1px solid var(--line);backdrop-filter:blur(20px)}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink);font-size:17px;font-weight:800;text-decoration:none;letter-spacing:-.02em}.logo{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#17110d;font-size:0;box-shadow:0 0 32px #ff7a3d3d}.logo::before{content:"♫";font-size:19px;font-weight:900}
nav{display:flex;gap:5px;padding:4px;border-radius:999px;background:#ffffff0a;border:1px solid #ffffff0c}nav a,.quiet{color:var(--muted);text-decoration:none;font-weight:700;transition:.18s ease}nav a{padding:8px 16px;border-radius:999px}nav a:hover,nav a.active{background:#fff;color:#111}.quiet{margin-left:auto;padding:10px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:#ffffff09}.quiet:hover{border-color:#ff9a6570;background:#ff7a3d12;color:#ffc096}
main{position:relative;max-width:1120px;margin:auto;padding:66px 24px 90px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:34px}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;color:var(--accent-2);font-weight:850}.eyebrow::before{content:"";width:20px;height:2px;background:var(--accent);border-radius:9px}.hero h1{font-size:clamp(42px,6vw,68px);line-height:1;margin:16px 0 14px;letter-spacing:-.065em;max-width:760px}.hero p,.section-title p,.task p,.hotspot p{margin:0;color:var(--muted)}.hero p{font-size:16px}
.status{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;background:#151515;border:1px solid var(--line);font-weight:700;box-shadow:0 10px 30px #0004}.status i{width:8px;height:8px;border-radius:50%;background:#79746f}.status.online i{background:var(--green);box-shadow:0 0 0 5px #5dd39e18,0 0 16px #5dd39e88}.status.offline i{background:var(--red)}
.card{position:relative;margin-bottom:18px;padding:28px;background:linear-gradient(145deg,#181818,#121212);border:1px solid var(--line);border-radius:22px;box-shadow:0 26px 70px #0006;overflow:hidden}.upload-card::after{content:"";position:absolute;width:230px;height:230px;right:-110px;top:-135px;border-radius:50%;background:#ff7a3d20;filter:blur(5px);pointer-events:none}.section-title{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;z-index:1}.section-title h2{font-size:22px;margin:0 0 4px;letter-spacing:-.025em}
.form{position:relative;display:grid;grid-template-columns:1fr 1.15fr auto;align-items:end;gap:14px;z-index:1}.form>*{min-width:0}label{display:grid;min-width:0;gap:8px}label>span{font-size:12px;font-weight:750;color:#d2ccc3}input{width:100%;height:54px;padding:0 15px;font:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:13px;outline:none;transition:.18s}input::placeholder{color:#77716b}input:focus,.filebox:focus-within{border-color:#ff9b667a;box-shadow:0 0 0 4px #ff7a3d14;background:#211b18}
.filebox{position:relative;min-height:54px;padding:10px 15px;overflow:hidden;background:var(--surface-2);border:1px dashed #ffffff2b;border-radius:13px;transition:.18s}.filebox input{position:absolute;inset:0;height:100%;opacity:0;cursor:pointer}.filebox b,.filebox small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filebox b{color:#f3eee7}.filebox small{margin-top:2px;color:var(--muted);font-size:11px}
.form button{position:relative;z-index:2;height:54px;padding:0 22px;border:0;border-radius:13px;cursor:pointer;color:#21130b;background:linear-gradient(110deg,var(--accent-2),var(--accent));font:inherit;font-weight:850;white-space:nowrap;box-shadow:0 10px 28px #ff6f2f28;transition:.18s}.form button:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 14px 32px #ff6f2f40}.form button span{margin-left:10px}.form button:disabled{opacity:.48;transform:none;cursor:not-allowed}
.message{position:relative;margin:14px 0 0;min-height:20px;color:var(--muted);z-index:1}.message.error,.task-error{color:var(--red)}.submit-progress{position:relative;margin-top:18px;padding:16px;background:#ffffff08;border:1px solid var(--line);border-radius:14px;z-index:1}.submit-progress.hidden{display:none}.row,.task-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.section-title>div,.task-head>div,.hotspot>div{min-width:0}.task-head h3,.hotspot h3{overflow-wrap:anywhere}.task-head .pill{flex:0 0 auto}.bar{height:6px;margin-top:11px;overflow:hidden;border-radius:20px;background:#ffffff10}.bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:0 0 14px #ff7a3d80;transition:width .35s}
.icon-button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;cursor:pointer;color:var(--ink);background:#ffffff09;font:20px/1 inherit;transition:.18s}.icon-button:hover{transform:rotate(25deg);border-color:#ff9b667a;color:var(--accent-2)}.empty{padding:38px;text-align:center;color:var(--muted);border:1px dashed #ffffff21;border-radius:15px;background:#ffffff05}.task-list{display:grid;gap:12px}.task{padding:18px;background:#ffffff07;border:1px solid var(--line);border-radius:15px;transition:.25s}.task.processing{border-color:#ff9b6638;background:linear-gradient(110deg,#ff7a3d0b,#ffffff07)}.task.complete{border-color:#5dd39e45;background:linear-gradient(110deg,#5dd39e0d,#ffffff07);animation:successIn .4s ease-out}.task h3,.hotspot h3{margin:0 0 3px;font-size:15px}.pill{padding:5px 10px;border-radius:99px;font-size:11px;font-weight:800}.pill.doing{color:#ffc096;background:#ff7a3d18}.pill.done{color:var(--green);background:#5dd39e17}.pill.fail{color:var(--red);background:#ff708517}.progress-meta{display:flex;justify-content:space-between;gap:12px;margin-top:16px;color:var(--muted);font-size:12px}.progress-meta b{color:var(--ink)}.active-progress{position:relative}.active-progress::after{content:"";position:absolute;inset:0;width:30%;background:linear-gradient(90deg,transparent,#fff9,transparent);animation:progressScan 1.5s linear infinite}.task-hint,.success-hint{display:flex;align-items:center;gap:9px;margin-top:14px;padding:11px 13px;border-radius:11px;font-size:13px}.task-hint{color:#ffc096;background:#ff7a3d12}.task-hint i{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 #ff7a3d80;animation:livePulse 1.4s infinite}.success-hint{color:#a6ebc9;background:#5dd39e12}.success-hint b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#102219;background:var(--green)}.open{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:11px 15px;border-radius:10px;color:#21130b;background:linear-gradient(110deg,var(--accent-2),var(--accent));font-weight:850;text-decoration:none}.open.ready{animation:readyPulse 1.7s ease-in-out infinite}
@keyframes progressScan{from{transform:translateX(-120%)}to{transform:translateX(440%)}}@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 #ff7a3d70}50%{box-shadow:0 0 0 7px #ff7a3d00}}@keyframes readyPulse{0%,100%{box-shadow:0 0 0 0 #ff7a3d35,0 8px 24px #ff7a3d20;transform:translateY(0)}50%{box-shadow:0 0 0 7px #ff7a3d00,0 12px 34px #ff7a3d50;transform:translateY(-2px)}}@keyframes successIn{from{transform:translateY(8px);opacity:.4}to{transform:none;opacity:1}}
.hotspots{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hotspot{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:18px;color:var(--ink);text-decoration:none;background:#ffffff07;border:1px solid var(--line);border-radius:15px;transition:.18s}.hotspot:hover{transform:translateY(-2px);background:#ffffff0d;border-color:#ff9b6655;box-shadow:0 15px 36px #0005}.hot-rank{font-size:18px;font-weight:900;color:#6f6861}.hot-go{font-size:18px;color:var(--accent-2)}
@media(max-width:900px){.form{grid-template-columns:minmax(0,1fr)}.form button{width:100%}}
@media(max-width:760px){header{height:64px;padding:0 14px;gap:10px}.brand span:last-child,.quiet{display:none}nav{gap:0}nav a{padding:7px 12px}main{padding:42px 15px 64px}.hero{align-items:flex-start;flex-direction:column}.hero h1{font-size:43px}.task-head{align-items:flex-start}.hotspots{grid-template-columns:1fr}.card{padding:20px;border-radius:18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}