:root { --page:#f7f6f2; --white:#fff; --ink:#202833; --muted:#748091; --line:#e8e4db; --green:#0e9a84; --green-dark:#087561; --max:1160px; --serif:"Iowan Old Style","Songti SC","STSong","Noto Serif SC",serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--page); font-family:var(--sans); line-height:1.65; }
a { color:inherit; text-decoration:none; }
.container { width:min(var(--max),calc(100% - 48px)); margin:0 auto; }
.site-header { border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.header-content { min-height:82px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.brand-mark { width:43px; height:43px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(135deg,#0db39a,#07937e); box-shadow:0 8px 18px rgba(14,154,132,.25); font:700 22px/1 var(--serif); }
.brand strong { display:block; font:700 22px/1 var(--serif); white-space:nowrap; }
.brand small { display:block; margin-top:5px; color:#83909f; font-size:9px; font-weight:750; letter-spacing:2.1px; }
.search-box { min-width:220px; flex:1; max-width:490px; display:flex; align-items:center; gap:11px; height:48px; padding:0 18px; border:1px solid #e5e1d8; border-radius:999px; background:#fffefa; color:#87909d; font-size:14px; }
.search-box svg { width:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
nav { display:flex; align-items:center; gap:8px; margin-left:auto; }
nav a { padding:7px 9px; color:#657182; font-size:14px; font-weight:700; white-space:nowrap; }
nav a:hover { color:var(--green); }
.header-status { padding:10px 18px; border-radius:999px; background:linear-gradient(135deg,#0db39a,#07937e); color:#fff; box-shadow:0 7px 15px rgba(14,154,132,.23); font-size:14px; font-weight:800; white-space:nowrap; }
main { padding:35px 0 72px; }
.breadcrumb { margin:0 0 19px; color:#8490a0; font-size:13px; }
.breadcrumb span { margin:0 7px; color:#c7cdd5; }
.section-caption { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.section-caption p,.resource-heading p,.about-card p:first-child { margin:0; color:var(--green); font-size:10px; font-weight:850; letter-spacing:1.7px; }
.section-caption span { color:#929aa4; font-size:12px; }
h1 { margin:6px 0 24px; font:700 clamp(30px,3.4vw,43px)/1.2 var(--serif); letter-spacing:-.035em; }
.category-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.category-card { min-height:185px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:18px; background:var(--white); box-shadow:0 11px 25px rgba(30,42,49,.06); transition:.2s ease; }
.category-card:hover { transform:translateY(-4px); box-shadow:0 18px 31px rgba(30,42,49,.11); }
.category-icon { width:56px; height:56px; display:grid; place-items:center; margin-bottom:16px; border-radius:17px; color:#fff; font:700 23px/1 var(--serif); box-shadow:0 7px 15px rgba(34,48,65,.18); }
.blue{background:#347cf1}.green{background:#08b981}.gold{background:#f5a009}.pink{background:#ec3b95}.purple{background:#8352ee}.cyan{background:#09aec5}
.category-card h2 { margin:0; font:700 17px/1.3 var(--serif); }.category-card p { margin:5px 0 0; color:#98a1ab; font-size:11px; }
.resources-section { margin-top:58px; }
.resource-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.resource-heading h2 { position:relative; margin:4px 0 0; padding-left:14px; font:700 clamp(27px,3vw,36px)/1.2 var(--serif); letter-spacing:-.03em; }.resource-heading h2::before { content:""; position:absolute; inset:3px auto 3px 0; width:5px; border-radius:5px; background:linear-gradient(#10aa91,#f3ad18); }.resource-heading h2 span { margin:0 6px; color:#7d8995; }.sort-note { color:#8792a0; font-size:12px; font-weight:700; }
.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.resource-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 22px rgba(30,42,49,.045); transition:.2s ease; }.resource-card:hover { transform:translateY(-4px); box-shadow:0 18px 35px rgba(30,42,49,.09); }
.resource-cover { position:relative; min-height:155px; display:grid; place-items:center; overflow:hidden; color:rgba(255,255,255,.95); font:700 19px/1.14 var(--serif); letter-spacing:1.5px; }.resource-cover::after { content:""; position:absolute; width:155px; height:155px; right:-27px; bottom:-75px; border:1px solid rgba(255,255,255,.34); border-radius:50%; }.resource-cover b { position:absolute; z-index:1; top:13px; left:13px; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.9); color:#26313d; font:750 11px/1 var(--sans); letter-spacing:0; }.cover-blue{background:linear-gradient(135deg,#377ae5,#6aa0f5)}.cover-green{background:linear-gradient(135deg,#138a6d,#4db190)}.cover-gold{background:linear-gradient(135deg,#ca8a29,#efbd6e)}
.resource-body { display:flex; flex-direction:column; min-height:200px; padding:17px; }.resource-meta { margin:0 0 8px; color:var(--green); font-size:11px; font-weight:800; }.resource-body h3 { margin:0; font:700 19px/1.35 var(--serif); }.resource-body > p:not(.resource-meta) { margin:9px 0 16px; color:#788391; font-size:13px; }.resource-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }.resource-tags span,.access-code { padding:3px 8px; border-radius:999px; background:#edf6f2; color:var(--green-dark); font-size:10.5px; font-weight:750; }.resource-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }.resource-link { padding:6px 10px; border-radius:8px; background:var(--green); color:#fff; font-size:12px; font-weight:800; }.resource-link:hover { background:var(--green-dark); }.empty-results { grid-column:1/-1; padding:30px; border:1px dashed #c9d4cc; border-radius:16px; color:#758078; text-align:center; }
.about-card { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:58px; padding:30px 34px; border:1px solid #cfe7df; border-radius:18px; background:linear-gradient(135deg,#e9f5ef,#f9f2de); }.about-card h2 { margin:5px 0 0; font:700 25px/1.35 var(--serif); }.about-card > p { margin:0; color:#65736d; font-size:14px; }
footer { padding:25px 0; border-top:1px solid var(--line); background:#fff; color:#87909c; font-size:12px; } footer .container { display:flex; justify-content:space-between; gap:16px; }
@media (max-width:1000px) { .header-content{gap:15px}.search-box{max-width:none}nav{display:none}.category-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px) { .container{width:min(var(--max),calc(100% - 32px))}.header-content{min-height:69px}.brand-mark{width:36px;height:36px;border-radius:11px;font-size:19px}.brand strong{font-size:19px}.brand small{font-size:7.5px}.search-box,.header-status{display:none}main{padding-top:25px}.section-caption{display:block}.section-caption span{display:block;margin-top:5px}.category-grid{grid-template-columns:repeat(2,1fr);gap:13px}.category-card{min-height:160px}.resources-section{margin-top:43px}.resource-heading{display:block}.sort-note{display:block;margin-top:9px}.resource-grid{grid-template-columns:1fr}.about-card{grid-template-columns:1fr;gap:16px;padding:26px}.about-card h2{font-size:23px}footer .container{display:block}footer .container span:last-child{display:block;margin-top:6px} }