/* Styles for feature modules (server/modules/catalog.js). */
/* ./mod/crud.css */
/* crud styles (see the matching feature) */

/* A small select inside a sentence (delete pipeline: "move them to …"). */
.crud-inline { display: inline-block; width: auto; max-width: 220px; margin-left: 6px; vertical-align: middle; }

/* ROI reports: Print / Delete float over each report card's header. */
.crud-report { position: relative; }
.crud-report-actions { position: absolute; top: 10px; right: 12px; display: flex; gap: 4px; z-index: 1; }
.crud-report .card-h { padding-right: 120px; }
@media (max-width: 700px) {
  .crud-report-actions { position: static; justify-content: flex-end; margin-bottom: 6px; }
  .crud-report .card-h { padding-right: 18px; }
}

/* Companies list. */
.crud-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; background: var(--sunken); flex: none; display: inline-block; }
.crud-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 14px; }

/* Agency client list: filter row and paused accounts. */
.crud-bar { border-bottom: 1px solid var(--line-2); padding-top: 10px; padding-bottom: 10px; }
.crud-paused td { opacity: .72; }
.crud-paused td:last-child { opacity: 1; }

/* Social: posts where some networks were only simulated. */
.soc-post.partial { border-left-color: var(--warn); cursor: pointer; }
.soc-result { display: grid; gap: 6px; }
.soc-partial { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 8px 10px; font-weight: 500; }

