/* ============================================================
   ACCOUNT — the client portal demo: a draggable widget dashboard
   you can redesign by talking to it, plus Agents, AI and Settings.
   Theme-aware (all colour from kit tokens). Mount: <div data-account></div>
   ============================================================ */

.acc { border: 1px solid var(--line); border-radius: 18px; background: var(--card); overflow: hidden; box-shadow: 0 30px 80px -50px #000; }

/* ---- top bar ---- */
.acc-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg2); }
.acc-biz { display: flex; align-items: center; gap: 10px; min-width: 0; }
.acc-avatar { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; font-family: var(--font-display, inherit); font-weight: 700; color: #05050a; background: linear-gradient(120deg, var(--neon), var(--violet)); }
.acc-biz b { font-family: var(--font-display, inherit); font-size: 15px; color: var(--ink); display: block; line-height: 1.1; }
.acc-biz span { font-size: 11.5px; color: var(--mut); }
.acc-plan { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--neon); border: 1px solid color-mix(in srgb, var(--neon) 40%, var(--line)); background: var(--tint-neon); border-radius: 999px; padding: 5px 11px; }
.acc-demo { font-size: 11px; color: var(--mut); border: 1px dashed var(--line); border-radius: 999px; padding: 4px 9px; }

/* ---- body: sidebar + main ---- */
.acc-body { display: grid; grid-template-columns: 188px minmax(0,1fr); min-height: 560px; }
@media (max-width: 800px) { .acc-body { grid-template-columns: 1fr; } }
.acc-nav { display: flex; flex-direction: column; gap: 3px; padding: 14px 10px; border-right: 1px solid var(--line); }
@media (max-width: 800px) { .acc-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } }
.acc-nav button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit; font-size: 14px; font-weight: 600; color: var(--mut); background: none; border: 0; border-radius: 10px; padding: 9px 11px; cursor: pointer; white-space: nowrap; transition: color .15s, background .15s; }
.acc-nav button:hover { color: var(--ink); background: color-mix(in srgb, var(--card) 60%, transparent); }
.acc-nav button.on { color: var(--ink); background: color-mix(in srgb, var(--neon) 14%, transparent); box-shadow: inset 2px 0 0 var(--neon); }
.acc-nav button .acc-ic { width: 18px; text-align: center; flex: none; }
.acc-nav .acc-nav-sp { flex: 1; }
.acc-nav .acc-help { font-size: 11.5px; color: var(--mut); padding: 8px 11px; line-height: 1.4; }

.acc-main { padding: 16px 18px 22px; min-width: 0; }
.acc-h { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 4px; }
.acc-h h3 { font-family: var(--font-display, inherit); font-size: 21px; margin: 0; color: var(--ink); }
.acc-h .acc-sub { font-size: 13px; color: var(--mut); }

