/* ===== Anjiz — design system =====
   Concept: a trusted delegate that submits your applications for you.
   Primary = deep indigo (trust, officialdom). Accent = seal amber ("stamped / submitted").
   One typeface (Readex Pro) carries both Arabic and Latin for a coherent bilingual system. */

:root {
  --ink: #141A2E;
  --ink-2: #3A4157;
  --muted: #727A8C;
  --faint: #9AA1B2;
  --canvas: #F4F5F8;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --line: #E5E7EE;
  --line-2: #EEF0F5;

  --brand: #2E2A72;          /* deep indigo — primary actions */
  --brand-ink: #4842A8;      /* lighter indigo for accents on light bg */
  --brand-wash: #EEEDF8;
  --seal: #C0871B;           /* amber — the stamp of approval, used sparingly */
  --seal-wash: #F8F0DD;

  --st-queued: #94A3B8;
  --st-running: #3B6FE0;
  --st-human: #CF8C1E;
  --st-review: #7C5CE0;
  --st-done: #10916E;
  --st-error: #D1455B;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-pop: 0 18px 50px -20px rgba(20, 26, 46, .35);
  --maxw: 1180px;
  --ff: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff);
  background: var(--canvas);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }

/* logical properties so one rule serves RTL and LTR */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-block-end: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; color: var(--ink); }
.brand .seal {
  width: 30px; height: 30px; border-radius: 9px;
  background: radial-gradient(120% 120% at 30% 25%, #E4B84E, var(--seal));
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), 0 4px 12px -4px rgba(192,135,27,.6);
}
.brand small { color: var(--muted); font-weight: 400; font-size: 13px; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--muted); font-size: 14px; }

.chipbtn {
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); border-radius: 999px; padding: 7px 14px; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 7px; transition: border-color .15s, background .15s;
}
.chipbtn:hover { border-color: var(--brand-ink); color: var(--brand); }

