/* ============================================================
   Emirae.Pro dashboard - Phase 9B
   Ported from design-system ui_kits/emirae-dashboard/dashboard.css.
   EVERY rule scoped under `.uaec-dash-root` (rendered inside
   <main class="uaec-ds uaec-dash-root">) so nothing leaks to the
   global header/footer or other pages, and global theme styles
   cannot override dashboard components. Tokens resolve from .uaec-ds.
   Do not edit here by hand for visual changes - re-run the scoper.
   ============================================================ */

/* ============================================================
   Emirae.Pro - Authenticated back-office / dashboard system.
   Tokens & .uaec-* primitives come from the design-system styles.css.
   Header + account menu come from ../emirae-header/header.css and
   ../emirae-header-logged-in/loggedin.css (role switcher reused).
   This file owns the dashboard SHELL (sidebar, topbar, content),
   the unified status-chip scale, cards, tables, forms, notices,
   empty states, and every provider / applicant / shared screen.
   ============================================================ *//* ============================================================
   PAGE FRAME
   ============================================================ */.uaec-dash-root { background: var(--page);}
/* Status-label accessibility: darken the warning/success text tokens inside
   the dashboard only, so chip/notice/badge text meets WCAG 2.2 AA on their
   -50 backgrounds. Same values the public hub pages already use for these
   tokens (e.g. assets/css/pages/accounting-hub.css). Backgrounds unchanged. */
.uaec-dash-root { --warning-700: #8a6300; --success-700: #027a48;}
.uaec-dash-root .dash-app { min-height: 100vh; display: flex; flex-direction: column;}
.uaec-dash-root #dash-root { flex: 1; display: flex; flex-direction: column;}
.uaec-dash-root .dash-grow { flex: 1; display: flex; flex-direction: column; min-height: 0;}
.uaec-dash-root .dash-grow > .fullstate { flex: 1; min-height: 0;}
/* ---- Minimal utility footer (all authenticated screens) ---- */.uaec-dash-root .dash-foot { border-top: 1px solid var(--border); background: var(--surface);}
.uaec-dash-root .dash-foot__in {
  max-width: var(--dash-max, 1320px); margin-inline: auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--text-muted);}
.uaec-dash-root .dash-foot__links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;}
.uaec-dash-root .dash-foot__links a { color: var(--text-secondary); transition: color var(--dur) var(--ease);}
.uaec-dash-root .dash-foot__links a:hover { color: var(--accent);}
@media (max-width: 600px) {.uaec-dash-root .dash-foot__in { justify-content: center; text-align: center; gap: 8px 16px;}
.uaec-dash-root .dash-foot__links { gap: 8px 16px;}
}
/* The whole authenticated area sits under the global site header. */.uaec-dash-root .dash {
  --sidebar-w: 264px;
  --dash-max: 1320px;
  flex: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
  width: 100%;
  max-width: var(--dash-max);
  margin-inline: auto;
  padding: 0 24px 64px;
  gap: 0;}
@media (max-width: 1080px) {.uaec-dash-root .dash { grid-template-columns: 1fr; padding-inline: 0;}
}
/* ============================================================
   SIDEBAR
   ============================================================ */.uaec-dash-root .side {
  position: sticky; top: calc(var(--header-h) + 18px);
  align-self: start;
  padding: 18px 18px 18px 0;
  display: flex; flex-direction: column; gap: 14px;
  max-height: calc(100vh - var(--header-h) - 24px);}
@media (max-width: 1080px) {.uaec-dash-root .side { display: none;}
}
/* Identity block */.uaec-dash-root .side-id {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: var(--radius-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);}
.uaec-dash-root .side-id__av {
  flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  font-size: 16px; font-weight: var(--fw-bold); color: #fff;
  background: linear-gradient(158deg, #3f93e6 0%, var(--accent) 55%, var(--accent-hover) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px -4px rgba(17,106,204,.5);}
.uaec-dash-root .side-id__av--provider { background: linear-gradient(158deg, #2a3a58 0%, var(--navy-700) 55%, var(--navy-900) 100%); color: var(--navy-tint);}
.uaec-dash-root .side-id__t { min-width: 0; flex: 1;}
.uaec-dash-root .side-id__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.uaec-dash-root .side-id__role { font-size: var(--fs-2xs); font-weight: var(--fw-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px;}
.uaec-dash-root .side-id__status { margin-top: 8px;}
/* Nav */.uaec-dash-root .side-nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; padding-right: 2px;}
.uaec-dash-root .side-group { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); padding: 14px 12px 4px;}
.uaec-dash-root .side-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); line-height: 1.2; cursor: pointer;
  border: 1px solid transparent; background: transparent; width: 100%; text-align: left; font-family: inherit;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.uaec-dash-root .side-link__ic { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--text-muted); transition: color var(--dur) var(--ease);}
.uaec-dash-root .side-link__ic svg { width: 19px; height: 19px; stroke-width: 1.8;}
.uaec-dash-root .side-link__lab { flex: 1; min-width: 0;}
.uaec-dash-root .side-link__badge {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: var(--fw-bold); color: #fff;}
.uaec-dash-root .side-link__badge--inbox { background: var(--accent);}
.uaec-dash-root .side-link__badge--alerts { background: var(--warning-500); color: #5a4409;}
.uaec-dash-root .side-link__badge--disputes { background: var(--error-500);}
/* Lead badge. Declarations verbatim from ui_kits/emirae-dashboard-v2/v2.css, where the
   comment calls it "the only badge with a purchase block behind it" - leads with no status
   are what pauses buying, so it is warning-coloured and not the accent. Identical to
   --alerts today; the two are separate names because they answer to different counts and
   either may be restyled without the other. nav.php still emits --alerts on that link;
   switching the markup is a separate change, and this rule has to exist first. */
.uaec-dash-root .side-link__badge--leads { background: var(--warning-500); color: #5a4409;}
.uaec-dash-root .side-link:hover { background: var(--accent-soft); color: var(--accent-hover);}
.uaec-dash-root .side-link:hover .side-link__ic { color: var(--accent);}
.uaec-dash-root .side-link.is-active { background: var(--accent-soft); color: var(--accent-hover); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); font-weight: var(--fw-bold);}
.uaec-dash-root .side-link.is-active .side-link__ic { color: var(--accent);}
.uaec-dash-root .side-nav__div { height: 1px; background: var(--border); margin: 10px 8px;}
.uaec-dash-root .side-foot { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 3px;}
.uaec-dash-root .side-help {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--surface); font-size: var(--fs-xs); color: var(--text-secondary);}
.uaec-dash-root .side-help svg { width: 17px; height: 17px; color: var(--accent); flex: none;}
.uaec-dash-root .side-help b { color: var(--text-strong); font-weight: var(--fw-bold); display: block; font-size: var(--fs-sm);}
/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */.uaec-dash-root .main { min-width: 0; padding: 18px 0 0 24px;}
@media (max-width: 1080px) {.uaec-dash-root .main { padding: 0;}
}
/* Topbar */.uaec-dash-root .topbar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--border);}
.uaec-dash-root .topbar__l { min-width: 0;}
.uaec-dash-root .topbar__route { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-bottom: 8px; flex-wrap: wrap;}
.uaec-dash-root .topbar__route > svg { width: 14px; height: 14px; flex: none; color: var(--text-muted);}
.uaec-dash-root .topbar__route code { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; color: var(--text-secondary);}
.uaec-dash-root .topbar__title { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text-strong); line-height: 1.1;}
.uaec-dash-root .topbar__sub { font-size: var(--fs-body); color: var(--text-secondary); margin-top: 7px; max-width: 68ch; line-height: 1.5;}
.uaec-dash-root .topbar__r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
/* Mobile top bar (dashboard) - only < 1080 */.uaec-dash-root .mbar { display: none;}
@media (max-width: 1080px) {.uaec-dash-root .mbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: var(--header-h); z-index: 40;
    padding: 12px 16px; background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);}
.uaec-dash-root .mbar__burger { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); cursor: pointer;}
.uaec-dash-root .mbar__burger svg { width: 20px; height: 20px; stroke-width: 1.9;}
.uaec-dash-root .mbar__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.uaec-dash-root .main { padding: 16px;}
.uaec-dash-root .topbar__title { font-size: 26px;}
}
/* ============================================================
   MOBILE NAV DRAWER
   ============================================================ */.uaec-dash-root .drawer-scrim { position: fixed; inset: 0; z-index: 88; background: rgba(12,18,34,.5); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);}
.uaec-dash-root .drawer-scrim.is-open { opacity: 1; visibility: visible;}
.uaec-dash-root .drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 89; width: min(300px, 84vw);
  background: var(--surface); box-shadow: var(--shadow-xl); transform: translateX(-100%);
  transition: transform var(--dur-slow) var(--ease-out); display: flex; flex-direction: column; overflow-y: auto;}
.uaec-dash-root .drawer.is-open { transform: translateX(0);}
.uaec-dash-root .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border);}
.uaec-dash-root .drawer__brand { font-size: 20px; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--navy-800);}
.uaec-dash-root .drawer__brand b { color: var(--accent);}
.uaec-dash-root .drawer__close { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-secondary); cursor: pointer;}
.uaec-dash-root .drawer__close svg { width: 18px; height: 18px;}
.uaec-dash-root .drawer__body { padding: 14px; display: flex; flex-direction: column; gap: 3px;}
/* ============================================================
   UNIFIED STATUS-CHIP SCALE (§26)
   ============================================================ */.uaec-dash-root .chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: 1.5; white-space: nowrap; letter-spacing: .01em;
  border: 1px solid transparent;}
.uaec-dash-root .chip svg { width: 12px; height: 12px; stroke-width: 2.2; flex: none;}
.uaec-dash-root .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;}
.uaec-dash-root .chip--dotless::before { display: none;}
.uaec-dash-root .chip--neutral { color: var(--gray-600); background: var(--gray-100); border-color: var(--gray-200);}
.uaec-dash-root .chip--info { color: var(--blue-700); background: var(--blue-50); border-color: color-mix(in srgb, var(--blue-600) 18%, transparent);}
.uaec-dash-root .chip--success { color: var(--success-700); background: var(--success-50); border-color: color-mix(in srgb, var(--success-700) 20%, transparent);}
.uaec-dash-root .chip--warning { color: var(--warning-700); background: var(--warning-50); border-color: color-mix(in srgb, var(--warning-700) 28%, transparent);}
.uaec-dash-root .chip--error { color: var(--error-500); background: var(--error-50); border-color: color-mix(in srgb, var(--error-500) 22%, transparent);}
.uaec-dash-root .chip--sm { padding: 2px 7px; font-size: 10px;}
/* ============================================================
   GENERIC CARD / SECTION HELPERS
   ============================================================ */.uaec-dash-root .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);}
.uaec-dash-root .card--pad { padding: 22px;}
.uaec-dash-root .card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border);}
.uaec-dash-root .card__head h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em;}
.uaec-dash-root .card__link { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent); cursor: pointer; background: none; border: none; padding: 0; font-family: inherit;}
.uaec-dash-root .card__link svg { width: 15px; height: 15px; stroke-width: 2.4; transition: transform var(--dur) var(--ease);}
.uaec-dash-root .card__link:hover { color: var(--accent-hover);}
.uaec-dash-root .card__link:hover svg { transform: translateX(3px);}
.uaec-dash-root .card__body { padding: 20px;}
.uaec-dash-root .grid { display: grid; gap: 16px;}
.uaec-dash-root .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr));}
.uaec-dash-root .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr));}
.uaec-dash-root .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr));}
@media (max-width: 900px) {.uaec-dash-root .grid-3, .uaec-dash-root .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 560px) {.uaec-dash-root .grid-2, .uaec-dash-root .grid-3, .uaec-dash-root .grid-4 { grid-template-columns: 1fr;}
}
.uaec-dash-root .section-lead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 30px 0 14px;}
.uaec-dash-root .section-lead h2 { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em;}
.uaec-dash-root .section-lead:first-child { margin-top: 0;}
/* ============================================================
   METRIC / STAT TILES
   ============================================================ */.uaec-dash-root .stat {
  padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; gap: 6px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);}
.uaec-dash-root .stat--link { cursor: pointer;}
.uaec-dash-root .stat--link:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 12px 26px -18px rgba(17,106,204,.5); transform: translateY(-2px);}
.uaec-dash-root .stat__k { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary);}
.uaec-dash-root .stat__k svg { width: 15px; height: 15px; stroke-width: 1.9; color: var(--text-muted);}
.uaec-dash-root .stat__v { font-size: 30px; font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.02em; line-height: 1;}
.uaec-dash-root .stat__v small { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted);}
.uaec-dash-root .stat__foot { font-size: var(--fs-xs); color: var(--text-muted);}
/* Account status cards (overview row A) */.uaec-dash-root .status-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm);}
.uaec-dash-root .status-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;}
.uaec-dash-root .status-card__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none;}
.uaec-dash-root .status-card__ic svg { width: 20px; height: 20px; stroke-width: 1.9;}
.uaec-dash-root .status-card__ic--navy { background: var(--navy-800); color: var(--navy-tint);}
.uaec-dash-root .status-card__t { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary);}
.uaec-dash-root .status-card__v { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; line-height: 1.2;}
.uaec-dash-root .status-card__meta { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;}
/* Progress bar */.uaec-dash-root .prog { height: 8px; border-radius: var(--radius-pill); background: var(--gray-200); overflow: hidden;}
.uaec-dash-root .prog__fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--blue-400)); transition: width var(--dur-slow) var(--ease);}
.uaec-dash-root .prog__fill--warn { background: linear-gradient(90deg, var(--warning-700), var(--warning-500));}
.uaec-dash-root .prog__fill--ok { background: linear-gradient(90deg, var(--success-700), var(--success-500));}
.uaec-dash-root .prog-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: 7px;}
.uaec-dash-root .prog-row b { color: var(--text-strong); font-weight: var(--fw-bold);}
/* ============================================================
   REQUEST / OFFER LIST CARDS (opportunity feed)
   ============================================================ */.uaec-dash-root .feed { display: flex; flex-direction: column; gap: 12px;}
.uaec-dash-root .req {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; align-items: start;
  padding: 18px 20px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);}
.uaec-dash-root .req:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 14px 30px -20px rgba(17,106,204,.55); transform: translateY(-2px);}
.uaec-dash-root .req--offered { background: linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 60%, #fff), #fff 70%); border-color: color-mix(in srgb, var(--accent) 22%, var(--border));}
.uaec-dash-root .req--urgent { border-left: 3px solid var(--warning-500);}
.uaec-dash-root .req__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1;}
.uaec-dash-root .req__code { font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-bold); color: var(--text-secondary);}
.uaec-dash-root .req__match { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: var(--fw-bold); color: var(--accent-hover);}
.uaec-dash-root .req__match svg { width: 13px; height: 13px; color: var(--accent);}
.uaec-dash-root .req__title { grid-column: 1; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em; line-height: 1.3;}
.uaec-dash-root .req__desc { grid-column: 1; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5;}
.uaec-dash-root .req__meta { grid-column: 1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-muted);}
.uaec-dash-root .req__meta span { display: inline-flex; align-items: center; gap: 5px;}
.uaec-dash-root .req__meta svg { width: 14px; height: 14px; stroke-width: 1.8;}
.uaec-dash-root .req__meta b { color: var(--text-secondary); font-weight: var(--fw-bold);}
.uaec-dash-root .req__side { grid-row: 2 / span 3; grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right;}
.uaec-dash-root .req__arrow { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-muted); transition: all var(--dur) var(--ease);}
.uaec-dash-root .req__arrow svg { width: 16px; height: 16px; stroke-width: 2.2;}
.uaec-dash-root .req:hover .req__arrow { background: var(--accent); border-color: var(--accent); color: #fff;}
/* Match strength meter */.uaec-dash-root .match-bar { display: flex; gap: 3px;}
.uaec-dash-root .match-bar i { width: 16px; height: 5px; border-radius: 3px; background: var(--gray-200);}
.uaec-dash-root .match-bar i.on { background: var(--accent);}
.uaec-dash-root .match-bar--warn i.on { background: var(--warning-500);}
/* ============================================================
   TABLES (my offers, invoices, my requests, disputes)
   ============================================================ */.uaec-dash-root .tbl-wrap { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm);}
.uaec-dash-root .tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm);}
.uaec-dash-root .tbl thead th {
  text-align: left; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); padding: 12px 16px; background: var(--gray-50); border-bottom: 1px solid var(--border); white-space: nowrap;}
.uaec-dash-root .tbl tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle;}
.uaec-dash-root .tbl tbody tr:last-child td { border-bottom: none;}
.uaec-dash-root .tbl tbody tr { cursor: pointer; transition: background var(--dur) var(--ease);}
.uaec-dash-root .tbl tbody tr:hover { background: var(--accent-soft);}
.uaec-dash-root .tbl__code { font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-bold); color: var(--accent-hover);}
.uaec-dash-root .tbl__strong { font-weight: var(--fw-bold); color: var(--text-strong);}
.uaec-dash-root .tbl__muted { color: var(--text-muted);}
.uaec-dash-root .tbl__act { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--fw-bold); color: var(--accent);}
.uaec-dash-root .tbl__act svg { width: 14px; height: 14px; stroke-width: 2.4;}
.uaec-dash-root .vbadge { display: inline-flex; align-items: center; font-size: 10px; font-weight: var(--fw-bold); color: var(--text-muted); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;}
.uaec-dash-root .tbl .vbadge { display: inline-flex; align-items: center; margin-left: 6px; font-size: 10px; font-weight: var(--fw-bold); color: var(--text-muted); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;}
/* Filter tabs */.uaec-dash-root .ftabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-pill); width: fit-content;}
.uaec-dash-root .ftab { border: none; background: transparent; font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);}
.uaec-dash-root .ftab:hover { color: var(--text-strong);}
.uaec-dash-root .ftab.is-on { background: var(--surface); color: var(--accent-hover); box-shadow: var(--shadow-xs); font-weight: var(--fw-bold);}
.uaec-dash-root .ftab__n { font-size: 10.5px; margin-left: 5px; opacity: .7;}
/* Mobile card list (table → cards) */.uaec-dash-root .ocards { display: none; flex-direction: column; gap: 12px;}
.uaec-dash-root .ocard { padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xs); cursor: pointer;}
.uaec-dash-root .ocard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px;}
.uaec-dash-root .ocard__rows { display: flex; flex-direction: column; gap: 7px;}
.uaec-dash-root .ocard__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-sm);}
.uaec-dash-root .ocard__row .k { color: var(--text-muted);}
.uaec-dash-root .ocard__row .v { font-weight: var(--fw-medium); color: var(--text);}
@media (max-width: 820px) {.uaec-dash-root .tbl-wrap.responsive { display: none;}
.uaec-dash-root .ocards.responsive { display: flex;}
}
/* ============================================================
   TWO-COLUMN DETAIL WORKSPACE
   ============================================================ */.uaec-dash-root .work { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 24px; align-items: start;}
@media (max-width: 980px) {.uaec-dash-root .work { grid-template-columns: 1fr;}
}
.uaec-dash-root .work__side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + 18px);}
@media (max-width: 980px) {.uaec-dash-root .work__side { position: static;}
}
.uaec-dash-root .summary { padding: 18px 20px; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm);}
.uaec-dash-root .summary h4 { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px;}
.uaec-dash-root .dl { display: flex; flex-direction: column; gap: 0;}
.uaec-dash-root .dl__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm);}
.uaec-dash-root .dl__row:last-child { border-bottom: none;}
.uaec-dash-root .dl__k { color: var(--text-secondary);}
.uaec-dash-root .dl__v { font-weight: var(--fw-medium); color: var(--text-strong); text-align: right;}
/* ============================================================
   FORMS
   ============================================================ */.uaec-dash-root .form { display: flex; flex-direction: column; gap: 18px;}