/* Marketplace: pack parts and preview. */
.snap-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; }
.pack-details h3 { margin-bottom: 6px; }
.pack-auto { padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.pack-auto:last-child { border-bottom: 0; }

/* Quick "add a task" rows (dashboard card, contact profile). */
.task-add { gap: 6px; }
.task-add .input { min-width: 0; flex: 1; }
.task-add input[type="date"] { flex: 0 0 auto; width: auto; }
.dash-task { padding: 10px 16px 0; }

/* Profile page and form entries. */
.profile-card { max-width: 560px; }
.subs-t td { max-width: 280px; overflow-wrap: anywhere; vertical-align: top; }
@media (max-width: 560px) { .task-add { flex-wrap: wrap; } }

/* ./mod/print.css */
/* print styles (see the matching feature) */

/* Compact filter bar above lists (ui/print.js FilterBar). */
.filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filterbar .fb-search { width: 220px; }
.filterbar .fb-pick { width: auto; max-width: 200px; }
.filterbar .fb-dates { gap: 6px; }
.filterbar .fb-dates .input { width: auto; }
@media (max-width: 700px) { .filterbar .fb-search { width: 100%; } .filterbar .grow { display: none; } }

.print-only { display: none; }

/* Printable sheets shown inside the app (packing slip, end-of-day, gift card). */
.print-sheet { background: #fff; color: #18181b; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; }
.print-sheet h2 { margin: 0 0 4px; }
.print-sheet table { width: 100%; border-collapse: collapse; }
.print-sheet th, .print-sheet td { text-align: left; padding: 6px 4px; border-bottom: 1px solid #e4e4e7; }
.print-sheet .tnum { text-align: right; }

/* The pop-up from printElement() loads the app styles; keep it plain. */
body.print-pop { background: #fff; }
body.print-pop .btn, body.print-pop button, body.print-pop .no-print, body.print-pop .filterbar { display: none !important; }
body.print-pop .card { box-shadow: none; }
body.print-pop .print-only { display: revert; }

@media print {
  :root {
    --bg: #fff !important; --panel: #fff !important; --panel-2: #fff !important; --sunken: #f4f4f5 !important;
    --ink: #111 !important; --ink-2: #27272a !important; --mute: #52525b !important; --faint: #71717a !important;
    --line: #d4d4d8 !important; --line-2: #e4e4e7 !important;
    --good: #047857 !important; --good-bg: #ecfdf5 !important; --warn: #b45309 !important; --warn-bg: #fffbeb !important; --bad: #b91c1c !important; --bad-bg: #fef2f2 !important;
    --shadow-sm: none !important; --shadow: none !important; --shadow-lg: none !important;
    color-scheme: light !important;
  }
  html, body { background: #fff !important; color: #111 !important; }
  * { animation: none !important; transition: none !important; }

  /* App chrome */
  .appbar, .sidenav, .sheet, .sheet-scrim, .banner, .toast, .ai-fab, .ai-panel, .pagehead-waves,
  .pagehead-in > .row, .dash-badge, .filterbar, .dt-bar, .dt-foot, .seg, .no-print { display: none !important; }
  .app, .app-body, .app-main { display: block !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
  .app-main > .content, .content { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .pagehead { background: none !important; border: 0 !important; color: #111 !important; }
  .pagehead::after { display: none !important; }
  .pagehead-in { padding: 0 0 12px !important; max-width: none !important; }
  .pagehead h1, .pagehead .eyebrow { color: #111 !important; }

  /* Controls don't print; the data does. */
  /* (Not every <button>: some lists use buttons as cards.) */
  .btn, .iconbtn, button.chip, .tabs, .dropdown, input[type="search"], input[type="checkbox"], .switch, .pos-bar { display: none !important; }
  .print-only { display: revert !important; }

  /* Content */
  .card, .print-sheet { box-shadow: none !important; background: #fff !important; border-color: #d4d4d8 !important; }
  .grad-card { background: #fff !important; color: #111 !important; }
  .grad-card *, .grad-card .k, .grad-card .d, .grad-card .v { color: #111 !important; -webkit-text-fill-color: #111 !important; }
  .grad-card { border: 1px solid #d4d4d8 !important; }
  .grad-text { background: none !important; -webkit-text-fill-color: #111 !important; color: #111 !important; }
  .scroll-x, .dt-scroll { overflow: visible !important; }
  /* Paper is narrow enough to trip the phone layouts; keep tables as tables. */
  .fx-cards { display: none !important; }
  .fx-grid-wrap { display: block !important; }
  .content .hide-sm { display: revert !important; }
  table { width: 100% !important; }
  thead { display: table-header-group; }
  tr, .card, .stat, .print-sheet, li { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .pill { border: 1px solid #d4d4d8; background: none !important; color: #111 !important; }
  a { color: #111 !important; text-decoration: none !important; }
  /* Show where a link goes only where it's useful (marked print-url). */
  a.print-url[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #52525b; word-break: break-all; }

  /* With a dialog open, print just the dialog. */
  body:has(.overlay) .pagehead, body:has(.overlay) .content > :not(.overlay):not(:has(.overlay)) { display: none !important; }
  body:has(.overlay) .content * { visibility: hidden; }
  body:has(.overlay) .overlay, body:has(.overlay) .overlay * { visibility: visible; }
  .overlay { position: static !important; background: none !important; backdrop-filter: none !important; display: block !important; padding: 0 !important; }
  .modal { max-width: none !important; width: 100% !important; max-height: none !important; overflow: visible !important; border: 0 !important; box-shadow: none !important; }
  .modal-b { overflow: visible !important; max-height: none !important; }
  .modal-f { display: none !important; }

  @page { margin: 14mm; }
}

/* ./mod/selfserve.css */
/* selfserve styles: guided setup checklist, system health, feature picker, next steps (ui/pages/setup.js) */
.ss-card { overflow: hidden; }
.ss-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--line-2); }
.ss-head h2 { margin: 0; font-size: 17px; }
.ss-ring { position: relative; width: 52px; height: 52px; flex: none; display: grid; place-items: center; }
.ss-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ss-ring circle { fill: none; stroke-width: 5; }
.ss-ring-bg { stroke: var(--line); }
.ss-ring-fg { stroke: var(--brand, var(--good)); stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease, ease); }
.ss-ring span { position: relative; font-weight: 650; font-size: 12px; }

.ss-steps { list-style: none; margin: 0; padding: 6px 0; }
.ss-step { display: flex; align-items: center; gap: 12px; padding: 10px 20px; }
.ss-step + .ss-step { border-top: 1px solid var(--line-2); }
.ss-step.next { background: var(--brand-softer, var(--panel-2)); }
.ss-step.done b { color: var(--mute); font-weight: 550; }
.ss-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: grid; place-items: center; color: #fff; }
.ss-step.done .ss-check { background: var(--good); border-color: var(--good); }
.ss-step.next .ss-check { border-color: var(--brand, var(--good)); }

.ss-finished .ss-head { border-bottom: 0; background: linear-gradient(120deg, var(--good-bg), var(--brand-soft, var(--panel-2))); }
.ss-party { font-size: 34px; line-height: 1; animation: ss-pop .6s var(--ease, ease) both; }
.ss-confetti { position: relative; height: 0; }
.ss-confetti i { position: absolute; top: -46px; left: calc(30% + var(--i) * 7%); font-style: normal; opacity: 0; animation: ss-fall 1.6s ease-out calc(var(--i) * .12s) 1 both; pointer-events: none; }
@keyframes ss-pop { 0% { transform: scale(.4) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: none; } }
@keyframes ss-fall { 0% { transform: translateY(-20px) rotate(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(40px) rotate(160deg); opacity: 0; } }

.ss-health { display: grid; padding: 4px 0; }
.ss-hrow { display: flex; align-items: center; gap: 12px; padding: 11px 20px; }
.ss-hrow + .ss-hrow { border-top: 1px solid var(--line-2); }
.ss-hrow .pill { margin-left: 6px; vertical-align: 1px; }
.ss-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--line); }
.ss-dot.good { background: var(--good); }
.ss-dot.warn { background: var(--warn); }
.ss-dot.bad { background: var(--bad); }
.ss-dot.brand { background: var(--brand, var(--good)); }

.ss-mini { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm, 10px); color: var(--mute); }

.ss-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ss-feature { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); background: var(--panel); font-weight: 500; }

.ss-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ss-next li { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.ss-next li .grow { display: grid; gap: 2px; }
.ss-next b { display: inline-flex; align-items: center; gap: 6px; }
.ss-num { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 650; font-size: 13px; background: var(--brand-soft, var(--sunken)); color: var(--brand-ink, var(--ink)); }
.ss-next.compact { gap: 6px; }

@media (max-width: 700px) {
  .ss-head { padding: 14px 16px; }
  .ss-step, .ss-hrow { padding: 10px 16px; flex-wrap: wrap; }
  .ss-step > .row, .ss-hrow > .btn { margin-left: 34px; }
  .ss-features { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ss-party, .ss-confetti i { animation: none; } .ss-confetti i { display: none; } }
/* Phones: keep the checklist heading readable beside the Steps / System health switch */
.ss-head > .grow { flex: 1 1 180px; min-width: 0; }
@media (max-width: 520px) { .ss-head > .seg { order: 5; flex: 1 1 100%; } }

/* ./mod/polish.css */
/* polish styles (see the matching feature) */
/* Small effects (ui/polish.js does the JavaScript side). All of it switches off
   under prefers-reduced-motion. */

/* Buttons: press-in, a soft ripple from the press point, lift on hover */
:where(.btn, .side-link) { position: relative; overflow: hidden; }
.btn::after, .side-link::after {
  content: ""; position: absolute; left: var(--rx, 50%); top: var(--ry, 50%); width: 10px; height: 10px; border-radius: 50%;
  background: currentColor; opacity: 0; transform: translate(-50%, -50%) scale(0); pointer-events: none;
}
.btn.rippling::after, .side-link.rippling::after { animation: ripple .55s ease-out; }
@keyframes ripple { from { opacity: .22; transform: translate(-50%, -50%) scale(0); } to { opacity: 0; transform: translate(-50%, -50%) scale(28); } }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.primary { transition: background .15s, box-shadow .2s, transform .12s, filter .15s; }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--brand) 70%, transparent); filter: saturate(1.08); }
.btn.primary:active { transform: translateY(0) scale(.98); }
.iconbtn { transition: transform .15s, background .15s, color .15s, border-color .15s; }
.iconbtn:hover { transform: translateY(-1px); }
.iconbtn:active { transform: scale(.94); }

/* Cards you can click lift gently */
a.card, .card.clickable, .stat { transition: transform .2s var(--ease, ease), box-shadow .2s, border-color .2s; }
a.card:hover, .card.clickable:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -22px rgba(15, 23, 42, .45); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.stat:hover { transform: translateY(-1px); }

/* Inputs: a soft brand glow on focus */
.input, select.input, textarea.input { transition: border-color .15s, box-shadow .2s, background .15s; }
.input:focus, select.input:focus, textarea.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); outline: none; }

/* Switches: the knob squishes as you press */
.switch:active i::after { width: 20px; }
.switch input:checked + i::after { transition: transform .25s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)), width .15s; }
.switch:active input:checked + i::after { transform: translateX(12px); }

/* Checkboxes pop when ticked */
input[type="checkbox"]:checked { animation: tick .25s var(--ease-spring, ease); }
@keyframes tick { 40% { transform: scale(1.2); } }

/* Modals: fade the backdrop, spring the panel */
.modal { animation: modalIn .3s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }

/* Sidebar: the icon of the page you open pops in */
.side-link.on .side-ico { animation: icoPop .4s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
@keyframes icoPop { 0% { transform: scale(.7); } 60% { transform: scale(1.1); } }
.side-badge, .nav-badge { animation: badgeIn .5s var(--ease-spring, ease) both; }
@keyframes badgeIn { from { transform: scale(0); } }

/* Empty states breathe a little */
.empty .big { animation: floaty 4s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-4px); } }

/* Table rows highlight smoothly */
.t tbody tr, table tbody tr { transition: background-color .15s; }

/* Page titles settle in */
.pagehead h1 { animation: titleIn .45s var(--ease, ease) both; }
@keyframes titleIn { from { opacity: 0; transform: translateY(6px); letter-spacing: -.01em; } }

/* Confetti canvas for wins */
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 90; }

@media (prefers-reduced-motion: reduce) {
  .btn::after, .side-link::after { display: none; }
  .empty .big, .pagehead h1, .modal, .side-link.on .side-ico, .side-badge, .nav-badge, input[type="checkbox"]:checked { animation: none !important; }
  .btn.primary:hover, .iconbtn:hover, a.card:hover, .card.clickable:hover, .stat:hover { transform: none; }
}

/* ./mod/courses.css */
/* courses module styles */
.courses .nowrap { white-space: nowrap; }
.courses-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.courses-card { text-align: left; padding: 0; overflow: hidden; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; width: 100%; }
.courses-cover { --cc: var(--brand); position: relative; height: 112px; background: radial-gradient(circle at 85% 20%, color-mix(in srgb, #fff 22%, transparent), transparent 45%), linear-gradient(135deg, var(--cc), color-mix(in srgb, var(--cc) 55%, #0f172a)); display: flex; align-items: flex-end; justify-content: space-between; padding: 14px 16px; }
.courses-cover .pill { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, .92); color: #18181b; border: 0; }
.courses-cover .pill.good { color: #047857; }
.courses-emoji { font-size: 38px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.courses-cover.sm { height: 64px; width: 64px; border-radius: 16px; padding: 0; align-items: center; justify-content: center; flex: none; }
.courses-cover.sm .courses-emoji { font-size: 30px; }
.courses-card-b { padding: 14px 16px 16px; display: grid; gap: 8px; }
.courses-title { font-size: 15px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.courses-price { font-weight: 650; font-size: 13px; color: var(--brand-ink); white-space: nowrap; }
.courses-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.courses-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 0 2px; border-top: 1px solid var(--line-2); }
.courses-metrics > div { display: grid; }
.courses-metrics .k { font-size: 11.5px; color: var(--mute); font-weight: 550; }
.courses-metrics b { font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.courses-plan-price { font-size: 24px; font-weight: 650; letter-spacing: -.02em; }

.courses-emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.courses-emo { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.courses-emo.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.courses-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.courses-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.courses-sw.on { box-shadow: 0 0 0 2px var(--ink); }
.courses-sw-custom { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); overflow: hidden; }
.courses-sw-custom::-webkit-color-swatch-wrapper { padding: 0; opacity: 0; }

.courses-head { display: flex; gap: 16px; align-items: center; padding: 16px 18px; flex-wrap: wrap; }
.courses-h1 { font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.courses-note { display: flex; gap: 10px; align-items: center; background: var(--brand-softer); border-color: color-mix(in srgb, var(--brand) 20%, var(--line)); font-size: 13.5px; }
.courses-note.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }

.courses-module .card-h { gap: 8px; }
.courses-mnum { width: 26px; height: 26px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-weight: 650; font-size: 13px; flex: none; }
.courses-inline { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 5px 8px; font-weight: 600; font-size: 15px; }
.courses-inline:hover { border-color: var(--line); }
.courses-inline:focus { outline: none; border-color: var(--brand); background: var(--panel); box-shadow: 0 0 0 3px var(--brand-soft); }
.courses-lessons { list-style: none; margin: 0; padding: 6px 8px; }
.courses-lesson { display: flex; align-items: center; gap: 4px; border-radius: 10px; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.courses-lesson:hover { background: var(--panel-2); }
.courses-lesson.over { border-color: var(--brand); border-style: dashed; background: var(--brand-softer); }
.courses-lesson.courses-empty { padding: 10px 12px; }
.courses-grip { cursor: grab; color: var(--faint); font-size: 12px; letter-spacing: -2px; padding: 0 4px 0 6px; user-select: none; }
.courses-lesson-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 10px 8px; text-align: left; cursor: pointer; font: inherit; color: inherit; border-radius: 8px; }
.courses-lico { width: 26px; height: 26px; border-radius: 50%; background: var(--sunken); color: var(--mute); display: grid; place-items: center; font-size: 11px; flex: none; }
.courses-ltitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.courses-lmeta { display: flex; gap: 6px; align-items: center; flex: none; }
.courses-lmove .btn { padding: 4px 8px; }
.courses-addlesson { display: flex; align-items: center; gap: 8px; margin: 0 8px 10px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--mute); }
.courses-addlesson:focus-within { border-color: var(--brand); color: var(--ink); }
.courses-addlesson input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 2px 0; }
.courses-addmod .input { flex: 1; min-width: 0; }

.courses-drawer { display: flex; flex-direction: column; overflow: hidden; }
.courses-drawer-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.courses-drawer-b { flex: 1; overflow-y: auto; padding: 18px; display: grid; gap: 14px; align-content: start; }
.courses-drawer-f { display: flex; gap: 8px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line-2); background: var(--panel); flex-wrap: wrap; }
.courses-body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; resize: vertical; min-height: 220px; }

.courses-picklist { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.courses-picklist button { display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
.courses-picklist button:hover { background: var(--panel-2); }
.courses-picklist button.on { background: var(--brand-soft); color: var(--brand-ink); }

.courses-fs { border: 1px solid var(--line); margin: 0; min-width: 0; }
.courses-fs[disabled] { opacity: .85; }
.courses-link .input { flex: 1; min-width: 0; }

@media (max-width: 700px) {
  .courses-grid { grid-template-columns: minmax(0, 1fr); }
  .courses-head { align-items: flex-start; }
  .courses-head > .row:last-child { width: 100%; }
  .courses-head > .row:last-child .btn { flex: 1; }
  .courses-lmeta .small, .courses-grip { display: none; }
  .courses-lesson-main { padding: 10px 4px; }
  .courses-addmod { flex-wrap: wrap; }
  .courses-addmod .btn { width: 100%; }
}

/* ./mod/community.css */
/* community module styles */
.community .nowrap { white-space: nowrap; }
.community-head { display: flex; gap: 14px; align-items: center; padding: 16px 18px; flex-wrap: wrap; }
.community-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 50%, var(--brand-2, #0f172a))); flex: none; box-shadow: 0 10px 24px -14px var(--brand); }
.community-h1 { font-size: 20px; line-height: 1.25; }
.community-feed { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.community-side { position: sticky; top: 84px; }
.community-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.community-chips .chip { white-space: nowrap; font-size: 13px; }
.community-count { font-size: 11px; color: var(--mute); background: var(--sunken); border-radius: 99px; padding: 0 7px; }
.community-composer textarea { resize: vertical; }
.community-post { padding: 16px 18px; display: grid; gap: 8px; }
.community-post.pinned { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.community-post .hidden-post, .community-post.hidden-post, .community-comment.hidden-post { opacity: .6; }
.community-post-h { gap: 10px; align-items: center; }
.community-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-brand { background: var(--brand) !important; color: #fff !important; }
.community-lvl { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.community-lvl.lg { min-width: 30px; height: 30px; font-size: 13px; flex: none; }
.community-title { font-weight: 650; font-size: 15.5px; }
.community-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.community-actions { gap: 4px; }
.community-liked { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
:root[data-theme="dark"] .community-liked { background: #3b0a14; border-color: #7f1d2d; color: #fda4af; }
.community-comments { display: grid; gap: 10px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.community-comment { display: flex; gap: 8px; align-items: flex-start; }
.community-bubble { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 8px 12px; }
.community-bubble p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; margin-top: 2px; }
.community-bubble .btn.sm { padding: 2px 8px; font-size: 12px; }
.community-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.community-mini li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; padding: 4px 2px; }
.community-rank { width: 22px; text-align: center; font-weight: 650; color: var(--mute); flex: none; }
.community-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.community-banned td { background: var(--bad-bg); }
.community-lbar { margin-top: 5px; max-width: 120px; height: 4px; }
.community-badges { display: inline-flex; gap: 4px; font-size: 16px; }
.community-badge-key { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-2); }
.community-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.community-place { display: grid; justify-items: center; gap: 6px; padding: 20px 14px; text-align: center; }
.community-place.p1 { padding-top: 30px; padding-bottom: 28px; border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: linear-gradient(180deg, var(--brand-soft), var(--panel) 70%); }
.community-medal { font-size: 28px; line-height: 1; }
.community-pts { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.community-emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.community-emo { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.community-emo.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.community-emoji-in { width: 56px; flex: none; text-align: center; }
.community-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 18px; }
.community-min { width: 100px; flex: none; }
.community-picklist { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.community-picklist button { display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
.community-picklist button:hover { background: var(--panel-2); }
.community-picklist button.on { background: var(--brand-soft); color: var(--brand-ink); }

@media (max-width: 960px) {
  .community-feed { grid-template-columns: minmax(0, 1fr); }
  .community-side { position: static; order: -1; }
  .community-side > .card:last-child { display: none; }
}
@media (max-width: 700px) {
  .community-head > .row:last-child { width: 100%; }
  .community-podium { grid-template-columns: minmax(0, 1fr); }
  .community-podium .p1 { order: -1; }
  .community-post { padding: 14px; }
  .community-levels { grid-template-columns: minmax(0, 1fr); }
}

/* ./mod/webinars.css */
/* webinars module styles (prefix: wb-) */
.wb-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wb-card { display: flex; gap: 14px; padding: 16px; color: inherit; text-decoration: none !important; align-items: flex-start; }
.wb-date { flex: none; width: 56px; border-radius: 12px; overflow: hidden; text-align: center; border: 1px solid var(--line); background: var(--panel); }
.wb-date span { display: block; background: var(--brand); color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 3px 0; }
.wb-date b { display: block; font-size: 22px; line-height: 1.2; padding: 6px 0 7px; font-variant-numeric: tabular-nums; min-height: 38px; }
.wb-card-b { flex: 1; min-width: 0; display: grid; gap: 6px; }
.wb-title { font-size: 15.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wb-meter { display: grid; gap: 5px; margin-top: 4px; }
.wb-toolbar .seg { max-width: 100%; overflow-x: auto; }

/* Editor */
.wb-types { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-type { display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .15s, background .15s; }
.wb-type:hover { border-color: var(--faint); }
.wb-type.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--brand-softer); }
.wb-type-i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: 4px; }
.wb-big { font-size: 16px; font-weight: 550; }
.wb-every { gap: 8px; }

/* Detail */
.wb-head { display: flex; gap: 16px; padding: 20px; align-items: flex-start; flex-wrap: wrap; }
.wb-head-b { flex: 1 1 360px; min-width: 0; display: grid; gap: 8px; }
.wb-head-a { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wb-h1 { font-size: 22px; line-height: 1.25; }
.wb-link { margin-top: 4px; }
.wb-reg-h { flex-wrap: wrap; }
.wb-filters { border-bottom: 1px solid var(--line-2); padding-top: 12px; padding-bottom: 12px; }
.wb-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; font-size: 13px; }
.wb-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.wb-mails { display: flex; gap: 4px; }
.wb-mails span { font-size: 11px; font-weight: 600; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 6px; display: grid; place-items: center; background: var(--sunken); color: var(--faint); border: 1px solid var(--line); }
.wb-mails span.on { background: var(--good-bg); color: var(--good); border-color: transparent; }
.wb-spark { width: 100%; height: 90px; display: block; }
.wb-spark rect { fill: var(--brand); opacity: .85; }
.wb-spark rect:hover { opacity: 1; }

@media (max-width: 760px) {
  .wb-types { grid-template-columns: minmax(0, 1fr); }
  .wb-type { grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  .wb-type-i { grid-row: span 2; margin: 0; }
  .wb-head-a { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .wb-grid { grid-template-columns: minmax(0, 1fr); }
  .wb-hide-sm { display: none; }
  .wb-table td, .wb-table th { padding: 10px 12px; }
  .wb-ell { max-width: 150px; }
  .wb-head { padding: 16px; }
  .wb-h1 { font-size: 19px; }
}

/* ./mod/blog.css */
/* blog module styles (prefix: bl-) */
.bl-list-h { flex-wrap: wrap; }
.bl-list-h .seg { max-width: 100%; overflow-x: auto; }
.bl-rows { display: grid; }
.bl-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line-2); color: inherit; text-decoration: none !important; transition: background .15s; }
.bl-row:hover { background: var(--brand-softer); }
.bl-thumb { width: 64px; height: 48px; border-radius: 9px; object-fit: cover; display: block; background: var(--sunken); }
.bl-thumb.ph { display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 45%, var(--brand-2, #06b6d4))); }
.bl-row-b { min-width: 0; display: grid; gap: 3px; }
.bl-row-t { font-size: 14.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-row-m { text-align: right; white-space: nowrap; display: grid; gap: 2px; }
.bl-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bl-cat-row { gap: 6px; min-height: 34px; }
.bl-big { font-size: 16px; font-weight: 550; }
.bl-note { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 8px 12px; }

/* AI writer */
.bl-ai-out { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
.bl-ai-title { font-size: 18px; line-height: 1.3; margin-top: 2px; }
.bl-outline { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.bl-ai-draft { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; max-height: 52vh; overflow: auto; background: var(--panel-2); }

/* Editor */
.bl-ed { display: grid; gap: 14px; }
.bl-ed-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: sticky; top: 0; z-index: 3; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); padding: 8px 0; }
.bl-tabs { display: none; margin: 0; }
.bl-ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.bl-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
.bl-view-write .bl-main, .bl-view-preview .bl-main { grid-template-columns: minmax(0, 1fr); }
.bl-view-write .bl-preview, .bl-view-preview .bl-write { display: none; }
.bl-side { display: grid; gap: 16px; position: sticky; top: 56px; max-height: calc(100vh - 72px); overflow: auto; }
.bl-write { display: flex; flex-direction: column; min-height: 68vh; overflow: hidden; }
.bl-title-in { border: 0; outline: none; background: transparent; font: 650 22px/1.3 inherit; font-family: inherit; color: var(--ink); padding: 18px 18px 10px; width: 100%; }
.bl-title-in::placeholder { color: var(--faint); }
.bl-toolbar { display: flex; gap: 2px; flex-wrap: wrap; padding: 4px 10px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--panel-2); align-items: center; }
.bl-toolbar .btn.ghost { font-size: 12.5px; padding: 4px 8px; }
.bl-md { flex: 1; border: 0; outline: none; resize: none; padding: 16px 18px; font: 14.5px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); background: transparent; min-height: 52vh; }
.bl-md-foot { padding: 8px 18px; border-top: 1px solid var(--line-2); }
.bl-preview { padding: 0; overflow: hidden; }
.bl-prev-h { display: flex; gap: 6px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line-2); background: var(--panel-2); }
.bl-prose { padding: 20px 24px 28px; max-width: 72ch; }
.bl-prose h1 { font-size: 26px; line-height: 1.2; margin: 4px 0 10px; letter-spacing: -.02em; }
.bl-lead { font-size: 16px; color: var(--mute); margin: 0 0 16px; }
.bl-prev-cover { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; display: block; }
.bl-body-html { font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }
.bl-body-html.compact { font-size: 14px; }
.bl-body-html h2 { font-size: 20px; margin: 26px 0 8px; color: var(--ink); }
.bl-body-html h3 { font-size: 17px; margin: 20px 0 6px; color: var(--ink); }
.bl-body-html h4, .bl-body-html h5, .bl-body-html h6 { font-size: 15px; margin: 16px 0 6px; color: var(--ink); }
.bl-body-html p { margin: 0 0 14px; }
.bl-body-html ul, .bl-body-html ol { margin: 0 0 14px; padding-left: 22px; }
.bl-body-html li { margin: 4px 0; }
.bl-body-html img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 6px auto; }
.bl-body-html blockquote { margin: 0 0 14px; padding: 2px 0 2px 14px; border-left: 3px solid var(--brand); color: var(--mute); font-style: italic; }
.bl-body-html code { background: var(--sunken); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: .88em; }
.bl-body-html pre { background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 12px 14px; overflow-x: auto; }
.bl-body-html pre code { background: none; border: 0; padding: 0; color: inherit; }
.bl-body-html hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.bl-cover-thumb { width: 100%; max-height: 140px; object-fit: cover; border-radius: 10px; margin-top: 6px; border: 1px solid var(--line); }

/* SEO */
.bl-count { font-weight: 550; font-size: 11.5px; margin-left: 6px; color: var(--mute); font-variant-numeric: tabular-nums; }
.bl-count.good { color: var(--good); } .bl-count.warn { color: var(--warn); } .bl-count.bad { color: var(--bad); }
.bl-serp { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; font-family: Arial, sans-serif; color: #202124; }
.bl-serp-site { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; min-width: 0; }
.bl-serp-site > div { min-width: 0; }
.bl-serp-fav { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #5f6368; }
.bl-serp-host { font-size: 14px; color: #202124; line-height: 1.3; }
.bl-serp-path { font-size: 12px; color: #4d5156; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-serp-t { font-size: 18px; line-height: 1.3; color: #1a0dab; margin-bottom: 3px; overflow-wrap: anywhere; }
.bl-serp-d { font-size: 13.5px; line-height: 1.55; color: #4d5156; overflow-wrap: anywhere; }
.bl-score { position: relative; }
.bl-score summary { list-style: none; cursor: pointer; }
.bl-score summary::-webkit-details-marker { display: none; }
.bl-score ul { position: absolute; right: 0; top: 28px; z-index: 5; width: 250px; margin: 0; padding: 10px 12px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 12.5px; display: grid; gap: 5px; color: var(--mute); }
.bl-score li.ok { color: var(--good); }

@media (max-width: 1180px) {
  .bl-ed-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-side { position: static; max-height: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* Phones and small tablets: one pane at a time, chosen with the tabs. */
@media (max-width: 900px) {
  .bl-tabs { display: flex; }
  .bl-hide-md { display: none; }
  .bl-main, .bl-view-write .bl-main, .bl-view-preview .bl-main { grid-template-columns: minmax(0, 1fr); }
  .bl-side { grid-template-columns: minmax(0, 1fr); }
  .bl-ed .bl-pane { display: none !important; }
  .bl-ed[data-tab="write"] .bl-write, .bl-ed[data-tab="preview"] .bl-preview { display: flex !important; }
  .bl-ed[data-tab="preview"] .bl-preview { display: block !important; }
  .bl-ed[data-tab="seo"] .bl-seo, .bl-ed[data-tab="details"] .bl-details { display: block !important; }
  .bl-ed[data-tab="write"] .bl-side, .bl-ed[data-tab="preview"] .bl-side { display: none; }
  .bl-ed[data-tab="seo"] .bl-main, .bl-ed[data-tab="details"] .bl-main { display: none; }
  .bl-write { min-height: 60vh; }
  .bl-ai-out { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .bl-row { grid-template-columns: 48px minmax(0, 1fr); padding: 12px 14px; }
  .bl-thumb { width: 48px; height: 48px; }
  .bl-row-m { grid-column: 2; text-align: left; display: flex; gap: 10px; }
  .bl-hide-xs { display: none; }
  .bl-title-in { font-size: 19px; padding: 14px 14px 8px; }
  .bl-md { padding: 12px 14px; font-size: 14px; }
  .bl-prose { padding: 16px; }
  .bl-md-foot { display: none; }
}

/* ./mod/store.css */
/* store module styles */
.store-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, var(--brand-soft), transparent 70%), var(--panel); }
.store-hero-main { min-width: 0; }
.store-name { font-size: 20px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.store-link { display: flex; align-items: center; gap: 6px; color: var(--mute); font-size: 13px; min-width: 0; }
.store-link a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-note { display: flex; gap: 12px; align-items: flex-start; background: var(--warn-bg); border-color: transparent; color: var(--ink-2); }
.store-note .ico { color: var(--warn); flex: none; margin-top: 2px; }
.store-search { max-width: 240px; }
.store-orders td { white-space: nowrap; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.store-prod { overflow: hidden; display: flex; flex-direction: column; }
.store-img { aspect-ratio: 4 / 3; border: 0; width: 100%; background: var(--sunken) center / cover no-repeat; display: grid; place-items: center; font-size: 34px; font-weight: 650; color: var(--faint); cursor: pointer; font-family: inherit; }
.store-prod-b { padding: 12px 14px 14px; display: grid; gap: 4px; }
.store-prod-n { font-weight: 600; line-height: 1.35; }
.store-mini { width: 38px; height: 38px; border-radius: 8px; flex: none; background: var(--sunken) center / cover no-repeat; border: 1px solid var(--line); }
.store-line { padding: 5px 0; border-bottom: 1px solid var(--line-2); flex-wrap: nowrap; }
.store-line:last-child { border-bottom: 0; }
.store-total { font-weight: 650; font-size: 15px; }
.store-custnote { margin-top: 10px; padding: 8px 10px; background: var(--sunken); border-radius: 8px; font-style: italic; }
.store-history { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.store-picks { max-height: 280px; overflow: auto; gap: 8px; padding: 2px; }
.store-banner { height: 120px; border-radius: 12px; background: var(--sunken) center / cover no-repeat; border: 1px solid var(--line); }
.store-opt { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; display: grid; gap: 12px; }
@media (max-width: 700px) {
  .store-search { max-width: none; flex: 1 1 100%; }
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .store-prod-b .row.between { flex-wrap: wrap; }
  .store-detail { grid-template-columns: minmax(0, 1fr); }
}

/* ./mod/giftcards.css */
/* giftcards module styles */
.gc-hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.gc-hero-main { flex: 1; min-width: 220px; }
.gc-card-art { width: 180px; aspect-ratio: 1.6; border-radius: 14px; padding: 14px 16px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; flex: none;
  background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 45%, var(--brand-2, #f59e0b))); box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--brand) 70%, black); }
.gc-card-art .small { opacity: .9; }
.gc-art-amt { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.gc-card-art.big { width: 240px; }
.gc-card-art.big .gc-art-amt { font-size: 32px; }
.gc-art-code { font-size: 13px; letter-spacing: .08em; color: #fff; opacity: .95; }
.gc-note { display: flex; gap: 12px; align-items: flex-start; background: var(--warn-bg); border-color: transparent; }
.gc-note .ico { color: var(--warn); flex: none; margin-top: 2px; }
.gc-search { max-width: 220px; }
.gc-code { font-size: 13px; letter-spacing: .04em; }
.gc-bal { min-width: 150px; }
.gc-bar { height: 5px; border-radius: 99px; background: var(--sunken); overflow: hidden; margin-top: 4px; max-width: 160px; }
.gc-bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.gc-detail { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.gc-detail > .stack { flex: 1; min-width: 220px; }
.gc-action { margin-top: 14px; background: var(--panel-2); }
.gc-big { font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
.gc-code-in { font-size: 15px; letter-spacing: .08em; }
@media (max-width: 700px) {
  .gc-search { max-width: none; flex: 1 1 100%; }
  .gc-card-art, .gc-card-art.big { width: 100%; max-width: 300px; }
}

/* ./mod/paylinks.css */
/* paylinks module styles */
.pl-note { display: flex; gap: 12px; align-items: flex-start; background: var(--warn-bg); border-color: transparent; }
.pl-note .ico { color: var(--warn); flex: none; margin-top: 2px; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.pl-card { display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.pl-card.off { opacity: .7; }
.pl-title { font-weight: 650; font-size: 15px; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font-family: inherit; }
.pl-title:hover { color: var(--brand-ink); }
.pl-amount { font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.pl-url { background: var(--sunken); border: 1px solid var(--line-2); border-radius: 9px; padding: 6px 10px; min-width: 0; }
.pl-url code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-2); }
.pl-url.big code { font-size: 14px; white-space: normal; word-break: break-all; }
.pl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); background: var(--panel-2); }
.pl-stats > div { padding: 10px 8px; text-align: center; display: grid; }
.pl-stats > div + div { border-left: 1px solid var(--line-2); }
.pl-stats b { font-size: 14px; font-variant-numeric: tabular-nums; }
.pl-stats span { font-size: 11.5px; color: var(--mute); }
.pl-more summary { cursor: pointer; font-weight: 550; font-size: 13px; color: var(--ink-2); }
.pl-share { background: var(--brand-softer); }
@media (max-width: 700px) { .pl-grid { grid-template-columns: minmax(0, 1fr); } }

/* ./mod/forms.css */
/* forms & QR codes module styles (pages/forms.js, pages/qr.js) */
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.fm-card { display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; text-align: left; font-family: inherit; color: inherit; cursor: pointer; padding: 0; }
.fm-card:hover { border-color: var(--brand); }
.fm-card.off { opacity: .72; }
.fm-title { font-weight: 650; font-size: 16px; line-height: 1.35; }
.fm-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand-ink); background: var(--brand-softer); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.fm-flip { transform: rotate(90deg); }
.fm-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.fm-tpl { display: grid; gap: 4px; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 14px; cursor: pointer; font-family: inherit; color: var(--ink); }
.fm-tpl:hover { border-color: var(--brand); background: var(--brand-softer); }
.fm-tpl .ico { color: var(--brand-ink); }
.fm-tpl span { font-size: 12.5px; color: var(--mute); }
.fm-field.sec { background: var(--panel-2); }
.fm-type { max-width: 220px; }
.fm-opt .input { flex: 1; min-width: 0; }
.fm-opt .input[type=number] { flex: 0 0 84px; }
.fm-opts-row { gap: 14px; flex-wrap: wrap; }
.fm-if { flex-wrap: wrap; gap: 6px; }
.fm-if select { max-width: 200px; }
.fm-break { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px dashed var(--line); border-radius: 12px; padding: 6px 10px 6px 14px; color: var(--mute); font-size: 13px; font-weight: 550; }
.fm-break > span { display: inline-flex; align-items: center; gap: 6px; }
.fm-h3 { margin: 0 0 4px; font-size: 15px; }
.fm-span { grid-column: 1 / -1; }
.fm-outcome { display: grid; gap: 6px; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px; background: var(--panel-2); }
.fm-code { margin: 0; background: var(--sunken); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; white-space: pre-wrap; word-break: break-all; max-height: 160px; overflow: auto; }
.fm-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 8px 14px; margin: 0 0 12px; }
.fm-dl dt { color: var(--mute); font-size: 13px; }
.fm-dl dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
.fm-result { background: var(--brand-softer); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.fm-result b { font-size: 20px; }
.fm-qlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fm-bars { display: grid; gap: 6px; }
.fm-bar-row { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.fm-bar-row .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-bar-row .b { height: 10px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.fm-bar-row .b i { display: block; height: 100%; border-radius: 99px; background: var(--brand); min-width: 2px; }
.fm-bar-row .n { font-variant-numeric: tabular-nums; color: var(--mute); font-size: 12px; white-space: nowrap; }
.fm-nps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.fm-nps > div { display: grid; text-align: center; padding: 8px 4px; }
.fm-nps > div + div { border-left: 1px solid var(--line-2); }
.fm-nps b { font-size: 18px; font-variant-numeric: tabular-nums; }
.fm-nps span { font-size: 11.5px; color: var(--mute); }
.fm-samples { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-2); }
.fm-res, .fm-top > .card { align-content: start; }
.fm-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* QR codes */
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.qr-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; overflow: hidden; }
.qr-thumb { border: 0; background: #fff; padding: 10px; cursor: pointer; height: 100%; display: grid; place-items: center; border-right: 1px solid var(--line-2); }
.qr-thumb img { width: 92px; height: 92px; display: block; }
.qr-build { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
.qr-preview { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: center; text-align: center; min-width: 0; }
.qr-preview > .fm-ellipsis { max-width: 100%; }
.qr-img { width: 240px; max-width: 100%; aspect-ratio: 1; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 8px; display: grid; place-items: center; }
.qr-empty { padding: 24px; background: var(--panel-2); }
.qr-img svg, .qr-img img { width: 100%; height: 100%; display: block; }
@media (max-width: 700px) {
  .fm-grid, .qr-grid { grid-template-columns: minmax(0, 1fr); }
  .qr-build { grid-template-columns: minmax(0, 1fr); }
  .qr-preview { position: static; }
  .fm-dl { grid-template-columns: minmax(0, 1fr); }
}

/* ./mod/affiliates.css */
/* affiliates module styles */
.af-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, var(--brand-soft), transparent 70%), var(--panel); }
.af-url { background: var(--sunken); border: 1px solid var(--line-2); border-radius: 9px; padding: 6px 10px; min-width: 0; }
.af-url code { display: block; font-size: 12.5px; word-break: break-all; color: var(--ink-2); }
.af-offer { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.af-num { max-width: 110px; }
.af-checks { gap: 10px 16px; }
.af-mini .stat { padding: 14px; }
.af-mini .stat .v { font-size: 22px; }
@media (max-width: 700px) { .af-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ./mod/listings.css */
/* listings module styles */
.lst .tabs { margin-bottom: 0; }
.lst-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 650; }

/* Score header */
.lst-score { display: flex; align-items: center; gap: 20px; }
.lst-ring { display: grid; justify-items: center; gap: 4px; flex: none; }
.lst-ring .ring { width: 92px; height: 92px; }
.lst-ring .ring::before { width: 74px; height: 74px; font-size: 26px; letter-spacing: -.02em; }

/* Directory cards */
.lst-dir { overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.lst-dir.open { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); box-shadow: var(--shadow); }
.lst-dir-h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lst-dir-h:hover { background: var(--brand-softer); }
.lst-dir-t { display: grid; min-width: 0; flex: 1; }
.lst-dir-t b, .lst-dir-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lst-chev { color: var(--faint); transition: transform .2s var(--ease); flex: none; }
.lst-dir.open .lst-chev { transform: rotate(180deg); }
.lst-dir-b { padding: 4px 16px 16px; border-top: 1px solid var(--line-2); padding-top: 14px; animation: fade .18s ease; }
.lst-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: -.02em; flex: none; box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); }
.lst-mark.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }

/* Mismatch diff */
.lst-diff { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 13.5px; }
.lst-diff-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line-2); align-items: start; }
.lst-diff-row:last-child { border-bottom: 0; }
.lst-diff-row.head { background: var(--panel-2); font-size: 12px; color: var(--mute); font-weight: 550; padding-top: 7px; padding-bottom: 7px; }
.lst-diff-row > span { min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.lst-diff-k { font-weight: 550; color: var(--good); }
.lst-diff-row.bad { background: color-mix(in srgb, var(--warn-bg) 55%, transparent); }
.lst-diff-row.bad .lst-diff-k { color: var(--bad); }
.lst-diff-row.bad .lst-want { color: var(--good); font-weight: 550; }
.lst-diff-row.bad .lst-have { color: var(--bad); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.lst-ok { display: flex; align-items: center; gap: 6px; color: var(--good); font-weight: 550; }
.lst-cta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); border: 1px dashed color-mix(in srgb, var(--brand) 40%, transparent); }
.lst-drift { display: flex; align-items: center; gap: 12px; background: var(--warn-bg); border-color: transparent; }
.lst-drift .grow, .lst-cta .grow { flex: 1; min-width: 0; }

/* Copy-ready fields */
.lst-copy { display: grid; }
.lst-copy-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--line-2); }
.lst-copy-row:last-child { border-bottom: 0; }
.lst-copy-row .grow { flex: 1; min-width: 0; }
.lst-copy-v { white-space: pre-line; overflow-wrap: anywhere; font-size: 13.5px; }

/* Profile editor */
.lst-fs { border: 1px solid var(--line); margin: 0; min-width: 0; }
.lst-fs[disabled] { opacity: .85; }
.lst-hours { display: grid; gap: 8px; }
.lst-hours-row { display: grid; grid-template-columns: 40px 76px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 40px; }
.lst-day { font-weight: 600; }
.lst-times .input { padding: 7px 8px; min-width: 0; }

/* Tasks */
.lst-task { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); }
.lst-task:last-child { border-bottom: 0; }
.lst-task .grow { flex: 1; min-width: 0; }
.lst-task.done b { text-decoration: line-through; color: var(--mute); font-weight: 500; }
.lst-task .small.muted:last-child { white-space: nowrap; }

@media (max-width: 700px) {
  .lst-score { flex-wrap: wrap; gap: 14px; }
  .lst-score > .btn { width: 100%; }
  .lst-ring .ring { width: 76px; height: 76px; }
  .lst-ring .ring::before { width: 60px; height: 60px; font-size: 21px; }
  .lst-diff-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; }
  .lst-diff-row > .lst-diff-k { grid-column: 1 / -1; }
  .lst-diff-row.head > span:first-child { display: none; }
  .lst-dir-h { padding: 12px; gap: 10px; }
  .lst-dir-b { padding-left: 12px; padding-right: 12px; }
  .lst-dir-b .row .btn { flex: 1 1 auto; }
  .lst-cta, .lst-drift { flex-wrap: wrap; }
  .lst-hours-row { grid-template-columns: 34px 70px minmax(0, 1fr); gap: 6px; }
  .lst-task { padding: 12px; gap: 10px; }
  .lst-task .small.muted:last-child { display: none; }
}

/* ./mod/dialer.css */
/* dialer module styles: dial pad and power dialer (dl-*), phone menu editor (ivr-*). */
.dl .dl-line { font-size: 24px; }
.dl .avatar.sm { width: 32px; height: 32px; font-size: 13px; }
.dl .avatar.lg { width: 52px; height: 52px; font-size: 20px; }
.dl-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } }

/* Dial pad */
.dl-padcard { overflow: visible; }
.dl-search { position: relative; }
.dl-search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.dl-search .input { padding-left: 36px; }
.dl-results { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px; max-height: 240px; overflow: auto; background: var(--panel); box-shadow: var(--shadow); }
.dl-result { display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left; padding: 8px; border-radius: 8px; cursor: pointer; }
.dl-result:hover, .dl-result:focus-visible { background: var(--brand-soft); }
.dl-result .grow { display: grid; min-width: 0; }
.dl-result .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-display { position: relative; text-align: center; padding: 10px 44px 4px; min-height: 72px; }
.dl-display-main { font-size: 28px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.3; }
.dl-back { position: absolute; right: 0; top: 14px; font-size: 18px; }
.dl-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; justify-items: center; max-width: 300px; margin: 0 auto; width: 100%; }
.dl-key { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); display: grid; place-content: center; gap: 0; cursor: pointer; transition: background .12s, transform .08s, border-color .12s; -webkit-tap-highlight-color: transparent; }
.dl-key span { font-size: 26px; font-weight: 500; line-height: 1.05; color: var(--ink); }
.dl-key small { font-size: 9px; font-weight: 600; letter-spacing: .14em; color: var(--faint); min-height: 11px; }
.dl-key:hover { background: var(--sunken); border-color: var(--faint); }
.dl-key:active { transform: scale(.94); background: var(--brand-soft); }
.dl-call { justify-self: center; width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: #16a34a; box-shadow: 0 10px 24px -10px rgba(22, 163, 74, .7); transition: transform .1s, filter .15s, opacity .15s; }
.dl-call:hover { filter: brightness(1.07); }
.dl-call:active { transform: scale(.95); }
.dl-call[disabled] { opacity: .45; cursor: default; box-shadow: none; }
@media (max-width: 400px) { .dl-key, .dl-call { width: 64px; height: 64px; } .dl-keypad { gap: 10px; } }

/* Live call + outcomes */
.dl-live { border-color: color-mix(in srgb, #16a34a 35%, var(--line)); }
.dl-pulse { width: 10px; height: 10px; border-radius: 50%; background: #16a34a; flex: none; animation: dl-pulse 1.4s ease-out infinite; }
.dl-pulse.sm { width: 7px; height: 7px; margin-right: 4px; display: inline-block; }
@keyframes dl-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); } 100% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .dl-pulse { animation: none; } }
.dl-outcomes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dl-outcome { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink-2); transition: background .12s, border-color .12s, transform .08s; }
.dl-outcome:hover { border-color: var(--faint); background: var(--panel-2); }
.dl-outcome:active { transform: translateY(1px); }
.dl-outcome.good { color: var(--good); } .dl-outcome.good:hover { background: var(--good-bg); border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.dl-outcome.brand { color: var(--brand-ink); } .dl-outcome.brand:hover { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.dl-outcome.warn { color: var(--warn); } .dl-outcome.warn:hover { background: var(--warn-bg); }
.dl-outcome.bad { color: var(--bad); } .dl-outcome.bad:hover { background: var(--bad-bg); }
.dl-outcome[disabled] { opacity: .5; cursor: default; }
@media (max-width: 560px) { .dl-outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.dl-recent { display: grid; }
.dl-recent-row { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border: 0; border-bottom: 1px solid var(--line-2); background: none; text-align: left; color: inherit; cursor: pointer; width: 100%; }
.dl-recent-row:last-child { border-bottom: 0; }
.dl-recent-row:hover { background: var(--brand-softer); text-decoration: none; }
.dl-recent-row .grow { display: grid; min-width: 0; }
.dl-recent-row .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-when { white-space: nowrap; }
.dl-mini { width: 60px; height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; flex: none; }
.dl-mini i, .dl-bar i { display: block; height: 100%; background: var(--brand); border-radius: inherit; transition: width .3s var(--ease); }

/* Power dialer session */
.dl-bar { height: 8px; border-radius: 999px; background: var(--sunken); overflow: hidden; margin-top: 8px; max-width: 520px; }
.dl-session { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 960px) { .dl-session { grid-template-columns: minmax(0, 1fr); } }
.dl-contact h2 { font-size: 18px; }
.dl-facts { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--sunken); }
.dl-facts > div { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.dl-facts .ico { color: var(--faint); }
.dl-callbtn { background: #16a34a; }
.dl-script-text { white-space: pre-wrap; line-height: 1.7; font-size: 14px; color: var(--ink-2); }
.dl-queue { display: grid; max-height: 340px; overflow: auto; }
.dl-q { display: flex; align-items: center; gap: 10px; padding: 9px 18px; border: 0; border-bottom: 1px solid var(--line-2); background: none; text-align: left; cursor: pointer; color: inherit; }
.dl-q:hover { background: var(--panel-2); }
.dl-q.on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.dl-q-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--sunken); color: var(--mute); flex: none; }
.dl-q.on .dl-q-n { background: var(--brand); color: #fff; }

/* Phone menu editor */
.ivr-top-b { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
.dl-ivr { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .dl-ivr { grid-template-columns: minmax(0, 1fr); } }
.ivr-tree { gap: 18px; }
.ivr-root { display: grid; gap: 10px; }
.ivr-root-h { display: flex; align-items: center; gap: 10px; }
.ivr-tag { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--sunken); color: var(--mute); }
.ivr-tag.open { background: var(--good-bg); color: var(--good); }
.ivr-tag.closed { background: var(--warn-bg); color: var(--warn); }
.ivr-menu { display: grid; gap: 0; }
.ivr-card { padding: 14px; display: grid; gap: 12px; border-left: 3px solid var(--brand); }
.ivr-card-h { display: flex; align-items: center; gap: 8px; }
.ivr-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); flex: none; }
.ivr-name { font-weight: 600; border-color: transparent; background: transparent; padding-left: 6px; }
.ivr-name:hover { border-color: var(--line); }
.ivr-greet { display: grid; gap: 4px; }
.ivr-keys { display: grid; gap: 8px; }
.ivr-key { display: grid; grid-template-columns: 34px minmax(0, 190px) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ivr-digit { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: var(--ink); color: var(--panel); flex: none; }
.ivr-digit.sm { width: 24px; height: 24px; font-size: 12px; }
.ivr-note { display: flex; align-items: center; gap: 6px; }
.ivr-key-tools .btn { padding: 4px 7px; }
.ivr-addkey { justify-self: start; border: 1px dashed var(--line); }
.ivr-fallback { padding-top: 2px; }
.ivr-children { display: grid; gap: 12px; margin-left: 17px; padding: 12px 0 0 22px; border-left: 2px solid var(--line); }
.ivr-child { position: relative; }
.ivr-edge { position: absolute; left: -35px; top: 12px; display: flex; align-items: center; }
.ivr-edge::after { content: ''; width: 10px; height: 2px; background: var(--line); }
.ivr-edge .ivr-digit { background: var(--brand); color: #fff; }
.ivr-loop { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.ivr-hours { display: grid; gap: 6px; }
.ivr-hour { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.ivr-hour .input { padding: 6px 8px; }
.ivr-hook { display: block; padding: 8px 10px; border-radius: 8px; background: var(--sunken); overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .ivr-key { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .ivr-key > :nth-child(3) { grid-column: 2 / span 2; }
  .ivr-key-tools { grid-row: 1; grid-column: 3; }
  .ivr-children { margin-left: 8px; padding-left: 16px; }
  .ivr-edge { left: -28px; }
}

/* ./mod/attribution.css */
/* attribution module styles */
.attr .attr-tabs { margin-bottom: 0; }
.attr-controls { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.attr-model { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.attr-dates .input { width: auto; min-width: 0; padding: 7px 10px; }
.attr-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.attr-kpis .stat .v { font-size: 26px; }
.attr-dim { opacity: .6; transition: opacity .2s; pointer-events: none; }

/* Revenue by source */
.attr-chart .row.between { display: none; }
.attr-chart .chart { height: 200px; }
.attr-xlabels { display: flex; padding-left: 3.45%; margin-top: 6px; }
.attr-xlabels span { flex: 1 1 0; min-width: 0; text-align: center; display: grid; line-height: 1.25; padding: 0 2px; }
.attr-xlabels b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.attr-xlabels small { font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Performance table */
.attr-table-h { flex-wrap: wrap; }
.attr .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.attr-table th.num .attr-sort { justify-content: flex-end; width: 100%; }
.attr-sort { display: inline-flex; align-items: center; gap: 2px; background: none; border: 0; padding: 0; font: inherit; font-weight: 550; color: var(--mute); cursor: pointer; white-space: nowrap; }
.attr-sort:hover, .attr-sort.on { color: var(--ink); }
.attr-name { font-weight: 550; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attr-table td { padding-top: 10px; padding-bottom: 10px; }
.attr-foot { border-top: 1px solid var(--line-2); padding-top: 12px; padding-bottom: 12px; }

/* Drill-down and people lists */
.attr-drill-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.attr-drill-sum > div { display: grid; gap: 2px; padding: 10px 12px; background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; }
.attr-drill-sum b { font-size: 17px; font-variant-numeric: tabular-nums; }
.attr-people { display: grid; }
.attr-person { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; background: none; border: 0; border-bottom: 1px solid var(--line-2); text-align: left; cursor: pointer; font: inherit; color: inherit; transition: background .15s; }
.attr-person:last-child { border-bottom: 0; }
.attr-person:hover { background: var(--brand-softer); }
.attr-person.on { background: var(--brand-soft); }
.attr-person .grow { display: grid; min-width: 0; flex: 1; }
.attr-person .grow b, .attr-person .grow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attr-chev { transform: rotate(-90deg); color: var(--faint); flex: none; }
.modal .attr-people { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; max-height: 55vh; overflow-y: auto; }

/* Journeys */
.attr-journeys { align-items: stretch; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); }
.attr-jlist { overflow: hidden; display: flex; flex-direction: column; max-height: 720px; }
.attr-jlist .attr-people { overflow-y: auto; }
.attr-search { border: 0; box-shadow: none !important; padding: 4px 0; background: transparent; }
.attr-back { display: none; justify-self: start; margin-bottom: 4px; }
.attr-credit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.attr-credit-card { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.attr-src { font-weight: 600; text-transform: capitalize; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attr-src small { text-transform: none; font-weight: 400; }
.attr-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; }
.attr-timeline li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 16px; }
.attr-timeline li::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.attr-timeline li:last-child::before { display: none; }
.attr-timeline .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); position: relative; }
.attr-timeline li.event .dot { background: var(--sunken); color: var(--ink-2); border: 1px solid var(--line); }
.attr-timeline li.event.won .dot, .attr-timeline li.event.paid .dot { background: var(--good-bg); color: var(--good); border-color: transparent; }
.attr-timeline li > div { display: grid; gap: 3px; padding-top: 4px; min-width: 0; }
.attr-timeline .row { gap: 6px; }
.attr-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11.5px; }

/* Tracking and history lists */
.attr-recent { display: grid; }
.attr-recent-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line-2); }
.attr-recent-row:last-child { border-bottom: 0; }
.attr-recent-row .grow { flex: 1; min-width: 0; }
.attr .codebox code { font-size: 12px; }

@media (max-width: 960px) {
  .attr-journeys { grid-template-columns: minmax(0, 1fr); }
  .attr-jlist.has-sel { display: none; }
  .attr-jlist:not(.has-sel) + .attr-jdetail { display: none; }
  .attr-back { display: inline-flex; }
  .attr-jlist { max-height: none; }
}
@media (max-width: 700px) {
  .attr-model { margin-left: 0; width: 100%; justify-content: space-between; }
  .attr-controls .seg { max-width: 100%; overflow-x: auto; }
  .attr-controls .seg button { padding: 5px 9px; }
  .attr-dates { width: 100%; }
  .attr-dates .input { flex: 1; }
  .attr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .attr-kpis .stat { padding: 14px; }
  .attr-kpis .stat .v { font-size: 21px; }
  .attr-kpis .stat .d { font-size: 11px; }
  .attr-drill-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attr-credit { grid-template-columns: minmax(0, 1fr); }
  .attr-xlabels b { font-size: 10.5px; }
  .attr-xlabels small { display: none; }
  .attr-table th, .attr-table td { padding-left: 12px; padding-right: 12px; }
  .attr-name { max-width: 150px; }
  .attr-table-h .seg { width: 100%; }
  .attr-table-h .seg button { flex: 1; }
}

/* ./mod/webhooks.css */
/* webhooks module styles: Webhooks & API page (wh-*), plus the workflow
   builder's flow (wf-*), which the Webhooks & API owner also maintains. */

/* ── Webhooks & API ───────────────────────────────────────────────────── */
.wh .wh-of { font-size: 15px; opacity: .7; font-weight: 500; }
.wh-list { display: grid; gap: 14px; }
.wh-sub { padding: 16px 18px; display: grid; gap: 12px; transition: border-color .15s, box-shadow .15s; }
.wh-sub:hover { border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); box-shadow: var(--shadow); }
.wh-sub.off { background: var(--panel-2); }
.wh-sub.off .wh-url { color: var(--mute); }
.wh-sub-h { display: flex; align-items: flex-start; gap: 12px; }
.wh-sub-t { min-width: 0; }
.wh-url { font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.wh-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--good); box-shadow: 0 0 0 4px var(--good-bg); }
.wh-dot.warn { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); }
.wh-dot.off { background: var(--faint); box-shadow: 0 0 0 4px var(--sunken); }
.wh-alert { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--bad-bg); color: var(--bad); font-size: 13px; }
.wh-events { display: flex; flex-wrap: wrap; gap: 6px; }
.wh-secret { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--sunken); }
.wh-secret code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.wh-sub-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line-2); padding-top: 12px; }
.wh-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.wh-stats b { color: var(--ink); font-weight: 600; }
.wh-stats b.good-t { color: var(--good); }
.wh-stats b.bad-t { color: var(--bad); }
.wh-evgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; max-height: 360px; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.wh-evgroup { display: grid; gap: 6px; align-content: start; }
.wh-evgroup code { font-size: 11px; }
.wh-cell-url { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-meta { display: grid; gap: 6px; padding: 12px; border-radius: var(--radius-sm); background: var(--sunken); }
.wh-meta > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
.wh-meta code { overflow-wrap: anywhere; }
.wh-code { margin: 0; padding: 14px 16px; border-radius: var(--radius-sm); background: #0f172a; color: #e2e8f0; font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; overflow: auto; max-height: 420px; white-space: pre; tab-size: 2; }
.wh-headers { display: grid; gap: 6px; }
.wh-headers > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.wh-headers span { color: var(--mute); }
.wh-method { display: inline-block; min-width: 50px; text-align: center; font: 700 11px/1.9 ui-monospace, monospace; border-radius: 6px; padding: 0 6px; background: var(--sunken); color: var(--ink-2); }
.wh-method.get { background: var(--good-bg); color: var(--good); }
.wh-method.post { background: var(--brand-soft); color: var(--brand-ink); }
.wh-base { display: block; padding: 8px 10px; border-radius: 8px; background: var(--sunken); overflow-wrap: anywhere; }
.wh-show-sm { display: none; }
@media (max-width: 860px) {
  .wh-show-sm { display: block; }
  .wh-headers > div, .wh-meta > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 480px) {
  .wh-sub { padding: 14px; }
  .wh-sub-f .row { width: 100%; }
  .wh-evgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Workflow builder (ui/pages/automations.js) ───────────────────────── */
.wf-flow { max-width: 760px; }
.wf-node { position: relative; }
.wf-node .node-h { min-width: 0; }
.wf-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--sunken); font-size: 15px; }
.node.trigger .wf-ico { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.wf-type { font-weight: 600; min-width: 0; }
.wf-tools { display: flex; gap: 0; flex: none; }
.wf-tools .btn { padding: 4px 7px; }
.wf-node.cat-messages { border-left: 3px solid #0ea5e9; }
.wf-node.cat-timing { border-left: 3px solid #f59e0b; }
.wf-node.cat-logic { border-left: 3px solid #8b5cf6; }
.wf-node.cat-contact { border-left: 3px solid #10b981; }
.wf-node.cat-sales { border-left: 3px solid #f97316; }
.wf-node.cat-team { border-left: 3px solid #ec4899; }
.wf-node.cat-integrations { border-left: 3px solid #64748b; }
.wf-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.wf-list { display: grid; justify-items: stretch; }
.wf-list > .wf-add:not(.compact) { justify-self: center; }
.wf-link { position: relative; height: 30px; display: grid; place-items: center; }
.wf-link::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--line); }
.wf-plus { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--mute); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s, border-color .15s, color .15s, transform .15s; }
.wf-link:hover .wf-plus, .wf-plus:focus-visible, .wf-plus[aria-expanded="true"] { opacity: 1; }
.wf-plus:hover { border-color: var(--brand); color: var(--brand-ink); transform: scale(1.08); }
@media (hover: none) { .wf-plus { opacity: .8; } }
.wf-addbtn { border-style: dashed; background: var(--panel-2); }
.wf-add { position: relative; display: inline-flex; justify-content: center; }
.wf-menu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 30; width: min(560px, calc(100vw - 32px)); max-height: min(440px, 70vh); overflow: auto; padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: wf-pop .14s var(--ease); }
@keyframes wf-pop { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } }
.wf-menu-group { display: grid; gap: 1px; align-content: start; }
.wf-menu-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding: 8px 8px 4px; }
.wf-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.wf-menu-item span { width: 20px; text-align: center; }
.wf-menu-item:hover, .wf-menu-item:focus-visible { background: var(--brand-soft); color: var(--brand-ink); }
.wf-more { border-top: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line)); padding-top: 8px; }
.wf-more summary { display: flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 550; font-size: 13px; color: var(--ink-2); list-style: none; }
.wf-more summary::-webkit-details-marker { display: none; }
.wf-more[open] summary { margin-bottom: 8px; }
.wf-conds { display: grid; gap: 8px; }
.wf-cond { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; position: relative; }
.wf-join { position: absolute; left: -2px; top: -13px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); background: var(--panel); padding: 0 4px; }
.node.trigger .wf-join { background: transparent; }
.wf-addcond { justify-self: start; color: var(--brand-ink); }
.wf-branch { display: grid; }
.wf-if { border-color: color-mix(in srgb, #8b5cf6 40%, var(--line)); background: color-mix(in srgb, #8b5cf6 5%, var(--panel)); }
.wf-split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding-top: 26px; }
.wf-split::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 12px; margin-left: -1px; background: var(--line); }
.wf-split::after { content: ''; position: absolute; top: 12px; left: 25%; right: 25%; height: 2px; background: var(--line); border-radius: 2px; }
.wf-lane { position: relative; display: grid; align-content: start; padding: 10px 10px 12px; border-radius: var(--radius); border: 1px dashed var(--line); background: var(--panel-2); min-width: 0; }
.wf-lane::before { content: ''; position: absolute; top: -14px; left: 50%; width: 2px; height: 14px; margin-left: -1px; background: var(--line); }
.wf-lane.yes { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); background: color-mix(in srgb, var(--good) 4%, var(--panel-2)); }
.wf-lane.no { border-color: color-mix(in srgb, var(--bad) 28%, var(--line)); background: color-mix(in srgb, var(--bad) 3%, var(--panel-2)); }
.wf-lane-h { display: flex; justify-content: center; margin-top: -22px; margin-bottom: 2px; }
.wf-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 12px; border-radius: 999px; }
.wf-badge.yes { background: var(--good-bg); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); }
.wf-badge.no { background: var(--bad-bg); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent); }
.wf-lane > .wf-list > .wf-link:first-child { height: 18px; }
.wf-empty { text-align: center; padding: 8px 6px 0; }
.wf-merge { height: 14px; margin: 0 25%; border: 2px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; position: relative; }
.wf-merge::after { content: ''; position: absolute; left: 50%; bottom: -16px; width: 2px; height: 14px; margin-left: -1px; background: var(--line); }
.wf-end { display: flex; justify-content: center; margin-top: 6px; }
.wf-end span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; background: var(--panel); }
@media (max-width: 760px) {
  .wf-split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .wf-split::after { display: none; }
  .wf-merge { margin: 0 45%; }
  .wf-cond { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .wf-cond > input, .wf-cond > span:not(.wf-join) { grid-column: 1 / span 2; grid-row: 2; }
  .wf-menu { grid-template-columns: minmax(0, 1fr); }
  .wf-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .wf-lane { padding: 8px 6px 10px; }
  .wf-node { padding: 10px; }
  .wf-tools .btn { padding: 4px 5px; }
}
/* Branch labels sit above the connector lines, on a solid backing. */
.wf-badge { position: relative; z-index: 1; }
.wf-badge.yes { background: linear-gradient(var(--good-bg), var(--good-bg)), var(--panel); }
.wf-badge.no { background: linear-gradient(var(--bad-bg), var(--bad-bg)), var(--panel); }

/* ./mod/studio.css */
/* agent studio styles */
.studio-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; scrollbar-width: none; }
.studio-tabs::-webkit-scrollbar { display: none; }
.studio-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; color: var(--ink-2); font-weight: 550; font-size: 14px; white-space: nowrap; text-decoration: none !important; }
.studio-tab:hover { background: var(--sunken); color: var(--ink); }
.studio-tab.on { background: var(--brand-soft); color: var(--brand-ink); }

/* ./mod/studio-engine.css */
/* studio-engine: Agents, Tasks and Usage tabs of the agent studio (prefix se-). */
.se { gap: 16px; }
.se-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.se-title { font-size: 18px; font-weight: 650; }
.se-min { min-width: 0; }
.se-nowrap { white-space: nowrap; }
.se-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.se-clamp1 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se .warn-t { width: auto; text-align: left; font-weight: 550; }
.se-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.se-fs:disabled { opacity: .92; }
.se-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-softer); border: 1px solid var(--brand-soft); color: var(--ink-2); font-size: 13px; }
.se-note .ico { color: var(--brand-ink); margin-top: 2px; }

/* avatar */
.se-av { flex: none; display: inline-grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--c) 14%, var(--panel)); color: color-mix(in srgb, var(--c) 80%, var(--ink)); font-weight: 650; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent); line-height: 1; }

/* toolbar */
.se-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.se-search { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--mute); }
.se-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.se-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 9px 0; }
.se-sel { width: auto; min-width: 0; flex: 0 1 auto; padding-top: 8px; padding-bottom: 8px; }
.se-view { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--panel); }
.se-view button { border: 0; background: none; padding: 8px 10px; color: var(--mute); cursor: pointer; }
.se-view button.on { background: var(--brand-soft); color: var(--brand-ink); }
.se-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* new agent menu */
.se-menu-wrap { position: relative; }
.se-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(320px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 2px; animation: se-pop .16s var(--ease); transform-origin: top right; }
@keyframes se-pop { from { opacity: 0; transform: scale(.97) translateY(-4px); } }
.se-menu button { display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--ink); }
.se-menu button:hover, .se-menu button:focus-visible { background: var(--sunken); }
.se-menu small { display: block; color: var(--mute); font-size: 12px; }
.se-mi { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); }
.se-mi.ai { background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 50%, var(--brand-2, #06b6d4))); color: #fff; }

/* list */
.se-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.se-rows { display: grid; gap: 8px; }
.se-card { display: grid; gap: 10px; padding: 16px; color: inherit; text-decoration: none !important; transition: border-color .15s, box-shadow .2s, transform .2s var(--ease); }
.se-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow: var(--shadow); transform: translateY(-1px); }
.se-card.row-view { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; padding: 10px 14px; }
.se-card.row-view .se-card-foot span:not(.grow) { display: none; }
.se-card-top { display: flex; gap: 12px; align-items: center; min-width: 0; }
.se-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.se-card-foot { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--line-2); padding-top: 10px; }
.se-card.row-view .se-card-foot { border: 0; padding: 0; }
.se-card-foot span { display: inline-flex; align-items: center; gap: 4px; }
.se-pin { border: 0; background: none; font-size: 18px; line-height: 1; color: var(--faint); cursor: pointer; padding: 4px; border-radius: 8px; }
.se-pin:hover { background: var(--sunken); color: var(--warn); }
.se-pin.on { color: var(--warn); }
.se-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.se-role { display: grid; gap: 6px; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); cursor: pointer; color: inherit; font: inherit; transition: border-color .15s, box-shadow .15s; }
.se-role:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.se-role-ch { display: flex; gap: 4px; flex-wrap: wrap; }
.se-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line-2); color: inherit; text-decoration: none !important; }
.se-kv > span:first-child { color: var(--mute); font-size: 13px; }

