/* Choice Box Web — component styles. Load after tokens.css. Every value comes from a token. */

/* ---------- Base ---------- */
.cb-app { font-family: var(--font-sans); font-size: 15px; line-height: 24px; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
.cb-app *, .cb-app *::before, .cb-app *::after { box-sizing: border-box; }
.cb-app :where(a) { color: var(--accent); }
.cb-app :where(a:hover) { color: var(--accent-hover); }
.cb-app :where(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cb-app :where(h1, h2, h3, p) { margin: 0; }
.cb-num { font-variant-numeric: tabular-nums; }
.cb-muted { color: var(--ink-muted); }
.cb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cb-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cb-icon--sm { width: 16px; height: 16px; }
.cb-icon--xs { width: 14px; height: 14px; stroke-width: 2.4; }

/* ---------- Screen frames ---------- */
.cb-phone { position: relative; width: 390px; height: 844px; overflow: hidden; display: flex; flex-direction: column; }
.cb-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--safe-top) var(--space-5) var(--space-6); }
.cb-screen--dock { padding-bottom: 120px; }
.cb-screen > * { flex-shrink: 0; }
.cb-pc { min-height: 100%; }
.cb-pc__wrap { max-width: var(--pc-container); margin: 0 auto; padding: var(--space-12) var(--space-16) var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); }
.cb-pc__cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-12); }
.cb-pc__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.cb-pc__side { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- PC top bar ---------- */
.cb-pcbar { border-bottom: 1px solid var(--line); background: var(--bg); }
.cb-pcbar__in { max-width: var(--pc-container); margin: 0 auto; padding: 0 var(--space-16); min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.cb-pcbar__name { font-size: 17px; line-height: 24px; font-weight: 800; color: var(--ink); text-decoration: none; }
.cb-pcnav { flex: 1; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.cb-pcnav a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 14px; border-radius: var(--radius-md); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink-muted); text-decoration: none; }
.cb-pcnav a:hover { background: var(--surface); color: var(--ink); }
.cb-pcnav a[aria-current="page"] { background: var(--accent-tint); color: var(--accent); }
.cb-pchead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }

/* ---------- Header ---------- */
.cb-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--tap-min); }
.cb-topbar__actions { display: flex; align-items: center; gap: var(--space-1); }
.cb-back { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap-min); margin-left: -8px; padding-right: var(--space-2); font-size: 15px; line-height: 24px; font-weight: 500; color: var(--accent); text-decoration: none; }
.cb-titleblock { display: flex; flex-direction: column; gap: 2px; }
.cb-titleblock__meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }

/* ---------- Buttons ---------- */
.cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md); font: inherit; font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.cb-btn--primary { background: var(--accent); color: var(--on-accent); }
.cb-btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.cb-btn--tonal { background: var(--surface); color: var(--ink); }
.cb-btn--tonal:hover { background: var(--surface-2); }
.cb-btn--quiet { background: transparent; color: var(--accent); padding: 0 var(--space-1); }
.cb-btn--danger { background: transparent; color: var(--danger); padding: 0 var(--space-1); }
.cb-btn--danger-armed { background: var(--danger); color: var(--on-danger); }
.cb-btn--lg { min-height: var(--dock-button); padding: 0 var(--space-5); border-radius: var(--radius-lg); font-size: 16px; line-height: 24px; font-weight: 700; }
.cb-btn--block { width: 100%; }
.cb-btn--grow { flex: 1; }
.cb-btn:disabled, .cb-btn--disabled { background: var(--surface); color: var(--ink-muted); cursor: not-allowed; }
.cb-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); flex: none; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); cursor: pointer; }
.cb-iconbtn--tonal { background: var(--surface); }
.cb-iconbtn--lg { width: var(--dock-button); height: var(--dock-button); border-radius: var(--radius-lg); }
.cb-btnrow { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Dock (route player) ---------- */
.cb-dock { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-5) var(--safe-bottom); background: var(--bg); border-top: 1px solid var(--line); }
.cb-dock__hint { position: absolute; left: 0; right: 0; top: -28px; text-align: center; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }

/* ---------- Search ---------- */
.cb-search { display: flex; align-items: center; gap: 10px; height: var(--tap-min); padding: 0 14px; border-radius: var(--radius-md); background: var(--surface); color: var(--ink-muted); }
.cb-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); }
.cb-search input::placeholder { color: var(--ink-muted); opacity: 1; }
.cb-search:focus-within { outline: 2px solid var(--focus); outline-offset: 0; }

/* ---------- Continue card ---------- */
.cb-continue { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 14px var(--space-4); border-radius: var(--radius-lg); background: var(--accent-tint); color: var(--ink); text-decoration: none; }
.cb-continue__eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cb-continue__title { font-size: 17px; line-height: 24px; font-weight: 700; }
.cb-continue__meta { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.cb-continue__go { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); }

