: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; }