.uaec-dash-root .form--narrow { max-width: 640px;}
.uaec-dash-root .field { display: flex; flex-direction: column; gap: 7px;}
.uaec-dash-root .field__label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); display: flex; align-items: center; gap: 6px;}
.uaec-dash-root .field__req { color: var(--error-500); font-weight: var(--fw-bold);}
.uaec-dash-root .field__opt { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted);}
.uaec-dash-root .field__help { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45;}
.uaec-dash-root .field__err { font-size: var(--fs-xs); color: var(--error-500); font-weight: var(--fw-medium); display: flex; align-items: center; gap: 5px;}
.uaec-dash-root .field__err svg { width: 13px; height: 13px;}
.uaec-dash-root .inp, .uaec-dash-root .sel, .uaec-dash-root .ta {
  width: 100%; font-family: inherit; font-size: var(--fs-sm); color: var(--text-strong);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 10px 12px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.uaec-dash-root .inp::placeholder, .uaec-dash-root .ta::placeholder { color: var(--text-muted);}
.uaec-dash-root .inp:focus, .uaec-dash-root .sel:focus, .uaec-dash-root .ta:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);}
/* Custom select - replace the native browser arrow with a branded chevron */.uaec-dash-root .sel {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;}
.uaec-dash-root .sel:hover { border-color: var(--border-strong);}
.uaec-dash-root .sel::-ms-expand { display: none;}
.uaec-dash-root .ta { resize: vertical; min-height: 84px; line-height: 1.5;}
.uaec-dash-root .field.has-error .inp, .uaec-dash-root .field.has-error .ta, .uaec-dash-root .field.has-error .sel { border-color: var(--error-500); box-shadow: 0 0 0 3px var(--error-50);}
.uaec-dash-root .inp[readonly] { background: var(--surface-alt); color: var(--text-secondary); cursor: not-allowed;}
.uaec-dash-root .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
@media (max-width: 560px) {.uaec-dash-root .frow { grid-template-columns: 1fr;}
}
.uaec-dash-root .form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px;}
.uaec-dash-root .form-actions--split { justify-content: space-between;}
/* Chip toggles (capabilities) */.uaec-dash-root .chips { display: flex; flex-wrap: wrap; gap: 8px;}
.uaec-dash-root .chip-toggle { font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer; transition: all var(--dur) var(--ease);}
.uaec-dash-root .chip-toggle:hover { border-color: var(--accent); color: var(--accent-hover);}
.uaec-dash-root .chip-toggle.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); font-weight: var(--fw-bold);}
.uaec-dash-root .chip-toggle.is-on::before { content: "✓ ";}
/* Wizard steps */.uaec-dash-root .wiz-steps { display: flex; align-items: center; gap: 0; margin-bottom: 26px; overflow-x: auto;}
.uaec-dash-root .wiz-step { display: flex; align-items: center; gap: 10px; flex: none;}
.uaec-dash-root .wiz-step__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--text-muted); flex: none;}
.uaec-dash-root .wiz-step__lab { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); white-space: nowrap;}
.uaec-dash-root .wiz-step.is-active .wiz-step__n { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px -4px rgba(17,106,204,.6);}
.uaec-dash-root .wiz-step.is-active .wiz-step__lab { color: var(--text-strong); font-weight: var(--fw-bold);}
.uaec-dash-root .wiz-step.is-done .wiz-step__n { background: var(--success-50); border-color: var(--success-500); color: var(--success-700);}
.uaec-dash-root .wiz-step__bar { width: 44px; height: 2px; background: var(--border); margin: 0 12px; flex: none;}
.uaec-dash-root .wiz-step.is-done + .wiz-step__bar, .uaec-dash-root .wiz-step__bar.is-done { background: var(--success-500);}
@media (max-width: 720px) {.uaec-dash-root .wiz-step__lab { display: none;}
.uaec-dash-root .wiz-step__bar { width: 24px; margin: 0 6px;}
}
/* Section nav (profile edit mode) */.uaec-dash-root .anchor-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--header-h) + 18px);}
.uaec-dash-root .anchor-link { padding: 8px 12px; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); cursor: pointer; border: none; border-left: 2px solid transparent; background: none; font-family: inherit; width: 100%; text-align: left;}
.uaec-dash-root .anchor-link:hover { color: var(--text-strong); background: var(--surface-alt);}
.uaec-dash-root .anchor-link.is-on { color: var(--accent-hover); border-left-color: var(--accent); font-weight: var(--fw-bold); background: var(--accent-soft);}
/* Account dropdown items are rendered as <button> here - strip the
   browser's default button chrome so the header-kit styling shows. */.uaec-dash-root button.acc-link, .uaec-dash-root button.acc-logout, .uaec-dash-root button.acc-tile, .uaec-dash-root button.acc-chip {
  -webkit-appearance: none; appearance: none; font-family: inherit; text-align: left;}
.uaec-dash-root button.acc-link, .uaec-dash-root button.acc-logout { width: 100%; background: none; border: none;}
/* ============================================================
   NOTICES (§28)
   ============================================================ */.uaec-dash-root .notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid; margin-bottom: 18px;}
.uaec-dash-root .notice__ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px;}
.uaec-dash-root .notice__ic svg { width: 14px; height: 14px; stroke-width: 2.2; color: #fff;}
.uaec-dash-root .notice__b { min-width: 0;}
.uaec-dash-root .notice__t { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong);}
.uaec-dash-root .notice__x { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; margin-top: 2px;}
.uaec-dash-root .notice__close { margin-left: auto; flex: none; color: var(--text-muted); cursor: pointer; background: none; border: none; padding: 2px;}
.uaec-dash-root .notice__close svg { width: 16px; height: 16px;}
.uaec-dash-root .notice--success { background: var(--success-50); border-color: color-mix(in srgb, var(--success-700) 26%, transparent);}
.uaec-dash-root .notice--success .notice__ic { background: var(--success-700);}
.uaec-dash-root .notice--info { background: var(--info-50); border-color: color-mix(in srgb, var(--info-500) 26%, transparent);}
.uaec-dash-root .notice--info .notice__ic { background: var(--info-500);}
.uaec-dash-root .notice--warning { background: var(--warning-50); border-color: color-mix(in srgb, var(--warning-700) 34%, transparent);}
.uaec-dash-root .notice--warning .notice__ic { background: var(--warning-700);}
.uaec-dash-root .notice--error { background: var(--error-50); border-color: color-mix(in srgb, var(--error-500) 30%, transparent);}
.uaec-dash-root .notice--error .notice__ic { background: var(--error-500);}
/* Inline access / callout boxes */.uaec-dash-root .callout { display: flex; gap: 14px; padding: 20px; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface-alt);}
.uaec-dash-root .callout__ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;}
.uaec-dash-root .callout__ic svg { width: 22px; height: 22px; stroke-width: 1.9;}
.uaec-dash-root .callout__t { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong);}
.uaec-dash-root .callout__x { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; margin-top: 4px; max-width: 60ch;}
.uaec-dash-root .callout__act { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px;}
.uaec-dash-root .callout--warn { background: var(--warning-50); border-color: color-mix(in srgb, var(--warning-700) 28%, transparent);}
.uaec-dash-root .callout--warn .callout__ic { background: #fff; color: var(--warning-700);}
.uaec-dash-root .callout--info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 20%, transparent);}
.uaec-dash-root .callout--info .callout__ic { background: #fff; color: var(--accent);}
/* ============================================================
   EMPTY STATES (§29)
   ============================================================ */.uaec-dash-root .empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 52px 24px;}
.uaec-dash-root .empty__ic { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 18px;}
.uaec-dash-root .empty__ic svg { width: 28px; height: 28px; stroke-width: 1.7;}
.uaec-dash-root .empty__t { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text-strong);}
.uaec-dash-root .empty__x { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; margin-top: 8px; max-width: 46ch;}
.uaec-dash-root .empty__act { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px;}
/* Full-page state (account inactive / login required) */.uaec-dash-root .fullstate { min-height: 60vh; display: grid; place-items: center; padding: 40px 24px;}
.uaec-dash-root .fullstate__box { max-width: 460px; text-align: center; padding: 40px; border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg);}
.uaec-dash-root .fullstate__ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 20px;}
.uaec-dash-root .fullstate__ic svg { width: 30px; height: 30px; stroke-width: 1.8;}
.uaec-dash-root .fullstate__ic--warn { background: var(--warning-50); color: var(--warning-700);}
.uaec-dash-root .fullstate__ic--lock { background: var(--accent-soft); color: var(--accent);}
.uaec-dash-root .fullstate h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.02em;}
.uaec-dash-root .fullstate p { font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.6; margin-top: 12px;}
.uaec-dash-root .fullstate__act { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 26px;}
/* ============================================================
   INBOX (two-pane messenger)
   ============================================================ */.uaec-dash-root .inbox { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); height: calc(100vh - var(--header-h) - 150px); min-height: 520px;}
@media (max-width: 900px) {.uaec-dash-root .inbox { grid-template-columns: 1fr; height: auto; min-height: 0;}
}
.uaec-dash-root .thlist { border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden;}
.uaec-dash-root .thlist__head { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); display: flex; align-items: center; justify-content: space-between;}
.uaec-dash-root .thlist__scroll { overflow-y: auto; flex: 1;}
.uaec-dash-root .thread {
  display: flex; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer;
  border-left: 3px solid transparent; transition: background var(--dur) var(--ease);}
.uaec-dash-root .thread:hover { background: var(--surface-alt);}
.uaec-dash-root .thread.is-active { background: var(--accent-soft); border-left-color: var(--accent);}
.uaec-dash-root .thread.is-unread { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, #fff);}
.uaec-dash-root .thread__av { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 13px; font-weight: var(--fw-bold); color: #fff;}
.uaec-dash-root .thread__av svg { width: 18px; height: 18px; stroke-width: 1.9;}
.uaec-dash-root .thread__b { min-width: 0; flex: 1;}
.uaec-dash-root .thread__top { display: flex; align-items: center; justify-content: space-between; gap: 8px;}
.uaec-dash-root .thread__who { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.uaec-dash-root .thread__time { font-size: 10.5px; color: var(--text-muted); flex: none;}
.uaec-dash-root .thread__ctx { font-size: 11px; color: var(--accent-hover); font-family: var(--font-mono); margin: 1px 0 2px;}
.uaec-dash-root .thread__prev { font-size: var(--fs-xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.uaec-dash-root .thread__unread { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-size: 10.5px; font-weight: var(--fw-bold); display: inline-flex; align-items: center; justify-content: center;}
.uaec-dash-root .convo { display: flex; flex-direction: column; overflow: hidden;}
.uaec-dash-root .convo__ctx { padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--gray-50); display: flex; align-items: center; gap: 12px;}
.uaec-dash-root .convo__back { display: none; width: 34px; height: 34px; border-radius: var(--radius-md); place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer; flex: none;}
.uaec-dash-root .convo__back svg { width: 18px; height: 18px;}
@media (max-width: 900px) {.uaec-dash-root .convo__back { display: grid;}
}
/* Mobile: inbox shows one pane at a time */@media (max-width: 900px) {.uaec-dash-root .inbox[data-open="0"] .convo { display: none;}
.uaec-dash-root .inbox[data-open="1"] .thlist { display: none;}
.uaec-dash-root .inbox { height: auto;}
.uaec-dash-root .convo__scroll { min-height: 340px;}
}
.uaec-dash-root .convo__ctx-b { min-width: 0; flex: 1;}
.uaec-dash-root .convo__ctx-t { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong);}
.uaec-dash-root .convo__ctx-m { font-size: var(--fs-xs); color: var(--text-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px;}
.uaec-dash-root .convo__ctx-m a { color: var(--accent); font-weight: var(--fw-bold); font-family: var(--font-mono);}
.uaec-dash-root .convo__scroll { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; background: var(--page);}
.uaec-dash-root .msg { max-width: 74%; display: flex; flex-direction: column; gap: 4px;}
.uaec-dash-root .msg__bubble { padding: 10px 13px; border-radius: 14px; font-size: var(--fs-sm); line-height: 1.5;}
.uaec-dash-root .msg__meta { font-size: 10.5px; color: var(--text-muted);}
.uaec-dash-root .msg--them { align-self: flex-start;}
.uaec-dash-root .msg--them .msg__bubble { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px;}
.uaec-dash-root .msg--me { align-self: flex-end; align-items: flex-end;}
.uaec-dash-root .msg--me .msg__bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px;}
.uaec-dash-root .msg--me .msg__meta { text-align: right;}
.uaec-dash-root .msg--sys { align-self: center; max-width: 90%; text-align: center;}
.uaec-dash-root .msg--sys .msg__bubble { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-muted); font-size: var(--fs-xs); border-radius: var(--radius-pill); padding: 5px 14px;}
.uaec-dash-root .convo__compose { border-top: 1px solid var(--border); padding: 12px 14px; display: flex; gap: 10px; align-items: flex-end; background: var(--surface);}
.uaec-dash-root .convo__compose .ta { min-height: 42px; max-height: 120px;}
.uaec-dash-root .convo__closed { padding: 16px; text-align: center; font-size: var(--fs-sm); color: var(--text-muted); border-top: 1px solid var(--border); background: var(--surface-alt);}
/* ============================================================
   NOTIFICATIONS (activity feed)
   ============================================================ */.uaec-dash-root .nfeed { display: flex; flex-direction: column;}
.uaec-dash-root .nrow { display: flex; gap: 13px; padding: 15px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--dur) var(--ease); position: relative;}
.uaec-dash-root .nrow:last-child { border-bottom: none;}
.uaec-dash-root .nrow:hover { background: var(--surface-alt);}
.uaec-dash-root .nrow.is-unread { background: var(--info-50);}
.uaec-dash-root .nrow.is-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--info-500);}
.uaec-dash-root .nrow__ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;}
.uaec-dash-root .nrow__ic svg { width: 19px; height: 19px; stroke-width: 1.9;}
.uaec-dash-root .nrow__b { min-width: 0; flex: 1;}
.uaec-dash-root .nrow__t { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong);}
.uaec-dash-root .nrow__x { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.45; margin-top: 2px;}
.uaec-dash-root .nrow__time { font-size: 11px; color: var(--text-muted); flex: none;}
.uaec-dash-root .nrow__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--info-500); margin-top: 6px;}
/* Timeline (disputes) */.uaec-dash-root .tl { display: flex; flex-direction: column;}
.uaec-dash-root .tl__row { display: flex; gap: 14px; padding-bottom: 20px; position: relative;}
.uaec-dash-root .tl__row:last-child { padding-bottom: 0;}
.uaec-dash-root .tl__rail { flex: none; display: flex; flex-direction: column; align-items: center;}
.uaec-dash-root .tl__dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--text-muted); z-index: 1;}
.uaec-dash-root .tl__dot svg { width: 15px; height: 15px; stroke-width: 2;}
.uaec-dash-root .tl__dot--accent { background: var(--accent-soft); border-color: var(--accent); color: var(--accent);}
.uaec-dash-root .tl__line { flex: 1; width: 2px; background: var(--border); margin: 2px 0;}
.uaec-dash-root .tl__row:last-child .tl__line { display: none;}
.uaec-dash-root .tl__b { padding-top: 3px; min-width: 0;}
.uaec-dash-root .tl__t { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong);}
.uaec-dash-root .tl__x { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; margin-top: 2px;}
.uaec-dash-root .tl__time { font-size: 11px; color: var(--text-muted); margin-top: 3px;}
/* ============================================================
   OFFER SUMMARY / PROVIDER + PRICE BLOCKS
   ============================================================ */.uaec-dash-root .offerbox { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface);}