/* ---------- Library list ---------- */
.cb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cb-row { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: baseline; min-height: var(--row-min); padding: 10px 0 6px; border-bottom: 1px solid var(--line); }
.cb-row--joined { border-bottom: 0; padding-bottom: 0; }
.cb-row__num { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cb-row__title { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); text-decoration: none; }
.cb-row__title::after { content: ""; position: absolute; inset: 0; }
.cb-row__count { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cb-row__count--started { color: var(--ink); }
.cb-row__count--done { color: var(--success); }
.cb-row__sub { grid-column: 2 / -1; display: flex; align-items: center; gap: var(--space-2); min-height: 24px; }
.cb-row__vndb { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 3px; padding: 10px 12px 10px 0; margin: -10px 0; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--accent); text-decoration: none; }
.cb-row--done .cb-row__title { color: var(--ink-muted); }

/* ---------- Disclosure / sections ---------- */
.cb-disclosure { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: var(--tap-min); padding: 0; border: 0; background: none; font: inherit; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-muted); text-align: left; cursor: pointer; }
.cb-disclosure .cb-icon { transition: transform .15s ease; }
.cb-disclosure[aria-expanded="true"] .cb-icon--chev { transform: rotate(180deg); }
.cb-disclosure--filled { padding: 0 14px; border-radius: var(--radius-md); background: var(--surface); font-size: 15px; line-height: 24px; font-weight: 500; color: var(--ink); }
.cb-disclosure--heading { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); min-height: var(--row-min); border-bottom: 1px solid var(--line); }
.cb-disclosure__count { margin-left: auto; margin-right: var(--space-2); font-variant-numeric: tabular-nums; }
.cb-section { display: flex; flex-direction: column; }
.cb-section__body { display: flex; flex-direction: column; padding-bottom: var(--space-2); }
.cb-eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.cb-grouplabel { padding: var(--space-4) 0 var(--space-1); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.cb-notes { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 14px var(--space-4); border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--surface); font-size: 15px; line-height: 24px; }

/* ---------- Link rows (Guide sites) ---------- */
.cb-linkrow { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cb-linkrow__name { flex: 1; min-width: 0; font-size: 15px; line-height: 24px; font-weight: 500; overflow-wrap: anywhere; }
.cb-linkrow .cb-icon { color: var(--accent); }

/* ---------- Tags ---------- */
.cb-tag { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.cb-tag--accent { background: var(--accent-tint); color: var(--accent); }
.cb-tag--success { background: var(--success-tint); color: var(--success); }
.cb-tag--warning { background: var(--warning-tint); color: var(--warning); }
.cb-tag--danger { background: var(--danger-tint); color: var(--danger); }

/* ---------- Route rows ---------- */
.cb-route { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 var(--space-3); min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cb-route__main { display: flex; flex-direction: column; min-width: 0; }
.cb-route__name { font-size: 17px; line-height: 24px; font-weight: 600; }
.cb-route__start { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.cb-route__status { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cb-route__status--cleared { color: var(--success); }
.cb-route__status--progress { color: var(--accent); }
.cb-route__chev { color: var(--ink-muted); }
.cb-route--cleared .cb-route__name { color: var(--ink-muted); }
.cb-flagline { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--warning); }

/* ---------- Route player ---------- */
.cb-progress { display: flex; align-items: center; gap: var(--space-3); }
.cb-progress__track { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.cb-progress__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.cb-progress__label { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cb-step { display: flex; flex-direction: column; }
.cb-step__label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.cb-step__text { font-size: 15px; line-height: 24px; color: var(--ink-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.cb-choice { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: var(--space-5); border: 0; border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cb-choice__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cb-choice__eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cb-choice__hint { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.cb-choice__mask { display: flex; flex-direction: column; gap: 10px; }
.cb-choice__bar { display: block; height: 18px; border-radius: var(--radius-sm); background: var(--surface-2); }
.cb-choice__text { margin: 0; font-size: 26px; line-height: 38px; font-weight: 700; overflow-wrap: anywhere; }
.cb-choice__alt { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-3); border-top: 1px solid var(--surface-2); }
.cb-choice__alt-label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.cb-choice__alt-text { font-size: 17px; line-height: 26px; font-weight: 600; }
.cb-choice__note { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.cb-stepcard { display: flex; align-items: flex-start; gap: 14px; padding: 18px var(--space-5); border-radius: var(--radius-xl); background: var(--surface); }
.cb-stepcard__disc { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent); }
.cb-stepcard__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.cb-stepcard__title { font-size: 20px; line-height: 28px; font-weight: 700; }
.cb-stepcard__text { font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.cb-cleared { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6) var(--space-5); border-radius: var(--radius-xl); background: var(--success-tint); }
.cb-cleared__badge { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--success); color: var(--on-success); }
.cb-cleared__title { font-size: 20px; line-height: 28px; font-weight: 700; }
.cb-cleared__end { font-size: 26px; line-height: 38px; font-weight: 700; overflow-wrap: anywhere; }
.cb-cleared__meta { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }

/* ---------- Forms (PC) ---------- */
.cb-formstep { display: flex; flex-direction: column; gap: var(--space-4); }
.cb-formstep__head { display: flex; align-items: center; gap: var(--space-3); }
.cb-formstep__n { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent); font-size: 13px; font-weight: 700; }
.cb-formstep__title { font-size: 20px; line-height: 28px; font-weight: 700; }
.cb-fields { display: grid; grid-template-columns: 96px minmax(0, 1fr) 128px; gap: var(--space-4); }
.cb-fields > :nth-child(4) { grid-column: 1 / -1; }
.cb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cb-field__label { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink); }
.cb-field__help { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.cb-input { width: 100%; height: var(--tap-min); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--bg); font: inherit; font-size: 15px; color: var(--ink); text-overflow: ellipsis; }
.cb-input:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
.cb-input--wide { height: 52px; font-size: 16px; }
.cb-paste { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 240px; padding: var(--space-6); border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink-muted); text-align: center; cursor: text; }
.cb-paste:focus, .cb-paste:focus-within { border-style: solid; border-color: var(--focus); outline: 0; }
.cb-paste > .cb-icon, .cb-dropzone > .cb-icon { width: 28px; height: 28px; color: var(--ink-muted); }
.cb-paste__title { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.cb-paste__keys { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); font-size: 13px; line-height: 20px; font-weight: 500; }
.cb-paste--filled { flex-direction: row; justify-content: space-between; min-height: 88px; padding: var(--space-4) var(--space-5); border-style: solid; border-color: var(--success); background: var(--success-tint); color: var(--ink); text-align: left; cursor: default; }
.cb-paste__state { display: flex; align-items: center; gap: var(--space-3); }
.cb-paste__state .cb-icon { color: var(--success); }
.cb-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 var(--space-2); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--bg); font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.cb-code { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--surface); font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink); }
.cb-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 240px; padding: var(--space-6); border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); text-align: center; color: var(--ink-muted); }
.cb-filechip { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface); }
.cb-filechip__name { font-family: var(--font-mono); font-size: 15px; line-height: 24px; font-weight: 500; }

