/* Work Remote Job.

   People come here to check whether they have been paid. That makes clarity
   the whole design: numbers legible, states unmistakable, nothing decorative
   sitting between someone and their balance.
*/

* { box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
  --paper:     #F7F8F7;
  --card:      #FFFFFF;
  --sunk:      #F0F2F1;
  --ink:       #14181C;
  --ink-2:     #3D454D;
  --muted:     #656E76;
  --line:      #E1E5E4;
  --line-soft: #EDF0EF;

  /* Taken from the logo: a vivid azure and a dark neutral grey.

     --brand is the identity and every action - buttons, links, whatever is
     selected. --green is kept, but only for meaning: money arriving, work
     approved, a state that is good. Brand and status are separate colours
     doing separate jobs, so a green tick never reads as "this is the button"
     and a blue button never reads as "this succeeded".

     --brand is a shade deeper than the logo's own blue so that white text on
     it clears the contrast floor; --brand-bright is the logo colour itself,
     used where nothing sits on top of it. */
  /* Sampled from the logo file itself: #0084EC and #525252.

     --brand-bright is that blue exactly, used for fills and the mark.
     --brand is the same hue taken darker, because white text on the logo's own
     blue comes to 3.5:1 and buttons and links need 4.5. Two shades of one
     colour, not a different colour. */
  --brand:        #0067BE;
  --brand-dk:     #00539A;
  --brand-bg:     #E5F1FD;
  --brand-bright: #0084EC;

  --navy:      #3B3E42;      /* the logo's dark grey: headings and bands */
  /* The footer's own ground. Deliberately not --navy: that one is a text
     colour and inverts with the theme, which turned the footer light. */
  --foot:      #2B2E33;
  --foot-line: rgba(255,255,255,.10);
  /* Panels that carry white text: the sign-in side, the call-to-action band,
     the drawer, the admin's todo strip. They need a ground that is dark in
     BOTH themes - using --navy meant they turned light grey in dark mode and
     put white text on a light block. */
  --panel:     #3B3E42;
  --navy-dk:   #292C2F;
  --navy-bg:   #EEF1F4;
  --green:     #157A3A;      /* status only: money in, approved, paid */
  --green-dk:  #10632E;
  --green-bg:  #E6F5EC;
  --band:      #0B6FD8;      /* the mid-blue feature bands */
  --band-2:    #0A7CF0;
  --sky:       #EEF5FD;      /* the pale blue section ground */
  --violet:    #6C63FF;      /* second series on the admin charts */
  --amber:     #96650C;
  --amber-bg:  #FBF2E0;
  --red:       #B3392E;
  --red-bg:    #FBECEA;
  --blue:      #1E3A5F;

  /* Hind Siliguri sits after the Latin faces rather than instead of them:
     the browser takes each character from the first font that actually has a
     glyph for it, so English keeps Figtree and Bangla gets a face designed
     for it. Without this, Bangla falls back to whatever the device happens to
     own - Nirmala on Windows, something else on an Android phone - and the
     same sentence looks different to every person reading it. */
  --ui:   "Figtree", "Hind Siliguri", system-ui, -apple-system, sans-serif;
  --head: "Archivo", "Figtree", "Hind Siliguri", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #0F1316;
    --card:      #171C21;
    --sunk:      #1D2429;
    --ink:       #E7EBEE;
    --ink-2:     #BAC3CA;
    --muted:     #8B959D;
    --line:      #2A333A;
    --line-soft: #222A30;
    --brand:        #5CA8FF;
    --brand-dk:     #86C0FF;
    --brand-bg:     #0F2036;
    --brand-bright: #4B9BFF;

    --navy:      #A8B3BE;
    /* Darker than the page, so the footer still reads as the end of it. */
    --foot:      #0A0D10;
    --foot-line: rgba(255,255,255,.07);
    /* Deep blue rather than grey: on a dark page a neutral panel disappears
       into the card behind it, and the blue is the brand's own. */
    --panel:     #1B3A5E;
    --navy-dk:   #C2CCD5;
    --navy-bg:   #1B2026;
    --green:     #4CC97A;
    --green-dk:  #6FD895;
    --green-bg:  #112417;
    --band:      #12395F;
    --band-2:    #17497A;
    --sky:       #131A28;
    --violet:    #8F88FF;
    --amber:     #D8A44E;
    --amber-bg:  #2A2113;
    --red:       #E38176;
    --red-bg:    #2C1917;
    --blue:      #7FA6CE;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--head); margin: 0; line-height: 1.22; letter-spacing: -.01em; }
h1 { font-size: 27px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
h3 { font-size: 15.5px; font-weight: 600; margin: 18px 0 6px; }
p { margin: 0 0 12px; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.link { color: var(--blue); font-weight: 500; }
.muted { color: var(--muted); }
.dim { color: var(--muted); font-size: 13px; }
.fine { color: var(--muted); font-size: 12.5px; margin: 12px 0 0; }
.lede { font-size: 17px; color: var(--ink-2); max-width: 56ch; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.pos { color: var(--green); }
.neg { color: var(--ink-2); }
.bad { color: var(--red); }
em { font-style: normal; color: var(--muted); font-weight: 400; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 22px; }
.wrap-wide { max-width: 1240px; }
main.wrap { padding-top: 26px; padding-bottom: 70px; }
.narrow { max-width: 420px; margin: 0 auto; }
.narrow-wide { max-width: 660px; }

/* ------------------------------------------------------------------ header */
.top { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.top-inner { display: flex; align-items: center; gap: 22px; min-height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; color: inherit; }
.brand:hover { text-decoration: none; }
/* The mark draws its own shape now, so it needs no disc behind it. The colour
   comes from currentColor, which is why the footer can simply set white. */
.brand-mark {
  width: 34px; height: 34px; color: var(--brand-bright);
  display: grid; place-items: center; flex: none;
}
.brand-mark svg { display: block; }

/* The real lockup, sized by height so its own proportions decide the width. */
.brand-logo { display: block; height: 30px; width: auto; flex: none; }

/* The logo on a dark ground.

   One artwork is used everywhere - the supplied one - so on a dark header it
   needs something to sit on rather than being recoloured. A white plate is how
   a printed logo is placed on a dark page: the blue stays blue, the grey stays
   grey, and nothing about the mark is altered.

   Padding and radius are small on purpose. Enough to read as a deliberate
   plate rather than a rectangle somebody forgot to make transparent. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand > .brand-logo {
    background: #fff; padding: 5px 9px; border-radius: 9px;
  }
}
:root[data-theme="dark"] .brand > .brand-logo {
  background: #fff; padding: 5px 9px; border-radius: 9px;
}
.foot-mark .brand-logo { height: 32px; }
@media (max-width: 900px) { .brand-logo { height: 26px; } }
.brand-mark-img { display: block; width: 34px; height: 34px; object-fit: contain; flex: none; }

/* Two-tone, the way the logo is: the name in the dark neutral, the rest in
   the blue. */
.brand-name {
  font-family: var(--head); font-weight: 700; font-size: 16px;
  white-space: nowrap; color: var(--ink); letter-spacing: -.01em;
}
.brand-name b { font-weight: 700; color: var(--brand); }

/* Two groups on one line, never wrapping. The links may shrink and, at the
   very narrowest desktop widths, scroll sideways within their own group -
   which keeps the header one tidy row instead of spilling the buttons onto a
   second line at a different height. */
.nav { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; flex-wrap: nowrap; }
.nav-links {
  display: flex; align-items: center; gap: 2px;
  flex: 1 1 auto; min-width: 0; overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }

.nav a { color: var(--brand); padding: 6px 10px; border-radius: 6px; font-weight: 500; font-size: 14.5px; white-space: nowrap; }
.nav a:hover { background: var(--brand-bg); text-decoration: none; }
.nav a.on { color: var(--brand); }
/* .nav a is more specific than .btn, so without these the buttons in the
   header lose their own colours and a green button gets dark grey text. */
.nav a.btn { color: #fff; padding: 9px 18px; }
.nav a.btn:hover { background: var(--brand-dk); }
.nav a.btn-ghost { color: var(--ink-2); }
.nav a.btn-ghost:hover { background: var(--sunk); }
.nav a.who-link { color: var(--muted); font-size: 13.5px; }
.nav a.who-link:hover { background: var(--sunk); color: var(--ink); }

/* Below this the links are tight enough to need less room around them, but
   still comfortably tappable. */
@media (max-width: 1180px) {
  .nav { gap: 10px; }
  .nav a { padding: 6px 7px; font-size: 13.8px; }
  .nav a.btn { padding: 8px 14px; font-size: 13.5px; }
}
.who { color: var(--muted); font-size: 13.5px; white-space: nowrap; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--brand); color: #fff;
  border: 1px solid var(--brand); border-radius: 100px;
  padding: 10px 22px; font: inherit; font-weight: 600; font-size: 14.5px;
  cursor: pointer; text-align: center;
}
.btn:hover { background: var(--brand-dk); border-color: var(--brand-dk); text-decoration: none; color: #fff; }
.btn-lg { padding: 14px 32px; font-size: 16px; }
.btn-sm { padding: 7px 15px; font-size: 13.5px; }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { background: var(--sunk); color: var(--ink); border-color: var(--line); }
.btn-danger { background: transparent; color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.link-danger { background: none; border: none; color: var(--red); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
form.inline { display: inline-flex; gap: 6px; align-items: center; }
.drop-form { margin-top: 14px; }

/* ------------------------------------------------------------------ inputs */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], select, textarea {
  width: 100%; background: var(--card); border: 1px solid var(--line);
  color: var(--ink); border-radius: 7px; padding: 9px 12px;
  font-family: inherit; font-size: 15px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,58,95,.14);
}
::placeholder { color: var(--muted); opacity: .75; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.hint { font-size: 12.5px; color: var(--muted); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filters input, .filters select { width: auto; min-width: 150px; }

/* ------------------------------------------------------------------- cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.card.pad, .pad { padding: 20px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--line-soft);
}
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.section { margin: 44px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.split-page { display: grid; grid-template-columns: 1fr 320px; gap: 26px; align-items: start; }
.sticky { position: sticky; top: 82px; }
.back { display: inline-block; color: var(--muted); font-size: 13.5px; margin-bottom: 8px; }
.prose { white-space: normal; line-height: 1.7; }
.step { display: inline-block; font-family: var(--mono); font-size: 12px; color: var(--navy);
  border: 1.5px solid var(--navy); width: 24px; height: 24px; border-radius: 50%;
  text-align: center; line-height: 21px; margin-bottom: 8px; }

/* -------------------------------------------------------------------- hero */
.hero { display: grid; grid-template-columns: 1fr 300px; gap: 34px; align-items: center; padding: 30px 0 10px; }
.hero h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 12px; text-wrap: balance; }
.hero .btn-row { margin-top: 20px; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 13px 15px; }
.stat b { display: block; font-family: var(--head); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat span { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; margin-top: 3px; }
.stat.ok b { color: var(--green); }
.stat.warn b { color: var(--amber); }
.stat.bad b { color: var(--red); }

/* -------------------------------------------------------------------- jobs */
.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.job-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; color: inherit; display: flex; flex-direction: column; gap: 6px;
}
.job-card:hover { border-color: var(--navy); text-decoration: none; }
.job-top { display: flex; align-items: center; justify-content: space-between; }
.tag { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rate { font-family: var(--head); font-size: 17px; color: var(--green); }
.job-card h3 { margin: 2px 0 0; font-size: 16px; }
.job-foot { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: auto; padding-top: 8px; }

/* ------------------------------------------------- job cards on a phone

   The desktop card was 166px tall on a 390px screen, of which about 100px was
   content and the rest padding and gaps - so under five fitted on a screen and
   choosing a task meant scrolling past the same amount of white space over and
   over.

   Tightened rather than stripped. What goes is the description, which was
   clipped to one line and rarely said anything the title had not; what stays
   is every fact somebody picks a task on - the category, the pay, how many
   slots are left and how long it takes. */
@media (max-width: 700px) {
  .job-grid { grid-template-columns: 1fr; gap: 10px; }
  .job-card { padding: 11px 13px; gap: 2px; border-radius: 9px; }
  .job-card h3 { font-size: 14.5px; line-height: 1.35; margin: 0; }
  .job-card > p { display: none; }
  .tag { font-size: 10.5px; letter-spacing: .07em; }
  .rate { font-size: 15.5px; }
  .job-foot { font-size: 11.5px; padding-top: 5px; }
}
.pay { text-align: center; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 14px; }
.pay b { display: block; font-family: var(--head); font-size: 30px; color: var(--green); }
.pay span { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
tr.flagged { background: var(--amber-bg); }
.flag { font-size: 11px; color: var(--amber); border: 1px solid var(--amber); border-radius: 20px; padding: 1px 7px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 12px 0; }
.kv dt { color: var(--muted); font-size: 13.5px; }
.kv dd { margin: 0; }

/* ------------------------------------------------------------------- pills */
.pill {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px; background: var(--sunk); color: var(--ink-2);
  text-transform: lowercase; white-space: nowrap;
}
.s-approved, .s-active, .s-paid, .s-upheld { background: var(--green-bg); color: var(--green); }
.s-submitted, .s-pending, .s-open, .s-paused { background: var(--amber-bg); color: var(--amber); }
.s-rejected, .s-cancelled, .s-suspended, .s-banned { background: var(--red-bg); color: var(--red); }
.s-started { background: var(--green-bg); color: var(--green); }

/* ------------------------------------------------------------------ alerts */
.alert { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 14.5px; border: 1px solid; }
.alert-info { background: var(--sunk); border-color: var(--line); }
.alert-ok   { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.alert-warn { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }
.alert-stop { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.alert a { color: inherit; text-decoration: underline; }

/* ------------------------------------------------------------------- misc */
.empty { border: 1px dashed var(--line); border-radius: 10px; padding: 44px 20px; text-align: center; color: var(--muted); }
.role-switch { display: flex; gap: 6px; background: var(--sunk); padding: 4px; border-radius: 9px; margin-bottom: 16px; }
.role-switch a { flex: 1; text-align: center; padding: 8px; border-radius: 7px; color: var(--ink-2); font-weight: 500; }
.role-switch a:hover { text-decoration: none; }
.role-switch a.on { background: var(--card); color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.steps { padding-left: 20px; margin: 0; }
.steps li { margin-bottom: 8px; }

.timer {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--green-bg); border: 1px solid var(--green); color: var(--green);
  border-radius: 9px; padding: 12px 16px; margin-bottom: 16px; font-size: 14.5px;
}
.timer.over { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.timer b { font-variant-numeric: tabular-nums; }

.proof-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.proof-gallery .proof-img { margin-top: 0; max-width: 220px; max-height: 220px; object-fit: cover; }
.proof-img { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; margin-top: 12px; display: block; }
.review-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-top: 16px; }
.review-actions form { display: flex; gap: 8px; align-items: center; }
.reject-form input { min-width: 220px; }
.report-form { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.report-form input { flex: 1; min-width: 200px; }
.cost { background: var(--sunk); border-radius: 8px; padding: 12px 15px; margin-bottom: 16px; font-size: 15px; }
.cost b { font-family: var(--head); color: var(--green); }
.big-balance { font-family: var(--head); font-size: 30px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }

.balance-chip {
  position: fixed; right: 18px; bottom: 18px; z-index: 20;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 8px 16px; box-shadow: 0 6px 20px rgba(0,0,0,.10);
  display: flex; gap: 9px; align-items: baseline; font-size: 13px;
}
.balance-chip span { color: var(--muted); }
.balance-chip b { font-family: var(--head); color: var(--green); font-variant-numeric: tabular-nums; }

.foot { border-top: 1px solid var(--line); background: var(--card); margin-top: 40px; }
.foot-inner { display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.foot-links { display: flex; gap: 16px; }

@media (max-width: 900px) {
  .hero, .split-page, .two, .three, .row-2 { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .sticky { position: static; }
  .top-inner { min-height: 56px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .nav { order: 3; width: 100%; }
  .balance-chip { display: none; }
}
@media (max-width: 560px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------------------------------------------------------------- sign in */
.signin { text-align: center; }
.signin h1 { margin-bottom: 8px; }
.signin .muted { margin-bottom: 22px; }
.google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 13px 20px; font-weight: 600; font-size: 15.5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.google-btn:hover { background: var(--sunk); text-decoration: none; border-color: var(--muted); }
.signin .why { text-align: left; margin-top: 26px; }
.signin .why p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- pick a role */
.pick-role { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.pick {
  text-align: left; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 20px; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: 6px;
}
.pick:hover { border-color: var(--navy); }
.pick b { font-family: var(--head); font-size: 17px; }
.pick span { color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------- notices */
.alert.notice { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; text-align: left; }
.notice-body { margin: 6px 0 8px; font-size: 14px; line-height: 1.6; }
.alert.notice form { flex: none; }

/* --------------------------------------------------------------- support */
.tg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tg {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; color: inherit;
}
.tg:hover { border-color: var(--blue); text-decoration: none; }
.tg b { font-family: var(--head); font-size: 15px; }
.tg span { color: var(--muted); font-size: 13px; }

.chat-body {
  padding: 18px 20px; display: flex; flex-direction: column; gap: 14px;
  max-height: 60vh; overflow-y: auto;
}
.msg { max-width: 82%; }
.msg.mine { align-self: flex-end; }
.msg.staff { align-self: flex-start; }
.msg .who { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.msg.mine .who { text-align: right; }
.msg .bubble {
  background: var(--sunk); border-radius: 12px; padding: 10px 14px;
  font-size: 14.5px; line-height: 1.6; white-space: normal;
}
.msg.staff .bubble { background: var(--brand-bg); color: var(--ink); }
.chat-form { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line-soft); align-items: flex-end; }
.chat-form textarea { flex: 1; }

@media (max-width: 700px) {
  .pick-role { grid-template-columns: 1fr; }
  .alert.notice { flex-direction: column; }
}

/* ------------------------------------------------------------- deposits */
.pay-option {
  border: 1px solid var(--line); border-radius: 9px;
  padding: 14px 16px; margin-bottom: 12px; background: var(--paper);
}
.pay-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pay-head b { font-family: var(--head); font-size: 15px; }
.pay-form { display: flex; gap: 9px; align-items: center; }
.pay-form input { flex: 1; }
.manual { margin-top: 8px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.manual summary { cursor: pointer; font-size: 14px; color: var(--muted); font-weight: 500; }
.manual summary:hover { color: var(--ink); }
.manual > *:not(summary) { margin-top: 12px; }

.who-link { color: var(--muted) !important; font-size: 13.5px; white-space: nowrap; }
.who-link:hover { color: var(--ink) !important; }
ul.tight { margin: 6px 0 0; padding-left: 18px; }
ul.tight li { margin-bottom: 2px; }

.brand-mark-img { border-radius: 7px; display: block; }
.brand-mark svg { display: block; }

/* ==================================================================== home */
.eyebrow {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brand);
  margin-bottom: 12px;
}
.section-head.center { text-align: center; display: block; margin-bottom: 22px; }
.section-head.center h2 { font-size: 24px; }
.section-head.center p { margin: 6px 0 0; }

.hero { align-items: stretch; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; }
.hero .fine { margin-top: 14px; }

/* The live panel. Numbers are counted, never typed, so they are allowed to
   look confident. */
.hero-panel {
  background: var(--panel); color: #fff; border-radius: 14px;
  padding: 22px 24px; display: flex; flex-direction: column; gap: 16px;
}
.hero-panel-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
.live {
  width: 8px; height: 8px; border-radius: 50%; background: #4FD1C5;
  box-shadow: 0 0 0 0 rgba(79,209,197,.7); animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(79,209,197,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(79,209,197,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,209,197,0); }
}
.hero-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.fig b {
  display: block; font-family: var(--head); font-size: 26px; font-weight: 700;
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.fig span { font-size: 12px; color: rgba(255,255,255,.6); }
.hero-today {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 13px;
  font-size: 13.5px; color: #6FD3E0;
}

/* ------------------------------------------------------------- reviews */
.review-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 15px; }
.quote {
  margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 11px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.quote blockquote {
  margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2);
}
.quote blockquote::before { content: '\201C'; color: var(--brand); font-size: 26px; line-height: 0; vertical-align: -6px; margin-right: 2px; }
.quote figcaption { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.avatar-initial {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--navy-bg); color: var(--navy);
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.quote figcaption b { display: block; font-size: 14px; }
.quote figcaption .dim { display: block; font-size: 12.5px; }
.earned {
  margin-left: auto; font-family: var(--mono); font-size: 12.5px;
  color: var(--green); background: var(--green-bg);
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}

.cta-band {
  background: var(--panel); color: #fff; border-radius: 14px;
  padding: 30px 34px; margin: 44px 0 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: 4px; }
.cta-band p { margin: 0; color: rgba(255,255,255,.72); }
.cta-band .btn { background: #fff; color: var(--panel); border-color: #fff; }
.cta-band .btn:hover { background: #E7EDF5; color: var(--panel); border-color: #E7EDF5; }

/* ================================================================ sign in */
.signin-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--card); margin-top: 10px;
}
.signin-left { padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; }
.signin-left h1 { font-size: 26px; margin-bottom: 8px; }
.signin-right {
  background: var(--panel); color: #fff; padding: 40px 38px;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.signin-right h2 { color: #fff; font-size: 17px; }
.signin-point { display: flex; gap: 13px; align-items: flex-start; }
.signin-point .tick {
  width: 21px; height: 21px; border-radius: 50%; flex: none; margin-top: 2px;
  background: rgba(255,255,255,.13); color: #6FD3E0;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.signin-point b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.signin-point span { font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.55; }

@media (max-width: 820px) {
  .signin-split { grid-template-columns: 1fr; }
  .signin-right { order: -1; padding: 26px 24px; }
  .hero-figures { grid-template-columns: repeat(2, 1fr); }
  .cta-band { padding: 24px; }
}

.mini-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.mini-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* The caption had name, role and the earned pill competing for one line, which
   wrapped every name onto two. Give the name block the room and let the pill
   drop below when it does not fit. */
/* Name and role get the whole row; the earned pill wraps onto its own line
   underneath. Squeezing all three together truncated every name. */
.quote figcaption { flex-wrap: wrap; row-gap: 10px; }
.who-block { min-width: 0; flex: 1; }
.earned { flex-basis: 100%; margin-left: 0; text-align: center; }
.hero-panel { align-self: center; }
.hero-empty { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); }

.adjust-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; }
.adjust-form .field.wide { grid-column: 1 / -1; }
.adjust-form button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 700px) { .adjust-form { grid-template-columns: 1fr; } }

/* ============================================================ doc pages */
/* Full bleed: the band should reach both edges of the window, not stop at the
   content column. The negative margins pull it out of the centred wrap. */
.page-hero {
  background: var(--panel); color: #fff;
  margin: -26px calc(50% - 50vw) 30px;
  padding: 44px 0 38px;
}
.page-hero h1 { color: #fff; font-size: clamp(26px, 4vw, 36px); }
.page-hero .crumb { margin: 8px 0 0; font-size: 13.5px; color: rgba(255,255,255,.6); }
.page-hero .crumb a { color: rgba(255,255,255,.85); }

.doc { max-width: 720px; }
.doc h2 { font-size: 20px; margin: 36px 0 10px; }
.doc h2:first-of-type { margin-top: 4px; }
.doc p, .doc li { font-size: 15.5px; line-height: 1.72; }
.doc ul { padding-left: 20px; margin-bottom: 16px; }
.doc li { margin-bottom: 8px; }
.doc .lede { margin-bottom: 26px; }
.doc .stat-row { margin: 18px 0; }
.doc .two { margin-bottom: 20px; }

.faq { display: grid; gap: 10px; margin-bottom: 22px; }
.faq-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 9px; padding: 14px 18px;
}
.faq-item summary {
  cursor: pointer; font-weight: 600; font-size: 15.5px;
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-a { padding-top: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.7; }

.foot-links { flex-wrap: wrap; row-gap: 6px; }



/* ========================================================== referrals */
.ref-card { margin-bottom: 16px; }
.ref-link { display: flex; gap: 10px; margin: 12px 0; }
.ref-link input { font-family: var(--mono); font-size: 14px; }

/* The code itself. Four digits somebody reads off a screen and says down a
   phone, so it is set large and spaced - the one thing on the card that gets
   copied by eye rather than by button. */
.ref-code {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--sunk); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 12px 16px; margin: 14px 0;
}
.ref-code > span:first-child {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.ref-code b {
  font-size: 30px; letter-spacing: .16em; color: var(--brand); line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.ref-warn { margin-top: 14px; }
.tick-list { list-style: none; padding: 0; margin: 0 0 12px; }
.tick-list li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 14.5px; line-height: 1.6;
}
.tick-list li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 14px; height: 8px; border-left: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand); transform: rotate(-45deg);
}

/* ============================================================== feeds */
.feed-list { display: flex; flex-direction: column; }
.feed-row {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 18px; border-top: 1px solid var(--line-soft); color: inherit;
}
.feed-row:first-child { border-top: none; }
a.feed-row:hover { background: var(--sunk); text-decoration: none; }
.feed-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.feed-main b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-main .dim { font-size: 12.5px; }
.feed-main .bar { margin-top: 5px; }
.feed-side { text-align: right; flex: none; }
.feed-side b { display: block; font-family: var(--head); font-size: 15px; }
.feed-side .dim { font-size: 12px; }

/* ==================================================================== v2 home
   Full-width bands alternating white / pale blue / deep blue, the way a landing
   page reads when you scroll it quickly. */
.bleed, .boosted, .band, .services { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* One column now that the artwork is gone. The copy is the hero. */
.hero2 { padding: 34px 0 30px; }
.hero2 h1 {
  font-size: clamp(30px, 4.6vw, 50px); line-height: 1.13;
  letter-spacing: -.02em; color: var(--navy); margin-bottom: 16px;
}
.hero2-sub { font-size: 16px; color: var(--ink-2); margin-bottom: 2px; font-weight: 600; }
.hero2-line { font-size: 15px; color: var(--muted); margin-bottom: 26px; }
/* ------------------------------------------------------- the promo strip

   Under the header on every page. Swipeable, and it moves on its own.

   The banners sit side by side in one horizontal scroller with scroll-snap,
   rather than stacked with one visible at a time. That is what makes a swipe
   work: a swipe is the browser scrolling a scrollable box, so touch, a
   trackpad, a mouse drag and the keyboard all work without a line of drag
   handling. Advancing on the timer is the same scroll, asked for in code.

   The artwork is drawn on white, so the strip is white in both themes: a white
   graphic floating on a dark page reads as a mistake; a white band with the
   graphic in it reads as a band. */
.promo-strip {
  position: relative; background: #fff;
  border-bottom: 1px solid var(--line);
}
.promo-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* No scrollbar: it is a banner, not a document, and a bar under it on a
     desktop trackpad looks like a rendering fault. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.promo-track::-webkit-scrollbar { display: none; }
.promo-cell {
  flex: 0 0 100%; scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  padding: 8px clamp(10px, 3vw, 26px);
}
.promo-slide {
  display: block; width: 100%; height: auto;
  max-width: 1000px; margin: 0 auto;
}

/* Arrows: a convenience on a desktop, where there is nothing to swipe with.
   Hidden on a touch screen, where the swipe is the control and an arrow is
   just something to cover the artwork with. */
.promo-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.94);
  color: #333; font-size: 19px; line-height: 1; cursor: pointer;
  display: grid; place-content: center; padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
}
.promo-arrow:hover { background: #fff; }
.promo-arrow.prev { left: 6px; }
.promo-arrow.next { right: 6px; }
@media (hover: none) { .promo-arrow { display: none; } }

.promo-dots {
  position: absolute; left: 0; right: 0; bottom: 4px;
  display: flex; justify-content: center; gap: 5px;
}
.promo-dot {
  width: 6px; height: 6px; padding: 0; border-radius: 50%;
  border: none; background: rgba(0,0,0,.22); cursor: pointer;
  transition: background .15s, width .15s;
}
.promo-dot.on { background: var(--brand); width: 14px; border-radius: 3px; }
.promo-dot:focus-visible, .promo-arrow:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* The admin's list of banners: the picture, and what can be done to it. */
.bnr {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  gap: 16px; align-items: center;
  padding: 14px 18px; border-top: 1px solid var(--line-soft);
}
.bnr.off { opacity: .5; }
.bnr-img {
  width: 100%; height: auto; display: block; border-radius: 8px;
  border: 1px solid var(--line); background: #fff;
}
.bnr-side { display: flex; flex-direction: column; gap: 8px; }
.bnr-cap { display: flex; gap: 6px; }
.bnr-cap input {
  flex: 1; min-width: 0; padding: 7px 10px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--ink);
}
.bnr-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.bnr-acts button[disabled] { opacity: .35; cursor: default; }
.danger-text { color: var(--red); }
@media (max-width: 700px) { .bnr { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- the boost board

   Where the counters were. It carries paid placements, so it is allowed to
   look a little warmer than the rest of the page - but only a little: five
   cards that shout would make every other job on the site look ignored. */
.boosted { background: linear-gradient(180deg, #FFFFFF 0%, var(--sky) 100%); padding: 30px 0 34px; }
.boosted-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.boosted-head h2 { font-size: clamp(20px, 2.6vw, 27px); margin: 4px 0 4px; color: var(--navy); }
.boosted-head p { margin: 0; font-size: 14px; max-width: 62ch; }
.boosted-flag {
  display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--amber);
}

.boost-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.boost-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: 12px; padding: 16px 16px 14px; color: inherit;
  box-shadow: 0 2px 10px rgba(27,42,87,.05);
}
.boost-card:hover { text-decoration: none; border-color: var(--brand); }
.boost-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--amber);
}
.boost-title {
  font-family: var(--head); font-size: 15.5px; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.boost-by { font-size: 12.5px; color: var(--muted); }
.boost-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line-soft);
}
.boost-pay { font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.boost-left { font-size: 12.5px; color: var(--muted); }

/* the "Boosted" flag on a card in the ordinary job list */
.tag-boost { background: var(--amber-bg); color: var(--amber); }

/* ------------------------------------------------ buying one, on the job page */
.boost-panel { border-left: 3px solid var(--amber); }
.boost-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.boost-head h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.boost-price { text-align: right; flex: none; }
.boost-price b {
  display: block; font-family: var(--head); font-size: 24px; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.boost-price span { font-size: 12.5px; color: var(--muted); }
.boost-mine { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.boost-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--sunk); border: 1px solid var(--line-soft); border-radius: 9px;
  padding: 9px 13px; font-size: 14px;
}
.boost-buy { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.boost-buy .field { margin: 0; min-width: 240px; }

/* deep blue activity band */
.band { background: var(--band); color: #fff; padding: 46px 0 52px; }
.band-eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; padding-left: 12px;
  border-left: 4px solid #45D07E; margin-bottom: 10px;
}
.band-title { color: #fff; font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 22px; }
.band-card {
  background: var(--card); color: var(--ink); border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.act-row {
  display: grid; grid-template-columns: auto 1fr 2fr auto auto;
  gap: 14px; align-items: center;
  /* These sit on the blue band, so a green card fought it. Plain white reads
     as a row of records, which is what they are. */
  background: var(--card); border: 1px solid var(--line);
  border-radius: 9px; padding: 12px 14px;
}
.act-who { font-weight: 600; font-size: 14px; color: var(--navy); }
.act-bar { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.act-count { font-size: 12px; color: var(--band); text-align: center; }
.act-rate { font-family: var(--head); font-weight: 700; color: var(--green); }
.act-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.act-empty { padding: 26px 18px; text-align: center; display: grid; gap: 6px; }
.act-empty b { color: var(--ink); }
.act-empty span { color: var(--muted); font-size: 14px; max-width: 60ch; margin: 0 auto; }
.band-more { margin-top: 16px; }
.band-more a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* services */
.services { background: var(--sky); padding: 50px 0 56px; }
.bar-eyebrow {
  padding-left: 12px; border-left: 4px solid #45D07E; color: var(--navy);
  letter-spacing: .06em;
}
.big-title { font-size: clamp(28px, 4vw, 44px); color: var(--navy); margin-bottom: 26px; }
.svc-card {
  background: rgba(255,255,255,.72); border: 1px solid #DCE7F5;
  border-radius: 14px; padding: 26px 24px;
}
/* Was violet, which was the one thing on the page still arguing with the
   logo. The brand blue is the only accent the site needs. */
.svc-icon {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--brand-bright); color: #fff; margin-bottom: 16px;
}
.svc-icon svg { width: 26px; height: 26px; }
.svc-card h3 { font-size: 17px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin-bottom: 10px; }
.svc-card ul { list-style: none; padding: 0; margin: 0; }
.svc-card li { font-size: 14px; color: var(--muted); margin-bottom: 6px; }

/* promo + find work cards */
.promo, .findwork {
  background: linear-gradient(120deg, var(--band) 0%, var(--band-2) 100%);
  color: #fff; border-radius: 16px; margin: 46px 0;
}
.promo { padding: 40px 36px; text-align: center; }
.promo h2 { color: #fff; font-size: clamp(22px, 3vw, 32px); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .01em; }
.promo p { max-width: 62ch; margin: 0 auto 22px; color: rgba(255,255,255,.9); font-size: 15px; }
.btn-white { background: #fff; color: var(--band); border-color: #fff; }
.btn-white:hover { background: #E9F2FB; color: var(--band); border-color: #E9F2FB; }

.findwork {
  padding: 34px 36px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.findwork span { font-size: 15px; color: rgba(255,255,255,.85); }
.findwork h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); margin: 4px 0 0; }

/* footer in the same family */
.foot { background: var(--foot); border-top: 1px solid var(--foot-line); color: rgba(255,255,255,.72); }
.foot-inner { color: rgba(255,255,255,.6); padding-top: 24px; padding-bottom: 24px; }
.foot-links a { color: rgba(255,255,255,.8); }
.foot-links a:hover { color: #fff; }

@media (max-width: 900px) {
  .promo-cell { padding: 6px 10px; }
  .act-row { grid-template-columns: auto 1fr; row-gap: 8px; }
  .act-bar { grid-column: 1 / -1; }
  .act-rate, .act-time { grid-column: auto; }
}

/* ---------------------------------------------------------------- footer v2 */
.foot { margin-top: 0; }
.foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px;
  padding-top: 48px; padding-bottom: 40px;
}
.foot-name {
  font-family: var(--head); font-size: 17px; font-weight: 700; color: #fff;
  margin: 0 0 10px; letter-spacing: -.01em;
}
.foot-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.foot-mark span { font-family: var(--head); font-size: 16px; color: #fff; font-weight: 500; }
.foot-mark b { font-weight: 700; }
/* White leaf on the dark footer, with the bars cut out in the footer's own
   colour - otherwise white-on-white makes it a featureless blob. */
.foot-mark .brand-mark { color: #fff; --mark-cut: var(--foot); }
.foot-brand p { font-size: 14px; color: rgba(255,255,255,.62); max-width: 34ch; line-height: 1.7; }
.foot-addr { font-size: 13.5px; }
.foot h5 {
  color: #fff; font-family: var(--head); font-size: 15px; font-weight: 600;
  margin: 0 0 14px;
}
.foot-brand h5 { margin-top: 18px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: 10px; }
.foot-col a { color: rgba(255,255,255,.72); font-size: 14px; }
.foot-col a:hover { color: #fff; text-decoration: none; }
.foot-social { display: flex; gap: 9px; margin-top: 18px; }
.foot-social a {
  width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.foot-social a:hover { background: rgba(255,255,255,.12); }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 16px 0; text-align: center;
  font-size: 13.5px; color: rgba(255,255,255,.55);
}
@media (max-width: 860px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .foot-brand { grid-column: 1 / -1; }
}

/* ==================================================================== phone
   Most people here are on a phone. The desktop nav becomes a burger plus a
   drawer, and the four things people actually came to do move to a bottom bar
   one thumb away instead of behind a menu. */
.head-mobile { display: none; align-items: center; gap: 10px; margin-left: auto; }
.head-bal {
  font-family: var(--head); font-weight: 700; font-size: 14px;
  color: var(--green); background: var(--green-bg);
  padding: 6px 12px; border-radius: 100px; white-space: nowrap;
}
.burger {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--panel); border: none; cursor: pointer;
  display: grid; place-content: center; gap: 4px; padding: 0;
}
.burger span { display: block; width: 17px; height: 2px; background: #fff; border-radius: 2px; }

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer::before {
  content: ''; position: absolute; inset: 0; background: rgba(12,20,38,.55);
}
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 330px);
  background: var(--panel); color: #fff; display: flex; flex-direction: column;
  overflow-y: auto; box-shadow: -8px 0 30px rgba(0,0,0,.3);
}
.drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.12);
  font-weight: 600; font-size: 15px;
}
.drawer-close {
  background: none; border: none; color: rgba(255,255,255,.75);
  font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.drawer-balance {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.drawer-balance span { font-size: 13px; color: rgba(255,255,255,.6); }
.drawer-balance b { font-family: var(--head); font-size: 19px; color: #4CC97A; }
.drawer-links { display: flex; flex-direction: column; padding: 8px 0; }
.drawer-links a {
  color: rgba(255,255,255,.85); padding: 13px 20px; font-size: 15.5px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.drawer-links a:hover, .drawer-links a.on { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.drawer-links a.on { box-shadow: inset 3px 0 0 #4CC97A; }
.drawer-links a.danger { color: #FFAFA6; }
.drawer-foot {
  margin-top: auto; padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.drawer-foot a { color: rgba(255,255,255,.6); font-size: 13px; }
body.drawer-open { overflow: hidden; }

/* bottom tab bar */
.tabbar { display: none; }

@media (max-width: 900px) {
  .nav { display: none; }
  .head-mobile { display: flex; }
  .top-inner { min-height: 58px; flex-wrap: nowrap; gap: 12px; }
  .brand-name { font-size: 15px; }
  .balance-chip { display: none; }

  .tabbar {
    display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--card); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 14px rgba(27,42,87,.08);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 4px 8px; color: var(--muted); font-size: 10.5px;
  }
  .tabbar a:hover { text-decoration: none; }
  .tabbar a.on { color: var(--brand); }
  .tab-ico { width: 22px; height: 22px; }
  .tab-ico svg { width: 22px; height: 22px; display: block; }
  .tab-label { line-height: 1.1; text-align: center; }
  /* Clear the bar so the last row of any page is reachable. */
  main.wrap { padding-bottom: 86px; }
  .foot-bottom { padding-bottom: 78px; }
}

@media (min-width: 901px) { .drawer { display: none !important; } }

/* ------------------------------------------------- templates, levels, bulk */

/* Starting a job from a template. Cards rather than a select, because the
   point is to read the job before choosing it. */
.tpl-grid {
  display: grid; gap: 10px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.tpl {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); text-decoration: none; color: var(--ink);
}
.tpl:hover { border-color: var(--brand); background: var(--brand-bg); }
.tpl b { font-family: var(--head); font-size: 14.5px; }
.tpl span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

.pill.lvl { background: var(--navy-bg); color: var(--navy); text-transform: none; }

/* The approve-all row. Deliberately not styled as a danger action - it only
   ever touches submissions nothing flagged. */
.bulk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
  border-left: 3px solid var(--green);
}
.bulk .dim { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }

/* Star rating. Reversed row order so the CSS sibling selector can light up
   the chosen star and every one before it. */
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.stars label {
  font-size: 26px; line-height: 1; color: var(--line); cursor: pointer;
  transition: color .12s;
}
.stars label:hover, .stars label:hover ~ label,
.stars input:checked ~ label { color: #E8A700; }
.stars input:focus-visible + label { outline: 2px solid var(--brand); border-radius: 4px; }

.level-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
  border-left: 3px solid var(--navy);
}
.level-card b { font-family: var(--head); margin-left: 8px; }
.level-card .dim { color: var(--muted); font-size: 13px; margin-top: 4px; }
.level-card .right-note { max-width: 340px; text-align: right; }
@media (max-width: 620px) {
  .level-card .right-note { text-align: left; max-width: none; }
}

/* =========================================================== sign in / up */

/* Two columns: what this is on the left, the form on the right. On a phone
   the form comes first - somebody who tapped "sign in" wants the fields, not
   the sales pitch, so the reasoning moves below it. */
.auth-split {
  display: grid; gap: 40px; align-items: center;
  grid-template-columns: 1fr 1fr;
  max-width: 1120px; margin: 0 auto; padding: 40px 0 56px;
}
.auth-split.one { grid-template-columns: minmax(0, 460px); justify-content: center; }

.auth-tell .eyebrow {
  display: inline-block; background: var(--brand-bg); color: var(--brand-dk);
  font-size: 12.5px; font-weight: 600; padding: 5px 13px; border-radius: 20px;
}
.auth-tell h1 {
  font-family: var(--head); font-size: 40px; line-height: 1.14;
  margin: 16px 0 14px; letter-spacing: -0.5px;
}
.auth-tell h1 b { color: var(--brand); font-weight: 700; }
.auth-tell > p { color: var(--muted); font-size: 15.5px; line-height: 1.7; margin: 0 0 22px; max-width: 46ch; }

.auth-points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.auth-points li {
  position: relative; padding-left: 30px; font-size: 14.5px; color: var(--ink-2);
}
/* A tick drawn in CSS rather than an icon font or an inline SVG per row. */
.auth-points li::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--brand);
}
.auth-points li::after {
  content: ''; position: absolute; left: 6px; top: 6px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.auth-note {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px;
}
.auth-note b { display: block; font-family: var(--head); font-size: 15px; margin-bottom: 6px; }
.auth-note p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.65; }

.auth-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 30px 30px 26px; box-shadow: 0 8px 30px rgba(20, 24, 28, .06);
}
.auth-card h2 { font-family: var(--head); font-size: 23px; margin: 0 0 6px; text-align: center; }
.auth-card .sub { color: var(--muted); font-size: 13.5px; text-align: center; margin: 0 0 20px; }

.or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 12.5px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.auth-fields { display: block; }
.auth-fields label {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
  margin: 14px 0 6px;
}
.auth-fields label em { font-weight: 400; font-style: normal; color: var(--muted); }
.auth-fields input[type=text], .auth-fields input[type=email],
.auth-fields input[type=password], .auth-fields input:not([type]), .auth-fields select {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 14.5px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.auth-fields input:focus, .auth-fields select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg);
}
.auth-fields .btn { margin-top: 20px; }

.auth-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13px; }
.auth-row a { color: var(--brand-dk); }

label.check { display: flex; gap: 9px; align-items: flex-start; margin: 18px 0 0; font-weight: 400; }
label.check input { width: auto; margin-top: 2px; flex: none; }
label.check span { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

.swap { text-align: center; margin: 16px 0 0; font-size: 13.5px; color: var(--muted); }
.swap a { color: var(--brand-dk); font-weight: 600; }
.auth-card .fine { text-align: center; margin-top: 14px; }

.btn-block { width: 100%; display: block; }
.top-bare .top-inner { justify-content: center; }

@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; gap: 28px; padding: 24px 0 40px; }
  /* Form first on a phone: the fields are what was asked for. */
  .auth-form { order: -1; }
  .auth-tell h1 { font-size: 29px; }
  .auth-card { padding: 24px 20px 22px; }
}

/* ------------------------------------------------------- support channels */
.chan-wrap { margin-bottom: 22px; }
.chan-row {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.chan {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); text-decoration: none; color: var(--ink);
}
.chan:hover { border-color: var(--brand); background: var(--brand-bg); }
.chan b { font-family: var(--head); font-size: 14.5px; }
.chan span { color: var(--muted); font-size: 12.5px; }

/* --------------------------------------------------------- admin settings */
.set-group {
  font-family: var(--head); font-size: 16px; margin: 26px 0 4px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.set-group:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.stack { display: block; }
.stack h3 { font-family: var(--head); font-size: 15.5px; margin: 0 0 4px; }
.stack.border-top { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.inline-form { display: inline-block; margin-top: 10px; }

/* ============================================================ admin dashboard */

/* What is waiting for a person, before any totals. A dashboard that opens with
   a wall of numbers teaches people to skim past the one that mattered. */
.todo {
  background: var(--panel); color: #fff; border-radius: 12px;
  padding: 18px 20px; margin-bottom: 24px;
}
.todo > b { display: block; font-family: var(--head); font-size: 14px; margin-bottom: 12px; opacity: .85; }
.todo.clear { display: flex; align-items: baseline; gap: 10px; }
.todo.clear > b { margin: 0; }
.todo.clear span { opacity: .75; font-size: 13.5px; }
.todo-row { display: flex; flex-wrap: wrap; gap: 10px; }
.todo-row a {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 8px; font-size: 13.5px;
}
.todo-row a:hover { background: rgba(255, 255, 255, .18); }
.todo-row .n { font-family: var(--head); font-size: 16px; font-weight: 700; }

.sec {
  font-family: var(--head); font-size: 17px; margin: 30px 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

.kpi-row {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; text-decoration: none; color: var(--ink); display: block;
}
a.kpi:hover { border-color: var(--brand); }
.kpi b {
  display: block; font-family: var(--head); font-size: 22px; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.kpi span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.kpi em { display: block; color: var(--muted); font-size: 11.5px; font-style: normal; margin-top: 6px; line-height: 1.45; }
.kpi.ok b { color: var(--green); }
.kpi.bad b { color: var(--red); }
.kpi.warn b { color: var(--amber); }

/* Bars drawn as SVG rather than a charting library: the CSP forbids one, and
   this is twenty lines against a hundred kilobytes. */
.chart { margin: 4px 0 10px; }
.chart svg { width: 100%; height: 60px; display: block; }
.chart-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 4px; }

.range { display: flex; gap: 4px; flex-wrap: wrap; }
.range a {
  padding: 6px 13px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--ink-2); text-decoration: none; font-size: 13px;
}
.range a.on { background: var(--panel); border-color: var(--panel); color: #fff; font-weight: 600; }
.range a:hover:not(.on) { border-color: var(--brand); }
.wide-range { margin-bottom: 16px; }
.wide-range a i { font-style: normal; opacity: .65; margin-left: 4px; }
.wide-range a.alt { border-style: dashed; margin-left: auto; }

.kv.tight dt, .kv.tight dd { padding: 4px 0; font-size: 13.5px; }
.kv .fine-dt { color: var(--muted); font-size: 12px; font-weight: 400; }
.tight-list { margin: 8px 0 6px; padding-left: 18px; }
.tight-list li { margin-bottom: 4px; }

.row-warn { background: var(--amber-bg); }
td.warn-t, .warn-t { color: var(--amber); font-weight: 600; }

/* --------------------------------------------------- the sign-up role choice */
.role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.role-pick a {
  display: block; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 9px;
  text-decoration: none; color: var(--ink-2); background: var(--card); text-align: center;
}
.role-pick a b { display: block; font-family: var(--head); font-size: 14px; }
.role-pick a span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.role-pick a.on { border-color: var(--brand); background: var(--brand-bg); color: var(--ink); }
.role-pick a.on b { color: var(--brand-dk); }

/* An admin has a dozen tools and the header fits six. The rest live here,
   shown only to an admin and only on an admin page. */
.adminbar { background: var(--sunk); border-bottom: 1px solid var(--line); }
.adminbar-in {
  display: flex; gap: 2px; overflow-x: auto; padding: 0;
  scrollbar-width: thin;
}
.adminbar-in a {
  padding: 10px 14px; font-size: 13px; color: var(--muted);
  text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent;
}
.adminbar-in a:hover { color: var(--ink); }
.adminbar-in a.on { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); background: var(--card); }
@media (max-width: 900px) { .adminbar { display: none; } }
td.nowrap { white-space: nowrap; }
td.nowrap .link + .link { margin-left: 12px; }

/* ------------------------------------------------ guided email setup */
.prov-grid {
  display: grid; gap: 10px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.prov {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--card); text-decoration: none; color: var(--ink);
}
.prov:hover { border-color: var(--brand); }
.prov.on { border-color: var(--brand); background: var(--brand-bg); }
.prov b { font-family: var(--head); font-size: 15px; }
.prov span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.prov em { color: var(--brand-dk); font-size: 11.5px; font-style: normal; margin-top: 2px; }

/* Numbered because these really are a sequence - each step needs the one
   before it to have happened. */
.steps { margin: 14px 0 0; padding-left: 22px; }
.steps li { margin-bottom: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

/* ------------------------------------------- gateway setup instructions */
.setup-block {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; margin: 16px 0 0; background: var(--sunk);
}
.setup-block h3 {
  font-family: var(--head); font-size: 15.5px; margin: 0 0 6px;
  display: flex; align-items: center; gap: 9px;
}
table.mini { width: 100%; border-collapse: collapse; margin: 10px 0; }
table.mini td { padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
table.mini td:first-child { width: 46%; }

/* The URL people have to copy into the provider's dashboard. Given room of its
   own and made selectable-looking, because a callback URL pasted wrong is the
   single most common reason a deposit never arrives. */
.copyline {
  background: var(--card); border: 1px solid var(--line); border-radius: 7px;
  padding: 10px 13px; font-size: 13px; user-select: all; word-break: break-all;
}

/* ================================================================= deposit */
.deposit .lbl {
  display: block; font-family: var(--head); font-size: 14px; font-weight: 600;
  margin: 20px 0 9px;
}
.deposit .lbl:first-of-type { margin-top: 6px; }

.pay-pick { display: grid; gap: 9px; }
.pay {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 10px; padding: 13px 15px;
  background: var(--card);
}
.pay:hover { border-color: var(--brand); }
.pay.on { border-color: var(--brand); background: var(--brand-bg); }
.pay input { margin-top: 3px; flex: none; accent-color: var(--brand); }
.pay-body { display: block; }
.pay-body b {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--head); font-size: 14.5px;
}
.pay-body b i { font-style: normal; }
.pay-body > span { display: block; color: var(--muted); font-size: 12.8px; margin-top: 3px; line-height: 1.5; }

.amt-quick { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.amt {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  border-radius: 100px; padding: 7px 16px; font: inherit; font-size: 13.5px;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.amt:hover { border-color: var(--brand); color: var(--ink); }
.amt.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* The amount field reads as one control: a fixed dollar sign, the number, and
   the unit - so nobody has to wonder which currency they are typing. */
.amt-row {
  display: flex; align-items: center;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--card);
  overflow: hidden; max-width: 340px;
}
.amt-row:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-bg); }
.amt-sign, .amt-usd {
  font-family: var(--head); font-weight: 600; color: var(--muted);
  padding: 0 14px; flex: none;
}
.amt-sign { font-size: 19px; color: var(--ink); }
.amt-usd { font-size: 13px; border-left: 1px solid var(--line); align-self: stretch; display: flex; align-items: center; }
.amt-row input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 21px; font-family: var(--head); font-weight: 600;
  padding: 13px 0; color: var(--ink); font-variant-numeric: tabular-nums;
}
/* The spinner arrows make a money field look like a quantity picker. */
.amt-row input::-webkit-outer-spin-button,
.amt-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amt-row input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.amt-out {
  color: var(--ink-2); font-size: 13.5px; margin: 12px 0 18px;
  min-height: 20px;
}
.deposit .fine { margin-top: 12px; }
.manual { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ============================================================== withdrawals */
.withdraw .field { margin-bottom: 14px; }
.bank-fields { margin-bottom: 4px; }

/* An admin about to send real money needs each detail on its own, readable at
   a glance and easy to select without catching the label. */
.wd { border-top: 1px solid var(--line); padding: 16px 18px; }
.wd:first-of-type { border-top: 0; }
.wd-open { background: var(--amber-bg); }
.wd-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.wd-top > div:first-child { flex: 1; min-width: 180px; }
.wd-amt { font-family: var(--head); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }

.wd-grid {
  display: grid; gap: 10px 18px; margin: 12px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.wd-grid > div { display: flex; flex-direction: column; gap: 2px; }
.wd-grid span { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.wd-grid b { font-size: 14.5px; word-break: break-word; }
.wd-grid b i { font-style: normal; font-weight: 400; font-size: 12px; margin-left: 5px; }
/* Select the whole value in one click - retyping an account number by hand is
   how a payout reaches the wrong person. */
.pick { user-select: all; cursor: text; }

.wd-actions {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.wd-actions form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wd-actions .fine { flex-basis: 100%; margin: 0; }
.wd-reject input { min-width: 190px; }

.file-pick {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px dashed var(--line); border-radius: 8px; padding: 8px 13px;
  font-size: 13px; color: var(--ink-2); background: var(--card);
}
.file-pick:hover { border-color: var(--brand); }
.file-pick input { max-width: 190px; font-size: 12px; }

/* Bangla beside English, where the Bangla is the part that must not be
   misread. Slightly larger because the script needs the room. */
.bn { font-size: 1.04em; color: inherit; }
h2 .bn, h1 .bn { color: var(--muted); font-weight: 500; font-size: .72em; margin-left: 6px; }
.alert .bn { display: block; margin: 6px 0; }

/* ============================================================ levels, prize */
.level-now { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.level-now b { display: block; font-family: var(--head); font-size: 17px; }
.level-now span.dim { font-size: 13px; }

.lvl-badge {
  font-family: var(--head); font-weight: 700; font-size: 13px;
  padding: 7px 15px; border-radius: 100px; white-space: nowrap;
  background: var(--sunk); color: var(--ink-2);
}
.lvl-badge.l1 { background: #E8EDF2; color: #4A5A6A; }
.lvl-badge.l2 { background: #FBF0D6; color: #8A6714; }
.lvl-badge.l3 { background: var(--panel); color: #F5D77A; }

.lvl-bar { height: 9px; border-radius: 100px; background: var(--sunk); overflow: hidden; margin-bottom: 9px; }
.lvl-bar span { display: block; height: 100%; background: var(--brand); border-radius: 100px; }

/* The ladder, so the next rung is visible rather than a surprise. */
.lvl-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin: 16px 0 4px; text-align: center;
}
.lvl-steps > div {
  padding: 9px 4px; border-radius: 8px; background: var(--sunk); opacity: .55;
}
.lvl-steps > div.done { background: var(--green-bg); opacity: 1; }
.lvl-steps b { display: block; font-family: var(--head); font-size: 12.5px; }
.lvl-steps span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

.lvl-prize { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.lvl-prize > b { font-family: var(--head); font-size: 14.5px; }
.lvl-prize p { margin: 5px 0 10px; }

.prize-row {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.prize {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; text-align: center;
}
.prize b { display: block; font-family: var(--head); font-size: 22px; margin: 8px 0 2px; }
.prize > span:last-child { color: var(--muted); font-size: 12.5px; }
.prize.p1 { border-color: #E3C55A; }

.medal {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; font-family: var(--head); font-weight: 700; font-size: 12.5px;
  background: var(--sunk); color: var(--ink-2);
}
.medal.m1 { background: #F1D06B; color: #5A4405; }
.medal.m2 { background: #DCE1E6; color: #4A5560; }
.medal.m3 { background: #E8C9A8; color: #6B4522; }
/* Your own row on the board: an identity highlight, not a status. */
.row-me { background: var(--brand-bg); }
.me-standing { margin-bottom: 18px; }

@media (max-width: 560px) {
  .lvl-steps { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------- one-time codes */
/* Wide tracking and a monospace face so a six-digit code can be read back
   from a phone screen without losing your place. */
.code-input {
  font-family: var(--mono); font-size: 22px; font-weight: 500;
  letter-spacing: 8px; text-align: center;
  padding: 12px 10px; max-width: 220px;
}
.code-input::placeholder { letter-spacing: 8px; color: var(--line); }
.code-form { margin: 12px 0 8px; }
.code-form label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }