/**
 * Propellors client portal — shared tokens, dark-first with a light theme.
 *
 * The brand is platinum-black and gold, so DARK is the default expression and light is the
 * alternative. That inverts the usual token pattern, and the inversion is applied consistently:
 *   :root                                          -> dark (the brand default)
 *   @media (prefers-color-scheme: light) on
 *     :root:not([data-theme="dark"])                -> light for viewers whose OS asks for it,
 *                                                     unless they explicitly chose dark here
 *   :root[data-theme="light"]                       -> light when chosen explicitly
 * Every component reads tokens only, never a literal, so both themes resolve as a complete set.
 *
 * Gold needs different values per ground: #C9A961 sings on near-black and washes out on white, so
 * light mode drops to #8A7238, which is already the dark stop of the site's own metal gradient.
 */

/* ── dark: the brand default ─────────────────────────────────────────────── */
:root{
  --bg:#08080A; --bg-2:#0C0C0F; --surface:#121216; --surface-2:#171720;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.14);
  --gold:#C9A961; --gold-br:#E6CB88; --gold-soft:rgba(201,169,97,.06);
  --metal:linear-gradient(135deg,#F0DCA8 0%,#C9A961 34%,#8A7238 62%,#E6CB88 100%);
  --on-gold:#1A1407;
  --text:#F3F1ED; --muted:#8C867E; --muted-2:#635E58;
  --ok:#6EE7A8; --warn:#E8C35C; --bad:#F08A7A;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --meter-spent:#E6CB88; --meter-unspent:#8A7238;

  --disp:'Inter Tight',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --pad:clamp(18px,4vw,40px);
}

/* ── light, for a viewer whose OS prefers it and who has not chosen dark ── */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#FAF8F4; --bg-2:#FFFFFF; --surface:#F4F0E8; --surface-2:#EFE9DE;
    --line:rgba(26,20,7,.10); --line-2:rgba(26,20,7,.18);
    --gold:#8A7238; --gold-br:#A98D46; --gold-soft:rgba(138,114,56,.07);
    --metal:linear-gradient(135deg,#A98D46 0%,#8A7238 38%,#5E4A22 66%,#A98D46 100%);
    --on-gold:#FFF9EC;
    --text:#1A1712; --muted:#6B655C; --muted-2:#938C81;
    --ok:#1E8A5A; --warn:#8A6A12; --bad:#B03A28;
    --shadow:0 1px 2px rgba(26,20,7,.08);
    --meter-spent:#6B5527; --meter-unspent:#C9A961;
  }
}
/* ── light, chosen explicitly ────────────────────────────────────────────── */
:root[data-theme="light"]{
  --bg:#FAF8F4; --bg-2:#FFFFFF; --surface:#F4F0E8; --surface-2:#EFE9DE;
  --line:rgba(26,20,7,.10); --line-2:rgba(26,20,7,.18);
  --gold:#8A7238; --gold-br:#A98D46; --gold-soft:rgba(138,114,56,.07);
  --metal:linear-gradient(135deg,#A98D46 0%,#8A7238 38%,#5E4A22 66%,#A98D46 100%);
  --on-gold:#FFF9EC;
  --text:#1A1712; --muted:#6B655C; --muted-2:#938C81;
  --ok:#1E8A5A; --warn:#8A6A12; --bad:#B03A28;
  --shadow:0 1px 2px rgba(26,20,7,.08);
  --meter-spent:#6B5527; --meter-unspent:#C9A961;
}

*{box-sizing:border-box;margin:0;padding:0}
/* Restore what the reset above took away: a modal <dialog> centres itself with margin:auto. */
dialog:modal{margin:auto}

/* ⭐ BUG 2: the `hidden` attribute is display:none at UA specificity, so ANY class that sets a
   display beats it. `.f{display:flex}` and `.note{display:flex}` silently un-hid every element
   we thought we had hidden, which is why the "Move to" picker showed on the Add funds tab and the
   "you have not topped up" banner showed to a client with $15,000 in. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
/* body paints an explicit ground: without it the page borrows whatever is behind it. */
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--gold)}
.wrap{max-width:1600px;margin:0 auto;padding-inline:var(--pad)}
.gold{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}