.uaec-dash-root .offerbox__av { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; font-weight: var(--fw-bold); color: var(--navy-tint); background: linear-gradient(158deg, #2a3a58, var(--navy-900));}
.uaec-dash-root .offerbox__b { min-width: 0; flex: 1;}
.uaec-dash-root .offerbox__name { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); display: flex; align-items: center; gap: 8px;}
.uaec-dash-root .offerbox__meta { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 3px;}
.uaec-dash-root .offerbox__price { text-align: right; flex: none;}
.uaec-dash-root .offerbox__price b { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-strong);}
.uaec-dash-root .offerbox__price span { display: block; font-size: var(--fs-xs); color: var(--text-muted);}
.uaec-dash-root .price-tag { font-size: 26px; font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.02em;}
.uaec-dash-root .price-tag small { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted);}
/* ============================================================
   MISC HELPERS
   ============================================================ */.uaec-dash-root .stack { display: flex; flex-direction: column;}
.uaec-dash-root .stack-4 > * + * { margin-top: 4px;}
.uaec-dash-root .stack-8 > * + * { margin-top: 8px;}
.uaec-dash-root .stack-16 > * + * { margin-top: 16px;}
.uaec-dash-root .stack-24 > * + * { margin-top: 24px;}
.uaec-dash-root .muted { color: var(--text-muted);}
.uaec-dash-root .mono { font-family: var(--font-mono);}
.uaec-dash-root .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.uaec-dash-root .row--between { justify-content: space-between;}
.uaec-dash-root .spacer { flex: 1;}
.uaec-dash-root .divider { height: 1px; background: var(--border); margin: 20px 0;}
.uaec-dash-root .badge-new { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-hover); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: var(--radius-pill); padding: 2px 8px;}
.uaec-dash-root .tag-newpage { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--warning-700); background: var(--warning-50); border: 1px solid color-mix(in srgb, var(--warning-700) 28%, transparent); border-radius: var(--radius-pill); padding: 3px 9px; white-space: nowrap;}
/* Provider under-review inline chip on offer form */.uaec-dash-root .mini-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--warning-700); background: var(--warning-50); border: 1px solid color-mix(in srgb, var(--warning-700) 26%, transparent); border-radius: var(--radius-pill); padding: 3px 9px;}
.uaec-dash-root .mini-chip svg { width: 12px; height: 12px;}
/* Entrance animation */@media (prefers-reduced-motion: no-preference) {.uaec-dash-root .screen-enter { animation: screenIn .32s var(--ease-out) both;}
@keyframes screenIn {from { opacity: 0; transform: translateY(8px);}
to { opacity: 1; transform: none;}
}
}
/* Buttons: danger variant (destructive) */.uaec-dash-root .uaec-btn--danger { background: var(--error-500); color: #fff;}
.uaec-dash-root .uaec-btn--danger:hover { background: var(--error-700);}
.uaec-dash-root .uaec-btn--danger-ghost { background: transparent; color: var(--error-500); border-color: color-mix(in srgb, var(--error-500) 30%, transparent);}
.uaec-dash-root .uaec-btn--danger-ghost:hover { background: var(--error-50);}
.uaec-dash-root .uaec-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none;}
/* Route note banner (NEW / FUTURE labelling for review) */.uaec-dash-root .route-note { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 5px 12px;}
.uaec-dash-root .route-note svg { width: 14px; height: 14px; color: var(--warning-700);}
/* ---- Toasts ---- */.uaec-dash-root #toast-host { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none;}
.uaec-dash-root .toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-strong); max-width: 340px;
  transform: translateY(12px); opacity: 0; transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);}
.uaec-dash-root .toast.is-on { transform: none; opacity: 1;}
.uaec-dash-root .toast__ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;}
.uaec-dash-root .toast__ic svg { width: 14px; height: 14px; stroke-width: 2.4; color: #fff;}
.uaec-dash-root .toast--success .toast__ic { background: var(--success-700);}
.uaec-dash-root .toast--info .toast__ic { background: var(--info-500);}
.uaec-dash-root .toast--error .toast__ic { background: var(--error-500);}
@media (max-width: 600px) {.uaec-dash-root #toast-host { left: 16px; right: 16px; bottom: 16px; align-items: stretch;}
.uaec-dash-root .toast { max-width: none;}
}
/* ---- Global icon sizing safety (buttons + inline glyphs) ---- */.uaec-dash-root .uaec-btn svg { width: 16px; height: 16px; stroke-width: 2; flex: none;}
.uaec-dash-root .uaec-btn--lg svg { width: 18px; height: 18px;}
.uaec-dash-root .uaec-btn--sm svg { width: 14px; height: 14px;}
.uaec-dash-root .tag-newpage svg, .uaec-dash-root .badge-new svg { width: 12px; height: 12px;}
.uaec-dash-root svg.inline { width: 15px; height: 15px; display: inline-block; vertical-align: -3px; stroke-width: 2;}
.uaec-dash-root .field__help svg.inline { color: var(--accent);}
/* Bare <svg> inside a help line - the PHP icon helpers emit no class and no
   width/height, so without this it renders at its natural box and swallows the
   card. Direct child only, so nested sized icons keep their own rule. */
.uaec-dash-root .field__help > svg { width: 14px; height: 14px; stroke-width: 1.9; flex: none; display: inline-block; vertical-align: -2px;}
.uaec-dash-root .mini-chip svg { width: 12px; height: 12px;}
/* ---- Mock modal (invoice preview, P-M04) ---- */.uaec-dash-root #modal-host:empty { display: none;}
.uaec-dash-root .modal-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(9,13,24,.55); backdrop-filter: blur(2px);}
.uaec-dash-root .modal-box { position: fixed; z-index: 301; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px -12px rgba(6,11,22,.4);}
.uaec-dash-root .modal-box__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border);}
.uaec-dash-root .modal-box__head h3 { font-size: var(--fs-h3); font-weight: 700; color: var(--text-strong);}
.uaec-dash-root .modal-box__close { border: none; background: none; cursor: pointer; color: var(--text-secondary); padding: 4px; border-radius: var(--radius-md); display: grid; place-items: center;}
.uaec-dash-root .modal-box__close:hover { background: var(--surface-alt); color: var(--text-strong);}
.uaec-dash-root .modal-box__close svg { width: 20px; height: 20px;}
.uaec-dash-root .modal-box__body { padding: 20px;}
/* ---- Simulated PDF preview (F-02) ---- */.uaec-dash-root .pdf-sim { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;}
.uaec-dash-root .pdf-sim__bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--navy-800); color: var(--navy-tint); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .02em;}
.uaec-dash-root .pdf-sim__bar svg.inline { color: var(--navy-tint);}
.uaec-dash-root .pdf-sim__sheet { padding: 22px; background: var(--surface);}
/* ---- Simulated Stripe billing portal (F-03) ---- */.uaec-dash-root .portal-sim__brand { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong);}
.uaec-dash-root .portal-sim__brand svg.inline { color: var(--accent);}

/* ============================================================
   PAY PER LEAD - provider money spine (port batch 1, 2026-07-28)
   Ported from the design source of truth:
   ui_kits/emirae-dashboard-v2/v2.css (build "Back office v2 -
   reconciled 27 Jul 2026"), read through DesignSync.
   Screens: provider overview, request detail, lead history,
   payment method.
   Every rule scoped under .uaec-dash-root like the rest of this
   file. Icon boxes carry explicit svg width/height: the PHP icon
   helpers emit a bare <svg> with no attributes, and an unsized one
   fills its container.
   ============================================================ */