/* ---------- Result card ---------- */
.cb-result { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.cb-result--empty { align-items: flex-start; border-style: dashed; border-color: var(--line-strong); color: var(--ink-muted); }
.cb-result__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.cb-result__badge { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-muted); }
.cb-result--ready .cb-result__badge { background: var(--success); color: var(--on-success); }
.cb-result--warning .cb-result__badge { background: var(--warning-tint); color: var(--warning); }
.cb-result--blocked .cb-result__badge { background: var(--danger-tint); color: var(--danger); }
.cb-result__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cb-result__title { font-size: 20px; line-height: 28px; font-weight: 700; }
.cb-result__meta { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.cb-result__text { font-size: 15px; line-height: 24px; color: var(--ink); }
.cb-result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-1); }
.cb-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0; font-size: 15px; line-height: 24px; }
.cb-facts dt { color: var(--ink-muted); font-weight: 500; }
.cb-facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.cb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.cb-stat { display: flex; flex-direction: column; padding: 14px var(--space-4); border-radius: var(--radius-md); background: var(--surface); }
.cb-stat__value { font-size: 26px; line-height: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cb-stat__label { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.cb-perroute { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cb-perroute li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; line-height: 20px; }
.cb-perroute span { color: var(--ink-muted); font-weight: 500; }
.cb-perroute b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-counts { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 24px; }
.cb-counts th { padding: 0 0 var(--space-2); text-align: left; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--line); }
.cb-counts th:last-child, .cb-counts td:last-child { text-align: right; }
.cb-counts td { padding: 10px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cb-counts td:first-child { font-weight: 500; }
.cb-counts--compact td { padding: 6px 0; }
.cb-counts tr.is-flagged td { color: var(--warning); font-weight: 700; }
.cb-issues { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: var(--space-4); list-style: none; border-radius: var(--radius-md); background: var(--warning-tint); }
.cb-issues__head { display: flex; align-items: center; gap: var(--space-2); font-size: 15px; line-height: 24px; font-weight: 700; color: var(--warning); }
.cb-issues li { display: flex; align-items: center; gap: var(--space-3); font-size: 15px; line-height: 24px; }
.cb-issues .cb-code { background: var(--bg); }

/* ---------- Settings ---------- */
.cb-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--row-min); padding: 10px 0; border-bottom: 1px solid var(--line); }
.cb-setting__text { display: flex; flex-direction: column; min-width: 0; }
.cb-setting__label { font-size: 15px; line-height: 24px; font-weight: 500; }
.cb-setting__help { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.cb-setting--link { color: var(--ink); text-decoration: none; }
.cb-switch { position: relative; width: 52px; height: 32px; flex: none; margin: 0; appearance: none; -webkit-appearance: none; border-radius: var(--radius-pill); background: var(--line-strong); cursor: pointer; }
.cb-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--knob); transition: transform .15s ease; }
.cb-switch:checked { background: var(--accent); }
.cb-switch:checked::before { transform: translateX(20px); background: var(--on-accent); }
.cb-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--surface); }
.cb-seg button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
.cb-seg button[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); }