/* ── header ──────────────────────────────────────────────────────────────── */
header{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:14px;max-width:1600px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--text);text-decoration:none}
.logo i{font-style:normal;font-weight:500;color:var(--muted)}
.mk{width:25px;height:25px;flex:none}
.hright{display:flex;align-items:center;gap:6px}
nav{display:flex;gap:2px;flex-wrap:wrap}
nav a{font-size:13.5px;color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:8px}
nav a:hover{color:var(--text);background:var(--surface)}
nav a[aria-current]{color:var(--text);background:var(--surface)}

/* who is signed in, and the way out */
.who{display:flex;align-items:center;gap:10px;padding-left:10px;margin-left:4px;border-left:1px solid var(--line)}
.who-name{font-size:13px;color:var(--muted);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-out{font-family:var(--body);font-size:12.5px;padding:6px 11px;border-radius:8px;border:1px solid var(--line-2);
  background:transparent;color:var(--muted);cursor:pointer}
.who-out:hover{color:var(--gold);border-color:var(--gold)}
.who-out:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:620px){.who-name{display:none}}

/* theme toggle: 3 states so "follow my system" stays reachable after a manual choice */
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);color:var(--muted);cursor:pointer}
.themebtn:hover{color:var(--gold);border-color:var(--gold)}
.themebtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.themebtn [data-i]{display:none}

/* ── page furniture ──────────────────────────────────────────────────────── */
.top{padding:clamp(30px,5vw,52px) 0 6px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 15px;border-radius:100px;border:1px solid var(--line-2);background:var(--gold-soft);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
h1{font-family:var(--disp);font-weight:600;font-size:clamp(27px,4.6vw,41px);line-height:1.08;letter-spacing:-.03em;margin:17px 0 0;text-wrap:balance}
.lede{color:var(--muted);max-width:68ch;margin-top:11px}

.card{border:1px solid var(--line);border-radius:14px;background:var(--bg-2);margin:24px 0;overflow:hidden;box-shadow:var(--shadow)}
.card > h2{font-family:var(--disp);font-size:15px;font-weight:600;padding:16px var(--pad);border-bottom:1px solid var(--line);background:var(--gold-soft)}
.card .body{padding:var(--pad)}

.note{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line-2);border-radius:11px;background:var(--gold-soft);padding:14px 16px;font-size:13.5px;color:var(--muted)}
.note b{color:var(--text);font-weight:500}
.note .ico{color:var(--warn);flex:none;font-family:var(--mono);font-weight:500}

/* ── forms ───────────────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px 18px}
.f{display:flex;flex-direction:column;gap:7px}
.f.wide{grid-column:1/-1}
label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
label .req{color:var(--gold)}
input,select{font-family:var(--body);font-size:14.5px;color:var(--text);background:var(--surface);border:1px solid var(--line-2);border-radius:9px;padding:11px 13px;width:100%}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
input:focus{border-color:var(--gold)}
input::placeholder{color:var(--muted-2)}
input[aria-invalid="true"]{border-color:var(--bad)}
.err{font-size:12px;color:var(--bad)}

.actions{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:16px var(--pad);border-top:1px solid var(--line);background:var(--surface)}
button{font-family:var(--body);font-size:14px;font-weight:500;border-radius:9px;padding:11px 20px;cursor:pointer;border:1px solid transparent}
.primary{background:var(--metal);color:var(--on-gold);font-weight:600}
.primary:disabled{opacity:.45;cursor:not-allowed}
.ghost{background:transparent;border-color:var(--line-2);color:var(--muted)}
.ghost:hover{color:var(--text);border-color:var(--gold)}
.status{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}
.status.ok{color:var(--ok)} .status.bad{color:var(--bad)} .status.dim{color:var(--muted-2)}

/* ── data ────────────────────────────────────────────────────────────────── */
.prev{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:18px 20px}
.prev .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}
.prev .nm{font-family:var(--disp);font-weight:600;font-size:16px}
.prev .ln{color:var(--muted);font-size:14px}
.prev .empty{color:var(--muted-2);font-style:italic;font-size:13.5px}