/* ---- Dashboard head: one sentence about what today asks of you ---- */
.uaec-dash-root .dashhead { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); display: flex; align-items: flex-start; gap: 20px; padding: 22px; margin-bottom: 20px;}
.uaec-dash-root .dashhead__n { flex: none; min-width: 74px; font-size: 54px; line-height: .9; font-weight: var(--fw-bold); letter-spacing: -0.04em; color: var(--text-strong); font-variant-numeric: tabular-nums;}
.uaec-dash-root .dashhead__t b { display: block; font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.012em; color: var(--text-strong);}
.uaec-dash-root .dashhead__t span { display: block; margin: 5px 0 9px; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55; max-width: 62ch;}
.uaec-dash-root .dashhead__ic { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-alt); color: var(--text-muted);}
.uaec-dash-root .dashhead__ic svg { width: 22px; height: 22px; stroke-width: 1.9;}
.uaec-dash-root .dashhead--alarm { border-color: color-mix(in srgb, var(--error-500) 34%, var(--border)); background: linear-gradient(160deg, var(--error-50), #fff 68%);}
.uaec-dash-root .dashhead--alarm .dashhead__n { color: var(--error-500);}
.uaec-dash-root .dashhead--warn { border-color: color-mix(in srgb, var(--warning-700) 32%, var(--border)); background: linear-gradient(160deg, var(--warning-50), #fff 68%);}
.uaec-dash-root .dashhead--warn .dashhead__n { color: var(--warning-700);}
.uaec-dash-root .dashhead--money { border-color: color-mix(in srgb, var(--accent) 36%, var(--border)); background: linear-gradient(160deg, var(--accent-soft), #fff 72%);}
.uaec-dash-root .dashhead--money .dashhead__n { color: var(--accent-hover);}
.uaec-dash-root .dashhead--calm .dashhead__ic { background: var(--success-50); color: var(--success-700);}
@media (max-width: 560px) {.uaec-dash-root .dashhead { padding: 18px; gap: 14px;}
.uaec-dash-root .dashhead__n { font-size: 40px; min-width: 54px;}
}

/* ---- Attention: one tile carries the weight, two support it ---- */
.uaec-dash-root .att { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: stretch;}
.uaec-dash-root .att__rest { display: grid; gap: 16px; align-content: start;}
.uaec-dash-root .stat--hero { padding: 22px; gap: 10px;}
.uaec-dash-root .stat--hero .stat__k { font-size: var(--fs-sm); font-weight: var(--fw-bold);}
.uaec-dash-root .stat--hero .stat__v { font-size: 46px;}
.uaec-dash-root .stat--hero .stat__foot { font-size: var(--fs-sm);}
.uaec-dash-root .att__rest .stat { padding: 14px 16px;}
.uaec-dash-root .att__rest .stat__v { font-size: 22px;}
.uaec-dash-root .stat--alarm { border-color: color-mix(in srgb, var(--error-500) 40%, var(--border)); background: linear-gradient(160deg, var(--error-50), #fff 70%);}
.uaec-dash-root .stat--alarm .stat__v { color: var(--error-500);}
.uaec-dash-root .stat--warn { border-color: color-mix(in srgb, var(--warning-700) 36%, var(--border)); background: linear-gradient(160deg, var(--warning-50), #fff 70%);}
.uaec-dash-root .stat--money { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: linear-gradient(160deg, var(--accent-soft), #fff 72%);}
.uaec-dash-root .stat--money .stat__v { color: var(--accent-hover);}
.uaec-dash-root .stat__zen { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--success-700);}
.uaec-dash-root .stat__zen svg { width: 18px; height: 18px; stroke-width: 2; flex: none;}
.uaec-dash-root .stat__zen--dim { color: var(--text-muted); font-weight: var(--fw-medium); font-size: var(--fs-body);}
@media (max-width: 900px) {.uaec-dash-root .att { grid-template-columns: 1fr;}
.uaec-dash-root .att__rest { grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 560px) {.uaec-dash-root .att__rest { grid-template-columns: 1fr;}
}

/* ---- At a glance: history, so it speaks quietly ---- */
.uaec-dash-root .section-lead--quiet { margin: 30px 0 10px;}
.uaec-dash-root .section-lead--quiet h2 { font-size: 14px; font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted);}
.uaec-dash-root .stat--glance { padding: 13px 15px; background: var(--surface-alt); box-shadow: none;}
.uaec-dash-root .stat--glance .stat__k { font-size: 11.5px; color: var(--text-muted);}
.uaec-dash-root .stat--glance .stat__k svg { width: 13px; height: 13px;}
.uaec-dash-root .stat--glance .stat__v { font-size: 21px; color: var(--text-strong);}
.uaec-dash-root .stat--glance .stat__foot { font-size: 11px;}

/* ---- The page ends instead of trailing off ---- */
.uaec-dash-root .dashbottom { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start;}
@media (max-width: 900px) {.uaec-dash-root .dashbottom { grid-template-columns: 1fr;}
}
.uaec-dash-root .dashbottom .section-lead { margin-top: 32px;}
.uaec-dash-root .nrow--hot { background: linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 70%, #fff), transparent 80%);}
.uaec-dash-root .nrow--hot .nrow__t { color: var(--accent-hover);}

/* ---- Request detail: context, action, aftermath ---- */
/* A flex column inside a grid track has min-width:auto, which at 390px pushed the
   whole two-column workspace wider than the viewport. */
.uaec-dash-root .work > .col-flow, .uaec-dash-root .work > .work__side { min-width: 0;}
.uaec-dash-root .work--pay { grid-template-columns: minmax(0,1fr) 384px;}
@media (max-width: 1080px) {.uaec-dash-root .work--pay { grid-template-columns: 1fr;}
.uaec-dash-root .work--pay .work__side { order: -1;}
}
.uaec-dash-root .col-flow { display: flex; flex-direction: column; gap: 20px;}
.uaec-dash-root .card--action { border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); box-shadow: 0 14px 32px -22px rgba(17,106,204,.55);}
.uaec-dash-root .card--action > .card__head { background: linear-gradient(160deg, var(--accent-soft), transparent 78%);}
.uaec-dash-root .card--action > .card__head h3 { color: var(--accent-hover);}
.uaec-dash-root .afterpair { display: grid; gap: 12px; padding-left: 16px; border-left: 2px solid var(--border);}
.uaec-dash-root .afterpair > .card { box-shadow: none; background: var(--surface-alt);}
.uaec-dash-root .afterpair > .card > .card__head h3 { font-size: var(--fs-body);}
@media (max-width: 560px) {.uaec-dash-root .afterpair { padding-left: 11px;}
}
.uaec-dash-root .summary__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border);}
.uaec-dash-root .summary__grp { margin-top: 14px;}
.uaec-dash-root .summary__grp:first-of-type { margin-top: 6px;}
.uaec-dash-root .summary__grp h5 { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;}

/* ---- Contact access card (the revenue moment) ---- */
.uaec-dash-root .axc { border: 1.5px solid var(--border-strong); border-radius: var(--radius-xl); background: var(--surface); box-shadow: 0 10px 30px -18px rgba(15, 30, 60, .35); overflow: hidden;}
.uaec-dash-root .axc__head { display: flex; align-items: center; gap: 10px; padding: 15px 22px; border-bottom: 1px solid var(--border);}
.uaec-dash-root .axc__head > svg { width: 19px; height: 19px; stroke-width: 2; flex: none;}
.uaec-dash-root .axc__head h3 { font-size: 16px; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text-strong); flex: 1;}
.uaec-dash-root .axc--privacy { border-color: var(--border); box-shadow: var(--shadow-xs);}
.uaec-dash-root .axc--privacy .axc__head { color: var(--text-muted);}
.uaec-dash-root .axc--open { border-color: color-mix(in srgb, var(--accent) 45%, var(--border));}
.uaec-dash-root .axc--open .axc__head { background: linear-gradient(160deg, var(--accent-soft), transparent 75%); color: var(--accent-hover);}
.uaec-dash-root .axc--paid { border-color: color-mix(in srgb, var(--success-700) 42%, var(--border));}
.uaec-dash-root .axc--paid .axc__head { background: linear-gradient(160deg, var(--success-50), transparent 75%); color: var(--success-700);}
.uaec-dash-root .axc--settled { border-color: var(--border-strong); box-shadow: var(--shadow-xs);}
.uaec-dash-root .axc--settled .axc__head { background: var(--surface-alt); color: var(--text-secondary);}
.uaec-dash-root .axc--settled .axc__head h3 { color: var(--text-secondary);}
.uaec-dash-root .axc__body { padding: 22px;}
.uaec-dash-root .axc__body > .axid { padding-bottom: 16px; border-bottom: 1px solid var(--border);}
.uaec-dash-root .axc__foot { padding: 12px 22px; border-top: 1px solid var(--border); background: var(--gray-50); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;}

/* Who the client is before payment: initials + code, nothing else */
.uaec-dash-root .axid { display: flex; align-items: center; gap: 14px;}
.uaec-dash-root .axid__mono { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 16px; font-weight: var(--fw-bold); letter-spacing: .02em; color: var(--accent-hover); background: var(--accent-soft); border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);}
.uaec-dash-root .axid__t { min-width: 0;}
.uaec-dash-root .axid__name { font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.01em;}
.uaec-dash-root .axid__name .mono { font-weight: var(--fw-medium); color: var(--text-muted); font-size: var(--fs-body);}
.uaec-dash-root .axid__meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 5px; font-size: var(--fs-xs); color: var(--text-secondary);}
.uaec-dash-root .axid__meta span { display: inline-flex; align-items: center; gap: 5px;}
.uaec-dash-root .axid__meta svg { width: 13px; height: 13px; stroke-width: 2; flex: none;}

/* Slot meter: N of 3 */
.uaec-dash-root .slots { display: inline-flex; align-items: center; gap: 8px;}
.uaec-dash-root .slots__dots { display: inline-flex; gap: 4px;}
.uaec-dash-root .slots__dots i { width: 18px; height: 7px; border-radius: 4px; background: var(--gray-200);}
.uaec-dash-root .slots__dots i.on { background: var(--accent);}
.uaec-dash-root .slots__lab { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-secondary); white-space: nowrap;}
.uaec-dash-root .slots--full .slots__dots i.on { background: var(--error-500);}

/* Price row inside the open-access card */
.uaec-dash-root .axprice { display: flex; align-items: baseline; gap: 10px;}
.uaec-dash-root .axprice b { font-size: 30px; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--text-strong);}
.uaec-dash-root .axprice span { font-size: var(--fs-xs); color: var(--text-muted);}
.uaec-dash-root .axprice--free b { color: var(--success-700);}

/* Access is open but the server will not sell: no price, no slots, no button. */
.uaec-dash-root .blockrow { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; padding: 13px 14px; border-radius: var(--radius-md); background: var(--surface-alt); border: 1px solid var(--border);}
.uaec-dash-root .blockrow > svg { width: 19px; height: 19px; stroke-width: 1.9; color: var(--text-muted); flex: none; margin-top: 1px;}
.uaec-dash-root .blockrow > div > b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: 4px;}
.uaec-dash-root .blockrow > div > span { display: block; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.55;}
.uaec-dash-root .blockrow > div > span + span { margin-top: 6px; color: var(--text-muted); font-size: var(--fs-xs);}

/* Pay area + status line */
.uaec-dash-root .paybox { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 18px;}
.uaec-dash-root .paybox__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;}
.uaec-dash-root .paybox__card { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-secondary);}
.uaec-dash-root .paybox__card svg { width: 16px; height: 16px; stroke-width: 1.8; color: var(--text-muted); flex: none;}
.uaec-dash-root .paybox__status { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 9px; display: flex; align-items: flex-start; gap: 6px; line-height: 1.5;}
.uaec-dash-root .paybox__status svg { width: 13px; height: 13px; stroke-width: 2; flex: none; margin-top: 3px;}
.uaec-dash-root .paybox__status.is-err { color: var(--error-500);}
.uaec-dash-root .paybox__status.is-ok { color: var(--success-700);}
.uaec-dash-root .paybox__status:empty { display: none;}
.uaec-dash-root .bankmsg { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--error-50); border: 1px solid color-mix(in srgb, var(--error-500) 25%, transparent); font-size: var(--fs-xs); color: var(--text); line-height: 1.5;}
.uaec-dash-root .bankmsg b { color: var(--error-500);}
.uaec-dash-root .bankmsg .src { display: block; margin-top: 3px; font-size: 10.5px; color: var(--text-muted);}

