/* 相生 · 打卡图鉴 (#collection). Uses friends-tokens.css variables only. */
.xc-page{max-width:560px;margin:0 auto;padding:var(--xs-s4) var(--xs-gutter) var(--xs-s14)}
.xc-page h1,.xc-page h2,.xc-headline{text-wrap:balance}
.xc-page p{text-wrap:pretty}
.xc-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:var(--xs-s3);text-decoration:none;border:1px solid transparent}
.xc-btn.secondary{border-color:var(--xs-line-strong);background:var(--xs-surface)}

.xc-gate{padding:var(--xs-s14) 0;text-align:center}
.xc-gate h1{font-family:var(--xs-serif);font-size:var(--xs-fs-2xl);color:var(--xs-ink);margin:0 0 var(--xs-s3)}
.xc-gate p{color:var(--xs-ink-2);font-size:var(--xs-fs-base);margin:0 auto var(--xs-s4);max-width:22em}

.xc-head{padding:var(--xs-s4) 0 var(--xs-s5);border-bottom:1px solid var(--xs-line)}
.xc-me{display:flex;align-items:center;gap:var(--xs-s4)}
.xc-me-stem{flex:none;display:grid;place-items:center;width:76px;height:76px;border-radius:var(--xs-r-lg);background:var(--cs);color:var(--c);font-family:var(--xs-serif);font-size:30px;font-weight:700;letter-spacing:1px}
.xc-me h1{margin:0;font-family:var(--xs-serif);font-size:var(--xs-fs-xl);line-height:var(--xs-lh-tight);color:var(--xs-ink)}
.xc-me p{margin:var(--xs-s1) 0 0;font-size:var(--xs-fs-sm);color:var(--xs-muted)}
.xc-headline{margin:var(--xs-s5) 0 var(--xs-s4);font-family:var(--xs-serif);font-size:var(--xs-fs-lg);font-weight:700;line-height:1.4;color:var(--xs-ink)}
.xc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--xs-s2)}
.xc-stat{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:var(--xs-s2) var(--xs-s3);border-radius:var(--xs-r-md);background:var(--xs-surface);border:1px solid var(--xs-line);text-decoration:none;color:var(--xs-ink)}
.xc-stat span{font-size:var(--xs-fs-xs);color:var(--xs-muted);font-weight:600}
.xc-stat b{font-family:var(--xs-serif);font-size:var(--xs-fs-xl);color:var(--xs-primary);line-height:1.2}
.xc-stat small{font-family:var(--xs-sans);font-size:var(--xs-fs-sm);color:var(--xs-muted);font-weight:400}

.xc-block,.xc-share{padding:var(--xs-s5) 0;border-bottom:1px solid var(--xs-line)}
.xc-block-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--xs-s2)}
.xc-block-head h2{margin:0;font-family:var(--xs-serif);font-size:var(--xs-fs-md);color:var(--xs-ink)}
.xc-count{font-size:var(--xs-fs-sm);color:var(--xs-muted)}
.xc-count b{font-family:var(--xs-serif);font-size:var(--xs-fs-lg);color:var(--xs-primary)}
.xc-bar{height:4px;border-radius:var(--xs-r-pill);background:var(--xs-surface-2);overflow:hidden;margin-bottom:var(--xs-s3)}
.xc-bar i{display:block;height:100%;background:var(--xs-primary);border-radius:inherit}
.xc-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:6px}
.xc-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;padding:4px 2px;border-radius:var(--xs-r-md);
  border:1px dashed var(--xs-line-strong);background:transparent;color:var(--xs-muted);font:inherit;cursor:pointer;transition:transform .15s var(--xs-ease)}
.xc-cell:active{transform:scale(.96)}
.xc-cell-name{font-size:var(--xs-fs-sm);font-weight:600;white-space:nowrap;letter-spacing:.5px}
.xc-cell.is-lit{border:1px solid var(--c);background:var(--c);color:var(--xs-surface);box-shadow:var(--xs-shadow-sm)}
.xc-nw{white-space:nowrap}
.xc-cell.is-lit .xc-cell-name{font-size:var(--xs-fs-base);font-weight:700}
.xc-cell-n{font-size:11px;line-height:1.2;opacity:.85}
.xc-cell:focus-visible{outline:2px solid var(--xs-focus);outline-offset:2px}
.xc-hint{margin:var(--xs-s2) 0 0;font-size:var(--xs-fs-sm);color:var(--xs-muted)}

.xc-share-note{margin:0 0 var(--xs-s3);font-size:var(--xs-fs-sm);color:var(--xs-ink-2)}
.xc-share-stage{border-radius:var(--xs-r-lg);overflow:hidden;box-shadow:var(--xs-shadow-md);background:var(--xs-surface);aspect-ratio:3/4}
.xc-share-stage img{display:block;width:100%;height:100%;object-fit:contain;-webkit-touch-callout:default}
.xc-share-tip{margin:var(--xs-s2) 0 0;text-align:center;font-size:var(--xs-fs-xs);color:var(--xs-muted)}

.xc-sheet{width:min(92vw,420px);border:none;border-radius:var(--xs-r-xl);padding:var(--xs-s5);background:var(--xs-surface);color:var(--xs-ink);box-shadow:var(--xs-shadow-md)}
.xc-sheet::backdrop{background:rgba(31,42,38,.4)}
.xc-sheet h2{margin:0 0 var(--xs-s3);font-family:var(--xs-serif);font-size:var(--xs-fs-lg)}
.xc-names{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--xs-s2)}
.xc-names li{padding:6px 12px;border-radius:var(--xs-r-pill);background:var(--xs-surface-2);font-size:var(--xs-fs-sm)}

.xc-entry{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:var(--xs-s3);min-height:64px;margin:var(--xs-s3) 0;padding:var(--xs-s3) var(--xs-s4);
  border-radius:var(--xs-r-lg);background:var(--xs-primary-soft);color:var(--xs-primary);text-decoration:none;border:1px solid var(--xs-line)}
.xc-entry-title{font-family:var(--xs-serif);font-size:var(--xs-fs-md);font-weight:700}
.xc-entry-sub{grid-row:2;font-size:var(--xs-fs-sm);color:var(--xs-ink-2)}
.xc-entry-go{grid-row:1/3;grid-column:2;font-size:28px;line-height:1}
@media (prefers-reduced-motion:reduce){.xc-cell{transition:none}}