/* ===== 合一设计规范页 (design.html) 专属样式 ===== */

.spec-hero { padding: 88px 0 60px; border-bottom: 1px solid var(--border);
  background: radial-gradient(800px 300px at 80% -10%, rgba(218,32,62,.07), transparent 60%),
              linear-gradient(180deg,#fbfdff,#fff); }
.spec-hero h1 { font-size: clamp(34px,4vw,46px); font-weight: 680; letter-spacing: -0.03em; }
.spec-hero .lede { max-width: 760px; margin-top: 16px; color: var(--ink-2); font-size: 15px; line-height: 1.9; }
.meta-row { display:flex; flex-wrap:wrap; gap:9px; margin-top: 24px; }
.meta-row .chip { font-size: 12px; }
.meta-row .chip b { color: var(--ink); font-weight: 650; }

.toc { display:flex; flex-wrap:wrap; gap:8px; margin: 26px 0 0; }
.toc a { padding: 6px 12px; border:1px solid var(--border); border-radius:999px; font-size:12.5px; color:var(--ink-2); background:#fff; }
.toc a:hover { color: var(--brand-strong); border-color: var(--brand-weak-2); background: var(--brand-weak); }

.spec-section { padding: 72px 0; }
.spec-section.soft { background: var(--bg-subtle); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.spec-h { max-width: 760px; }
.spec-h h2 { font-size: 26px; font-weight: 660; letter-spacing: -0.02em; }
.spec-h .lede { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; line-height: 1.85; }
.spec-h .num { color: var(--brand); font-family: var(--font-display); font-weight:700; margin-right: 10px; }

/* ---- 现状对比 ---- */
.dual { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.site-card { overflow:hidden; border:1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.site-card .cap { display:flex; align-items:center; gap:10px; padding: 12px 16px; border-bottom:1px solid var(--border); background: var(--bg-subtle); font-weight:650; font-size:13.5px; }
.site-card .cap img { width: 18px; height:18px; border-radius:5px; }
.site-card .cap small { margin-left:auto; color: var(--ink-3); font-weight:500; font-size:11.5px; }
.site-card ul { padding: 14px 18px; }
.site-card li { position:relative; padding: 7px 0 7px 20px; color: var(--ink-2); font-size: 13px; line-height: 1.7; }
.site-card li::before { content:"·"; position:absolute; left:4px; color:var(--ink-4); font-weight:700; }
.site-card li b { color: var(--ink); font-weight:600; }
.site-thumb { height: 300px; overflow:auto; border-top:1px solid var(--border); background:#fff; }
.site-thumb img { width:100%; display:block; }
.site-thumb .note { position:sticky; top:0; padding:6px 12px; font-size:11px; color:var(--ink-3); background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-bottom:1px solid var(--border); z-index:2; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:650; }
.pill.dark { background:#0b1220; color:#c7d8ff; }
.pill.light { background:#fdeef0; color:#b11430; border:1px solid #f5c9d1; }
.swatch-note { margin-top:18px; padding:14px 18px; border:1px dashed var(--border-strong); border-radius:12px; color:var(--ink-2); font-size:13px; line-height:1.8; background:var(--surface); }
.swatch-note b { color: var(--ink); }

/* ---- principles ---- */
.prin-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; margin-top:30px; }
.prin-card { padding: 24px 24px 22px; border:1px solid var(--border); border-radius: var(--r-lg); background:var(--surface); }
.prin-card .pno { font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--brand); letter-spacing:.08em; }
.prin-card h3 { margin-top:10px; font-size:17px; font-weight:660; }
.prin-card p { margin-top:9px; color:var(--ink-2); font-size:13px; line-height:1.85; }
.prin-card ul { margin-top:12px; }
.prin-card li { position:relative; padding:4px 0 4px 18px; color:var(--ink-3); font-size:12.5px; }
.prin-card li::before { content:"→"; position:absolute; left:0; color:var(--brand); }

/* ---- tokens ---- */
.tokens-wrap { margin-top:34px; display:grid; gap:26px; }
.tok-block { }
.tok-block h4 { font-size:14px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.tok-block h4 .tcode { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); font-weight:500; }
.sw-row { display:flex; flex-wrap:wrap; gap:10px; }
.sw { flex:0 0 auto; width: calc(20% - 8px); min-width: 150px; }
.sw .c { height:44px; border-radius:10px; border:1px solid rgba(0,0,0,.06); }
.sw .t { margin-top:7px; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-2); }
.sw .n { font-size:11px; color:var(--ink-3); }
.table-scroll { overflow-x:auto; }
.tok-table { width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
.tok-table th { text-align:left; padding:11px 12px; background:var(--bg-subtle); border:1px solid var(--border); font-size:12px; color:var(--ink-2); }
.tok-table td { padding:11px 12px; border:1px solid var(--border); color:var(--ink-2); vertical-align:top; line-height:1.7; }
.tok-table td b { color:var(--ink); }
.tok-table .hex { font-family:var(--font-mono); font-size:11.5px; white-space:nowrap; }
.hexdot { display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:6px; vertical-align:-1px; border:1px solid rgba(0,0,0,.08); }
.type-row { display:flex; align-items:baseline; gap:22px; padding:14px 0; border-bottom:1px solid var(--border); }
.type-row:last-child { border-bottom:0; }
.type-row .name { flex:0 0 150px; color:var(--ink-3); font-size:12px; font-family:var(--font-mono); }
.type-a { font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; }
.type-b { font-weight:660; letter-spacing:-0.02em; }
.type-c { color:var(--ink-2); font-size:13.5px; }
.type-code { font-family:var(--font-mono); font-size:12.5px; }

/* ---- gallery ---- */
.gal { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; }
.gal-card { border:1px solid var(--border); border-radius: var(--r-lg); overflow:hidden; background:var(--surface); }
.gal-card .g-h { padding:11px 16px; font-size:12.5px; font-weight:650; color:var(--ink-2); background:var(--bg-subtle); border-bottom:1px solid var(--border); }
.gal-body { padding:20px 22px; }
.gal-body .g-sub { font-size:11.5px; font-weight:650; color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase; margin:18px 0 10px; }
.gal-body .g-sub:first-child { margin-top:0; }

/* ---- mapping table ---- */
.map-list { margin-top:26px; display:grid; gap:12px; }
.map-row { display:grid; grid-template-columns: 1fr 46px 1.2fr; gap:12px; align-items:center; padding:14px 18px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.map-row .from, .map-row .to { font-size:13px; color:var(--ink-2); line-height:1.7; }
.map-row .from b, .map-row .to b { color:var(--ink); font-weight:650; }
.map-row .from small, .map-row .to small { display:block; color:var(--ink-3); font-size:11.5px; margin-top:2px; }
.map-arrow { text-align:center; color:var(--brand); font-weight:700; font-size:16px; }
.from-tag,.to-tag { display:inline-block; margin-bottom:4px; padding:1px 8px; border-radius:999px; font-size:10.5px; font-weight:650; letter-spacing:.03em; }
.from-tag { background:#f1f3f7; color:var(--ink-2); border:1px solid var(--border-strong); }
.to-tag { background:var(--brand-weak); color:var(--brand-deep); border:1px solid var(--brand-weak-2); }

/* ---- roadmap ---- */
.road { counter-reset: step; margin-top:30px; display:grid; gap:14px; }
.road-item { display:grid; grid-template-columns: 52px 1fr; gap:16px; padding:18px 20px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.road-item .rno { counter-increment: step; }
.road-item .rno::before { content:counter(step); display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#c40f2e,#da203e); color:#fff; font-family:var(--font-display); font-weight:700; box-shadow: var(--shadow-brand); }
.road-item h3 { font-size:15.5px; font-weight:660; }
.road-item .phase { font-size:11px; font-weight:700; color:var(--brand-strong); letter-spacing:.05em; margin-left:8px; }
.road-item p { margin-top:7px; color:var(--ink-2); font-size:13px; line-height:1.8; }
.road-item ul { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.road-item li.chip { font-size:11px; }

.note-box { margin-top:26px; padding:16px 20px; border:1px solid #f5c9d1; border-radius:12px; background:var(--brand-weak); color:var(--ink-2); font-size:13px; line-height:1.8; }
.note-box b { color: var(--brand-deep); }
.note-box.warn { border-color:#f0d9a8; background:#fff8ec; color:#7a5a1e; }
.note-box.warn b { color:#9a6b00; }

.pager { display:flex; justify-content:space-between; gap:14px; margin-top:34px; flex-wrap:wrap; }
.pager a { display:inline-flex; align-items:center; gap:10px; padding:13px 18px; border:1px solid var(--border-strong); border-radius:12px; background:#fff; color:var(--ink); font-weight:600; font-size:13.5px; box-shadow:var(--shadow-xs); }
.pager a:hover { border-color:var(--brand); color:var(--brand-deep); }
.pager .dir { display:block; font-size:11px; font-weight:500; color:var(--ink-3); }

@media (max-width: 900px) {
  .dual, .prin-grid, .gal { grid-template-columns: 1fr; }
  .map-row { grid-template-columns: 1fr; }
  .map-arrow { transform: rotate(90deg); }
}