:root { --ink:#17232b; --muted:#71808a; --line:#dce5e9; --canvas:#f6f8f9; --panel:#fff; --accent:#126b8d; --soft:#eaf4f7; --dark:#0c4d68; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font:14px/1.65 "Microsoft YaHei","PingFang SC",sans-serif; }
a { color:inherit; text-decoration:none; }
.topbar { background:#fff; border-bottom:1px solid var(--line); }
.topbar-inner { width:min(1240px,calc(100% - 40px)); min-height:72px; margin:auto; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark { width:35px; height:35px; display:grid; place-items:center; border-radius:6px; background:var(--accent); color:#fff; font-size:20px; font-weight:900; }
.brand strong { display:block; }
.brand small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
nav { display:flex; gap:22px; margin-left:auto; color:var(--muted); font-size:13px; }
nav a:hover { color:var(--dark); }
.page { width:min(1240px,calc(100% - 40px)); margin:auto; padding:52px 0 84px; }
.hero { max-width:760px; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; }
h1 { margin:8px 0 8px; font-size:clamp(31px,5vw,48px); line-height:1.15; }
.hero p { margin:0; color:var(--muted); }
.search { width:min(430px,100%); height:46px; display:flex; align-items:center; gap:9px; margin-top:22px; padding:0 13px; background:#fff; border:1px solid var(--line); border-radius:6px; }
.search span { color:var(--accent); font-size:22px; }
.search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); }
.product-tabs { display:grid; gap:16px; margin:36px 0 20px; }
.catalog-level { padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:6px; }
.catalog-label { display:block; margin-bottom:10px; color:var(--dark); font-size:12px; font-weight:800; }
.catalog-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.catalog-hint { color:var(--muted); font-size:13px; }
.product-tab { min-height:40px; padding:0 15px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--muted); cursor:pointer; font:inherit; }
.product-tab:hover,.product-tab.active { border-color:var(--accent); background:var(--soft); color:var(--dark); font-weight:800; }
.product-tab.expected { border-style:dashed; color:#9a6b2c; background:#fffaf0; }
.download-list { display:grid; gap:28px; }
.product-section { padding-top:4px; }
.product-heading { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:12px; }
.product-heading h2 { margin:0; font-size:23px; }
.product-heading p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.category-kicker { display:block; margin-bottom:3px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.5px; }
.product-count { color:var(--muted); font-size:12px; }
.resource-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:13px; }
.resource-card { position:relative; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:6px; }
.resource-product-icon { position:absolute; top:14px; right:14px; width:48px; height:48px; display:grid; place-items:center; padding:4px; border:1px solid var(--line); border-radius:5px; background:#fff; }
.resource-product-icon img { width:100%; height:100%; object-fit:contain; }
.resource-card h3 { margin:0 0 8px; font-size:16px; }
.resource-desc { min-height:44px; margin:0 0 14px; color:var(--muted); font-size:13px; }
.meta { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.meta span { padding:3px 8px; border:1px solid #cfe2e8; border-radius:4px; color:var(--dark); font-size:11px; }
.resource-actions { display:flex; gap:8px; }
.resource-actions a { flex:1; min-height:38px; display:grid; place-items:center; border-radius:5px; font-weight:800; font-size:13px; }
.download { background:var(--accent); color:#fff; }
.preview { border:1px solid var(--accent); color:var(--dark); }
.empty { padding:55px 20px; text-align:center; color:var(--muted); background:#fff; border:1px solid var(--line); }
@media (max-width:620px) { .topbar-inner { width:calc(100% - 28px); min-height:64px; } nav { gap:12px; font-size:12px; } .brand small { display:none; } .page { width:calc(100% - 28px); padding-top:34px; } .product-heading { align-items:start; flex-direction:column; } .resource-actions { flex-direction:column; } }