/* builder */
.se-bhead { display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
.se-back { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--ink-2); flex: none; }
.se-back .ico { transform: rotate(90deg); }
.se-back:hover { background: var(--sunken); text-decoration: none; }
.se-bname { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.se-bactions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.se-builder { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.se-nav { display: grid; gap: 2px; position: sticky; top: 96px; }
.se-navlink { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; color: var(--ink-2); font-weight: 550; font-size: 14px; text-decoration: none !important; }
.se-navlink:hover { background: var(--sunken); color: var(--ink); }
.se-navlink.on { background: var(--brand-soft); color: var(--brand-ink); }
.se-navlink i { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 650; background: var(--sunken); border-radius: 999px; padding: 0 7px; color: var(--mute); }
.se-navlink.on i { background: var(--panel); color: var(--brand-ink); }
.se-navfoot { display: flex; gap: 14px; padding: 12px 10px 0; margin-top: 8px; border-top: 1px solid var(--line-2); }
.se-pane { min-width: 0; display: grid; gap: 12px; }
.se-sec { padding: 18px; display: grid; gap: 14px; align-content: start; }
.se-sec h3 { font-size: 15px; }
.se-sec-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.se-sec-h p { margin-top: 2px; }
.se-switches { display: grid; gap: 10px; }
.se-switch { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; }
.se-avpick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.se-emoji { width: 64px; text-align: center; font-size: 18px; padding: 6px; }
.se-emo { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 17px; font-weight: 650; color: var(--ink-2); }
.se-emo.on, .se-swatch.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.se-swatch { width: 26px; height: 26px; border-radius: 999px; border: 2px solid var(--panel); background: var(--c); cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.se-tags { gap: 6px; }
.se-tags .pill { padding-right: 4px; }
.se-x { border: 0; background: none; cursor: pointer; color: var(--mute); font-size: 15px; line-height: 1; padding: 0 3px; }
.se-taginput { width: 150px; flex: 1 1 120px; padding: 5px 10px; }
.se-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.se-choice { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; color: inherit; font: inherit; }
.se-choice:hover { border-color: var(--faint); }
.se-choice.on { border-color: var(--brand); background: var(--brand-softer); box-shadow: 0 0 0 3px var(--brand-soft); }

/* prompt */
.se-editor { position: relative; }
.se-prompt { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; line-height: 1.6; resize: vertical; min-height: 220px; }
.se-slash { position: absolute; left: 12px; right: 12px; bottom: 10px; max-width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 4px; z-index: 10; display: grid; animation: se-pop .14s var(--ease); }
.se-slash button { display: flex; gap: 8px; align-items: center; border: 0; background: none; padding: 7px 8px; border-radius: 8px; cursor: pointer; text-align: left; color: var(--ink); font: inherit; font-size: 13px; }
.se-slash button.on, .se-slash button:hover { background: var(--brand-soft); }
.se-ref { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-size: 11px; font-weight: 700; background: var(--sunken); color: var(--ink-2); }
.se-ref.tool { background: color-mix(in srgb, #f59e0b 16%, var(--panel)); color: #b45309; }
.se-ref.var { background: color-mix(in srgb, #8b5cf6 14%, var(--panel)); color: #7c3aed; }
.se-preview-h { margin-bottom: -8px; }
.se-preview { padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--panel-2); display: grid; gap: 6px; font-size: 14px; overflow-wrap: anywhere; }
.se-preview h4 { font-size: 15px; margin-top: 4px; }
.se-li { display: flex; gap: 8px; } .se-li > span:first-child { color: var(--mute); min-width: 16px; }
.se-gap { height: 4px; }
.se-chip { display: inline-flex; align-items: center; gap: 2px; padding: 0 8px; margin: 0 1px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px; vertical-align: 1px; white-space: nowrap; }
.se-chip.tool { background: color-mix(in srgb, #f59e0b 16%, var(--panel)); color: #b45309; }
.se-chip.var { background: color-mix(in srgb, #8b5cf6 14%, var(--panel)); color: #7c3aed; }

/* tools */
.se-tool { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); transition: border-color .15s; }
.se-tool.open { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.se-tool-h { display: flex; align-items: center; gap: 6px; padding-right: 6px; }
.se-tool-t { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center; border: 0; background: none; padding: 10px 12px; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.se-tool-t b { display: block; }
.se-chev { color: var(--mute); display: inline-flex; transition: transform .2s var(--ease); }
.se-chev .ico { transform: rotate(-90deg); }
.se-chev.up .ico { transform: rotate(0deg); }
.se-tool-b { display: grid; gap: 14px; padding: 4px 14px 14px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.se-inputs { display: grid; gap: 8px; }
.se-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1.2fr); gap: 8px; align-items: center; padding: 8px; border-radius: 9px; background: var(--panel-2); }
.se-input-row code { font-size: 12px; font-weight: 600; }
.se-add select { flex: 1; min-width: 0; }
.se-sys { display: flex; gap: 6px; flex-wrap: wrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.se-kset { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.se-kset.on { border-color: var(--brand); background: var(--brand-softer); }
.se-kset label { cursor: pointer; }
.se-kset b { display: block; }

/* variables / memory tables */
.se-table { display: grid; gap: 8px; }
.se-var { display: grid; grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.se-mems { display: grid; gap: 6px; }
.se-mem { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--line-2); font-size: 14px; }

/* triggers / alerts */
.se-trg { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; display: grid; gap: 10px; background: var(--panel); }
.se-trg-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.se-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.se-code { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--sunken); min-width: 0; }
.se-code code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 12px; scrollbar-width: thin; }
.input.err { border-color: var(--bad); }

/* versions */
.se-vers { display: grid; gap: 6px; }
.se-ver { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.se-ver.live { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); background: color-mix(in srgb, var(--good-bg) 55%, transparent); }
.se-vn { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--sunken); font-weight: 650; font-size: 13px; }

/* talk to it */
.se-talk { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 16px; }
.se-log { min-height: 300px; max-height: 52vh; border-radius: 12px; border: 1px solid var(--line-2); }
.se-sysmsg { color: var(--bad); }
.se-trace { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.se-tcall { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--good-bg); color: var(--good); white-space: nowrap; }
.se-tcall.bad { background: var(--bad-bg); color: var(--bad); }
.se-tcall.sim { background: var(--sunken); color: var(--mute); }
.se-apr { display: flex; gap: 8px; align-items: center; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); white-space: normal; flex-wrap: wrap; }
.se-tlink { display: inline-block; margin-top: 6px; }
.se-talk-side { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-2); }
.se-talk-side h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.se-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 13px; }
.se-dl dt { color: var(--mute); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
.se-dl dd { margin: 0; overflow-wrap: anywhere; }
.se-pre { white-space: pre-wrap; background: var(--panel-2); border: 1px solid var(--line-2); padding: 10px 12px; border-radius: 10px; font-size: 13px; max-height: 220px; overflow: auto; }

/* tasks */
.se-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.se-tabs::-webkit-scrollbar { display: none; }
.se-tabbtn { border: 0; background: none; padding: 9px 12px; font-weight: 550; color: var(--mute); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: inherit; font-weight: 550; }
.se-tabbtn.on { color: var(--ink); border-bottom-color: var(--brand); }
.se-tabbtn i { font-style: normal; font-size: 11px; font-weight: 650; background: var(--sunken); border-radius: 999px; padding: 0 7px; color: var(--mute); }
.se-tabbtn i.hot { background: var(--warn-bg); color: var(--warn); }
.se-timeline { padding: 14px 16px; display: grid; gap: 10px; }
.se-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; height: 120px; align-items: end; }
.se-barcol { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; min-width: 0; }
.se-barcol > span { font-size: 10px; color: var(--mute); text-align: center; }
.se-bar-stack { align-self: end; display: flex; flex-direction: column; border-radius: 5px 5px 2px 2px; overflow: hidden; min-height: 2px; background: var(--sunken); transition: height .4s var(--ease); }
.se-bar-stack i { display: block; min-height: 0; }
.se-bar-stack .all, .se-lg.all { background: var(--brand); }
.se-bar-stack .other, .se-lg.other { background: color-mix(in srgb, var(--brand) 25%, var(--sunken)); }
.se-bar-stack .rest { background: var(--sunken); }
.se-bar-stack .approvals, .se-lg.approvals, .se-bar-stack .escalated, .se-lg.escalated { background: var(--warn); }
.se-bar-stack .errors, .se-lg.errors { background: var(--bad); }
.se-memfilter { display: flex; gap: 6px; }
.se-tasklist { padding: 4px; display: grid; }
.se-trow { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 10px; color: inherit; text-decoration: none !important; }
.se-trow + .se-trow { border-top: 1px solid var(--line-2); }
.se-trow:hover { background: var(--panel-2); }
.se-trow > .pill { margin-top: 2px; flex: none; }
.se-trow > .se-chev { margin-top: 4px; }
.se-ttitle { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-tmeta { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: center; }
.se-memchips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.se-memchip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, #8b5cf6 10%, var(--panel)); color: var(--ink-2); }
.se-memchip b { font-weight: 600; color: #7c3aed; }
.se-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; animation: se-pulse 1.2s ease-in-out infinite; }
@keyframes se-pulse { 50% { opacity: .3; } }
.se-aprcard, .se-decide { padding: 14px 16px; display: grid; gap: 10px; }
.se-decide.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn-bg) 60%, var(--panel)); }
.se-json { margin: 6px 0 0; padding: 10px 12px; border-radius: 9px; background: var(--sunken); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }
.se-detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.se-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.se-step { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.se-step:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--line-2); }
.se-stepic { flex: none; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--sunken); color: var(--ink-2); position: relative; }
.se-stepic.bad { background: var(--bad-bg); color: var(--bad); }
.se-stepic.warn { background: var(--warn-bg); color: var(--warn); }
.se-stepic.good { background: var(--good-bg); color: var(--good); }
.se-step-h { display: flex; gap: 10px; align-items: baseline; width: 100%; border: 0; background: none; padding: 5px 0 2px; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.se-io { display: grid; gap: 8px; margin-top: 6px; }
.se-reply { white-space: pre-wrap; }

/* usage */
.se-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.se-meter { padding: 16px; display: grid; gap: 8px; }
.se-meter-v b { font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.se-track { height: 8px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.se-track i { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .5s var(--ease); }
.se-track i.good { background: var(--good); } .se-track i.warn { background: var(--warn); } .se-track i.bad { background: var(--bad); }
.se-slots { display: flex; gap: 4px; flex-wrap: wrap; }
.se-slots i { flex: 1 1 14px; max-width: 40px; height: 8px; border-radius: 999px; background: var(--sunken); transition: background .3s; }
.se-slots i.on { background: var(--brand); }
.se-live { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--good); }
.se-live::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; animation: se-pulse 1.6s ease-in-out infinite; }
.se-usage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.se-usage3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.se-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; height: 110px; align-items: end; }
.se-hour { position: relative; height: 100%; display: flex; align-items: flex-end; gap: 1px; }
.se-hour i { flex: 1; min-height: 2px; border-radius: 3px 3px 1px 1px; }
.se-hour i.a { background: var(--brand); }
.se-hour i.b { background: color-mix(in srgb, var(--brand) 30%, var(--sunken)); }
.se-scroll { overflow-x: auto; }
.se-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.se-tbl th { text-align: left; font-weight: 550; color: var(--mute); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.se-tbl td { padding: 8px; border-bottom: 1px solid var(--line-2); }
.se-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .se-menu, .se-slash { animation: none; }
  .se-card, .se-card:hover { transform: none; }
  .se-dot, .se-live::before { animation: none; }
}

@media (max-width: 1000px) {
  .se-usage3 { grid-template-columns: 1fr; }
  .se-detail, .se-usage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .se-builder { grid-template-columns: minmax(0, 1fr); }
  .se-nav { position: static; display: flex; overflow-x: auto; gap: 4px; padding-bottom: 2px; scrollbar-width: none; }
  .se-nav::-webkit-scrollbar { display: none; }
  .se-navlink { flex: none; }
  .se-navfoot { display: none; }
  .se-bhead { position: static; }
  .se-talk { grid-template-columns: minmax(0, 1fr); }
  .se-meters { grid-template-columns: minmax(0, 1fr); }
  .se-var { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .se-var > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .se-var > :nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
  .se-var > :nth-child(5) { grid-column: 3; grid-row: 1; }
  .se-input-row { grid-template-columns: minmax(0, 1fr); }
  .se-card.row-view { grid-template-columns: minmax(0, 1fr) auto; }
  .se-card.row-view .se-card-meta { display: none; }
}
@media (max-width: 520px) {
  .se-bactions { width: 100%; }
  .se-bactions .btn { flex: 1 1 auto; justify-content: center; }
  .se-bar .seg { width: 100%; overflow-x: auto; }
  .se-sel { flex: 1 1 140px; }
  .se-grid { grid-template-columns: minmax(0, 1fr); }
  .se-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .se-sec { padding: 14px; }
  .se-bars { gap: 3px; }
  .se-barcol:nth-child(odd) > span { visibility: hidden; }
  .se-ver { flex-wrap: wrap; }
}
/* Long titles and errors wrap instead of stretching the list on phones. */
.se-tasklist { grid-template-columns: minmax(0, 1fr); }
.se-trow { min-width: 0; }
.se-ttitle { overflow-wrap: anywhere; }
.se-tmeta { flex-wrap: wrap; }

/* ./mod/studio-tools.css */
/* Agent studio: Tools (ui/pages/studio/tools.js). Classes are prefixed stl-;
   the flow reuses the automations builder's wf-* lanes (ui/mod/webhooks.css). */

/* ── List ─────────────────────────────────────────────────────────────── */
.stl-hero { background: linear-gradient(135deg, var(--brand-softer), transparent 70%), var(--panel); }
.stl-filters { gap: 10px; }
.stl-search { position: relative; display: flex; align-items: center; flex: 1 1 220px; min-width: 0; max-width: 360px; color: var(--faint); }
.stl-search .ico { position: absolute; left: 11px; pointer-events: none; }
.stl-search .input { padding-left: 34px; }
.stl-chips { gap: 6px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
.stl-chips::-webkit-scrollbar { display: none; }
.stl-chips .chip { flex: none; padding: 5px 11px; font-size: 13px; }
.stl-tagsel { width: auto; min-width: 130px; }
.stl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.stl-card { display: grid; gap: 10px; padding: 16px; color: inherit; text-decoration: none !important; align-content: start; }
.stl-name { font-weight: 600; font-size: 15px; line-height: 1.35; letter-spacing: -.01em; }
.stl-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; margin: 0; }
.stl-meta { gap: 6px; }
.stl-tag { font-size: 11.5px; color: var(--brand-ink); background: var(--brand-softer); border-radius: 6px; padding: 1px 7px; }
.stl-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: var(--brand-soft); }
.stl-ico.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
.stl-ico.lg { width: 52px; height: 52px; border-radius: 15px; font-size: 26px; }
.stl-h { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.stl-tplgrid, .stl-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.stl-tpl, .stl-pick { display: flex; gap: 11px; align-items: flex-start; text-align: left; width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; transition: border-color .15s, background .15s, transform .12s var(--ease); font: inherit; color: inherit; }
.stl-tpl:hover, .stl-pick:hover, .stl-tpl:focus-visible, .stl-pick:focus-visible { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-softer); }
.stl-tpl:active, .stl-pick:active { transform: translateY(1px); }
.stl-tpl .grow, .stl-pick .grow { display: grid; gap: 2px; min-width: 0; }
.stl-tpl b, .stl-pick b { font-weight: 600; font-size: 13.5px; }

/* ── Tool page ────────────────────────────────────────────────────────── */
.stl-title { font-size: 19px; font-weight: 650; letter-spacing: -.015em; overflow-wrap: anywhere; }
.stl-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.stl-tabs::-webkit-scrollbar { display: none; }
.stl-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--mute); font-weight: 550; white-space: nowrap; text-decoration: none !important; }
.stl-tab:hover { color: var(--ink); }
.stl-tab.on { color: var(--ink); border-color: var(--brand); }
.stl-req { color: var(--brand-ink); font-weight: 600; font-size: 12px; }
.stl-note { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.stl-err { background: var(--bad-bg); color: var(--bad); border-radius: 10px; padding: 9px 12px; overflow-wrap: anywhere; }
.stl-spin { width: 10px; height: 10px; border-width: 1.5px; margin-right: 2px; }
.stl-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.stl-span { grid-column: 1 / -1; }
.stl-pre { margin: 0; padding: 10px 12px; background: var(--sunken); border: 1px solid var(--line-2); border-radius: 10px; font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow: auto; }
.stl-details summary { cursor: pointer; font-weight: 550; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 7px; list-style: none; }
.stl-details summary::-webkit-details-marker { display: none; }
.stl-details summary::before { content: '▸'; color: var(--faint); font-size: 11px; transition: transform .15s; }
.stl-details[open] summary::before { transform: rotate(90deg); }
.stl-details[open] summary { margin-bottom: 8px; }

/* Use */
.stl-use { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.stl-k { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); margin-bottom: 4px; }
.stl-val { position: relative; background: var(--sunken); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; }
.stl-val pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 14px/1.6 Poppins, system-ui, sans-serif; max-height: 420px; overflow: auto; }
.stl-valcopy { position: absolute; top: 6px; right: 6px; opacity: 0; transition: opacity .15s; }
.stl-val:hover .stl-valcopy, .stl-valcopy:focus-within { opacity: 1; }
@media (hover: none) { .stl-valcopy { opacity: 1; position: static; margin-top: 6px; } }
.stl-trace { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stl-trace li { margin-left: calc(var(--d, 0) * 16px); border-left: 2px solid var(--line); padding-left: 8px; }
.stl-trace li.st-ok { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.stl-trace li.st-error { border-color: var(--bad); }
.stl-trace li.st-simulated { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); border-left-style: dashed; }
.stl-trow { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 5px 4px; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; color: inherit; min-width: 0; }
.stl-trow:hover { background: var(--sunken); }
.stl-trow b { font-weight: 600; font-size: 13px; max-width: 45%; }
.stl-dot { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--sunken); color: var(--mute); }
.st-ok .stl-dot { background: var(--good-bg); color: var(--good); }
.st-error .stl-dot { background: var(--bad-bg); color: var(--bad); }
.st-simulated .stl-dot { background: var(--warn-bg); color: var(--warn); }
.stl-tbody { display: grid; gap: 8px; padding: 4px 0 8px; }
.stl-bulk { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 7px; background: var(--panel-2); }
.stl-bar { height: 6px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.stl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--brand-2, #06b6d4))); border-radius: 99px; transition: width .4s var(--ease); }

/* Build */
.stl-warn { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
.stl-warn .grow { min-width: 220px; color: var(--ink-2); }
.stl-details-grid { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.stl-details-grid > .stl-span { grid-column: 1 / -1; }
.stl-emoji { text-align: center; font-size: 20px; padding: 6px; }
.stl-input { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.stl-input.open { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow: 0 0 0 3px var(--brand-softer); }
.stl-type { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--sunken); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.stl-ititle { display: flex; align-items: center; gap: 8px; border: 0; background: none; text-align: left; cursor: pointer; padding: 4px; font: inherit; color: inherit; min-width: 0; }
.stl-ititle code { font-size: 11.5px; }
.stl-igrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; padding: 10px 2px 4px; align-items: end; }
.stl-reqbox { padding-bottom: 9px; }
.stl-out { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.6fr) auto; gap: 8px; align-items: center; }
.stl-flow { max-width: 780px; margin: 0 auto; width: 100%; }
.stl-node { gap: 10px; }
.stl-node.cat-ai { border-left: 3px solid #8b5cf6; }
.stl-node.cat-web { border-left: 3px solid #0ea5e9; }
.stl-node.cat-apiflow { border-left: 3px solid #64748b; }
.stl-node.cat-data { border-left: 3px solid #14b8a6; }
.stl-node.cat-knowledge { border-left: 3px solid #f59e0b; }
.stl-node.cat-marketercore { border-left: 3px solid var(--brand); }
.stl-node.cat-agents { border-left: 3px solid #ec4899; }
.stl-nh { display: grid; gap: 0; min-width: 0; }
.stl-sname { border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 1px 5px; margin-left: -6px; font: 600 14px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--ink); min-width: 0; width: 100%; }
.stl-sname:hover { border-color: var(--line); }
.stl-sname:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--panel); }
.stl-collapse { padding: 4px 8px; }
.stl-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.stl-fields > .wide { grid-column: 1 / -1; }
.stl-f { min-width: 0; }
.stl-kv { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: center; }
.stl-onerr { gap: 8px; }
.stl-onerr .input { width: auto; padding: 5px 10px; font-size: 13px; }
.stl-chiprow { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding-top: 8px; border-top: 1px dashed var(--line); }
.stl-var { border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line)); background: var(--brand-softer); color: var(--brand-ink); border-radius: 7px; padding: 2px 8px; font: 500 11.5px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stl-var:hover { background: var(--brand-soft); border-color: var(--brand); }
.stl-test { display: grid; gap: 8px; }
.stl-testout { border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; border: 1px solid var(--line); }
.stl-testout.ok { background: color-mix(in srgb, var(--good) 5%, var(--panel)); border-color: color-mix(in srgb, var(--good) 25%, var(--line)); }
.stl-testout.bad { background: color-mix(in srgb, var(--bad) 4%, var(--panel)); border-color: color-mix(in srgb, var(--bad) 25%, var(--line)); }
.stl-cond { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1fr) auto; }
.stl-loop { border-color: color-mix(in srgb, #0ea5e9 40%, var(--line)); background: color-mix(in srgb, #0ea5e9 4%, var(--panel)); }
.stl-looplane { position: relative; padding-top: 26px; }
.stl-looplane::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 26px; margin-left: -1px; background: var(--line); }
.stl-lane { border-color: color-mix(in srgb, #0ea5e9 35%, var(--line)); background: color-mix(in srgb, #0ea5e9 3%, var(--panel-2)); }
.stl-lane::before { display: none; }
.stl-badge { background: linear-gradient(color-mix(in srgb, #0ea5e9 12%, var(--panel)), color-mix(in srgb, #0ea5e9 12%, var(--panel))), var(--panel); color: #0369a1; border: 1px solid color-mix(in srgb, #0ea5e9 30%, transparent); }
.stl-merge1 { margin: 0 auto; width: 2px; border: 0; border-radius: 0; height: 14px; background: var(--line); }
.stl-merge1::after { display: none; }
.stl-nocode { text-align: center; }
.stl-savebar { z-index: 5; flex-wrap: wrap; }
.stl-sample { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel-2); }

/* Logs */
.stl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stl-stats .stat { padding: 14px 16px; }
.stl-stats .stat .v { font-size: 22px; }
.stl-sel { width: auto; padding: 6px 10px; font-size: 13px; }
.stl-sum { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Share & versions */
.stl-share { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
.stl-share .codebox .btn { background: rgba(255, 255, 255, .08); color: #e2e8f0; border-color: rgba(255, 255, 255, .15); }
.stl-versions { list-style: none; margin: 0; padding: 0; display: grid; }
.stl-versions li { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.stl-versions li:last-child { border-bottom: 0; }
.stl-vdot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--line); box-shadow: 0 0 0 3px var(--panel); }
.stl-vdot.published { background: var(--brand); }
.stl-vdot.live { background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.stl-versions .grow { min-width: 180px; }

/* ── Small screens (down to 375px) ─────────────────────────────────────── */
@media (max-width: 900px) {
  .stl-use, .stl-share { grid-template-columns: minmax(0, 1fr); }
  .stl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .stl-grid { grid-template-columns: minmax(0, 1fr); }
  .stl-search { max-width: none; flex-basis: 100%; }
  .stl-details-grid { grid-template-columns: 70px minmax(0, 1fr); }
  .stl-details-grid > :nth-child(4), .stl-details-grid > :nth-child(5) { grid-column: 1 / -1; }
  .stl-fields, .stl-igrid, .stl-two { grid-template-columns: minmax(0, 1fr); }
  .stl-out { grid-template-columns: minmax(0, 1fr) auto; }
  .stl-out > span.muted { display: none; }
  .stl-out > input:nth-of-type(2) { grid-column: 1 / -1; grid-row: 2; }
  .stl-kv { grid-template-columns: minmax(0, 1fr) auto; }
  .stl-kv > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .wf-cond.stl-cond { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .wf-cond.stl-cond > * { grid-column: auto; grid-row: auto; }
  .stl-tplgrid, .stl-pickgrid { grid-template-columns: minmax(0, 1fr); }
  .stl-title { font-size: 17px; }
  .stl-sum { max-width: 180px; }
  .stl-trow b { max-width: 38%; }
}
@media (max-width: 420px) {
  .stl-node .wf-tools .btn { padding: 4px; }
  .stl-collapse { display: none; }
  .stl-trace li { margin-left: calc(var(--d, 0) * 10px); }
}

/* ./mod/studio-knowledge.css */
/* Agent studio: knowledge tab (ui/pages/studio/knowledge.js). */
.kb { font-family: Poppins, system-ui, sans-serif; }
.kb-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.kb-title { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.01em; overflow-wrap: anywhere; }
.kb-sub { margin: 4px 0 0; max-width: 640px; }
.kb-narrow { max-width: 460px; margin: 0 auto; }
.kb-section-t { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.kb-tabbar { overflow-x: auto; scrollbar-width: none; }
.kb-tabbar::-webkit-scrollbar { display: none; }
.kb-tabbar .seg { flex-wrap: nowrap; white-space: nowrap; }
.kb-back { color: var(--mute); text-decoration: none; width: fit-content; }
.kb-back:hover { color: var(--brand-ink); }
.kb-ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Stats strip */
.kb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kb-stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 2px; }
.kb-stat span { font-size: 12px; color: var(--mute); }
.kb-stat b { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.kb-stat b.kb-stat-s { font-size: 14px; font-weight: 600; line-height: 1.9; }

/* Set cards */
.kb-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kb-set { display: grid; gap: 8px; padding: 16px; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s var(--ease); }
.kb-set:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); transform: translateY(-1px); }
.kb-set:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kb-set-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kb-set-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kb-set-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); }
.kb-set-d { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.kb-set-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.kb-srcs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.kb-src { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); background: var(--sunken); border-radius: 7px; padding: 2px 7px; }

/* Start options (empty state and the new-set dialog) */
.kb-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 640px; margin: 4px auto 0; }
.kb-start-card { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .15s, background .15s, box-shadow .15s; }
.kb-start-card svg { color: var(--brand); }
.kb-start-card span { font-size: 12.5px; color: var(--mute); }
.kb-start-card:hover { border-color: var(--faint); }
.kb-start-card.on { border-color: var(--brand); background: var(--brand-softer); box-shadow: 0 0 0 1px var(--brand); }
.kb-start-sm { max-width: none; margin: 0; }

/* Connectors (coming soon) */
.kb-conn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kb-conn-c { padding: 14px; display: grid; gap: 8px; align-content: start; background: var(--panel-2); }
.kb-conn-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--sunken); color: var(--mute); flex: none; }

/* Lists (sources, jobs, cleanup) */
.kb-list { display: grid; }
.kb-li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line-2); }
.kb-li:first-child { border-top: 0; }
.kb-li > svg { margin-top: 3px; color: var(--mute); flex: none; }
.kb-src-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--sunken); color: var(--ink-2); flex: none; }
.kb-source .row.nowrap { min-width: 0; }
.kb-src-act { flex: none; justify-content: flex-end; }
.kb-prog { color: var(--brand-ink); margin-top: 2px; }
.kb-msg-warn { color: var(--warn); margin-top: 2px; }
.kb-spin { width: 10px; height: 10px; border-width: 1.5px; }
.kb-jobbar { margin: 6px 0 4px; max-width: 360px; }
.kb-bar-bad { background: var(--bad) !important; }
.kb-inset { padding: 14px; border-radius: 12px; background: var(--sunken); }
.kb-up { display: grid; gap: 6px; }
.kb-chip { max-width: 100%; font-size: 13px; }
.kb-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.kb-warn svg { flex: none; margin-top: 2px; }

/* Snippets */
.kb-snips { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.kb-snip { padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.kb-snip-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kb-snip-v { margin: 0; font-size: 14px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Set page header */
.kb-hero { padding: 18px; display: grid; gap: 14px; background: linear-gradient(135deg, var(--brand-softer), transparent 60%), var(--panel); }
.kb-hero-t { display: flex; gap: 12px; align-items: flex-start; }
.kb-hero-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.kb-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--mute); }
.kb-meta b { color: var(--ink); font-weight: 650; }

/* Data table */
.kb-table { padding: 12px; overflow: hidden; }
.kb-table td { vertical-align: top; }
.kb-cell { display: block; max-width: 420px; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.kb-act { display: inline-flex; gap: 2px; white-space: nowrap; }
.kb-find { display: flex; gap: 6px; align-items: center; min-width: 0; }
.kb-find .input { min-width: 0; width: 220px; }
.kb-cols { display: grid; gap: 8px; }

/* Search playground */
.kb-q { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 14px; background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.kb-q:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.kb-q > svg { color: var(--mute); flex: none; }
.kb-q input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); padding: 6px 0; }
.kb-opts { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.kb-opts .input[type="number"] { width: 90px; }
.kb-opts .grow { flex: 1; min-width: 200px; }
.kb-lbl { font-size: 13px; font-weight: 550; color: var(--ink-2); }
.kb-range { width: 100%; accent-color: var(--brand); }
.kb-diag { gap: 6px; }
.kb-exp { margin: 0 2px; font-weight: 500; }
.kb-hit { padding: 14px 16px; display: grid; gap: 10px; }
.kb-hit-h { display: flex; align-items: center; gap: 10px; }
.kb-rank { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 650; background: var(--sunken); color: var(--ink-2); flex: none; }
.kb-score { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 260px; }
.kb-score .bar { flex: 1; }
.kb-score b { font-variant-numeric: tabular-nums; font-size: 13px; }
.kb-why { display: flex; gap: 6px; align-items: flex-start; color: var(--brand-ink); background: var(--brand-softer); border-radius: 8px; padding: 6px 10px; }
.kb-why svg { flex: none; margin-top: 2px; }
.kb-hit-t { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); font-size: 14px; }
.kb-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 14px; }
.kb-dl dt { color: var(--mute); font-size: 12.5px; font-weight: 550; padding-top: 1px; }
.kb-dl dd { margin: 0; overflow-wrap: anywhere; }

/* Settings */
.kb-fs { border: 1px solid var(--line); margin: 0; min-width: 0; }
.kb-fs[disabled] { opacity: .8; }

@media (max-width: 860px) {
  .kb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-conn { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .kb-start { grid-template-columns: minmax(0, 1fr); }
  .kb-head .btn.primary { width: 100%; justify-content: center; }
  .kb-li { padding: 12px 14px; flex-wrap: wrap; }
  .kb-src-act { width: 100%; justify-content: flex-start; padding-left: 44px; }
  .kb-hero { padding: 14px; }
  .kb-table { padding: 8px; }
  .kb-find .input { width: 100%; }
  .kb-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kb-dl dd { margin-bottom: 8px; }
  .kb-q { flex-wrap: wrap; padding: 8px 8px 8px 12px; }
  .kb-q .btn { width: 100%; justify-content: center; }
  .kb-opts .grow { min-width: 100%; }
  .kb-sets, .kb-snips { grid-template-columns: minmax(0, 1fr); }
}

/* ./mod/studio-teams.css */
/* studio-teams: Teams builder (tm-), Agent chat (sc-) and Evals (ev-) in the agent studio. */

/* ── Shared bits ───────────────────────────────────────────────────────── */
.tm .ico.flip, .sc .ico.sc-flip { transform: rotate(90deg); }
.tm .ico.up { transform: rotate(180deg); }
.ev .ico.ev-rot { transform: rotate(-90deg); color: var(--faint); }
.tm-title, .ev-title { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
.tm-head, .ev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tm-head p, .ev-head p { margin: 2px 0 0; }
.tm-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--line); font-size: 13.5px; }
.tm-note.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--ink); }
.tm-note.warn .ico { color: var(--warn); flex: none; margin-top: 1px; }
.tm-note.bad { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.tm-note.bad .ico { color: var(--bad); flex: none; }
.tm-warn-t { color: var(--warn); }
.tm-label, .ev-label { font-size: 12px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.tm-code, .ev-codeline { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); min-width: 0; }
.tm-code code, .ev-codeline code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 12.5px; scrollbar-width: thin; }
.tm-pre, .ev-snip pre { margin: 0; padding: 12px 14px; border-radius: 10px; background: #0f172a; color: #e2e8f0; font-size: 12px; line-height: 1.55; overflow-x: auto; white-space: pre; }
.tm-toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.tm-toggle > span:last-child { display: grid; gap: 1px; }
.tm-toggle small { color: var(--mute); font-size: 12.5px; }
.tm-fs { border: 0; margin: 0; min-width: 0; }
.tm-fs:disabled, .tm-settings:disabled, .ev-scns:disabled { opacity: 1; }
.tm-fs:disabled .input, .tm-settings:disabled .input { background: var(--sunken); }

/* ── Team list ─────────────────────────────────────────────────────────── */
.tm-grid, .ev-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.tm-card { display: grid; gap: 12px; padding: 16px; color: inherit; text-decoration: none !important; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; }
.tm-card:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); box-shadow: var(--shadow); }
.tm-card-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 45%, var(--brand-2, #06b6d4))); color: #fff; box-shadow: 0 6px 14px -8px var(--brand); }
.tm-card-name { font-size: 15.5px; }
.tm-card p { margin: 3px 0 0; }
.tm-clamp, .sc-clamp, .ev-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-clamp { -webkit-line-clamp: 1; }
.tm-card-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.tm-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.tm-card-foot { display: flex; gap: 10px; align-items: center; padding-top: 10px; border-top: 1px solid var(--line-2); }
.tm-tpls { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tm-tpl { display: grid; gap: 6px; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, transform .1s; }
.tm-tpl:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.tm-tpl:active { transform: translateY(1px); }
.tm-tpl .eyebrow { margin: 0; font-size: 11px; }
.tm-tpl-agents { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.tm-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sunken); border: 2px solid var(--panel); margin-left: -6px; font-size: 13px; }
.tm-av:first-child { margin-left: 0; }
.tm-tpl-agents .small { margin-left: 6px; }
.tm-proposal { display: grid; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); background: var(--brand-softer); }
.tm-proposal p { margin: 0; }
.tm-mini { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 6px; font-size: 13.5px; }
.tm-mini li { position: relative; padding-left: 18px; }
.tm-mini li::before { content: ''; position: absolute; left: 4px; top: 16px; bottom: -8px; width: 2px; background: var(--line); }
.tm-mini li:last-child::before { display: none; }
.tm-dot { position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.tm-dot.tool { background: #f59e0b; } .tm-dot.cond { background: #8b5cf6; }
.tm-mini-br { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.tm-mini-br > div { display: grid; gap: 4px; align-content: start; }

/* ── Editor chrome ─────────────────────────────────────────────────────── */
.tm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tm-name { flex: 1 1 220px; max-width: 460px; font-size: 18px; font-weight: 650; border-color: transparent; background: transparent; padding: 6px 10px; }
.tm-name:hover { border-color: var(--line); }
.tm-name:focus { background: var(--panel); }
.tm-subnav { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tm-subnav a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; color: var(--mute); font-weight: 550; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none !important; }
.tm-subnav a:hover { color: var(--ink); }
.tm-subnav a.on { color: var(--brand-ink); border-bottom-color: var(--brand); }
.tm-count { font-size: 11.5px; padding: 0 7px; border-radius: 999px; background: var(--sunken); color: var(--ink-2); }

/* ── Builder: the flow reads as a diagram ─────────────────────────────── */
.tm-builder { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.tm-canvas { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 28px; min-height: 420px; overflow-x: auto;
  background-color: var(--panel-2); background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px); background-size: 18px 18px; }
.tm-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; position: sticky; left: 0; }
.tm-flow { display: flex; flex-direction: column; align-items: center; min-width: min-content; margin: 0 auto; }
.tm-node { position: relative; display: flex; align-items: center; gap: 12px; width: 300px; max-width: 100%; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(24,24,27,.05), 0 6px 16px -10px rgba(24,24,27,.18); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, transform .12s; }
.tm-node::before { content: ''; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.tm-node.tool::before { background: #f59e0b; } .tm-node.cond::before { background: #8b5cf6; } .tm-node.trigger::before { background: #10b981; }
.tm-node:hover { border-color: var(--faint); transform: translateY(-1px); }
.tm-node.sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft), 0 10px 24px -14px color-mix(in srgb, var(--brand) 60%, transparent); }
.tm-node.missing { border-style: dashed; border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.tm-node:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tm-node-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-soft); color: var(--brand-ink); }
.tm-node-ic.sm { width: 28px; height: 28px; border-radius: 8px; }
.tm-node-ic.tool { background: color-mix(in srgb, #f59e0b 14%, transparent); color: #b45309; }
.tm-node-ic.cond { background: color-mix(in srgb, #8b5cf6 14%, transparent); color: #7c3aed; }
.tm-node-ic.trig { background: color-mix(in srgb, #10b981 15%, transparent); color: #047857; }
.tm-node-ic.hand { background: var(--sunken); color: var(--ink-2); }
.tm-node-ic.stall { background: var(--warn-bg); color: var(--warn); }
.tm-node-ic.done { background: var(--good-bg); color: var(--good); }
.tm-emoji { font-size: 19px; line-height: 1; }
.tm-node-body { display: grid; gap: 1px; min-width: 0; flex: 1; }
.tm-node-body .eyebrow { margin: 0; font-size: 10.5px; letter-spacing: .08em; }
.tm-node-body b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-node-body .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-node-tools { display: flex; flex-direction: column; gap: 0; opacity: 0; transition: opacity .15s; }
.tm-node:hover .tm-node-tools, .tm-node.sel .tm-node-tools, .tm-node:focus-within .tm-node-tools { opacity: 1; }
.tm-node-tools .btn { padding: 3px; }
@media (hover: none) { .tm-node-tools { opacity: 1; } }

.tm-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 8px 0; }
.tm-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.tm-link::after { content: ''; position: absolute; bottom: 0; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top: 6px solid color-mix(in srgb, var(--ink) 30%, transparent); border-bottom: 0; }
.tm-link.tail::after { display: none; }
.tm-link.decide .tm-line { background: repeating-linear-gradient(to bottom, color-mix(in srgb, #8b5cf6 70%, transparent) 0 5px, transparent 5px 9px); }
.tm-hand { position: relative; z-index: 1; font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--mute); cursor: pointer; white-space: nowrap; transition: all .15s; }
.tm-hand:hover:not(:disabled) { border-color: var(--faint); color: var(--ink); }
.tm-hand.on { background: color-mix(in srgb, #8b5cf6 12%, var(--panel)); border-color: color-mix(in srgb, #8b5cf6 45%, transparent); color: #6d28d9; }
.tm-plus { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--mute); cursor: pointer; box-shadow: var(--shadow-sm); transition: all .15s; }
.tm-plus:hover, .tm-plus[aria-expanded="true"] { background: var(--brand); border-color: var(--brand); color: #fff; transform: scale(1.08); }
.tm-menu { position: absolute; z-index: 20; top: calc(100% - 6px); left: 50%; transform: translateX(-50%); width: 250px; padding: 6px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 2px; animation: pop .16s var(--ease); }
.tm-menu button { display: flex; gap: 10px; align-items: center; padding: 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.tm-menu button:hover { background: var(--sunken); }
.tm-menu small { display: block; color: var(--mute); font-size: 12px; }
.tm-end { display: flex; justify-content: center; padding-top: 2px; }
.tm-end span { font-size: 11.5px; font-weight: 600; color: var(--mute); padding: 3px 12px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); }
.tm-end.sm span { font-weight: 500; font-size: 11px; }

.tm-branches { position: relative; display: grid; grid-template-columns: repeat(2, minmax(250px, max-content)); gap: 28px; justify-content: center; padding-top: 22px; }
.tm-branches::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 12px; margin-left: -1px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.tm-branches::after { content: ''; position: absolute; top: 12px; left: 25%; right: 25%; height: 12px; border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); border-bottom: 0; border-radius: 12px 12px 0 0; }
.tm-branch { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
.tm-branch .tm-node { width: 260px; }
.tm-br { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; letter-spacing: .03em; }
.tm-br.yes { background: var(--good-bg); color: var(--good); }
.tm-br.no { background: var(--bad-bg); color: var(--bad); }
.tm-branch > .tm-br { position: relative; z-index: 1; }

/* Inspector */
.tm-insp { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow-y: auto; }
.tm-insp .card-h h3 { margin: 0; font-size: 15px; }
.tm-seg-wrap { overflow-x: auto; }
.tm-kv { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 6px; align-items: center; }
.tm-conn { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.tm-conn .seg { justify-self: start; }

@media (max-width: 1000px) {
  .tm-builder { grid-template-columns: minmax(0, 1fr); }
  .tm-insp { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .tm-canvas { padding: 12px 10px 22px; border-radius: 12px; }
  .tm-node, .tm-branch .tm-node { width: 100%; min-width: 240px; }
  .tm-flow { align-items: stretch; }
  .tm-branches { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 14px; }
  .tm-branches::after { display: none; }
  .tm-branch { padding: 10px 0 0 12px; border-left: 2px dashed var(--line); align-items: stretch; }
  .tm-branch > .tm-br { align-self: flex-start; }
  .tm-mini-br { grid-template-columns: minmax(0, 1fr); }
  .tm-kv { grid-template-columns: minmax(0, 1fr) auto; }
  .tm-kv .input:first-child { grid-column: 1 / -1; }
}

/* ── Runs and trace ────────────────────────────────────────────────────── */
.tm-runs { overflow: hidden; }
.tm-run { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-2); color: inherit; text-decoration: none !important; }
.tm-run:first-child { border-top: 0; }
.tm-run:hover { background: var(--panel-2); }
.tm-run-main { display: grid; gap: 2px; min-width: 0; }
.tm-run-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-run-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.tm-run-dot.good { background: var(--good); } .tm-run-dot.bad { background: var(--bad); } .tm-run-dot.warn { background: var(--warn); }
.tm-run-dot.brand { background: var(--brand); animation: tm-pulse 1.2s ease-in-out infinite; }
@keyframes tm-pulse { 50% { opacity: .35; } }
.tm-trace { display: grid; gap: 14px; }
.tm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tm-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.tm-step::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.tm-step:last-child::before { display: none; }
.tm-step-b { display: grid; gap: 6px; min-width: 0; padding-top: 4px; }
.tm-step.failed .tm-step-b { padding: 8px 10px; border-radius: 10px; background: var(--bad-bg); }
.tm-step.stalled .tm-step-b { padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); }
.tm-io { display: grid; gap: 4px; }
.tm-io details { border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel-2); }
.tm-io summary { cursor: pointer; padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--mute); }
.tm-io pre { margin: 0; padding: 4px 10px 10px; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.tm-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--brand); animation: tm-spin .8s linear infinite; }
@keyframes tm-spin { to { transform: rotate(360deg); } }

/* Settings */
.tm-settings { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.tm-settings .card-h h3 { margin: 0; font-size: 15px; flex: 1; }
.tm-settings .tm-danger { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--bad) 25%, var(--line)); }
.tm-versions { max-height: 320px; overflow-y: auto; }
.tm-ver { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line-2); }
.tm-ver:first-child { border-top: 0; }
@media (max-width: 860px) { .tm-settings { grid-template-columns: minmax(0, 1fr); } }

/* ── Agent chat ────────────────────────────────────────────────────────── */
.sc-hero h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.sc-hero p { margin: 4px 0 0; }
.sc { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: calc(100vh - 210px); min-height: 520px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; box-shadow: var(--shadow); }
.sc-side { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--panel-2); min-height: 0; }
.sc-side-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.sc-side-empty { padding: 18px 14px; }
.sc-threads { overflow-y: auto; padding: 6px; display: grid; gap: 2px; align-content: start; }
.sc-thread { position: relative; display: grid; gap: 2px; padding: 10px 12px; border-radius: 11px; color: inherit; text-decoration: none !important; }
.sc-thread b { font-size: 14px; padding-right: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-thread:hover { background: var(--sunken); }
.sc-thread.on { background: var(--brand-soft); }
.sc-when { position: absolute; right: 12px; top: 11px; font-size: 11px; color: var(--faint); }
.sc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sc-thread-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sc-thread-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); min-height: 52px; }
.sc-back { display: none; }
.sc-msgs { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 16px; background: var(--panel-2); }
.sc-empty { margin: auto; text-align: center; }
.sc-row { display: flex; gap: 10px; align-items: flex-start; max-width: 760px; }
.sc-row.me { align-self: flex-end; justify-content: flex-end; }
.sc-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 16px; }
.sc-av.lg { width: 42px; height: 42px; border-radius: 12px; font-size: 21px; }
.sc-col { display: grid; gap: 4px; min-width: 0; }
.sc-who { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.sc-bubble { padding: 10px 14px; border-radius: 16px; border-top-left-radius: 6px; background: var(--panel); border: 1px solid var(--line); line-height: 1.55; word-wrap: break-word; display: grid; gap: 10px; min-width: 0; }
.sc-bubble.me { background: var(--brand); color: #fff; border: 0; border-radius: 16px; border-bottom-right-radius: 6px; white-space: pre-wrap; display: block; }
.sc-bubble.failed { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.sc-bubble.open { background: var(--panel); }
.sc-rich a { word-break: break-all; }
.sc-working { display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: 13.5px; }
.sc-working a { margin-left: auto; font-weight: 600; }
.sc-dots { display: inline-flex; gap: 3px; }
.sc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .35; animation: sc-dot 1.2s ease-in-out infinite; }
.sc-dots i:nth-child(2) { animation-delay: .15s; } .sc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sc-dot { 30% { opacity: 1; transform: translateY(-2px); } }
.sc-mention { display: inline; padding: 0 4px; border-radius: 6px; background: rgba(255,255,255,.22); font-weight: 600; position: relative; cursor: help; }
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; width: max-content; max-width: 260px; padding: 7px 10px; border-radius: 9px; background: #18181b; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: normal; box-shadow: var(--shadow-lg); pointer-events: none; }
.sc-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-act { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; background: var(--sunken); border: 1px solid var(--line); color: var(--ink-2); }
.sc-act em { font-style: normal; color: var(--warn); }
.sc-act.failed { background: var(--bad-bg); color: var(--bad); }
.sc-act.pending_approval, .sc-act.waiting { background: var(--warn-bg); }
.sc-sources { display: grid; gap: 3px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12.5px; }
.sc-sources a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-foot { display: flex; align-items: center; gap: 4px; padding-left: 2px; }
.sc-foot .small { margin-left: 8px; }
.sc-thumb { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--faint); cursor: pointer; transition: all .15s; }
.sc-thumb:hover { background: var(--sunken); color: var(--ink-2); }
.sc-thumb.on { color: var(--good); background: var(--good-bg); }
.sc-thumb.down.on { color: var(--bad); background: var(--bad-bg); }
.sc-fb { display: flex; gap: 6px; align-items: center; }
.sc-fb .input { flex: 1; min-width: 0; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--brand-ink); cursor: pointer; font: inherit; }
.sc-compose { position: relative; border-top: 1px solid var(--line); padding: 10px 12px 8px; background: var(--panel); display: grid; gap: 6px; }
.sc-input { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 6px 6px 6px 12px; background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.sc-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.sc-input textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: transparent; font: inherit; line-height: 1.5; padding: 6px 0; max-height: 180px; field-sizing: content; min-height: 24px; color: var(--ink); }
.sc-send { border-radius: 10px; padding: 8px 10px; }
.sc-hint { padding-left: 4px; }
.sc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: 12.5px; font-weight: 600; }
.sc-pop { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); z-index: 25; max-height: 300px; overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 2px; animation: pop .14s var(--ease); }
.sc-pop button { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.sc-pop button.on { background: var(--brand-soft); }
.sc-pop-t { flex: 1; min-width: 0; display: grid; }
.sc-pop-t small { color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-welcome { flex: 1; overflow-y: auto; padding: 32px 24px; display: grid; gap: 12px; align-content: start; justify-items: center; background: var(--panel-2); }
.sc-welcome-h { text-align: center; display: grid; gap: 6px; justify-items: center; max-width: 460px; margin-bottom: 10px; }
.sc-welcome-h h2 { margin: 6px 0 0; font-size: 20px; }
.sc-welcome-h p { margin: 0; }
.sc-orb { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 45%, var(--brand-2, #06b6d4))); box-shadow: 0 12px 28px -14px var(--brand); }
.sc-sec { width: 100%; max-width: 720px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; }
.sc-note { max-width: 720px; width: 100%; }
.sc-picks { width: 100%; max-width: 720px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sc-pick { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, transform .1s; }
.sc-pick:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.sc-pick > span:last-child { display: grid; gap: 2px; min-width: 0; }
.sc-pick small { color: var(--mute); font-size: 12.5px; line-height: 1.4; }
@media (max-width: 860px) {
  .sc { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 180px); min-height: 460px; }
  .sc.has-thread .sc-side { display: none; }
  .sc:not(.has-thread) .sc-main { display: none; }
  .sc:not(.has-thread) .sc-side { border-right: 0; }
  .sc-back { display: inline-flex; }
  .sc-msgs { padding: 14px 12px; }
  .sc-row { max-width: 100%; }
  .sc-hint { display: none; }
}
@media (max-width: 480px) { .sc-av { width: 28px; height: 28px; font-size: 14px; } .sc-bubble { padding: 9px 12px; } }

/* ── Evals ─────────────────────────────────────────────────────────────── */
.ev-card { display: grid; gap: 6px; padding: 16px; color: inherit; text-decoration: none !important; }
.ev-card:hover { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); box-shadow: var(--shadow); }
.ev-score { display: inline-grid; place-items: center; min-width: 42px; height: 28px; padding: 0 8px; border-radius: 9px; font-weight: 700; font-size: 14px; background: var(--sunken); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ev-score.big { min-width: 64px; height: 48px; font-size: 22px; border-radius: 14px; }
.ev-score.good { background: var(--good-bg); color: var(--good); } .ev-score.warn { background: var(--warn-bg); color: var(--warn); } .ev-score.bad { background: var(--bad-bg); color: var(--bad); }
.ev-suite-name { font-size: 17px; }
.ev-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.ev-layout .card-h h3 { margin: 0; font-size: 15px; }
.ev-scns { border: 0; margin: 0; padding: 0; min-width: 0; }
.ev-scn { border-top: 1px solid var(--line-2); }
.ev-scn:first-child { border-top: 0; }
.ev-scn summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none; }
.ev-scn summary::-webkit-details-marker { display: none; }
.ev-scn[open] summary { background: var(--panel-2); }
.ev-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--brand-soft); color: var(--brand-ink); font-size: 12px; font-weight: 700; flex: none; }
.ev-scn-b { padding: 4px 16px 16px; }
.ev-golden { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--line-2); }
.ev-hist { width: 100%; height: 130px; display: block; }
.ev-grid-l { stroke: var(--line-2); }
.ev-ax { font-size: 9px; fill: var(--faint); }
.ev-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.ev-pt { fill: var(--panel); stroke: var(--brand); stroke-width: 2; }
.ev-pt.good { stroke: var(--good); } .ev-pt.bad { stroke: var(--bad); } .ev-pt.warn { stroke: var(--warn); }
.ev-hist-l { display: flex; justify-content: space-between; gap: 4px; overflow: hidden; }
.ev-runs { display: grid; }
.ev-run { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border: 0; border-top: 1px solid var(--line-2); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ev-run:first-child { border-top: 0; }
.ev-run:hover, .ev-run.on { background: var(--panel-2); }
.ev-summary { display: flex; gap: 14px; align-items: center; }
.ev-res { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ev-res summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.ev-res summary::-webkit-details-marker { display: none; }
.ev-res-b { display: grid; gap: 10px; padding: 4px 14px 14px; }
.ev-reasons { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; }
.ev-transcript { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-2); max-height: 320px; overflow-y: auto; }
.ev-t { display: grid; gap: 1px; }
.ev-t span { font-size: 11px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.ev-t p { margin: 0; white-space: pre-wrap; font-size: 13.5px; }
.ev-t.assistant span { color: var(--brand-ink); }
.ev-cost { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ev-cost th, .ev-cost td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line-2); }
.ev-cost th { color: var(--mute); font-weight: 600; }
.ev-cost td:nth-child(n+2), .ev-cost th:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }
.ev-cost .tot td { font-weight: 700; border-bottom: 0; }
.ev-ab-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.ev-ab-side { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 14px; border-radius: 14px; border: 1px solid var(--line); }
.ev-ab-side.win { border-color: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.ev-vs { font-weight: 700; color: var(--mute); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.ev-ab-rows { display: grid; gap: 10px; }
.ev-ab-row { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr) 44px; gap: 12px; align-items: center; }
.ev-ab-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-bars { display: grid; gap: 3px; }
.ev-bar { display: block; min-width: 26px; height: 16px; border-radius: 5px; font-size: 10.5px; font-weight: 700; color: #fff; padding: 0 6px; line-height: 16px; text-align: right; }
.ev-bar.a { background: color-mix(in srgb, var(--ink) 40%, transparent); }
.ev-bar.b { background: var(--brand); }
.ev-delta { font-weight: 700; font-size: 13px; text-align: right; }
.ev-stats { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ev-stat { display: grid; gap: 2px; padding: 16px; }
.ev-stat .k { font-size: 12.5px; color: var(--mute); font-weight: 550; }
.ev-stat .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.ev-trend { width: 100%; height: 150px; display: block; }
.ev-trend .up { fill: var(--brand); } .ev-trend .down { fill: var(--bad); opacity: .75; }
.ev-trend .j { fill: none; stroke: var(--good); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.legend .lg-up { background: var(--brand); } .legend .lg-down { background: var(--bad); } .legend .lg-j { background: var(--good); }
.ev-perf .card-h h3 { margin: 0; font-size: 15px; }
.ev-targets { display: grid; }
.ev-target { display: grid; gap: 5px; padding: 12px 16px; border-top: 1px solid var(--line-2); }
.ev-target:first-child { border-top: 0; }
.ev-meter { height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.ev-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 45%, var(--brand-2, #06b6d4))); }
.ev-fb { color: var(--ink-2); }
.ev-connect { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.ev-connect .card-h h3 { margin: 0; font-size: 15px; }
.ev-mcp { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
.ev-mcp-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 45%, var(--brand-2, #06b6d4))); }
.ev-steps { margin: 0; padding-left: 20px; display: grid; gap: 14px; }
.ev-steps li { display: grid; gap: 6px; }
.ev-tabs { margin-top: 2px; }
.ev-snip { position: relative; display: grid; gap: 6px; }
.ev-snip .btn { position: absolute; top: 8px; right: 8px; }
.ev-toollist { display: grid; }
.ev-toollist > div { display: grid; gap: 2px; padding: 10px 16px; border-top: 1px solid var(--line-2); }
.ev-toollist > div:first-child { border-top: 0; }
.ev-toollist code { font-size: 12.5px; }
@media (max-width: 1000px) { .ev-layout, .ev-connect { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ev-stats { grid-template-columns: minmax(0, 1fr); }
  .ev-ab-head { grid-template-columns: minmax(0, 1fr); }
  .ev-ab-row { grid-template-columns: minmax(0, 1fr) 40px; }
  .ev-ab-name { grid-column: 1 / -1; }
  .ev-head .seg { width: 100%; overflow-x: auto; }
}

/* ./mod/hub.css */
/* Client hub: shared by the client dashboard and the agency's client pages. */
.hub-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hub-req { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: inherit; text-decoration: none; }
.hub-req-n { font-weight: 650; color: var(--mute); font-variant-numeric: tabular-nums; min-width: 34px; }
.hub-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.hub-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.hub-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--sunken); font-size: 13.5px; color: var(--ink-2); }
.hub-note svg { flex: none; margin-top: 2px; color: var(--brand); }
.hub-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }

/* Progress steps on a request */
.hub-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hub-step { display: grid; gap: 6px; font-size: 12.5px; color: var(--mute); font-weight: 550; }
.hub-step i { height: 6px; border-radius: 99px; background: var(--sunken); border: 1px solid var(--line); }
.hub-step.on i { background: var(--brand); border-color: transparent; }
.hub-step.now i { background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 35%, transparent)); background-size: 200% 100%; animation: hub-flow 2s linear infinite; }
.hub-step.on span { color: var(--ink); }
@keyframes hub-flow { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .hub-step.now i { animation: none; } }

.hub-rate { display: flex; align-items: center; gap: 4px; font-weight: 550; }
.hub-rate span { margin-right: 6px; }
.hub-star { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--line); cursor: pointer; padding: 2px; transition: transform .12s, color .12s; }
.hub-star:hover { transform: scale(1.15); }
.hub-star.on { color: #f59e0b; }

/* Conversations */
.hub-thread { display: flex; flex-direction: column; }
.hub-msgs { grid-template-columns: minmax(0, 1fr); max-height: 420px; overflow-y: auto; padding: 16px 18px; display: grid; gap: 14px; align-content: start; }
.hub-thread.tall .hub-msgs { max-height: min(60vh, 620px); min-height: 280px; }
.hub-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 82%; }
.hub-msg.mine { margin-left: auto; flex-direction: row-reverse; }
.hub-bubble { background: var(--sunken); border: 1px solid var(--line-2); border-radius: 16px 16px 16px 4px; padding: 9px 13px; font-size: 14px; display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.hub-msg.mine .hub-bubble { background: var(--brand-soft); border-color: transparent; border-radius: 16px 16px 4px 16px; }
.hub-meta { font-size: 12px; color: var(--mute); }
.hub-meta b { color: var(--ink-2); font-weight: 600; }
.hub-compose { border-top: 1px solid var(--line-2); padding: 12px 14px; display: grid; gap: 8px; }
.hub-compose textarea { resize: vertical; min-height: 44px; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; flex: none; }

/* Approvals */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.hub-apr { display: grid; gap: 8px; padding: 16px; color: inherit; text-decoration: none; }
.hub-post { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--sunken); }
.hub-post img { display: block; width: 100%; max-height: 340px; object-fit: cover; border-radius: 10px; margin-top: 8px; }

/* Files */
.hub-drop { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--panel); cursor: pointer; transition: border-color .15s, background .15s; flex-wrap: wrap; }
.hub-drop > div { flex: 1; min-width: 200px; }
.hub-drop.on, .hub-drop:hover { border-color: var(--brand); background: var(--brand-soft); }
.hub-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.hub-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.hub-file-ic { width: 44px; height: 44px; border-radius: 10px; background: var(--sunken); display: grid; place-items: center; color: var(--brand); flex: none; overflow: hidden; }
.hub-file-ic img { width: 100%; height: 100%; object-fit: cover; }

/* Activity feed */
.hub-feed { display: grid; grid-template-columns: minmax(0, 1fr); }
.hub-act { min-width: 0; display: flex; gap: 12px; align-items: center; padding: 11px 18px; color: inherit; text-decoration: none; border-top: 1px solid var(--line-2); }
.hub-act:first-child { border-top: 0; }
a.hub-act[href]:hover { background: var(--sunken); }
.hub-act-t { font-size: 14px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-act-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand-ink); }
.hub-act-ic.k-approval { background: var(--good-bg); color: var(--good); }
.hub-act-ic.k-billing { background: var(--warn-bg); color: var(--warn); }
.hub-act-ic.k-result { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #7c3aed; }

/* Wallet */
.hub-wallet-v { font-size: 30px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hub-bar { height: 8px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.hub-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--accent, var(--brand))); transition: width .4s ease; }
.hub-bar i.low { background: var(--bad); }

/* Access editor */
.hub-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 18px; }
.hub-perm { display: flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 14px; }
.chip.sm { padding: 3px 10px; font-size: 12.5px; }

/* Client dashboard home */
.cd-hello { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cd-hello h2 { margin: 0; font-size: 22px; }
.cd-attn { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cd-attn a { display: flex; gap: 12px; align-items: center; padding: 16px; color: inherit; text-decoration: none; }
.cd-attn .n { font-size: 26px; font-weight: 650; min-width: 34px; font-variant-numeric: tabular-nums; }
.cd-attn .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); flex: none; }
.cd-attn .warn .ic { background: var(--warn-bg); color: var(--warn); }
.cd-attn .bad .ic { background: var(--bad-bg); color: var(--bad); }
.cd-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }

/* Agency: client hub queue */
.aq-row { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line-2); color: inherit; text-decoration: none; }
.aq-row:first-child { border-top: 0; }
.aq-row:hover { background: var(--sunken); }
.aq-client { font-size: 12px; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.needs { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* Snapshots & marketplace */
.snap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.snap-card { display: grid; gap: 10px; padding: 18px; align-content: start; }
.snap-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--brand-soft); }
.snap-sum { display: flex; flex-wrap: wrap; gap: 4px; }
.snap-stages { display: flex; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--mute); }
.snap-stages span::after { content: '→'; margin-left: 4px; opacity: .5; }
.snap-stages span:last-child::after { content: ''; }
.app-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.app-dir .card { padding: 14px; display: grid; gap: 4px; }

@media (max-width: 920px) {
  .hub-detail, .cd-cols { grid-template-columns: 1fr; }
  .hub-msg { max-width: 94%; }
  .hub-files, .hub-perms { grid-template-columns: 1fr; }
}
.aq-main { min-width: 0; }
.aq-main > b { display: block; overflow-wrap: anywhere; }
.aq-main > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .cd-hello > .grow { flex-basis: 100%; }
  .cd-hello > .btn { flex: 1 1 0; justify-content: center; }
  .cd-hello h2 { font-size: 20px; }
}
/* On phones: the item, then the decision / manage panel, then the conversation. */
@media (max-width: 920px) {
  .hub-detail { display: flex; flex-direction: column; gap: 16px; }
  .hub-detail > .hub-main { display: contents; }
  .hub-main > * { order: 1; }
  .hub-detail > .hub-side { order: 2; }
  .hub-main > .hub-conv { order: 3; }
}

