@layer components.xcb-mockups{.hkm-root.xcb-mock{--xcb-claude:light-dark(#c15f3c,#e38a66);--xcb-codex:light-dark(#2d6a4f,#6fcf97);--xcb-devin:light-dark(#3a5bd9,#8ea6ff)}.xcb-mock .xcb-mock-body{display:grid;align-content:start;gap:14px;padding:16px 18px 18px;background:var(--hkm-bg);color:var(--hkm-fg);font:400 14px/1.45 var(--hkm-font)}.xcb-mock .xcb-board-head,.xcb-mock .xcb-board-row{display:grid;grid-template-columns:minmax(0,1.25fr) 3.5em minmax(0,2fr);align-items:center;gap:14px}.xcb-mock .xcb-board-head{padding:0 12px;color:var(--hkm-faint);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.xcb-mock .xcb-board-rows{display:grid;gap:8px;margin:0;padding:0;list-style:none}.xcb-mock .xcb-board-row{padding:11px 12px;border-radius:10px;background:var(--hkm-card);box-shadow:0 0 0 1px var(--hkm-line)}.xcb-mock .xcb-board-row[data-tone=pick]{box-shadow:0 0 0 1.5px var(--hkm-ok)}.xcb-mock .xcb-board-row[data-tone=limit]{box-shadow:0 0 0 1px var(--hkm-line);opacity:.72}.xcb-mock .xcb-board-account{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-inline-size:0;font-weight:600}.xcb-mock .xcb-board-provider{padding:1px 7px;border-radius:999px;color:var(--hkm-bg);font-size:11.5px;font-weight:600}.xcb-mock .xcb-board-provider[data-provider=claude]{background:var(--xcb-claude)}.xcb-mock .xcb-board-provider[data-provider=codex]{background:var(--xcb-codex)}.xcb-mock .xcb-board-provider[data-provider=devin]{background:var(--xcb-devin)}.xcb-mock .xcb-board-chip{padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--hkm-ok) 16%,transparent);color:var(--hkm-ok);font-size:11.5px;font-weight:600}.xcb-mock .xcb-board-plan{color:var(--hkm-muted);font-size:13px}.xcb-mock .xcb-board-usage{display:grid;gap:5px;min-inline-size:0}.xcb-mock .xcb-board-meter{display:block;block-size:6px;overflow:hidden;border-radius:999px;background:var(--hkm-field)}.xcb-mock .xcb-board-meter>span{display:block;block-size:100%;border-radius:inherit;background:var(--hkm-muted)}.xcb-mock .xcb-board-row[data-tone=pick] .xcb-board-meter>span{background:var(--hkm-ok)}.xcb-mock .xcb-board-meter[data-empty]{background:repeating-linear-gradient(90deg,var(--hkm-field) 0 6px,transparent 6px 10px)}.xcb-mock .xcb-board-status{color:var(--hkm-muted);font:400 12px/1.35 var(--hkm-mono)}.xcb-mock .xcb-board-row[data-tone=limit] .xcb-board-status{color:var(--hkm-warn)}.xcb-mock .xcb-board-note{margin:2px 0 0;color:var(--hkm-muted);font-size:13px}[data-hkm-animated] .xcb-mock .xcb-board-meter>span{transition:inline-size .48s var(--hkm-ease),background-color .24s var(--hkm-ease)}[data-hkm-animated] .xcb-mock .xcb-board-row{transition:box-shadow .24s var(--hkm-ease),opacity .24s var(--hkm-ease)}.xcb-mock .xcb-route-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start;gap:14px}.xcb-mock .xcb-route-code{margin:0;padding:14px 16px 16px;overflow-x:auto;background:light-dark(#fbfbfc,#111214);color:var(--hkm-fg);font:400 12.5px/1.55 var(--hkm-mono);white-space:pre-wrap;overflow-wrap:anywhere}.xcb-mock .xcb-route-code>.hkm-sample{white-space:inherit}.xcb-mock .xcb-run{display:grid;gap:8px;margin:0;padding:18px;list-style:none;border:1px solid var(--hkm-line);border-radius:12px;background:var(--hkm-bg)}.xcb-mock .xcb-run-layer{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--hkm-line);border-radius:10px;background:var(--hkm-field);color:var(--hkm-fg)}.xcb-mock .xcb-run-layer:nth-child(2){margin-inline:12px}.xcb-mock .xcb-run-layer:nth-child(3){margin-inline:24px}.xcb-mock .xcb-run-layer:nth-child(4){margin-inline:36px}.xcb-mock .xcb-run-layer:nth-child(5){margin-inline:48px}@media (max-width:520px){.xcb-mock .xcb-run-layer:nth-child(n){margin-inline:0}}.xcb-mock .xcb-run-icon{display:grid;place-items:center;inline-size:36px;block-size:36px;border-radius:8px;background:var(--hkm-bg);color:var(--hkm-accent)}.xcb-mock .xcb-run-text{display:grid;gap:2px;min-inline-size:0}.xcb-mock .xcb-run-text strong{font-size:14px}.xcb-mock .xcb-run-text span{color:var(--hkm-muted);font-size:12.5px}.xcb-mock .xcb-run[data-focus=limits] .xcb-run-layer:not([data-layer=tools]){opacity:.55}.xcb-mock .xcb-run[data-focus=limits] [data-layer=tools]{border-color:var(--hkm-warn);box-shadow:0 0 0 1px var(--hkm-warn)}}