/* ---- AI command bar ---- */
.acc-ai { margin: 12px 0 14px; border: 1px solid color-mix(in srgb, var(--neon) 35%, var(--line)); border-radius: 14px; background: var(--tint-neon); overflow: hidden; }
.acc-ai-row { display: flex; align-items: center; gap: 9px; padding: 9px 12px; }
.acc-ai-row .acc-ai-ic { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; color: #05050a; background: linear-gradient(120deg, var(--neon), var(--violet)); font-size: 12px; }
.acc-ai-row input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; font-size: 14px; }
.acc-ai-row input::placeholder { color: var(--mut); }
.acc-ai-send { font: inherit; font-size: 13px; font-weight: 700; color: #05050a; background: linear-gradient(120deg, var(--neon), var(--violet)); border: 0; border-radius: 9px; padding: 7px 13px; cursor: pointer; flex: none; }
.acc-ai-send:hover { box-shadow: 0 10px 24px -10px var(--glow-neon); }
.acc-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
.acc-chip { font: inherit; font-size: 12px; font-weight: 600; color: var(--mut); background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.acc-chip:hover { color: var(--neon); border-color: color-mix(in srgb, var(--neon) 45%, var(--line)); }
.acc-log { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; max-height: 230px; overflow: auto; }
.acc-log:empty { display: none; }
.acc-msg { font-size: 13px; line-height: 1.5; border-radius: 10px; padding: 8px 11px; max-width: 90%; }
.acc-msg.you { align-self: flex-end; background: color-mix(in srgb, var(--violet) 18%, var(--card)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--line)); }
.acc-msg.ai { align-self: flex-start; background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.acc-msg.ai b { color: var(--neon); }
.acc-msg .acc-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.acc-msg .acc-actions button { font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.acc-msg .acc-actions button:hover { border-color: color-mix(in srgb, var(--neon) 50%, var(--line)); color: var(--neon); }

/* ---- dashboard toolbar ---- */
.acc-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.acc-toolbtn { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mut); background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 11px; cursor: pointer; }
.acc-toolbtn:hover { color: var(--ink); border-color: color-mix(in srgb, var(--neon) 40%, var(--line)); }
.acc-toolbtn[aria-pressed="true"] { color: #05050a; background: linear-gradient(120deg, var(--neon), var(--violet)); border-color: transparent; }
.acc-toolbtn.danger:hover { color: var(--error, #ff5e7e); border-color: color-mix(in srgb, #ff5e7e 45%, var(--line)); }

/* ---- widget grid (draggable) ---- */
.acc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1080px) { .acc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .acc-grid { grid-template-columns: 1fr; } }
.acc-grid.compact { gap: 8px; }
.acc-w { position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; min-height: 96px; transition: border-color .15s, box-shadow .15s, opacity .15s; }
.acc-w.span2 { grid-column: span 2; }
.acc-w.span-full { grid-column: 1 / -1; }
@media (max-width: 560px) { .acc-w.span2, .acc-w.span-full { grid-column: span 1; } }
.acc-w-rz { margin-left: auto; cursor: pointer; color: var(--mut); opacity: .55; font-size: 13px; line-height: 1; background: none; border: 0; padding: 2px 4px; }
.acc-w-rz:hover { opacity: 1; color: var(--neon); }
.acc-grid.compact .acc-w { padding: 11px; min-height: 80px; }
.acc-w:hover { border-color: color-mix(in srgb, var(--neon) 30%, var(--line)); }
.acc-w.dragging { opacity: .45; }
.acc-w.dragover { border-color: var(--neon); box-shadow: 0 0 0 3px var(--tint-neon); }
.acc-w-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.acc-w-head .acc-w-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--mut); }
.acc-w-grip { cursor: grab; color: var(--mut); opacity: .6; font-size: 14px; line-height: 1; padding: 2px; }
.acc-w-grip:active { cursor: grabbing; }
.acc-w-x { cursor: pointer; color: var(--mut); opacity: .55; font-size: 15px; line-height: 1; background: none; border: 0; padding: 0 2px; }
.acc-w-x:hover { opacity: 1; color: var(--error, #ff5e7e); }
.acc-w-big { font-family: var(--font-display, inherit); font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1; }
.acc-w-big small { font-size: 15px; color: var(--mut); font-weight: 500; }
.acc-w-delta { font-size: 12.5px; font-weight: 700; margin-top: 5px; }
.acc-w-delta.up { color: var(--win); } .acc-w-delta.down { color: var(--error, #ff5e7e); }
.acc-w-note { font-size: 12px; color: var(--mut); margin-top: 5px; line-height: 1.4; }
.acc-w.win .acc-w-big { color: var(--win); }

/* spark bar */
.acc-spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 8px; }
.acc-spark i { flex: 1; background: linear-gradient(to top, var(--neon), var(--violet)); border-radius: 2px 2px 0 0; opacity: .85; }

/* lists inside big widgets */
.acc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.acc-list li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); }
.acc-list .acc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.acc-list .acc-meta { color: var(--mut); font-size: 11.5px; margin-left: auto; white-space: nowrap; }
.acc-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.acc-feed li { display: flex; gap: 9px; font-size: 13px; color: var(--ink); line-height: 1.4; }
.acc-feed .acc-fi { flex: none; }
.acc-feed time { color: var(--mut); font-size: 11px; display: block; margin-top: 1px; }
.acc-feed b { color: var(--neon); font-weight: 600; }

/* hidden-widgets tray */
.acc-tray { margin-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--mut); }
.acc-tray .acc-add { font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--bg2); border: 1px dashed var(--line); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.acc-tray .acc-add:hover { border-color: color-mix(in srgb, var(--neon) 50%, var(--line)); color: var(--neon); }

/* ---- agents ---- */
.acc-agents { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 720px) { .acc-agents { grid-template-columns: 1fr; } }
.acc-agent { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 15px; }
.acc-agent-h { display: flex; align-items: center; gap: 11px; }
.acc-agent-ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 18px; background: color-mix(in srgb, var(--neon) 14%, var(--card)); border: 1px solid var(--line); }
.acc-agent-h b { font-family: var(--font-display, inherit); font-size: 15px; color: var(--ink); display: block; }
.acc-agent-h .acc-agent-role { font-size: 12px; color: var(--mut); }
.acc-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.acc-status.live { color: var(--win); background: color-mix(in srgb, var(--win) 14%, transparent); }
.acc-status.soon { color: var(--violet); background: color-mix(in srgb, var(--violet) 16%, transparent); }
.acc-status.off { color: var(--mut); background: color-mix(in srgb, var(--mut) 14%, transparent); }
.acc-status .acc-sd { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.acc-agent p { font-size: 13px; color: var(--mut); line-height: 1.5; margin: 10px 0; }
.acc-agent-stats { display: flex; gap: 16px; margin: 8px 0 10px; }
.acc-agent-stats div b { font-family: var(--font-display, inherit); font-size: 18px; color: var(--ink); display: block; line-height: 1; }
.acc-agent-stats div span { font-size: 11px; color: var(--mut); }
.acc-agent-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.acc-approve { font-size: 12px; color: var(--mut); }
.acc-approve b { color: var(--pink); }

/* toggle switch */
.acc-switch { margin-left: auto; position: relative; width: 40px; height: 22px; flex: none; cursor: pointer; }
.acc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.acc-switch .acc-track { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .15s; }
.acc-switch .acc-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--mut); transition: transform .15s, background .15s; }
.acc-switch input:checked + .acc-track { background: linear-gradient(120deg, var(--neon), var(--violet)); }
.acc-switch input:checked + .acc-track + .acc-knob { transform: translateX(18px); background: #fff; }
.acc-switch input:focus-visible + .acc-track { outline: 2px solid var(--pink); outline-offset: 2px; }

/* ---- settings ---- */
.acc-set { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.acc-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.acc-card h4 { font-family: var(--font-display, inherit); font-size: 14px; margin: 0 0 4px; color: var(--ink); }
.acc-card .acc-card-sub { font-size: 12.5px; color: var(--mut); margin: 0 0 12px; }
.acc-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.acc-field label { font-size: 12px; font-weight: 600; color: var(--mut); }
.acc-field input, .acc-field select { font: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; outline: 0; }
.acc-field input:focus, .acc-field select:focus { border-color: color-mix(in srgb, var(--neon) 55%, var(--line)); box-shadow: 0 0 0 3px var(--tint-neon); }
.acc-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line); }
.acc-row:first-of-type { border-top: 0; }
.acc-row .acc-rowmeta b { font-size: 13.5px; color: var(--ink); display: block; }
.acc-row .acc-rowmeta span { font-size: 12px; color: var(--mut); }
.acc-row .acc-ic-lg { width: 30px; text-align: center; flex: none; font-size: 18px; }
.acc-cat-head { font-family: var(--font-display, inherit); font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.acc-cat-count { font-size: 11px; font-weight: 600; color: var(--mut); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.acc-badge { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; border-radius: 999px; padding: 1px 6px; vertical-align: middle; }
.acc-badge.live { color: var(--win); background: color-mix(in srgb, var(--win) 16%, transparent); }
.acc-badge.keyed { color: var(--mut); background: color-mix(in srgb, var(--mut) 16%, transparent); }
.acc-res { display: block; font-size: 11px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.acc-res.ok { color: var(--win); } .acc-res.fb { color: var(--mut); }
.acc-test { flex: none; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--neon); background: var(--tint-neon); border: 1px solid color-mix(in srgb, var(--neon) 40%, var(--line)); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.acc-test:hover { background: color-mix(in srgb, var(--neon) 22%, transparent); }
.acc-test:disabled { opacity: .6; cursor: default; }

.acc-swatches { display: flex; gap: 8px; }
.acc-sw { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--line); cursor: pointer; }
.acc-sw[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--tint-neon); }

.acc-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); z-index: 60; background: var(--card); border: 1px solid color-mix(in srgb, var(--neon) 45%, var(--line)); color: var(--ink); font-size: 13.5px; border-radius: 10px; padding: 10px 16px; box-shadow: 0 18px 50px -20px #000; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.acc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* live source value on a dashboard tile */
.acc-meta.live { color: var(--win); font-weight: 700; }

