/* =============================================================
 * YF Sales · Design System
 * 基於：8pt 間距 · 模組化 typography scale · HSL 色板 · 語義化 elevation
 * 用法：整站復用下方 tokens，避免頁面直接寫魔法數字
 * ============================================================= */

/* ============================================================
 * 1. FOUNDATION TOKENS (light mode defaults)
 * ============================================================ */
:root {
    /* ---------- 8pt 間距 scale ---------- */
    --sp-0:  0;
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    /* ---------- Typography scale (Perfect Fourth 1.25) ---------- */
    --fs-xs:   0.75rem;   /* 12 · caption */
    --fs-sm:   0.875rem;  /* 14 · secondary */
    --fs-md:   1rem;      /* 16 · body */
    --fs-lg:   1.125rem;  /* 18 · lead */
    --fs-xl:   1.25rem;   /* 20 · h5 */
    --fs-2xl:  1.5rem;    /* 24 · h4 */
    --fs-3xl:  1.875rem;  /* 30 · h3 · KPI 數字 */
    --fs-4xl:  2.25rem;   /* 36 · hero */

    --lh-tight:  1.2;
    --lh-normal: 1.5;
    --lh-loose:  1.7;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi:   600;
    --fw-bold:   700;

    /* ---------- 色板（HSL）：語義優先，方便自動生成暗色 ---------- */
    --brand-h: 210;                              /* brand hue */
    --brand-s: 55%;
    --brand-primary:   hsl(var(--brand-h) var(--brand-s) 34%);   /* #1E3A5F */
    --brand-primary-hover: hsl(var(--brand-h) var(--brand-s) 42%);
    --brand-secondary: hsl(var(--brand-h) var(--brand-s) 52%);
    --brand-accent:    hsl(43 96% 49%);          /* 黃牌 */

    /* 中性色階（Tailwind 風格 50-900） */
    --gray-50:  hsl(210 20% 98%);
    --gray-100: hsl(210 16% 96%);
    --gray-200: hsl(210 14% 92%);
    --gray-300: hsl(210 12% 87%);
    --gray-400: hsl(210 10% 68%);
    --gray-500: hsl(210 10% 50%);
    --gray-600: hsl(210 12% 40%);
    --gray-700: hsl(210 14% 28%);
    --gray-800: hsl(210 18% 18%);
    --gray-900: hsl(210 22% 12%);

    /* 語義色 */
    --success:      hsl(142 71% 42%);
    --success-soft: hsl(142 71% 94%);
    --warning:      hsl(38 92% 50%);
    --warning-soft: hsl(43 96% 92%);
    --danger:       hsl(354 70% 54%);
    --danger-soft:  hsl(354 70% 95%);
    --info:         hsl(199 89% 48%);
    --info-soft:    hsl(199 89% 94%);

    /* ---------- 頁面層次 ---------- */
    --page-bg:     var(--gray-50);
    --surface-bg: #FFFFFF;
    --border-color: var(--gray-200);
    --divider:     var(--gray-100);
    --text-body:   var(--gray-800);
    --text-muted:  var(--gray-500);
    --text-heading: var(--gray-900);

    /* ---------- 圓角 scale ---------- */
    --radius-xs:   3px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* ---------- Elevation（分層陰影，數值越大層越高） ---------- */
    --elev-0: none;
    --elev-1: 0 1px 2px 0 hsl(210 20% 10% / .05);
    --elev-2: 0 2px 4px -1px hsl(210 20% 10% / .06), 0 1px 2px 0 hsl(210 20% 10% / .04);
    --elev-3: 0 6px 12px -2px hsl(210 20% 10% / .08), 0 2px 4px -1px hsl(210 20% 10% / .04);
    --elev-4: 0 12px 24px -4px hsl(210 20% 10% / .10), 0 4px 8px -2px hsl(210 20% 10% / .05);
    --elev-5: 0 24px 48px -12px hsl(210 20% 10% / .18);

    /* ---------- Motion tokens ---------- */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-micro:   120ms;   /* hover/focus */
    --dur-short:   200ms;   /* reveal */
    --dur-medium:  320ms;   /* layout */

    /* ---------- 命名 z-index 層 ---------- */
    --z-dropdown: 1000;
    --z-sticky:   1020;
    --z-fixed:    1030;
    --z-modal-bg: 1050;
    --z-modal:    1055;
    --z-popover:  1070;
    --z-toast:    1080;

    /* ---------- Focus ring ---------- */
    --ring-color: hsl(var(--brand-h) var(--brand-s) 48% / .35);
    --ring-width: 3px;
    --ring-offset: 2px;
}

