:root { --bg:#06111a; --panel:#0b1b27dd; --panel-solid:#091923; --line:#1d4655; --text:#eafaff; --muted:#8aaab7; --cyan:#52e1ff; --green:#52e6a1; --violet:#ae8cff; --danger:#ff8c8c; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--text); background:linear-gradient(180deg,#081c28 0,#06111a 46%,#040c12 100%); font-family:"Noto Sans TC",Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
body::before { position:fixed; z-index:-2; inset:0; content:""; opacity:.28; background-image:linear-gradient(#5bdffb0c 1px,transparent 1px),linear-gradient(90deg,#5bdffb0c 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,black,transparent 74%); }
.atmosphere { position:fixed; z-index:-1; width:50vw; height:40vw; max-width:620px; max-height:500px; opacity:.14; pointer-events:none; filter:blur(96px); }
.atmosphere-one { top:-21vw; left:-18vw; background:#00d7ff; }.atmosphere-two { right:-21vw; bottom:5vw; background:#7757ff; }
main,footer { width:min(100%,1180px); margin:auto; padding-left:28px; padding-right:28px; }
header { display:flex; align-items:center; justify-content:space-between; min-height:94px; border-bottom:1px solid #153744; }
.brand { display:flex; align-items:center; gap:13px; color:var(--text); text-decoration:none; }.brand-mark { display:grid; width:46px; height:46px; place-items:center; border:2px solid transparent; border-radius:14px; background:linear-gradient(#081923,#081923) padding-box,linear-gradient(135deg,#ff527d,#ffc455,#69f7ac,#52e4ff,#786eff,#f168ff,#ff527d) border-box; color:#eaffff; font-size:26px; font-weight:800; text-shadow:0 0 8px #52e1ff,0 0 18px #9b6cff; box-shadow:inset 0 0 20px #52e1ff24,0 0 9px #ff5b85,0 0 18px #ffbf53,0 0 27px #57eaff,0 0 36px #996dff; }
.brand b { display:block; font-size:25px; line-height:1; letter-spacing:.05em; background:linear-gradient(100deg,#ff5e86 0%,#ffb347 16%,#fff06a 30%,#55f2a5 46%,#50dcff 62%,#7882ff 78%,#e56dff 92%,#ff5e86 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; filter:drop-shadow(0 0 5px #52e1ffcc) drop-shadow(0 0 13px #8b5cff88); animation:rainbow-shift 7s linear infinite; }.brand b span { color:inherit; }.brand small { display:block; margin-top:6px; color:#d9ea74; font-size:9px; font-weight:700; letter-spacing:.18em; }
.live-status { margin:0; color:#a6c9d3; font-size:12px; }.live-status i { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:62px; align-items:center; min-height:590px; padding:76px 0 54px; }.eyebrow { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:0; color:var(--cyan); font-size:11px; font-weight:800; letter-spacing:.13em; }.eyebrow i { color:#70e9ff99; font-style:normal; }
h1 { margin:16px 0 18px; font-size:clamp(42px,5.2vw,65px); line-height:1.22; letter-spacing:0; text-shadow:0 0 18px #45dfff4d; }.hero h1 em { display:block; font-style:normal; white-space:nowrap; background:linear-gradient(100deg,#ff5e86 0%,#ffb347 16%,#fff06a 30%,#55f2a5 46%,#50dcff 62%,#7882ff 78%,#e56dff 92%,#ff5e86 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; filter:drop-shadow(0 0 5px #52e1ffcc) drop-shadow(0 0 15px #8b5cff88); animation:rainbow-shift 7s linear infinite; }.lede { max-width:560px; margin:0; color:var(--muted); font-size:15px; line-height:1.8; }
@keyframes rainbow-shift { to { background-position:220% 0; } }
.download-panel { padding:24px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,#0d2431ed,#081722ed); box-shadow:0 24px 64px #0006,inset 0 0 30px #52e1ff0b; }.panel-heading { display:flex; gap:13px; align-items:center; }.panel-step { display:grid; width:34px; height:34px; place-items:center; border:1px solid #277184; border-radius:10px; background:#0e3543; color:var(--cyan); font-size:10px; font-weight:800; }.panel-heading h2 { margin:0; font-size:16px; }.panel-heading p { margin:3px 0 0; color:var(--muted); font-size:11px; }
form { margin-top:22px; }.url-field { display:flex; align-items:center; gap:9px; border:1px solid #285463; border-radius:11px; background:#07141c; transition:border-color .2s,box-shadow .2s; }.url-field:focus-within { border-color:var(--cyan); box-shadow:0 0 0 3px #52e1ff18; }.url-icon { padding-left:14px; color:#75dff2; font-weight:800; } input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:14px; padding:14px 14px 14px 0; } input::placeholder { color:#668895; }
.split-field,.media-field { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; margin-top:10px; color:#a7c7d0; font-size:11px; font-weight:700; }.split-field select,.split-field input,.media-field select { min-width:0; border:1px solid #285463; border-radius:9px; outline:0; background:#07141c; color:var(--text); font:inherit; }.split-field select,.media-field select { width:100%; padding:10px; }.media-field { grid-template-columns:auto minmax(0,1fr); }.split-field label[for="split-value"] { display:flex; align-items:center; min-width:111px; border:1px solid #285463; border-radius:9px; background:#07141c; }.split-field label[for="split-value"] input { width:64px; padding:10px 5px 10px 10px; border:0; }.split-field label[for="split-value"] span { padding-right:9px; color:#7aa1ad; }.split-note { min-height:16px; margin:8px 0 0; color:#7195a2; font-size:10px; line-height:1.45; }
button { font:inherit; cursor:pointer; }.submit-download { display:flex; width:100%; min-height:50px; align-items:center; justify-content:space-between; margin-top:10px; padding:0 17px; border:1px solid #4adfff; border-radius:11px; background:linear-gradient(135deg,#0f6c86,#155475); color:#edfcff; font-size:14px; font-weight:800; box-shadow:inset 0 0 18px #a8f5ff18,0 8px 22px #0004; transition:transform .16s,filter .16s; }.submit-download:hover { filter:brightness(1.12); transform:translateY(-1px); }.submit-download b { font-size:20px; }.notice { min-height:20px; margin:13px 0 0; color:#b9dce6; font-size:12px; }.panel-note { display:flex; gap:7px; margin:10px 0 0; padding-top:13px; border-top:1px solid #173844; color:#7195a2; font-size:10px; }.panel-note span { color:var(--green); }
.result { width:min(100%,790px); margin:56px auto 0; padding:24px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,#0c2130ed,#08151eed); box-shadow:0 18px 50px #0004; }.result-label { margin:0 0 8px; color:var(--green); font-size:12px; font-weight:800; }.result-label.danger { color:var(--danger); }.result h2 { margin:0 0 8px; font-size:26px; }.result h3 { margin:20px 0 -10px; color:#b9dce6; font-size:12px; }.result p { color:var(--muted); font-size:13px; }.result-warning { margin-top:18px; color:#ffd58c !important; }.files { display:grid; min-width:0; gap:8px; margin-top:20px; }.files a { display:flex; min-width:0; max-width:100%; align-items:center; justify-content:space-between; gap:15px; padding:14px; border:1px solid #244c5a; border-radius:11px; background:#081923; color:var(--text); text-decoration:none; transition:border-color .18s,background .18s; }.files a:hover { border-color:var(--cyan); background:#0b2632; }.files a span { min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }.files b { flex:none; color:#83ecc5; font-size:12px; }.delete-job { width:100%; min-height:44px; margin-top:12px; border:1px solid #8e4c51; border-radius:10px; background:#321c25; color:#ffc7c7; font-size:13px; font-weight:800; }.delete-job:hover { background:#47202a; }.delete-job:disabled { cursor:wait; opacity:.65; }
.download-progress { margin:20px 0 18px; padding:16px; border:1px solid #285463; border-radius:11px; background:#071720; }.progress-heading,.progress-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }.progress-heading strong { color:#dff9ff; font-size:13px; }.progress-heading b { color:var(--cyan); font-size:13px; font-variant-numeric:tabular-nums; }.progress-track { position:relative; height:9px; margin:12px 0 10px; overflow:hidden; border:1px solid #1d4655; border-radius:5px; background:#041017; }.progress-track span { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#52e6a1,#52e1ff,#ae8cff); box-shadow:0 0 14px #52e1ff8c; transition:width .45s ease; }.progress-track.indeterminate span { animation:progress-search 1.35s ease-in-out infinite; }.progress-meta { flex-wrap:wrap; justify-content:flex-start; color:#86a9b5; font-size:11px; font-variant-numeric:tabular-nums; }.progress-meta span + span::before { margin-right:10px; color:#386170; content:"•"; }
@keyframes progress-search { 0% { margin-left:-15%; } 50% { margin-left:52%; } 100% { margin-left:103%; } }
.retained-jobs { width:min(100%,790px); min-width:0; margin:24px auto 0; padding:24px; border:1px solid #275262; border-radius:16px; background:#071721d9; }.retained-heading,.retained-job-heading { display:flex; min-width:0; align-items:flex-start; justify-content:space-between; gap:16px; }.retained-heading h2 { margin:0; font-size:20px; }.retained-heading > span { padding:6px 9px; border:1px solid #285463; border-radius:999px; color:#a7c7d0; font-size:11px; }.retained-list { display:grid; min-width:0; gap:14px; margin-top:20px; }.retained-job { min-width:0; padding-top:15px; border-top:1px solid #173844; }.retained-job:first-child { padding-top:0; border-top:0; }.retained-job-heading p { margin:0 0 5px; color:#83ecc5; font-size:11px; font-weight:800; }.retained-job-heading h3 { margin:0; color:#a7c7d0; font-size:12px; }.delete-job.compact { width:auto; min-height:34px; margin:0; padding:0 13px; }.file-group-label { margin:15px 0 -10px; color:#a7c7d0; font-size:11px; font-weight:800; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } footer { display:flex; justify-content:space-between; gap:16px; padding-top:24px; padding-bottom:32px; color:#638390; font-size:10px; line-height:1.6; }
@media (max-width:800px) { main,footer { padding-left:20px; padding-right:20px; } header { min-height:82px; }.brand-mark { width:40px; height:40px; border-radius:12px; }.brand b { font-size:22px; }.brand small { font-size:8px; }.live-status { display:none; }.hero { grid-template-columns:1fr; gap:28px; min-height:0; padding:48px 0 38px; }.hero h1 { font-size:clamp(35px,10vw,45px); }.hero h1 em { font-size:clamp(26px,7.8vw,32px); letter-spacing:-.03em; line-height:1.36; }.download-panel { padding:19px; }.split-field { grid-template-columns:1fr; gap:6px; }.split-field label[for="split-value"] { width:100%; }.result,.retained-jobs { margin-top:36px; padding:18px; }.retained-heading,.retained-job-heading { gap:10px; }.files a { width:100%; align-items:flex-start; flex-direction:column; gap:8px; }.files a span { width:100%; }.files b { max-width:100%; } footer { flex-direction:column; padding-top:20px; } }
@media (prefers-reduced-motion:reduce) { .brand b,.hero h1 em,.progress-track.indeterminate span { animation:none; } }