:root { --ink:#1d2622; --muted:#69736e; --line:#d9e3de; --paper:#fbfdfc; --soft:#edf5f1; --jade:#2f7d62; --jade-dark:#174b3b; --gold:#b88a49; --coral:#a9574f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
img { display:block; max-width:100%; }
.site-header { position:sticky; z-index:20; top:0; height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px; padding:0 36px; border-bottom:1px solid rgba(217,227,222,.9); background:rgba(251,253,252,.95); backdrop-filter:blur(16px); }
.brand { display:inline-flex; align-items:center; gap:14px; justify-self:start; }
.brand span { color:var(--jade-dark); font-family:"STKaiti","KaiTi",serif; font-size:25px; font-weight:700; letter-spacing:.1em; }
.brand small { padding-left:14px; border-left:1px solid var(--line); color:var(--muted); font-size:11px; }
.site-header nav { display:flex; gap:28px; color:var(--muted); font-size:13px; white-space:nowrap; }
.site-header nav a:hover,.site-header nav a[aria-current] { color:var(--jade-dark); }
.header-action { justify-self:end; padding:11px 19px; border:1px solid var(--jade-dark); border-radius:999px; color:var(--jade-dark); font-size:12px; font-weight:600; }
main { min-height:70vh; }
.eyebrow { margin:0 0 12px; color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.18em; }
.community-intro { display:flex; align-items:end; justify-content:space-between; gap:40px; padding:70px max(36px,calc((100% - 1380px)/2)) 58px; border-bottom:1px solid var(--line); background:var(--soft); }
.community-intro>div { max-width:820px; }
.community-intro h1 { max-width:760px; margin:0; color:var(--jade-dark); font-size:56px; font-weight:600; line-height:1.13; }
.community-intro p:not(.eyebrow) { max-width:680px; margin:22px 0 0; color:var(--muted); font-size:15px; line-height:1.9; }
.primary-action { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:13px 22px; border:0; border-radius:999px; background:var(--jade); color:#fff; font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer; }
.primary-action img { width:16px; filter:brightness(0) invert(1); }
.community-browser { max-width:1452px; margin:0 auto; padding:58px 36px 88px; }
.browser-heading { display:grid; grid-template-columns:1fr auto auto; align-items:end; gap:34px; margin-bottom:30px; }
.browser-heading h2,.community-rules h2 { margin:0; font-size:30px; font-weight:600; }
.sort-tabs { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.sort-tabs button { min-height:36px; padding:7px 17px; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; }
.sort-tabs button[aria-selected="true"] { background:var(--jade-dark); color:#fff; }
.work-count { margin:0; color:var(--muted); font-size:12px; }
.community-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.work-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; }
.work-preview { position:relative; display:grid; place-items:center; min-height:370px; overflow:hidden; background:var(--soft); }
.work-preview::after { content:""; position:absolute; width:47%; aspect-ratio:1; border:1px solid rgba(47,125,98,.16); border-radius:50%; }
.bracelet-render { position:relative; z-index:1; width:min(86%,340px); aspect-ratio:1; }
.community-bead { position:absolute; z-index:1; width:var(--bead-size); aspect-ratio:1; transform:translate(-50%,-50%); background-image:url("./imgs/diy/material-atlas.webp"); background-repeat:no-repeat; background-size:400% 300%; background-position:var(--sprite-x) var(--sprite-y); filter:drop-shadow(0 4px 3px rgba(42,59,49,.16)); }
.community-bead.photo { background-image:var(--photo); background-size:contain; background-position:center; }
.rank-badge { position:absolute; z-index:3; top:18px; left:18px; display:flex; align-items:center; gap:7px; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--jade-dark); font-size:11px; font-weight:700; }
.rank-badge.top { color:#7a571d; }
.work-body { padding:22px; }
.work-byline { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:11px; }
.work-body h3 { margin:10px 0 9px; font-size:21px; font-weight:600; }
.work-description { min-height:48px; margin:0; color:var(--muted); font-size:12px; line-height:1.8; }
.material-tags { display:flex; flex-wrap:wrap; gap:6px; min-height:26px; margin:17px 0; }
.material-tags span { padding:5px 9px; border-radius:999px; background:var(--soft); color:var(--jade-dark); font-size:10px; }
.work-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:16px; border-top:1px solid var(--line); }
.work-price { display:grid; gap:2px; }
.work-price small { color:var(--muted); font-size:9px; }
.work-price strong { font-size:17px; font-weight:600; }
.like-button { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:8px 13px; border:1px solid #d8bbb7; border-radius:999px; background:#fff; color:var(--coral); cursor:pointer; font-size:12px; font-weight:700; }
.like-button::before { content:"♡"; font-size:18px; line-height:1; }
.like-button.liked { border-color:var(--coral); background:#fbf0ee; }
.like-button.liked::before { content:"♥"; }
.like-button:disabled { cursor:default; opacity:.72; }
.community-state { grid-column:1/-1; display:grid; place-items:center; min-height:380px; padding:54px; border:1px dashed #bfd0c7; border-radius:8px; color:var(--muted); text-align:center; }
.community-state h3 { margin:0; color:var(--jade-dark); font-size:24px; }
.community-state p { max-width:480px; margin:10px 0 22px; line-height:1.8; }
.loading-mark { width:34px; aspect-ratio:1; border:2px solid var(--line); border-top-color:var(--jade); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.community-rules { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; padding:62px max(36px,calc((100% - 1380px)/2)); background:var(--jade-dark); color:#fff; }
.community-rules .eyebrow { color:#d9b575; }
.community-rules ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none; counter-reset:rules; }
.community-rules li { display:grid; align-content:start; gap:9px; padding-left:36px; position:relative; counter-increment:rules; }
.community-rules li::before { content:"0" counter(rules); position:absolute; left:0; color:#d9b575; font-size:12px; font-weight:700; }
.community-rules strong { font-size:14px; }
.community-rules span { color:#c9d9d2; font-size:11px; line-height:1.8; }
.toast { position:fixed; z-index:50; right:28px; bottom:28px; max-width:min(360px,calc(100% - 32px)); padding:13px 17px; border-radius:6px; background:var(--ink); color:#fff; box-shadow:0 12px 34px rgba(29,38,34,.2); font-size:12px; }
footer { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; padding:28px 32px; color:var(--muted); font-size:10px; text-align:center; }
footer p { margin:0; }
@media (max-width:1050px) { .site-header { grid-template-columns:1fr auto; } .site-header nav { display:none; } .community-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .community-rules { grid-template-columns:1fr; gap:34px; } }
@media (max-width:680px) { .site-header { height:62px; padding:0 16px; } .brand small { display:none; } .brand span { font-size:22px; } .header-action { padding:9px 14px; } .community-intro { display:grid; gap:28px; padding:46px 20px 38px; } .community-intro h1 { font-size:36px; } .community-intro p:not(.eyebrow) { font-size:13px; } .community-intro .primary-action { justify-self:start; } .community-browser { padding:42px 16px 62px; } .browser-heading { grid-template-columns:1fr auto; gap:18px; } .browser-heading>div:first-child { grid-column:1/-1; } .browser-heading h2 { font-size:27px; } .sort-tabs button { padding-inline:13px; } .community-grid { grid-template-columns:1fr; } .work-preview { min-height:340px; } .community-rules { padding:48px 20px; } .community-rules ol { grid-template-columns:1fr; } footer { padding:24px 18px; } }