/* ============================================================
 * 2. DARK MODE — 同 tokens 系統覆蓋
 * ============================================================ */
[data-bs-theme="dark"] {
    --brand-primary:       hsl(var(--brand-h) 62% 56%);
    --brand-primary-hover: hsl(var(--brand-h) 62% 64%);
    --brand-secondary:     hsl(var(--brand-h) 55% 62%);

    --page-bg:      hsl(215 20% 10%);
    --surface-bg:   hsl(215 18% 14%);
    --border-color: hsl(215 15% 22%);
    --divider:      hsl(215 15% 18%);
    --text-body:    hsl(210 15% 88%);
    --text-muted:   hsl(210 12% 62%);
    --text-heading: hsl(210 15% 96%);

    --success-soft: hsl(142 40% 20%);
    --warning-soft: hsl(43 40% 22%);
    --danger-soft:  hsl(354 40% 22%);
    --info-soft:    hsl(199 40% 22%);

    --elev-1: 0 1px 2px 0 hsl(0 0% 0% / .30);
    --elev-2: 0 2px 4px -1px hsl(0 0% 0% / .40), 0 1px 2px 0 hsl(0 0% 0% / .30);
    --elev-3: 0 6px 12px -2px hsl(0 0% 0% / .45);
    --elev-4: 0 12px 24px -4px hsl(0 0% 0% / .55);

    --ring-color: hsl(var(--brand-h) 70% 62% / .45);
    color-scheme: dark;
}

/* ============================================================
 * 3. GLOBAL BASELINE
 * ============================================================ */
html, body { overflow-x: clip; }   /* 防止內容超寬撐爆視口；`clip` 保留 sticky/fixed 語義 */
body {
    background-color: var(--page-bg);
    color: var(--text-body);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-width: 320px;
}
img, table { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--text-heading); font-weight: var(--fw-semi); }
a { transition: color var(--dur-micro) var(--ease-out); }

/* Focus ring 統一（鍵盤可見，滑鼠不干擾） */
:focus-visible {
    outline: var(--ring-width) solid var(--ring-color);
    outline-offset: var(--ring-offset);
    border-radius: var(--radius-sm);
}
button:focus, .btn:focus, input:focus, .form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 var(--ring-width) var(--ring-color) !important;
}

/* 自定義滾動條（webkit） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); background-clip: content-box; border: 2px solid transparent; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: hsl(215 12% 28%); background-clip: content-box; border: 2px solid transparent; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
 * 4. NAVBAR
 * ============================================================ */
.navbar.bg-primary {
    background-color: var(--brand-primary) !important;
    box-shadow: var(--elev-2);
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
}
.navbar .nav-link {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-micro) var(--ease-out);
    font-weight: var(--fw-medium);
}
.navbar .nav-link:hover,.navbar .nav-link.active { background-color: hsl(0 0% 100% / .10); }
[data-bs-theme="dark"] .navbar.bg-primary { background-color: hsl(215 22% 8%) !important; }

/* ============================================================
 * 5. CARDS — 統一 header/body 內距 + hover 上升
 * ============================================================ */
.card {
    background-color: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-1);
    transition: box-shadow var(--dur-short) var(--ease-out),
                transform var(--dur-short) var(--ease-out);
}
.card + .card { margin-top: var(--sp-4); }

.card-header {
    background-color: var(--surface-bg);
    border-bottom: 1px solid var(--divider);
    padding: var(--sp-3) var(--sp-4);
    font-weight: var(--fw-semi);
    color: var(--text-heading);
}
.card-header.bg-light { background-color: var(--gray-50) !important; }
[data-bs-theme="dark"] .card-header.bg-light { background-color: hsl(215 16% 18%) !important; color: var(--text-heading); }

