:root {
  --bg: #f5f6fa;
  --surface: #fff;
  --text: #25293c;
  --muted: #8c91a6;
  --line: #e7e8f0;
  --primary: #6266f6;
  --primary-dark: #4f53df;
  --primary-soft: #eff0ff;
  --success: #2bc58a;
  --danger: #ee626b;
  --shadow: 0 12px 34px rgba(35,39,58,.08), 0 2px 8px rgba(35,39,58,.04);
  --sidebar: 258px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: var(--bg); font-family: Inter,"Microsoft YaHei","PingFang SC",system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing: antialiased; }
button,input { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar); display: flex; flex-direction: column; background: #fbfbfd; border-right: 1px solid var(--line); transition: transform .25s ease; }
.brand-row { height: 76px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; display: block; flex: 0 0 40px; border: 2px solid rgba(255,255,255,.9); border-radius: 13px; object-fit: cover; object-position: center; background: var(--primary-soft); box-shadow: 0 8px 18px rgba(98,102,246,.24); }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 16px; }
.brand-copy small { color: var(--muted); font-size: 11px; }
.icon-button { border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.sidebar-close { display: none; color: var(--muted); font-size: 24px; }
.side-nav { padding: 9px 14px; }
.nav-label { margin: 0 12px 8px; color: #b4b7c5; font-size: 11px; letter-spacing: .14em; }
.nav-item { min-height: 46px; padding: 0 14px; display: flex; align-items: center; gap: 12px; border-radius: 11px; color: white; background: linear-gradient(135deg,#6d70ff,#5b5ff1); box-shadow: 0 8px 17px rgba(98,102,246,.25); font-size: 14px; font-weight: 600; }
.nav-icon { width: 20px; text-align: center; }
.sidebar-note { margin: 24px 16px; padding: 14px; display: flex; align-items: flex-start; gap: 10px; border-radius: 12px; background: var(--primary-soft); }
.sidebar-note > span { flex: 0 0 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: var(--primary); background: white; font-size: 12px; font-weight: 800; }
.sidebar-note p { margin: 0; display: grid; gap: 4px; }
.sidebar-note strong { font-size: 11px; }
.sidebar-note small { color: var(--muted); font-size: 10px; line-height: 1.55; }
.sidebar-footer { margin: auto 16px 18px; padding: 13px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.sidebar-footer i,.secure-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px #e4f8f0; }
.sidebar-footer strong,.sidebar-footer small { display: block; }
.sidebar-footer strong { font-size: 11px; }.sidebar-footer small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.sidebar-backdrop { display: none; }
.main-area { min-width: 0; min-height: 100vh; margin-left: var(--sidebar); overflow-x: clip; }
.topbar { position: sticky; top: 0; z-index: 30; height: 76px; padding: 0 clamp(20px,3vw,48px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(231,232,240,.85); background: rgba(245,246,250,.88); backdrop-filter: blur(14px); }
.topbar-left,.topbar-right { display: flex; align-items: center; }
.menu-button { display: none; margin-right: 10px; font-size: 21px; }
.breadcrumb { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }.breadcrumb b { color: #c7c9d5; font-weight: 400; }.breadcrumb strong { color: #555a70; }
.topbar-right { gap: 9px; color: var(--muted); font-size: 11px; }.topbar-right a { margin-left: 13px; color: var(--primary); font-weight: 600; }.secure-dot { width: 7px; height: 7px; }
.content-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 34px clamp(20px,4vw,54px) 30px; }
.hero { min-height: 230px; padding: 38px 44px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; border-radius: 22px; color: white; background: linear-gradient(132deg,#5d61ef 0%,#7166f3 54%,#8b6cf6 100%); box-shadow: 0 18px 38px rgba(89,93,226,.22); }
.hero::before { content:""; position:absolute; width:360px; height:360px; right:-90px; top:-170px; border-radius:50%; background:rgba(255,255,255,.08); }
.hero-copy { position: relative; z-index: 2; min-width: 0; max-width: 650px; }.eyebrow { margin: 0 0 9px; color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .17em; }.hero .eyebrow { color:#dfe0ff; }.hero h1 { margin: 0; font-size: clamp(30px,4vw,46px); letter-spacing: -.045em; }.hero h1 span { color: #dfe0ff; }.hero-copy > p:last-child { margin: 14px 0 0; color: #e5e6ff; font-size: 13px; line-height: 1.8; }
.hero-art { position: relative; z-index: 2; flex: 0 0 190px; height: 160px; display: grid; place-items: center; }.play-ring { width: 92px; height: 92px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:rgba(255,255,255,.13); box-shadow:0 0 0 18px rgba(255,255,255,.06); }.play-ring i { width:0;height:0;margin-left:7px;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:22px solid white; }.orbit { position:absolute; border:1px solid rgba(255,255,255,.2); border-radius:50%; }.orbit-one { width:150px;height:150px; }.orbit-two { width:190px;height:190px; }
.parser-card,.result-card,.loading-card { margin-top: 22px; padding: 25px; border:1px solid rgba(231,232,240,.9); border-radius:18px; background:white; box-shadow:var(--shadow); }
.card-heading,.card-heading > div,.result-header,.result-header > div { display:flex; align-items:center; justify-content:space-between; gap:12px; }.card-heading > div,.result-header > div { justify-content:flex-start; }.section-icon { flex:0 0 40px;height:40px;display:grid;place-items:center;border-radius:11px;color:var(--primary);background:var(--primary-soft);font-size:20px;font-weight:800; }.section-icon.success { color:var(--success);background:#e8faf3; }.card-heading h2,.result-header h2 { margin:0;font-size:17px; }.card-heading p,.result-header p { margin:4px 0 0;color:var(--muted);font-size:10px; }.privacy-label { padding:6px 10px;border-radius:99px;color:#6d7288;background:#f5f5f9;font-size:9px; }
.parser-form { margin-top:20px;display:grid;grid-template-columns:1fr auto;gap:11px; }.url-field { min-width:0;height:54px;padding:0 13px;display:flex;align-items:center;gap:10px;border:1px solid #dfe0e9;border-radius:12px;background:#fafafe;transition:.18s ease; }.url-field:focus-within { border-color:#aeb0ff;background:white;box-shadow:0 0 0 4px rgba(98,102,246,.09); }.field-icon { color:#9095aa;font-size:19px; }.url-field input { min-width:0;flex:1;border:0;outline:0;color:var(--text);background:transparent;font-size:13px; }.url-field input::placeholder { color:#b5b8c6; }.clear-button { width:28px;height:28px;border:0;border-radius:8px;color:#9195a8;background:#ededf4;cursor:pointer; }.parse-button { min-width:140px;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:12px;color:white;background:var(--primary);box-shadow:0 8px 17px rgba(98,102,246,.24);cursor:pointer;font-size:13px;font-weight:700;transition:.18s ease; }.parse-button:hover { background:var(--primary-dark);transform:translateY(-1px); }.parse-button:disabled { opacity:.65;cursor:wait;transform:none; }.parse-button b { font-size:17px; }
.supported-row { margin-top:14px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:10px; }.supported-row div { display:flex;flex-wrap:wrap;gap:7px; }.supported-row b { padding:5px 8px;border-radius:7px;color:#74798e;background:#f5f5f9;font-weight:500; }.form-message { min-height:18px;margin:10px 0 -5px;color:var(--danger);font-size:11px; }.loading-card { display:flex;align-items:center;justify-content:center;gap:16px;box-shadow:0 5px 18px rgba(35,39,58,.05); }.spinner { width:34px;height:34px;border:3px solid #e8e9ff;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite; }.loading-card strong { font-size:13px; }.loading-card p { margin:4px 0 0;color:var(--muted);font-size:10px; }@keyframes spin{to{transform:rotate(360deg)}}
.reset-button,.copy-button { padding:9px 12px;border:1px solid #d9daf5;border-radius:9px;color:var(--primary);background:white;cursor:pointer;font-size:10px;font-weight:600; }.video-summary { margin-top:20px;padding:18px;display:grid;grid-template-columns:minmax(360px,44%) minmax(0,1fr);align-items:center;gap:24px;border-radius:14px;background:#f8f8fc; }.video-poster { position:relative;min-height:0;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;border-radius:11px;color:white;background:linear-gradient(135deg,#202238,#515777);box-shadow:0 10px 24px rgba(31,34,56,.13); }.video-poster video { width:100%;height:100%;min-height:0;display:block;object-fit:contain;background:#11131f; }.video-placeholder { position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;background:linear-gradient(135deg,#3c405c,#676d98); }.video-placeholder > span { width:47px;height:47px;display:grid;place-items:center;padding-left:3px;border-radius:50%;background:rgba(255,255,255,.18);font-size:18px; }.video-placeholder p { margin:0;color:#e8e9ff;font-size:9px; }.video-poster small { position:absolute;right:8px;bottom:8px;z-index:2;padding:4px 6px;border-radius:5px;background:rgba(18,20,31,.72);font-size:9px;pointer-events:none; }.source-badge { display:inline-block;padding:5px 8px;border-radius:7px;color:var(--primary);background:var(--primary-soft);font-size:9px;font-weight:700; }.video-copy { min-width:0;padding-right:4px; }.video-copy h3 { margin:10px 0 7px;font-size:17px; }.video-copy > p { display:-webkit-box;overflow:hidden;margin:0;color:var(--muted);font-size:10px;line-height:1.7;-webkit-box-orient:vertical;-webkit-line-clamp:3; }.author-row { margin-top:14px;display:flex;align-items:center;gap:9px; }.author-avatar { width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:white;background:var(--primary);font-size:11px;font-weight:800; }.author-row div { display:grid;gap:2px; }.author-row strong { font-size:10px; }.author-row small { color:var(--muted);font-size:8px; }
.metadata-grid { margin:15px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }.metadata-grid div { padding:14px;border:1px solid var(--line);border-radius:11px; }.metadata-grid dt { color:var(--muted);font-size:9px; }.metadata-grid dd { margin:6px 0 0;font-size:12px;font-weight:700; }.download-message { min-height:18px;margin:12px 0 -5px;color:var(--muted);font-size:10px;text-align:right; }.download-message.error { color:var(--danger); }.result-actions { margin-top:15px;display:flex;justify-content:flex-end;gap:9px; }.open-button,.download-button { padding:10px 14px;border:0;border-radius:9px;color:white;background:var(--primary);font-size:10px;font-weight:700;cursor:pointer; }.open-button.secondary { color:var(--primary);background:var(--primary-soft); }.download-button:disabled { opacity:.65;cursor:wait; }
.toast { position:fixed;left:50%;bottom:28px;z-index:100;padding:11px 17px;border-radius:10px;color:white;background:#2d3145;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:.22s ease;font-size:11px; }.toast.show { opacity:1;transform:translate(-50%,0); }
@media(max-width:1020px){.video-summary{grid-template-columns:minmax(300px,42%) minmax(0,1fr);gap:18px}}
@media(max-width:820px){.sidebar{transform:translateX(-100%);box-shadow:18px 0 40px rgba(35,39,58,.14)}body.sidebar-open .sidebar{transform:translateX(0)}.sidebar-close,.menu-button{display:block}.sidebar-backdrop{position:fixed;inset:0;z-index:35;background:rgba(24,27,43,.38)}body.sidebar-open .sidebar-backdrop{display:block}.main-area{margin-left:0}.hero-art{flex-basis:130px}.metadata-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){body.sidebar-open .sidebar{z-index:60}.brand-row{padding-top:env(safe-area-inset-top);height:calc(76px + env(safe-area-inset-top));}}
@media(max-width:680px){.video-summary{grid-template-columns:1fr}.video-poster{width:100%;max-width:560px;margin:0 auto}}
@media(max-width:590px){.topbar{position:sticky;top:0;z-index:50;height:66px;padding:0 14px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.breadcrumb span,.breadcrumb b,.topbar-right span{display:none}.topbar-right a{margin-left:0}.content-wrap{padding:16px 14px 28px}.hero{min-height:250px;padding:28px 22px;align-items:flex-start}.hero h1{font-size:28px;line-height:1.25}.hero h1 span{display:block}.hero-copy>p:last-child{font-size:12px}.hero-art{position:absolute;right:-20px;bottom:-38px;opacity:.45}.parser-card,.result-card{width:100%;padding:18px}.card-heading{align-items:flex-start}.card-heading>div{min-width:0}.privacy-label{display:none}.parser-form{grid-template-columns:minmax(0,1fr)}.parse-button{width:100%;height:50px}.supported-row{align-items:flex-start}.video-poster,.video-poster video{min-height:190px}.metadata-grid{grid-template-columns:1fr 1fr}.step-grid{grid-template-columns:1fr}.steps{padding-top:46px}footer{align-items:flex-start;flex-direction:column;gap:7px}.result-actions{flex-wrap:wrap}.result-actions>*{flex:1 1 120px;text-align:center}}
.sidebar-footer { justify-content:center; text-align:center; }
.sidebar-footer { justify-content:flex-start; text-align:left; }
.module-item { margin-top:6px; border:0; width:100%; color:#8c91a6; background:transparent; box-shadow:none; cursor:not-allowed; font-weight:500; }
.module-item .nav-icon { color:#a4a8b8; }
.module-label { margin-top:20px; }
.module-item { border:1px solid var(--line); color:#62677d; background:#fff; box-shadow:0 3px 10px rgba(35,39,58,.04); }
.module-item:hover { background:#f5f5ff; }
.module-item { margin-top:50px; }
.module-anonymous { color:#6557c8; background:#f1efff; border-color:#ddd8ff; }
.module-anonymous .nav-icon { color:#7467e8; }
.module-sms { color:#087d83; background:#e8fbfb; border-color:#c9eeee; }
.module-sms .nav-icon { color:#14a4a5; }
.module-vpn { color:#a26716; background:#fff6e4; border-color:#f5dfae; }
.module-vpn .nav-icon { color:#d7932b; }
.module-extra { color:#b04d6c; background:#fff0f4; border-color:#f2ceda; }
.module-extra .nav-icon { color:#dc6c8c; }
.module-anonymous,.module-sms,.module-vpn,.module-extra { color:#62677d; background:#fff; border-color:#e1e2f0; }
.module-anonymous .nav-icon,.module-sms .nav-icon,.module-vpn .nav-icon,.module-extra .nav-icon { color:var(--primary); }
.module-anonymous:hover,.module-sms:hover,.module-vpn:hover,.module-extra:hover { color:var(--primary); background:var(--primary-soft); border-color:#d5d6ff; }
.module-anonymous,.module-sms,.module-vpn,.module-extra { color:#fff; background:linear-gradient(135deg,#6d70ff,#5b5ff1); border-color:transparent; box-shadow:0 8px 17px rgba(98,102,246,.25); }
.module-anonymous .nav-icon,.module-sms .nav-icon,.module-vpn .nav-icon,.module-extra .nav-icon { color:#fff; }
.module-anonymous:hover,.module-sms:hover,.module-vpn:hover,.module-extra:hover { color:#fff; background:linear-gradient(135deg,#6d70ff,#5b5ff1); border-color:transparent; }
.module-item { color:#62677d; background:#fff; border-color:#e1e2f0; box-shadow:0 3px 10px rgba(35,39,58,.04); cursor:pointer; }
.module-item .nav-icon { color:var(--primary); }
.module-item:hover { color:#62677d; background:#f5f5ff; border-color:#d5d6ff; }
.module-item.active { color:#fff; background:linear-gradient(135deg,#6d70ff,#5b5ff1); border-color:transparent; box-shadow:0 8px 17px rgba(98,102,246,.25); }
.module-item.active .nav-icon { color:#fff; }
.module-item.active:hover { color:#fff; background:linear-gradient(135deg,#6d70ff,#5b5ff1); }
.download-message { display:none; }
.nav-item { color:#62677d; background:#fff; border:1px solid #e1e2f0; box-shadow:0 3px 10px rgba(35,39,58,.04); }
.nav-item .nav-icon { color:var(--primary); }
.nav-item:hover { color:var(--primary); background:var(--primary-soft); border-color:#d5d6ff; }
.nav-item.active { color:#fff; background:linear-gradient(135deg,#6d70ff,#5b5ff1); border-color:transparent; box-shadow:0 8px 17px rgba(98,102,246,.25); }
.nav-item.active .nav-icon { color:#fff; }
.nav-item.active:hover { color:#fff; background:linear-gradient(135deg,#6d70ff,#5b5ff1); }
.external-module { margin-top:22px; padding:22px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow); }
.external-module-header { display:flex; align-items:center; justify-content:center; gap:16px; }
.external-module-header .open-button { min-width:170px; padding:14px 28px; font-size:16px; text-align:center; }
.external-module-header h2 { margin:0; font-size:22px; }
.external-module-note { margin:8px 0 14px; padding-bottom:14px; border-bottom:1px solid #e1e4ee; color:var(--muted); font-size:11px; }
.embedded-module { margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#f8f9ff; }
.module-100-card { margin-top:24px; border-color:#dfe3ef; background:#fff; box-shadow:0 6px 18px rgba(35,39,58,.08); }
.whale-banner { display:block; width:100%; height:220px; margin-bottom:16px; border-radius:10px; object-fit:cover; object-position:center bottom; }
.module-100-note { margin:12px 2px 0; color:#9aa1b5; font-size:11px; text-align:left; }
.link-grid { display:grid; grid-template-columns:repeat(2,227px); column-gap:200px; row-gap:80px; justify-content:center; align-items:start; }
.link-tile { position:relative; box-sizing:border-box; width:227px; height:80px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 18px; border:1px solid #d4e4fa; border-radius:12px; background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(236,247,255,.84)),url('vpn-tile.png') center/cover; color:#62677d; text-decoration:none; box-shadow:0 3px 10px rgba(35,39,58,.05); transition:.2s ease; }
.link-tile.extra-feature { background:linear-gradient(90deg,rgba(255,255,255,.42),rgba(236,247,255,.34)),url('extra-banner.png') center/cover; }
.link-tile.recommended::after { content:'我个人也在用，推荐'; position:absolute; left:14px; bottom:7px; color:#6f86a8; font-size:10px; font-weight:400; }
.link-tile strong { color:#303750; font-size:15px; }
.link-tile span { color:var(--primary); font-size:12px; }
.link-tile:hover { border-color:#cfd2ff; background:#f3f3ff; transform:translateY(-2px); box-shadow:0 8px 16px rgba(98,102,246,.14); }
.sms-banner { display:block; width:100%; height:300px; margin-bottom:20px; border-radius:14px; object-fit:cover; object-position:center; background:#eaf2ff; }
@media(max-width:590px){.external-module{padding:16px}.external-module-header{align-items:center;flex-direction:column}}
@media(max-width:590px){.sms-banner{height:300px; margin-bottom:16px; object-position:center;}.embedded-module{padding:10px}.whale-banner{height:170px;margin-bottom:14px;object-position:center bottom}}
@media(max-width:590px){.link-grid{grid-template-columns:227px;row-gap:80px;column-gap:14px;justify-content:center}.link-tile{width:227px;height:80px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.video-poster { display:none !important; }
.video-summary { grid-template-columns:1fr !important; }
.video-copy { text-align:center; padding-right:0; }
.video-copy .author-row { justify-content:center; }
.result-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.result-header-actions .open-button,.result-header-actions .copy-button { padding:9px 12px; }
.result-actions { align-items:center; justify-content:space-between; gap:10px; }
.download-main { min-width:220px; flex:1 1 300px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.download-main .download-message { width:100%; min-height:16px; margin:0; text-align:center; }
.download-main .download-button { min-width:190px; }
@media(max-width:590px){
  .result-header-actions { gap:5px; }
  .result-header-actions .reset-button,.result-header-actions .open-button,.result-header-actions .copy-button { padding:8px 9px; font-size:9px; }
  .result-actions { display:flex; align-items:stretch; }
  .download-main { width:100%; min-width:0; }
  .download-main .download-button { width:100%; }
}