/* A short glossary, collapsed by default: the terms need defining once, not in every cell. */
.explain{border:1px solid var(--line);border-radius:12px;background:var(--bg-2);margin:0 0 18px;overflow:hidden}
.explain summary{cursor:pointer;padding:13px var(--pad);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.explain summary:hover{color:var(--gold)}
.explain[open] summary{border-bottom:1px solid var(--line)}
.explain-body{padding:16px var(--pad);display:grid;gap:13px}
.explain-body > div{display:grid;grid-template-columns:minmax(150px,190px) 1fr;gap:16px;align-items:baseline}
.explain-body b{font-family:var(--disp);font-weight:600;font-size:13.5px}
.explain-body span{color:var(--muted);font-size:13.5px}
@media (max-width:620px){.explain-body > div{grid-template-columns:1fr;gap:3px}}

.tblwrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);font-weight:400;text-align:left;padding:13px var(--pad);border-bottom:1px solid var(--line);white-space:nowrap}
/* tfoot is included deliberately: scoping padding to `tbody td` left the totals row with none, so
   it started at the card edge and its right-aligned figures overhung the columns they total. */
tbody td, tfoot td{padding:14px var(--pad);border-bottom:1px solid var(--line);vertical-align:middle}
tfoot td{border-bottom:0;border-top:1px solid var(--line-2);font-weight:600;color:var(--text);background:var(--surface)}
tfoot td:first-child{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400}
/* Dates, methods and figures read as single tokens; wrapping them tripled the row height and
   pushed the Invoice column out of view. Names may still wrap, they are genuinely variable. */
tbody td.nowrap, thead th.nowrap{white-space:nowrap}
tbody td.r{white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
th.r,td.r{text-align:right}
.pill{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:100px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-2);color:var(--muted)}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.pill.pend{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.empty-state{padding:clamp(28px,5vw,48px) var(--pad);text-align:center;color:var(--muted)}
.empty-state .big{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--text);margin-bottom:7px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line)}
.kpi{background:var(--bg-2);padding:18px var(--pad)}
.kpi .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v{font-family:var(--mono);font-size:21px;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;overflow:visible}
.kpi .s{font-size:12px;color:var(--muted);margin-top:3px}

footer{border-top:1px solid var(--line);margin-top:38px;padding:22px 0 44px}
footer .wrap{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted-2);line-height:1.9}

/* ── loading skeletons ──────────────────────────────────────────────────────
   Placeholders shaped like the content that is coming, not a spinner: the layout does not jump
   when data lands, and the reader can already see how much is on its way. The shimmer is a moving
   highlight over the surface token, so it works in both themes from the same rule. */
.sk{position:relative;overflow:hidden;background:var(--surface);border-radius:6px;display:inline-block;vertical-align:middle;height:1em;width:100%}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 7%,transparent),transparent);
  animation:sk 1.35s ease-in-out infinite}
@keyframes sk{100%{transform:translateX(100%)}}
.sk-sm{height:.75em}
.sk-lg{height:1.6em;border-radius:8px}
.sk-w1{width:38%} .sk-w2{width:56%} .sk-w3{width:72%} .sk-w4{width:88%}
td .sk{min-width:58px}
/* The bar column has its own shape, so its placeholder mirrors it rather than a generic block. */
.sk-bar{height:6px;border-radius:99px;width:100%;min-width:90px}
/* Fading the whole block in stops the swap from feeling like a flash. */
.fade-in{animation:fadein .22s ease-out both}
@keyframes fadein{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  /* The blocks stay visible; only the motion goes. A static grey block still says "loading". */
  *{animation:none!important;transition:none!important}
  .sk::after{display:none}
}
@media (max-width:620px){nav a{padding:6px 9px;font-size:12.5px}}

/* ── admin "view as client" ──────────────────────────────────────────────────
   Fixed to the BOTTOM deliberately. The header is sticky at top:0, so a top banner would either
   overlap it or force the header's offset to track a bar whose height changes when the text wraps.
   Anchoring to the bottom also leaves the client's own layout untouched at the top, which matters
   when the entire purpose is seeing the portal as the client sees it. */