.card-body { padding: var(--sp-4); }
.card-body.p-2 { padding: var(--sp-3) !important; }
.card-body.p-0 { padding: 0 !important; overflow-x: auto; }   /* 寬表格在卡片內橫向滾，不撐爆頁面 */

/* KPI 卡片模式：`.card.kpi` 應用一致的視覺 */
.card.kpi {
    transition: box-shadow var(--dur-short) var(--ease-out),
                transform var(--dur-short) var(--ease-out);
    cursor: default;
    overflow: hidden;
    position: relative;
}
.card.kpi:hover { box-shadow: var(--elev-3); transform: translateY(-2px); }
.card.kpi::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--brand-primary); opacity: .0; transition: opacity var(--dur-micro) var(--ease-out);
}
.card.kpi.kpi-warn::before   { background: var(--warning); opacity: 1; }
.card.kpi.kpi-danger::before { background: var(--danger); opacity: 1; }
.card.kpi.kpi-success::before{ background: var(--success); opacity: 1; }
.card.kpi.kpi-info::before   { background: var(--info); opacity: 1; }
.card.kpi.kpi-primary::before{ background: var(--brand-primary); opacity: 1; }

.kpi-label { color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--fw-medium); }
.kpi-value { font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--text-heading); font-variant-numeric: tabular-nums; }
.kpi-value.kpi-value-sm { font-size: var(--fs-2xl); }
.kpi-sub   { color: var(--text-muted); font-size: var(--fs-xs); margin-top: var(--sp-1); }
.kpi-icon  { color: var(--text-muted); font-size: var(--fs-xl); opacity: .5; }

/* ============================================================
 * 6. TABLES — 更好的行 hover + 表頭
 * ============================================================ */
.table thead th {
    font-weight: var(--fw-semi);
    color: var(--text-heading);
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--border-color);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: .03em;
}
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .table-light { background-color: hsl(215 16% 17%) !important; color: var(--text-heading) !important; }
.table tbody td { padding: var(--sp-3) var(--sp-4); vertical-align: middle; border-color: var(--divider); }
.table-hover tbody tr:hover td { background-color: hsl(var(--brand-h) var(--brand-s) 96%); }
[data-bs-theme="dark"] .table-hover tbody tr:hover td { background-color: hsl(var(--brand-h) 22% 18%); }
.table.table-sm tbody td, .table.table-sm thead th { padding: var(--sp-2) var(--sp-3); }

/* 黃牌行：品牌方式的視覺標記 */
.row-yellow-card {
    background-color: var(--warning-soft) !important;
    box-shadow: inset 3px 0 0 var(--warning);
}
[data-bs-theme="dark"] .row-yellow-card { background-color: hsl(43 40% 22%) !important; }

/* ============================================================
 * 7. BADGES — 語義變體（solid vs subtle）
 * ============================================================ */
.badge {
    font-weight: var(--fw-medium);
    padding: 0.3em 0.65em;
    border-radius: var(--radius-sm);
    letter-spacing: .01em;
}
.badge.bg-warning-subtle { background-color: var(--warning-soft) !important; color: hsl(38 80% 30%) !important; }
.badge.bg-success-subtle { background-color: var(--success-soft) !important; color: hsl(142 60% 25%) !important; }
.badge.bg-danger-subtle  { background-color: var(--danger-soft)  !important; color: hsl(354 60% 35%) !important; }
.badge.bg-info-subtle    { background-color: var(--info-soft)    !important; color: hsl(199 70% 25%) !important; }
[data-bs-theme="dark"] .badge.bg-warning-subtle { color: hsl(43 90% 75%) !important; }
[data-bs-theme="dark"] .badge.bg-success-subtle { color: hsl(142 60% 70%) !important; }
[data-bs-theme="dark"] .badge.bg-danger-subtle  { color: hsl(354 70% 75%) !important; }
[data-bs-theme="dark"] .badge.bg-info-subtle    { color: hsl(199 80% 72%) !important; }

