/* ============================================================================
   UTG PORTAL — DESIGN SYSTEM
   One stylesheet. The portal, the Sales Console and the client review page all
   read from it, so a change lands everywhere and nothing drifts.
   ========================================================================== */
:root{
  /* brand anchors */
  --navy:#04293D; --navy-2:#0A3D5A; --navy-3:#14638F;
  --gold:#C9962C; --gold-2:#E8C36A; --gold-soft:#FBF3DF; --gold-line:#EBD9A8; --gold-deep:#8A6A18;
  /* the functional layer — UTG navy, lightened. Not a new colour. */
  --sky:#1B6E9E; --sky-2:#3F9FD1; --sky-soft:#E9F2F8; --sky-line:#C3DDEC;
  /* Open rate / campaigns. The one hue that is not navy or gold, because
     influencer work is genuinely a different kind of thing. */
  --violet:#7B5FD1; --violet-2:#9d8be0; --violet-soft:#EFEBFB;
  /* surfaces. FLAT, not a gradient: a gradient behind every page competes with
     the cards sitting on it, and it was the single loudest thing in the portal. */
  --canvas:#EFF2F5;
  --mist:#E8ECF0; --card:#FFFFFF; --line:#DDE4EA;
  /* A recessed surface for a panel that sits INSIDE a card: an inset well
     rather than a second card floating on the first. It was being read as
     var(--paper) in three places and never defined anywhere, so every one of
     them fell back to a hard-coded near-white and stayed white in dark mode. */
  --paper:#F5F8FA;
  --ink:#0F2027; --ink-soft:#4A6270; --muted:#7D93A0;
  --green:#12795A; --green-soft:#E6F4EF;
  --red:#B3402F; --red-soft:#FBEDEA;
  /* STATUS COLOURS. Five states, five readings, and they have to survive being
     scanned down a column of four hundred rows rather than looked at one at a
     time. Slate for New because "nothing has happened yet" should not compete
     for attention; amber for anything waiting on us; blue for approved, green
     for active, because those two were sharing a colour and are genuinely
     different facts. */
  --slate:#5E7683; --slate-soft:#EDF1F4;
  --amber:#8A6410; --amber-soft:#FDF3DE;
  /* Notion Gig Status — the source of truth, untouched */
  --n-gray:#787774; --n-yellow:#CB912F; --n-blue:#337EA9; --n-orange:#D9730D;
  --n-purple:#9065B0; --n-green:#448361; --n-red:#D44C47; --n-pink:#C14C8A;
  /* TWO FACES, THREE ROLES. Instrument Serif carries every heading and every
     number that matters, which is what gives the portal its voice; Karla does
     the reading; IBM Plex Mono is for ids, codes and timestamps only. Fraunces
     and Inter were fine and said nothing. */
  --display:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Headings get their weight from being bold and tight, not from being a
     display serif. One number, so every heading in the portal agrees. */
  --dfw:700; --dtr:-.015em;
  /* 450, not 400. Body text at 400 on a dark ground reads thin, and that was
     most of what looked wrong — the face was only half the problem. */
  --bfw:450;
  /* ONE RADIUS, and a small one for the things inside a card. 20px on a card
     with a 15px chip inside it read as two design systems in one box. */
  --r:13px; --r-sm:9px;
  --sh:0 1px 2px rgba(9,45,60,.05); --sh-lift:0 8px 24px rgba(9,45,60,.10);
}
/* ---- UTG NETWORK. Same gold accent and card styling as Signed talent — on
   purpose, so a network member's comp card is indistinguishable from a signed
   one when UTG submits them on a showcase. The ONLY visual difference is a
   lighter secondary-blue canvas, so the member's own dashboard reads as its own
   space without changing how any card looks. ---- */
html[data-tier="network"]{ --canvas:#E9EEF4; }
html[data-theme="dark"][data-tier="network"]{ --canvas:#061826; }

html[data-theme="dark"]{
  /* The ground the whole portal sits on. Flat navy, near-black, so a card is
     the thing you see rather than the background behind it. */
  --canvas:#04141D;
  --mist:#081C27; --card:#0B1F2B; --line:#1D3E51; --paper:#071D28;
  --ink:#EAF2F8; --ink-soft:#C3D4E0; --muted:#8FA4B8;
  --sky:#7fa0b6; --sky-2:#9CC0D6; --sky-soft:#102A38; --sky-line:#255675;
  --violet:#9d8be0; --violet-2:#B4A6EA; --violet-soft:#1B2140;
  --green:#5fb07f; --green-soft:#102C22;
  --red:#d98080; --red-soft:#2E1919;
  --gold-deep:#E8C36A; --gold-soft:#2A2110; --gold-line:#4A3A14;
  --slate:#9DB2BF; --slate-soft:#152833;
  --amber:#E0B24E; --amber-soft:#2A2110;
  --sh:0 1px 2px rgba(0,0,0,.4); --sh-lift:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--canvas);color:var(--ink);
  font-family:var(--body);font-weight:var(--bfw);line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100vh;padding:22px 18px 40px;}
a{color:var(--sky);}
.hidden{display:none !important;}

/* ---------------- the floating shell ---------------- */
/* The shell used to float on a gradient with a 70px drop shadow, which put a
   heavy edge around every single screen. It is now a plain surface with one
   hairline, so the cards inside it are what carry the depth. */
.shell{max-width:1240px;margin:0 auto;background:var(--mist);border-radius:16px;
  border:1px solid var(--line);overflow:hidden;}

/* ---------------- top bar ---------------- */
.topbar{background:var(--card);padding:13px 24px;display:flex;align-items:center;gap:22px;}
.topbar img.logo{height:25px;width:auto;}
/* Network wordmark next to the logo — only shown for Network members, in the
   network accent, so their portal is branded distinctly at a glance. */
.brand-net{margin-left:-14px;align-self:center;font-size:11px;font-weight:800;letter-spacing:1.5px;
  color:var(--gold-deep);background:var(--gold-soft);border:1px solid var(--gold-line);
  padding:3px 8px;border-radius:6px;text-transform:uppercase;}
html[data-theme="dark"] .topbar img.logo{filter:invert(1) brightness(2.2);}
.nav{display:flex;gap:3px;}
.nav button{background:none;border:none;padding:9px 15px;font-family:var(--body);font-size:13.5px;
  font-weight:600;color:var(--muted);cursor:pointer;border-radius:11px;}
.nav button:hover{color:var(--ink);}
/* An underline, not a filled pill. Eight pills across the top read as eight
   buttons competing; one rule under the live tab reads as a place you are. */
.nav button{position:relative;}
.nav button.on{color:var(--ink);background:none;}
.nav button.on::after{content:"";position:absolute;left:15px;right:15px;bottom:-14px;height:2px;
  background:var(--gold);border-radius:2px;}
.nav .count{font-family:var(--mono);font-size:10px;background:var(--n-red);color:#fff;
  border-radius:9px;padding:1px 6px;margin-left:6px;}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.themebtn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;
  padding:7px 9px;border-radius:10px;}
.themebtn:hover{background:var(--mist);color:var(--ink);}

/* avatar + menu (the profile lives here, not on the dashboard) */
.avwrap{position:relative;}
.avbtn{display:flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;
  padding:4px 5px 4px 10px;border-radius:12px;font-family:var(--body);}
.avbtn:hover{background:var(--mist);}
.avbtn .t{text-align:right;font-size:12.5px;font-weight:600;line-height:1.25;color:var(--ink);}
.avbtn .t small{display:block;color:var(--muted);font-weight:400;font-size:10.5px;}
.av{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--navy),var(--sky));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;
  flex:none;overflow:hidden;}
.av img{width:100%;height:100%;object-fit:cover;}
.avmenu{position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border-radius:14px;
  box-shadow:var(--sh-lift);min-width:190px;padding:6px;z-index:80;border:1px solid var(--line);}
.avmenu button{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 12px;
  border-radius:9px;font-family:var(--body);font-size:13px;color:var(--ink);cursor:pointer;font-weight:500;}
.avmenu button:hover{background:var(--mist);}
.avmenu hr{border:none;border-top:1px solid var(--line);margin:5px 0;}

/* ---------------- layout ---------------- */
.wrap{padding:24px 24px 32px;}
/* Instrument Serif is a display face: it wants size and normal weight, not the
   600 that Fraunces needed. Letter-spacing comes off for the same reason. */
.page-h{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:30px;line-height:1.06;}
.page-s{color:var(--muted);font-size:13.5px;margin-top:4px;margin-bottom:20px;line-height:1.55;}

/* ---------------- cards (borderless) ---------------- */
/* Bordered, not floated. A hairline separates a card from the page at any
   size; a shadow only works when there is one card on the screen. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:17px 18px;box-shadow:none;}
.ch{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.ch h3{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:18px;line-height:1.2;}
.ch .ico{width:26px;height:26px;border-radius:9px;background:var(--sky-soft);color:var(--sky);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex:none;}
.ch .more{margin-left:auto;font-size:11.5px;color:var(--sky);font-weight:600;cursor:pointer;}
.grid{display:grid;gap:16px;}

/* ---------------- dashboard ---------------- */
.hello{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px;}
.hello h1{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:34px;line-height:1.05;}
.hello p{color:var(--muted);font-size:13.5px;margin-top:2px;}
.kpis{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 15px 10px 13px;display:flex;align-items:center;gap:10px;box-shadow:none;}
.kpi .ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:14px;flex:none;}
.kpi .v{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:22px;line-height:1;
  font-variant-numeric:tabular-nums;}
.kpi .k{font-size:10.5px;color:var(--muted);white-space:nowrap;}
.dash{display:grid;grid-template-columns:310px 1fr 272px;gap:16px;}
@media(max-width:1080px){ .dash{grid-template-columns:1fr;} }

.todo{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;}
.todo:last-child{border:none;padding-bottom:0;}
.todo:hover .n{color:var(--sky);}
.todo .pin{width:3px;border-radius:2px;background:var(--c,var(--n-gray));flex:none;}
.todo .n{font-weight:600;font-size:13.5px;}
.todo .m{font-size:11.5px;color:var(--muted);margin-top:1px;}
.todo .due{margin-left:auto;font-family:var(--mono);font-size:9.5px;font-weight:700;padding:3px 7px;
  border-radius:6px;background:var(--red-soft);color:var(--n-red);height:fit-content;white-space:nowrap;}
.todo .due.soon{background:var(--sky-soft);color:var(--sky);}
.todo .due.ok{background:var(--green-soft);color:var(--green);}

.pipe{display:flex;gap:7px;}
.st{flex:1;background:var(--mist);border-radius:13px;padding:11px 8px;text-align:center;
  position:relative;overflow:hidden;cursor:pointer;}
.st::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);}
.st:hover{background:var(--sky-soft);}
.st .v{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:24px;color:var(--c);line-height:1;
  font-variant-numeric:tabular-nums;}
.st .k{font-size:9.5px;color:var(--muted);margin-top:1px;}

.hero{background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r);padding:19px;box-shadow:none;display:flex;flex-direction:column;}
html[data-theme="dark"] .hero{background:#082130;}
.hero .hh{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#A9C9DE;font-weight:600;}
.hero .big{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:42px;margin-top:10px;
  line-height:1;font-variant-numeric:tabular-nums;}
.hero .sm{font-size:12px;color:#A9C9DE;}
.hero .brk{margin-top:14px;display:flex;flex-direction:column;gap:7px;}
.hero .br{display:flex;justify-content:space-between;font-size:12px;color:#BFD8E8;}
.hero .br b{color:#fff;font-family:var(--mono);}
.hero .br.tot{border-top:1px solid rgba(255,255,255,.16);padding-top:8px;}
.hero .br.tot span{color:#fff;font-weight:600;} .hero .br.tot b{color:var(--gold-2);}

.act{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
.act:last-child{border:none;}
.act .d{width:7px;height:7px;border-radius:50%;background:var(--sky);margin-top:6px;flex:none;}
.act .tm{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap;}
.act b{font-weight:600;}

/* ---------------- buttons ---------------- */
.btn{font-family:var(--body);font-weight:700;font-size:13px;padding:9px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:.13s;}
.btn:hover{border-color:var(--muted);}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.btn.pri{background:var(--navy);border-color:var(--navy);color:#fff;}
.btn.pri:hover{background:var(--navy-2);}
.btn.gold{background:linear-gradient(180deg,#E0B24E,#C9962C);border-color:var(--gold);
  color:#231902;font-weight:800;}
.btn.gold:hover{filter:brightness(1.06);border-color:var(--gold);}
.btn.danger{background:var(--red-soft);border-color:var(--red-soft);color:var(--red);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:8px;}

/* ---------------- gigs ---------------- */
.giglist{display:flex;flex-direction:column;gap:10px;}
/* One row shape, and it does not jump. Rows that lift on hover make a list of
   forty feel like it is twitching as the cursor crosses it. */
.gig{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;
  cursor:pointer;display:flex;align-items:center;gap:16px;box-shadow:none;
  border-left:3px solid var(--c,var(--n-gray));transition:border-color .13s,background .13s;}
.gig:hover{border-color:var(--muted);border-left-color:var(--c,var(--n-gray));}
.gig .g-main{flex:1;min-width:0;}
.gig .g-co{font-family:var(--body);font-weight:700;font-size:15px;}
.gig .g-client{font-size:12.5px;font-weight:600;color:var(--gold-deep,#8A6A18);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[data-theme="dark"] .gig .g-client{color:var(--gold-2);}
.gig .g-meta{font-size:12.5px;color:var(--muted);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.gig .g-right{text-align:right;flex:none;}
.gig .g-bid{font-family:var(--mono);font-size:11px;color:var(--muted);}
.gig .g-val{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:19px;
  font-variant-numeric:tabular-nums;}
/* Tinted, not solid. Four saturated blocks in a row was the loudest thing on
   the gig list and none of them were the thing you were looking for. */
.pill{display:inline-block;font-family:var(--body);font-size:10.5px;font-weight:800;letter-spacing:.05em;
  padding:3px 9px;border-radius:20px;color:var(--c,var(--n-gray));background:var(--c,var(--n-gray));
  box-shadow:inset 0 0 0 999px rgba(255,255,255,.86);white-space:nowrap;}
html[data-theme="dark"] .pill{box-shadow:inset 0 0 0 999px rgba(11,31,43,.84);}

/* ---------------- forms ---------------- */
label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;}
label small{font-weight:400;color:var(--muted);}
/* AN ALLOWLIST OF TYPES WAS THE BUG. This used to name text, email, date,
   number, tel, password and search, which meant any other input rendered raw:
   a white box on a dark page. The reference-link field on the apply form is
   type=url and was never in the list, so it shipped white on every phone. The
   two time fields on a gig had the same problem.

   Inverted, so the rule covers every text-like input there will ever be and
   only the controls that must stay native are excluded. New field types now
   inherit the portal's look by default rather than by remembering to add them
   here. Inputs created in JS with no type attribute are covered too. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=color]):not([type=image]):not([type=hidden]),
select,textarea{
  width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-family:var(--body);
  font-size:13.5px;color:var(--ink);background:var(--mist);
  /* iOS Safari paints its own background and inner shadow on text inputs
     regardless of the cascade unless appearance is reset, which is the other
     half of why this box looked wrong on a phone and right on a laptop. */
  -webkit-appearance:none;appearance:none;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sky);background:var(--card);}
textarea{resize:vertical;min-height:70px;}
.f{margin-bottom:14px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:700px){ .frow{grid-template-columns:1fr;} }

/* ---------------- profile ---------------- */
.pf{display:grid;grid-template-columns:290px 1fr;gap:16px;}
@media(max-width:900px){ .pf{grid-template-columns:1fr;} }
.avbig{width:104px;height:104px;border-radius:28px;background:linear-gradient(135deg,var(--navy),var(--sky));
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--display);
  font-size:34px;font-weight:600;margin:0 auto 14px;position:relative;box-shadow:var(--sh-lift);overflow:visible;}
.avbig .inner{width:100%;height:100%;border-radius:28px;overflow:hidden;display:flex;
  align-items:center;justify-content:center;}
.avbig img{width:100%;height:100%;object-fit:cover;}
.avbig .cam{position:absolute;bottom:-5px;right:-5px;width:32px;height:32px;border-radius:11px;
  background:var(--gold);color:#3A2A05;display:flex;align-items:center;justify-content:center;
  font-size:14px;border:3px solid var(--card);cursor:pointer;}
.tog{display:flex;align-items:center;gap:9px;margin-top:10px;cursor:pointer;user-select:none;}
.tog input{position:absolute;opacity:0;width:0;height:0;}
.tog .tk{width:38px;height:21px;border-radius:11px;background:var(--line);position:relative;flex:none;transition:.15s;}
.tog .tk::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s;}
.tog input:checked + .tk{background:var(--sky);}
.tog input:checked + .tk::after{transform:translateX(17px);}
.tog .tl{font-size:12.5px;font-weight:600;color:var(--ink-soft);}

/* ---------------- misc ---------------- */
.empty{text-align:center;padding:48px 20px;color:var(--muted);font-size:14px;
  background:var(--card);border-radius:var(--r);box-shadow:var(--sh);}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;
  padding:12px 22px;border-radius:12px;font-size:13.5px;box-shadow:0 10px 34px rgba(2,20,30,.4);z-index:200;}
.toast.err{background:var(--red);}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:7px;}
@keyframes sp{to{transform:rotate(360deg);}}

/* ---------------- login ---------------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;margin:-22px -18px -40px;}
.login{background:var(--card);border-radius:24px;padding:38px 34px;width:100%;max-width:400px;
  box-shadow:0 30px 70px rgba(2,20,30,.4);text-align:center;}
.login img{height:38px;margin-bottom:22px;}
html[data-theme="dark"] .login img{filter:invert(1) brightness(2.2);}
.login h1{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:22px;margin-bottom:6px;}
.login p{font-size:13.5px;color:var(--ink-soft);margin-bottom:22px;}
.login input{text-align:center;margin-bottom:12px;}
.login .btn{width:100%;}
.login .note{font-size:11.5px;color:var(--muted);margin-top:16px;line-height:1.5;}

/* ---------------- outreach log ---------------- */
.logitem{border-top:1px solid var(--line);padding:9px 0;font-size:13px;}
.logitem .lmeta{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:flex;gap:8px;align-items:center;}
.logitem .lacts{margin-left:auto;display:flex;gap:6px;opacity:0;transition:opacity .12s;}
.logitem:hover .lacts{opacity:1;}
.logitem .lacts button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;
  padding:2px 5px;border-radius:5px;}
.logitem .lacts button:hover{color:var(--ink);background:var(--mist);}
.logitem .lacts button.del:hover{color:var(--red);}

/* ---------------- talent / submissions ---------------- */
.subgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:14px;margin-top:14px;}
.sub-c{background:var(--card);border:2px solid var(--line);border-radius:15px;overflow:hidden;
  box-shadow:var(--sh);transition:transform .13s,box-shadow .13s;}
.sub-c:hover{transform:translateY(-2px);box-shadow:var(--sh-lift);}
.sub-c.short{border-color:var(--gold);}
.sub-c .sph{background:var(--mist);aspect-ratio:4/5;position:relative;overflow:hidden;}
.sub-c .sph img{width:100%;height:100%;object-fit:cover;display:block;}
.sub-c .sph .cnt{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;
  font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:5px;}
.sub-c .sph .tag{position:absolute;top:6px;left:6px;font-family:var(--mono);font-size:9px;font-weight:700;
  padding:3px 6px;border-radius:5px;background:var(--n-green);color:#fff;letter-spacing:.05em;}
.sub-c .sph .tag.open{background:var(--n-gray);}
.sub-c .si{padding:11px 13px;}
.sub-c .si .n{font-weight:600;font-size:14px;}
.sub-c .si .d{font-size:11.5px;color:var(--muted);margin-top:1px;}
.sub-c .si .cts{font-size:11.5px;color:var(--ink-soft);margin-top:6px;line-height:1.7;word-break:break-all;}
.sub-c .si .cts a{color:var(--sky);}
.sub-c .sact{padding:0 13px 12px;display:flex;gap:6px;}
.sub-c .sact button{flex:1;border:1.5px solid var(--line);background:var(--card);border-radius:9px;
  padding:6px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink-soft);font-family:var(--body);}
.sub-c .sact button.on{background:var(--gold);border-color:var(--gold);color:#3A2A05;}
.cdec{font-family:var(--mono);font-size:9.5px;font-weight:700;padding:3px 7px;border-radius:5px;
  letter-spacing:.05em;display:inline-block;margin-top:6px;}
.cdec.approved{background:var(--green-soft);color:var(--green);}
.cdec.maybe{background:var(--gold-soft);color:var(--gold-deep);}
.cdec.passed{background:var(--mist);color:var(--muted);}
.pubbox{background:var(--gold-soft);border-radius:14px;padding:14px 16px;margin-top:14px;}
.pubbox .lnk{display:flex;gap:8px;margin-top:9px;}
.pubbox .lnk input{font-family:var(--mono);font-size:11.5px;}
.rt{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;}
.rt input{position:absolute;opacity:0;width:0;height:0;}
.rt .track{width:38px;height:21px;border-radius:11px;background:var(--line);position:relative;flex:none;transition:.15s;}
.rt .track::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s;}
.rt input:checked + .track{background:var(--sky);}
.rt input:checked + .track::after{transform:translateX(17px);}
.rt .lab{font-size:12.5px;font-weight:600;color:var(--ink-soft);}

/* ---------------- top bar: never overflow ---------------- */
body{overflow-x:hidden;}
.topbar{flex-wrap:wrap;row-gap:8px;}
.topbar img.logo{flex:none;}
.nav{flex:1;min-width:0;flex-wrap:wrap;}
.tb-right{flex:none;min-width:0;}
.avbtn .t{max-width:150px;overflow:hidden;}
.avbtn .t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.avbtn .t > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
@media(max-width:820px){
  .avbtn .t{display:none;}          /* just the avatar on small screens */
  .nav button{padding:8px 11px;font-size:12.5px;}
}
.wrap{overflow-x:hidden;}
.pf{min-width:0;} .pf > *{min-width:0;}
.dash{min-width:0;} .dash > *{min-width:0;}

/* ---------------- team ---------------- */
.trow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);}
.trow:last-child{border:none;}
.trow .av{width:40px;height:40px;border-radius:12px;}
.trow .who{flex:1;min-width:0;}
.trow .who .n{font-weight:600;font-size:14px;}
.trow .who .e{font-size:11.5px;color:var(--muted);}
.trow .code{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--mist);
  padding:4px 8px;border-radius:7px;}
.trow .badge{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;
  padding:4px 8px;border-radius:7px;}
.trow .badge.admin{background:var(--gold-soft);color:var(--gold-deep);}
.trow .badge.agent{background:var(--sky-soft);color:var(--sky);}
.trow .badge.off{background:var(--red-soft);color:var(--red);}
.trow .seen{font-size:11px;color:var(--muted);min-width:92px;}
.trow .tacts{display:flex;gap:6px;}
html[data-theme="dark"] .trow .badge.admin{color:var(--gold-2);}
.linkbox{background:var(--gold-soft);border-radius:12px;padding:12px 14px;margin-top:12px;}
.linkbox input{font-family:var(--mono);font-size:11px;}

/* ---- sub-nav for grouped tabs (the Sales tab: Quotes · Console · Agreements) ---- */
.subnav{display:flex;gap:6px;margin:0 0 18px;flex-wrap:wrap;}
.subnav-b{border:1px solid var(--line);background:var(--card);border-radius:11px;padding:8px 15px;
  font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--body);transition:.13s;}
.subnav-b:hover{color:var(--ink);}
.subnav-b.on{background:var(--sky);color:#fff;border-color:var(--sky);}

/* ---------------- talent roster ---------------- */
.tfilters{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.tfilters button{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:7px 14px;font-size:12.5px;
  font-weight:600;color:var(--muted);cursor:pointer;box-shadow:var(--sh);font-family:var(--body);}
/* Gold for the live filter, tinted rather than filled, so a row of six chips
   has one obvious answer instead of six competing blocks. */
.tfilters button.on{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold-deep);}
html[data-theme="dark"] .tfilters button.on{color:var(--gold-2);}

/* ---- automated nudges admin card ------------------------------------------ */
.anr{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-bottom:9px;cursor:pointer;}
.anr.master{background:var(--green-soft);border-color:rgba(63,191,143,.35);}
.anr input{position:absolute;opacity:0;width:0;height:0;}
.anr-t{flex:1;} .anr-t b{font-size:13.5px;} .anr-t span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px;line-height:1.45;}
.anr-sw{width:42px;height:24px;border-radius:20px;background:var(--line);position:relative;flex:none;transition:.15s;}
.anr-sw::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.15s;}
.anr input:checked ~ .anr-sw{background:var(--green);}
.anr input:checked ~ .anr-sw::after{transform:translateX(18px);}
.anacts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.anout{margin-top:12px;}
.anout-h{font-family:var(--display);font-size:16px;font-weight:600;}
.anout-b{font-size:12.5px;color:var(--ink-soft);margin-top:3px;line-height:1.6;}