/* Paid contacts - read instantly, act with one tap */
.uaec-dash-root .ctc__who { padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--border);}
.uaec-dash-root .ctc__name { font-size: 21px; font-weight: var(--fw-bold); letter-spacing: -0.015em; color: var(--text-strong); line-height: 1.2;}
.uaec-dash-root .ctc__co { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 3px;}
.uaec-dash-root .ctc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);}
.uaec-dash-root .ctc__row:last-child { border-bottom: none;}
.uaec-dash-root .ctc__k { grid-column: 1 / -1; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);}
.uaec-dash-root .ctc__v { font-size: 16.5px; font-weight: var(--fw-bold); color: var(--text-strong); overflow-wrap: anywhere;}
.uaec-dash-root .ctc__v a { color: var(--text-strong);}
.uaec-dash-root .ctc__v a:hover { color: var(--accent-hover);}
.uaec-dash-root .ctc__acts { display: flex; gap: 8px;}
.uaec-dash-root .ctc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; min-width: 40px; padding: 0 13px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface); font-family: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text); cursor: pointer; transition: all var(--dur) var(--ease); text-decoration: none;}
.uaec-dash-root .ctc-btn svg { width: 16px; height: 16px; stroke-width: 2; flex: none;}
.uaec-dash-root .ctc-btn:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-soft);}
.uaec-dash-root .ctc-btn--main { background: var(--accent); border-color: var(--accent); color: #fff;}
.uaec-dash-root .ctc-btn--main:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff;}
.uaec-dash-root .ctc__note { display: flex; align-items: flex-start; gap: 7px; margin-top: 7px; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.45; grid-column: 1 / -1;}
.uaec-dash-root .ctc__note svg { width: 13px; height: 13px; stroke-width: 2; color: var(--warning-700); flex: none; margin-top: 1px;}
@media (max-width: 460px) {.uaec-dash-root .ctc__row { grid-template-columns: 1fr;}
.uaec-dash-root .ctc__acts { justify-content: flex-start;}
}

/* ---- Lead reporting (what happened with this lead) ---- */
.uaec-dash-root .lstat { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 14px;}
@media (max-width: 640px) {.uaec-dash-root .lstat { grid-template-columns: 1fr;}
}
.uaec-dash-root .lstat__glab { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px;}
.uaec-dash-root .lstat__row { display: flex; gap: 8px;}
.uaec-dash-root .lstat button { flex: 1 1 0; font-family: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 13px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; text-align: left; transition: all var(--dur) var(--ease);}
.uaec-dash-root .lstat button:hover { border-color: var(--accent);}
.uaec-dash-root .lstat b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong);}
.uaec-dash-root .lstat span { font-size: 11px; color: var(--text-muted); line-height: 1.35;}
.uaec-dash-root .lstat button.is-on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent);}
.uaec-dash-root .lstat button.is-on b { color: var(--accent-hover);}
.uaec-dash-root .lstat .st-won b, .uaec-dash-root .lstat .st-lost b { font-size: 15.5px;}
.uaec-dash-root .lstat .st-won:hover { border-color: var(--success-700);}
.uaec-dash-root .lstat .st-won.is-on { border-color: var(--success-700); background: var(--success-50); box-shadow: 0 0 0 1px var(--success-700);}
.uaec-dash-root .lstat .st-won.is-on b { color: var(--success-700);}
.uaec-dash-root .lstat .st-lost:hover { border-color: var(--gray-600);}
.uaec-dash-root .lstat .st-lost.is-on { border-color: var(--gray-600); background: var(--gray-100); box-shadow: 0 0 0 1px var(--gray-600);}
.uaec-dash-root .lstat .st-lost.is-on b { color: var(--gray-600);}
.uaec-dash-root .duechip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: var(--fw-medium); color: var(--text-secondary);}
.uaec-dash-root .duechip svg { width: 14px; height: 14px; stroke-width: 2; color: var(--text-muted); flex: none;}
.uaec-dash-root .duechip.is-overdue { color: var(--error-500); font-weight: var(--fw-bold);}
.uaec-dash-root .duechip.is-overdue svg { color: var(--error-500);}

/* ---- Complaint card ---- */
.uaec-dash-root .cmpl-timer { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--warning-700); background: var(--warning-50); border: 1px solid color-mix(in srgb, var(--warning-700) 28%, transparent); border-radius: 999px; padding: 4px 11px;}
.uaec-dash-root .cmpl-timer svg { width: 13px; height: 13px; stroke-width: 2; flex: none;}
.uaec-dash-root .charcount { font-size: 11px; color: var(--text-muted); text-align: right;}
.uaec-dash-root .charcount.is-bad { color: var(--error-500); font-weight: 600;}

/* ---- Payment method (payment-service-owned frame) ---- */
.uaec-dash-root .paygrid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 340px); gap: 20px; align-items: start;}
@media (max-width: 900px) {.uaec-dash-root .paygrid { grid-template-columns: 1fr;}
}
.uaec-dash-root .stripefr { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--gray-50); padding: 14px;}
.uaec-dash-root .stripefr__bar { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 3px 9px; margin-bottom: 10px;}
.uaec-dash-root .stripefr__bar svg { width: 11px; height: 11px; stroke-width: 2; flex: none;}
.uaec-dash-root .stripefr__body { min-height: 44px;}
.uaec-dash-root .cardline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);}
.uaec-dash-root .cardline__ic { flex: none; width: 42px; height: 30px; border-radius: 6px; background: linear-gradient(158deg, #2a3a58, var(--navy-900)); display: grid; place-items: center; color: var(--navy-tint);}
.uaec-dash-root .cardline__ic svg { width: 18px; height: 18px; stroke-width: 1.8;}
.uaec-dash-root .cardline__t b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); display: block;}
.uaec-dash-root .cardline__t span { font-size: var(--fs-xs); color: var(--text-muted);}
.uaec-dash-root .billlist { display: flex; flex-direction: column; gap: 14px;}
.uaec-dash-root .billitem { display: flex; gap: 11px; align-items: flex-start;}
.uaec-dash-root .billitem > svg { width: 18px; height: 18px; stroke-width: 1.8; color: var(--text-muted); flex: none; margin-top: 2px;}
.uaec-dash-root .billitem b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: 3px;}
.uaec-dash-root .billitem span { display: block; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5;}

/* ---- Lead history rows ---- */
/* The lead-history tabs are real links, not client-side filters: `?filter=` is a
   server-side query the row list and the tab counts are both computed from. The
   shared .ftab rule was written for a <button>, so an <a> needs the box model
   spelled out and the underline removed. */