/* ============================================================
 * 8. BUTTONS — 統一 icon 間距 + hover 昇高
 * ============================================================ */
.btn {
    font-weight: var(--fw-medium);
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-micro) var(--ease-out),
                border-color var(--dur-micro) var(--ease-out),
                box-shadow var(--dur-micro) var(--ease-out),
                transform var(--dur-micro) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.btn:not(:disabled):active { transform: translateY(1px); }
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}
.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.btn i.bi { line-height: 1; }

/* ============================================================
 * 9. FORMS
 * ============================================================ */
.form-control, .form-select {
    background-color: var(--surface-bg);
    border-color: var(--border-color);
    color: var(--text-body);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-micro) var(--ease-out),
                box-shadow var(--dur-micro) var(--ease-out);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    background-color: var(--surface-bg);
    color: var(--text-body);
}
.form-label { font-weight: var(--fw-medium); color: var(--text-heading); font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.form-text  { color: var(--text-muted); font-size: var(--fs-xs); }
[data-bs-theme="dark"] .form-control::placeholder { color: hsl(210 12% 48%); }

/* ============================================================
 * 10. MODALS + DROPDOWNS + ALERTS
 * ============================================================ */
.modal-content {
    background-color: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-5);
}
.modal-header, .modal-footer { border-color: var(--divider); }
.dropdown-menu {
    background-color: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-3);
    padding: var(--sp-2);
}
.dropdown-item { border-radius: var(--radius-xs); padding: var(--sp-2) var(--sp-3); color: var(--text-body); }
.dropdown-item:hover { background-color: var(--gray-100); color: var(--text-heading); }
[data-bs-theme="dark"] .dropdown-item:hover { background-color: hsl(215 16% 22%); color: var(--text-heading); }

.alert {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
}
.alert-success { background-color: var(--success-soft); border-color: hsl(142 40% 80%); color: hsl(142 60% 22%); }
.alert-danger  { background-color: var(--danger-soft);  border-color: hsl(354 60% 82%); color: hsl(354 60% 32%); }
.alert-info    { background-color: var(--info-soft);    border-color: hsl(199 60% 78%); color: hsl(199 70% 22%); }
.alert-warning { background-color: var(--warning-soft); border-color: hsl(43 80% 68%);  color: hsl(38 80% 28%); }
[data-bs-theme="dark"] .alert-success { color: hsl(142 60% 78%); border-color: hsl(142 40% 30%); }
[data-bs-theme="dark"] .alert-danger  { color: hsl(354 70% 82%); border-color: hsl(354 40% 32%); }
[data-bs-theme="dark"] .alert-info    { color: hsl(199 80% 80%); border-color: hsl(199 40% 30%); }
[data-bs-theme="dark"] .alert-warning { color: hsl(43 90% 78%); border-color: hsl(43 40% 30%); }

/* ============================================================
 * 11. LIST GROUPS + TIMELINE
 * ============================================================ */
.list-group-item {
    background-color: var(--surface-bg);
    border-color: var(--divider);
    color: var(--text-body);
    padding: var(--sp-3) var(--sp-4);
}
.list-group-item.bg-light { background-color: var(--gray-50) !important; }
[data-bs-theme="dark"] .list-group-item.bg-light { background-color: hsl(215 16% 18%) !important; }

/* ============================================================
 * 12. EMPTY STATE PATTERN — 統一空狀態視覺
 * ============================================================ */
.empty-state {
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    color: var(--text-muted);
}
.empty-state .bi { font-size: var(--fs-4xl); opacity: .4; display: block; margin-bottom: var(--sp-3); }
.empty-state-title { font-size: var(--fs-md); color: var(--text-body); font-weight: var(--fw-medium); margin-bottom: var(--sp-1); }
.empty-state-hint  { font-size: var(--fs-sm); }

/* ============================================================
 * 13. FOCUS GRID (my-book / dashboard)
 * ============================================================ */
