/* ============================================================
   VORTEX VERIFY — the Self-help Verification Desk
   Tokens + shared kiosk pieces (ds.css/app.css) + desk styles
   (verify.css), taken from the design handoff bundle.
   ============================================================ */

/* ---------- TOKENS (ds.css) ---------- */
:root {
  --va-crest:        #6E0808;
  --va-crimson:      #930000;
  --va-crimson-hover:#760000;
  --va-crimson-tint: #F3DEDE;
  --gilt:            #9A7726;
  --gilt-light:      #C2A24E;
  --gilt-wash:       #EFE3C4;

  --paper:        #FBF5E9;
  --paper-raised: #FFFDF6;
  --paper-sunken: #F1E7D2;
  --vellum-line:  #E2D5B8;
  --vellum-line-2:#D3C2A0;

  --ink:    #221C14;
  --ink-2:  #4A3E2D;
  --ink-3:  #6B5C46;
  --ink-faint: #B9A988;

  --success: #3C6B2A;
  --warning: #8A5E12;
  --error:   #930000;
  --notice-bg:     #EFD9C2;
  --notice-border: #D5AE84;

  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 10px;
  --r-seal: 999px;

  --bd-hair: 1px solid var(--vellum-line);
  --bd-rule: 1px solid var(--vellum-line-2);
  --bd-ctl:  1.5px solid var(--ink-faint);

  --sh-sm: 0 1px 2px rgba(50,34,12,.10);
  --sh-md: 0 4px 14px rgba(50,34,12,.12);
  --sh-lg: 0 14px 36px rgba(50,34,12,.16);

  --f-display: "Inknut Antiqua", Georgia, serif;
  --f-text:    "Spectral", Georgia, serif;
  --f-mono:    "Spline Sans Mono", ui-monospace, monospace;

  --s-1: 2px;  --s-2: 4px;  --s-3: 8px;  --s-4: 12px; --s-5: 16px;
  --s-6: 20px; --s-7: 24px; --s-8: 32px; --s-9: 40px; --s-10:48px; --s-11:64px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--f-text);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--f-display); font-weight: 700; color: var(--ink); margin: 0; line-height: 1.18; }
a { color: var(--va-crimson); }
code, .mono { font-family: var(--f-mono); }
.grow { flex: 1; }