.uaec-dash-root a.ftab { display: inline-flex; align-items: center; text-decoration: none;}
.uaec-dash-root a.ftab:hover { text-decoration: none;}
.uaec-dash-root .ta-r { text-align: right !important;}
.uaec-dash-root .tbl--leads tbody td { padding: 16px; vertical-align: middle;}
.uaec-dash-root .tbl--leads tbody tr { cursor: default;}
.uaec-dash-root .tbl--leads tbody tr:hover { background: var(--gray-50);}
.uaec-dash-root .tbl tr.is-free td { background: color-mix(in srgb, var(--success-50) 35%, #fff);}
.uaec-dash-root .tbl tr.is-free:hover td { background: color-mix(in srgb, var(--success-50) 55%, #fff);}
.uaec-dash-root .tbl tr.is-overdue td { background: color-mix(in srgb, var(--warning-50) 50%, #fff);}
.uaec-dash-root .tbl tr.is-overdue:hover td { background: color-mix(in srgb, var(--warning-50) 70%, #fff);}
.uaec-dash-root .tbl tr.is-orphan td { background: var(--warning-50);}
.uaec-dash-root .amt-cell { text-align: right; white-space: nowrap;}
.uaec-dash-root .amt { display: block; font-size: 14.5px; font-weight: var(--fw-bold); color: var(--text-strong); font-variant-numeric: tabular-nums;}
.uaec-dash-root .amt--free { color: var(--success-700);}
.uaec-dash-root .amt__note { display: block; font-size: 10.5px; font-weight: var(--fw-medium); color: var(--success-700); margin-top: 2px;}
.uaec-dash-root .statcell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;}
.uaec-dash-root .statcell__set { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.uaec-dash-root .sel--inline { width: auto; min-width: 140px; padding: 6px 32px 6px 11px; font-size: var(--fs-xs); font-weight: var(--fw-medium);}
.uaec-dash-root .sel--warn { border-color: var(--warning-500); background-color: var(--warning-50); font-weight: 600; color: var(--warning-700);}
.uaec-dash-root .sel--err { border-color: var(--error-500); background-color: var(--error-50); font-weight: 600; color: var(--error-500);}
.uaec-dash-root .outcome-open { display: inline-block; font-size: var(--fs-xs); color: var(--gray-400);}
.uaec-dash-root .orphan-note { display: flex; align-items: flex-start; gap: 6px; max-width: 320px; font-size: 11.5px; line-height: 1.45; color: var(--warning-700); font-weight: var(--fw-medium);}
.uaec-dash-root .orphan-note svg { width: 14px; height: 14px; stroke-width: 2; flex: none; margin-top: 1px;}
.uaec-dash-root .linklike { background: none; border: none; padding: 0; font-family: inherit; font-size: inherit; color: var(--accent); font-weight: var(--fw-bold); cursor: pointer; text-decoration: none;}
.uaec-dash-root .linklike:hover { color: var(--accent-hover); text-decoration: underline;}
.uaec-dash-root .hint-inline { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5;}
.uaec-dash-root .hint-inline svg { width: 14px; height: 14px; stroke-width: 2; color: var(--accent); flex: none; margin-top: 1px;}

/* ---- Narrow screens: an action button never leaves its card ----
   The labels are the product's own words and are not shortened, so on a phone the
   row becomes a stack: the button takes the full width, wraps its label, and the
   note that sat beside it moves underneath. Desktop keeps content-width buttons. */
@media (max-width: 620px) {
  .uaec-dash-root .paybox__row { flex-direction: column; align-items: stretch;}
  .uaec-dash-root .paybox__row .uaec-btn,
  .uaec-dash-root .notice__b .uaec-btn,
  .uaec-dash-root .axc__body .uaec-btn { width: 100%; white-space: normal; text-align: center; height: auto; min-height: 46px; padding-top: 11px; padding-bottom: 11px; line-height: 1.35;}
  .uaec-dash-root .paybox__card { margin-top: 2px;}
}

/* ============================================================
   PAY PER LEAD - client spine (port batch 2, 2026-07-28)
   Ported from ui_kits/emirae-dashboard-v2/v2.css (build "Back
   office v2 - reconciled 27 Jul 2026") via DesignSync.
   Screens: applicant overview, my requests.
   Scoped under .uaec-dash-root like the rest of this file, and
   every icon box carries explicit svg sizing - the PHP icon
   helper emits a bare <svg>.
   ============================================================ */

/* ---- First run: the screen is an invitation, not an empty box ---- */
.uaec-dash-root .invite { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start;}
@media (max-width: 900px) {.uaec-dash-root .invite { grid-template-columns: 1fr;}
}

/* ---- Offer card: one offer, one row, the same three facts in the same places ---- */
.uaec-dash-root .offcard { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xs); text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.uaec-dash-root .offcard:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 12px 26px -18px rgba(17,106,204,.5);}
.uaec-dash-root .offcard--accepted { border-color: color-mix(in srgb, var(--success-700) 40%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--success-50) 70%, #fff), #fff 65%);}
.uaec-dash-root .offcard__who { min-width: 0;}
.uaec-dash-root .offcard__marks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px;}
.uaec-dash-root .offcard__f { text-align: right; min-width: 0;}
.uaec-dash-root .offcard__f span { display: block; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);}
.uaec-dash-root .offcard__f b { display: block; margin-top: 2px; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); white-space: nowrap;}
.uaec-dash-root .offcard__f--soft b { font-weight: var(--fw-medium); color: var(--text-secondary);}
.uaec-dash-root .offcard__go { color: var(--text-muted); display: inline-flex;}
.uaec-dash-root .offcard__go svg { width: 18px; height: 18px; stroke-width: 2;}
@media (max-width: 720px) {.uaec-dash-root .offcard { grid-template-columns: auto minmax(0,1fr);}
.uaec-dash-root .offcard__f { grid-column: 1 / -1; text-align: left;}
.uaec-dash-root .offcard__f b { white-space: normal;}
.uaec-dash-root .offcard__go { display: none;}
}

/* ---- The person rows shared by the offer card and the access block ---- */
.uaec-dash-root .axrow__av { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 13px; font-weight: var(--fw-bold); color: var(--navy-tint); background: linear-gradient(158deg, #2a3a58, var(--navy-900)); flex: none;}
.uaec-dash-root .axrow__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.uaec-dash-root .axrow__sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px;}
.uaec-dash-root .axrow__facts { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 3px;}

/* ---- My Requests: a work list, not a report ---- */
.uaec-dash-root .worklead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--warning-700);}
.uaec-dash-root .worklead svg { width: 16px; height: 16px; stroke-width: 2; flex: none;}
.uaec-dash-root .tbl__title { display: block; margin-top: 3px; font-weight: var(--fw-medium); color: var(--text-strong);}
.uaec-dash-root .tbl--work tbody td { padding: 14px 16px; vertical-align: middle;}
/* A row that cannot move until a person acts. The tint is the cue, the position in the
   list is the actual mechanism - these rows are sorted to the top server-side. */
.uaec-dash-root .tbl tr.is-todo td { background: color-mix(in srgb, var(--warning-50) 45%, #fff);}
.uaec-dash-root .tbl tr.is-todo:hover td { background: color-mix(in srgb, var(--warning-50) 65%, #fff);}
.uaec-dash-root .ocard.is-todo { border-color: color-mix(in srgb, var(--warning-700) 30%, var(--border)); background: color-mix(in srgb, var(--warning-50) 45%, #fff);}

/* ---- Anonymised consultant: the two facts a choice is actually made on ---- */
.uaec-dash-root .factpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px;}
/* A fact is a label and a number, not a tile. The kit gives `.reqf` nothing but
   `min-width: 0` - the container it had here (padding + surface-alt + border)
   turned a bare row of facts into a row of grey boxes, and it is the boxes the
   eye reads instead of the numbers. `--fw-bold` is 700, the kit's literal. */
.uaec-dash-root .reqf { min-width: 0;}
.uaec-dash-root .reqf > span { display: block; font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);}
.uaec-dash-root .reqf > b { display: block; margin-top: 3px; font-size: 15px; font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.012em; font-variant-numeric: tabular-nums;}

/* ---- Form controls never widen their container ----
   Measured 2026-07-28 on applicant/request-detail at 375 px: a bare
   <textarea cols="60"> in the not-yet-reskinned edit form has an intrinsic
   width of 495 px, which pushed the whole page to a 553 px scrollWidth inside
   a 375 px viewport. `cols` is an intrinsic size, not a maximum, so nothing
   below it can win - the ceiling has to be stated here.
   Kept as a dashboard-wide rule rather than a per-screen patch: any control
   that arrives without a class has the same intrinsic behaviour, and the
   remaining un-reskinned screens are full of them. */
.uaec-dash-root textarea,
.uaec-dash-root input,
.uaec-dash-root select { max-width: 100%; min-width: 0;}
/* `min-width: 0` is the half that actually does the work. max-width alone loses:
   it resolves against a parent that the control has ALREADY widened, because a
   grid/flex item defaults to min-width:auto and a textarea's min-content size is
   its `cols`. Measured both ways on the same screen. */
.uaec-dash-root .work > * { min-width: 0;}

/* ============================================================
   PROVIDER FEED CARD (screen 1: provider/requests)
   Ported from ui_kits/emirae-dashboard-v2/v2.css + p-work.js
   miniReq(), build "Back office v2 - reconciled 27 Jul 2026".
   Tail layer, scoped like the rest of the file.
   ============================================================ */

/* Four facts in four fixed places, so two requests compare by eye. One hairline
   separates them from the title above; `auto-fit` does the reflow the two
   breakpoint overrides used to do by hand. */
.uaec-dash-root .req__facts { grid-column: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 10px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);}
.uaec-dash-root .reqf__x { display: block; margin-top: 2px; font-size: 11px; font-weight: var(--fw-medium); color: var(--text-muted); line-height: 1.35;}
/* A state colours the NUMBER, never the cell. Painting the box put four ranked
   colour fields on a card whose actual subject is the request. Order matters:
   these sit after `.reqf > b`, which they tie with on specificity. */
.uaec-dash-root .reqf--warn > b,
.uaec-dash-root .reqf--warn .reqf__x { color: var(--warning-700);}
.uaec-dash-root .reqf--fresh > b { color: var(--accent-hover);}
.uaec-dash-root .reqf--full > b { color: var(--text-muted);}

/* The lead price on the card, BEFORE any decision (LOGIC_SPEC section 6). One
   line, not a fifth fact tile: it is the money sentence of the card, and it
   reads left to right as a sentence - label, amount, then the credit or
   partner qualifier when one applies. `--free` colours the amount like the
   other good-news numbers; the qualifier never shouts. */
.uaec-dash-root .req__pay { grid-column: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: var(--fs-sm);}
.uaec-dash-root .req__pay svg { width: 15px; height: 15px; align-self: center; color: var(--text-muted); flex: none;}
.uaec-dash-root .req__pay > span { font-size: 9.5px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);}
.uaec-dash-root .req__pay > b { font-size: 15px; font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.012em; font-variant-numeric: tabular-nums;}
.uaec-dash-root .req__pay > em { font-style: normal; font-size: 11px; font-weight: var(--fw-medium); color: var(--text-muted);}
.uaec-dash-root .req__pay--free > b,
.uaec-dash-root .req__pay--free svg { color: var(--accent-hover);}

/* The match score as it is. The weights in UAEC_Service_Matching::WEIGHTS sum to
   exactly 100 (30+25+20+10+10+5) and a request carries at most one term per
   taxonomy, so the score really is out of 100 and a proportional bar is honest.
   There is no Strong / Good / Fair scale anywhere in the system, so none is shown.
   The bar is capped rather than full-bleed: it belongs to the Match fact, so it
   is as wide as that fact, not as wide as the card. */
.uaec-dash-root .matchtrack { display: block; width: 100%; max-width: 92px; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--gray-200); overflow: hidden;}
.uaec-dash-root .matchtrack i { display: block; height: 100%; border-radius: 3px; background: var(--accent);}

/* "Already answered" is a closing state, not a call to action: it stops the card
   competing for attention instead of decorating it. The kit settles it back onto
   the page - alt surface, no shadow, quieter title - rather than fading the whole
   card, which dims the request text along with everything else. */
.uaec-dash-root .req--done { background: var(--surface-alt); border-color: var(--border); box-shadow: none;}
.uaec-dash-root .req--done:hover { transform: none; box-shadow: var(--shadow-xs); border-color: var(--border-strong);}
.uaec-dash-root .req--done .req__title { color: var(--text-secondary);}
.uaec-dash-root .req--done .req__arrow { background: var(--surface);}
.uaec-dash-root .chip--warnfill { background: var(--warning-500); color: #5a4409; border-color: transparent;}
.uaec-dash-root .chip--warnfill svg { width: 12px; height: 12px; stroke-width: 2.2;}

/* ============================================================
   TABLE PAGER (screen 2: provider/my-offers)
   Ported from ui_kits/emirae-dashboard-v2/v2.css, build
   "Back office v2 - reconciled 27 Jul 2026". Tail layer.
   ============================================================ */
.uaec-dash-root .pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px;}
.uaec-dash-root .pager__x { font-size: var(--fs-xs); color: var(--text-muted);}
.uaec-dash-root .pager__btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.uaec-dash-root .pager__b,
.uaec-dash-root .pager__n { font-family: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 6px 11px; display: inline-flex; align-items: center; gap: 5px; text-decoration: none;}
.uaec-dash-root .pager__b svg { width: 13px; height: 13px; stroke-width: 2.2; flex: none;}
.uaec-dash-root .pager__n { min-width: 30px; justify-content: center;}
.uaec-dash-root .pager__b:hover,
.uaec-dash-root .pager__n:hover { background: var(--accent-soft); color: var(--accent-hover); border-color: color-mix(in srgb, var(--accent) 30%, transparent);}
.uaec-dash-root .pager__n.is-on { background: var(--accent); border-color: var(--accent); color: #fff;}
.uaec-dash-root .pager__b.is-off { opacity: .45; pointer-events: none;}

/* ---- Notifications: who a row is about (screen 4) ----
   Rendered only for rows carrying data.provider_id, and the value comes from
   UAEC_Service_Event_Feed::get_for_user(), which resolves it per read through
   is_consultant_revealed(). Before this the anonymisation layer on read had no
   consumer at all. */
.uaec-dash-root .nrow__who { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-secondary);}
.uaec-dash-root .nrow__who svg { width: 13px; height: 13px; stroke-width: 2; color: var(--text-muted); flex: none;}

/* ============================================================
   KIT FIDELITY PASS 2 (2026-07-29) - provider screens + shared base.
   Source of truth: DesignSync ui_kits/emirae-dashboard-v2 base.css + v2.css,
   build "Back office v2 - reconciled 27 Jul 2026". Where the kit defines a
   component twice (early pass + late visual pass), the LATE block is the
   truth, because that is what the kit's own cascade renders - .stripefr and
   .sel--inline below were originally ported from the early blocks.
   Tail layer: same specificity as the originals above, later in file wins.
   ============================================================ */

/* ---- shell / base ---- */
.uaec-dash-root .dash { --dash-max: 1360px;}
.uaec-dash-root .chip { padding: 2px 9px 2px 8px; font-size: 11.5px; line-height: 1.55; letter-spacing: .005em;}
.uaec-dash-root .chip::before { width: 5px; height: 5px;}
.uaec-dash-root .chip--sm { padding: 1px 8px 1px 7px; font-size: 10.5px; gap: 4px;}
.uaec-dash-root .chip--sm::before { width: 4px; height: 4px;}
.uaec-dash-root .chip--sm svg { width: 11px; height: 11px;}
.uaec-dash-root .chip--warnfill { color: #4a3805;}
.uaec-dash-root .chip--warnfill::before { display: none;}
.uaec-dash-root .badge-new { font-size: 9.5px; letter-spacing: .05em; padding: 2px 7px;}
.uaec-dash-root .card--pad { padding: 20px;}
.uaec-dash-root .card__head h3 { font-size: 16px;}
.uaec-dash-root .section-lead { margin: 32px 0 14px;}
.uaec-dash-root .section-lead h2 { letter-spacing: -0.015em;}
.uaec-dash-root .dl__row { padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);}
.uaec-dash-root .dl__k { color: var(--text-muted); font-size: var(--fs-xs);}
/* The summary aside is a quiet grey block in the kit, not a raised card. */
.uaec-dash-root .summary { padding: 16px 18px; border-radius: var(--radius-lg); background: var(--gray-50); box-shadow: none;}
.uaec-dash-root .summary h4 { font-size: 10px; margin-bottom: 10px;}
.uaec-dash-root .summary__top { padding-bottom: 10px; margin-bottom: 6px;}
.uaec-dash-root .summary__top .mono { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--text-strong);}
/* h5 group titles inside the summary were never styled here - browser default
   rendered them oversized. Kit block, verbatim. */
.uaec-dash-root .summary__grp > h5 { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 4px;}
.uaec-dash-root .work { gap: 20px;}
.uaec-dash-root .work__side { gap: 20px;}
@media (max-width: 900px) {.uaec-dash-root .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;}
}
/* A free-lead row is plain in the kit - the Free chip in the row is the marker,
   the wash was ours. */
.uaec-dash-root .tbl tr.is-free td { background: #fff;}
.uaec-dash-root .tbl tr.is-free:hover td { background: var(--gray-50);}

/* ---- provider: overview + feed meta ---- */
.uaec-dash-root .req__meta { gap: 8px 14px; margin-top: 6px;}
.uaec-dash-root .req__meta .is-key { color: var(--text); font-weight: var(--fw-medium);}
.uaec-dash-root .req__meta .is-key b { color: var(--text-strong);}
.uaec-dash-root .req__meta .is-warn,
.uaec-dash-root .req__meta .is-warn b { color: var(--warning-700); font-weight: var(--fw-bold);}
.uaec-dash-root .req__meta .meta-sep { width: 1px; height: 14px; background: var(--border-strong); padding: 0;}
.uaec-dash-root .att { align-items: start;}
.uaec-dash-root .nrow__ic { width: 34px; height: 34px; border-radius: 10px;}
.uaec-dash-root .nrow__ic svg { width: 18px; height: 18px;}
.uaec-dash-root .nrow--hot .nrow__x b { color: var(--text-strong);}
/* Stat states: flat washes in the kit, not gradients; zen line is quiet grey
   with only the tick green. */
.uaec-dash-root .stat--alarm { background: var(--error-50); border-color: color-mix(in srgb, var(--error-500) 34%, var(--border));}
.uaec-dash-root .stat--warn { background: var(--warning-50); border-color: color-mix(in srgb, var(--warning-700) 32%, var(--border));}
.uaec-dash-root .stat--money { background: linear-gradient(160deg, var(--accent-soft), #fff 75%); border-color: color-mix(in srgb, var(--accent) 36%, var(--border));}
.uaec-dash-root .stat__zen { gap: 8px; padding: 6px 0 2px; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-muted);}
.uaec-dash-root .stat__zen svg { width: 16px; height: 16px; stroke-width: 2.2; color: var(--success-700);}
.uaec-dash-root .stat__zen--dim svg { color: var(--gray-400);}

/* ---- provider: lead history / money ---- */
.uaec-dash-root .amt--free { color: var(--text-secondary);}
.uaec-dash-root .amt__note { color: var(--text-muted);}
.uaec-dash-root .statcell { gap: 7px;}
.uaec-dash-root .sel--inline { min-width: 168px; height: 38px; padding: 0 34px 0 12px; font-weight: var(--fw-bold); color: var(--text-strong); background-color: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-xs);}
.uaec-dash-root .sel--inline:hover { border-color: var(--accent);}
.uaec-dash-root .tbl--leads tbody tr.is-overdue td { background: color-mix(in srgb, var(--warning-50) 55%, #fff);}
.uaec-dash-root .tbl--leads tbody tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--warning-700);}
.uaec-dash-root .tbl--leads tbody tr.is-overdue:hover td { background: color-mix(in srgb, var(--warning-50) 75%, #fff);}
.uaec-dash-root .tbl--queue tbody tr:first-child td { background: var(--gray-50);}
.uaec-dash-root .tbl--queue tbody tr:first-child td:first-child { box-shadow: inset 3px 0 0 var(--text-muted);}
.uaec-dash-root .ocard.is-todo { border-color: color-mix(in srgb, var(--warning-700) 32%, var(--border)); background: color-mix(in srgb, var(--warning-50) 55%, #fff);}

/* ---- provider: payment method ---- */
/* The kit's LATE .stripefr is a framed field with a dark service bar and a
   striped body - the dashed grey box we shipped was the kit's EARLY draft. */
.uaec-dash-root .stripefr { padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden;}
.uaec-dash-root .stripefr__bar { display: flex; align-items: center; gap: 8px; margin-bottom: 0; padding: 9px 14px; border: none; border-radius: 0; background: var(--navy-800, #16233d); color: #cfe0f7; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em;}
.uaec-dash-root .stripefr__bar svg { width: 12px; height: 12px; stroke-width: 2.2;}
.uaec-dash-root .stripefr__body { padding: 16px 14px; background: repeating-linear-gradient(135deg, var(--gray-50) 0 8px, #fff 8px 16px);}
.uaec-dash-root .billlist { display: grid; gap: 0;}
.uaec-dash-root .billitem { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--border);}
.uaec-dash-root .billitem:first-child { border-top: none; padding-top: 4px;}
.uaec-dash-root .billitem > svg { width: 15px; height: 15px; stroke-width: 1.9;}
.uaec-dash-root .billitem b { font-size: var(--fs-xs);}
.uaec-dash-root .billitem span { line-height: 1.6;}
.uaec-dash-root .paybox__status { align-items: center;}
.uaec-dash-root .paybox__status svg { margin-top: 0;}

/* ============================================================
   KIT FIDELITY PASS 3 (2026-07-29) - client screens.
   Same source and same tail-layer rules as pass 2 above.
   ============================================================ */

/* Invite panel: kit proportions. The kit collapses at 860, ours collapsed at
   900 - the 900 rule above is overridden back to two columns and the collapse
   is re-declared at the kit's own breakpoint. */
.uaec-dash-root .invite { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px;}
@media (max-width: 900px) {.uaec-dash-root .invite { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);}
}
@media (max-width: 860px) {.uaec-dash-root .invite { grid-template-columns: 1fr;}
}
@media (max-width: 620px) {.uaec-dash-root .invite .form-actions { flex-direction: column; align-items: stretch;}
.uaec-dash-root .invite .form-actions .uaec-btn { width: 100%; white-space: normal; text-align: center; height: auto; min-height: 46px; padding-top: 11px; padding-bottom: 11px; line-height: 1.35;}
}

/* Offer cards: the base card on the client overview gets the kit's compare
   geometry (fixed fact columns so cards align by eye), matching the --cmp
   variant the request-detail list already carries. */
.uaec-dash-root .offcard { grid-template-columns: auto minmax(0,1fr) 132px 138px auto; gap: 16px;}
.uaec-dash-root .offcard__f { text-align: left;}
.uaec-dash-root .offcard__f > span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px;}
.uaec-dash-root .offcard__f > b { display: block; margin-top: 0; font-size: 15.5px; font-weight: var(--fw-bold); color: var(--text-strong); letter-spacing: -0.012em; white-space: normal;}
.uaec-dash-root .offcard__f--soft > b { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary);}
.uaec-dash-root .offcard__go { display: flex; align-items: center; flex: none;}
.uaec-dash-root .offcard__go svg { display: block; stroke-width: 2.2;}
.uaec-dash-root .offcard__marks { margin-top: 7px;}
@media (max-width: 900px) {.uaec-dash-root .offcard { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 12px;}
.uaec-dash-root .offcard__f { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 10px;}
.uaec-dash-root .offcard__f > span { margin-bottom: 0; min-width: 66px;}
}

/* Work list: kit row title and lead line. */
.uaec-dash-root .tbl__title { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--text-secondary); max-width: 34ch;}
.uaec-dash-root .worklead { font-weight: var(--fw-bold);}
.uaec-dash-root .worklead svg { display: block; stroke-width: 2.2;}
.uaec-dash-root .tbl--work tbody tr.is-todo td { background: color-mix(in srgb, var(--warning-50) 55%, #fff);}
.uaec-dash-root .tbl--work tbody tr.is-todo td:first-child { box-shadow: inset 3px 0 0 var(--warning-700);}
.uaec-dash-root .tbl--work tbody tr.is-todo:hover td { background: color-mix(in srgb, var(--warning-50) 78%, #fff);}

/* Access rows: the numbers column reads as numbers. */
.uaec-dash-root .axrow__facts { font-weight: var(--fw-medium); font-variant-numeric: tabular-nums;}