/* approval emphasis buttons */
.acc-toolbtn.approve { color: #05050a; background: linear-gradient(120deg, var(--pink), var(--violet)); border-color: transparent; }
.acc-toolbtn.approve:hover { box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--pink) 60%, transparent); }
.acc-approve-btn { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--pink); background: var(--tint-pink, color-mix(in srgb, var(--pink) 12%, transparent)); border: 1px solid color-mix(in srgb, var(--pink) 35%, var(--line)); border-radius: 9px; padding: 6px 11px; cursor: pointer; }
.acc-approve-btn:hover { background: color-mix(in srgb, var(--pink) 20%, transparent); }
.acc-approve-btn b { color: var(--ink); }

/* filter / isolate chips */
.acc-afilter { display: flex; gap: 5px; margin-bottom: 9px; flex-wrap: wrap; }
.acc-fchip { font: inherit; font-size: 12px; font-weight: 600; color: var(--mut); background: color-mix(in srgb, var(--card) 60%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.acc-fchip.sm { padding: 3px 9px; font-size: 12.5px; }
.acc-fchip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--neon) 40%, var(--line)); }
.acc-fchip.on { color: #05050a; background: linear-gradient(120deg, var(--neon), var(--violet)); border-color: transparent; }

/* ---- natural-language built views (preview in chat + pinned widgets) ---- */
.acc-preview { margin-top: 9px; border: 1px solid color-mix(in srgb, var(--neon) 30%, var(--line)); border-radius: 11px; padding: 12px; background: var(--bg2); }
.acc-preview-note { font-size: 11px; color: var(--mut); margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.acc-w-custom { border-color: color-mix(in srgb, var(--neon) 28%, var(--line)); }
.acc-w-custom .acc-w-t { color: var(--neon); }
.acc-cbars { display: flex; flex-direction: column; gap: 8px; }
.acc-cbar { display: flex; align-items: center; gap: 10px; }
.acc-cbar-l { flex: 0 0 124px; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-cbar .acc-bar { flex: 1; }
.acc-cbar-v { flex: 0 0 auto; min-width: 30px; text-align: right; font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }

/* validated on-the-fly metric */
.acc-metric-f { font-family: ui-monospace, monospace; font-size: 12px; color: var(--neon); margin-top: 4px; }

/* KPI scorecard (research-backed metrics + benchmark + manage tip) */
.acc-score { display: flex; flex-direction: column; gap: 11px; }
.acc-krow { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.acc-krow:last-child { border-bottom: 0; padding-bottom: 0; }
.acc-khead { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.acc-kdot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 8px -1px currentColor; }
.acc-kname { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.acc-kval { font-family: var(--font-display, inherit); font-size: 15px; font-weight: 700; color: var(--ink); }
.acc-ktgt { margin-left: auto; font-size: 11px; color: var(--mut); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.acc-ktip { font-size: 12px; line-height: 1.5; color: var(--mut); margin-top: 5px; padding-left: 18px; }
.acc-ksrc { font-size: 10.5px; color: var(--mut); opacity: .8; border-left: 1px solid var(--line); padding-left: 7px; margin-left: 4px; }

/* "your saved views" tray */
.acc-views { margin-top: 10px; }
.acc-views-hint { color: var(--mut); font-size: 11.5px; }
.acc-vchip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 2px 4px 2px 0; }
.acc-vchip.on { border-color: color-mix(in srgb, var(--neon) 50%, var(--line)); background: var(--tint-neon); }
.acc-vpin { font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 5px 4px 5px 11px; cursor: pointer; }
.acc-vchip.on .acc-vpin { color: var(--neon); }
.acc-vdel { font-size: 14px; line-height: 1; color: var(--mut); background: none; border: 0; padding: 4px 9px 4px 4px; cursor: pointer; }
.acc-vdel:hover { color: var(--error, #ff5e7e); }

/* ---- approval pipeline / bottleneck widget ---- */
.acc-bottleneck { font-size: 12.5px; line-height: 1.5; color: var(--ink); border-radius: 10px; padding: 9px 12px; margin-bottom: 11px; background: color-mix(in srgb, var(--error, #ff5e7e) 12%, transparent); border: 1px solid color-mix(in srgb, var(--error, #ff5e7e) 35%, var(--line)); }
.acc-bottleneck.ok { background: color-mix(in srgb, var(--win) 12%, transparent); border-color: color-mix(in srgb, var(--win) 35%, var(--line)); }
.acc-bottleneck b { color: var(--ink); }
.acc-link { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--neon); background: none; border: 0; cursor: pointer; padding: 0; }
.acc-link:hover { text-decoration: underline; }

.acc-chain { display: flex; align-items: stretch; gap: 6px; margin-bottom: 12px; }
.acc-stage { flex: 1; min-width: 0; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 6px; }
.acc-stage b { display: block; font-family: var(--font-display, inherit); font-size: 22px; line-height: 1; color: var(--ink); }
.acc-stage span { display: block; font-size: 11px; color: var(--mut); margin-top: 4px; }
.acc-stage em { display: block; font-style: normal; font-size: 10.5px; color: var(--mut); margin-top: 2px; opacity: .85; }
.acc-stage.hot { border-color: color-mix(in srgb, var(--error, #ff5e7e) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--error, #ff5e7e) 14%, transparent); }
.acc-stage.hot b { color: var(--error, #ff5e7e); }
.acc-stage.done b { color: var(--win); }
.acc-arrow { align-self: center; color: var(--mut); font-size: 15px; flex: none; }

.acc-prows-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--mut); margin: 4px 0 8px; }
.acc-prow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 5px 4px; border-radius: 8px; }
.acc-prow:hover { background: color-mix(in srgb, var(--card) 60%, transparent); }
.acc-prow-n { flex: 0 0 130px; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-bar { flex: 1; height: 8px; background: var(--card); border-radius: 999px; overflow: hidden; }
.acc-bar i { display: block; height: 100%; border-radius: 999px; }
.acc-prow-m { flex: 0 0 auto; font-size: 11.5px; color: var(--mut); white-space: nowrap; font-variant-numeric: tabular-nums; }
.acc-prow-m.late { color: var(--error, #ff5e7e); font-weight: 700; }

.acc-sla-line { font-size: 11.5px; color: var(--mut); margin: -4px 0 11px; }
.acc-sla-line b { color: var(--ink); }
.acc-breach { color: var(--error, #ff5e7e); font-weight: 700; }

/* risk badges on drafts */
.acc-risk { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; border-radius: 999px; padding: 1px 7px; }
.acc-risk.low { color: var(--win); background: color-mix(in srgb, var(--win) 14%, transparent); }
.acc-risk.med { color: var(--mut); background: color-mix(in srgb, var(--mut) 16%, transparent); }
.acc-risk.high { color: var(--error, #ff5e7e); background: color-mix(in srgb, var(--error, #ff5e7e) 14%, transparent); }
.acc-draft.breached { border-color: color-mix(in srgb, var(--error, #ff5e7e) 45%, var(--line)); }

.acc-modal-bn { font-size: 12.5px; line-height: 1.5; color: var(--ink); padding: 10px 18px; background: color-mix(in srgb, var(--error, #ff5e7e) 10%, transparent); border-bottom: 1px solid var(--line); }
.acc-draft-age { font-size: 11px; color: var(--mut); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.acc-draft-age.late { color: var(--error, #ff5e7e); border-color: color-mix(in srgb, var(--error, #ff5e7e) 40%, var(--line)); }

/* ---- Agent & Skill Builder ---- */
.acc-agents-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; color: var(--mut); }
.acc-agents-top span { flex: 1; }
.acc-agent-skills { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 10px; }
.acc-skill-chip { font-size: 11px; color: var(--neon); background: var(--tint-neon); border: 1px solid color-mix(in srgb, var(--neon) 35%, var(--line)); border-radius: 999px; padding: 2px 9px; }
.acc-modal-wide { width: min(880px, calc(100vw - 28px)); }
.acc-build { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; overflow: auto; }
@media (max-width: 720px) { .acc-build { grid-template-columns: 1fr; } }
.acc-build-l { padding: 16px 18px; }
.acc-build-r { padding: 16px 18px; background: var(--bg2); border-left: 1px solid var(--line); }
@media (max-width: 720px) { .acc-build-r { border-left: 0; border-top: 1px solid var(--line); } }
.acc-build-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--mut); margin: 14px 0 8px; }
.acc-build-h:first-child { margin-top: 0; }
.acc-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acc-tpl { position: relative; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; cursor: pointer; }
.acc-tpl.on { border-color: var(--neon); box-shadow: 0 0 0 3px var(--tint-neon); }
.acc-tpl-ic { font-size: 18px; } .acc-tpl b { display: block; font-size: 13px; color: var(--ink); margin-top: 3px; } .acc-tpl em { display: block; font-style: normal; font-size: 11.5px; color: var(--mut); margin-top: 1px; }
.acc-tpl-tier { position: absolute; top: 9px; right: 9px; font-size: 9px; font-weight: 800; text-transform: uppercase; border-radius: 999px; padding: 1px 6px; }
.acc-tpl-tier.included { color: var(--win); background: color-mix(in srgb, var(--win) 14%, transparent); }
.acc-tpl-tier.metered { color: var(--neon); background: var(--tint-neon); }
.acc-tpl-tier.addon { color: var(--violet); background: color-mix(in srgb, var(--violet) 16%, transparent); }
.acc-bd-name { width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; outline: 0; }
.acc-bd-name:focus { border-color: color-mix(in srgb, var(--neon) 55%, var(--line)); box-shadow: 0 0 0 3px var(--tint-neon); }
.acc-skills { display: flex; flex-direction: column; gap: 5px; }
.acc-sk { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; cursor: pointer; }
.acc-sk.on { border-color: color-mix(in srgb, var(--neon) 40%, var(--line)); background: color-mix(in srgb, var(--card) 60%, transparent); }
.acc-sk-l { flex: 1; }
.acc-sk-cost { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.acc-sk-cost.inc { color: var(--win); background: color-mix(in srgb, var(--win) 13%, transparent); }
.acc-sk-cost.meter { color: var(--neon); background: var(--tint-neon); }
.acc-sk-cost.addon { color: var(--violet); background: color-mix(in srgb, var(--violet) 16%, transparent); }
.acc-bd-appr { display: flex; gap: 7px; }
.acc-seg { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--mut); background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; cursor: pointer; }
.acc-seg.on { color: #05050a; background: linear-gradient(120deg, var(--neon), var(--violet)); border-color: transparent; }
.acc-guide { font-size: 12.5px; line-height: 1.5; color: var(--mut); margin-top: 14px; padding: 11px; border: 1px dashed color-mix(in srgb, var(--neon) 35%, var(--line)); border-radius: 10px; background: var(--tint-neon); }
.acc-guide b { color: var(--ink); }
.acc-guide-meta { margin-top: 6px; font-size: 11.5px; }
.acc-cost h5 { font-family: var(--font-display, inherit); font-size: 13px; margin: 0 0 9px; color: var(--ink); }
.acc-cost-lines { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.acc-cost-lines li { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.acc-cl-k { color: var(--ink); font-weight: 600; flex: 0 0 auto; }
.acc-cl-d { color: var(--mut); flex: 1; font-size: 11.5px; }
.acc-cl-p { color: var(--neon); font-weight: 700; white-space: nowrap; }
.acc-est { border: 1px solid var(--line); border-radius: 10px; padding: 11px; margin-bottom: 10px; }
.acc-est-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.acc-est-h select { font: inherit; font-size: 12px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px; }
.acc-est-parts { list-style: none; margin: 0 0 6px; padding: 0; font-size: 11.5px; color: var(--mut); display: flex; flex-direction: column; gap: 3px; }
.acc-est-none { font-size: 12px; color: var(--win); margin: 0 0 6px; }
.acc-est-line { font-size: 12px; color: var(--mut); }
.acc-est-total { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.acc-est-total b { color: var(--win); }
.acc-custom summary { font-size: 12px; color: var(--mut); cursor: pointer; }
.acc-build-foot { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
.acc-build-note { font-size: 11.5px; color: var(--mut); }

/* ---- approval queue modal ---- */
.acc-modal-root:empty { display: none; }
.acc-modal-bg { position: fixed; inset: 0; z-index: 80; background: rgba(4,4,10,.6); backdrop-filter: blur(3px); }
.acc-modal { position: fixed; z-index: 81; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(680px, calc(100vw - 28px)); max-height: 86vh; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 40px 100px -30px #000; overflow: hidden; }
.acc-modal-top { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.acc-modal-top h3 { font-family: var(--font-display, inherit); font-size: 18px; margin: 0; color: var(--ink); }
.acc-modal-sub { font-size: 12.5px; color: var(--mut); }
.acc-modal-x { margin-left: auto; font-size: 22px; line-height: 1; color: var(--mut); background: none; border: 0; cursor: pointer; padding: 0 4px; }
.acc-modal-x:hover { color: var(--ink); }
.acc-modal-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.acc-modal-list { padding: 14px 18px 18px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }

.acc-draft { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--bg2); }
.acc-draft-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.acc-draft-ag { font-size: 12px; font-weight: 700; color: var(--ink); }
.acc-draft-type { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--mut); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.acc-draft-val { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--win); }
.acc-draft-t { display: block; font-family: var(--font-display, inherit); font-size: 15px; color: var(--ink); margin-bottom: 8px; }
.acc-draft-body { font-size: 13px; color: var(--mut); line-height: 1.55; }
.acc-draft-body p { margin: 0 0 8px; }
.acc-draft-body blockquote { margin: 6px 0; padding: 9px 12px; border-left: 2px solid color-mix(in srgb, var(--neon) 55%, var(--line)); background: color-mix(in srgb, var(--card) 60%, transparent); border-radius: 0 8px 8px 0; color: var(--ink); }
.acc-draft-meta { font-size: 11.5px; color: var(--mut); }
.acc-draft-acts { display: flex; gap: 8px; margin-top: 12px; }
.acc-approve-go { font: inherit; font-size: 13px; font-weight: 700; color: #05050a; background: linear-gradient(120deg, var(--neon), var(--win)); border: 0; border-radius: 9px; padding: 8px 14px; cursor: pointer; }
.acc-approve-go:hover { box-shadow: 0 10px 26px -12px var(--glow-neon); }
.acc-dismiss { font: inherit; font-size: 13px; font-weight: 600; color: var(--mut); background: none; border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; cursor: pointer; }
.acc-dismiss:hover { color: var(--error, #ff5e7e); border-color: color-mix(in srgb, #ff5e7e 40%, var(--line)); }

@media (prefers-reduced-motion: reduce) { .acc-w, .acc-switch .acc-knob, .acc-toast { transition: none; } }