/* ---------- Status ---------- */
.cb-sync { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.cb-sync--synced { color: var(--success); background: var(--success-tint); }
.cb-sync--syncing { color: var(--accent); background: var(--accent-tint); }
.cb-sync--offline { color: var(--warning); background: var(--warning-tint); }
.cb-sync--failed { color: var(--danger); background: var(--danger-tint); }
.cb-banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 14px; border-radius: var(--radius-md); background: var(--accent-tint); color: var(--ink); font-size: 13px; line-height: 20px; font-weight: 500; }
.cb-banner > .cb-icon { margin-top: 0; color: var(--accent); }
.cb-banner__title { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.cb-banner--warning { background: var(--warning-tint); }
.cb-banner--warning > .cb-icon { color: var(--warning); }
.cb-banner--danger { background: var(--danger-tint); }
.cb-banner--danger > .cb-icon { color: var(--danger); }
.cb-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6) 0; }
.cb-empty__mark { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--surface); color: var(--ink-muted); }
.cb-empty__mark .cb-icon { width: 28px; height: 28px; }
.cb-empty__title { font-size: 20px; line-height: 28px; font-weight: 700; }
.cb-empty__text { font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.cb-skel { display: block; border-radius: var(--radius-sm); background: var(--surface-2); }
@media (prefers-reduced-motion: no-preference) { .cb-skel--pulse { animation: cb-pulse 1.4s ease-in-out infinite; } }
@keyframes cb-pulse { 50% { opacity: .55; } }

/* ---------- How-to ---------- */
.cb-acc { display: flex; flex-direction: column; }
.cb-acc__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) 0 var(--space-5); border-bottom: 1px solid var(--line); }
.cb-howto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); counter-reset: cb-step; }
.cb-howto li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; counter-increment: cb-step; font-size: 15px; line-height: 24px; }
.cb-howto li::before { content: counter(cb-step); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--accent); font-size: 13px; font-weight: 700; }
.cb-howto__keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---------- PC library, cards, manual-entry format ---------- */
.cb-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.cb-card__head { display: flex; flex-direction: column; gap: 2px; }
.cb-card__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; }
.cb-card__text { margin: 0; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.cb-tablewrap { overflow-x: auto; }
.cb-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 24px; }
.cb-table th { padding: 0 var(--space-3) var(--space-2) 0; text-align: left; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.cb-table td { padding: 6px var(--space-3) 6px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cb-table tbody tr:hover td { background: var(--surface); }
.cb-table tr.is-armed td { background: var(--danger-tint); }
.cb-table__num { width: 48px; font-size: 13px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cb-table__title { font-weight: 600; }
.cb-table__muted { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.cb-table__r { text-align: right; }
.cb-table th.cb-table__r { text-align: right; }
.cb-table__act { width: 1%; text-align: right; white-space: nowrap; padding-right: 0; }
.cb-table .cb-row__vndb { margin: 0; padding: 0; }
.cb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.cb-labels { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--space-4); margin: 0; font-size: 15px; line-height: 24px; }
.cb-labels dt { margin: 0; }
.cb-labels dd { margin: 0; color: var(--ink-muted); }
.cb-codeblock { margin: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); font-family: var(--font-mono); font-size: 13px; line-height: 22px; color: var(--ink); white-space: pre; overflow-x: auto; }
.cb-codeblock__line { display: block; min-height: 22px; white-space: pre; }
.cb-codeblock__label { color: var(--accent); font-weight: 600; }
.cb-prose { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; font-size: 15px; line-height: 24px; }
.cb-prose h2 { margin: var(--space-4) 0 0; font-size: 20px; line-height: 28px; font-weight: 700; }
.cb-prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--space-1); }
.cb-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cb-toc a { display: flex; align-items: center; min-height: 40px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; text-decoration: none; }