.viewbar{
  position:fixed;inset:auto 0 0 0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:11px 16px;font-size:13.5px;color:var(--on-gold);
  background:var(--metal);border-top:1px solid var(--line-2);
  box-shadow:0 -6px 22px rgba(0,0,0,.22);
}
.viewbar strong{font-family:var(--disp);font-weight:650;letter-spacing:.01em}
.viewbar-exit{
  appearance:none;cursor:pointer;font:inherit;font-weight:600;
  padding:5px 13px;border-radius:7px;color:var(--on-gold);
  background:rgba(26,20,7,.10);border:1px solid rgba(26,20,7,.32);
}
.viewbar-exit:hover{background:rgba(26,20,7,.18)}
.viewbar-exit:disabled{opacity:.55;cursor:default}
html.has-viewbar body{padding-bottom:74px}

/* Sits above the bar, so a refusal is legible without scrolling back to what was clicked. */
.rotoast{
  position:fixed;left:50%;bottom:86px;transform:translate(-50%,10px);z-index:61;
  max-width:min(92vw,460px);padding:10px 16px;border-radius:9px;
  background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);
  box-shadow:0 10px 30px rgba(0,0,0,.34);font-size:13.5px;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
}
.rotoast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.rotoast{transition:none}}

/* ── ad account health, client side ──────────────────────────────────────────
   The same tone the admin console shows, so the two can never disagree about whether an account is
   running. The wording is softened and Meta's own disable_reason is deliberately NOT here: whether
   their account delivers is the client's business, the reason behind it names our business manager
   and our policy history, which is not. */
.acct{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hdot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted-2);box-shadow:0 0 0 2px var(--surface)}
.hdot.green{background:var(--ok)}
.hdot.amber{background:var(--warn)}
.hdot.red{background:var(--bad)}
.hlabel{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;padding:1px 7px;border-radius:99px;border:1px solid currentColor}
.hlabel.red{color:var(--bad)}
.hlabel.amber{color:var(--warn)}
.hlabel.grey{color:var(--muted-2)}

/* ── location fees, client side ──────────────────────────────────────────────
   Informational: these are charged by Meta on the client's own delivery and appear on no other
   surface they can see. Styled quietly — it is context, not a bill. */
.feetable{width:100%}
.feetable tfoot td{font-weight:650;color:var(--text);border-top:1px solid var(--line-2)}
.h2note{font-family:var(--body);font-size:12.5px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--muted-2);margin-left:8px}

/* A footnote marker on a figure that contains more than its label suggests. */
.feemark{margin-left:2px;font-size:10px;color:var(--gold);cursor:help;font-weight:700}

/* The location-fee breakdown panel. Appended to <body>, so no card can clip it. */
.feepop{
  position:absolute;z-index:80;min-width:310px;max-width:min(94vw,420px);
  background:var(--surface);border:1px solid var(--line-2);border-radius:11px;
  box-shadow:0 14px 40px rgba(0,0,0,.34);padding:12px 14px 10px;
  opacity:0;transform:translateY(-4px);transition:opacity .13s ease,transform .13s ease;pointer-events:none;
}
.feepop.on{opacity:1;transform:translateY(0)}
.feepop-h{font-family:var(--disp);font-size:13px;font-weight:650;color:var(--text);margin-bottom:8px}
.feepop table{width:100%;border-collapse:collapse}
.feepop th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);text-align:left;padding:0 0 5px;font-weight:500}
.feepop th.r,.feepop td.r{text-align:right}
.feepop td{font-size:12.5px;color:var(--text);padding:3px 0;font-variant-numeric:tabular-nums}
.feepop td:not(:first-child){font-family:var(--mono);font-size:12px}
.feepop tfoot td{border-top:1px solid var(--line);padding-top:6px;font-weight:650}
.feepop-f{margin-top:9px;font-size:11px;color:var(--muted-2);line-height:1.45}
@media (prefers-reduced-motion:reduce){.feepop{transition:none}}