/* ---- collapsible dashboard sections (talent Home) ------------------------- */
.dcard .ch h3{flex:1;}
.dcol-btn{border:1px solid var(--line);background:transparent;color:var(--muted);font-size:11.5px;
  font-weight:600;cursor:pointer;font-family:var(--body);padding:4px 11px;border-radius:9px;transition:.13s;}
.dcol-btn:hover{color:var(--ink);border-color:var(--sky);}
.card.dcol > *:not(.ch){display:none;}
.card.dcol .ch{margin-bottom:0;}

/* ---- comp card ON THE DASHBOARD (the living preview module) ---------------- */
.ccdash{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:var(--sh);margin-bottom:16px;}
.ccd-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);}
.ccd-h{display:flex;flex-direction:column;gap:5px;flex:1;}
.ccd-h h3{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:16px;color:var(--ink);}
.ccd-status{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;width:max-content;}
.ccd-status .dot{width:6px;height:6px;border-radius:50%;}
.ccd-status.live{color:var(--green);} .ccd-status.live .dot{background:var(--green);box-shadow:0 0 0 3px var(--green-soft);}
.ccd-status.notlive{color:var(--gold);} .ccd-status.notlive .dot{background:var(--gold);}
.ccd-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:var(--green);background:var(--green-soft);border:1px solid var(--green);
  padding:6px 12px 6px 8px;border-radius:20px;white-space:nowrap;}
.ccd-chip .vk{width:15px;height:15px;border-radius:50%;background:var(--green);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;}
/* Network member's card carries the network accent instead of the signed green. */
.ccd-chip.net{color:var(--gold-deep);background:var(--gold-soft);border-color:var(--gold-line);
  padding:6px 12px;}
.ccd-net{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--muted,#5a6b78);
  background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:12px;padding:11px 13px;}
.ccd-net b{color:var(--gold-deep);}

/* ---- Network first-login Terms gate ---- */
.ntgate{max-width:600px;margin:6px auto 40px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.28);}
.ntg-head{background:linear-gradient(150deg,#0e3252,#134a72 60%,#186091);padding:26px 28px 22px;}
.ntg-hi{font-family:'Fraunces',Georgia,serif;font-size:23px;color:#fff;line-height:1.25;}
.ntg-sub{font-size:13.5px;color:#cfe0ee;margin-top:7px;line-height:1.55;}
.ntg-body{padding:22px 26px 26px;}
.ntg-label{font-size:13px;color:var(--gold-deep);font-weight:700;margin-bottom:12px;letter-spacing:.2px;}
.ntg-terms{background:rgba(0,0,0,.14);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;max-height:320px;overflow-y:auto;font-size:12.7px;line-height:1.6;color:var(--ink);}
.ntg-terms h4{font-size:13px;margin:14px 0 5px;color:var(--gold-2);}
.ntg-terms p{margin:0 0 5px;}
.ntg-terms .nt-eff{color:var(--muted);font-size:11.5px;margin-bottom:10px;}
.ntg-agree{display:flex;align-items:flex-start;gap:11px;margin:18px 2px 0;cursor:pointer;}
.ntg-agree input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--gold);cursor:pointer;}
.ntg-agree span{font-size:13.5px;}
.ntgate .btn.pri{width:100%;margin-top:16px;}
.ntg-fine{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.5;}

/* ---- Signed-Talent offer card (shown to a Network member) ---- */
.sofr{background:var(--card);border:1px solid var(--gold-line);border-radius:16px;overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.28);margin-bottom:16px;}
.sofr-top{background:linear-gradient(135deg,#1b4a2f,#12795A);padding:7px 18px;font-size:11px;
  font-weight:800;letter-spacing:1px;color:#d8f5e9;}
.sofr-bd{padding:20px 22px 22px;}
.sofr-bd h3{margin:0 0 4px;font-size:20px;font-family:'Fraunces',Georgia,serif;}
.sofr-sub{color:var(--muted);font-size:13.5px;margin-bottom:14px;}
.sofr-perks{margin:0 0 16px;padding:0;list-style:none;}
.sofr-perks li{font-size:13.5px;padding:5px 0 5px 24px;position:relative;}
.sofr-perks li:before{content:'\2713';position:absolute;left:0;color:var(--green,#12795A);font-weight:800;}
.sofr-fine{font-size:12px;color:var(--muted);margin:0 0 16px;line-height:1.5;}
.sofr-fine b{color:var(--ink,inherit);}
.sofr-row{display:flex;gap:10px;}
.sofr-row .btn{flex:1;}

.ccd-body{display:flex;}
@media(max-width:560px){ .ccd-body{flex-direction:column;} }
.ccd-peek{position:relative;width:220px;flex:none;background:#0A1620;overflow:hidden;min-height:210px;}
.ccd-peek img{width:100%;height:100%;object-fit:cover;display:block;}
/* On a phone — where nearly all talent are — show the WHOLE photo, uncropped.
   The card stacks, the image takes its natural height, nothing gets its head cut
   off. object-fit:contain keeps portrait shots intact within a sane cap. */
@media(max-width:560px){
  .ccd-peek{width:100%;height:auto;min-height:0;background:#08131C;}
  .ccd-peek img{height:auto;max-height:78vh;object-fit:contain;}
  .ccd-noimg{min-height:280px;}
}
.ccd-noimg{width:100%;min-height:210px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:44px;color:#3a5566;background:linear-gradient(135deg,#0e2a3c,#123047);}
.ccdash.off .ccd-peek img{filter:grayscale(.35) brightness(.82);}
.ccd-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,20,31,0) 40%,rgba(4,20,31,.85));}
.ccd-who{position:absolute;left:13px;right:13px;bottom:11px;color:#fff;}
.ccd-who .n{font-family:var(--display);font-size:19px;font-weight:600;line-height:1.1;}
.ccd-who .m{font-size:11.5px;color:#CFE0EA;margin-top:3px;}
.ccd-tags{position:absolute;top:11px;left:11px;display:flex;gap:5px;flex-wrap:wrap;}
.ccd-tags span{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.16);padding:4px 7px;border-radius:6px;color:#fff;}
.ccd-lens{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;
  transition:.18s;text-decoration:none;background:rgba(4,20,31,.35);}
.ccd-peek:hover .ccd-lens{opacity:1;}
.ccd-lens span{background:var(--gold);color:#2a2005;font-size:12px;font-weight:700;padding:9px 14px;border-radius:10px;}

.ccd-side{flex:1;padding:16px;display:flex;flex-direction:column;gap:14px;}
.ccd-meter .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;}
.ccd-meter .l{font-size:12.5px;color:var(--ink-soft);}
.ccd-meter .p{font-family:var(--display);font-size:17px;font-weight:600;color:var(--gold);}
.ccd-bar{height:8px;border-radius:20px;background:var(--mist);overflow:hidden;}
.ccd-bar i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--gold),var(--gold-2));}
.ccd-tip{font-size:11.5px;color:var(--ink-soft);margin-top:8px;line-height:1.45;}
.ccd-pts{font-family:var(--mono);font-size:10px;color:var(--gold);opacity:.85;margin-left:4px;}
.ccd-checks{display:flex;flex-direction:column;gap:7px;}
.ccd-chk{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);}
.ccd-chk .b{width:17px;height:17px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:700;}
.ccd-chk.done .b{background:var(--green-soft);color:var(--green);}
.ccd-chk.todo{color:var(--ink-soft);}
.ccd-chk.todo .b{background:var(--gold-soft);color:var(--gold);border:1px dashed var(--gold-line);}
.ccd-fresh{display:flex;gap:10px;align-items:flex-start;background:var(--gold-soft);
  border:1px solid var(--gold-line);border-radius:11px;padding:10px 12px;font-size:12.5px;
  color:var(--gold-deep);line-height:1.5;}
html[data-theme="dark"] .ccd-fresh{color:var(--gold-2);}
.ccd-fresh .fx{flex:none;border:none;background:transparent;color:inherit;opacity:.6;font-size:16px;
  line-height:1;cursor:pointer;padding:0 2px;}
.ccd-fresh .fx:hover{opacity:1;}
.ccd-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.ccd-link{display:flex;align-items:center;gap:8px;background:var(--mist);border:1px solid var(--line);
  border-radius:10px;padding:8px 11px;font-family:var(--mono);font-size:12px;color:var(--ink-soft);}
.ccd-link .u{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sky);}
.ccd-link .cp{border:none;background:transparent;color:var(--gold);font-family:var(--body);font-weight:600;
  cursor:pointer;font-size:12.5px;}
.ccd-ig{width:100%;justify-content:center;background:transparent;border:1px solid var(--line);color:var(--ink);
  font-weight:600;font-size:12.5px;padding:9px 12px;border-radius:10px;cursor:pointer;font-family:var(--body);
  display:flex;align-items:center;gap:6px;transition:.13s;}
.ccd-ig:hover{border-color:var(--gold);color:var(--gold);}

/* ---- the second filter axis -------------------------------------------------
   Everything that isn't a pipeline status lives behind one button. Thirteen
   filters as chips is a wall you read; as a grouped menu with counts it's a
   list you scan, and the next one we add doesn't cost another row of page. */
.slicebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-8px 0 16px;position:relative;}
.slicebtn{display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--line);
  background:transparent;border-radius:11px;padding:8px 14px;font-size:12.5px;font-weight:600;
  color:var(--muted);cursor:pointer;font-family:var(--body);transition:.13s;}
.slicebtn:hover{border-color:var(--sky);color:var(--ink);}
.slicebtn.on{border-style:solid;border-color:var(--gold);color:var(--gold);}
.slicechip{display:inline-flex;align-items:center;gap:9px;background:var(--gold-soft);
  border:1px solid var(--gold-line);color:var(--gold-deep);border-radius:11px;
  padding:7px 8px 7px 13px;font-size:12.5px;}
html[data-theme="dark"] .slicechip{color:var(--gold-2);}
.slicechip b{font-weight:600;}
.slicechip>span{opacity:.7;font-variant-numeric:tabular-nums;}
.slicechip button{border:none;background:transparent;color:inherit;cursor:pointer;
  font-size:16px;line-height:1;padding:0 3px;opacity:.65;}
.slicechip button:hover{opacity:1;}

.slicebd{position:fixed;inset:0;z-index:59;}
.slicepop{position:absolute;top:calc(100% + 8px);left:0;z-index:60;width:300px;
  max-height:70vh;overflow:auto;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:7px;box-shadow:var(--sh-lift);}
.slicepop .grp{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);padding:12px 11px 6px;}
.slicepop .grp:first-child{padding-top:6px;}
.slicepop button.opt{display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:12px;border:none;background:transparent;color:var(--ink);text-align:left;
  padding:9px 11px;border-radius:10px;font-size:13px;font-family:var(--body);cursor:pointer;}
.slicepop button.opt:hover:not([disabled]){background:var(--mist);}
.slicepop button.opt.on{background:var(--sky);color:#fff;}
.slicepop button.opt .h{display:block;font-size:11px;opacity:.6;margin-top:2px;line-height:1.35;}
.slicepop button.opt .n{flex:none;font-size:11.5px;opacity:.55;font-variant-numeric:tabular-nums;}
.slicepop button.opt[disabled]{opacity:.33;cursor:default;}
.slicepop button.opt.clr{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;
  color:var(--muted);justify-content:center;padding-top:12px;}

/* On a phone a dropdown pinned to a button ends up half off the screen.
   Same menu, docked to the bottom, where a thumb already is. */
@media(max-width:560px){
  .slicepop{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;max-height:76vh;
    border-radius:18px 18px 0 0;padding:7px 7px 22px;}
  .slicebd{background:rgba(0,0,0,.35);}
}
/* ---- bulk send ------------------------------------------------------------
   A ticked card has to look ticked from across the room. The checkbox alone is
   a 16px signal for a decision that ends in eighty emails. */
.selall{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-size:12.5px;
  color:var(--muted);cursor:pointer;user-select:none;}
.selall input{width:15px;height:15px;accent-color:var(--sky);cursor:pointer;}

.tc.selectable{position:relative;}
.tc .tsel{position:absolute;top:10px;right:10px;z-index:2;display:flex;padding:5px;cursor:pointer;}
.tc .tsel input{width:17px;height:17px;accent-color:var(--gold);cursor:pointer;}
.tc.picked{box-shadow:0 0 0 2px var(--gold),var(--sh-lift);}

.bulkbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;
  background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:13px;padding:10px 14px;
  position:sticky;top:8px;z-index:12;}