/* ---------- Client portal: customised home, payments, AI agents ---------- */
.pt-hero { border-radius: var(--radius, 16px); padding: 28px 26px; color: #fff; background: var(--pt-hero, var(--brand)); background-size: cover; background-position: center; min-height: 128px; display: grid; align-content: end; gap: 6px; }
.pt-hero h2 { margin: 0; font-size: 24px; color: #fff; }
.pt-hero p { margin: 0; max-width: 640px; opacity: .92; }
.pt-announce { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--line-2); font-weight: 500; }
.pt-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-links .chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pt-help { text-align: center; }
.pt-frame { width: 100%; min-height: 70vh; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); }
.pt-stripe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); }
.pt-stripe.on { background: var(--brand-soft); }
.pt-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pt-agent { padding: 16px; display: grid; gap: 10px; align-content: start; }
.pt-agent-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--brand-soft); flex: none; }
.pt-chat { display: flex; flex-direction: column; gap: 8px; height: 320px; overflow-y: auto; padding: 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); }
.pt-bubble { max-width: 82%; padding: 8px 12px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-bubble.customer { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.pt-bubble.agent { align-self: flex-start; background: var(--panel); border: 1px solid var(--line-2); border-bottom-left-radius: 4px; }

/* ---------- Portal customisation (agency) ---------- */
.pc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.pc-note { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-2); }
.pc-sections { display: grid; }
.pc-sec { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line-2); }
.pc-sec:first-child { border-top: 0; }
.pc-sec.off b { color: var(--mute); }
.pc-arrows { display: inline-flex; gap: 2px; }
.pc-arrows .iconbtn { width: 28px; height: 28px; font-size: 14px; }
.pc-link { display: grid; grid-template-columns: 1fr 1.6fr 120px auto auto; gap: 8px; align-items: center; }
.pc-widgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pc-color { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
.pc-bar { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 0; background: var(--bg); z-index: 2; }
.pc-preview { position: sticky; top: 16px; }
.pv { --pv-accent: var(--brand-2, var(--brand)); display: grid; grid-template-columns: 96px 1fr; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; background: var(--panel); font-size: 11px; min-height: 360px; }
.pc-preview[style*="--pv-accent"] .pv { --pv-accent: inherit; }
.pv-side { background: var(--panel-2); border-right: 1px solid var(--line-2); padding: 8px 6px; display: grid; gap: 3px; align-content: start; }
.pv-nav { padding: 5px 7px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mute); }
.pv-nav.on { background: var(--pv-accent); color: var(--pv-ink, #fff); }
.pv-main { padding: 10px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.pv-hero, .pv-hello { border-radius: 10px; padding: 12px; display: grid; gap: 3px; background-size: cover; background-position: center; }
.pv-hero { color: #fff; min-height: 64px; align-content: end; }
.pv-hello { border: 1px solid var(--line-2); }
.pv-hero b, .pv-hello b { font-size: 13px; }
.pv-hero span, .pv-hello span { opacity: .85; overflow-wrap: anywhere; }
.pv-ann { padding: 6px 8px; border-radius: 8px; background: var(--brand-soft); overflow-wrap: anywhere; }
.pv-links { display: flex; flex-wrap: wrap; gap: 4px; }
.pv-links span { padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line-2); }
.pv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pv-kpis i { height: 26px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line-2); }
.pv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pv-cols > div { display: grid; gap: 6px; align-content: start; }
.pv-block { border: 1px solid var(--line-2); border-radius: 8px; padding: 6px; display: grid; gap: 4px; }
.pv-block i { display: block; height: 6px; border-radius: 3px; background: var(--panel-2); }
.pv-block i + i { width: 70%; }
.pv-team { border-color: var(--pv-accent); }
.pv-foot { color: var(--mute); text-align: center; }
@media (max-width: 1100px) {
  .pc-wrap { grid-template-columns: 1fr; }
  .pc-preview { position: static; order: -1; }
}
@media (max-width: 700px) {
  .pc-link { grid-template-columns: 1fr 1fr; }
  .pc-link input:nth-child(2) { grid-column: span 2; }
}

/* ./mod/widget.css */
/* Website chat & voice widget: settings page live preview, and the
   platform site's fallback contact form. */

/* ── Settings page ─────────────────────────────────────────────────────── */
.wg-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.wg-opt { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.wg-opt.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); color: var(--brand); }
.wg-opt:disabled { opacity: .55; cursor: default; }
.wg-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .wg-mode { grid-template-columns: minmax(0, 1fr); } }
.wg-mode button { text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 12px; padding: 12px 14px; font: inherit; cursor: pointer; display: grid; gap: 4px; }
.wg-mode button b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wg-mode button small { color: var(--mute); font-size: 12px; line-height: 1.4; }
.wg-mode button.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.wg-img { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wg-thumb { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--sunken); display: grid; place-items: center; font-size: 20px; overflow: hidden; }
.wg-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .wg-colors { grid-template-columns: minmax(0, 1fr); } }
.wg-color { display: flex; align-items: center; gap: 8px; }
.wg-color input[type=color] { width: 40px; height: 36px; border: 0; background: none; padding: 0; cursor: pointer; flex: 0 0 auto; }
.wg-range { display: flex; align-items: center; gap: 10px; }
.wg-range input { flex: 1; accent-color: var(--brand); }
.wg-range output { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--mute); }
.wg-checks { display: flex; flex-wrap: wrap; gap: 14px; }
.wg-checks label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.wg-note { font-size: 13px; color: var(--mute); display: flex; gap: 8px; align-items: flex-start; }
.wg-save { z-index: 5; display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(15, 23, 42, .12); }
.wg-save.on { position: sticky; bottom: 12px; }
.wg-dev { display: grid; gap: 10px; border-top: 1px solid var(--line-2, var(--line)); padding-top: 14px; }

