/* components — 通用组件 + 五维 demo + 资源库 / 速查 / 档案 / footer */
/* 卡片/盒子 */
.card{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius);
  padding:var(--s4);box-shadow:0 1px 2px rgba(43,36,41,.04);}
.note{border-left:3px solid var(--accent);background:var(--accent-soft);
  padding:var(--s3) var(--s4);border-radius:0 8px 8px 0;margin:var(--s4) 0;font-size:.95rem;}
.note b{color:var(--accent);}

/* 规则清单 */
ul.rules{list-style:none;display:grid;gap:var(--s2);margin:var(--s3) 0;}
ul.rules li{padding-left:var(--s5);position:relative;color:var(--ink-2);font-size:.95rem;}
ul.rules li::before{content:"";position:absolute;left:var(--s3);top:.7em;width:6px;height:6px;
  background:var(--accent);border-radius:50%;}
ul.rules li b{color:var(--ink);font-weight:700;}

/* 词汇 chips */
.vocab{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0;}
.vocab span{font-size:.82rem;background:var(--bg);border:var(--bw) solid var(--line-strong);
  border-radius:99px;padding:4px 12px;color:var(--ink-2);}

/* 平庸 vs 讲究 对比 */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:var(--s4) 0;}
@media(max-width:640px){.versus{grid-template-columns:1fr;}}
.vs-col{border:var(--bw) solid var(--line);border-radius:var(--radius);overflow:hidden;}
.vs-tag{font-size:.75rem;font-weight:700;letter-spacing:.1em;padding:6px 12px;text-transform:uppercase;}
.vs-bad .vs-tag{background:#fbeae8;color:var(--bad);}
.vs-good .vs-tag{background:#e9f5ee;color:var(--good);}
.vs-body{padding:var(--s4);min-height:150px;display:flex;flex-direction:column;justify-content:center;}

/* demo: 平庸排版 */
.d-type-bad{font-family:Arial,sans-serif;background:#fff;}
.d-type-bad *{font-size:15px;font-weight:400;color:#333;line-height:1.4;margin-bottom:6px;}
/* demo: 讲究排版 */
.d-type-good{background:var(--surface);}
.d-type-good .t{font-family:var(--display);font-weight:900;font-size:1.5rem;line-height:1.1;margin-bottom:8px;}
.d-type-good .s{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:14px;}
.d-type-good .b{font-size:.92rem;color:var(--ink-2);line-height:1.7;}

/* demo: 颜色 */
.d-color-bad{background:linear-gradient(135deg,#8a5cf6,#fff);}
.d-color-bad .chip{display:inline-block;width:100%;}
.d-color-bad .t{font-weight:800;color:#5a2db8;font-size:1.2rem;}
.d-color-bad .btn{display:inline-block;margin-top:10px;background:#7c3aed;color:#fff;padding:8px 16px;border-radius:8px;font-size:.85rem;}
.d-color-good{background:var(--surface);}
.d-color-good .t{font-weight:800;color:var(--ink);font-size:1.2rem;}
.d-color-good .b{color:var(--ink-2);font-size:.9rem;margin-top:4px;}
.d-color-good .btn{display:inline-block;margin-top:12px;background:var(--accent);color:#fff;padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;}
.swatch-row{display:flex;gap:6px;margin-top:12px;}
.swatch-row i{height:14px;border-radius:3px;}

/* demo: 间距 */
.d-gap-bad p{margin:2px 0;font-size:.85rem;}
.d-gap-bad .lbl{color:#888;font-size:.78rem;}
.d-gap-good .group{margin-bottom:16px;}
.d-gap-good .lbl{color:var(--ink-3);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;}
.d-gap-good .val{font-size:.95rem;color:var(--ink);font-weight:600;}

/* demo: 层级 */
.d-hier-bad *{font-size:1rem;font-weight:600;color:#333;margin-bottom:4px;}
.d-hier-good .big{font-size:1.6rem;font-weight:900;font-family:var(--display);line-height:1.1;}
.d-hier-good .mid{font-size:.95rem;color:var(--ink);font-weight:600;margin-top:8px;}
.d-hier-good .sm{font-size:.82rem;color:var(--ink-3);margin-top:4px;}

/* demo: 质感 */
.d-tex-bad{background:#fff;border:1px solid #fff;}
.d-tex-bad .box{background:#fff;border:1px solid #eee;padding:12px;font-size:.9rem;color:#444;}
.d-tex-good .box{background:var(--surface);border:var(--bw) solid var(--line-strong);border-radius:10px;
  padding:14px;font-size:.9rem;color:var(--ink);box-shadow:0 2px 8px rgba(43,36,41,.06);}

/* —— 资源库 —— */
.res-group{margin:var(--s5) 0;}
.res-group h3{margin-top:0;}
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s3);}
a.res{display:block;text-decoration:none;color:inherit;border:var(--bw) solid var(--line);
  border-radius:12px;padding:var(--s3) var(--s4);background:var(--surface);transition:border-color .15s,transform .1s;}
a.res:hover{border-color:var(--accent);transform:translateY(-2px);}
a.res .rn{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px;}
a.res .rn::after{content:"↗";color:var(--accent);font-size:.85em;}
a.res .rd{font-size:.82rem;color:var(--ink-2);margin-top:4px;line-height:1.5;}

/* —— 折叠速查 —— */
details.cheats{margin-top:var(--s4);border:var(--bw) solid var(--line);border-radius:var(--radius);background:var(--surface);}
details.cheats summary{cursor:pointer;padding:var(--s4);font-weight:700;font-family:var(--serif);font-size:1.1rem;list-style:none;}
details.cheats summary::-webkit-details-marker{display:none;}
details.cheats summary::before{content:"▸ ";color:var(--accent);}
details.cheats[open] summary::before{content:"▾ ";}
details.cheats ol{margin:0 var(--s4) var(--s4) var(--s6);color:var(--ink-2);font-size:.92rem;display:grid;gap:6px;}
details.cheats ol li b{color:var(--ink);}

/* —— 档案 —— */
.profile{display:grid;gap:var(--s3);}
.profile .row{display:grid;grid-template-columns:80px 1fr;gap:var(--s3);align-items:start;}
.profile .k{font-weight:700;color:var(--accent);font-size:.9rem;padding-top:2px;}
.tags{display:flex;flex-wrap:wrap;gap:6px;}
.tags span{font-size:.82rem;border:var(--bw) solid var(--line-strong);border-radius:99px;padding:3px 12px;}
.tags.no span{border-color:#eccdc9;color:var(--bad);background:#fdf3f1;}

footer{padding:var(--s7) 0;text-align:center;color:var(--ink-3);font-size:.85rem;}
footer a{color:var(--accent);text-decoration:none;}