:root { --ink:#202124; --muted:#777d86; --line:#e9eaed; --blue:#365cc9; --blue-dark:#254aa9; --surface:#fff; --ground:#f8f9fb; font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--ink); background:var(--ground); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; } button,input { font:inherit; } button { cursor:pointer; }
.site-header { height:66px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); } .header-inner { display:flex; align-items:center; justify-content:space-between; width:min(1180px,calc(100% - 42px)); height:100%; margin:auto; }
.brand { display:flex; align-items:center; gap:9px; color:#202124; font-size:17px; font-weight:800; letter-spacing:-.04em; text-decoration:none; } .brand-mark { display:grid; width:30px; height:30px; place-items:center; border-radius:8px; background:linear-gradient(140deg,#5279e3,#254ba9); color:#fff; font-size:14px; letter-spacing:0; }
.top-nav { display:flex; align-items:center; gap:25px; } .top-nav a,.top-nav button { border:0; background:transparent; color:#60656d; font-size:13px; text-decoration:none; } .top-nav a.active { color:var(--blue); font-weight:750; } .top-nav button { padding:8px 12px; border:1px solid #d9deeb; border-radius:7px; color:var(--blue); }
.hero { padding:89px 20px 70px; text-align:center; background:radial-gradient(circle at 50% 20%,#edf2ff 0,rgba(248,249,251,0) 47%); } .eyebrow { margin:0 0 8px; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.12em; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:14px; font-size:clamp(32px,4.2vw,52px); letter-spacing:-.065em; line-height:1.1; } h2 { margin-bottom:0; font-size:22px; letter-spacing:-.04em; } .hero-copy { margin-bottom:30px; color:var(--muted); font-size:15px; }
.search-form { display:flex; gap:10px; width:min(700px,100%); margin:auto; } .search-box { display:flex; align-items:center; flex:1; gap:11px; padding:0 14px; border:1px solid #d5d9e1; border-radius:10px; background:#fff; box-shadow:0 9px 22px rgba(32,50,93,.07); } .search-box:focus-within { border-color:#708dde; box-shadow:0 0 0 3px #e8eeff; } .search-box span { color:#667083; font-size:23px; transform:translateY(-1px); } .search-box input { width:100%; height:51px; border:0; outline:0; color:var(--ink); font-size:14px; } kbd { padding:2px 6px; border:1px solid #e3e5ea; border-bottom-width:2px; border-radius:5px; color:#9298a1; font-family:inherit; font-size:10px; }
.primary-button { min-height:51px; padding:0 22px; border:0; border-radius:9px; background:var(--blue); box-shadow:0 7px 14px rgba(52,92,202,.2); color:#fff; font-size:14px; font-weight:750; transition:.2s; } .primary-button:hover { background:var(--blue-dark); transform:translateY(-1px); } .hot-searches { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:20px; color:#959ba5; font-size:12px; } .hot-searches button { border:0; background:transparent; color:#697bba; font-size:12px; }
.recommendation-section,.results-panel { width:min(1100px,calc(100% - 42px)); margin:0 auto 65px; } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:15px; padding-bottom:17px; } .section-heading .eyebrow { margin-bottom:4px; } .recommendation-heading span,.result-count { color:#90969e; font-size:12px; } .recommendation-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; } .recommendation-card { min-width:0; padding:20px 17px 16px; border:1px solid #edf0f4; border-radius:13px; background:#fff; box-shadow:0 8px 22px rgba(36,50,90,.035); } .recommendation-card h3 { margin:0 0 15px; color:#303846; font-size:15px; } .recommendation-card button { display:flex; gap:9px; width:100%; overflow:hidden; padding:6px 0; border:0; background:transparent; color:#ed5a61; font-size:12px; text-align:left; } .recommendation-card button:nth-of-type(2) { color:#ed8c34; } .recommendation-card button:nth-of-type(3) { color:#d8a229; } .recommendation-card button:nth-of-type(n+4) { color:#aab1bc; } .recommendation-card button span { overflow:hidden; color:#59616b; text-overflow:ellipsis; white-space:nowrap; } .recommendation-card button:hover span { color:var(--blue); } .results-panel { padding:25px; border:1px solid var(--line); border-radius:13px; background:var(--surface); } .results-panel .section-heading { border-bottom:1px solid var(--line); }.resource-grid { display:grid; gap:0; } .resource-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:13px; padding:17px 2px; border-bottom:1px solid #eef0f2; } .resource-card:last-child { border-bottom:0; } .disk-symbol { display:grid; flex:none; width:36px; height:36px; place-items:center; border-radius:9px; font-size:13px; font-weight:800; } .disk-symbol.baidu { background:#edf2ff; color:#4168ca; } .disk-symbol.quark { background:#fff2df; color:#db861d; } .resource-info { min-width:0; } .resource-title { overflow:hidden; margin:0 0 5px; color:#30343a; font-size:14px; font-weight:720; text-overflow:ellipsis; white-space:nowrap; } .resource-meta { display:flex; gap:10px; color:#9298a0; font-size:11px; } .available-tag { padding:5px 8px; border-radius:99px; background:#eff8f1; color:#438254; font-size:11px; white-space:nowrap; } .transfer-button { padding:8px 12px; border:1px solid #ccd5f0; border-radius:7px; background:#fff; color:var(--blue); font-size:12px; font-weight:750; white-space:nowrap; } .transfer-button:hover { background:#f3f5ff; } .empty-state { margin:28px 0 4px; color:var(--muted); text-align:center; font-size:14px; }.hidden{display:none!important;}
.guide-section { width:min(1100px,calc(100% - 42px)); margin:0 auto 74px; text-align:center; } .guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; text-align:left; } .guide-grid article { padding:19px; border:1px solid var(--line); border-radius:12px; background:#fff; } .guide-grid span { display:grid; width:27px; height:23px; place-items:center; border-radius:5px; background:#e9eeff; color:var(--blue); font-size:11px; font-weight:800; } .guide-grid h3 { margin:18px 0 7px; font-size:14px; } .guide-grid p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
footer { display:flex; justify-content:space-between; width:min(1100px,calc(100% - 42px)); padding:20px 0 31px; border-top:1px solid var(--line); margin:auto; color:#a0a5ac; font-size:12px; }
.modal-backdrop { position:fixed; z-index:10; inset:0; display:grid; overflow-y:auto; place-items:center; padding:20px; background:rgba(20,28,43,.48); backdrop-filter:blur(3px); }.modal { position:relative; width:min(485px,100%); padding:29px; border-radius:16px; background:#fff; box-shadow:0 20px 70px rgba(0,0,0,.22); }.modal h2 { margin-bottom:19px; font-size:25px; }.modal-close { position:absolute; top:14px; right:15px; width:30px; height:30px; border:0; border-radius:7px; background:#f2f4f7; color:#707782; font-size:22px; line-height:1; }.selected-resource { padding:13px; border-radius:9px; background:#f7f8fb; }.selected-resource strong,.selected-resource span { display:block; }.selected-resource strong { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.selected-resource span { margin-top:5px; color:var(--muted); font-size:12px; }.modal-note { color:var(--muted); font-size:12px; line-height:1.65; }.user-note { margin:18px 0; }.full-button { width:100%; }.share-result { display:flex; align-items:center; gap:8px; margin-top:14px; padding:9px; border:1px solid #d5dff9; border-radius:8px; background:#fff; }.share-result code { min-width:0; flex:1; overflow:hidden; color:var(--blue-dark); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.copy-link { padding:5px 7px; border:0; border-radius:6px; background:#edf1ff; color:var(--blue); font-size:11px; font-weight:750; white-space:nowrap; }.toast-region { position:fixed; z-index:20; right:22px; bottom:22px; display:grid; gap:8px; }.toast { padding:11px 14px; border-radius:9px; background:#252d3a; box-shadow:0 7px 20px rgba(10,20,35,.18); color:#fff; font-size:13px; }
@media(max-width:700px){.site-header{height:59px}.header-inner,.recommendation-section,.results-panel,.guide-section,footer{width:calc(100% - 28px)}.top-nav{gap:13px}.top-nav a{display:none}.hero{padding:60px 16px 50px}.hero-copy{font-size:13px}.search-form{flex-direction:column}.recommendation-row{display:flex;overflow-x:auto;padding-bottom:4px}.recommendation-card{flex:0 0 210px}.resource-grid{grid-template-columns:1fr;gap:15px}.resource-card{grid-template-columns:auto minmax(0,1fr) auto}.available-tag{display:none}.transfer-button{grid-column:2;justify-self:start;margin-top:-4px}.guide-grid{grid-template-columns:1fr}.resource-meta{gap:7px}footer{gap:10px;flex-direction:column}.modal{padding:25px 19px}}

/* Search results are grouped by cloud provider: Baidu on the left, Quark on the right. */
.resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.resource-column { min-width:0; }
.resource-column-title { display:flex; align-items:center; gap:9px; padding:17px 2px 10px; border-bottom:1px solid #eef0f2; color:#30343a; }
.resource-column-title .disk-symbol { width:29px; height:29px; border-radius:8px; font-size:12px; }
.resource-column-title strong { font-size:15px; }
.resource-column-title em { margin-left:auto; color:#9aa1ab; font-size:11px; font-style:normal; }
.column-empty { padding:28px 0; color:var(--muted); text-align:center; font-size:13px; }
@media(max-width:700px){.resource-grid{grid-template-columns:1fr;gap:15px}}

/* One media recommendation row: TV, movies, short dramas, animation. */
.recommendation-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
.recommendation-empty { margin:10px 0 0; color:#aab1bc; font-size:12px; }

/* HANSEN GLOBAL NAVIGATION */
.hansen-global-header{position:relative;z-index:80;border-bottom:1px solid #e5e7eb;background:#fff;color:#111827;font-family:"Microsoft YaHei","PingFang SC","Segoe UI",Arial,sans-serif}
.hansen-global-inner{width:min(1600px,calc(100% - 48px));min-height:96px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:38px}
.hansen-global-brand{flex:0 0 auto;color:#111827;font-size:28px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap}
.hansen-global-desktop-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(18px,2vw,36px);min-width:0;font-size:17px}
.hansen-global-desktop-nav>a,.hansen-global-dropdown-trigger{display:inline-flex;align-items:center;min-height:44px;color:#111827;text-decoration:none;white-space:nowrap;transition:color .2s ease}
.hansen-global-desktop-nav>a:hover,.hansen-global-desktop-nav>a.is-current,.hansen-global-dropdown-trigger:hover{color:#0aa85f}
.hansen-global-dropdown{position:relative}.hansen-global-dropdown-trigger{gap:7px}.hansen-global-dropdown-trigger span{font-size:20px;transform:translateY(-2px)}
.hansen-global-submenu{position:absolute;top:calc(100% + 8px);left:50%;width:220px;padding:10px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.14);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.hansen-global-dropdown:hover .hansen-global-submenu,.hansen-global-dropdown:focus-within .hansen-global-submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hansen-global-submenu a{display:block;padding:10px 12px;border-radius:9px;color:#334155;text-decoration:none;white-space:nowrap}.hansen-global-submenu a:hover{background:#f0fdf4;color:#0a9b58}
.hansen-global-mobile-menu{position:relative;display:none}.hansen-global-mobile-menu summary{width:42px;height:42px;display:grid;place-content:center;gap:4px;border:1px solid #dbe3ea;border-radius:10px;background:#fff;cursor:pointer;list-style:none}.hansen-global-mobile-menu summary::-webkit-details-marker{display:none}.hansen-global-mobile-menu summary span{display:block;width:19px;height:2px;border-radius:99px;background:#111827}
.hansen-global-mobile-menu nav{position:absolute;top:52px;right:0;width:min(320px,calc(100vw - 28px));max-height:calc(100vh - 130px);overflow-y:auto;padding:10px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(15,23,42,.16)}
.hansen-global-mobile-menu nav>a,.hansen-global-mobile-children a{display:block;padding:10px 12px;border-radius:9px;color:#334155;font-weight:700;text-decoration:none}.hansen-global-mobile-menu nav>a:hover,.hansen-global-mobile-menu nav>a.is-current,.hansen-global-mobile-children a:hover{background:#f0fdf4;color:#0a9b58}.hansen-global-mobile-children{margin:0 0 4px 12px;padding-left:8px;border-left:2px solid #dcfce7}.hansen-global-mobile-children a{padding:8px 10px;font-size:14px;font-weight:600}
@media(max-width:1240px){.hansen-global-inner{min-height:72px}.hansen-global-desktop-nav{display:none}.hansen-global-mobile-menu{display:block}}
@media(max-width:700px){.hansen-global-inner{width:100%;min-height:64px;padding:0 14px}.hansen-global-brand{font-size:23px}}

/* Additional trusted search-only providers. */
.disk-symbol.uc { background:#eaf8f1; color:#168a55; }
.disk-symbol.xunlei { background:#fff0e7; color:#e06d2e; }