/* ── Live preview (mirrors the real widget) ───────────────────────────── */
.wgp-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.wgp-stage { position: relative; height: 600px; border-radius: 16px; border: 1px solid var(--line); overflow: hidden; background: repeating-linear-gradient(135deg, var(--sunken) 0 14px, var(--panel) 14px 28px); }
.wgp-stage.phone { width: 340px; max-width: 100%; margin: 0 auto; height: 640px; border-radius: 34px; border-width: 8px; border-color: #0f172a; }
.wgp {
  --tb: #fff; --ts: #f8fafc; --ti: #0f172a; --tm: #64748b; --tl: #e2e8f0; --tc: #fff;
  font-family: Poppins, system-ui, sans-serif; position: absolute; inset: 0;
}
.wgp.dark { --tb: #0f172a; --ts: #0b1220; --ti: #e2e8f0; --tm: #94a3b8; --tl: #1e293b; --tc: #1e293b; }
.wgp-b { position: absolute; height: 54px; min-width: 54px; border: 0; border-radius: 27px; background: var(--tp); color: #fff; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px 0 14px; font: inherit; font-weight: 600; font-size: 14px; box-shadow: 0 10px 28px rgba(0, 0, 0, .22); cursor: pointer; }
.wgp-b.round { padding: 0; width: 54px; }
.wgp-b img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.wgp-b.round img { width: 54px; height: 54px; }
.wgp-b .e { font-size: 24px; line-height: 1; }
.wgp-t { position: absolute; max-width: 230px; background: var(--tc); color: var(--ti); border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); font-size: 13px; line-height: 1.4; }
.wgp-p { position: absolute; width: min(330px, calc(100% - 24px)); height: calc(100% - 100px); max-height: 500px; background: var(--tb); color: var(--ti); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); overflow: hidden; display: flex; flex-direction: column; line-height: 1.45; }
.wgp-h { background: var(--th); color: #fff; padding: 12px 14px; display: flex; gap: 10px; align-items: center; }
.wgp-h b { display: block; font-size: 1.05em; } .wgp-h small { opacity: .85; font-size: .82em; }
.wgp-h .grow { min-width: 0; flex: 1; }
.wgp-av { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; font-weight: 700; overflow: hidden; font-size: 18px; }
.wgp-av img { width: 100%; height: 100%; object-fit: cover; }
.wgp-hb { border: 0; background: rgba(255, 255, 255, .18); color: #fff; height: 28px; min-width: 28px; border-radius: 14px; display: grid; place-items: center; cursor: pointer; }
.wgp-off { background: #fef3c7; color: #78350f; font-size: .82em; padding: 7px 12px; }
.wgp-m { flex: 1; background: var(--ts); padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.wgp-m > div { max-width: 84%; padding: 8px 12px; white-space: pre-wrap; }
.wgp-m .who { align-self: flex-start; font-size: .72em; color: var(--tm); padding: 0 4px; margin-bottom: -6px; }
.wgp-m .ai { align-self: flex-start; background: var(--tc); border: 1px solid var(--tl); border-bottom-left-radius: 4px !important; }
.wgp-m .me { align-self: flex-end; background: var(--tu); color: #fff; border-bottom-right-radius: 4px !important; }
.wgp-q { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; background: var(--ts); }
.wgp-q span { border: 1px solid var(--tp); color: var(--tp); background: var(--tc); border-radius: 99px; padding: 4px 10px; font-size: .82em; font-weight: 600; }
.wgp-f { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-top: 1px solid var(--tl); color: var(--tm); }
.wgp-f .grow { flex: 1; }
.wgp-f b { color: var(--tp); }
.wgp-talk { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; background: var(--ts); color: var(--tp); padding: 5px 10px; font-size: .8em; font-weight: 600; }
.wgp-d { display: grid; gap: 7px; padding: 12px; background: var(--ts); border-top: 1px solid var(--tl); }
.wgp-d span { display: block; border: 1px solid var(--tl); border-radius: 9px; padding: 8px 10px; background: var(--tc); color: var(--tm); font-size: .9em; }
.wgp-d b { display: block; text-align: center; border-radius: 9px; padding: 9px; background: var(--tp); color: #fff; }
.wgp-v { flex: 1; background: var(--ts); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 14px 0; }
.wgp-orb { width: 84px; height: 84px; border-radius: 50%; background: var(--tp); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 10px color-mix(in srgb, var(--tp) 18%, transparent), 0 10px 30px rgba(0, 0, 0, .2); }
.wgp-vs { font-weight: 600; }
.wgp-vi { color: var(--tm); font-style: italic; font-size: .88em; }
.wgp-tr { width: 100%; flex: 1; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.wgp-tr div { font-size: .86em; padding: 6px 10px; border-radius: 11px; max-width: 88%; }
.wgp-tr .me { align-self: flex-end; background: var(--tu); color: #fff; }
.wgp-tr .ai { align-self: flex-start; background: var(--tc); border: 1px solid var(--tl); }
.wgp-end { border-radius: 99px; background: #dc2626; color: #fff; font-weight: 700; padding: 7px 22px; margin-bottom: 8px; font-size: .9em; }
.wgp-vf { width: calc(100% + 28px); margin: 0 -14px; border-top: 1px solid var(--tl); padding: 10px 14px; color: var(--tm); font-size: .9em; display: flex; justify-content: space-between; background: var(--tb); }
.wgp-x { font-size: 10px; color: var(--tm); text-align: center; padding: 4px; background: var(--tb); }
.wgp-hidden { position: absolute; inset: auto 16px 16px 16px; text-align: center; font-size: 13px; color: var(--mute); background: var(--panel); border: 1px dashed var(--line); border-radius: 12px; padding: 10px; }

/* ── Platform site: fallback contact form ─────────────────────────────── */
.pw-btn { position: fixed; right: 20px; bottom: 20px; z-index: 60; height: 56px; padding: 0 20px 0 16px; border: 0; border-radius: 28px; background: #0d9488; color: #fff; font: 600 15px/1 Poppins, system-ui, sans-serif; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); cursor: pointer; }
.pw-btn:focus-visible { outline: 3px solid #0d9488; outline-offset: 3px; }
.pw-panel { position: fixed; right: 20px; bottom: 88px; z-index: 61; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 108px); overflow: auto; background: #fff; color: #0f172a; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); overflow: hidden; font-family: Poppins, system-ui, sans-serif; }
.pw-head { background: linear-gradient(135deg, #0d9488, #2563eb); color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 10px; }
.pw-head b { display: block; } .pw-head small { opacity: .85; }
.pw-head button { margin-left: auto; border: 0; background: rgba(255, 255, 255, .18); color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 18px; }
.pw-form { display: grid; gap: 10px; padding: 16px 18px 18px; }
.pw-form input, .pw-form textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px; font: inherit; color: #0f172a; background: #fff; }
.pw-form textarea { min-height: 96px; resize: vertical; }
.pw-form button { border: 0; border-radius: 10px; padding: 12px; background: #0d9488; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.pw-form button:disabled { opacity: .6; }
.pw-ok { padding: 18px; font-weight: 600; }
.pw-err { color: #b91c1c; font-size: 13px; }
.pw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 480px) { .pw-panel { right: 0; bottom: 0; width: 100vw; border-radius: 18px 18px 0 0; } }

/* ./mod/domains.css */
/* Custom domains: DNS records table, live status, provider tips and
   automatic setup (ui/domains.js, ui/pages/domains.js, agency Branding). */
.dm-field { gap: 8px; }
.dm-field .dm-dns { margin-top: 10px; }
.dm-name { font-size: 16px; overflow-wrap: anywhere; }
.dm-home { max-width: 420px; }
.dm-live { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--good-bg); color: var(--ink); }
.dm-warn { color: var(--warn); }

.dm-table { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--panel); }
.dm-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.6fr) 150px; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); font-size: 13px; }
.dm-row:first-child { border-top: 0; }
.dm-head { background: var(--panel-2); font-size: 12px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .03em; }
.dm-val { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dm-val .mono { overflow-wrap: anywhere; min-width: 0; }
.dm-val .btn { flex: none; }
.dm-note { grid-column: 1 / -1; color: var(--ink-2); margin-top: -4px; }
.dm-https { background: var(--panel-2); }
.dm-https .dm-span2 { grid-column: span 2; }

.dm-tips { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--panel); }
.dm-tips summary { cursor: pointer; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.dm-tips .tabs { margin: 12px 0 8px; }
.dm-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }

.dm-auto { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius-sm); border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--line)); background: color-mix(in srgb, var(--brand) 4%, var(--panel)); }
.dm-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--panel); }
.dm-seg button { border: 0; background: none; padding: 5px 12px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 550; color: var(--mute); cursor: pointer; }
.dm-seg button.on { background: var(--brand); color: #fff; }
.dm-plan { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line); }
.dm-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.dm-plan li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.dm-act { font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; background: var(--sunken); color: var(--ink-2); }
.dm-create .dm-act { background: var(--good-bg); color: var(--good); }
.dm-update .dm-act { background: var(--warn-bg); color: var(--warn); }
.dm-remove .dm-act { background: var(--bad-bg); color: var(--bad); }

@media (max-width: 720px) {
  .dm-head { display: none; }
  .dm-row { grid-template-columns: 1fr; gap: 4px; }
  .dm-row > [data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .03em; }
  .dm-https .dm-span2 { grid-column: auto; }
}

/* ./mod/funnels.css */
/* Funnels module styles (pages/funnels.js) */
.fn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.fn-card { display: block; padding: 0; text-align: left; font-family: inherit; color: inherit; cursor: pointer; }
.fn-card:hover { border-color: var(--brand); }
.fn-mini { display: flex; flex-wrap: wrap; gap: 4px; }
.fn-mini span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--brand-softer); color: var(--brand-ink); }

.fn-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.fn-tpl { display: grid; gap: 4px; align-content: start; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 14px; cursor: pointer; font-family: inherit; color: var(--ink); }
.fn-tpl:hover { border-color: var(--brand); }
.fn-tpl.on { border-color: var(--brand); background: var(--brand-softer); box-shadow: 0 0 0 1px var(--brand) inset; }
.fn-tpl > span { font-size: 12.5px; color: var(--mute); }
.fn-tpl-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; }
.fn-tpl-steps em { font-style: normal; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 99px; padding: 2px 8px; }
.fn-tpl-steps i { font-style: normal; color: var(--mute); }

.fn-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fn-step { padding: 0; }
.fn-step.open { border-color: var(--brand); }
.fn-step-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.fn-handle { cursor: grab; color: var(--mute); font-size: 16px; user-select: none; }
.fn-num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line-2); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.fn-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-softer); color: var(--brand-ink); flex: 0 0 auto; }
.fn-settings { border-top: 1px solid var(--line); padding: 14px; background: var(--panel-2); border-radius: 0 0 var(--radius) var(--radius); }
.fn-drop { height: 4px; border-radius: 4px; background: var(--brand); }
.fn-hint { margin-top: 6px; }
.fn-crumb b { color: var(--ink); }
.fn-qr { width: 240px; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; background: #fff; padding: 8px; }

.fn-chart { display: grid; gap: 14px; }
.fn-chart-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr minmax(160px, 240px); gap: 14px; align-items: center; }
.fn-chart-label { display: grid; min-width: 0; }
.fn-tabs { overflow-y: hidden; }
.fn-bar-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fn-track { flex: 1; height: 30px; background: var(--panel-2); border-radius: 10px; overflow: hidden; }
.fn-bar { height: 100%; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #fff)); border-radius: 10px; transition: width .4s var(--ease); }
.fn-bar-v { min-width: 36px; font-size: 14px; }
.fn-chart-meta { display: grid; gap: 2px; }
@media (max-width: 760px) {
  .fn-chart-row { grid-template-columns: 1fr; gap: 6px; }
  .fn-step-row { flex-wrap: wrap; }
  .fn-step-row .row.nowrap { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .fn-bar { transition: none; } }

/* ./mod/access.css */
/* Identity, API and email: sign-in links (ml-*), API key scopes (ak-*),
   API docs (apidocs*), Email settings (es-*). */

/* ── Sign-in links ─────────────────────────────────────────────────────── */
.ml-link { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--sunken); font-size: 13px; overflow-wrap: anywhere; user-select: all; }

/* ── API key scopes ────────────────────────────────────────────────────── */
.ak-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; max-height: 320px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.ak-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ak-row select { width: 130px; flex: none; }

/* ── API docs ──────────────────────────────────────────────────────────── */
.apidocs-q { max-width: 260px; }
.apidocs-list { display: grid; }
.apidocs-op + .apidocs-op { border-top: 1px solid var(--line-2); }
.apidocs-row { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 18px; cursor: pointer; font-family: inherit; }
.apidocs-row:hover, .apidocs-op.open .apidocs-row { background: var(--brand-softer); }
.apidocs-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.apidocs-row code { font-size: 13px; overflow-wrap: anywhere; min-width: 0; }
.apidocs-body { padding: 4px 18px 16px; }
.wh-method.put { background: var(--warn-bg); color: var(--warn); }
.wh-method.delete { background: var(--bad-bg); color: var(--bad); }

/* ── Email settings ────────────────────────────────────────────────────── */
.es-conn { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.es-conn.off { background: var(--warn-bg); }
.es-levels { display: flex; gap: 6px; }
.es-switch { gap: 10px; cursor: pointer; }
.es-sig { display: grid; gap: 6px; }
.es-tools { display: flex; align-items: center; gap: 4px; }
.es-tools .btn.on { background: var(--brand-soft); color: var(--brand-ink); }
.es-edit { min-height: 120px; height: auto; padding: 10px 12px; line-height: 1.55; overflow-wrap: anywhere; white-space: normal; }
.es-edit:empty::before { content: attr(data-placeholder); color: var(--faint); white-space: pre-line; pointer-events: none; }
.es-edit a { color: var(--brand-ink); }
.es-code { font-size: 12px; }
.es-records td { vertical-align: top; }
.es-val { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.es-val code { flex: 1; min-width: 120px; max-width: 360px; padding: 4px 8px; border-radius: 6px; background: var(--sunken); font-size: 12px; overflow-wrap: anywhere; }
.es-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 120px; margin-bottom: 8px; }
.es-bar { display: flex; flex-direction: column-reverse; height: 100%; border-radius: 6px; background: var(--sunken); overflow: hidden; }
.es-bar i { display: block; width: 100%; }
.es-bar .s { background: var(--brand); }
.es-bar .x { background: var(--faint); }
.es-bar .f { background: var(--bad); }
.bad-t { color: var(--bad); }

@media (max-width: 640px) {
  .apidocs-row { padding: 10px 14px; gap: 8px; }
  .apidocs-q { max-width: none; width: 100%; }
  .es-levels { display: none; }
  .es-bars { gap: 3px; }
}

/* ./mod/bulk.css */
/* Bulk actions on long lists (ui/datatable.js: BulkBar, SelectBox, HeadBox),
   campaign template gallery and list purposes. */
.bulk-bar { position: sticky; top: 8px; z-index: 20; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 10px;
  border-radius: 12px; background: var(--ink); color: var(--panel); box-shadow: var(--shadow-lg); font-family: Poppins, system-ui, sans-serif; }
.bulk-bar .btn { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--panel) 30%, transparent); }
.bulk-bar .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--panel) 12%, transparent); }
.bulk-bar .btn.bulk-danger { border-color: color-mix(in srgb, #f87171 60%, transparent); color: #fecaca; }
.bulk-bar .btn.bulk-danger:hover:not(:disabled) { background: color-mix(in srgb, #f87171 18%, transparent); }
.bulk-link { color: inherit; text-decoration: underline; cursor: pointer; background: none; border: 0; font: inherit; padding: 4px 2px; }
.bulk-link:disabled { opacity: .5; cursor: default; }
.bulk-pick { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bulk-pick .input { width: auto; min-width: 160px; background: var(--panel); color: var(--ink); }
.bulk-progress { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }
.bulk-progress i { display: inline-block; width: 120px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--panel) 25%, transparent); overflow: hidden; }
.bulk-progress i b { display: block; height: 100%; background: var(--brand); transition: width .2s var(--ease, ease); }
.bulk-check { display: inline-grid; place-items: center; cursor: pointer; min-width: 24px; min-height: 24px; }
.bulk-check input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; margin: 0; }
.bulk-col { width: 40px; text-align: center; }
tr.bulk-on > td { background: var(--brand-softer); }
@media (pointer: coarse) { .bulk-check { min-width: 44px; min-height: 44px; } }
@media (max-width: 640px) { .bulk-bar { top: 4px; padding: 8px 10px; } .bulk-progress i { width: 70px; } }

/* A checkbox in the corner of a card (products, reviews, lists). */
.bulk-card { position: relative; }
.bulk-card > .bulk-check.corner { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--panel); border-radius: 8px; box-shadow: var(--shadow-sm); }
.bulk-card.bulk-on { outline: 2px solid var(--brand); outline-offset: -2px; }
.bulk-selectall { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }

/* Template gallery */
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tg-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); text-align: left; cursor: pointer; font: inherit; color: inherit; min-height: 150px; }
.tg-card:hover, .tg-card:focus-visible { border-color: var(--brand); box-shadow: var(--shadow); }
.tg-card .tg-snip { font-size: 13px; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.tg-frame { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.tg-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.tg-way { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.tg-way:hover { border-color: var(--brand); }
.tg-way b { display: block; }
.tg-pick { display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.tg-pick button { text-align: left; }

/* List purposes */
.list-purpose { font-size: 11px; text-transform: none; }
@media (max-width: 640px) { .tg-frame { height: 420px; } .tg-grid { grid-template-columns: 1fr; } }

/* ./mod/saas.css */
/* Account export / import (pages/exportimport.js) and SaaS plans (pages/saas.js). */
.xi-areas { display: flex; flex-wrap: wrap; gap: 6px; }
.xi-code { font-size: 18px; font-weight: 600; letter-spacing: .04em; }
.xi-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; border: 2px dashed var(--line, #e2e8f0); border-radius: 16px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.xi-drop:hover { border-color: var(--primary, #0d9488); background: var(--soft, rgba(13, 148, 136, .04)); }
.xi-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.xi-drop:focus-within { outline: 2px solid var(--primary, #0d9488); outline-offset: 2px; }
.xi-src { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--soft, #f8fafc); }
.xi-preview td, .xi-preview th { padding: 8px 10px; }
.xi-preview .xi-off td { opacity: .45; }
.xi-done { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: rgba(16, 185, 129, .1); }
.xi-excluded { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

.saas .grid > .card, .xi .grid > .card { min-width: 0; }
.saas-embed { flex-wrap: nowrap; min-width: 0; }
.saas-embed .saas-code { flex: 1 1 0; min-width: 0; }
.saas-code { display: block; font-size: 12px; padding: 10px; border-radius: 10px; background: var(--soft, #f8fafc); overflow-x: auto; white-space: nowrap; max-width: 100%; }
.saas-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.saas-plan { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.saas-plan.featured { box-shadow: 0 0 0 2px var(--primary, #0d9488); }
.saas-plan.off { opacity: .6; }
.saas-price { font-size: 26px; font-weight: 700; }
.saas-price small { font-size: 13px; font-weight: 500; color: var(--muted, #64748b); }
.saas-chips { gap: 6px; flex-wrap: wrap; }
.saas-editor .field > small { display: block; margin-top: 4px; }
@media (max-width: 640px) {
  .saas-plans { grid-template-columns: 1fr; }
  .xi-excluded { grid-template-columns: 1fr; }
}

/* ./mod/payments.css */
/* Payments hub (ui/pages/payments.js) and branded payment links (ui/pages/paylinks.js). */
.pay-stripe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); }
.pay-stripe.on { background: var(--good-bg); border-color: transparent; }
.pay-stripe.on .ico { color: var(--good); }
.pay-stripe.warn { background: var(--warn-bg); border-color: transparent; }
.pay-stripe.warn .ico { color: var(--warn); }
.pay-table td { vertical-align: middle; }
.pay-table tr.pay-out td.tnum b { color: var(--bad); }
.pay-table tr.pay-none td.tnum b { color: var(--mute); font-weight: 550; }

/* Payment link editor: fields on the left, live preview on the right. */
.pl-edit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.pl-preview { position: sticky; top: 0; }
.pl-preview-k { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pl-phone { border: 1px solid var(--line-2); border-radius: 22px; background: var(--sunken); overflow: hidden; font-size: 13px; }
.pl-pv-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--panel); border-bottom: 1px solid var(--line-2); min-width: 0; }
.pl-pv-logo { width: 28px; height: 28px; border-radius: 8px; background: var(--plc); color: #fff; display: grid; place-items: center; font-weight: 700; overflow: hidden; flex: none; }
.pl-pv-logo img { width: 100%; height: 100%; object-fit: cover; }
.pl-pv-cover { height: 90px; background: center / cover no-repeat; }
.pl-pv-card { margin: 12px; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-2); display: grid; gap: 7px; }
.pl-pv-cover + .pl-pv-card { margin-top: -26px; position: relative; }
.pl-pv-title { font-weight: 650; font-size: 16px; line-height: 1.25; }
.pl-pv-amt { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.pl-pv-pre { white-space: pre-wrap; margin: 0; }
.pl-pv-biz { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--sunken); color: var(--ink-2); font-size: 12px; }
.pl-pv-in { border: 1px solid var(--line-2); border-radius: 9px; padding: 7px 10px; color: var(--mute); font-size: 12px; }
.pl-pv-terms { max-height: 64px; overflow: hidden; white-space: pre-wrap; font-size: 11.5px; color: var(--mute); border: 1px solid var(--line-2); border-radius: 9px; padding: 6px 8px; }
.pl-pv-box { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--mute); border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.pl-pv-btn { background: var(--plc); color: #fff; border-radius: 10px; padding: 10px; text-align: center; font-weight: 600; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-thumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line-2); background: var(--sunken); }
.pl-thumb.wide { width: 88px; }
.pl-color { width: 42px; height: 38px; padding: 2px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); cursor: pointer; flex: none; }
.pl-details { display: grid; gap: 8px; }
.pl-detail { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 34px; }
@media (max-width: 860px) {
  .pl-edit { grid-template-columns: minmax(0, 1fr); }
  .pl-preview { position: static; max-width: 360px; }
}
@media (max-width: 520px) { .pl-detail { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* Sidebar: top-level links (Home, Messages, Prospecting…) keep their height when
   the menu is taller than the screen (polish.css gives links overflow:hidden,
   which lets grid rows squash them). */
.side-scroll { grid-auto-rows: max-content; }

/* ./mod/assistant.css */
/* AI assistant: side panel (shell.js AIDock), full page and the
   "Train on my website" card (pages/assistant.js). Uses the app's tokens,
   so light and dark themes follow automatically. */

/* Side panel: docked to the right, full height under the top bar. */
.ai-panel.as-dock { top: calc(76px + var(--safe-t, 0px)); bottom: calc(16px + var(--safe-b, 0px)); right: 16px; height: auto; width: min(440px, calc(100vw - 32px)); }
.ai-panel.as-dock .ai-head { padding: 12px 12px 12px 16px; }
@media (max-width: 860px) { .ai-panel.as-dock { top: calc(8px + var(--safe-t, 0px)); left: 8px; right: 8px; bottom: calc(8px + var(--safe-b, 0px)); width: auto; } }

/* The chat */
.as-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--panel-2); }
.as-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.as-hello { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.as-hello p { margin: 0 0 6px; line-height: 1.5; }
.as-msg { max-width: 92%; padding: 9px 13px; border-radius: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.as-msg.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 5px; white-space: pre-wrap; }
.as-msg.bot { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 5px; display: flex; flex-direction: column; gap: 8px; }
.as-msg.bot.live { min-width: 180px; }
.as-text { white-space: pre-wrap; }
.as-time { font-size: 11px; color: var(--faint); }
.as-thinking { display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: 13px; }

/* Steps, as they happen */
.as-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.as-step { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; animation: as-in .22s var(--ease); }
.as-step-ico { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; background: var(--sunken); color: var(--mute); }
.as-step-ico .spinner { width: 12px; height: 12px; border-width: 2px; color: var(--brand); }
.as-step.ok .as-step-ico { background: var(--good-bg); color: var(--good); }
.as-step.ask .as-step-ico { background: var(--warn-bg); color: var(--warn); }
.as-step.bad .as-step-ico { background: var(--bad-bg); color: var(--bad); }
.as-step.skip { opacity: .7; }
.as-step-b { display: flex; flex-direction: column; min-width: 0; }
.as-step-b b { font-weight: 600; }
.as-step-s { color: var(--ink-2); }
.as-step.bad .as-step-s { color: var(--bad); }
@keyframes as-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .as-step { animation: none; } }

/* Confirmation card */
.as-confirm { border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); background: var(--warn-bg); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.as-confirm p { margin: 0; color: var(--ink); }
.as-confirm-h { display: flex; align-items: center; gap: 6px; color: var(--warn); }
.as-confirm-h b { color: var(--ink); font-weight: 600; }
.as-confirm.done { flex-direction: row; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; background: var(--sunken); border-color: var(--line); color: var(--mute); }
.as-confirm.done.approved { color: var(--good); }

.as-links { display: flex; flex-wrap: wrap; gap: 6px; }
.as-links .chip { text-decoration: none; color: var(--brand-ink); padding: 4px 10px; font-size: 12px; }
.as-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.as-suggest .chip { font-size: 12px; padding: 4px 10px; text-align: left; }
.as-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line-2); background: var(--panel); }
.as-form .input { min-width: 0; }
.as-mic.on { background: var(--bad); border-color: var(--bad); color: #fff; animation: as-pulse 1.4s ease-in-out infinite; }
@keyframes as-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .as-mic.on { animation: none; } }
.as-bar { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px; background: var(--panel); }
.as-tool { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--mute); font: inherit; font-size: 12px; padding: 4px 6px; border-radius: 8px; cursor: pointer; }
.as-tool:hover { background: var(--sunken); color: var(--ink); }
.as-tool.on { color: var(--brand-ink); }
.as-empty { padding: 20px; }

/* Full page */
.as-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.as-page-chat { display: flex; flex-direction: column; height: max(520px, calc(100vh - 260px)); overflow: hidden; padding: 0; }
.as-page-chat .as-chat { border-radius: inherit; }
.as-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }
.as-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.as-caps li { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.as-caps li .ico { color: var(--good); flex: none; }
.as-caps li.off { color: var(--faint); }
.as-caps li.off .ico { color: var(--faint); }
@media (max-width: 960px) { .as-page { grid-template-columns: 1fr; } .as-side { position: static; } .as-page-chat { height: max(480px, calc(100vh - 220px)); } }

/* Train on my website */
.tw-form { display: flex; gap: 8px; flex-wrap: wrap; }
.tw-form .input { flex: 1 1 220px; min-width: 0; }
.tw-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tw-stat { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel-2); display: flex; flex-direction: column; }
.tw-stat b { font-size: 20px; font-weight: 650; line-height: 1.2; }
.tw-stat span { font-size: 12px; color: var(--mute); }
.tw-progress { height: 6px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.tw-progress i { display: block; height: 100%; background: var(--grad, var(--brand)); border-radius: inherit; transition: width .6s var(--ease); }
.tw-pages ul { margin: 6px 0 0; padding-left: 18px; max-height: 180px; overflow-y: auto; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.tw-pages summary { cursor: pointer; color: var(--brand-ink); }
@media (max-width: 520px) { .tw-status { grid-template-columns: 1fr 1fr; } }

/* ./mod/workspace-extras.css */
/* Workflows (tabs, execution logs, history, trigger catalogue), My space,
   Custom values, Custom menus and "Add to calendar". */

/* ── Workflows ─────────────────────────────────────────────────────────── */
.wf-page .wf-tabs { margin-bottom: 0; }
.wf-page .wf-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.wf-draft { border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); padding: 10px 14px; }
.wf-json { margin: 0; padding: 10px 12px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
.wf-cond-line { display: flex; gap: 8px; align-items: baseline; font-size: 14px; padding: 2px 0; }
.wf-cond-line .wf-join { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); font-weight: 600; }
.wf-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.wf-cat-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--panel-2); min-width: 0; }
.wf-cat-item summary { cursor: pointer; color: var(--brand-ink); }
.wf-cat-item .wf-json { margin-top: 6px; }

.wf-run-filters { gap: 8px; flex-wrap: wrap; }
.wf-run-filters .input { width: auto; min-width: 150px; flex: 0 1 auto; }
.wf-run-filters input[type="date"] { min-width: 0; }
.wf-run-list { display: grid; gap: 6px; }
.wf-run { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); overflow: hidden; }
.wf-run.open { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow: var(--shadow-sm); }
.wf-run-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.wf-run-h:hover { background: var(--panel-2); }
.wf-run-h > .ico:last-child { color: var(--mute); transition: transform .18s var(--ease); flex: none; }
.wf-run.open .wf-run-h > .ico:last-child { transform: rotate(180deg); }
.wf-run-b { padding: 4px 14px 14px; border-top: 1px solid var(--line-2); display: grid; gap: 10px; }
.wf-run-b details summary { cursor: pointer; color: var(--mute); }
.wf-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 10px; }
.wf-step { position: relative; padding-left: 6px; }
.wf-step::before { content: ''; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--panel); border: 2px solid var(--brand); }
.wf-step.err::before { border-color: var(--bad); background: var(--bad-bg); }
.wf-step.wait::before { border-color: var(--warn); }
.wf-step-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-step-ico { width: 20px; text-align: center; }
.wf-resume { color: var(--warn); font-weight: 500; }
.wf-error { color: var(--bad); background: var(--bad-bg); border-radius: 8px; padding: 4px 8px; margin-top: 4px; }
.wf-io { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.wf-io pre { margin: 2px 0 0; padding: 8px 10px; background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }

.wf-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wf-versions li { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--radius-sm); }
.wf-versions li:hover { background: var(--panel-2); }
.wf-versions li.live { background: var(--brand-softer); }
.wf-ver-n { flex: none; width: 44px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--sunken); font-weight: 600; font-size: 13px; color: var(--ink-2); }
.wf-versions li.live .wf-ver-n { background: var(--good-bg); color: var(--good); }
.wf-tree { margin: 4px 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }

/* ── Custom values ─────────────────────────────────────────────────────── */
.cv-search { display: flex; align-items: center; gap: 8px; position: relative; }
.cv-search .ico { position: absolute; left: 11px; color: var(--mute); pointer-events: none; }
.cv-search .input { padding-left: 34px; }
.cv-tag { font-size: 13px; background: var(--brand-soft); color: var(--brand-ink); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.cv-val { max-width: 360px; white-space: pre-wrap; word-break: break-word; }
.cv .tr { text-align: right; white-space: nowrap; }
.cv-overridden { opacity: .55; }
.cv-overridden .cv-val { text-decoration: line-through; }
.cv-sep td { background: var(--panel-2); padding-top: 6px; padding-bottom: 6px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.cv-chips .chip { padding: 2px 8px; font-size: 12px; }

/* ── Custom menus ──────────────────────────────────────────────────────── */
.cm-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.cm-row[draggable="true"] { cursor: grab; }
.cm-row.over, .cm-drop-end.over { border-color: var(--brand); box-shadow: 0 -2px 0 var(--brand); }
.cm-row.ro { background: var(--panel-2); }
.cm-grip, .ms-grip { color: var(--faint); letter-spacing: -2px; cursor: grab; user-select: none; }
.cm-drop-end { height: 10px; border-radius: 6px; border: 1px dashed transparent; }
.cm-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; max-height: 168px; overflow: auto; padding: 2px; }
.cm-icon { height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink-2); cursor: pointer; }
.cm-icon.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.cm-roles { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cm-frame-wrap { display: flex; flex-direction: column; height: calc(100vh - 170px); min-height: 420px; }
.cm-frame-bar { padding: 0 2px 6px; gap: 10px; }
.cm-frame { flex: 1; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.cm-ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--brand-soft); color: var(--brand-ink); }

/* ── Add to calendar (staff appointment modal) ─────────────────────────── */
.addcal { display: grid; gap: 6px; margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.addcal .row { flex-wrap: wrap; }

/* ── My space ──────────────────────────────────────────────────────────── */
.ms { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.ms-side { padding: 10px; display: grid; gap: 2px; position: sticky; top: 12px; }
.ms-side-h { padding: 12px 10px 4px; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; font-weight: 600; }
.ms-nav { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--ink-2); font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
.ms-nav:hover { background: var(--sunken); }
.ms-nav.on { background: var(--brand-soft); color: var(--brand-ink); }
.ms-nav.over { border-color: var(--brand); border-style: dashed; background: var(--brand-softer); }
.ms-add { color: var(--mute); }
.ms-count { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.ms-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ms-c, #3b82f6); }
.ms-dot.blue, .ms-swatch.blue { --ms-c: #3b82f6; } .ms-dot.green, .ms-swatch.green { --ms-c: #10b981; } .ms-dot.amber, .ms-swatch.amber { --ms-c: #f59e0b; }
.ms-dot.red, .ms-swatch.red { --ms-c: #ef4444; } .ms-dot.violet, .ms-swatch.violet { --ms-c: #8b5cf6; } .ms-dot.slate, .ms-swatch.slate { --ms-c: #64748b; }
.ms-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--panel); background: var(--ms-c); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.ms-swatch.on { box-shadow: 0 0 0 2px var(--ink); }
.ms-main { padding: 18px 20px; min-width: 0; }
.ms-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ms-head h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.ms-new { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); margin-bottom: 10px; color: var(--mute); }
.ms-new:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ms-new .input { border: 0; background: transparent; box-shadow: none; padding-left: 0; }
.ms-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ms-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); transition: background .15s, border-color .15s, opacity .3s, transform .3s var(--ease); }
.ms-item:hover { border-color: var(--line); background: var(--panel-2); }
.ms-item.over { border-color: var(--brand); box-shadow: 0 -2px 0 var(--brand); }
.ms-item[draggable="true"] { cursor: grab; }
.ms-item.pri-high { box-shadow: inset 3px 0 0 var(--bad); }
.ms-item.pri-medium { box-shadow: inset 3px 0 0 var(--warn); }
.ms-item.pri-low { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 60%, transparent); }
.ms-check { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--faint); background: var(--panel); display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color .15s, background .2s, transform .2s var(--ease); }
.ms-check:hover { border-color: var(--brand); }
.ms-check svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s var(--ease) .05s; }
.ms-item.done .ms-check { background: var(--good); border-color: var(--good); }
.ms-item.done .ms-check svg { stroke-dashoffset: 0; }
.ms-item.done .ms-title { text-decoration: line-through; color: var(--mute); }
.ms-body { flex: 1; min-width: 0; display: grid; gap: 2px; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ms-title { font-weight: 500; overflow-wrap: anywhere; }
.ms-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--mute); }
.ms-meta:empty { display: none; }
.ms-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.ms-due.late { color: var(--bad); font-weight: 600; }
.ms-pri { text-transform: capitalize; font-weight: 600; }
.ms-pri.high { color: var(--bad); } .ms-pri.medium { color: var(--warn); }
.ms-list { color: var(--ink-2); }
.ms-sun { flex: none; width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--faint); cursor: pointer; display: grid; place-items: center; }
.ms-sun:hover { background: var(--sunken); color: var(--warn); }
.ms-sun.on { color: var(--warn); }
.ms-done-h { display: flex; justify-content: space-between; margin: 12px 0 6px; }
.ms-empty { text-align: center; padding: 40px 12px; }
.ms-empty .big { font-size: 34px; margin-bottom: 6px; }
.ms-alldone { text-align: center; margin: 10px 0; }
.ms-foot { margin: 16px 0 0; display: flex; align-items: center; gap: 6px; }