/* Text that opens the fee breakdown. Dotted underline so it reads as "there is more here"
   without looking like a link that navigates away. */
.feelink{border-bottom:1px dotted var(--muted-2);cursor:help}
.feelink:hover,.feelink:focus{color:var(--text);border-bottom-color:var(--gold);outline:none}

/* ── partner BM sharing, client side ────────────────────────────────────────
   Sharing cannot be written to Meta yet, so anything the client changes is a REQUEST our team
   actions. The states are styled differently from the live ones so that distinction is visible at
   a glance rather than buried in wording. */
.bmcell{white-space:nowrap}
.bmchip{
  appearance:none;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  padding:3px 10px;border-radius:100px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--muted);
}
.bmchip:hover{color:var(--text);border-color:var(--gold)}
.bmpend{margin-left:7px;font-size:11px;color:var(--warn)}

.bmlist{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;max-height:230px;overflow:auto}
.bmempty{font-size:13px;color:var(--muted-2);padding:10px 0}
.bmrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2)}
.bmrow.pend{border-style:dashed;border-color:var(--warn)}
.bmrow > div:first-child{flex:1;min-width:0}
.bmname{font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bmid{font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.bmstatus{font-size:11px;white-space:nowrap}
.bmstatus.active{color:var(--ok)}
.bmstatus.requested,.bmstatus.removing{color:var(--warn)}
.bmx{
  appearance:none;font:inherit;font-size:12px;cursor:pointer;padding:4px 10px;border-radius:7px;
  border:1px solid var(--line-2);background:transparent;color:var(--muted);
}
.bmx:hover:not(:disabled){color:var(--bad);border-color:var(--bad)}
.bmx:disabled{opacity:.45;cursor:default}

/* ── styled picker, replacing the OS datalist ────────────────────────────── */
.pickwrap{position:relative;display:inline-block}
.pickbtn,.pickfield{
  display:inline-flex;align-items:center;gap:8px;font:inherit;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);
}
.pickfield{width:100%;justify-content:space-between;padding:9px 12px;border-radius:9px;font-size:14px}
.pickfield:hover,.pickbtn:hover{border-color:var(--gold)}
.carat{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.6;flex:none}
.pickpanel{
  /* fixed, not absolute: the panel may live inside a modal <dialog> (its own top layer) or on the
     page, and viewport coordinates are the one frame of reference that is correct in both. */
  position:fixed;z-index:90;max-width:min(94vw,380px);
  background:var(--surface);border:1px solid var(--line-2);border-radius:11px;
  box-shadow:0 16px 44px rgba(0,0,0,.36);padding:8px;
}
.picksearch{
  width:100%;padding:8px 10px;border-radius:8px;font:inherit;font-size:13.5px;margin-bottom:6px;
  background:var(--bg-2);color:var(--text);border:1px solid var(--line);
}
.picksearch:focus{outline:none;border-color:var(--gold)}
.picklist{max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.pickrow{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:inherit;cursor:pointer;
  padding:7px 9px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text);
}
.pickrow:hover{background:var(--bg-2)}
.pickrow.on{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.pickrow.isnew .pickname{color:var(--gold)}
.pickbox{flex:none;width:15px;height:15px;border-radius:4px;border:1.5px solid var(--line-2);position:relative}
.pickrow.on .pickbox{background:var(--gold);border-color:var(--gold)}
.pickrow.on .pickbox::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--on-gold);border-width:0 2px 2px 0;transform:rotate(45deg)}
.picktxt{display:flex;flex-direction:column;min-width:0}
.pickname{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picksub{font-family:var(--mono);font-size:10.5px;color:var(--muted-2)}
.pickempty{padding:12px 10px;font-size:13px;color:var(--muted-2)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.chip2{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 10px;border-radius:100px;font-size:12px;background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);color:var(--text)}
.chip2 button{appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
.chip2 button:hover{color:var(--bad)}

.vdiv{width:1px;height:20px;background:var(--line-2);margin:0 4px}
.viewsw{display:inline-flex;gap:4px}