/* ---------- Buttons ---------- */
.btn {
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 11px 18px; font-size: 14.5px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .06s ease, background .15s, border-color .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 10px 24px -12px rgba(46,42,114,.8); }
.btn-primary:hover { background: #262263; }
.btn-ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand-ink); color: var(--brand); }
.btn-danger { background: var(--surface); color: var(--st-error); border-color: #F2D2D8; }
.btn-danger:hover { background: #FDF3F5; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---------- Auth screen ---------- */
.auth {
  min-height: 100dvh; display: grid; grid-template-columns: 1.05fr .95fr;
}
.auth-aside {
  background:
    radial-gradient(130% 100% at 80% -10%, #3b358f 0%, transparent 55%),
    linear-gradient(160deg, #232056, #171436);
  color: #EDEDF7; padding: 56px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-aside .mark { display: flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 600; }
.auth-aside .mark .seal { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; }
.auth-hero h1 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
.auth-hero p { color: #B9B7D6; font-size: 17px; max-width: 42ch; margin-top: 16px; }
.auth-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.auth-steps .s { display: flex; align-items: center; gap: 13px; color: #CFCDE6; font-size: 15px; }
.auth-steps .s .n {
  width: 27px; height: 27px; border-radius: 8px; flex: none;
  background: rgba(255,255,255,.08); display: grid; place-items: center;
  font-size: 13px; color: #E4C877; border: 1px solid rgba(228,200,119,.3);
}
.auth-main { display: grid; place-items: center; padding: 40px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h2 { font-size: 24px; }
.auth-card .sub { color: var(--muted); margin: 8px 0 26px; font-size: 14.5px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 7px; font-weight: 500; }
.input, .textarea, select.input {
  width: 100%; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-sm); padding: 11px 13px; font-size: 14.5px; color: var(--ink);
  font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.input:focus, .textarea:focus, select.input:focus {
  outline: none; border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.textarea { min-height: 84px; resize: vertical; }
.hint { color: var(--faint); font-size: 12.5px; margin-top: 6px; }
.formrow { display: flex; gap: 10px; align-items: center; }
.switchbox {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface-2);
}
.switchbox .t { font-size: 14px; font-weight: 500; }
.switchbox .d { font-size: 12.5px; color: var(--muted); }
.switch { position: relative; width: 44px; height: 25px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: #CBD0DB; border-radius: 999px; transition: .2s; }
.switch .track::before {
  content: ""; position: absolute; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; inset-block-start: 3px; inset-inline-start: 3px; transition: .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::before { inset-inline-start: 22px; }

/* ---------- App layout ---------- */
.page { padding-block: 30px 70px; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.pagehead h1 { font-size: 26px; }
.pagehead p { color: var(--muted); margin: 6px 0 0; font-size: 14.5px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 12px; transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: #D4D7E2; box-shadow: 0 10px 30px -22px rgba(20,26,46,.4); }
.card .ttl { font-size: 16.5px; font-weight: 600; }
.card .url { color: var(--brand-ink); font-size: 12.5px; word-break: break-all; display: flex; align-items: center; gap: 6px; }
.card .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.card .row { display: flex; gap: 8px; margin-top: 2px; }

.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 9px; border-radius: 999px; font-weight: 500; }
.tag .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag.queued { color: var(--st-queued); background: #F1F3F7; }
.tag.running { color: var(--st-running); background: #EAF0FC; }
.tag.needs_human { color: var(--st-human); background: var(--seal-wash); }
.tag.review_ready { color: var(--st-review); background: #F1ECFC; }
.tag.submitted { color: var(--st-done); background: #E6F4EF; }
.tag.error { color: var(--st-error); background: #FBECEF; }

.empty {
  border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 48px 24px;
  text-align: center; color: var(--muted); background: var(--surface-2);
}
.empty h3 { color: var(--ink); font-size: 18px; margin-bottom: 8px; }
.empty p { margin: 0 auto 18px; max-width: 46ch; font-size: 14px; }

/* ---------- Key/value rows ---------- */
.kv { display: flex; flex-direction: column; gap: 9px; }
.kv .krow { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 8px; align-items: center; }
.kv .krow .x { border: none; background: transparent; color: var(--faint); font-size: 18px; width: 34px; height: 38px; border-radius: 8px; }
.kv .krow .x:hover { background: #FBECEF; color: var(--st-error); }
.suggest { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.suggest button {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 5px 11px; font-size: 12.5px;
}
.suggest button:hover { border-color: var(--brand-ink); color: var(--brand); background: var(--brand-wash); }

.filechip {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 11px; font-size: 13px; background: var(--surface-2);
}
.filechip .k { color: var(--brand); font-weight: 600; }
.filechip .fn { color: var(--muted); }

/* ---------- Drawer (run detail) ---------- */
.scrim { position: fixed; inset: 0; background: rgba(18,22,38,.42); z-index: 40; opacity: 0; transition: opacity .2s; }
.scrim.show { opacity: 1; }
.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; width: min(560px, 100%);
  background: var(--surface); z-index: 50; box-shadow: var(--shadow-pop);
  transform: translateX(var(--off, 100%)); transition: transform .28s cubic-bezier(.4,0,.1,1);
  display: flex; flex-direction: column;
}
html[dir="rtl"] .drawer { --off: -100%; }
.drawer.show { transform: translateX(0); }
.drawer .dhead { padding: 20px 22px; border-block-end: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer .dhead h3 { font-size: 18px; }
.drawer .dhead .murl { color: var(--brand-ink); font-size: 12px; word-break: break-all; margin-top: 4px; }
.drawer .dbody { padding: 22px; overflow-y: auto; flex: 1; }
.iconbtn { border: none; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; padding: 4px 8px; border-radius: 8px; }
.iconbtn:hover { background: var(--line-2); color: var(--ink); }

/* ---------- Live timeline (signature element) ---------- */
.statusline { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.statusline .msg { color: var(--muted); font-size: 13.5px; }

.timeline { position: relative; padding-inline-start: 26px; }
.timeline::before {
  content: ""; position: absolute; inset-block: 6px 6px; inset-inline-start: 7px;
  width: 2px; background: var(--line-2);
}
.tl { position: relative; padding-block: 9px; }
.tl .node {
  position: absolute; inset-inline-start: -26px; inset-block-start: 11px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--st-queued); z-index: 1;
}
.tl.on .node { border-color: var(--st-running); background: var(--st-running); box-shadow: 0 0 0 4px #EAF0FC; }
.tl.ok .node { border-color: var(--st-done); background: var(--st-done); }
.tl.human .node { border-color: var(--st-human); background: var(--st-human); }
.tl.err .node { border-color: var(--st-error); background: var(--st-error); }
.tl .lbl { font-size: 14px; font-weight: 500; }
.tl .det { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pulse .node { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(59,111,224,.5); } 50% { box-shadow: 0 0 0 7px rgba(59,111,224,0); } }

.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.shots a { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; display: block; }
.shots img { width: 100%; display: block; }
.shotlabel { font-size: 11.5px; color: var(--muted); padding: 6px 8px; border-block-start: 1px solid var(--line-2); background: var(--surface-2); }

.notice {
  border-radius: var(--radius-sm); padding: 13px 15px; font-size: 13.5px; margin-bottom: 16px; display: flex; gap: 10px;
}
.notice.human { background: var(--seal-wash); color: #8A6413; border: 1px solid #ECD9A8; }
.notice.done { background: #E6F4EF; color: #0A6A50; border: 1px solid #BCE3D5; }
.notice.err { background: #FBECEF; color: #A32638; border: 1px solid #F2CDD5; }
.notice.missing { background: #F1F3F7; color: var(--ink-2); border: 1px solid var(--line); }

/* ---------- Modal ---------- */
.modal-scrim { position: fixed; inset: 0; background: rgba(18,22,38,.5); z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal {
  background: var(--surface); border-radius: var(--radius); width: min(560px, 100%);
  max-height: 90dvh; overflow-y: auto; box-shadow: var(--shadow-pop);
}
.modal .mhead { padding: 20px 22px 0; }
.modal .mhead h3 { font-size: 20px; }
.modal .mhead p { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; }
.modal .mbody { padding: 20px 22px; }
.modal .mfoot { padding: 16px 22px; border-block-start: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; background: var(--surface); }
.section-label { font-size: 13px; color: var(--ink-2); font-weight: 600; margin: 20px 0 10px; }

/* ---------- Toast ---------- */
.toasts { position: fixed; inset-block-end: 22px; inset-inline: 22px auto; z-index: 80; display: flex; flex-direction: column; gap: 10px; }
html[dir="ltr"] .toasts { inset-inline: auto 22px; }
.toast {
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 13.5px; box-shadow: var(--shadow-pop); animation: rise .25s ease; max-width: 340px;
}
.toast.ok { background: #0C6A50; }
.toast.err { background: #A32638; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .kv .krow { grid-template-columns: 1fr 1fr auto; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===== Sidebar admin shell (Nafeer-grade polish) ===== */
.shell { display: grid; grid-template-columns: 1fr 258px; min-height: 100dvh; }
html[dir="ltr"] .shell { grid-template-columns: 258px 1fr; }

.sidebar {
  grid-column: 2; background: var(--surface); border-inline-start: 1px solid var(--line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh;
}
html[dir="ltr"] .sidebar { grid-column: 1; border-inline-start: none; border-inline-end: 1px solid var(--line); }
.sidebar .sbrand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 16px; font-weight: 600; font-size: 18px; }
.sidebar .sbrand .seal { width: 30px; height: 30px; border-radius: 9px; }
.sidebar .sbrand small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 1px; }
.nav { padding: 8px 12px; overflow-y: auto; flex: 1; }
.nav .grouplbl { color: var(--faint); font-size: 11.5px; font-weight: 600; padding: 14px 10px 6px; letter-spacing: .02em; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  color: var(--ink-2); font-size: 14px; text-decoration: none; cursor: pointer; transition: background .13s, color .13s;
}
.nav a i { width: 20px; text-align: center; color: var(--faint); font-size: 18px; }
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--brand-wash); color: var(--brand); font-weight: 500; }
.nav a.active i { color: var(--brand-ink); }
.sidebar .sfoot { border-block-start: 1px solid var(--line); padding: 12px; }
.sidebar .sfoot .u { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.sidebar .sfoot .av { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-wash); color: var(--brand); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.sidebar .sfoot .u .nm { font-size: 13.5px; font-weight: 500; }
.sidebar .sfoot .u .em { font-size: 11.5px; color: var(--muted); }

.main { grid-column: 1; min-width: 0; display: flex; flex-direction: column; }
html[dir="ltr"] .main { grid-column: 2; }
.mainbar {
  display: flex; align-items: center; gap: 12px; padding: 0 28px; height: 60px;
  border-block-end: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20;
}
.infopill {
  display: inline-flex; align-items: center; gap: 7px; background: var(--seal-wash); color: #8A6413;
  border: 1px solid #ECD9A8; border-radius: 999px; padding: 5px 13px; font-size: 12.5px;
}
.content { padding: 26px 28px 70px; flex: 1; }
.settings-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; max-width: 560px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-block-end: 1px solid var(--line-2); }
.settings-row:last-child { border: 0; }
.settings-row .l { font-size: 14px; font-weight: 500; }
.settings-row .d { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

@media (max-width: 820px) {
  .shell, html[dir="ltr"] .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; border: 0; border-block-end: 1px solid var(--line); grid-column: 1; overflow-x: auto; }
  .sidebar .sbrand { padding: 14px 16px; }
  .sidebar .nav { display: flex; padding: 8px; }
  .sidebar .nav .grouplbl { display: none; }
  .sidebar .sfoot { display: none; }
  .main { grid-column: 1; }
  .mainbar { padding: 0 16px; }
  .content { padding: 18px 16px 60px; }
}

/* ===== Injaz brand logo ===== */
/* The mark seal: navy icon on light backgrounds, white icon on dark ones. */
.seal{
  background: transparent url('mark-navy.png') center/contain no-repeat !important;
  border:0 !important; box-shadow:none !important; color:transparent !important;
  border-radius:0 !important;
}
.auth-aside .mark .seal{ background-image:url('mark-white.png') !important; }
/* Full wordmark lockups */
.brand-logo{ height:42px; width:auto; display:block; }
.auth-aside .mark{ margin-bottom:4px; }
.sidebar .sbrand{ padding:22px 20px 18px; }
.sidebar .sbrand .brand-logo-word{ height:30px; width:auto; display:block; }
@media (max-width: 820px){
  .sidebar .sbrand .brand-logo-word{ height:26px; }
}

/* ===== Human-input panel (CAPTCHA / OTP) inside the transaction ===== */
.inputpanel{ border:1.5px solid var(--st-human, #CF8C1E); background:var(--seal-wash, #F8F0DD);
  border-radius:12px; padding:16px; margin-bottom:16px; }
.inputpanel .ip-h{ font-weight:700; font-size:15px; color:#8A6413; margin-bottom:4px; }
.inputpanel .ip-p{ font-size:13px; color:var(--ink-2, #39415A); margin-bottom:12px; }
.inputpanel .ip-shot{ width:100%; border:1px solid var(--line); border-radius:10px; display:block; margin-bottom:12px; }
.inputpanel .input{ margin-bottom:10px; }
.inputpanel .ip-btns{ display:flex; gap:8px; }
.inputpanel .ip-btns .btn{ flex:1; }
.card .ttl i, .card .meta i { vertical-align:-2px; }

/* fix: keep sidebar + main on the same grid row (avoid row-wrap pushing content down) */
.shell > .sidebar, .shell > .main { grid-row: 1; }
/* ensure [hidden] always hides, regardless of display rules */
[hidden] { display: none !important; }

/* ===== Modern document dropzone (task modal) ===== */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1.5px dashed var(--line); border-radius:14px; padding:26px 20px; cursor:pointer;
  background:var(--surface-2); color:var(--muted); text-align:center;
  transition:border-color .15s, background .15s, transform .06s;
}
.dropzone:hover{ border-color:var(--brand-ink); background:var(--brand-wash); }
.dropzone.drag{ border-color:var(--brand); background:var(--brand-wash); transform:scale(1.01); }
.dropzone .dz-ico{ color:var(--brand-ink); margin-bottom:2px; }
.dropzone .dz-t{ font-weight:600; color:var(--ink-2); font-size:14px; }
.dropzone .dz-s{ font-size:12px; color:var(--faint); }

/* ===== Task modal: tabs ===== */
.tabs{ display:flex; gap:4px; padding:0 22px; border-block-end:1px solid var(--line); }
.tabs .tab{ appearance:none; background:none; border:0; cursor:pointer; padding:12px 14px;
  font-size:14px; font-weight:500; color:var(--muted); border-block-end:2px solid transparent;
  margin-block-end:-1px; transition:color .15s, border-color .15s; font-family:inherit; }
.tabs .tab:hover{ color:var(--ink-2); }
.tabs .tab.active{ color:var(--brand); border-block-end-color:var(--brand); }
.tabpane{ display:none; }
.tabpane.active{ display:block; animation:fadeIn .15s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(3px)} to{opacity:1; transform:none} }

/* ===== Beneficiary search list ===== */
.person-list{ display:flex; flex-direction:column; gap:6px; max-height:320px; overflow-y:auto; }
.person-item{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:start; cursor:pointer; font-family:inherit;
  border:1px solid var(--line); border-radius:11px; background:var(--surface); padding:12px 14px;
  transition:border-color .13s, background .13s; }
.person-item:hover{ border-color:var(--brand-ink); background:var(--surface-2); }
.person-item.sel{ border-color:var(--brand); background:var(--brand-wash); }
.person-item .pi-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.person-item .pi-name{ font-weight:600; font-size:14px; color:var(--ink); }
.person-item .pi-sub{ font-size:12px; color:var(--muted); }
.person-item .pi-check{ color:var(--brand); font-weight:700; font-size:16px; }

/* ===== Live view (current screenshot while the agent works) ===== */
.liveview{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:14px; background:var(--surface-2); }
.liveview .lv-h{ display:flex; align-items:center; gap:7px; padding:9px 12px; font-size:12.5px; font-weight:600; color:var(--ink-2); border-block-end:1px solid var(--line); }
.liveview .lv-h .dot{ width:8px; height:8px; border-radius:50%; background:var(--st-running,#3B6FE0); box-shadow:0 0 0 0 rgba(59,111,224,.5); animation:pulse 1.6s infinite; }
.liveview .lv-img{ width:100%; display:block; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(59,111,224,.5)} 70%{box-shadow:0 0 0 7px rgba(59,111,224,0)} 100%{box-shadow:0 0 0 0 rgba(59,111,224,0)} }