/* The satisfying part: the circle pops, the tick draws itself, a ring of
   sparks bursts out, then the item glides away. */
.ms-burst { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: 0; }
.ms-item.celebrate .ms-check { animation: ms-pop .42s var(--ease); }
.ms-item.celebrate .ms-burst { animation: ms-burst .6s ease-out forwards;
  background: radial-gradient(circle, var(--good) 0 2px, transparent 3px) 50% 0 / 6px 6px no-repeat,
    radial-gradient(circle, #f59e0b 0 2px, transparent 3px) 100% 50% / 6px 6px no-repeat,
    radial-gradient(circle, var(--brand) 0 2px, transparent 3px) 50% 100% / 6px 6px no-repeat,
    radial-gradient(circle, #ec4899 0 2px, transparent 3px) 0 50% / 6px 6px no-repeat,
    radial-gradient(circle, #10b981 0 2px, transparent 3px) 15% 15% / 6px 6px no-repeat,
    radial-gradient(circle, #8b5cf6 0 2px, transparent 3px) 85% 85% / 6px 6px no-repeat; }
.ms-item.celebrate { animation: ms-away .9s var(--ease) forwards; background: var(--good-bg); border-color: transparent; }
@keyframes ms-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes ms-burst { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes ms-away { 0%, 55% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(14px); } }
@media (prefers-reduced-motion: reduce) {
  .ms-item, .ms-check, .ms-check svg { transition: none; }
  .ms-item.celebrate, .ms-item.celebrate .ms-check, .ms-item.celebrate .ms-burst { animation: none; }
}

@media (max-width: 760px) {
  .ms { grid-template-columns: 1fr; }
  .ms-side { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .ms-side-h { display: none; }
  .ms-main { padding: 14px; }
  .wf-io { grid-template-columns: 1fr; }
  .wf-run-filters .input { min-width: 0; flex: 1 1 140px; }
  .cm-frame-wrap { height: calc(100vh - 140px); }
}

/* ./mod/voice.css */
/* Voice picker (ui/voicepicker.js), voice cloning and the voicemail greeting recorder. */

/* ── Current voice (the field) ─────────────────────────────────────────── */
.vp-field { min-width: 0; }
.vp-cur { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 8px 10px; min-width: 0; flex-wrap: wrap; }
.vp-cur-t { display: grid; gap: 2px; min-width: 0; }
.vp-cur-t b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-cur-t small { color: var(--mute); font-size: 12px; }
.vp-av { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--grad); }
.vp-av.elevenlabs { background: linear-gradient(135deg, #0f172a, #475569); }
.vp-av.phone { background: var(--sunken); color: var(--ink-2, var(--ink)); }
.vp-av.none { background: var(--sunken); color: var(--mute); }

/* ── Library ───────────────────────────────────────────────────────────── */
.vp-bar { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (max-width: 640px) { .vp-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vp-q { grid-column: 1 / -1; } }
.vp-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--mute); background: var(--sunken); border-radius: 10px; padding: 10px 12px; margin: 6px 0; line-height: 1.45; }
.vp-note.bad { color: var(--bad); }
.vp-group { display: grid; gap: 6px; margin-top: 14px; }
.vp-gh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vp-gh small { color: var(--mute); font-size: 12px; flex: 1; min-width: 200px; }
.vp-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 12px; padding: 8px 10px; font: inherit; flex-wrap: wrap; }
button.vp-row { cursor: pointer; }
.vp-row.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.vp-row.off { opacity: .6; }
.vp-row-t { display: grid; gap: 2px; min-width: 140px; }
.vp-row-t b { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vp-row-t small { color: var(--mute); font-size: 12px; }
.vp-play { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--brand); cursor: pointer; font-size: 12px; display: grid; place-items: center; transition: background .15s var(--ease-out, ease); }
.vp-play:hover { background: var(--brand-soft); }
.vp-lang { width: auto; max-width: 170px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }

/* ── Recording (cloning and greetings) ─────────────────────────────────── */
.vp-rec { display: grid; gap: 10px; margin: 12px 0; }
.vp-script { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; background: var(--sunken); max-height: 180px; overflow: auto; }
.vp-script small { color: var(--mute); font-size: 12px; }
.vp-script p { margin: 6px 0 0; line-height: 1.6; font-size: 14px; }
.vp-recbtn.on { background: #dc2626; border-color: #dc2626; color: #fff; }
.vp-clock { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--mute); }
.vp-clock.live { color: #dc2626; font-weight: 600; }
.vp-clock.live::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; margin-right: 6px; animation: vp-blink 1s steps(2) infinite; }
@keyframes vp-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .vp-clock.live::before { animation: none; } }
.vp-audio { height: 36px; max-width: 100%; }
.vp-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; margin-top: 4px; }
.vp-consent input { margin-top: 3px; flex: 0 0 auto; }
small.bad { color: var(--bad); }