/* ---------- BUTTONS (ds.css .va-btn, desk sizing) ---------- */
.va-btn {
  font-family: var(--f-text); font-weight: 600; font-size: 15px; line-height: 1.2;
  min-height: 44px; padding: 0 var(--s-6); border-radius: var(--r-md);
  border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  transition: background .15s, transform .05s, box-shadow .15s;
}
.va-btn:active { transform: translateY(1px); }
.va-btn--primary { background: var(--va-crimson); color: #fff; box-shadow: var(--sh-sm); }
.va-btn--primary:hover { background: var(--va-crimson-hover); }
.va-btn--secondary { background: transparent; color: var(--va-crimson); box-shadow: inset 0 0 0 1.5px var(--va-crimson); }
.va-btn--secondary:hover { background: var(--va-crimson-tint); }
.va-btn--ghost { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--ink-faint); }
.va-btn--ghost:hover { background: var(--paper-sunken); }
.va-btn[disabled] { background: var(--paper-sunken); color: var(--ink-faint); box-shadow: none; cursor: not-allowed; }
.va-btn--full { width: 100%; }
.va-btn--gilt { background: var(--gilt); color: #2A1F08; }
.va-btn--gilt:hover { background: #8a691f; }
.va-btn--cream { color: #F4E8CF; box-shadow: inset 0 0 0 1.5px rgba(244,232,207,.4); }
.va-btn--cream:hover { background: rgba(255,255,255,.08); }

/* ---------- FIELDS (ds.css .field, desk register) ---------- */
.field { display: block; }
.field > .lbl { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: var(--s-3); }
.field .ctl, .vf-ac .ctl {
  width: 100%; font-family: var(--f-text); font-size: 15.5px; color: var(--ink);
  background: var(--paper-raised); border: var(--bd-ctl); border-radius: var(--r-md);
  padding: 10px var(--s-4); min-height: 44px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.field .ctl::placeholder, .vf-ac .ctl::placeholder { color: var(--ink-faint); }
.field .ctl:focus, .vf-ac .ctl:focus { border-color: var(--va-crest); box-shadow: 0 0 0 3px rgba(110,8,8,.12); }
.field .ctl.mono, .vf-ac .ctl.mono { font-family: var(--f-mono); letter-spacing: .08em; }
select.ctl { appearance: auto; }
textarea.ctl { min-height: 74px; resize: vertical; line-height: 1.5; }
.field-msgs { display: flex; flex-direction: column; gap: 5px; margin-top: var(--s-3); }
.field .hint { font-size: 12.5px; color: var(--ink-3); }
.field.is-edited .ctl { border-color: var(--gilt); background: #FFFCEE; }
.vf-was { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); display: flex; align-items: baseline; gap: 7px; }
.vf-was .w-tag { color: #8a6d1c; background: var(--gilt-wash); border-radius: var(--r-sm); padding: 0 6px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.vf-was .w-old { text-decoration: line-through; text-decoration-color: var(--ink-faint); }

/* ---------- BANNERS (ds.css) ---------- */
.banner { border-radius: var(--r-md); padding: var(--s-4) var(--s-5); font-size: 14.5px; }
.banner.error { background: var(--va-crimson-tint); border: 1px solid #D8A6A6; color: #6E0808; }
.banner.warn { background: var(--gilt-wash); border: 1px solid var(--gilt-light); color: var(--warning); }
.banner.success { background: #DDEBD2; border: 1px solid #A9C795; color: #2C5220; }
.banner .b-title { font-weight: 700; margin-bottom: 2px; }

.vf-flag {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--warning); background: var(--gilt-wash);
  border: 1px solid var(--gilt-light); border-radius: var(--r-seal); padding: 1px 8px;
}

/* ---------- TOP BAR (app.css + desk identity) ---------- */
.topbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-7); background: var(--va-crest); color: #F4E8CF;
  border-bottom: 3px solid var(--gilt);
}
.topbar .crest { width: 38px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.topbar .tb-title { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: #fff; line-height: 1.1; letter-spacing: -0.012em; word-spacing: -0.14em; }
.topbar .tb-sub { font-family: var(--f-text); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gilt-light); margin-top: 2px; }
.topbar .spacer { flex: 1 1 auto; }
.tb-btn {
  font-family: var(--f-text); font-weight: 600; font-size: 14px;
  background: rgba(255,255,255,.10); color: #F4E8CF; border: 1px solid rgba(244,232,207,.25);
  border-radius: var(--r-md); padding: 9px 14px; min-height: 42px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: background .15s;
}
.tb-btn:hover { background: rgba(255,255,255,.2); }

.vf-user {
  display: flex; align-items: center; gap: var(--s-4);
  background: rgba(255,255,255,.08); border: 1px solid rgba(244,232,207,.25);
  border-radius: var(--r-md); padding: 6px var(--s-4) 6px 7px;
}
.vf-user .vf-seal {
  width: 30px; height: 30px; border-radius: var(--r-seal); flex: 0 0 auto;
  background: var(--gilt); color: var(--va-crest);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: 13px;
}
.vf-user .vf-who { line-height: 1.25; }
.vf-user .vf-name { font-weight: 600; font-size: 13.5px; color: #fff; }
.vf-user .vf-plin { font-family: var(--f-mono); font-size: 11px; color: var(--gilt-light); letter-spacing: .06em; }

/* ---------- SHELL / WORKSPACE (verify.css) ---------- */
.vf-screen { width: 100%; min-height: 100vh; background: var(--paper); display: flex; flex-direction: column; font-size: 15.5px; }
.vf-body { flex: 1 1 auto; padding: var(--s-7) var(--s-8) var(--s-9); }
.vf-body.narrow { max-width: 1180px; width: 100%; margin: 0 auto; }

.vf-head { display: flex; align-items: flex-end; gap: var(--s-6); margin-bottom: var(--s-6); }
.vf-head h1 { font-size: 27px; letter-spacing: -0.012em; }
.vf-head .vf-sub { font-size: 14.5px; color: var(--ink-3); margin-top: 2px; }

.vf-tabs { display: flex; gap: var(--s-2); border-bottom: var(--bd-rule); margin-bottom: var(--s-6); }
.vf-tab {
  font-family: var(--f-text); font-weight: 600; font-size: 15px; color: var(--ink-3);
  background: none; border: none; cursor: pointer;
  padding: 9px var(--s-5) 11px; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
  display: flex; align-items: center; gap: var(--s-3);
}
.vf-tab.on { color: var(--va-crimson); border-bottom-color: var(--va-crimson); }
.vf-tab .ct { font-family: var(--f-mono); font-size: 11.5px; padding: 1px 7px; background: var(--paper-sunken); border-radius: var(--r-seal); color: var(--ink-2); }
.vf-tab.on .ct { background: var(--va-crimson-tint); color: var(--va-crimson-hover); }

.vf-toolbar { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.vf-filter {
  font-family: var(--f-text); font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  background: var(--paper-raised); border: var(--bd-ctl); border-radius: var(--r-seal);
  padding: 6px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.vf-filter.on { border-color: var(--va-crimson); color: var(--va-crimson-hover); background: var(--va-crimson-tint); }
.vf-toolbar .sortnote { font-size: 13.5px; color: var(--ink-3); }

/* ---------- TYPE BADGES ---------- */
.vf-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  width: 30px; height: 22px; border-radius: var(--r-sm); flex: 0 0 auto;
  color: #FFFDF6;
}
.vf-badge[data-t="CR"] { background: oklch(0.50 0.14 40); }
.vf-badge[data-t="IB"] { background: oklch(0.46 0.13 295); }
.vf-badge[data-t="PE"] { background: oklch(0.48 0.10 178); }
.vf-badge[data-t="RG"] { background: oklch(0.52 0.10 78); }
.vf-badge[data-t="MU"] { background: oklch(0.44 0.035 60); }
.vf-badge-row { display: flex; gap: 4px; align-items: center; }

/* ---------- STATUS ---------- */
.vf-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-text); font-size: 13px; font-weight: 600;
  padding: 3px 11px 3px 9px; border-radius: var(--r-seal); white-space: nowrap;
}
.vf-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.vf-status[data-s="pending"]  { color: #7A5A14; background: var(--gilt-wash); }
.vf-status[data-s="verified"] { color: var(--success); background: #DDEBD2; }
.vf-status[data-s="opened"]   { color: #2B5F8A; background: #D8E8F4; }
.vf-status[data-s="pushed"]   { color: var(--ink-3); background: var(--paper-sunken); }

/* ---------- QUEUE LIST ---------- */
.vf-queue { display: flex; flex-direction: column; gap: var(--s-3); }
.vf-daterule {
  font-family: var(--f-text); font-weight: 600; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: var(--s-4); margin: var(--s-5) 0 var(--s-2);
}
.vf-daterule::after { content: ""; flex: 1; height: 1px; background: var(--vellum-line-2); opacity: .7; }

.vf-unit {
  display: grid; grid-template-columns: 68px 1fr auto auto 24px;
  align-items: center; gap: var(--s-5);
  background: var(--paper-raised); border: var(--bd-hair); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: var(--s-4) var(--s-6);
  cursor: pointer; transition: box-shadow .15s, transform .05s;
}
.vf-unit:hover { box-shadow: var(--sh-md); }
.vf-unit:active { transform: translateY(1px); }
.vf-unit:focus-visible { outline: 2px solid var(--va-crest); outline-offset: 2px; }
.vf-unit .u-main { min-width: 0; }
.vf-unit .u-entry-id {
  font-family: var(--f-mono); font-weight: 700; font-size: 15px;
  color: var(--va-crimson); letter-spacing: 0.03em; line-height: 1.2;
  margin-bottom: 3px;
}
.vf-unit .u-title { font-family: var(--f-display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.012em; }
.vf-unit .u-meta { font-size: 13.5px; color: var(--ink-3); margin-top: 1px; }
.vf-unit .u-meta .mono { font-size: 12.5px; color: var(--va-crimson); }
.vf-unit .u-rows { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); text-align: right; white-space: pre-line; }
.vf-unit .chev { color: var(--ink-faint); font-size: 20px; text-align: center; transition: transform .15s; }

.vf-link-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-mono); font-size: 11px; color: #6b551d;
  background: var(--gilt-wash); border-radius: var(--r-seal); padding: 2px 9px;
  margin-left: 8px; vertical-align: 2px;
}

/* ---------- EXPANDED UNIT ---------- */
.vf-unit-x { background: var(--paper-raised); border: var(--bd-hair); border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.vf-unit-x > .vf-unit { background: transparent; border: none; box-shadow: none; }
.vf-unit-x > .vf-unit:hover { box-shadow: none; }
.vf-unit-x > .vf-unit .chev { transform: rotate(90deg); color: var(--va-crimson); }
.vf-unit-x .x-body { border-top: var(--bd-hair); background: var(--paper); padding: var(--s-6) var(--s-7); }
.vf-unit-x .x-formhead { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.vf-unit-x .x-formhead .fh-t { font-family: var(--f-text); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.vf-unit-x .x-formhead .fh-sub { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }

.vf-participants {
  margin-bottom: var(--s-6);
  background: var(--paper-sunken);
  border: var(--bd-hair);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
}
.vf-participants-head { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-4); flex-wrap: wrap; }
.vf-participants-head .ph-t {
  font-family: var(--f-text); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.vf-participants-head .ph-sub { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.vf-participants-loading { font-size: 13px; color: var(--ink-3); font-style: italic; }
.vf-participant {
  background: var(--paper-raised);
  border: var(--bd-hair);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-3);
}
.vf-participant:first-of-type { margin-top: 0; }
.vf-participant .pf-head { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-bottom: 4px; }
.vf-participant .pf-plin { font-weight: 600; color: var(--ink); }
.vf-participant .pf-name { font-size: 14px; color: var(--ink-2); }
.vf-participant .pf-roles { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; }
.vf-participant .pf-claimed { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.vf-participant .pf-claim { font-family: var(--f-mono); background: var(--gilt-wash); border-radius: var(--r-sm); padding: 1px 6px; margin-right: 4px; }
.vf-participant .pf-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 6px; padding: 6px 10px;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--vellum-line);
  border-radius: var(--r-sm); cursor: pointer; text-align: left;
}
.vf-participant .pf-toggle:hover { border-color: var(--gilt); color: var(--ink); }
.vf-participant .pf-toggle .pf-chev { margin-left: auto; color: var(--ink-3); font-size: 14px; }
.vf-participant .pf-toggle.is-open .pf-chev { color: var(--va-crimson); }
.vf-participant .pf-detail { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--vellum-line-2); }
.vf-participant .pf-group { margin-top: 8px; }
.vf-participant .pf-group:first-child { margin-top: 0; }
.vf-participant .pf-group-t {
  display: block; font-family: var(--f-text); font-weight: 600;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.vf-participant .pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vf-participant .pf-chip {
  font-family: var(--f-mono); font-size: 11.5px;
  background: var(--paper); border: 1px solid var(--vellum-line);
  border-radius: var(--r-seal); padding: 3px 9px; color: var(--ink-2);
}
.vf-participant .pf-chip.is-claimed {
  background: #e8f4e6; border-color: #5a8f52; color: #2d5a28; font-weight: 600;
}
.vf-participant .pf-empty, .vf-participant .pf-error { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.vf-participant .pf-error { color: var(--va-crimson); }

.vf-bench { display: grid; grid-template-columns: 410px 1fr; gap: var(--s-7); align-items: start; }

.vf-benchfoot {
  display: flex; align-items: center; gap: var(--s-4);
  border-top: var(--bd-hair); padding: var(--s-4) var(--s-7);
  background: var(--paper-raised); border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.vf-benchfoot .vf-savemeta { font-size: 13px; color: var(--ink-3); }

/* push-all strip */
.vf-pushbar {
  display: flex; align-items: center; gap: var(--s-5);
  background: var(--va-crest); color: #F4E8CF;
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-6);
  margin-top: var(--s-6); box-shadow: var(--sh-md);
}
.vf-pushbar .pb-txt { flex: 1; font-size: 14.5px; }
.vf-pushbar .pb-txt b { color: #fff; }
.vf-pushbar .pb-note { font-size: 12.5px; color: var(--gilt-light); margin-top: 1px; }

/* ---------- SHEET LEDGER (left pane) ---------- */
.vf-sheetpane { position: sticky; top: var(--s-6); }
.vf-lock {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); background: var(--paper-sunken); border: var(--bd-hair);
  border-radius: var(--r-seal); padding: 4px 12px; margin-bottom: var(--s-4);
}
.vf-sheetrow { background: var(--paper-sunken); border: var(--bd-hair); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6) var(--s-6); }
.vf-sheetrow .sr-head { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--vellum-line-2); }
.vf-sheetrow .sr-tab { font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.vf-sheetrow .sr-ref { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.vf-sheetrow .sr-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s-5); }
.vf-sheetrow .sr-k { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); text-align: right; padding-top: 3px; white-space: nowrap; }
.vf-sheetrow .sr-k b { color: var(--gilt); font-weight: 600; }
.vf-sheetrow .sr-v { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; white-space: pre-line; }
.vf-sheetrow .sr-v.mono { font-family: var(--f-mono); font-size: 13px; }
.vf-sheetrow .sr-v.is-changed { color: var(--ink); background: var(--gilt-wash); border-radius: var(--r-sm); padding: 0 5px; margin: 0 -5px; }

.vf-rowlink { display: flex; align-items: center; gap: var(--s-3); justify-content: center; font-family: var(--f-mono); font-size: 11.5px; color: #6b551d; padding: 7px 0; }
.vf-rowlink::before, .vf-rowlink::after { content: ""; width: 32px; height: 1px; background: var(--vellum-line-2); }

/* ---------- VOID FORM (right pane) ---------- */
.vf-form .fsec {
  font-family: var(--f-text); font-weight: 600; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin: var(--s-7) 0 var(--s-4);
  display: flex; align-items: center; gap: var(--s-4);
}
.vf-form .fsec:first-child { margin-top: 0; }
.vf-form .fsec::after { content: ""; flex: 1; height: 1px; background: var(--vellum-line); }
.vf-form .frow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.vf-form .frow > * { min-width: 0; }
.vf-form .fstack { display: flex; flex-direction: column; gap: var(--s-5); }

/* ---------- OWNER AUTOCOMPLETE ---------- */
.vf-ac { position: relative; }
.vf-ac .ctl { padding-right: 40px; }
.vf-ac .ac-glyph { position: absolute; right: 13px; top: 12px; color: var(--ink-faint); font-size: 17px; pointer-events: none; }
.vf-ac-pop {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 5px);
  background: var(--paper-raised); border: var(--bd-hair); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: var(--s-2); max-height: 320px; overflow: auto;
}
.vf-ac-row {
  display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: var(--s-4);
  padding: 9px var(--s-4); border-radius: var(--r-sm); cursor: pointer;
}
.vf-ac-row:hover, .vf-ac-row.hl { background: var(--paper-sunken); }
.vf-ac-row.hl { box-shadow: inset 2px 0 0 var(--va-crimson); }
.vf-ac-row .ac-pc { font-family: var(--f-mono); font-size: 13px; color: var(--va-crimson); font-weight: 500; }
.vf-ac-row .ac-nm { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.vf-ac-row .ac-pl { font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
.vf-ac-row .ac-st { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.vf-ac-foot { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); padding: 7px var(--s-4) 5px; border-top: var(--bd-hair); margin-top: var(--s-2); }

.vf-owner-pick {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--paper-sunken); border: var(--bd-hair); border-radius: var(--r-md);
  padding: 9px var(--s-4);
}
.vf-owner-pick .op-pc { font-family: var(--f-mono); font-size: 13px; color: var(--va-crimson); }
.vf-owner-pick .op-nm { font-weight: 600; font-size: 14.5px; }
.vf-owner-pick .op-pl { font-size: 13px; color: var(--ink-3); }
.vf-owner-pick .op-x { margin-left: auto; border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 16px; }

.vf-transfer {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: 13px; color: #5A3A1B; background: var(--notice-bg);
  border: 1px solid var(--notice-border); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); margin-top: var(--s-3);
}

/* ---------- POWER SEARCH ---------- */
.vf-power-list { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
.vf-power {
  display: grid; grid-template-columns: 1fr auto; gap: 3px var(--s-5); align-items: center;
  background: var(--paper-raised); border: var(--bd-ctl); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5); cursor: pointer;
}
.vf-power:hover { background: var(--paper-sunken); }
.vf-power.sel { border-color: var(--va-crimson); box-shadow: 0 0 0 3px rgba(110,8,8,.10); background: #FFFBF1; }
.vf-power .pw-nm { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: var(--s-3); }
.vf-power .pw-grant { font-size: 13px; color: var(--ink-2); grid-column: 1 / -1; }
.vf-power .pw-grant .mono { font-size: 12px; }
.vf-power .pw-pick { font-family: var(--f-text); font-weight: 600; font-size: 13px; color: var(--va-crimson); }
.vf-power.sel .pw-pick::before { content: "✓ "; }
.vf-match {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--r-seal);
}
.vf-match.exact { background: #DDEBD2; color: var(--success); }
.vf-match.close { background: var(--gilt-wash); color: #7A5A14; }

.vf-nopower {
  border: 1.5px dashed var(--vellum-line-2); border-radius: var(--r-lg);
  padding: var(--s-6); margin-top: var(--s-4);
  background: var(--paper);
}
.vf-nopower .np-t { font-family: var(--f-display); font-weight: 600; font-size: 16px; margin-bottom: 4px; text-align: center; }
.vf-nopower > p { font-size: 14px; color: var(--ink-2); margin: 0 auto var(--s-5); max-width: 52ch; text-align: center; }
.vf-power-create { display: flex; flex-direction: column; gap: var(--s-4); text-align: left; max-width: 520px; margin: 0 auto; }
.vf-power-create .va-btn { align-self: flex-start; margin-top: var(--s-2); }
.vf-power-add { margin-top: var(--s-4); }
.vf-power-add.is-open { border: 1.5px dashed var(--vellum-line-2); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); background: var(--paper); }
.vf-power-add-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.vf-power-add-head .np-t { margin-bottom: 0; text-align: left; font-size: 15px; }
.vf-power-add-hide {
  border: none; background: none; font-family: var(--f-mono); font-size: 11.5px;
  color: var(--ink-3); cursor: pointer; padding: 0;
}
.vf-power-add-hide:hover { color: var(--va-crimson); }
.vf-power-add-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: var(--s-4) var(--s-5);
  font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--paper); border: 1.5px dashed var(--vellum-line-2);
  border-radius: var(--r-md); cursor: pointer; text-align: left;
}
.vf-power-add-toggle:hover { border-color: var(--gilt); color: var(--ink); }
.vf-power-add-toggle .pf-chev { margin-left: auto; color: var(--ink-3); font-size: 14px; }

/* ---------- ARCHIVE ---------- */
.vf-arch {
  display: grid; grid-template-columns: 68px 1fr auto auto auto;
  align-items: center; gap: var(--s-5);
  background: var(--paper-raised); border: var(--bd-hair); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-6);
}
.vf-arch .a-title { font-family: var(--f-display); font-weight: 600; font-size: 15.5px; }
.vf-arch .a-meta { font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.vf-arch .a-itin { font-family: var(--f-mono); font-size: 13px; color: var(--va-crimson); text-align: right; }
.vf-arch .a-itin small { display: block; font-size: 10.5px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.vf-arch .a-by { font-size: 13px; color: var(--ink-2); text-align: right; }
.vf-arch .a-by small { display: block; font-size: 11.5px; color: var(--ink-3); }

/* ---------- LOGIN ---------- */
.vf-login-stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(90% 70% at 50% -10%, rgba(154,119,38,.14), transparent 60%),
    var(--paper);
  padding: var(--s-9);
}
.vf-login {
  width: 420px; background: var(--paper-raised); border: var(--bd-hair);
  border-top: 3px solid var(--gilt);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--s-9) var(--s-8) var(--s-8);
  text-align: center;
}
.vf-login img { width: 84px; margin-bottom: var(--s-5); filter: drop-shadow(0 4px 10px rgba(50,34,12,.25)); }
.vf-login h1 { font-size: 24px; letter-spacing: -0.012em; }
.vf-login .lg-sub { font-size: 14.5px; color: var(--ink-2); margin: 4px 0 var(--s-7); }
.vf-login .field { text-align: left; }
.vf-login .lg-note { font-size: 13px; color: var(--ink-3); margin-top: var(--s-5); }
.vf-login form { display: flex; flex-direction: column; gap: var(--s-5); }

/* social sign-in */
.vf-login .lg-instruction { font-size: 14.5px; color: var(--ink-2); margin: 0 0 var(--s-5); line-height: 1.5; }
.vf-login .lg-instruction b { color: var(--ink); }
.lg-social { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-2); }
.oauth-btn {
  width: 100%; min-height: 52px; border-radius: var(--r-md); border: var(--bd-ctl); background: var(--paper-raised);
  font-family: var(--f-text); font-weight: 600; font-size: 16px; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: var(--s-4); transition: background .15s;
}
.oauth-btn:hover { background: var(--paper-sunken); }
.oauth-btn .ic {
  width: 22px; height: 22px; border-radius: 5px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 13px;
}
.lg-divider {
  display: flex; align-items: center; gap: var(--s-4);
  margin: var(--s-6) 0 var(--s-5);
  font-family: var(--f-text); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.lg-divider::before, .lg-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--vellum-line-2);
}

/* ---------- TOAST ---------- */
.vf-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); font-size: 14.5px;
  border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 12px 20px;
  z-index: 100; display: flex; gap: var(--s-4); align-items: center;
  animation: toast-in .2s ease;
}
.vf-toast a { color: var(--gilt-light); font-weight: 600; }
.vf-toast.error { background: var(--va-crest); color: #F4E8CF; }
@keyframes toast-in { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

.vf-empty { text-align: center; color: var(--ink-3); padding: var(--s-9) 0; font-size: 15px; }
.vf-loading { text-align: center; color: var(--ink-3); padding: var(--s-9) 0; font-family: var(--f-mono); font-size: 13px; }

@media (max-width: 980px) {
  .vf-bench { grid-template-columns: 1fr; }
  .vf-sheetpane { position: static; }
  .vf-unit { grid-template-columns: 68px 1fr auto 24px; }
  .vf-unit .u-rows { display: none; }
}