.bulkbar .bcount{font-weight:600;font-size:13px;color:var(--gold-deep);}
html[data-theme="dark"] .bulkbar .bcount{color:var(--gold-2);}
.bulkbar .btn{margin-left:auto;}
.bulkbar .bstatus{font:inherit;font-size:13px;padding:7px 10px;border-radius:9px;
  background:var(--card,#0e2a3d);color:var(--ink,#eaf1f8);border:1px solid var(--gold-line);cursor:pointer;}

/* SIGNED / NETWORK tier chips in the showcase builder. */
.tchip{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.6px;padding:2px 7px;
  border-radius:20px;vertical-align:middle;white-space:nowrap;}
.tchip-signed{color:var(--gold-deep,#8A6A18);background:var(--gold-soft,#FBF3DF);border:1px solid var(--gold-line,#EBD9A8);}
.tchip-net{color:#0F6E56;background:#E1F5EE;border:1px solid #9FE1CB;}
html[data-theme="dark"] .tchip-net{color:#5DCAA5;background:rgba(93,202,165,.14);border-color:rgba(93,202,165,.4);}

/* ===================== PROSPECTS / PIPELINE ===================== */
.pp-gh{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--muted);margin:16px 0 8px;}
.pp-gh.overdue{color:var(--n-red,#d9694e);}
.pp-gh.today{color:var(--gold-2);}
/* Scheduled, not due. Steel rather than gold or red, because it is information
   and not a task. */
.pp-gh.upcoming{color:var(--sky,#1B6E9E);}
.pp-qrow{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap;}
.pp-qrow:first-child{border-top:0;}
.pp-qmain{flex:1;min-width:0;}
.pp-qtop{font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pp-due{font-size:11.5px;color:var(--muted);font-weight:600;}
.pp-qsum{font-size:12.5px;color:var(--muted);margin-top:3px;}
.pp-qacts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.pp-draft{flex-basis:100%;white-space:pre-wrap;font-size:12.5px;line-height:1.5;background:rgba(0,0,0,.14);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-top:8px;color:var(--ink);}

.pp-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;}
.pp-filters select,.pp-filters input{font:inherit;font-size:12.5px;padding:7px 26px 7px 11px;border-radius:8px;
  background:var(--card-2,rgba(255,255,255,.03));color:var(--ink);border:1px solid var(--line);cursor:pointer;
  width:auto;min-width:110px;max-width:160px;flex:0 0 auto;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238fb0c6' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;}
.pp-filters input{cursor:text;min-width:150px;max-width:none;background-image:none;padding-right:11px;}
.pp-lrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  border-top:1px solid var(--line);cursor:pointer;flex-wrap:wrap;}
.pp-lrow:first-child{border-top:0;}
.pp-lrow:hover{background:rgba(201,150,44,.06);}
.pp-lmain{flex:1 1 auto;min-width:0;text-align:left;}
.pp-lsub{font-size:12px;color:var(--muted);margin-top:3px;}
.pp-lmeta{text-align:right;display:flex;flex-direction:column;gap:3px;align-items:flex-end;}
.pp-lsm{font-size:11.5px;color:var(--muted);}

.pp-lane{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.5px;padding:2px 7px;border-radius:20px;vertical-align:middle;}
.pp-lane-a{color:#8A6A18;background:var(--gold-soft);border:1px solid var(--gold-line);}
.pp-lane-b{color:#0F5C8A;background:rgba(63,159,209,.14);border:1px solid rgba(63,159,209,.4);}
.pp-lane-c{color:#0F6E56;background:rgba(93,202,165,.16);border:1px solid rgba(93,202,165,.4);}
html[data-theme="dark"] .pp-lane-a{color:var(--gold-2);}
.pp-score{display:inline-block;font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:20px;vertical-align:middle;
  background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--line);}
.pp-score.s5{color:#fff;background:#12795A;border-color:#12795A;}
.pp-score.s4{color:#0F6E56;background:rgba(18,121,90,.18);border-color:rgba(18,121,90,.4);}
.pp-score.s1{color:var(--n-red,#d9694e);border-color:rgba(217,105,78,.4);}
.pp-stage{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;
  background:var(--gold-soft);color:var(--gold-deep);border:1px solid var(--gold-line);}

.pp-chead .pp-chrow{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.pp-cname{font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pp-cmeta{font-size:12.5px;color:var(--muted);margin-top:3px;}
.pp-cmeta a{color:var(--gold-2);text-decoration:none;}
.pp-cmeta a:hover{text-decoration:underline;}
.pp-clbl{display:inline-block;min-width:52px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:800;color:var(--gold-2);opacity:.75;margin-right:6px;}
.pp-csoc{font-size:12px;margin-top:5px;}
.pp-csoc a{color:var(--gold-2);text-decoration:none;text-transform:capitalize;}
.pp-cright{text-align:right;display:flex;flex-direction:column;gap:5px;align-items:flex-end;}
.pp-cval{font-size:18px;font-weight:800;color:var(--gold-2);}
.pp-cicp{font-size:12.5px;color:var(--muted);background:rgba(0,0,0,.12);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin-top:12px;line-height:1.5;}
.pp-cacts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.pp-sec{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--gold-2);margin:20px 0 8px;}
.pp-contact{padding:10px 16px;border-top:1px solid var(--line);}
.pp-contact:first-child{border-top:0;}

.pp-trow{display:flex;gap:12px;padding:12px 16px;border-top:1px solid var(--line);}
.pp-trow:first-child{border-top:0;}
.pp-trow:hover{background:rgba(201,150,44,.05);}
.pp-tdot{width:11px;height:11px;border-radius:50%;flex:none;margin-top:5px;background:var(--gold);}
.pp-tdot.done{background:var(--green,#12795A);}
.pp-tbody{flex:1;min-width:0;}
.pp-ttop{font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pp-tstatus{font-size:10.5px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;padding:1px 8px;}
.pp-tmeta{font-size:12px;color:var(--muted);margin-top:3px;}
.pp-tbodytext{font-size:12.5px;line-height:1.55;white-space:pre-wrap;color:var(--ink);margin-top:6px;
  background:rgba(0,0,0,.12);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
/* What THEY sent back. Indented and rail-marked so the two sides of the
   conversation never have to be told apart by reading the wording. */
.pp-treply{font-size:12.5px;line-height:1.55;white-space:pre-wrap;color:var(--ink);
  margin:6px 0 0 14px;background:rgba(212,175,84,.07);border:1px solid var(--line);
  border-left:3px solid var(--gold,#d4af54);border-radius:0 10px 10px 0;padding:9px 12px;}
.pp-treplyh{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold,#d4af54);margin-bottom:5px;}
.pp-treplybtn{margin-top:8px;font-size:11.5px;font-weight:600;color:var(--muted);
  background:none;border:1px solid var(--line);border-radius:8px;padding:4px 10px;cursor:pointer;}
.pp-treplybtn:hover{color:var(--ink);border-color:var(--gold,#d4af54);}

.pp-mh{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);}
.pp-mh h3{margin:0;font-size:17px;}
.pp-mh .ppx{background:none;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;}
.pp-mbody{padding:16px 18px;}
.pp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;}
@media(max-width:560px){ .pp-grid2{grid-template-columns:1fr;} }
.pp-f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);margin-bottom:10px;}
.pp-f span{font-weight:600;}
.pp-f input,.pp-f select,.pp-f textarea{font:inherit;font-size:13.5px;padding:9px 11px;border-radius:9px;
  background:var(--card);color:var(--ink);border:1px solid var(--line);width:100%;}
.pp-f textarea{min-height:64px;resize:vertical;}
.pp-check{display:flex;align-items:center;gap:8px;font-size:13px;margin:6px 0 4px;cursor:pointer;}
.pp-check input{width:18px;height:18px;accent-color:var(--gold);}
.pp-crow{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr 1fr auto;gap:6px;margin-bottom:6px;align-items:center;}
.pp-crow input{font:inherit;font-size:12.5px;padding:8px 9px;border-radius:8px;background:var(--card);color:var(--ink);border:1px solid var(--line);min-width:0;width:100%;}
.pp-crm{background:none;border:0;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 4px;}
.pp-crm:hover{color:var(--n-red,#d9694e);}
@media(max-width:560px){ .pp-crow{grid-template-columns:1fr 1fr auto;} }
.pp-prop{background:var(--card);border:1px solid var(--gold-line);border-radius:12px;padding:14px 16px;}
.pp-reject{margin-top:12px;font-size:13px;font-weight:600;color:var(--n-red,#d9694e);
  background:rgba(217,105,78,.1);border:1px solid rgba(217,105,78,.35);border-radius:10px;padding:11px 13px;}
.pp-imptable{max-height:320px;overflow-y:auto;}
.pp-improw{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line);}
.pp-improw:first-child{border-top:0;}
.pp-improw input{width:17px;height:17px;flex:none;accent-color:var(--gold);}
.pp-improw.dup{opacity:.72;}
.pp-impmain{min-width:0;}
.pp-impflag{font-size:9.5px;font-weight:800;letter-spacing:.5px;color:var(--n-red,#d9694e);
  background:rgba(217,105,78,.14);border:1px solid rgba(217,105,78,.4);border-radius:20px;padding:1px 7px;}
.pp-impwarn{font-size:12.5px;line-height:1.5;color:#8a6a18;background:var(--gold-soft);
  border:1px solid var(--gold-line);border-radius:10px;padding:10px 12px;margin-bottom:12px;}
.pp-impwarn b{color:var(--gold-deep);}
html[data-theme="dark"] .pp-impwarn{color:var(--gold-2);}
.pp-filters input[type=file],.pp-f input[type=file]{padding:7px;cursor:pointer;}
.pp-regsel{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
/* Channel chips on the draft setup step. Same chip as the register picker, so
   the two steps of the modal read as one thing. */
.pp-chanpick{display:flex;gap:6px;flex-wrap:wrap;}
/* What the agent typed, shown back on the drafts step so they can see what the
   copy was written from without going back a screen. */
.pp-ctxused{border-left:2px solid var(--gold);padding:2px 0 2px 10px;margin:0 0 12px;
  font-style:italic;}
.pp-draftacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
/* Pipeline board */
.pp-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
@media(max-width:820px){ .pp-board{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:520px){ .pp-board{grid-template-columns:1fr;} }
.pp-col{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;min-height:120px;}
.pp-colh{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;color:var(--muted);
  padding:4px 6px 10px;display:flex;justify-content:space-between;}
.pp-colh span{color:var(--gold-2);}
.pp-colbody{display:flex;flex-direction:column;gap:8px;}
.pp-card{background:var(--card-2,rgba(255,255,255,.03));border:1px solid var(--line);border-radius:10px;
  padding:10px 11px;cursor:pointer;font-size:13px;}
.pp-card:hover{border-color:var(--gold-line);}
.pp-cardt{font-size:11.5px;color:var(--muted);margin-top:5px;}
.pp-cardempty{color:var(--muted);font-size:12px;text-align:center;padding:8px;}
.pp-days{font-size:10px;font-weight:800;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:20px;padding:1px 7px;vertical-align:middle;}
.pp-days.hot{color:var(--n-red,#d9694e);background:rgba(217,105,78,.14);border-color:rgba(217,105,78,.4);}
.pp-countdown{font-size:15px;font-weight:800;color:var(--gold-2);}
.pp-countdown.hot{color:var(--n-red,#d9694e);}
.pp-socs{display:inline-flex;gap:5px;vertical-align:middle;}
.pp-soc{font-size:9.5px;font-weight:800;letter-spacing:.4px;color:var(--gold-2);background:rgba(201,150,44,.12);
  border:1px solid var(--gold-line);border-radius:6px;padding:1px 6px;cursor:pointer;text-decoration:none;}
.pp-soc:hover{background:rgba(201,150,44,.24);}
.btn.sm.danger,.btn.danger{color:var(--n-red,#d9694e);border-color:rgba(217,105,78,.45);background:rgba(217,105,78,.08);}
.btn.sm.danger:hover,.btn.danger:hover{background:rgba(217,105,78,.16);}
/* nav badge (overdue count on CRM) */
.navbadge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  margin-left:6px;padding:0 5px;border-radius:20px;background:var(--n-red,#d9694e);color:#fff;
  font-size:10px;font-weight:800;vertical-align:middle;}
/* stats strip */
.pp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
@media(max-width:560px){ .pp-stats{grid-template-columns:repeat(2,1fr);} }
.pp-stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px;}
.pp-stat .v{font-size:19px;font-weight:800;color:var(--gold-2);}
.pp-stat .k{font-size:11px;color:var(--muted);margin-top:2px;}
.pp-stat-click{cursor:pointer;transition:border-color .12s,background .12s;}
.pp-stat-click:hover,.pp-stat-click:focus-visible{border-color:var(--gold);background:var(--gold-soft);outline:none;}
.pp-wt{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.pp-wtrow{border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;transition:border-color .12s,background .12s;}
.pp-wtrow:hover{border-color:var(--gold);background:var(--gold-soft);}
.pp-wttop{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.pp-wtdate{font-size:11px;color:var(--muted);white-space:nowrap;}
.pp-wtmeta{font-size:11.5px;color:var(--muted);margin-top:2px;}
.pp-wtsum{font-size:13px;color:var(--ink);margin-top:4px;}
/* paste-to-select */
.ps-grp{margin-top:12px;}
.ps-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
.ps-ok{color:var(--green,#2f9e6f);} .ps-warn{color:var(--gold-deep);} .ps-bad{color:var(--n-red,#d9694e);}
.ps-row{display:flex;align-items:flex-start;gap:8px;padding:5px 4px;font-size:13px;cursor:pointer;border-radius:6px;}
.ps-row:hover{background:var(--gold-soft);}
.ps-row input{width:16px;height:16px;margin-top:2px;accent-color:var(--gold);}
.ps-sub{color:var(--muted);font-weight:400;font-size:12px;}
.ps-amb{font-size:12px;color:var(--muted);margin:6px 0 2px;}
.ps-miss{font-size:13px;color:var(--n-red,#d9694e);padding:3px 4px;}
.ps-none{font-size:12.5px;color:var(--muted);padding:2px 4px;}
/* bulk-touch preview */
.pp-prevlist{max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px;}
.pp-prevrow{padding:8px 10px;border-bottom:1px solid var(--line);}
.pp-prevrow:last-child{border-bottom:none;}
.pp-prevco{font-weight:700;font-size:12.5px;}
.pp-prevsum{font-size:12.5px;color:var(--muted);margin-top:2px;}
/* undo toast */
.toast-undo{display:flex;align-items:center;gap:14px;}
.toast-undobtn{background:var(--gold);color:#1a1204;border:none;border-radius:7px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
.toast-undobtn:hover{filter:brightness(1.05);}
.toast-undobtn:disabled{opacity:.6;cursor:default;}
/* client / prospect category badge */
.crm-cat,.pp-cat{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:var(--gold-soft);color:var(--gold-deep);border:1px solid var(--gold-line);vertical-align:middle;}
html[data-theme="dark"] .crm-cat,html[data-theme="dark"] .pp-cat{color:var(--gold-2);}
.pp-dnc{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;background:rgba(217,105,78,.14);color:var(--n-red,#d9694e);border:1px solid rgba(217,105,78,.35);vertical-align:middle;}
/* multi-show (highest-intent) badge */
.pp-multi{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;background:linear-gradient(180deg,#E8C36A,#C9962C);color:#241a05;
  border:1px solid var(--gold-deep,#8A6A18);vertical-align:middle;white-space:nowrap;}
/* show appearance rows on the prospect detail */
.pp-approw{display:flex;align-items:flex-start;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);}
.pp-approw:last-child{border-bottom:none;}
.pp-appname{font-size:14px;}
/* multi-select "add to shows" rows */
.pp-aplist{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto;}
.pp-aprow2{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;cursor:pointer;flex-wrap:wrap;}
.pp-aprow2:hover{border-color:var(--gold);background:var(--gold-soft);}
.pp-aprow2 input[type=checkbox]{width:17px;height:17px;accent-color:var(--gold);flex:none;}
.pp-aprow2 .ap_name{flex:1;min-width:120px;font-size:13.5px;font-weight:600;}
.pp-aprow2 .ap_booth,.pp-aprow2 .ap_size{width:96px;flex:none;font:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);}
.pp-shows{color:var(--gold-2,var(--gold))!important;font-weight:600;}
.pp-tshow{display:inline-block;font-size:10.5px;font-weight:700;color:var(--gold-deep,#8A6A18);
  background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:999px;padding:1px 7px;vertical-align:middle;}
html[data-theme="dark"] .pp-tshow{color:var(--gold-2);}
/* drawer category editor */
.cl-catbox{display:flex;align-items:center;gap:8px;margin:4px 0 12px;flex-wrap:wrap;}
.cl-catl{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.cl-catbox input{flex:1;min-width:140px;font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);}
/* client contacts (people) */
.cl-person{display:flex;align-items:flex-start;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);}
.cl-person:last-of-type{border-bottom:none;}
.cl-person .t{font-size:13.5px;font-weight:600;}
.cl-person .w{font-size:12px;color:var(--muted);margin-top:2px;}
.cl-psoc{margin-top:4px;font-size:12px;display:flex;gap:8px;flex-wrap:wrap;}
.cl-psoc a{color:var(--gold-2,var(--gold));text-decoration:none;font-weight:600;}
.cl-primary{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:999px;background:var(--gold-soft);color:var(--gold-deep);vertical-align:middle;}
html[data-theme="dark"] .cl-primary{color:var(--gold-2);}
.cl-logbody{font-size:12.5px;color:var(--ink);margin-top:3px;white-space:pre-wrap;}
.cl-lognext{font-size:11.5px;color:var(--gold-deep);margin-top:3px;font-weight:600;}
html[data-theme="dark"] .cl-lognext{color:var(--gold-2);}
.radar-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 12px;padding:10px 14px;border-radius:10px;background:var(--gold-soft);border:1px solid var(--gold-line);font-size:13.5px;}
.crm-caret{flex:none;width:20px;height:20px;padding:0;border:none;background:none;color:var(--muted);cursor:pointer;
  font-size:12px;line-height:20px;text-align:center;border-radius:5px;}
.crm-caret:hover{background:var(--gold-soft);color:var(--gold-deep);}
.crm-caret.ghost{cursor:default;visibility:hidden;}
/* bulk bar */
.pp-bulkbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding:9px 12px;
  background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:10px;
  position:sticky;top:8px;z-index:6;box-shadow:0 4px 14px rgba(0,0,0,.10);}
.pp-bulkbar .bcount{font-weight:700;font-size:13px;color:var(--gold-deep);}
html[data-theme="dark"] .pp-bulkbar .bcount{color:var(--gold-2);}
.pp-lcheck{flex:none;display:flex;align-items:center;}
.pp-lcheck input{width:17px;height:17px;accent-color:var(--gold);}
.pp-selall{margin:0 0 8px 2px;}
.pp-selall label{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);cursor:pointer;}
.pp-selall input{width:16px;height:16px;accent-color:var(--gold);}
.pp-lrow{gap:12px;}
/* tags */
.pp-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;}
.pp-tag{font-size:10.5px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:20px;padding:2px 9px;}
.pp-tagcard{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pp-tlabel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:800;color:var(--gold-2);margin-right:4px;}
.pp-tagx{cursor:pointer;}
.pp-tagx:hover{color:var(--n-red,#d9694e);border-color:rgba(217,105,78,.4);}
.pp-taginput{font:inherit;font-size:12px;padding:4px 9px;border-radius:20px;background:var(--card);
  color:var(--ink);border:1px dashed var(--line);width:110px;}

.bmode{display:flex;gap:6px;background:var(--mist);border-radius:12px;padding:4px;}
.bmode button{flex:1;border:none;background:transparent;border-radius:9px;padding:9px 12px;
  font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--body);}
.bmode button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh);}

.bopt{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);
  border-radius:11px;margin-bottom:7px;cursor:pointer;font-size:13.5px;}
.bopt:has(input:checked){border-color:var(--gold);background:var(--gold-soft);}
.bopt input{accent-color:var(--gold);}

.blab{font-size:12px;color:var(--muted);margin-bottom:5px;}
.bwho{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;}
.bwho .bh{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;}
.bwho .bh.skip{margin-top:14px;color:var(--gold);}
.bwho .bh.fail{margin-top:14px;color:var(--red);}
.bnames{display:flex;flex-wrap:wrap;gap:5px;max-height:132px;overflow-y:auto;}
.bnames span{background:var(--mist);border-radius:7px;padding:4px 9px;font-size:12px;}
.bskip{font-size:12.5px;color:var(--ink-soft);line-height:1.75;max-height:132px;overflow-y:auto;}
.bdone .bh2{font-family:var(--display);font-size:19px;font-weight:600;margin-bottom:3px;}

/* ---- a notice sent to some talent, on their dashboard ---- */
.tnotice{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--sky);
  border-radius:13px;padding:15px 17px;margin-bottom:12px;box-shadow:var(--sh);}
.tnotice.good{border-left-color:var(--green);}
.tnotice.urgent{border-left-color:var(--gold);}
.tnotice .nt{font-weight:700;font-size:14.5px;margin-bottom:5px;}
.tnotice .nb{font-size:13.5px;color:var(--ink-soft);line-height:1.6;white-space:pre-line;}
.tnotice .nf{display:flex;align-items:center;gap:12px;margin-top:11px;}
.tnotice .nd{font-size:11.5px;color:var(--muted);}

.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;}
.tc{background:var(--card);border-radius:16px;padding:16px;box-shadow:var(--sh);display:flex;gap:13px;
  align-items:flex-start;transition:transform .13s,box-shadow .13s;}
.tc:hover{transform:translateY(-2px);box-shadow:var(--sh-lift);}
.tc .tav{width:52px;height:52px;border-radius:15px;flex:none;overflow:hidden;
  background:linear-gradient(135deg,var(--navy),var(--sky));display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:700;font-size:15px;}
.tc .tav img{width:100%;height:100%;object-fit:cover;}
.tc .tb{flex:1;min-width:0;}
.tc .tn{font-weight:600;font-size:14px;}
.tc .tm{font-size:11.5px;color:var(--muted);margin-top:1px;}
.tc .tcat{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;}
.tc .tcat span{font-size:9.5px;font-weight:700;font-family:var(--mono);padding:2px 6px;border-radius:5px;
  background:var(--sky-soft);color:var(--sky);}
.tstat{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.05em;padding:3px 7px;
  border-radius:6px;display:inline-block;margin-top:7px;}
.tstat.new{background:var(--slate-soft);color:var(--slate);}
.tstat.approved{background:var(--sky-soft);color:var(--sky);}
.tstat.active{background:var(--green-soft);color:var(--green);}
.tstat.review{background:var(--amber-soft);color:var(--amber);}
.tstat.declined{background:var(--red-soft);color:var(--red);}
.tstat.network{background:var(--gold-soft);color:var(--gold-deep);}
.tc .tgo{margin-top:9px;}
.haslogin{font-size:10px;color:var(--green);font-family:var(--mono);margin-top:5px;}

/* ---------------- talent roster: LIST VIEW ----------------
   The grid is for browsing faces. This is for working a list: find the person,
   grab their handle, their number, their email, or their card link, without
   opening anything. Every value is one click to copy — an agent building a
   pitch is doing exactly that, forty times in a row. */
.vswitch{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--card);}
.vswitch button{border:none;background:transparent;cursor:pointer;font:inherit;font-size:12px;
  padding:6px 11px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;}
.vswitch button.on{background:var(--sky-soft);color:var(--sky);font-weight:700;}

.tlwrap{background:var(--card);border-radius:16px;box-shadow:var(--sh);overflow-x:auto;overflow-y:hidden;}
.tlist{min-width:880px;}
/* Nine columns on a laptop only works if each one is sized to the thing it
   actually holds. A phone number that truncates is useless — you cannot dial
   "+132152552…" — so it gets a fixed width big enough for the longest real
   number, and the email, which people recognise from its first few characters,
   is the one that flexes and clips. */
.tlist .lh,.tlist .lr{display:grid;
  grid-template-columns:22px 32px minmax(120px,1.1fr) 100px minmax(94px,.8fr) 124px
    minmax(108px,1fr) 126px 62px;
  gap:7px;align-items:center;padding:9px 11px;font-size:12.5px;}
.tlist .lh{background:var(--mist);border-bottom:1px solid var(--line);font-family:var(--mono);
  font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;
  position:sticky;top:0;z-index:1;}
.tlist .lr{border-bottom:1px solid var(--line);cursor:pointer;}
.tlist .lr:last-child{border-bottom:none;}
.tlist .lr:hover{background:var(--sky-soft);}
.tlist .lr.picked{background:var(--gold-soft);}
.tlist .lav{width:34px;height:34px;border-radius:10px;overflow:hidden;flex:none;
  background:linear-gradient(135deg,var(--navy),var(--sky));display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:700;font-size:11px;}
.tlist .lav img{width:100%;height:100%;object-fit:cover;}
.tlist .lname{font-weight:600;min-width:0;white-space:nowrap;text-overflow:ellipsis;}
.tlist .lname .sub{font-weight:400;font-size:11px;color:var(--muted);display:flex;align-items:center;
  gap:6px;margin-top:2px;min-width:0;}
.tlist .lname .sub>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* TIER. Elite is the only one that gets the champagne, because champagne is what
   the black comp card is made of — the chip and the card have to be recognisably
   the same statement. Signed carries the gold that means represented; Network
   carries steel, which is the whole point of the distinction. */
.tlist .ltier{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;
  padding:2px 5px;border-radius:4px;flex:none;border:1px solid transparent;}
.tlist .ltier.elite{color:#C3AE84;border-color:rgba(195,174,132,.5);background:rgba(195,174,132,.1);}
.tlist .ltier.signed{color:var(--gold-deep);background:var(--gold-soft);}
.tlist .ltier.network{color:var(--sky);background:var(--sky-soft);}

/* LAST LOGIN. Warm means they've been in recently; stale means it's been a
   season or they never turned up at all. Colour carries it so a column of dates
   answers "who's gone quiet" at a glance instead of on a second read. */
.tlist .lseen{font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.tlist .lseen.warm{color:var(--green);}
.tlist .lseen.stale{color:var(--gold-deep);}
.tlist .lseen.none{color:var(--muted);opacity:.6;}
.tlist .cell{min-width:0;display:flex;align-items:center;gap:4px;overflow:hidden;}
/* The name cell is the one that stacks — name on top, tier + location beneath —
   so it opts out of the flex row every other cell uses. Declared after .cell so
   it wins without needing an !important or a heavier selector. */
.tlist .lname.cell{display:block;overflow:hidden;}
.tlist .cp{color:var(--ink-soft);cursor:copy;border-radius:5px;padding:2px 4px;margin:-2px -4px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tlist .cp:hover{background:var(--sky-soft);color:var(--sky);}

/* Links look like links. A handle styled as body text is a link nobody presses,
   and the whole reason this column exists is to be pressed. */
.tlist .lk{color:var(--sky);text-decoration:none;border-bottom:1px solid transparent;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tlist .lk:hover{border-bottom-color:currentColor;}

/* The copy button. Every cell has one, so the click that OPENS a link and the
   click that COPIES it are two different targets rather than one keyboard
   modifier you have to already know about. Hidden until the row is hovered so
   eight of them don't shout down the data. */
.tlist .copyb{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;
  line-height:1;padding:2px;border-radius:5px;flex:none;opacity:0;transition:opacity .12s;}
.tlist .lr:hover .copyb{opacity:.55;}
.tlist .copyb:hover{opacity:1;color:var(--sky);background:var(--sky-soft);}
.tlist .copyb:focus-visible{opacity:1;outline:2px solid var(--sky);outline-offset:1px;}
.tlist .num{font-variant-numeric:tabular-nums;font-size:11.5px;letter-spacing:-.02em;}
.tlist .num .cp{padding:2px 2px;margin:-2px -2px;}
.tlist .none{color:var(--muted);opacity:.6;}
.tlist .lcard{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.04em;
  padding:3px 7px;border-radius:6px;text-decoration:none;display:inline-block;white-space:nowrap;
  border:1px solid transparent;}
.tlist .lcard:hover{filter:brightness(1.15);}
.tlist .lcard.live:hover{border-color:var(--green);}
.tlist .lcard.hid:hover{border-color:var(--sky);}
.tlist .lcard.off:hover{border-color:var(--gold-deep);}
.tlist .lcard.live{background:var(--green-soft);color:var(--green);}
.tlist .lcard.hid{background:var(--sky-soft);color:var(--sky);}
.tlist .lcard.off{background:var(--gold-soft);color:var(--gold-deep);}
.tlist .lcard.bad{background:var(--red-soft);color:var(--red);cursor:help;}
.tlist .lcard.nil{color:var(--muted);opacity:.6;}
.tlist .copyb.pub{color:var(--sky);opacity:.7;font-weight:700;}
.tlist .lr:hover .copyb.pub{opacity:1;}
.tlist .copyb.pub:hover{background:var(--sky-soft);}
.tlist .lsel{display:flex;align-items:center;justify-content:center;}

/* The in-row status control. Sized down from the card's dropdown so nine
   columns still read as a table, and tinted by the status it currently holds —
   a column of identical grey selects tells you nothing at a glance, which is
   the whole reason for putting it here rather than one drawer at a time. */
.tlist .lstat{overflow:visible;}
.tlist .statsel.sm{width:100%;font-size:11px;padding:4px 5px;border-radius:7px;
  max-width:100%;min-width:0;border-width:1px;font-weight:600;}
.tlist .statsel.sm.new{border-color:var(--slate);color:var(--slate);}
.tlist .statsel.sm.approved{border-color:var(--sky);color:var(--sky);}
.tlist .statsel.sm.active{border-color:var(--green);color:var(--green);}
.tlist .statsel.sm.review{border-color:var(--amber);color:var(--amber);}
.tlist .statsel.sm.declined{border-color:var(--red);color:var(--red);}
.tlist .statsel.sm.network{border-color:var(--gold-deep);color:var(--gold-deep);}

/* Narrow screens: the seven-column grid stops being a grid and each person
   becomes a stacked block, labelled, so nothing is silently cut off. */
@media(max-width:860px){
  .tlwrap{overflow-x:visible;}
  .tlist{min-width:0;}
  .tlist .lh{display:none;}
  .tlist .lr{grid-template-columns:22px 32px 1fr;grid-auto-rows:min-content;row-gap:5px;padding:12px 14px;
    align-items:start;}
  .tlist .lr>.cell{grid-column:3;}
  .tlist .lav,.tlist .lsel{grid-row:span 7;align-self:start;}
  .tlist .copyb{opacity:.55;}
  .tlist .statsel.sm{width:auto;max-width:220px;}
}

/* ---------------- talent detail drawer ---------------- */
.scrim{position:fixed;inset:0;background:rgba(2,16,24,.72);backdrop-filter:blur(3px);z-index:150;
  display:flex;justify-content:flex-end;}
.drawer{background:var(--mist);width:100%;max-width:720px;height:100%;overflow-y:auto;
  box-shadow:-20px 0 60px rgba(0,0,0,.4);animation:slide .22s ease-out;}
@keyframes slide{from{transform:translateX(40px);opacity:.4;}to{transform:none;opacity:1;}}
.dhead{background:linear-gradient(150deg,#04293D,#0A3D5A 60%,#14638F);color:#fff;padding:22px 24px;
  display:flex;gap:16px;align-items:flex-start;position:sticky;top:0;z-index:2;}
.dhead .dav{width:74px;height:74px;border-radius:20px;overflow:hidden;flex:none;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:24px;font-weight:600;}
.dhead .dav img{width:100%;height:100%;object-fit:cover;}
.dhead .dn{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:22px;}
.dhead .dm{font-size:12.5px;color:#BFD8E8;margin-top:3px;}
.dhead .dclose{margin-left:auto;background:rgba(255,255,255,.14);border:none;color:#fff;width:32px;height:32px;
  border-radius:10px;cursor:pointer;font-size:16px;flex:none;}
.dbody{padding:20px 24px 40px;}
.dsec{background:var(--card);border-radius:16px;padding:16px 18px;margin-bottom:14px;box-shadow:var(--sh);}
.dsec h4{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:14px;margin-bottom:12px;
  display:flex;align-items:center;gap:7px;}
.dsec h4 .c{font-family:var(--mono);font-size:9.5px;color:var(--muted);font-weight:400;}
.prop{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;align-items:flex-start;}
.prop:last-child{border:none;}
.prop .pk{width:180px;flex:none;color:var(--muted);font-size:12px;padding-top:2px;}
.prop .pv{flex:1;min-width:0;word-break:break-word;}
.prop .pv a{color:var(--sky);}
.prop .pe{opacity:0;background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;
  padding:2px 6px;border-radius:5px;flex:none;}
.prop:hover .pe{opacity:1;}
.prop .pe:hover{background:var(--mist);color:var(--sky);}
.prop.locked .pe{display:none;}
.chipv{display:inline-block;font-size:10.5px;font-weight:700;font-family:var(--mono);padding:2px 7px;
  border-radius:6px;background:var(--sky-soft);color:var(--sky);margin:0 4px 4px 0;}
.dphotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;}
.dphotos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;cursor:pointer;}
.hist{font-size:12px;padding:8px 0;border-bottom:1px solid var(--line);}
.hist:last-child{border:none;}
.hist .hm{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.hist .hb{margin-top:2px;color:var(--ink-soft);}
.hist .hd{color:var(--red);text-decoration:line-through;}
.hist .ha{color:var(--green);}
.statsel{border:1.5px solid var(--line);border-radius:10px;padding:7px 9px;font-size:12px;font-weight:600;
  background:var(--mist);color:var(--ink);font-family:var(--body);width:100%;cursor:pointer;}
.tc .tage{font-family:var(--mono);font-size:11px;color:var(--muted);}

/* ---- talent drawer: gig submissions + clickable links ---- */
.subblk{ padding:12px 0; border-top:1px solid var(--line); }
.subblk:first-of-type{ border-top:0; }
.subhd{ display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:9px; }
.subhd .bid{ font-family:var(--mono,ui-monospace,monospace); font-size:11px; letter-spacing:.06em;
  color:var(--gold); background:rgba(201,150,44,.10); border:1px solid rgba(201,150,44,.28);
  padding:3px 8px; border-radius:6px; }
.sublinks{ display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.sublinks a{ font-size:12px; padding:5px 10px; border-radius:999px;
  background:var(--chip); border:1px solid var(--line); text-decoration:none; }
.sublinks a:hover{ border-color:var(--sky-2); }
.dsec .pv a{ color:var(--sky-2); text-decoration:none; border-bottom:1px solid rgba(63,159,209,.35);
  word-break:break-all; }
.dsec .pv a:hover{ color:var(--gold-2); border-bottom-color:var(--gold-2); }
.dphotos img{ cursor:zoom-in; }

/* page header with an action on the right */
.page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.page-head .page-s{ margin-bottom:14px; }

/* ---- inbox / notifications ---- */
.badge{ display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px;
  padding:0 5px; margin-left:6px; border-radius:999px; background:var(--n-red); color:#fff;
  font-size:10.5px; font-weight:700; line-height:1; vertical-align:middle; }
.cpill{ margin-left:auto; font-size:11px; padding:2px 8px; border-radius:999px;
  background:var(--chip); border:1px solid var(--line); color:var(--muted); }
.nlist{ display:flex; flex-direction:column; gap:2px; margin-top:12px; }
.nrow{ display:flex; align-items:flex-start; gap:12px; padding:13px 14px; border-radius:12px;
  background:var(--card); transition:background .12s ease; }
.nrow:hover{ background:var(--chip); }
.nrow.read{ opacity:.5; }
.ndot{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex:0 0 8px; }
.nrow.read .ndot{ background:var(--muted) !important; }
.nmain{ flex:1; min-width:0; }
.ntitle{ font-size:13.5px; font-weight:600; color:var(--text); }
.nbody{ font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nmeta{ font-size:11px; color:var(--muted); margin-top:5px; }
.ntype{ font-weight:600; }
.tick{ flex:0 0 auto; background:transparent; border:1px solid var(--line); color:var(--muted);
  width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:12px; line-height:1; }
.tick:hover{ border-color:var(--sky-2); color:var(--sky-2); }
.act{ position:relative; }
.act .tick{ margin-left:8px; }

/* ---- sales: gig picker ---- */
.gsearch{ width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--line);
  background:var(--chip); color:var(--text); font-size:13.5px; }
.gsearch:focus{ outline:none; border-color:var(--sky-2); }
.ghits{ display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.ghit{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; }
.ghit:hover{ background:var(--chip); }
.gh-main{ flex:1; min-width:0; cursor:pointer; }
.gh-co{ font-size:13.5px; font-weight:600; color:var(--text); }
.gh-meta{ font-size:11.5px; color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- login: password ---- */
/* password field + its show/hide toggle */
.pwwrap{ position:relative; margin-top:8px; }
.pwwrap input{ padding-right:62px !important; }
.login .pwwrap input{ text-align:center; margin-bottom:0; }
.eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; padding:5px 8px; border-radius:7px; cursor:pointer;
  font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.03em;
  color:var(--muted); text-transform:uppercase; }
.eye:hover{ color:var(--sky-2); background:var(--chip); }
.login .pwwrap{ margin-bottom:12px; }
.loginerr{ margin-top:10px; padding:10px 12px; border-radius:9px; font-size:12.5px; line-height:1.5;
  background:rgba(212,76,71,.10); border:1px solid rgba(212,76,71,.35); color:#D44C47; }
.loginalt{ margin-top:14px; text-align:center; }
.linkbtn{ background:none; border:0; padding:0; cursor:pointer; font-size:12.5px;
  color:var(--sky-2); text-decoration:underline; text-underline-offset:2px; }
.linkbtn:hover{ color:var(--gold); }

/* hide/show the earnings numbers */
.hero .hh{ position:relative; }
.heye{ margin-left:auto; background:rgba(255,255,255,.12); border:0; color:#fff; cursor:pointer;
  width:24px; height:24px; border-radius:7px; font-size:11px; line-height:1; padding:0; }
.heye:hover{ background:rgba(255,255,255,.26); }

/* gig status filters — same colours as the Notion status, so the chip reads
   the same way the pipeline does */
.tfilters.gstat{ margin-top:8px; margin-bottom:4px; }
.sfilter{ display:inline-flex; align-items:center; gap:7px; }
.sfilter .sdot{ width:7px; height:7px; border-radius:50%; background:var(--c,var(--muted));
  flex:none; display:inline-block; }
.sfilter.on{ background:var(--c,var(--sky)) !important; border-color:var(--c,var(--sky)) !important;
  color:#fff !important; }
.sfilter.on .sdot{ background:rgba(255,255,255,.85); }
.sfilter.on .c{ color:#fff; opacity:.85; }

/* destructive action — reads as a warning without shouting */
.btn.danger{ color:var(--n-red); border-color:rgba(212,76,71,.4); background:transparent; }
.btn.danger:hover{ background:var(--n-red); border-color:var(--n-red); color:#fff; }

/* ==================== TALENT SIDE ==================== */
.vcheck{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--sky);color:#fff;font-size:12px;vertical-align:middle;margin-left:4px;}
.tstat{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  padding:4px 9px;border-radius:7px;color:#fff;margin-top:9px;background:var(--muted);}
.tstat.s-signed{background:var(--n-green);}
.tstat.s-network{background:var(--n-purple);}

/* the onboarding gate */
.gate{background:linear-gradient(150deg,#3A2A05,#5A4818 130%);border-radius:20px;padding:20px 22px;
  margin-bottom:20px;box-shadow:var(--sh-lift);border:1px solid rgba(232,195,106,.28);}
.gate .gh h3{font-family:var(--display);font-size:17px;font-weight:600;color:var(--gold-2);}
.gate .gsub{font-size:13px;color:#E0CFA0;margin:5px 0 16px;line-height:1.5;}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;}
.step{background:rgba(0,0,0,.26);border-radius:13px;padding:12px 14px;display:flex;align-items:center;gap:11px;}
.step .mk{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;}
.step.done .mk{background:var(--n-green);color:#fff;}
.step.todo .mk{background:rgba(255,255,255,.14);color:var(--gold-2);border:1.5px dashed rgba(232,195,106,.5);}
.step .lb{font-size:12.5px;font-weight:600;color:#fff;}
.step.done .lb{color:#C8DCC8;}
.step .sub{font-size:10.5px;color:#BFAE7E;margin-top:1px;}
.step .go{margin-left:auto;font-size:11px;font-weight:700;color:#3A2A05;background:var(--gold-2);
  padding:5px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;}
.step .go:hover{background:#fff;}

/* talent gig cards */
.gigs{display:flex;flex-direction:column;gap:10px;}
.tgig{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;gap:14px;align-items:center;
  border-left:3px solid var(--c,var(--sky));transition:.14s;}
.tgig:hover{transform:translateX(2px);}
.tgig .gmain{flex:1;min-width:0;}
.tgig .gt{font-weight:600;font-size:14.5px;}
.tgig .gm{font-size:11.5px;color:var(--muted);margin-top:3px;}
.tgig .gtags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap;}
.tag{font-size:10px;background:var(--chip,rgba(127,127,127,.12));color:var(--ink-soft);
  padding:3px 7px;border-radius:6px;}
.tgig .pay{text-align:right;flex:none;}
.tgig .pay .amt{font-family:var(--mono);font-weight:700;font-size:17px;color:var(--gold);}
html[data-theme="dark"] .tgig .pay .amt{color:var(--gold-2);}
.tgig .pay .per{font-size:10px;color:var(--muted);}

/* application tracker */
.app{padding:13px 0;border-bottom:1px solid var(--line);}
.app:last-child{border:0;padding-bottom:0;}
.app .at{font-weight:600;font-size:13.5px;}
.app .am{font-size:11px;color:var(--muted);margin-top:2px;}
.track{display:flex;align-items:center;margin-top:10px;}
.track .n{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none;}
.track .n.on{background:var(--sky-2);}
.track .n.win{background:var(--n-green);}
.track .n.off{background:var(--muted);}
.track .l{flex:1;height:2px;background:var(--line);}
.track .l.on{background:var(--sky-2);}
.tracklb{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted);margin-top:5px;
  font-family:var(--mono);letter-spacing:.05em;}

/* photos */
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
.ph{aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--mist);position:relative;
  display:flex;align-items:center;justify-content:center;}
.ph img{width:100%;height:100%;object-fit:cover;}
.ph.add{border:1.5px dashed var(--line);color:var(--muted);font-size:24px;cursor:pointer;}
.ph.add:hover{border-color:var(--gold);color:var(--gold);}
.ph .x{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:6px;background:rgba(0,0,0,.6);
  color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.ph .prim{position:absolute;bottom:6px;left:6px;font-family:var(--mono);font-size:8.5px;font-weight:700;
  letter-spacing:.1em;background:var(--gold);color:#3A2A05;padding:3px 6px;border-radius:5px;}

/* apply modal */
.modal{background:var(--card);border-radius:20px;padding:22px;max-width:520px;width:100%;
  box-shadow:var(--sh-lift);max-height:86vh;overflow:auto;}
.modal .mh{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;}
.modal .mt{font-family:var(--display);font-size:18px;font-weight:600;}
.modal .ms{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5;}
.modal .dclose{margin-left:auto;background:none;border:0;color:var(--muted);font-size:24px;cursor:pointer;
  line-height:1;}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;}
.pick{aspect-ratio:3/4;border-radius:10px;overflow:hidden;position:relative;cursor:pointer;
  border:2px solid transparent;opacity:.5;transition:.13s;}
.pick img{width:100%;height:100%;object-fit:cover;}
.pick .tick{position:absolute;top:5px;right:5px;width:19px;height:19px;border-radius:50%;
  background:var(--n-green);color:#fff;font-size:11px;display:none;align-items:center;justify-content:center;}
.pick.on{opacity:1;border-color:var(--n-green);}
.pick.on .tick{display:flex;}

/* docs */
.doc{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.doc:last-of-type{border:0;}
.doc .di{width:30px;height:30px;border-radius:9px;background:var(--chip,rgba(127,127,127,.1));
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex:none;}
.doc .dn{font-size:13.5px;font-weight:600;}
.doc .dm{font-size:11px;color:var(--muted);}
.doc .ds{margin-left:auto;}

.note{background:rgba(63,159,209,.09);border-left:3px solid var(--sky-2);border-radius:10px;
  padding:11px 13px;font-size:12px;color:var(--ink-soft);line-height:1.55;margin-top:14px;}
.note b{color:var(--sky-2);}
.scrim{position:fixed;inset:0;background:rgba(2,14,20,.62);backdrop-filter:blur(3px);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;}

/* ---- signing ---- */
.modal.wide{ max-width:640px; }
.docview{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:8px;
  background:var(--mist); }
.docview iframe{ width:100%; height:340px; border:0; display:block; }
.dlink{ display:inline-block; font-size:12px; margin-bottom:14px; }
.sform .frow3{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; }
@media(max-width:600px){ .sform .frow3{ grid-template-columns:1fr; } }
.cert{ background:var(--chip,rgba(127,127,127,.08)); border-left:3px solid var(--gold);
  border-radius:10px; padding:11px 13px; font-size:11.5px; line-height:1.55; color:var(--ink-soft);
  margin-bottom:14px; }
.cert b{ color:var(--ink); }
.signbox{ border:1.5px dashed var(--line); border-radius:14px; padding:15px; background:var(--mist); }
.sigfield{ font-family:var(--display) !important; font-size:22px !important; padding:12px 14px !important;
  letter-spacing:.01em; }
.consent{ display:flex; gap:9px; align-items:flex-start; margin-top:12px; font-weight:400 !important;
  font-size:12px !important; color:var(--ink-soft) !important; line-height:1.5; cursor:pointer; }
.consent input{ width:auto !important; margin-top:2px; flex:none; }

/* W-9 certification — the IRS requires this to stand out from everything else */
.cert{ background:var(--chip,rgba(127,127,127,.08)); border:1.5px solid var(--gold);
  border-radius:12px; padding:14px 15px; font-size:11.5px; line-height:1.55;
  color:var(--ink-soft); margin-bottom:14px; }
.cert b{ color:var(--ink); }
.certh{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:7px; }
.certlist{ margin:8px 0 0 16px; padding:0; }
.certlist li{ margin-bottom:6px; transition:.15s; }

/* the agreement, readable — an iframed PDF is a blank box on iOS Safari */
.docview{ border:1px solid var(--line); border-radius:12px; background:var(--mist);
  max-height:300px; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 18px; }
.docview iframe{ display:none; }
.agr{ font-size:12.5px; line-height:1.6; color:var(--ink-soft); }
.agr .agr-t{ font-family:var(--display); font-size:15px; font-weight:600; color:var(--ink);
  text-align:center; margin-bottom:4px; }
.agr .agr-h{ font-family:var(--display); font-size:13.5px; font-weight:600; color:var(--ink);
  margin:16px 0 6px; padding-top:10px; border-top:1px solid var(--line); }
.agr p{ margin-bottom:9px; }
.agr b{ color:var(--ink); }
.agrfoot{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:8px 0 14px; flex-wrap:wrap; }
.agrhint{ font-size:11.5px; color:var(--muted); }
.agrhint.done{ color:var(--n-green); font-weight:600; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ---- hamburger ---- */
.burger{ display:none; background:none; border:0; cursor:pointer; padding:8px 6px;
  flex-direction:column; gap:4px; }
.burger span{ display:block; width:19px; height:2px; border-radius:2px; background:var(--ink-soft);
  transition:.18s; }
.burger.on span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.on span:nth-child(2){ opacity:0; }
.burger.on span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media(max-width:820px){
  .burger{ display:flex; }
  .topbar{ gap:12px; padding:12px 16px; }
  .nav{ display:none; position:absolute; top:58px; left:12px; right:12px; z-index:90;
    flex-direction:column; gap:2px; background:var(--card); border:1px solid var(--line);
    border-radius:16px; padding:8px; box-shadow:var(--sh-lift); }
  .nav.open{ display:flex; }
  .nav button{ text-align:left; padding:12px 14px; font-size:14.5px; }
  /* Lift the whole header (and its dropdown) into its own stacking context so the
     open menu sits ABOVE the dashboard profile card instead of behind it. */
  .topbar{ position:relative; z-index:120; }
  .nav{ z-index:121; }
  .avbtn .t{ display:none; }
}

/* ---- profile editor ---- */
.pgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;
  margin-bottom:18px; }
.pgrid .f{ margin-bottom:0; }

/* ---- payouts ---- */
.paycur{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--mist);
  border-radius:12px; padding:12px 14px; }
.paycur .mono{ font-family:var(--mono); font-size:13px; color:var(--gold); font-weight:700; }
.paypick{ display:flex; gap:8px; flex-wrap:wrap; }
.paybtn{ flex:1; min-width:110px; padding:13px 10px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--card); color:var(--ink); font-family:var(--body); font-size:13.5px; font-weight:600;
  cursor:pointer; transition:.13s; }
.paybtn:hover{ border-color:var(--sky-2); }
.paybtn.on{ border-color:var(--gold); background:var(--gold-soft); color:var(--gold-deep); }
html[data-theme="dark"] .paybtn.on{ color:var(--gold-2); }

/* what you do — talent categories */
.catwrap{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.catbtn{ padding:9px 14px; border-radius:999px; border:1.5px solid var(--line);
  background:var(--card); color:var(--ink-soft); font-family:var(--body); font-size:12.5px;
  font-weight:600; cursor:pointer; transition:.13s; }
.catbtn:hover{ border-color:var(--sky-2); color:var(--sky-2); }
.catbtn.on{ background:var(--sky); border-color:var(--sky); color:#fff; }

/* make main */
.ph .mkmain{ position:absolute; bottom:6px; left:6px; right:6px; padding:5px;
  border:0; border-radius:7px; background:rgba(0,0,0,.62); color:#fff;
  font-family:var(--body); font-size:10.5px; font-weight:600; cursor:pointer;
  opacity:0; transition:.14s; }
.ph:hover .mkmain{ opacity:1; }
.ph .mkmain:hover{ background:var(--gold); color:#3A2A05; }
@media(hover:none){ .ph .mkmain{ opacity:1; } }

/* a KPI that only appears when it's a problem */
.kpi-warn{ border:1px solid rgba(201,150,44,.35); }
.kpi-warn:hover{ border-color:var(--gold); }
.kpi-warn .k{ color:var(--gold-2); }

.tstat.s-onboarding{ background:var(--gold); color:#3A2A05; }
.tstat.s-review{ background:var(--n-gray); }

/* money inputs — a $ so nobody wonders whether 70 is dollars or hours */
.moneyf{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:12px;
  background:var(--mist); overflow:hidden; }
.moneyf span{ padding:0 2px 0 12px; color:var(--muted); font-family:var(--mono); font-size:13px; }
.moneyf input{ border:0 !important; background:transparent !important; border-radius:0 !important; }
.moneyf:focus-within{ border-color:var(--sky); }

/* a plain switch row */
.togrow{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13px;
  font-weight:500 !important; color:var(--ink) !important; margin-bottom:2px; }
.togrow input{ width:auto !important; }

/* talent gig card extras */
/* The card preview clamps to two lines, but a description written in
   paragraphs used to have its line breaks collapsed into one run-on sentence.
   pre-line keeps the author's breaks and still collapses runs of spaces. */
.gdesc{ font-size:12.5px; color:var(--ink-soft); margin-top:8px; line-height:1.5;
  white-space:pre-line;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.gcoord{ display:flex; align-items:center; gap:7px; margin-top:9px; font-size:11.5px;
  color:var(--muted); }
.gcoord .cav{ width:20px; height:20px; border-radius:6px; background:linear-gradient(135deg,var(--navy),var(--sky));
  color:#fff; font-size:8.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.gcoord b{ color:var(--ink-soft); }
.conf{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); background:var(--chip,rgba(127,127,127,.12)); padding:3px 7px; border-radius:6px;
  vertical-align:middle; }

/* ---------- manage a live submission ---------- */
.manage{ display:flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer;
  font-family:var(--body); font-size:12px; font-weight:600; color:var(--muted);
  padding:9px 0 0; margin-top:4px; }
.manage:hover{ color:var(--sky); }
.manage .cv{ display:inline-block; transition:transform .18s; font-size:10px; }
.manage.on{ color:var(--sky); }
.manage.on .cv{ transform:rotate(180deg); }
.mgpanel{ margin-top:10px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.optout{ background:var(--mist); border-radius:12px; padding:12px 13px; width:100%; }
.optout .oh{ font-size:12.5px; font-weight:600; color:var(--ink); }
.optout .om{ font-size:11.5px; color:var(--muted); margin:3px 0 10px; line-height:1.5; }
.btn.danger{ background:var(--red-soft); color:var(--red); border-color:transparent; }
.btn.danger:hover{ background:var(--red); color:#fff; }

/* reference links in the apply modal */
.linkrow{ display:flex; gap:6px; margin-bottom:6px; }
.linkrow input{ flex:1; margin:0 !important; }
.lx{ flex:none; width:34px; border:1.5px solid var(--line); background:var(--mist);
  border-radius:10px; color:var(--muted); cursor:pointer; font-size:16px; line-height:1; }
.lx:hover{ color:var(--red); border-color:var(--red); }
.pickmore{ font-size:11.5px; color:var(--muted); margin-top:9px; }

.frow3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
@media(max-width:520px){ .frow3{ grid-template-columns:1fr; } }

/* the day's pay is the headline; the hourly rate is the working. */
.tgig .pay .amt.big{ font-size:22px; color:var(--gold); font-weight:700; line-height:1.1; }
.tgig .pay .amt.big + .per{ color:var(--muted); margin-top:2px; }
.tgig .pay .amt.big .tot{ font-size:10px; font-weight:600; color:var(--muted); margin-left:5px;
  letter-spacing:.04em; text-transform:uppercase; }

/* the talent's own words, on the agent's submission card */
.tnote{ margin-top:8px; font-size:12px; line-height:1.5; color:var(--ink-soft);
  background:var(--mist); border-left:3px solid var(--sky); border-radius:0 7px 7px 0; padding:7px 9px; }
.tnote .lbl{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--muted); }

/* what leaves the building — the agent's call, per person */
.shr{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px;
  padding-top:8px; border-top:1px dashed var(--line); }
.shr .shl{ font-family:var(--mono); font-size:9px; letter-spacing:.09em; color:var(--muted);
  text-transform:uppercase; }
.shr .chk{ display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--ink-soft);
  cursor:pointer; }
.shr .chk input{ width:auto; margin:0; cursor:pointer; }
.cts .lnum{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:var(--muted);
  margin-right:6px; text-transform:uppercase; }
.cts .lnk-off{ opacity:.42; }
.cts .lnk-off a{ text-decoration:line-through; color:var(--muted); }

/* ---------- one gig, in full (talent) ---------- */
.gigpage{ padding:20px 22px 22px; }
.gp-h{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding-bottom:16px; border-bottom:1px solid var(--line); }
.gp-t{ font-family:var(--display); font-weight:600; font-size:23px; letter-spacing:-.01em; line-height:1.2; }
.gp-c{ font-size:13px; color:var(--ink-soft); margin-top:3px; }
.gp-pay{ text-align:right; flex:none; }
.gp-pay .amt.big{ font-size:26px; color:var(--gold); font-weight:700; line-height:1.1; }
.gp-pay .amt.big .tot{ font-size:10px; font-weight:600; color:var(--muted); margin-left:5px;
  letter-spacing:.04em; text-transform:uppercase; }
.gp-pay .amt{ font-family:var(--mono); font-size:20px; font-weight:700; }
.gp-pay .per{ font-size:11.5px; color:var(--muted); margin-top:2px; }

.gp-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px 18px;
  padding:16px 0; border-bottom:1px solid var(--line); }
.gp-facts > div{ display:flex; flex-direction:column; gap:2px; }
.gp-facts .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); }
.gp-facts .v{ font-size:13.5px; font-weight:600; color:var(--ink); }

.gp-d{ padding:16px 0; }
.gp-d h4{ font-family:var(--display); font-size:14.5px; font-weight:600; margin-bottom:7px; }
.gp-d p{ font-size:13.5px; line-height:1.65; color:var(--ink-soft); margin-bottom:9px; }
.gp-d p:last-child{ margin-bottom:0; }

.gp-co{ display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px;
  background:var(--mist); border-radius:12px; font-size:12px; color:var(--ink-soft); }
.gp-co .cav{ width:34px; height:34px; border-radius:10px; flex:none;
  background:linear-gradient(135deg,var(--navy),var(--sky)); color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.gp-co small{ color:var(--muted); font-size:11px; }

.gp-act{ display:flex; gap:9px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.gp-act .btn.gold{ flex:1; min-width:180px; }
@media(max-width:560px){
  .gp-h{ flex-direction:column; gap:10px; }
  .gp-pay{ text-align:left; }
}

/* ---------- the offer ---------- */
.offer{ background:linear-gradient(150deg,#2A1F08 0%,#3A2C0C 60%,#4A3810 100%);
  border:1.5px solid var(--gold-line); border-radius:var(--r); padding:20px 22px;
  box-shadow:var(--sh-lift); margin-bottom:16px; }
html[data-theme="light"] .offer{ background:linear-gradient(150deg,#FDF8EC,#F7EDD6); }
.offer .oh{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.offer .tagline{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--gold-2);
  font-weight:700; }
.offer .clock{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:#04293D;
  background:var(--gold-2); padding:3px 8px; border-radius:7px; font-weight:700; }
.offer .clock.dead{ background:var(--muted); color:#fff; }
.offer .ot{ font-family:var(--display); font-weight:600; font-size:22px; color:#fff; margin-top:10px; }
.offer .om{ font-size:13px; color:#D8C79B; margin-top:3px; }
.offer .opay{ font-family:var(--mono); font-size:26px; font-weight:700; color:var(--gold-2); margin-top:12px; }
.offer .opay span{ font-family:var(--body); font-size:11.5px; font-weight:500; color:#BFA96F; }
.offer .oact{ display:flex; gap:9px; margin-top:16px; flex-wrap:wrap; }
.offer .oact .btn{ flex:1; min-width:150px; }
.offer .ofoot{ font-size:11.5px; color:#A99560; margin-top:12px; line-height:1.5; }

.sec-h{ font-family:var(--display); font-weight:600; font-size:15px; margin:20px 0 10px; color:var(--ink); }

/* ---------- call sheet ---------- */
.csheet{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.cs-g{ display:grid; gap:10px; margin-bottom:10px; }
.cs-g > div{ display:flex; flex-direction:column; gap:1px; }
.cs-g .k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); }
.cs-g .v{ font-size:13.5px; font-weight:600; color:var(--ink); }
.cs-n{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; background:var(--mist);
  border-radius:10px; padding:10px 12px; margin-bottom:10px; }
/* full-width call-sheet blocks (wardrobe, notes) — keep line breaks & bullets */
.cs-block{ margin:10px 0; }
.cs-block > .k{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.cs-body{ font-size:13.5px; line-height:1.65; color:var(--ink); }
.cs-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.cs-thumb{ display:block; border:1px solid var(--line); border-radius:10px; overflow:hidden; text-decoration:none; background:var(--card,#0b2f47); }
.cs-thumb img{ width:100%; height:120px; object-fit:cover; display:block; }
.cs-thumb span{ display:block; font-size:11px; color:var(--muted); padding:5px 8px; }
/* call-sheet form: image edit grid */
.cs-editgrid{ display:flex; gap:10px; flex-wrap:wrap; }
.cs-editthumb{ position:relative; width:96px; height:96px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.cs-editthumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cs-imgx{ position:absolute; top:3px; right:3px; width:22px; height:22px; border:0; border-radius:6px;
  background:rgba(0,0,0,.62); color:#fff; font-size:15px; line-height:1; cursor:pointer; }

.paidrow{ margin-top:12px; padding:10px 12px; border-radius:10px; background:var(--gold-soft);
  color:var(--gold-deep); font-size:12.5px; }
.paidrow.on{ background:var(--green-soft); color:var(--green); }
html[data-theme="dark"] .paidrow{ color:var(--gold-2); }

/* ---------- booking panel (agent) ---------- */
.bk-step{ padding:14px 0; border-top:1px solid var(--line); }
.bk-step:first-of-type{ border-top:none; padding-top:4px; }
.bk-step h4{ font-family:var(--display); font-size:14.5px; font-weight:600; display:flex;
  align-items:center; gap:8px; }
.bk-step p{ font-size:12px; color:var(--muted); margin-top:3px; line-height:1.55; max-width:64ch; }
.bk-step.bad h4{ color:var(--red); }
.bk-step.good h4{ color:var(--green); }

.bk-list{ margin-top:11px; display:flex; flex-direction:column; gap:6px; }
.bk-row{ display:flex; align-items:center; gap:9px; padding:9px 11px; background:var(--mist);
  border-radius:10px; font-size:13px; }
label.bk-row{ cursor:pointer; }
label.bk-row.on{ background:var(--sky-soft); }
.bk-row input{ width:auto; margin:0; }
.bk-row .nm{ font-weight:600; color:var(--ink); }
.bk-row .mt{ margin-left:auto; font-size:11.5px; color:var(--muted); text-align:right; }
.bk-row .mt.bad, .bad{ color:var(--red); }

.bk-ctl{ display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.bk-ctl label{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px;
  margin:0 !important; font-weight:400 !important; }
.bk-ctl select{ width:auto; margin:0; padding:6px 8px; font-size:12px; }

.bk-form{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-top:12px; }
@media(max-width:640px){ .bk-form{ grid-template-columns:1fr; } }

.bk-pay{ display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--mist);
  border-radius:10px; flex-wrap:wrap; }
.bk-pay .who{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.bk-pay .nm{ font-size:13px; font-weight:600; }
.bk-pay .mt{ font-size:11px; color:var(--muted); }
.bk-pay .doing{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.bk-pay .doing input{ margin:0; padding:7px 9px; font-size:13px; }
.bk-pay .owed{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--gold-deep); }
html[data-theme="dark"] .bk-pay .owed{ color:var(--gold-2); }

/* Craft filter on the Creatives page. Deliberately lighter than the tier tabs
   above it: the tier is the primary cut, the craft narrows it, and two rows of
   identically weighted buttons read as one confusing row of nine. */
.vcraft{font:inherit;font-family:var(--body);font-size:12.5px;font-weight:600;cursor:pointer;
  padding:5px 11px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);line-height:1.5;}
.vcraft:hover{border-color:var(--gold-2,#E8C36A);color:var(--ink);}
.vcraft.on{background:rgba(201,150,44,.15);border-color:rgba(201,150,44,.55);color:var(--gold-2,#E8C36A);}
.vcraft:focus-visible{outline:2px solid var(--gold-2,#E8C36A);outline-offset:2px;}

/* ---------- quotes ---------- */
.qrow{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line);
  flex-wrap:wrap; }
.qrow:last-child{ border:none; padding-bottom:0; }
.qmain{ flex:1; min-width:180px; }
.qrow .qt{ font-size:14px; font-weight:600; }
.qrow .qm{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.qrow .qv{ font-family:var(--mono); font-size:15px; font-weight:700; color:var(--gold); }
.qrow .qact{ display:flex; gap:6px; flex-wrap:wrap; }

/* ---------- help / SOPs ---------- */
.sop{ display:flex; align-items:flex-start; gap:14px; padding:16px 0; text-decoration:none;
  border-bottom:1px solid var(--line); }
.sop:last-child{ border-bottom:none; padding-bottom:2px; }
.sop:hover .stitle{ color:var(--sky); }
.sop:hover .sgo{ color:var(--sky); transform:translate(2px,-2px); }
.sop .sicon{ width:38px; height:38px; border-radius:11px; flex:none;
  background:var(--sky-soft); color:var(--sky); display:flex; align-items:center;
  justify-content:center; font-size:15px; }
.sop .sbody{ flex:1; min-width:0; }
.sop .skick{ display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.13em;
  color:var(--sky); background:var(--sky-soft); padding:2px 7px; border-radius:5px;
  font-weight:700; margin-bottom:5px; }
.sop .stitle{ font-family:var(--display); font-weight:600; font-size:17px; color:var(--sky);
  transition:color .15s; }
.sop .sdesc{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin-top:3px; max-width:62ch; }
.sop .smeta{ font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:6px;
  letter-spacing:.04em; }
.sop .sgo{ color:var(--muted); font-size:15px; flex:none; transition:all .15s; }
.sharehint{ font-size:10.5px; color:var(--muted); line-height:1.45; margin-top:6px; text-align:center; }

/* ---------- public comp card ---------- */
.ccbox{ background:var(--mist); border-radius:12px; padding:13px 14px; }
.ccbox.on{ background:var(--gold-soft); border:1px solid var(--gold-line); }
.cclink{ display:flex; gap:7px; margin-top:11px; }
.cclink input{ flex:1; margin:0 !important; font-family:var(--mono); font-size:11.5px; }
.ccbox .linkbtn{ margin-top:8px; display:inline-block; }
.ccrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.ccrow .live{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; padding:3px 7px;
  border-radius:6px; background:var(--green-soft); color:var(--green); font-weight:700; }
.ccrow .off{ background:var(--mist); color:var(--muted); }

/* ---------- intro video ---------- */
.vgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px;
  margin-bottom:12px; }
.vcell{ position:relative; }
.vcell video{ width:100%; border-radius:12px; background:var(--mist); display:block; }
.vdel{ position:absolute; top:7px; right:7px; width:26px; height:26px; border-radius:8px;
  border:none; background:rgba(0,0,0,.62); color:#fff; font-size:15px; cursor:pointer;
  line-height:1; }
.vdel:hover{ background:var(--red); }
.vprog{ margin-top:10px; display:flex; align-items:center; gap:10px; }
.vprog .bar{ flex:1; height:6px; border-radius:4px; background:var(--mist); overflow:hidden; }
.vprog .bar i{ display:block; height:100%; width:0; background:var(--gold);
  transition:width .2s; }
.vprog span{ font-family:var(--mono); font-size:11px; color:var(--muted); min-width:64px;
  text-align:right; }

/* ---------- the talent's own card, on their dashboard ---------- */
.mecard{ display:flex; align-items:center; gap:13px; background:var(--card); border-radius:16px;
  padding:12px 14px; box-shadow:var(--sh); margin-bottom:16px; }
.mecard.live{ box-shadow:var(--sh), inset 0 0 0 1px var(--gold-line); }
.mshot{ width:46px; height:46px; border-radius:12px; flex:none; overflow:hidden;
  background:linear-gradient(135deg,var(--navy),var(--sky)); display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:700; font-size:14px; }
.mshot img{ width:100%; height:100%; object-fit:cover; }
.mbody{ flex:1; min-width:0; }
.mname{ font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mstate{ font-family:var(--mono); font-size:8.5px; letter-spacing:.11em; padding:3px 6px;
  border-radius:5px; background:var(--mist); color:var(--muted); font-weight:700; }
.mstate.on{ background:var(--gold-soft); color:var(--gold-deep); }
html[data-theme="dark"] .mstate.on{ color:var(--gold-2); }
.mmeta{ font-size:11.5px; color:var(--muted); margin-top:2px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.mmeta a{ font-family:var(--mono); font-size:11px; }
.mact{ display:flex; align-items:center; gap:6px; flex:none; }
.micon{ width:32px; height:32px; border-radius:9px; border:1px solid var(--line);
  background:transparent; color:var(--muted); cursor:pointer; font-size:14px; line-height:1; }
.micon:hover{ color:var(--sky); border-color:var(--sky); }

/* a real switch — a checkbox reads as a form, this reads as a power button */
.mswitch{ position:relative; width:42px; height:24px; flex:none; cursor:pointer; }
.mswitch input{ opacity:0; width:0; height:0; position:absolute; }
.mswitch span{ position:absolute; inset:0; background:var(--line); border-radius:20px;
  transition:background .18s; }
.mswitch span::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform .18s; }
.mswitch input:checked + span{ background:var(--gold); }
.mswitch input:checked + span::before{ transform:translateX(18px); }
.chleft{ font-family:var(--mono); font-size:10px; color:var(--muted); text-align:right; margin-top:4px; }
.dsigned{ grid-column:1 / -1; font-size:11px; color:var(--muted); margin-top:6px;
  font-family:var(--mono); letter-spacing:.02em; }

/* ------------------------------------------------------------ ANNOUNCEMENTS -
   Pinned to the top of the talent dashboard. It has to be impossible to scroll
   past and impossible to mistake for a KPI card, without being a red alert bar
   that people learn to tune out. So: a left rule in the tone colour, a symbol,
   and real prose. No dismiss button — see app.js. */
.announce{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;border-radius:14px;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--sh);
  border-left:4px solid var(--c,var(--sky));margin-bottom:20px;}
.announce.info  { --c:var(--sky);   }
.announce.good  { --c:var(--n-green,#448361); }
.announce.urgent{ --c:var(--gold,#C9962C);    }
.announce .an-ic{font-size:17px;line-height:1.35;flex:none;color:var(--c);}
.announce .an-b{flex:1;min-width:0;}
.announce .an-t{font-family:var(--display,inherit);font-weight:600;font-size:16px;
  color:var(--ink);margin-bottom:4px;}
.announce .an-x{font-size:13.5px;line-height:1.6;color:var(--ink);}
.announce .an-m{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-top:9px;}
.announce .an-dismiss{flex:none;align-self:center;border:1px solid var(--line);background:transparent;
  color:var(--muted);border-radius:9px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:var(--body);transition:.13s;}
.announce .an-dismiss:hover{color:var(--ink);border-color:var(--c,var(--sky));}

.an-old{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted);}
.an-old:last-child{border-bottom:none;}
.an-old span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.an-old em{font-style:normal;flex:none;font-size:11.5px;}

/* tone / yes-no pickers (shared with the booking form's look) */
.yn{display:flex;gap:8px;}
.ynb{flex:1;background:var(--card);border:1.5px solid var(--line);color:var(--muted);
  padding:10px;border-radius:11px;font-family:var(--body);font-size:13.5px;font-weight:600;
  cursor:pointer;transition:.13s;}
.ynb:hover{border-color:var(--gold,#C9962C);}
.ynb.on{background:var(--gold,#C9962C);border-color:var(--gold,#C9962C);color:#fff;}

/* ---------------------------------------------------------- INQUIRY SOURCE -
   A gig one of our own talent brought in. Reuses the announcement's anatomy —
   it's the same shape of statement: someone is telling you something. */
.srcbar{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line);border-left:4px solid var(--n-green,#448361);
  background:var(--card);box-shadow:var(--sh);margin-bottom:18px;}
.srcbar.urgent{border-left-color:var(--gold,#C9962C);}
.srcbar code{font-family:var(--mono,monospace);font-size:12px;background:var(--mist);
  padding:1px 5px;border-radius:5px;}

.viatag{display:inline-block;vertical-align:middle;font-size:10.5px;font-weight:600;
  letter-spacing:.04em;color:var(--n-green,#448361);background:rgba(68,131,97,.12);
  border-radius:6px;padding:2px 7px;margin-left:6px;white-space:nowrap;}

/* --------------------------------------------------------- TELEGRAM / STEPS -
   Numbered steps. Three of them, so they get numbers rather than bullets —
   the order is the instruction. */
.tgstep{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);}
.tgstep:last-of-type{border-bottom:none;}
.tgn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--gold,#C9962C);
  color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;
  justify-content:center;margin-top:1px;}
.tgb{flex:1;min-width:0;}
.tgt{font-weight:600;font-size:14.5px;color:var(--ink);margin-bottom:4px;}
.tgb p{font-size:13.5px;line-height:1.65;color:var(--ink-soft);margin:0;}
.tgl{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px;}
.tgl .btn{text-decoration:none;}

.tgchat{display:grid;gap:9px;margin-top:12px;}
.tgchat a{display:block;text-decoration:none;padding:12px 14px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--mist);transition:.13s;}
.tgchat a:hover{border-color:var(--gold,#C9962C);}
.tgc{display:block;font-weight:600;font-size:14px;color:var(--ink);}
.tgd{display:block;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:3px;}

/* ------------------------------------------------------------ WHICH DOOR ---
   Re-sign vs New Applicant. Deliberately not the same shape as the status pill:
   they are different questions and an agent must never read one for the other. */
.srctag{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:10.5px;
  font-weight:600;letter-spacing:.05em;padding:3px 8px;border-radius:7px;
  border:1px solid var(--line);color:var(--muted);background:var(--mist);}
.srctag.re{color:var(--sky);border-color:rgba(63,159,209,.35);background:rgba(63,159,209,.10);}
.srctag.nw{color:var(--gold,#C9962C);border-color:rgba(201,150,44,.4);background:rgba(201,150,44,.12);}

.tfilters.src{margin-top:-6px;padding-top:10px;border-top:1px dashed var(--line);}

/* ------------------------------------------------------- THE GROUP CHATS ---
   On the talent dashboard, the moment their paperwork clears. Gold left rule so
   it reads as an unlock, not a warning. Dismissable — a banner you can't get rid
   of is a banner you stop seeing. */
.tgcard{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold,#C9962C);
  border-radius:0 12px 12px 0;padding:16px 18px;margin-bottom:20px;box-shadow:var(--sh);}
.tgc-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.tgc-t{font-family:var(--display,Georgia,serif);font-size:17px;color:var(--ink);margin-bottom:5px;}
.tgc-h p{font-size:13px;line-height:1.6;color:var(--ink-soft);margin:0 0 14px;max-width:460px;}
.tgc-new{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.1em;
  color:var(--gold-2,#E8C36A);white-space:nowrap;padding-top:3px;flex:none;}

.tgc-links{display:grid;gap:8px;margin-bottom:12px;}
.tgc-links a{display:block;text-decoration:none;background:var(--mist);border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;transition:.13s;}
.tgc-links a:hover{border-color:var(--gold,#C9962C);}
.tgc-n{display:block;font-size:14px;font-weight:600;color:var(--ink);}
.tgc-n b{color:var(--gold-2,#E8C36A);font-weight:400;}
.tgc-d{display:block;font-size:12px;color:var(--muted);margin-top:2px;}

.tgc-f{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line);padding-top:11px;}
.tgc-f span{font-size:11.5px;line-height:1.5;color:var(--muted);}
.tgc-x{background:none;border:none;color:var(--muted);font-size:12px;text-decoration:underline;
  cursor:pointer;white-space:nowrap;padding:0;font-family:var(--body);flex:none;}
.tgc-x:hover{color:var(--ink);}
@media(max-width:600px){ .tgc-f{flex-direction:column;align-items:flex-start;gap:8px;} }

/* a chat they've already opened — ticked, not removed */
.tgc-tick{display:none;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--n-green,#448361);background:rgba(68,131,97,.12);border-radius:6px;
  padding:2px 7px;margin-left:6px;vertical-align:1px;}
.tgc-links a.joined{border-color:rgba(68,131,97,.4);}
.tgc-links a.joined .tgc-tick{display:inline-block;}
.tgc-links a.joined .tgc-n b{display:none;}

/* Comp card live. Same visual family as "has a login" — both answer "what does
   this person already have?" — but gold, because unlike a login it's a thing an
   agent can USE right now: it's a link you can send a client. Clickable: copies. */
.cardlive{font-size:10px;color:var(--gold,#C9962C);font-family:var(--mono);margin-top:4px;
  cursor:pointer;display:inline-block;}
.cardlive:hover{color:var(--gold-2,#E8C36A);text-decoration:underline;}

/* Pick the main photo. It's the roster photo — one image per person, and one bad
   crop makes the whole grid look amateur. */
.pickmain{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px;}
.pmain{position:relative;border-radius:9px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;transition:.12s;}
.pmain img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;}
.pmain:hover{border-color:var(--gold,#C9962C);}
.pmain.on{border-color:var(--gold,#C9962C);}
.pmb{position:absolute;left:4px;bottom:4px;font-family:var(--mono,monospace);font-size:8px;
  letter-spacing:.1em;background:var(--gold,#C9962C);color:#04293D;padding:2px 5px;border-radius:4px;
  font-weight:700;}
/* A star = the photo THEY chose. It stays visible even when we've overridden it
   for the grid, so an agent can always see whose taste they're overruling. */
.pmt{position:absolute;top:4px;right:5px;font-size:11px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.7);}
.pmh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(2,20,31,.62);color:#fff;font-size:10px;font-weight:600;opacity:0;transition:.12s;}
.pmain:hover .pmh{opacity:1;}

/* Account exists, never used. This is the one to chase — gold, not green. */
.nologin{font-size:10px;color:var(--gold,#C9962C);font-family:var(--mono);margin-top:5px;}

/* ------------------------------------------------------------------- BELL --
   Inbox was a nav tab with a number stuck to it — so on a phone, where the nav
   collapses into a hamburger, the number was invisible. A count you have to open
   a menu to see is a count nobody sees. It lives in the top bar now, next to
   your face, where your eye already goes. */
.bell{position:relative;width:38px;height:38px;border-radius:11px;flex:none;
  background:var(--card);border:1.5px solid var(--line);color:var(--muted);
  font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.13s;margin-right:10px;}
.bell:hover{border-color:var(--gold,#C9962C);color:var(--ink);}
.bell.has{color:var(--gold,#C9962C);border-color:rgba(201,150,44,.5);}
.bell .bn{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--n-red,#E04B4A);color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-family:var(--body);
  border:2px solid var(--card);}
.tb-right{display:flex;align-items:center;}

/* Two records, one email. The one to keep is the one with the history — never
   assume it's the newest. */
.dupetag{display:inline-block;margin-top:5px;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;font-weight:700;color:#fff;background:var(--n-red,#E04B4A);
  padding:3px 7px;border-radius:6px;}

/* Merge two records. The safe choice has to be the obvious one — an agent left to
   guess will pick "the newer one", which is exactly the one WITHOUT their W-9. */
.dupbox .dupone{background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px;margin-bottom:9px;}
.dupbox .dh{font-weight:600;font-size:13.5px;margin-bottom:8px;color:var(--ink);}
.dupbox .dr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;
  border-bottom:1px solid var(--line);font-size:12.5px;}
.dupbox .dr:last-of-type{border-bottom:none;margin-bottom:8px;}
.dupbox .dr .tag{font-family:var(--mono);font-size:9px;letter-spacing:.08em;font-weight:700;
  padding:3px 7px;border-radius:5px;flex:none;min-width:74px;text-align:center;}
.dupbox .dr.keep .tag{background:rgba(68,131,97,.18);color:var(--n-green,#448361);}
.dupbox .dr.drop .tag{background:rgba(224,75,74,.15);color:var(--n-red,#E04B4A);}
.dupbox .dr .s{font-weight:600;color:var(--ink);}

/* A rehearsal, clearly labelled. If you can't tell a test gig from a real one at
   a glance, the test data will eventually be treated as real. */
.testtag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  font-weight:700;background:var(--gold,#C9962C);color:#04293D;padding:2px 6px;
  border-radius:5px;margin-right:6px;vertical-align:1px;}

/* Pick the photo the client sees first, per shortlist. */

.leadcap{font-family:var(--mono,monospace);font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding:9px 9px 0;}
.leadstrip{display:flex;gap:5px;padding:7px 9px 0;flex-wrap:wrap;}
.leadstrip img{width:40px;height:50px;object-fit:cover;border-radius:6px;cursor:pointer;
  border:2px solid transparent;opacity:.6;transition:.12s;}
.leadstrip img:hover{opacity:1;}
.leadstrip img.on{opacity:1;border-color:var(--gold,#C9962C);}
.sph .leadlbl{position:absolute;left:6px;bottom:6px;font-family:var(--mono,monospace);
  font-size:8px;letter-spacing:.08em;font-weight:700;background:rgba(4,25,37,.8);
  color:var(--gold-2,#E8C36A);padding:2px 6px;border-radius:4px;}

/* The agent's own booking link, on the dashboard. It earns the client, so it
   earns the real estate. */
.bookline{display:flex;align-items:center;gap:13px;background:var(--card);
  border:1px solid var(--line);border-left:4px solid var(--gold,#C9962C);
  border-radius:0 12px 12px 0;padding:13px 16px;margin-bottom:18px;box-shadow:var(--sh);}
.bookline .bl-ic{font-size:17px;color:var(--gold,#C9962C);flex:none;}
.bookline .bl-b{flex:1;min-width:0;}
.bookline .bl-t{font-size:12px;color:var(--muted);font-weight:600;}
.bookline .bl-u{font-family:var(--mono);font-size:13px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;}
@media(max-width:560px){ .bookline{flex-wrap:wrap;} .bookline .bl-b{flex-basis:100%;} }

/* Delivery receipts — did the talent see the offer / call sheet. */
.seenpill{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono,monospace);
  font-size:9.5px;letter-spacing:.03em;padding:2px 7px;border-radius:20px;white-space:nowrap;
  vertical-align:middle;}
.seenpill.on{background:var(--n-green,#1f9d63);color:#fff;}
.seenpill.off{background:transparent;border:1px solid var(--line);color:var(--muted);}
.bk-receipts{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px;}
.bk-receipts .rc-h{font-family:var(--mono,monospace);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;}

/* ---- Test corner (admin, top of Gigs) ---- */
.testkit{border:1px dashed var(--gold,#C9962C);background:rgba(201,150,44,.05);
  border-radius:14px;padding:14px 16px;margin:0 0 20px;}
.tk-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--ink);}
.tk-h .tk-dot{width:8px;height:8px;border-radius:50%;background:var(--gold,#C9962C);flex:none;}
.tk-h .tk-sub{font-weight:400;font-size:12px;color:var(--muted);margin-left:2px;}
.tk-body{margin-top:12px;display:flex;flex-direction:column;gap:14px;}
.tk-sec{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.tk-lbl{font-family:var(--mono,monospace);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);flex-basis:100%;}
.tk-empty{font-size:12.5px;color:var(--muted);flex:1;min-width:0;}
.tk-chips{display:flex;flex-wrap:wrap;gap:6px;}
.tk-chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:4px 6px 4px 12px;font-size:12.5px;}
.tk-x{border:none;background:var(--paper,#eee);color:var(--muted);border-radius:50%;width:18px;height:18px;
  line-height:1;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.tk-x:hover{background:var(--n-red,#c0392b);color:#fff;}
.tk-gigs{display:flex;flex-direction:column;gap:6px;flex-basis:100%;}
.tk-gig{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;}
.tk-gig a{font-weight:600;font-size:13px;color:var(--ink);text-decoration:none;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tk-gig a:hover{text-decoration:underline;}
.tk-gig .tk-st{font-family:var(--mono,monospace);font-size:9px;letter-spacing:.08em;color:var(--muted);}
.tk-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:12px;}
.tk-note{font-size:11.5px;color:var(--muted);}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink-soft);}
.btn.ghost:hover{border-color:var(--n-red,#c0392b);color:var(--n-red,#c0392b);}

/* Test-gig banner on the detail page */
.tgig-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:rgba(201,150,44,.08);border:1px solid var(--gold-line,#EBD9A8);
  border-radius:12px;padding:11px 15px;margin:0 0 18px;font-size:13px;color:var(--ink-soft);}
.tgig-banner span{flex:1;min-width:0;}

/* Seeded cast sign-in links */
.tk-links{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px;display:flex;
  flex-direction:column;gap:6px;}
.tk-link{display:flex;align-items:center;gap:10px;}
.tk-link .tk-ln{font-weight:600;font-size:13px;color:var(--ink);flex:1;}

/* ---- Custom shortlist: add-someone-manually form ---- */
/* Gold trim, because this is the one panel on the page that ADDS somebody, and
   it should be findable at a glance without shouting. Everything else about it
   matches the card it sits in. */
.manual-form{margin-top:12px;border:1px solid var(--gold-line);border-radius:12px;padding:14px;
  background:var(--paper);box-shadow:inset 0 0 0 1px rgba(201,150,44,.06);}
.manual-form .mf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:520px){ .manual-form .mf-grid{grid-template-columns:1fr;} }
.manual-form .f{margin-bottom:10px;}
.manual-form label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;}
.manual-form label small{color:var(--muted);font-weight:400;}
.manual-form input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  font-size:13px;background:var(--card,#fff);color:var(--ink);}
/* The native file button renders as a bright white slab in a dark panel, which
   is the loudest thing on the form and the least important. */
.manual-form input[type="file"]{padding:7px 9px;}
.manual-form input[type="file"]::file-selector-button{font:inherit;font-size:12px;
  margin-right:10px;padding:5px 11px;border-radius:7px;cursor:pointer;
  border:1px solid var(--gold-line);background:var(--gold-soft);color:var(--gold-deep);}
.manual-form input[type="file"]::file-selector-button:hover{border-color:var(--gold);}
.mf-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px;}
.mf-thumb{position:relative;width:58px;height:72px;border-radius:8px;overflow:hidden;border:1px solid var(--line);}
.mf-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.mf-thx{position:absolute;top:2px;right:2px;width:18px;height:18px;border:none;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-size:13px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.mf-act{display:flex;align-items:center;gap:10px;}
.mf-status{font-size:12px;color:var(--muted);}
.sub-c .sact .mdel{background:transparent;border:1px solid var(--line);color:var(--muted);
  font-size:11px;padding:5px 10px;border-radius:7px;cursor:pointer;}
.sub-c .sact .mdel:hover{border-color:var(--n-red,#c0392b);color:var(--n-red,#c0392b);}

/* Recruiting link — the talent-facing twin of the booking link. Teal rule so a
   glance tells the two apart. */
.bookline.recruit{border-left-color:#1B6E9E;}
.bookline.recruit .bl-ic{color:#1B6E9E;}
/* "Recruited by ___" chip on a roster card. */
.srctag.rec{background:rgba(27,110,158,.14);color:#1B6E9E;border:1px solid rgba(27,110,158,.35);}

/* Review-before-send overlay (client agreement). */
.ovl{position:fixed;inset:0;z-index:200;background:rgba(4,20,31,.55);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:28px 16px;overflow-y:auto;}
.ovl-box{background:var(--card);border:1px solid var(--line);border-radius:16px;width:100%;max-width:660px;
  box-shadow:0 26px 70px rgba(0,0,0,.4);overflow:hidden;}
.ovl-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--line);}
.ovl-b{padding:18px 20px;max-height:64vh;overflow-y:auto;}
.ovl-f{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--line);background:var(--paper);}
.agsec{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin:16px 0 8px;}
.agsec:first-child{margin-top:0;}

/* Client-view preview of the agreement (read-only, styled like the signing page). */
.apv{background:#F4F7FA;color:#0F2027;}
.apv-head{background:linear-gradient(135deg,#04293D,#0A3D5A);margin:-18px -20px 16px;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;}
.apv-mark{font-family:var(--display);font-weight:700;font-size:17px;color:#fff;}
.apv-mark span{color:#E8C36A;}
.apv-kick{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:#9FC3DA;}
.apv-title{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:22px;color:#0F2027;}
.apv-sub{font-size:12.5px;color:#7D93A3;margin-top:3px;}
.apv-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E2E9EF;border:1px solid #E2E9EF;
  border-radius:10px;overflow:hidden;margin:16px 0 0;}
@media(max-width:560px){ .apv-grid{grid-template-columns:1fr;} }
.apv-c{background:#fff;padding:11px 13px;}
.apv-c .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#7D93A3;}
.apv-c .v{font-size:13.5px;font-weight:600;margin-top:2px;color:#0F2027;}
.apv-money{display:flex;gap:2px;background:#E2E9EF;border:1px solid #E2E9EF;border-radius:10px;overflow:hidden;margin:12px 0 0;}
@media(max-width:560px){ .apv-money{flex-direction:column;} }
.apv-money>div{flex:1;background:#fff;padding:12px 13px;}
.apv-money .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#7D93A3;}
.apv-money .v{font-family:var(--display);font-size:18px;font-weight:600;margin-top:2px;color:#0F2027;}
.apv-money .hi{background:#FDFAF3;box-shadow:inset 0 3px 0 #C9962C;}
.apv-money .hi .k,.apv-money .hi .v{color:#8A6A18;}
.apv-h3{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:14px;color:#04293D;margin:16px 0 4px;}
.apv-p{font-size:12.5px;color:#42586A;line-height:1.6;white-space:pre-line;}
.apv-signbox{background:#fff;border:1px solid #E2E9EF;border-radius:12px;padding:16px;margin-top:18px;font-size:12.5px;color:#42586A;}
.apv-signbox b{font-family:var(--display);font-size:15px;color:#0F2027;}

/* Agreements list */
.agr-list{display:flex;flex-direction:column;gap:8px;}
.agr-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:0 12px 12px 0;padding:14px 16px;}
.agr-row.ok{border-left-color:var(--n-green,#1f9d63);}
.agr-main{flex:1;min-width:0;}
.agr-t{font-weight:600;font-size:15px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.agr-pill{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;}
.agr-pill.wait{background:rgba(201,150,44,.16);color:var(--gold);}
.agr-pill.ok{background:rgba(18,121,90,.16);color:#1f9d63;}
.agr-m{font-size:12.5px;color:var(--ink-soft);margin-top:3px;}
.agr-m2{font-size:11.5px;color:var(--muted);margin-top:2px;}
.agr-act{display:flex;gap:7px;flex-wrap:wrap;}

/* ============================================================================
   DARK, FINISHED
   This used to be a "premium layer": a second set of dark tokens, a gradient
   canvas, a glass shell with a gold glow baked into it. It was written to chase
   a mockup and it left dark mode looking like a different product from light
   mode — different card, different shadow, different edge on every screen.

   The tokens now live in ONE place (the :root and dark blocks at the top of this
   file) and this section only does what genuinely needs doing on a dark ground.
   ========================================================================== */
html[data-theme="dark"] body{background:var(--canvas);}
html[data-theme="dark"] .shell{background:var(--mist);box-shadow:none;border-color:var(--line);}

/* ---- DARK: the same system, not a second one -----------------------------
   This block used to be where dark mode grew its own look — frosted glass
   cards, a gold pill on the nav, a 40px drop shadow under every panel — none of
   which existed in light mode. Two themes that disagree about what a card is
   are two designs. Everything below now only adjusts what genuinely differs on
   a dark ground: contrast and the odd hairline. */
html[data-theme="dark"] .topbar{
  background:var(--card);
  border-bottom:1px solid var(--line);
}
html[data-theme="dark"] .nav button:not(.on):hover{background:rgba(255,255,255,.04);color:var(--ink);}

/* Gold on the primary action, flat like everywhere else. */
html[data-theme="dark"] .btn.pri,
html[data-theme="dark"] .btn.gold{
  background:linear-gradient(180deg,#E0B24E,#C9962C);
  border:1px solid var(--gold);color:#231902;font-weight:800;box-shadow:none;
}
html[data-theme="dark"] .btn.pri:hover,
html[data-theme="dark"] .btn.gold:hover{filter:brightness(1.06);}

html[data-theme="dark"] .avbtn .av{box-shadow:0 0 0 2px rgba(232,195,106,.35);}

/* ---- agent booking/profile card (dashboard) ---- */
.abc{border-radius:var(--r);overflow:hidden;margin-bottom:16px;
  background:var(--card);border:1px solid var(--line);box-shadow:none;}
html[data-theme="dark"] .abc{background:var(--card);border-color:var(--line);box-shadow:none;}
.abc-hero{position:relative;height:210px;background:#0a1620;}
.abc-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;}
.abc-hero.noimg{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0e2a3c,#123047);}
.abc-hero.noimg span{font-family:var(--display);font-size:46px;color:#3a5566;}
.abc-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,15,22,0) 42%,rgba(5,15,22,.92));}
.abc-chip{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;font-size:11px;
  font-weight:600;color:var(--gold-2);background:rgba(10,20,28,.6);backdrop-filter:blur(6px);
  border:1px solid rgba(201,150,44,.45);padding:5px 11px 5px 7px;border-radius:20px;}
.abc-chip .vk{width:15px;height:15px;border-radius:50%;background:var(--gold);color:#241a05;display:flex;
  align-items:center;justify-content:center;font-size:9px;font-weight:800;}
.abc-who{position:absolute;left:16px;bottom:13px;right:16px;}
.abc-who .n{font-family:var(--display);font-size:26px;font-weight:400;color:#fff;line-height:1.1;}
.abc-who .r{font-size:12px;color:var(--gold-2);margin-top:1px;}
.abc-addphoto{position:absolute;top:12px;left:12px;background:rgba(10,20,28,.6);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);color:#fff;font-size:11.5px;font-weight:600;padding:6px 11px;
  border-radius:9px;cursor:pointer;font-family:var(--body);}
.abc-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:9px;}
.abc-link{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);
  border-left:3px solid var(--gold);border-radius:11px;padding:9px 11px;}
.abc-link.recruit{border-left-color:var(--sky-2,#3F9FD1);}
.abc-link .l{font-size:11px;color:var(--muted);font-weight:600;flex:none;}
.abc-link .l span{display:block;font-size:9.5px;font-weight:500;opacity:.8;}
.abc-link .u{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:12px;color:var(--sky-2,#3F9FD1);}
@media(max-width:560px){ .abc-link{flex-wrap:wrap;} .abc-link .u{flex-basis:100%;order:3;} }
.abc-share{width:100%;justify-content:center;margin-top:2px;}
.abc-nudge{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.5;}

/* ---- agent dashboard: hero row (booking card + KPI tiles) ---- */
.dash-hi{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.dash-hi h1{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:34px;line-height:1.05;}
.dash-hi p{color:var(--muted);font-size:13.5px;margin-top:2px;}

.dash-hero{display:grid;grid-template-columns:310px 1fr;gap:16px;margin-bottom:16px;align-items:start;}
@media(max-width:820px){ .dash-hero{grid-template-columns:1fr;} }
.dash-hero .abc{margin-bottom:0;}

.dash-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:400px){ .dash-kpis{grid-template-columns:1fr;} }
/* A coloured rail instead of an icon chip: it says the same thing in 2px and
   leaves the number the only thing in the tile with any weight. */
.dkpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;box-shadow:none;position:relative;overflow:hidden;}
.dkpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line);}
.dkpi:has(.i-sky)::before{background:var(--sky);}
.dkpi:has(.i-gold)::before{background:var(--gold);}
.dkpi:has(.i-green)::before{background:var(--green);}
.dkpi .ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:15px;margin-bottom:11px;}
.dkpi .v{font-family:var(--display);font-weight:var(--dfw);letter-spacing:var(--dtr);font-size:30px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;}
.dkpi .k{font-size:11.5px;color:var(--muted);margin-top:5px;}
.dkpi .ic.i-sky{background:var(--sky-soft);color:var(--sky);}
.dkpi .ic.i-gold{background:var(--gold-soft);color:var(--gold-deep);}
.dkpi .ic.i-green{background:var(--green-soft);color:var(--green);}
/* The glass tile is gone. It was the one card in the portal that was neither a
   card nor a panel, and it made the dashboard read as a different product from
   every screen you reached from it. */
html[data-theme="dark"] .dkpi .v{color:var(--ink);}
html[data-theme="dark"] .dkpi .ic.i-sky{color:#5AB0DE;}
html[data-theme="dark"] .dkpi .ic.i-gold{color:var(--gold-2);}
html[data-theme="dark"] .dkpi .ic.i-green{color:#4FCF9C;}

/* ---- booking: clear status pills for the "everyone else" list ---- */
.bstatus{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:7px;width:max-content;}
.bstatus.exp{color:var(--gold-2);background:rgba(201,150,44,.14);border:1px solid var(--gold-line);}
.bstatus.rev{color:var(--sky-2,#3F9FD1);background:var(--sky-soft);border:1px solid var(--sky-line);}
.bstatus.mut{color:var(--muted);background:var(--mist);border:1px solid var(--line);}
.bpill.picked{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green);background:var(--green-soft);border:1px solid var(--green);padding:2px 6px;border-radius:6px;
  margin-left:6px;vertical-align:middle;}

/* ---- gig-page section toggles (Details / Talent / Booking) ---- */
.gig-sections{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:14px 0 4px;}
.gig-sections .gs-lbl{font-size:11.5px;color:var(--muted);margin-right:2px;}
.gsec{border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px;font-weight:600;
  padding:6px 13px;border-radius:20px;cursor:pointer;font-family:var(--body);transition:.13s;}
.gsec:hover{color:var(--ink);}
.gsec.on{background:var(--gold-soft);color:var(--gold-deep);border-color:var(--gold-line);}
html[data-theme="dark"] .gsec.on{color:var(--gold-2);}
html[data-theme="dark"] .gsec.on{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241a05;border-color:var(--gold);}
/* The always-there Call sheet shortcut — gold outline so it reads as an action,
   not a toggle. Pushed to the right of the toggles on wider screens. */
.gsec.cs{border-color:var(--gold,#c79a3b);color:var(--gold,#c79a3b);margin-left:auto;}
.gsec.cs:hover{background:var(--gold,#c79a3b);color:#241a05;}
@media (max-width:540px){.gsec.cs{margin-left:0;}}

/* Add-who-worked panel inputs — force consistent, legible styling so a field
   never renders dark-on-dark (or default-white) and hides what you're typing. */
.rost-add input, .rost-add textarea{
  background:var(--card,#0c2e44);color:var(--ink,#eaf2f8);
  border:1px solid var(--line,#1c4763);border-radius:9px;padding:9px 11px;
  font-size:13.5px;font-family:inherit;}
.rost-add input::placeholder, .rost-add textarea::placeholder{color:var(--muted,#8fb0c6);}
.rost-add input:focus, .rost-add textarea:focus{outline:none;border-color:var(--gold,#d4a53d);}

/* Talent drawer edit inputs — legible in the dark theme. */
.drawer .dsec input, .drawer .dsec textarea, .drawer .pv input{
  background:var(--card,#0c2e44);color:var(--ink,#eaf2f8);
  border:1px solid var(--line,#1c4763);border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;}
.drawer .dsec input:focus, .drawer .pv input:focus{outline:none;border-color:var(--gold,#d4a53d);}

/* "All submissions" groups several sub-blocks under one toggle — flatten the
   nested cards so they read as sub-sections, not cards-within-a-card. */
.bk-step.subs > .bk-step{background:transparent;border:0;box-shadow:none;padding:10px 0 0;margin:0;}
.bk-step.subs > .bk-step h4{font-size:14px;}

/* Automated-emails reference on the Automations page. */
.em-grp{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin:18px 0 4px;}
.em-grp small{font-weight:400;color:var(--muted);font-size:12px;}
.em-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;}
.em-dot.auto{background:var(--n-green,#39b37a);}
.em-dot.trig{background:var(--gold,#d4a53d);}
.em-dot.in{background:var(--sky,#7fd2f0);}
.em-row{display:grid;grid-template-columns:1.7fr 1fr 1.1fr;gap:10px;padding:9px 0;border-top:1px solid var(--line);align-items:start;font-size:13px;}
.em-nm{font-weight:600;}
.em-subj{font-weight:400;color:var(--muted);font-size:11.5px;font-style:italic;margin-top:2px;}
.em-to,.em-when{color:var(--muted);font-size:12px;}

/* Payroll page */
.pay-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
.pay-kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 15px;}
.pay-kpi .v{font-size:22px;font-weight:700;letter-spacing:-.5px;}
.pay-kpi .k{color:var(--muted);font-size:12px;margin-top:2px;}
.pay-kpi.g .v{color:var(--gold,#d4a53d);} .pay-kpi.rd .v{color:var(--n-red,#d9694e);} .pay-kpi.grn .v{color:var(--n-green,#39b37a);}
.pay-gig{margin:16px 0 4px;font-weight:700;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;}
.pay-gig .gm{color:var(--muted);font-size:12px;font-weight:400;}
.pay-gig .gt{margin-left:auto;color:var(--gold,#d4a53d);font-weight:700;font-size:14px;}
@media(max-width:640px){.pay-kpis{grid-template-columns:repeat(2,1fr);}}

/* Finance / Revenue tables */
.fin-hd,.fin-row{display:grid;grid-template-columns:1.5fr .6fr 1fr 1fr 1fr;gap:8px;align-items:center;}
.fin-hd{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--line);}
.fin-row{padding:11px 0;border-top:1px solid rgba(255,255,255,.05);font-size:13px;}
.fin-crow{display:grid;grid-template-columns:1.6fr 1fr;gap:8px;padding:9px 0;border-top:1px solid rgba(255,255,255,.05);font-size:13px;}
.fin-crow:first-of-type{border-top:0;}
.fin-row .g,.fin-crow .g{color:var(--gold,#d4a53d);}
.fin-row .grn{color:var(--n-green,#39b37a);}
.fin-row .mut,.fin-crow .mut{color:var(--muted);}
@media(max-width:640px){
  .fin-hd,.fin-row{grid-template-columns:1.4fr .6fr 1fr;}
  .fin-hd>div:nth-child(n+4),.fin-row>div:nth-child(n+4){display:none;}
}

/* Clients / CRM */
.crm-chead{display:flex;align-items:center;gap:12px;padding:13px 4px;border-top:1px solid var(--line);}
.crm-chead:first-child{border-top:0;}
.crm-logo{width:34px;height:34px;border-radius:9px;background:#12405c;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--sky,#7fd2f0);font-weight:800;border:1px solid var(--line);}
.crm-cn{font-weight:800;font-size:14.5px;}
.crm-cm{color:var(--muted);font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.crm-sum{text-align:right;} .crm-sum .lv{color:var(--gold,#d4a53d);font-weight:700;font-size:14px;} .crm-sum .lg{color:var(--muted);font-size:11px;}
.crm-row{display:grid;grid-template-columns:1.6fr 1fr .9fr .8fr 1fr 1fr auto;gap:10px;align-items:center;padding:11px 4px 11px 18px;border-top:1px solid rgba(255,255,255,.05);font-size:12.5px;}
.crm-gname b{font-weight:700;} .crm-gname .sm{color:var(--muted);font-size:11px;margin-top:2px;}
.crm-val{font-weight:700;color:var(--gold,#d4a53d);}
.crm-pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:700;white-space:nowrap;}
.crm-pill.p-new{background:rgba(127,210,240,.14);color:var(--sky,#7fd2f0);}
.crm-pill.p-cont{background:rgba(180,147,230,.16);color:#b493e6;}
.crm-pill.p-quote{background:rgba(212,165,61,.16);color:var(--gold2,#e7c264);}
.crm-pill.p-agreed{background:rgba(57,179,122,.16);color:var(--n-green,#39b37a);}
.crm-pill.p-booked{background:rgba(57,179,122,.22);color:#7fe0ad;}
.crm-row .yes{color:var(--n-green,#39b37a);font-weight:600;}
.crm-row .mut{color:var(--muted);}
.crm-row .duec{color:var(--n-red,#d9694e);font-weight:600;}
.crm-act{text-align:right;}
@media(max-width:820px){
  .crm-row{grid-template-columns:1.5fr auto auto;}
  .crm-row .hidem{display:none;}
}
@media(max-width:600px){.em-row{grid-template-columns:1fr;} .em-to,.em-when{font-size:11.5px;margin-top:1px;}}

/* ---- CLIENT DETAIL DRAWER ---- reuses .scrim/.drawer/.dhead/.dav/.dn/.dm/.dbody */
.cl-rep{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:700;
  background:rgba(57,179,122,.18);color:#7fe0ad;vertical-align:middle;margin-left:8px;}
.cl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:4px 0 6px;}
.cl-st{background:var(--card);padding:12px 12px;}
.cl-st .v{font-size:17px;font-weight:700;color:var(--ink);} .cl-st .v.g{color:var(--gold);}
.cl-st .v.rd{color:var(--n-red);} .cl-st .k{color:var(--muted);font-size:10.5px;margin-top:2px;}
/* Actions inside a stat cell. Small and outlined rather than solid: they sit
   under a number, and a row of filled buttons there would out-shout the number
   itself. Wraps on a narrow screen instead of pushing the cell wide. */
.cl-stbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center;}
.cl-stbtn{background:none;border:1px solid var(--line);border-radius:6px;
  padding:3px 8px;cursor:pointer;font:inherit;font-size:11px;line-height:1.5;
  letter-spacing:.02em;color:var(--ink-soft,var(--muted));transition:border-color .12s,color .12s;}
.cl-stbtn:hover{border-color:var(--gold);color:var(--gold);}
.cl-stbtn.danger:hover{border-color:var(--n-red,#C4574A);color:var(--n-red,#C4574A);}
.cl-stbtn:disabled{opacity:.45;cursor:default;}
.cl-stbtn:disabled:hover{border-color:var(--line);color:var(--ink-soft,var(--muted));}
/* Present for showPicker(), invisible until a browser without it needs to fall
   back to showing the field. */
/* flex:0 0 1px with min-width:0 matters: a date input has a wide intrinsic
   width, and a flex item will not shrink past it on its own, which pushes the
   button after it onto a second line. */
.cl-stdate{flex:0 0 1px;min-width:0;width:1px;height:20px;padding:0;border:0;
  margin:0 0 0 -6px;opacity:0;pointer-events:none;overflow:hidden;}
.cl-stdate.show{flex:0 0 auto;width:auto;height:auto;margin:0;opacity:1;pointer-events:auto;
  background:var(--bg,#0B1E28);color:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:2px 6px;font:inherit;font-size:11px;}
.cl-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:20px 0 8px;}
.cl-kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:13px;
  border-bottom:1px solid var(--line);}
.cl-kv .k{color:var(--muted);} .cl-kv a{color:var(--sky-2);text-decoration:none;}
.cl-kv .yes{color:var(--n-green);font-weight:600;} .cl-kv .mut{color:var(--muted);} .cl-kv .duec{color:var(--n-red);font-weight:600;}
.cl-grow{display:grid;grid-template-columns:1.4fr auto .7fr auto;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
.cl-grow .sm{color:var(--muted);font-size:11px;} .cl-val{color:var(--gold);font-weight:700;text-align:right;}
.cl-open{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;
  padding:5px 11px;font-size:11px;cursor:pointer;} .cl-open:hover{border-color:var(--sky-2);color:var(--ink);}
.cl-log{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);}
.cl-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;background:var(--sky-2);}
.cl-log .t{font-size:12.5px;color:var(--ink);} .cl-log .w{color:var(--muted);font-size:11px;margin-top:1px;}
.cl-field{display:flex;gap:8px;margin-top:10px;}
.cl-field .cl-chan{flex:none;width:90px;} .cl-field .cl-note{flex:1;}
.cl-add{background:var(--gold);color:#241a05;border:0;border-radius:8px;padding:8px 14px;font-weight:700;font-size:12px;cursor:pointer;}
.cl-date{width:auto;} .mut{color:var(--muted);}
/* ============================ AGENT WALKTHROUGH ======================== */
.wt-wrap{max-width:920px;}
.wt-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:4px;}
.wt-stepno{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold);font-weight:700;}
.wt-prog{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin:10px 0 22px;}
.wt-prog>div{height:100%;background:var(--gold);border-radius:6px;transition:width .25s;}
.wt-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:26px;align-items:start;}
@media(max-width:780px){.wt-grid{grid-template-columns:1fr;gap:18px;}}
.wt-title{font-family:var(--serif,Georgia,serif);font-size:23px;font-weight:700;color:var(--ink);margin:0 0 12px;line-height:1.2;}
.wt-do{list-style:none;padding:0;margin:0;}
.wt-do li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:14px;line-height:1.5;border-bottom:1px solid var(--line);color:var(--ink);}
.wt-do li .n{flex:none;width:18px;height:18px;border-radius:50%;background:rgba(18,121,90,.15);color:var(--n-green);font-size:11px;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.wt-do li b{color:var(--ink);}
.wt-callout{margin-top:14px;border-radius:0 10px 10px 0;padding:10px 12px;font-size:12.5px;line-height:1.5;}
.wt-callout b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;}
.wt-callout.flag{background:rgba(201,150,44,.1);border-left:3px solid var(--gold);color:var(--gold-deep,#8A6A18);}
.wt-callout.auto{background:rgba(18,121,90,.09);border-left:3px solid var(--n-green);color:var(--n-green);}
.wt-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;}
.wt-dots{display:flex;gap:7px;}
.wt-dot{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer;transition:background .15s,transform .15s;}
.wt-dot.on{background:var(--gold);transform:scale(1.25);}

/* the illustrated screen mock */
.wt-mock{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);box-shadow:0 10px 34px rgba(2,20,30,.14);}
.wt-topbar{background:#04293d;color:#fff;padding:11px 14px;display:flex;align-items:center;gap:10px;}
.wt-topbar .wt-logo{font-weight:800;color:var(--gold-2,#E8C36A);letter-spacing:.06em;font-size:13px;}
.wt-navmini{color:#a9c9de;font-size:10px;}
.wt-tabs{display:flex;gap:4px;padding:9px 11px;border-bottom:1px solid var(--line);background:var(--mist);flex-wrap:wrap;}
.wt-tab{font-size:10.5px;padding:4px 10px;border-radius:14px;color:var(--muted);}
.wt-tab.on{background:var(--gold);color:#241a05;font-weight:700;}
.wt-screen{padding:16px;min-height:236px;}
.wt-h{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:10px;}
.wt-sub{font-size:11.5px;color:var(--muted);}
.wt-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink);}
.wt-row.hot{background:rgba(201,150,44,.08);border-radius:8px;padding:9px 10px;border-bottom:0;margin-bottom:2px;}
.wt-pill{font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--mist);color:var(--muted);white-space:nowrap;}
.wt-pill.new{background:var(--sky-soft);color:var(--sky);} .wt-pill.green{background:rgba(18,121,90,.16);color:var(--n-green);}
/* Lane map (walkthrough step 2). Amber = waiting on someone else, red = dead,
   grey = parked; the same read the real board gives, in one screen. */
.wt-pill.amber{background:rgba(201,150,44,.18);color:#C9962C;}
.wt-pill.red{background:rgba(200,80,70,.16);color:#d9776f;}
.wt-lanes{display:flex;flex-direction:column;gap:5px;}
.wt-lane{display:grid;grid-template-columns:96px 1fr;gap:9px;align-items:baseline;
  padding:5px 0;border-top:1px solid var(--line);}
.wt-lane:first-child{border-top:0;}
.wt-lane .wt-sub{font-size:10.5px;line-height:1.45;}

.wt-field{background:var(--mist);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:11.5px;color:var(--ink-soft,#4A6270);}
.wt-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.wt-line{height:9px;border-radius:5px;background:var(--line);}
/* Four tiers, stacked, each carrying its name and standard rate — the same
   thing the real quote builder draws. Two bare "Tier 1 / Tier 2" pills read as
   jargon and taught nobody which tier a job actually is. */
.wt-tiers{display:flex;flex-direction:column;gap:4px;margin-top:5px;}
.wt-tier{font-size:10.5px;padding:5px 9px;border-radius:9px;border:1.5px solid var(--line);color:var(--muted);
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;line-height:1.35;}
.wt-tier .tnm{font-weight:600;}
.wt-tier .trt{font-size:9.5px;opacity:.75;white-space:nowrap;}
.wt-tier.on{border-color:var(--gold);background:rgba(201,150,44,.12);color:var(--gold);font-weight:700;}
.wt-tier{cursor:pointer;transition:border-color .12s,background .12s;}
.wt-tier:hover{border-color:var(--gold);}
/* Live quote panel. The slider turns red below the tier floor, the same signal
   the real builder gives, so the training teaches the actual cue. */
.wt-range{width:100%;margin:5px 0 0;accent-color:var(--gold);}
.wt-range.under{accent-color:#d9776f;}
.wt-ends{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted);margin-top:2px;}
.wt-warn{margin-top:8px;font-size:10.5px;line-height:1.45;color:#d9776f;
  background:rgba(200,80,70,.10);border-radius:7px;padding:6px 8px;}

.wt-qgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.wt-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--mist);font-size:12px;color:var(--ink);}
.wt-tr{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-soft,#4A6270);padding:3px 0;}
.wt-tot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:8px;border-top:1.5px solid var(--line);font-size:12px;}
.wt-tot b{color:var(--gold);font-size:15px;}
.wt-btn{display:inline-block;padding:6px 11px;border-radius:8px;font-size:10.5px;font-weight:700;}
.wt-btn.gold{background:var(--gold);color:#241a05;} .wt-btn.ghost{border:1px solid var(--line);color:var(--muted);}
.wt-talent{display:flex;gap:8px;margin-top:4px;}
.wt-photo{width:56px;height:70px;border-radius:8px;background:#1b3040;border:2px solid transparent;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;}
.wt-photo.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,150,44,.25);}
.wt-phone{max-width:250px;margin:0 auto;border:1px solid var(--line);border-radius:20px;padding:16px;background:var(--card);box-shadow:0 10px 34px rgba(2,20,30,.14);}
.wt-phone-head{background:#04293d;margin:-16px -16px 0;padding:14px 16px;border-radius:20px 20px 0 0;}
.wt-phone-head .wt-logo{color:var(--gold-2,#E8C36A);font-weight:800;letter-spacing:.06em;}
.cl-actions{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 6px;}
/* edit-client form */
.cl-edit{float:right;background:transparent;border:1px solid var(--line);color:var(--sky-2);
  border-radius:7px;padding:2px 9px;font-size:11px;cursor:pointer;text-transform:none;letter-spacing:0;}
.cl-edit:hover{border-color:var(--sky-2);}
.cl-form{display:grid;gap:8px;margin-top:4px;}
.cl-form label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);}
.cl-form input{font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);width:100%;box-sizing:border-box;}
.cl-formbtns{display:flex;gap:8px;margin-top:10px;align-items:center;}
/* pin + file action buttons */
.cl-pin{flex:none;background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:7px;padding:4px 9px;font-size:11px;cursor:pointer;align-self:center;}
.cl-pin:hover{border-color:var(--sky-2);color:var(--ink);}
.cl-pin.del:hover{border-color:var(--n-red);color:var(--n-red);}
.cl-log.pinned{background:rgba(212,165,61,.06);border-radius:8px;padding-left:6px;}
.cl-log{align-items:flex-start;}
/* files */
.cl-file{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);}
.cl-fic{font-size:16px;flex:none;} .cl-file .t{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cl-file .w{color:var(--muted);font-size:11px;margin-top:1px;}
.cl-fileinput{flex:1;font-size:12px;padding:6px;}
@media(max-width:560px){.cl-stats{grid-template-columns:repeat(2,1fr);}}

/* Client-verdict group headers in the Talent panel (picked / backups / etc.).
   display:block + align-self:start so that, as a full-width row inside the card
   grid, the header never stretches to a neighbour's height or spreads its two
   lines apart — which is what opened a big empty gap above the cards on mobile. */
.subgrp{display:block;align-self:start;margin:16px 0 2px;padding-top:8px;
  border-top:1px solid var(--line);}
.subgrp:first-of-type{border-top:0;margin-top:10px;}
.subgrp .sg-t{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.25;}
.subgrp .sg-t b{color:var(--muted);font-weight:600;}
.subgrp .sg-s{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.3;}
.subgrp.sg-pick .sg-t{color:var(--gold,#c79a3b);}
.subgrp.sg-pick .sg-t b{color:var(--gold,#c79a3b);opacity:.75;}
html[data-theme="dark"] .subgrp.sg-pick .sg-t{color:var(--gold);}

/* ============================ IN-GIG QUOTE BUILDER ====================== */
.quote .qgrid{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start;}
@media(max-width:800px){.quote .qgrid{grid-template-columns:1fr;}}

.quote .cg{margin-bottom:18px;}
.quote .cg-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;}
.quote .cg-label .lab{font-size:13px;font-weight:600;color:var(--ink);}
.quote .cg-label .lab small{font-weight:400;color:var(--muted);font-size:11px;margin-left:5px;}
.quote .cg-label .val{font-family:var(--mono);font-weight:700;color:var(--gold);font-size:15px;}

/* tier pills */
.quote .tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
@media(max-width:430px){.quote .tiers{grid-template-columns:1fr;}}
.quote .tierbtn{text-align:left;background:var(--mist);border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;cursor:pointer;transition:border-color .12s,background .12s;}
.quote .tierbtn:hover{border-color:var(--sky-2);}
.quote .tierbtn.active{border-color:var(--gold);background:rgba(201,150,44,.13);}
.quote .tierbtn .tn{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.quote .tierbtn .tname{font-size:13px;font-weight:700;color:var(--ink);margin:2px 0 1px;}
.quote .tierbtn .trange{font-size:11px;color:var(--muted);font-family:var(--mono);}

/* sliders */
.quote input[type=range]{width:100%;accent-color:var(--gold);margin:4px 0 2px;height:5px;}
.quote input[type=range].danger{accent-color:var(--n-red);}
.quote .ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);font-family:var(--mono);margin-top:2px;}

/* steppers */
.quote .stepper{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;width:fit-content;}
.quote .stepper button{width:40px;height:36px;border:0;background:var(--mist);color:var(--ink);font-size:19px;cursor:pointer;line-height:1;}
.quote .stepper button:hover{background:rgba(201,150,44,.16);}
.quote .stepper .num{min-width:48px;text-align:center;font-family:var(--mono);font-weight:700;font-size:15px;height:36px;line-height:36px;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);}

/* discount / premium chip */
.quote .chip{display:inline-flex;gap:8px;align-items:center;margin-top:9px;padding:5px 11px;border-radius:20px;font-size:11.5px;background:var(--mist);border:1px solid var(--line);}
.quote .chip #qChipL{font-weight:600;color:var(--ink);}
.quote .chip #qChipV{color:var(--muted);font-family:var(--mono);}
.quote .chip.prem{background:rgba(201,150,44,.15);border-color:rgba(201,150,44,.4);}
.quote .chip.prem #qChipL{color:var(--gold-deep,#8A6A18);}
.quote .chip.danger{background:rgba(224,75,74,.13);border-color:rgba(224,75,74,.4);}
.quote .chip.danger #qChipL{color:var(--n-red);}

/* rush toggle */
.quote .rt{display:flex;align-items:center;gap:10px;cursor:pointer;margin-top:12px;}
.quote .rt input{display:none;}
.quote .rt .track{width:40px;height:23px;border-radius:20px;background:var(--line);position:relative;transition:background .15s;flex:none;}
.quote .rt .track::after{content:'';position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.quote .rt input:checked + .track{background:var(--gold);}
.quote .rt input:checked + .track::after{transform:translateX(17px);}
.quote .rt .lab{font-size:12.5px;color:var(--ink);}
.quote .rushbadge{display:none;margin-top:9px;font-size:11.5px;color:var(--gold-deep,#8A6A18);background:rgba(201,150,44,.1);border-radius:9px;padding:8px 11px;line-height:1.4;}
.quote .rushbadge.on{display:block;}
.quote .rushbadge.info{color:var(--muted);background:rgba(120,140,155,.12);}

/* summary panel */
.quote .qgrid > div:last-child{background:var(--mist);border:1px solid var(--line);border-radius:15px;padding:18px;}
.quote .brow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;}
.quote .brow .k{color:var(--ink-soft,#4A6270);}
.quote .brow .v{font-family:var(--mono);font-weight:700;color:var(--ink);}
.quote .brow .v.gold{color:var(--gold);}
.quote .brow input[type=number]{background:var(--card);color:var(--ink);}
.quote .ctotal{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:2px solid var(--line);}
.quote .ctotal .l{font-size:12px;color:var(--muted);}
.quote .ctotal .l b{display:block;color:var(--ink);font-size:13px;font-weight:600;margin-top:1px;}
.quote .ctotal .a{font-family:var(--mono);font-weight:800;font-size:27px;color:var(--gold);letter-spacing:-.5px;}

/* earnings */
.quote .earn{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:13px 14px;}
.quote .earn .et{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:9px;}
.quote .earn .er{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;color:var(--ink-soft,#4A6270);}
.quote .earn .er .v{font-family:var(--mono);font-weight:600;color:var(--ink);}
.quote .earn .big{display:flex;justify-content:space-between;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-weight:700;font-size:14px;color:var(--ink);}
.quote .earn .big .v{font-family:var(--mono);color:var(--n-green);}

/* adjustment line inputs + save */
.quote #qAdjRows input,.quote #qAdjRows select{background:var(--card);color:var(--ink);border:1.5px solid var(--line);border-radius:7px;padding:5px 7px;font-size:12.5px;}
.quote #qSave{margin-top:14px;}
.quote #qDate{background:var(--card);color:var(--ink);}
.quote .card,.quote.card{overflow:visible;}

/* ---- Gigs tab: stat strip + cleaner cards (build 435) ---- */
.gig-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:2px 0 16px;}
@media(max-width:640px){.gig-stats{grid-template-columns:repeat(2,1fr);}}
.gig-stats .gs-c{background:var(--card-2,#0b2a3d);border:1px solid var(--line);border-radius:12px;padding:13px 15px;}
.gig-stats .v{font-size:22px;font-weight:800;line-height:1;}
.gig-stats .v.g{color:var(--gold-2,#E8C36A);}
.gig-stats .v.gr{color:var(--n-green,#5fb07f);}
.gig-stats .k{font-size:11.5px;color:var(--muted,#7fa0b6);margin-top:6px;}
.gigcard{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--c,#7fa0b6);border-radius:13px;padding:14px 16px;cursor:pointer;transition:border-color .12s,background .12s;}
.gigcard:hover{background:var(--card-hi,#10344b);border-color:rgba(255,255,255,.22);}
.gc-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px;}
.gc-badge{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:3px 10px;color:var(--c,#9FC3DC);background:color-mix(in srgb,var(--c,#9FC3DC) 18%,transparent);border:1px solid color-mix(in srgb,var(--c,#9FC3DC) 45%,transparent);}
.gc-days{font-size:11px;font-weight:700;color:var(--n-orange,#e0b64a);background:color-mix(in srgb,var(--n-orange,#e0b64a) 14%,transparent);border:1px solid color-mix(in srgb,var(--n-orange,#e0b64a) 40%,transparent);border-radius:20px;padding:3px 9px;display:inline-flex;align-items:center;gap:5px;}
.gc-days.warn{color:#f0a99b;background:rgba(224,87,74,.14);border-color:rgba(224,87,74,.42);}
.gc-code{margin-left:auto;font-size:11.5px;color:var(--muted,#7fa0b6);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;}
.gc-title{font-size:16.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25;}
.gigcard .g-client{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--sky,#5aa0e0);margin-top:5px;}
.gc-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;}
.gc-m{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted,#7fa0b6);}
.gc-m svg{opacity:.75;}
.gc-m.gc-val{color:var(--gold-2,#E8C36A);font-weight:700;}
.gc-rate{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--gold-2,#E8C36A);}

/* ---- Client record as a full page (build 439): wrap the reused drawer header
   + body in a clean card frame instead of a modal overlay. ---- */
.cl-record{border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:1080px;}

/* ---- BoothIQ form builder (build 445) ---- */
.biq-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:16px;align-items:start;}
.biq-grid>*{min-width:0;}
@media(max-width:900px){.biq-grid{grid-template-columns:1fr;}}
.biq-lab{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--soft,#9FC3DC);margin:11px 0 5px;}
.biq-in{width:100%;min-width:0;max-width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:9px 11px;font-size:13.5px;font-family:inherit;box-sizing:border-box;}
.biq-in:focus{outline:none;border-color:var(--gold);}
.biq-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.biq-row2>*{min-width:0;}
@media(max-width:560px){.biq-row2{grid-template-columns:1fr;}}
.biq-q{background:var(--card-2,#0b2a3d);border:1px solid var(--line);border-radius:11px;padding:11px 12px;margin-bottom:9px;}
.biq-q.over{border-color:var(--gold-2,#E8C36A);box-shadow:0 0 0 1px var(--gold-2,#E8C36A) inset;}
.biq-qtop{display:flex;gap:8px;align-items:center;}
.biq-grip{color:var(--muted);cursor:grab;font-size:15px;user-select:none;}
.biq-qtop input.biq-qlab{flex:1;min-width:0;width:auto;font-weight:600;}
.biq-qtop select.biq-qtype{flex:none;width:118px;}
.biq-req{flex:none;font-size:11px;font-weight:700;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--muted);border-radius:8px;padding:7px 9px;cursor:pointer;white-space:nowrap;font-family:inherit;}
.biq-req.on{color:#241a05;background:linear-gradient(180deg,var(--gold-2,#E8C36A),var(--gold));border-color:transparent;}
.biq-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:17px;line-height:1;padding:0 4px;}
.biq-opts{margin:10px 0 2px 22px;display:flex;flex-direction:column;gap:6px;}
.biq-opt{display:flex;gap:8px;align-items:center;}.biq-opt input{flex:1;}
.biq-addopt{font-size:12px;color:var(--sky,#5aa0e0);background:none;border:0;cursor:pointer;font-family:inherit;font-weight:600;text-align:left;}
.biq-addq{background:rgba(90,160,224,.14);border:1px dashed rgba(90,160,224,.5);color:#cfe6fb;border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;width:100%;}
.biq-sideh{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gold);margin:15px 0 9px;}
.biq-always{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0;}
.biq-apill{font-size:11.5px;color:var(--soft);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:20px;padding:5px 11px;}
.biq-pv{position:sticky;top:16px;background:#07202e;border:1px solid var(--line);border-radius:20px;padding:11px;}
.biq-pvn{font-size:11px;color:var(--muted);text-align:center;margin-bottom:8px;}
.biq-pvm{color:var(--soft);cursor:pointer;font-weight:600;}.biq-pvm.on{color:var(--gold-2,#E8C36A);}
.biq-card{background:#edf1f5;border-radius:14px;overflow:hidden;color:#17232e;}
.biq-ch{padding:12px 13px;font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px;color:#fff;}
.biq-clogo{width:28px;height:28px;border-radius:6px;background:#fff;color:#334;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;overflow:hidden;flex:none;}
.biq-clogo img{width:100%;height:100%;object-fit:contain;}
.biq-cb{padding:12px 12px 14px;}
.biq-csub{font-size:11px;color:#5a6b78;margin-bottom:9px;line-height:1.4;}
.biq-cseg{display:flex;gap:5px;margin-bottom:9px;}
.biq-cseg span{flex:1;min-width:0;text-align:center;font-size:9.5px;font-weight:700;border:1.5px solid #d5dee6;color:#5a6b78;border-radius:7px;padding:7px 3px;line-height:1.1;cursor:pointer;overflow:hidden;}
.biq-cseg span small{display:block;font-weight:500;font-size:8.5px;}
.biq-cl{font-size:10px;color:#5a6b78;font-weight:600;margin:8px 0 3px;}
.biq-cl .rq{color:#c0392b;}
.biq-cf{height:26px;background:#fff;border:1px solid #d5dee6;border-radius:6px;}
.biq-cf.sel{display:flex;align-items:center;padding:0 8px;font-size:10.5px;color:#17232e;}
.biq-ccon{font-size:9.5px;color:#5a6b78;display:flex;gap:5px;margin-top:9px;line-height:1.3;}
.biq-ccon .b{width:12px;height:12px;border:1.5px solid #b8c4cd;border-radius:3px;flex:none;margin-top:1px;}
.biq-cbtn{margin-top:11px;height:31px;color:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11.5px;}
.biq-thanks{text-align:center;padding:34px 14px;color:#17232e;}
.biq-thanks .ck{width:46px;height:46px;border-radius:50%;background:rgba(95,176,127,.16);border:2px solid #5fb07f;display:flex;align-items:center;justify-content:center;font-size:22px;color:#5fb07f;margin:0 auto 10px;}
.biq-thanks p{font-size:12.5px;line-height:1.5;}
.biq-redir{text-align:center;padding:34px 14px;color:#5a6b78;font-size:12px;line-height:1.6;}.biq-redir b{color:#17232e;word-break:break-all;}
.biq-qr{width:120px;height:120px;background:#fff;border-radius:10px;padding:8px;margin:0 auto 10px;}

/* ---- BoothIQ ambassador cards (build 447) ---- */
.biq-cardav{width:66px;height:66px;border-radius:50%;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid var(--gold-2,#E8C36A);background:var(--card);font-weight:800;font-size:20px;color:var(--gold-2,#E8C36A);}
.biq-cardav img{width:100%;height:100%;object-fit:cover;}
.biq-cardacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:8px;}

/* ---- clickable links inside announcements & talent notices ---- */
.announce .an-x a, .tnotice .nb a{color:var(--gold-2,#E8C36A);text-decoration:underline;word-break:break-word;font-weight:600;}
.announce .an-x a:hover, .tnotice .nb a:hover{color:var(--gold,#C9962C);}

/* ---- announcement call-to-action button (Reserve / Book) ---- */
.announce .an-cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:11px 18px;border-radius:10px;background:linear-gradient(180deg,var(--gold-2,#E8C36A),var(--gold,#C9962C));color:#241a05;font-weight:800;font-size:13.5px;text-decoration:none;box-shadow:0 4px 14px rgba(201,150,44,.28);}
.announce .an-cta:hover{filter:brightness(1.05);}

/* Event countdown chip — how many days out, on the staff list and on the
   talent's own card. Same idea as .pp-countdown in the CRM, sized to sit
   inline next to a date rather than alone in a column. */
.ev-countdown{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--gold-2,#E8C36A);background:rgba(232,195,106,.12);
  border:1px solid rgba(232,195,106,.35);border-radius:999px;padding:3px 9px;white-space:nowrap;}
.ev-countdown.hot{color:#d9694e;background:rgba(217,105,78,.12);border-color:rgba(217,105,78,.4);}
.ev-countdown.past{color:#9fb0bd;background:rgba(159,176,189,.1);border-color:rgba(159,176,189,.3);}

/* ===================== UNIFIED CALENDAR =====================================
   One colour per kind, used identically in the dashboard strip and the month
   grid, so a booked gig looks like a booked gig wherever you meet it. */
.cal-kind-gig      { --cal-c: var(--n-green); }
.cal-kind-show     { --cal-c: var(--gold); }
.cal-kind-agency   { --cal-c: var(--n-purple); }
.cal-kind-followup { --cal-c: var(--n-orange, #D9730D); }

/* ---- dashboard strip ---- */
.cal-strip{display:flex;flex-direction:column;gap:2px;}
.cal-srow{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
  padding:9px 10px;border-radius:8px;cursor:pointer;border-left:3px solid var(--cal-c,var(--muted));
  background:var(--card,transparent);}
.cal-srow:hover{background:var(--gold-soft);}
.cal-sdate{font-size:11px;line-height:1.15;color:var(--ink-soft);text-align:center;
  font-variant-numeric:tabular-nums;}
.cal-sdate b{display:block;font-size:17px;color:var(--ink);font-weight:700;}
.cal-stitle{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-ssub{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-stag{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--cal-c,var(--muted));
  font-weight:700;white-space:nowrap;}
.cal-today .cal-sdate b{color:var(--gold);}

/* ---- month grid ---- */
.cal-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 12px;}
.cal-month{font-size:19px;font-weight:700;min-width:190px;}
.cal-filters{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;}
.cal-filters button{font-size:11.5px;padding:4px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line,#ddd);background:transparent;color:var(--muted);}
.cal-filters button.on{color:var(--cal-c);border-color:var(--cal-c);
  box-shadow:inset 0 0 0 1px var(--cal-c);font-weight:600;}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:var(--line,#e5e5e5);border:1px solid var(--line,#e5e5e5);border-radius:10px;overflow:hidden;}
.cal-dow{background:var(--card,#fff);padding:7px 8px;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);font-weight:600;text-align:center;}
.cal-cell{background:var(--card,#fff);min-height:104px;padding:5px 6px;display:flex;
  flex-direction:column;gap:3px;}
.cal-cell.out{opacity:.42;}
.cal-daynum{font-size:11.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.cal-cell.now .cal-daynum{background:var(--gold);color:#fff;border-radius:999px;
  width:20px;height:20px;display:grid;place-items:center;font-weight:700;}
.cal-chip{font-size:11px;line-height:1.25;padding:2px 5px;border-radius:4px;cursor:pointer;
  border-left:3px solid var(--cal-c,var(--muted));background:color-mix(in srgb,var(--cal-c) 12%,transparent);
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-chip:hover{background:color-mix(in srgb,var(--cal-c) 26%,transparent);}
.cal-more{font-size:10.5px;color:var(--muted);cursor:pointer;padding-left:3px;}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:10px;}
.cal-legend span{display:inline-flex;align-items:center;gap:5px;}
.cal-legend i{width:9px;height:9px;border-radius:2px;background:var(--cal-c);display:inline-block;}
@media (max-width:720px){
  .cal-cell{min-height:78px;}
  .cal-chip{font-size:10px;}
  .cal-month{min-width:0;font-size:16px;}
}

/* ============================================================================
   RUN OF DAY — the shoot floor board.
   Sized for a thumb, not a mouse. Every tap target clears 40px because the
   person using this is holding a phone in one hand and directing with the other.
   ========================================================================== */
.rod-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;}
.rod-stat{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;
  padding:10px 6px;text-align:center;}
.rod-stat b{display:block;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums;}
.rod-stat span{font-size:10.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;}
.rod-stat.ok b{color:#6fbf8f;}

/* The only alarm on the page, so it is the only thing allowed to be red. */
.rod-risk{background:rgba(217,105,78,.12);border:1px solid rgba(217,105,78,.5);
  color:#e79a83;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:12px;line-height:1.5;}

.rod-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.rod-chip{background:none;border:1px solid var(--line);border-radius:20px;color:var(--muted);
  font-size:12px;font-weight:600;padding:7px 12px;cursor:pointer;display:flex;gap:6px;align-items:center;}
.rod-chip b{font-variant-numeric:tabular-nums;color:var(--ink);}
.rod-chip.on{border-color:var(--gold,#d4af54);color:var(--ink);background:rgba(212,175,84,.1);}

.rod-search{width:100%;margin-bottom:10px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line);background:rgba(0,0,0,.2);color:var(--ink);font-size:15px;}

.rod-list{display:flex;flex-direction:column;gap:6px;max-height:56vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;}
.rod-row{display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:9px 10px;}
/* Started but not finished. The state that loses you a full body. */
.rod-row.partial{border-color:rgba(217,105,78,.45);}
.rod-row.done{opacity:.55;}
.rod-who{min-width:0;flex:1;}
.rod-name{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rod-tick{color:#6fbf8f;}
.rod-meta{font-size:11.5px;color:var(--muted);margin-top:2px;}
.rod-ci{background:none;border:1px solid var(--line);border-radius:6px;color:var(--gold,#d4af54);
  font-size:11px;font-weight:600;padding:3px 8px;cursor:pointer;}

.rod-shots{display:flex;gap:5px;flex-shrink:0;}
.rod-shot{min-width:44px;min-height:40px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:rgba(0,0,0,.25);color:var(--muted);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;}
.rod-shot.on{background:var(--gold,#d4af54);border-color:var(--gold,#d4af54);color:#16161a;}
.rod-shot:disabled{opacity:.5;}
.rod-foot{font-size:11.5px;color:var(--muted);margin-top:10px;text-align:center;}
@media (max-width:420px){
  .rod-shot{min-width:40px;font-size:11px;}
  .rod-stat b{font-size:19px;}
}
/* Checked-in state doubles as the undo control, so it has to read as tappable
   without shouting as loudly as the "Check in" call to action. */
.rod-ci.in{color:var(--muted);border-color:transparent;padding:2px 0;}
.rod-ci.in:hover{color:var(--ink);border-color:var(--line);padding:2px 8px;}

/* ============================================================================
   THE SLATE. Photographed, not read. Every choice here serves a camera:
   pure black on pure white, no gradients, no thin strokes, nothing that turns
   to mush at thumbnail size or under a strobe.
   ========================================================================== */
.slate-scrim{position:fixed;inset:0;z-index:9999;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;}
.slate-card{background:#fff;color:#000;border-radius:14px;width:100%;max-width:520px;
  padding:26px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.slate-top{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#000;}
/* The name is the thing a human reads off a contact sheet, so it gets the room. */
.slate-name{font-size:clamp(30px,8vw,52px);font-weight:800;line-height:1.04;
  letter-spacing:-.02em;word-break:break-word;}
/* The code is the thing a human TYPES, so it is monospaced and unambiguous. */
.slate-code{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(26px,7vw,42px);font-weight:600;letter-spacing:.22em;
  background:#000;color:#fff;border-radius:8px;padding:6px 18px 6px 24px;}
.slate-qr{line-height:0;}
.slate-qr img,.slate-qr canvas{display:block;}
.slate-bay{font-size:20px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;min-height:24px;}

.slate-bar{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap;justify-content:center;}
.slate-x{background:none;border:1px solid #555;color:#ddd;border-radius:10px;
  font-size:14px;font-weight:600;padding:11px 20px;cursor:pointer;}
.slate-bays{display:flex;gap:6px;}
.slate-bay-btn{min-width:44px;min-height:44px;border-radius:10px;cursor:pointer;
  background:none;border:1px solid #555;color:#ddd;font-size:15px;font-weight:700;}
.slate-bay-btn.on{background:#d4af54;border-color:#d4af54;color:#111;}

/* The name on the board doubles as the slate trigger. */
.rod-slatebtn{background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:inherit;font:inherit;text-align:left;border-bottom:1px dotted rgba(212,175,84,.55);}
.rod-slatebtn:hover{border-bottom-color:var(--gold,#d4af54);}

/* ---- Links directory ---- */
.lk-search{width:100%;margin:0 0 16px;padding:11px 14px;border-radius:10px;
  border:1px solid var(--line);background:rgba(0,0,0,.2);color:var(--ink);font-size:15px;}
.lk-cat{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold,#d4af54);margin:22px 0 8px;}
.lk-list{display:flex;flex-direction:column;gap:8px;}
.lk-row{display:flex;align-items:flex-start;gap:12px;justify-content:space-between;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:13px 14px;}
.lk-main{min-width:0;flex:1;}
.lk-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.lk-title{font-size:15.5px;font-weight:700;color:var(--ink);text-decoration:none;}
.lk-title:hover{color:var(--gold,#d4af54);}
/* Who a link is for is the thing people get wrong, so it is a badge, not a note. */
.lk-aud{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-radius:20px;padding:2px 8px;border:1px solid var(--line);color:var(--muted);}
.lk-aud.lk-talent{color:#7fbb97;border-color:rgba(127,187,151,.5);}
.lk-aud.lk-public{color:#e0a45c;border-color:rgba(224,164,92,.5);}
.lk-desc{font-size:13px;color:var(--muted);line-height:1.55;margin-top:4px;}
.lk-url{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--muted);
  margin-top:5px;opacity:.65;word-break:break-all;}
.lk-acts{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
.lk-copy,.lk-edit{background:none;border:1px solid var(--line);border-radius:8px;
  color:var(--muted);font-size:11.5px;font-weight:600;padding:6px 12px;cursor:pointer;min-width:64px;}
.lk-copy:hover,.lk-edit:hover{color:var(--ink);border-color:var(--gold,#d4af54);}
.lk-copy.done{color:#7fbb97;border-color:#7fbb97;}

/* The payout handle in a payroll row: a real tap target, not 11px of text to
   squint at and retype into Venmo. Sized for a thumb, copies on tap. */
.cpyh{ font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gold-2, #E8C36A); background: rgba(232,195,106,.10);
  border: 1px solid rgba(232,195,106,.28); border-radius: 7px;
  padding: 3px 8px; margin-left: 2px; cursor: pointer; line-height: 1.4;
  min-height: 26px; display: inline-flex; align-items: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  -webkit-user-select: all; user-select: all; }
.cpyh:hover{ background: rgba(232,195,106,.20); }
.cpyh:active{ transform: translateY(1px); }
.cpyh.ok{ color: var(--n-green, #2ecc71); border-color: rgba(46,204,113,.45);
  background: rgba(46,204,113,.14); }
@media (max-width: 640px){ .cpyh{ padding: 5px 10px; min-height: 30px; } }

/* The booking ref beside the handle is a link to the gig, not a copy target, so
   it is quieter than the handle and carries an arrow rather than looking like
   another thing to tap-and-paste. */
.cpyh.bk{ color: var(--muted, #8fa4b8); background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14); font-weight: 600; font-size: 11.5px;
  text-decoration: none; user-select: auto; -webkit-user-select: auto; }
.cpyh.bk:hover{ background: rgba(255,255,255,.10); color: var(--ink, #EAF2F8);
  border-color: rgba(255,255,255,.28); }
.cpyh.bk:focus-visible{ outline: 2px solid var(--gold, #C9A227); outline-offset: 2px; }

/* ============ OPEN-RATE CAMPAIGNS ============================================
   The creator prices the deliverables instead of accepting a rate. Lives inside
   the apply modal, so it borrows the modal's ground and only paints what it
   needs to. ------------------------------------------------------------- */
.qwrap{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.qhead .qh1{font-weight:700;font-size:14px;}
.qhead .qh2{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5;}
.qcols{display:grid;grid-template-columns:1fr 106px 82px;gap:9px;margin-top:12px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.qcols span:not(:first-child){text-align:center;}
.qrow{display:grid;grid-template-columns:1fr 106px 82px;gap:9px;align-items:center;
  padding:10px 0;border-top:1px solid rgba(255,255,255,.07);}
.qrow.notrade{grid-template-columns:1fr 106px;}
.qcols:has(+ #qrows .qrow.notrade){grid-template-columns:1fr 106px;}
.qrow .qn{font-weight:600;font-size:13.5px;}
.qrow .qhint{font-size:11.5px;color:var(--muted);margin-top:1px;}
.qmoney{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:0 10px;margin:0;}
.qmoney span{color:var(--muted);font-size:13px;flex:none;}
.qmoney input{background:none;border:0;color:var(--ink);font:inherit;font-size:14px;
  padding:9px 0;width:100%;min-width:0;font-variant-numeric:tabular-nums;}
.qmoney input:focus{outline:none;}
.qmoney:focus-within{outline:2px solid rgba(201,150,44,.55);outline-offset:-1px;}
.qmoney.off{opacity:.35;}
.qmoney.off input{pointer-events:none;}
.qtbtn{font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:9px 0;width:100%;
  border-radius:9px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--muted);}
.qtbtn[aria-pressed="true"]{background:rgba(95,176,127,.16);border-color:rgba(95,176,127,.5);color:#5fb07f;}
.qtbtn:focus-visible{outline:2px solid var(--gold-2,#E8C36A);outline-offset:2px;}
.qtrade{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);}
.qchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.qchip{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:7px 13px;
  border-radius:20px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--ink-soft,#C3D4E0);}
.qchip[aria-pressed="true"]{background:rgba(95,176,127,.16);border-color:rgba(95,176,127,.5);color:#5fb07f;}
.qchip:focus-visible{outline:2px solid var(--gold-2,#E8C36A);outline-offset:2px;}
.qtot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:13px;padding-top:12px;border-top:1px solid var(--line);}
.qtot span{font-size:13px;color:var(--muted);}
.qtot b{font-size:22px;color:var(--gold-2,#E8C36A);font-variant-numeric:tabular-nums;}
.qtradeline{font-size:12.5px;color:#5fb07f;margin-top:5px;}
@media(max-width:520px){
  .qcols,.qrow{grid-template-columns:1fr 92px 74px;}
  .qrow.notrade{grid-template-columns:1fr 92px;}
  .qrow .qhint{display:none;}
}

/* The audience block on a campaign application: platform, handle, count. Three
   columns on a laptop, and the handle wraps to its own line on a phone rather
   than shrinking to a box nobody can type a username into. */
.audrow{display:grid;grid-template-columns:78px 1fr 116px;gap:9px;align-items:center;
  padding:9px 0;border-top:1px solid rgba(255,255,255,.07);}
.audrow:first-child{border-top:0;}
.audrow .an{font-weight:600;font-size:13px;color:var(--muted);}
/* The agent-side add form lives inside .manual-form, whose `label{display:block}`
   outranks the plain .ah/.af selectors and folded the @ and the unit onto their
   own lines. Same component, so it gets the same layout wherever it is used. */
.manual-form .ah,.manual-form .af{display:flex;align-items:center;gap:5px;margin:0;}
.manual-form .ah input,.manual-form .af input{width:100%;padding:9px 0;border:0;background:none;}
.ah,.af{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:0 10px;margin:0;min-width:0;}
.ah span,.af span{color:var(--muted);font-size:12px;flex:none;}
.ah input,.af input{background:none;border:0;color:var(--ink);font:inherit;font-size:13.5px;
  padding:9px 0;width:100%;min-width:0;}
.af input{font-variant-numeric:tabular-nums;text-align:right;}
.ah input:focus,.af input:focus{outline:none;}
.ah:focus-within,.af:focus-within{outline:2px solid rgba(201,150,44,.55);outline-offset:-1px;}
@media(max-width:520px){
  .audrow{grid-template-columns:1fr 108px;grid-template-areas:"n n" "h f";row-gap:6px;}
  .audrow .an{grid-area:n;} .ah{grid-area:h;} .af{grid-area:f;}
}

/* Who goes on the client link. A campaign had no shortlist, so the showcase was
   sending everyone who quoted; this is the switch that decides. */
.cmpshort{margin-top:10px;padding:9px 12px;border-radius:9px;font-size:12.5px;
  border:1px solid rgba(217,128,128,.45);background:rgba(217,128,128,.10);color:var(--ink);}
.cmpshort.ok{border-color:rgba(95,176,127,.45);background:rgba(95,176,127,.10);}
.qshort{display:flex;align-items:center;gap:8px;margin:2px 0 9px;padding-bottom:9px;
  border-bottom:1px solid var(--line);}
.qshort .lab{font-size:12.5px;font-weight:600;}

/* The agent's side: what each applicant priced, and what it bills at. */
.qsum{border:1px solid var(--line);border-radius:11px;padding:12px;margin-top:10px;
  background:rgba(255,255,255,.015);}
.qsum .ql{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0;
  border-top:1px solid rgba(255,255,255,.07);}
.qsum .ql:first-of-type{border-top:0;}
.qsum .ql b{font-variant-numeric:tabular-nums;white-space:nowrap;}
.qsum .qbill{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;}
.qsum .qbill b{font-size:16px;color:var(--gold-2,#E8C36A);font-variant-numeric:tabular-nums;}
.qtag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;
  background:rgba(95,176,127,.18);color:#5fb07f;border-radius:20px;padding:2px 8px;}
.qtradebadge{background:rgba(95,176,127,.18);color:#5fb07f;border-radius:6px;
  padding:1px 7px;font-size:11px;font-weight:700;}

/* A line we are doing but have not priced. Amber, because it is an open loop
   for the agent rather than a settled fact like Trade. */
.qtradebadge.tbd{background:var(--amber-soft);color:var(--amber);}
/* The links fold on the agent card. Closed by default: five rows of link is a
   lot of vertical space for something you copy once a month. */
.abc-toggle{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;
  padding:2px 0 4px;cursor:pointer;font-family:var(--body);font-size:12.5px;font-weight:700;
  color:var(--ink-soft);}
.abc-toggle:hover{color:var(--ink);}
.abc-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px;}
.abc-toggle .n{font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:500;}
.abc-toggle .chev{margin-left:auto;color:var(--muted);font-size:11px;transition:transform .15s;}
.abc-toggle.on .chev{transform:rotate(90deg);}
.abc-links{display:flex;flex-direction:column;gap:9px;margin-top:8px;}
/* display:flex beats the browser's own [hidden]{display:none}, so the fold has
   to say so itself. This is why the panel rendered open on its first ship. */
.abc-links[hidden]{display:none;}

/* ---- socials on an influencer quote ---------------------------------------
   A follower count is the context that makes a price mean anything, so it sits
   on the quote card rather than in the talent record. One pill per platform,
   handle links out, count in the portal's own numerals. */
.qsocs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  margin:10px 0 11px;padding-bottom:11px;border-bottom:1px solid var(--line);}
.qsoc{display:inline-flex;align-items:baseline;gap:6px;padding:5px 10px;border-radius:20px;
  border:1px solid var(--line);background:var(--mist);font-size:12px;white-space:nowrap;}
.qsoc a{color:var(--sc,var(--sky));text-decoration:none;font-weight:600;}
.qsoc a:hover{text-decoration:underline;}
.qsoc .nohandle{color:var(--muted);font-style:italic;}
.qsoc b{font-family:var(--display);font-weight:var(--dfw);font-size:14px;
  font-variant-numeric:tabular-nums;color:var(--ink);}
.qsoc i{font-style:normal;font-size:10.5px;color:var(--muted);}
.qsrc{font-size:10.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;
  font-family:var(--mono);}
.qnosoc{font-size:12.5px;color:var(--muted);margin:9px 0 11px;padding-bottom:11px;
  border-bottom:1px solid var(--line);}

/* ---- campaign pricing controls (agent side) -------------------------------
   A dropdown rather than a slider: twenty creators on a campaign means twenty
   of these, and a dropdown is one tap and an exact number where a slider is a
   drag you have to land. */
.cmpdef{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid var(--gold);background:var(--gold-soft);border-radius:var(--r);
  padding:14px 16px;margin:14px 0 4px;}
.cmpdef-l{font-weight:700;font-size:14px;}
.cmpdef-s{font-size:12.5px;color:var(--muted);margin-top:2px;}
.pctwrap{position:relative;display:inline-block;}
.pctwrap::after{content:"\25BE";position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:11px;pointer-events:none;}
.pctsel{font-family:var(--body);font-weight:700;font-size:13.5px;padding:8px 32px 8px 12px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--ink);
  cursor:pointer;appearance:none;font-variant-numeric:tabular-nums;min-width:124px;}
.pctsel:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
/* An overridden creator says so, so you can always see who is on a special
   number and who is simply inheriting. */
.pctsel.over{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-soft);}
.qmarg{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 11px;
  padding-bottom:11px;border-bottom:1px solid var(--line);}
.qmarg > span:first-child{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700;}
.qreset{font-family:var(--body);font-size:11.5px;font-weight:700;background:none;border:0;
  color:var(--gold-deep);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px 2px;}
.qreset:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;}
/* What the client said, on the quote it was said about. */
.qchoice{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:800;letter-spacing:.05em;
  border-radius:20px;padding:2px 9px;color:var(--cc,var(--muted));
  box-shadow:inset 0 0 0 999px rgba(255,255,255,.88);vertical-align:1px;}
html[data-theme="dark"] .qchoice{box-shadow:inset 0 0 0 999px rgba(11,31,43,.86);}

/* The client's answer, as three numbers. Same shape as the per-creator maths on
   the quote cards, so the summary reads as a total of the thing above it. */
.maths3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;}
@media(max-width:560px){ .maths3{grid-template-columns:1fr;} }
.maths3 > div{background:var(--mist);padding:12px 14px;}
.maths3 .k3{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);}
.maths3 .v3{font-family:var(--display);font-weight:var(--dfw);font-size:22px;margin-top:4px;
  font-variant-numeric:tabular-nums;letter-spacing:var(--dtr);}

/* ---- Foldable card ----
   Used on the campaign tab, where four full-height sections stacked meant the
   quotes you work in every day sat below a screenful of settings you set once. */
.card.fold{padding:0;overflow:hidden;}
.foldh{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  background:none;border:0;padding:15px 17px;cursor:pointer;color:inherit;font:inherit;
  border-radius:12px;}
.foldh:hover{background:rgba(255,255,255,.03);}
.foldh:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.foldx{flex:none;color:var(--gold);font-size:17px;line-height:1.35;
  transition:transform .16s ease;display:inline-block;}
.card.fold.on .foldx{transform:rotate(90deg);}
.foldt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.folds{font-size:12px;color:var(--muted);}
.foldb{padding:0 17px 17px;}

/* A per-creator switch that a campaign-wide one has overridden. Still readable,
   plainly not in charge. */
.qshort.muted{opacity:.55;}
.qshort.muted .rt{cursor:default;}

/* ---- The photo the client sees on a campaign showcase ----
   Shown at the same aspect and crop as the client card, so what an agent looks
   at here is what the brand looks at there. */
.shotbtn{flex:none;width:52px;height:66px;border-radius:9px;overflow:hidden;position:relative;
  border:1px solid var(--line);background-color:#0e3b55;background-size:cover;cursor:pointer;
  color:#cfe0ea;font-family:var(--display);font-size:20px;font-weight:700;padding:0;}
.shotbtn:hover{border-color:var(--gold);}
.shotbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.shotedit{position:absolute;left:0;right:0;bottom:0;font-family:var(--body);font-size:8.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 0;
  background:rgba(0,0,0,.62);color:#fff;opacity:0;transition:opacity .13s;}
.shotbtn:hover .shotedit,.shotbtn:focus-visible .shotedit{opacity:1;}
.shotprev{width:104px;height:132px;border-radius:11px;overflow:hidden;border:1px solid var(--line);
  background:#0e3b55;}
.shotprev img{width:100%;height:100%;object-fit:cover;display:block;}
.shotpick{margin-top:12px;}

/* ---- Reach on a roster picker card ----
   The numbers a creator reported for themselves, on the card you choose from.
   Deliberately quiet: they inform the choice, they are not the headline. */
.rsocs{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;}
.rsocs.empty{font-size:9.5px;color:var(--muted);opacity:.7;font-style:italic;}
.rsoc{display:inline-flex;align-items:baseline;gap:3px;font-size:9px;font-weight:700;
  letter-spacing:.05em;color:var(--muted);background:rgba(255,255,255,.05);
  border-radius:5px;padding:2px 5px;}
.rsoc b{font-size:10.5px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:0;}
.rreach{position:absolute;bottom:6px;right:6px;background:rgba(4,41,61,.88);color:#E8C36A;
  font-size:9px;font-weight:800;letter-spacing:.04em;padding:3px 6px;border-radius:5px;
  font-variant-numeric:tabular-nums;}

/* A rate we filled in from an older quote of theirs. Says where it came from,
   because an old number that looks agreed is worse than an empty box. */
.prefill{font-size:11.5px;color:var(--amber);background:var(--amber-soft);
  border:1px solid var(--gold-line);border-radius:8px;padding:7px 10px;margin-bottom:10px;}

/* Who is currently selected in the campaign roster picker. Each one removable,
   because a mis-click should cost one click, not the whole selection. */
.pickstrip{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px;}
.pchip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  background:var(--gold-soft);color:var(--gold-deep);border:1px solid var(--gold-line);
  border-radius:20px;padding:4px 10px;cursor:pointer;}
.pchip b{font-weight:700;opacity:.65;}
.pchip:hover{border-color:var(--gold);}
.pchip:hover b{opacity:1;}

/* ---- Campaign quotes: shortlisted first, one line each ----
   Was a flat list of full-height cards in price order, so six people going to
   the client sat interleaved with the ones who are not and finding anybody
   meant scrolling past everybody. */
.qsec{display:flex;align-items:baseline;gap:9px;margin:20px 0 2px;padding-bottom:7px;
  border-bottom:1px solid var(--line);}
.qsec:first-child{margin-top:6px;}
.qsec .s1{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;}
.qsec .s2{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--gold-2);
  background:var(--gold-soft);border-radius:20px;padding:1px 8px;}
.qsec .s3{font-size:11.5px;color:var(--muted);margin-left:auto;}

.qsum.on{border-color:rgba(232,195,106,.4);}
.qhead{display:grid;grid-template-columns:38px 1fr auto auto 26px;gap:11px;align-items:center;}
@media(max-width:640px){
  .qhead{grid-template-columns:38px 1fr auto 26px;row-gap:8px;}
  .qhead .qmoney{grid-column:2/-1;text-align:left;}
}
.qsum .shotbtn{width:38px;height:48px;font-size:15px;border-radius:8px;}
.qsum .shotedit{display:none;}
.qwho{min-width:0;}
.qn1{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:14px;}
.qn2{font-size:11.5px;color:var(--muted);margin-top:1px;}
.qn2 b{color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.qmoney{text-align:right;white-space:nowrap;}
.qmoney b{display:block;font-size:15px;color:var(--gold-2);font-variant-numeric:tabular-nums;}
.qmoney span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;}
.qtog{flex:none;}
.qexp{width:26px;height:26px;border:1px solid var(--line);border-radius:8px;background:none;
  color:var(--gold-2);font-size:15px;line-height:1;cursor:pointer;padding:0;
  transition:transform .16s,border-color .15s;}
.qexp:hover{border-color:var(--gold);}
.qexp[aria-expanded="true"]{transform:rotate(90deg);}
.qbody{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}

/* The side-by-side table is for comparing, not for scrolling past. Forty rows
   of it between an agent and the list they work in is the wrong default. */
.qcmp{margin-top:12px;border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.015);}
.qcmp summary{cursor:pointer;padding:10px 13px;font-size:12.5px;font-weight:600;
  color:var(--ink-soft);list-style:none;}
.qcmp summary::-webkit-details-marker{display:none;}
.qcmp summary::before{content:"\203A";color:var(--gold-2);font-size:15px;margin-right:9px;
  display:inline-block;transition:transform .16s;}
.qcmp[open] summary::before{transform:rotate(90deg);}
.qcmp summary:hover{color:var(--ink);}
.qcmp > div{padding:0 13px 13px;}

/* ---- Editable rate rows on a campaign quote ---- */
.qrates{margin-top:10px;}
.qrl{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 0;border-top:1px solid rgba(255,255,255,.07);}
.qrl:first-of-type{border-top:0;}
.qrl > span{font-size:13px;color:var(--ink-soft);}
.qrin{width:104px;flex:none;text-align:right;padding:6px 9px;border-radius:8px;
  border:1px solid var(--line);background:rgba(0,0,0,.22);color:var(--ink);
  font:inherit;font-size:13px;font-variant-numeric:tabular-nums;}
.qrin:focus{outline:2px solid rgba(201,150,44,.55);outline-offset:-1px;}
.qrsave{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;}
.qrhint{font-size:11.5px;color:var(--muted);}

/* ---- What the shortlist reaches ----
   The number the brand is buying, split by platform because the same total
   means something different concentrated on one platform than spread over four. */
.reachbox{border:1px solid var(--gold-line);border-radius:12px;background:var(--paper);
  padding:14px 16px;margin-top:12px;}
.rb-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.rb-k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);}
.rb-v{font-family:var(--display);font-weight:var(--dfw,700);font-size:30px;line-height:1;
  color:var(--gold-2);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:3px;}
.rb-s{font-size:11.5px;color:var(--muted);}
.rb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px;margin-top:13px;}
.rb-c{border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.02);
  padding:8px 10px;}
.rb-n{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.1;
  font-variant-numeric:tabular-nums;}
.rb-p{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-top:3px;}
.rb-w{font-size:10.5px;color:var(--dim,var(--muted));margin-top:2px;}