.focus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-3);
}
.focus-cell {
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    box-shadow: var(--elev-1);
    transition: box-shadow var(--dur-short) var(--ease-out),
                transform var(--dur-short) var(--ease-out);
}
.focus-cell:hover { box-shadow: var(--elev-3); transform: translateY(-1px); }
.focus-cell.empty {
    background: repeating-linear-gradient(45deg, var(--gray-50), var(--gray-50) 8px, var(--surface-bg) 8px, var(--surface-bg) 16px);
    border-style: dashed;
    border-color: var(--gray-300);
    color: var(--text-muted);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
}
.focus-cell.yellow-card {
    background-color: var(--warning-soft);
    box-shadow: inset 3px 0 0 var(--warning);
}

/* ============================================================
 * 14. PAGE LAYOUT — 頁面級規範（container/header/section）
 * ============================================================ */

/* 頁面容器：三種寬度變體（wide=dashboard、default=表格頁、narrow=表單/文本） */
.page-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4);
    box-sizing: border-box;
}
.page-container.page-wide   { max-width: 1600px; }
.page-container.page-narrow { max-width: 860px; }
/* 內部 .row 的負 margin 不要突破 page-container padding */
.page-container > .row { --bs-gutter-x: 1rem; margin-left: calc(-.5 * var(--bs-gutter-x)); margin-right: calc(-.5 * var(--bs-gutter-x)); }

/* 頁面頭部：標題 + 副標 + 右側操作組 */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}
.page-header .page-title-group { flex: 1 1 auto; min-width: 0; }
.page-header h1, .page-header h4 { margin: 0 0 var(--sp-1) 0; font-size: var(--fs-2xl); font-weight: var(--fw-semi); }
.page-header .page-subtitle { color: var(--text-muted); font-size: var(--fs-sm); }
.page-header .page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; flex-shrink: 0; }

/* Section 標題：用於卡片之間分組、無需外層卡片包裹的段落 */
.section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 var(--sp-3);
    color: var(--text-heading);
    font-weight: var(--fw-semi);
    font-size: var(--fs-lg);
}
.section-title .bi { color: var(--brand-primary); }
.section-title .section-count { color: var(--text-muted); font-weight: var(--fw-normal); font-size: var(--fs-sm); margin-left: var(--sp-1); }

/* Vertical rhythm helpers — 段落間統一節奏 */
.stack-sm > * + * { margin-top: var(--sp-3); }
.stack-md > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-5); }

/* Card header 右側動作組 */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}
.card-header .card-header-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.card-header .card-header-title { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.card-header .card-header-title .bi { color: var(--brand-primary); }

/* Section divider — 淺分隔線（比 card 更輕的分組） */
.section-divider {
    height: 1px;
    background: var(--divider);
    margin: var(--sp-5) 0;
    border: 0;
}

/* Two-column detail layout — grid 更好控制對齊 */
.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: var(--sp-4);
}
@media (max-width: 991.98px) {
    .detail-grid { grid-template-columns: 1fr; }
}

/* 定義列表更緊湊、對齊 */
dl.dl-clean { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: var(--sp-2) var(--sp-3); margin: 0; }
dl.dl-clean dt { color: var(--text-muted); font-weight: var(--fw-normal); font-size: var(--fs-sm); }
dl.dl-clean dd { color: var(--text-body); margin: 0; word-break: break-word; }

/* ============================================================
 * 15. LEGACY 兼容（保留 v1 命名）
 * ============================================================ */
.bg-primary { background-color: var(--brand-primary) !important; }
.text-primary { color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }

/* ============================================================
 * 16. 響應式
 * ============================================================ */
@media (max-width: 767.98px) {
    :root { --fs-3xl: 1.6rem; --fs-2xl: 1.35rem; }
    .container-fluid { padding-left: var(--sp-3); padding-right: var(--sp-3); }
    .page-container { padding: var(--sp-4) var(--sp-3); }
    .page-header { margin-bottom: var(--sp-4); }
    .card-body { padding: var(--sp-3); }
    .card + .card { margin-top: var(--sp-3); }
    .focus-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); }
    .modal-dialog { margin: var(--sp-2); }
    .table thead th, .table tbody td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
    .section-title { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-md); }
    dl.dl-clean { grid-template-columns: 1fr; gap: var(--sp-1); }
    dl.dl-clean dt { font-size: var(--fs-xs); }
}