/* ===================================================================
   Portal chrome - 2026
   -------------------------------------------------------------------
   Loaded from portal/header.aspx, so it covers the 69 member-area pages
   that include it. This file holds ONLY the shared furniture - header,
   account box, quick-action tiles, sidebar, footer - so that every
   publisher page looks like the dashboard rather than only the one.

   Page-specific styling (dashboard cards, panels, tables) stays in
   css/dashboard-2026.css, still scoped to body.sc-dash.

   Colour rule, as everywhere else on the site:
     green (#0a7d55) = money the member has earned
     red   (#e0342b) = the single primary action
     amber (#a15c00) = needs attention
     navy  (#0d1826) = structure

   !important appears where the theme sets colours INLINE in the markup
   (e.g. style="color:blue;font-size:32px" on every tile icon), which no
   selector can outrank.

   To revert: remove the <link> in portal/header.aspx.
   Bump its ?v= whenever this file changes or Cloudflare serves the old copy.
   =================================================================== */

/* ---- page ground ---- */
body.header-fixed{ background:#f5f8fc; }

/* ---- header ---- */
.header{
  background:#fff !important; background-image:none !important;
  border-bottom:1px solid #e2e8f0 !important; box-shadow:none !important;
}

/* the account box that floated over the header edge in bright blue */
.menu-container{
  background:#fff !important; background-image:none !important;
  border:1px solid #e2e8f0 !important; border-radius:12px !important;
  box-shadow:0 1px 2px rgba(13,24,38,.06) !important;
}
.menu-container span{ color:#0a7d55 !important; font-weight:700; font-variant-numeric:tabular-nums; }
.menu-container a{ color:#4e5c6d !important; }
.hlink{
  background:#e0342b !important; background-image:none !important;
  color:#fff !important; border:0 !important; border-radius:9px !important;
  font-weight:700 !important; text-shadow:none !important; padding:9px 16px !important;
}
.hlink:hover{ background:#b8241c !important; color:#fff !important; }

/* ---- quick-action tiles (breadcrumb.aspx) --------------------------
   class="rounded" appears only in breadcrumb.aspx, so this cannot leak
   into anything else in the member area. */
a.rounded{
  display:flex !important; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:15px 8px 12px !important; min-height:86px;
  background:#fff; border:1px solid #e2e8f0; border-radius:12px !important;
  color:#4e5c6d !important; font-size:12.5px; text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
a.rounded:hover{
  border-color:#bcd4f5; box-shadow:0 6px 18px -10px rgba(16,42,67,.35); color:#0d1826 !important;
}
a.rounded i{ color:#5a6b7d !important; font-size:21px !important; }
a.rounded:hover i{ color:#0d1826 !important; }
a.rounded strong{ font-weight:600; font-size:12.5px; }

/* badges: amber when there is something to do, grey when there is not.
   The old set used red / green / blue with no consistent meaning. */
.badge{
  background:#fff6e6 !important; color:#a15c00 !important;
  border:1px solid #f0d5a8; font-weight:800; font-size:11px;
}
.badge-blue{ background:#eef1f5 !important; color:#7d8b9b !important; border-color:#dbe2ea; }

/* the low-res 2008 "Silver member" bitmap */
.profile-img{ display:none !important; }
img[src*="silver-member"]{ display:none !important; }

/* ---- sidebar (menu.aspx) -------------------------------------------
   Real markup is #cssmenu > ul > li > a > span, with nested <ul> for the
   sub-items. Taken from the file, not guessed. */
#cssmenu{
  width:100% !important; background:#fff; border:1px solid #e2e8f0;
  border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(13,24,38,.05);
}
#cssmenu ul{ list-style:none; margin:0; padding:0; }
#cssmenu > ul > li{ border-bottom:1px solid #eef1f5; }
#cssmenu > ul > li:last-child{ border-bottom:0; }
#cssmenu > ul > li > a{
  display:block; background:#fff !important; background-image:none !important;
  border:0 !important; box-shadow:none !important; text-shadow:none !important;
  color:#4e5c6d !important; font-size:14px; font-weight:600;
  padding:11px 14px !important; line-height:1.4;
}
#cssmenu > ul > li > a:hover{ background:#f5f8fc !important; color:#0d1826 !important; }
#cssmenu > ul > li.active > a{ background:#f5f8fc !important; color:#0d1826 !important; }
#cssmenu ul ul li a{
  display:block; background:#fbfcfe !important; background-image:none !important;
  color:#5a6675 !important; font-size:13.5px; font-weight:500;
  padding:9px 14px 9px 36px !important; border-top:1px solid #f1f4f8 !important;
}
#cssmenu ul ul li a:hover{ background:#f2f6fb !important; color:#0d1826 !important; }
#cssmenu i{ color:#8b98a7 !important; width:18px; text-align:center; }
#cssmenu span{ color:inherit !important; }

/* ---- footer (portal/footer.aspx) -----------------------------------
   A separate file from the public footer.aspx redesigned earlier, which
   is why the member area kept ALL CAPS labels, a chevron on every row
   and dotted heading rules. */
.footer-v1, .footer{ background:#0d1826 !important; color:#93a5b8 !important; }
.footer-v1 .headline, .footer .headline{ border-bottom:0 !important; background:none !important; }
.footer-v1 .headline h2, .footer .headline h2{
  color:#fff !important; font-size:13px !important; font-weight:700 !important;
  letter-spacing:.07em; text-transform:uppercase; border:0 !important; padding:0 !important;
}
.footer .link-list li, .footer-v1 .link-list li{ border-bottom:0 !important; padding:0 !important; }
.footer .link-list li a, .footer-v1 .link-list li a{
  color:#93a5b8 !important; font-size:14.5px !important; text-transform:none !important;
  display:block; padding:6px 0 !important; border:0 !important;
}
.footer .link-list li a:hover, .footer-v1 .link-list li a:hover{ color:#fff !important; }
/* a chevron on every row read as furniture rather than navigation */
.footer .link-list .fa-angle-right, .footer-v1 .link-list .fa-angle-right{ display:none !important; }
.footer address, .footer p{ color:#93a5b8 !important; font-size:14.5px; }
.copyright{
  background:#0d1826 !important; border-top:1px solid rgba(255,255,255,.1) !important;
  color:#7b8da0 !important;
}
.copyright a{ color:#c9d6e4 !important; }

/* ---- shared surfaces used across the member area -------------------
   Panels, notices and buttons appear on most portal pages, not just the
   dashboard, so they belong with the chrome. */
.panel{
  background:#fff; border:1px solid #e2e8f0 !important; border-radius:14px;
  box-shadow:0 1px 2px rgba(13,24,38,.05); overflow:hidden;
}
.panel-heading{
  background:#f8fafc !important; background-image:none !important;
  border-bottom:1px solid #e2e8f0 !important; color:#0d1826 !important; padding:14px 18px;
}
.panel-title{ color:#0d1826 !important; font-size:15.5px; font-weight:700; }
.panel-title i{ color:#8b98a7 !important; }
.panel-title a{ color:#e0342b !important; font-weight:600; }

.alert-warning, .alert-info{
  background:#fff6e6 !important; border:1px solid #f0d5a8 !important; color:#6b5a3d !important;
  border-radius:12px;
}
.alert-success{
  background:#e8f6f0 !important; border:1px solid #bfe5d5 !important; color:#2f6a56 !important;
  border-radius:12px;
}
.alert a{ color:#b8241c !important; font-weight:700; }

.btn-u{
  background:#e0342b !important; border:0 !important; border-radius:9px !important;
  font-weight:700; padding:11px 18px;
}
.btn-u:hover{ background:#b8241c !important; }

.progress{ background:#eef1f5 !important; border-radius:99px; box-shadow:none; }
.progress-bar{ background:#e0a53a !important; border-radius:99px; }
.progress-bar-green{ background:#0a7d55 !important; }

.table > thead > tr > th{
  border-bottom:1px solid #e2e8f0 !important; color:#7d8b9b; font-size:11px;
  letter-spacing:.07em; text-transform:uppercase; font-weight:700;
}
.table > tbody > tr > td{
  border-top:1px solid #f1f4f8 !important; font-size:14px; color:#4e5c6d; vertical-align:middle;
}
.table > tbody > tr:hover > td{ background:#f8fafc; }

/* A report table on a phone was pushing the whole page sideways - most of
   these tables never got Bootstrap's .table-responsive wrapper. Scrolling
   the table itself keeps the layout intact.
   Inside a media query on purpose: display:block on a <table> re-boxes it,
   and that is not a change worth making to desktop layouts I cannot see. */
@media (max-width:767px){
  .panel-body > .table{ display:block; overflow-x:auto; width:100%; }
}

/* ---- the rest of the Bootstrap set ---------------------------------
   .panel, .alert-info/-success/-warning and .btn-u were done when this
   file was written, but the member pages also use alert-danger,
   alert-secondary, the plain .btn colours and .label. Those were still
   rendering in stock Bootstrap - saturated blue, green and red with sharp
   corners - next to the softened palette above, which is what made pages
   like payout, internal transfer and reviews history look unfinished
   despite this sheet already loading on them.

   Doing it here rather than per page: these same components appear on all
   69 member pages, so one rule set is the difference between fixing 13
   pages and fixing all of them. */
.alert-danger{
  background:#fdecea !important; border:1px solid #f5c2bd !important; color:#a3261d !important;
  border-radius:12px;
}
.alert-secondary{
  background:#f4f6f9 !important; border:1px solid #e2e8f0 !important; color:#4e5c6d !important;
  border-radius:12px;
}
.alert{ padding:14px 16px; }
.alert h2, .alert h3, .alert h4{ margin-top:0; font-size:16px; font-weight:700; color:inherit; }

.btn{ border-radius:9px; font-weight:600; padding:9px 16px; border:1px solid transparent; }
.btn-primary{
  background:#0d1826 !important; border-color:#0d1826 !important; color:#fff !important;
}
.btn-primary:hover, .btn-primary:focus{ background:#233348 !important; border-color:#233348 !important; }
.btn-success{
  background:#0a7d55 !important; border-color:#0a7d55 !important; color:#fff !important;
}
.btn-success:hover, .btn-success:focus{ background:#086647 !important; border-color:#086647 !important; }
.btn-danger{
  background:#e0342b !important; border-color:#e0342b !important; color:#fff !important;
}
.btn-danger:hover, .btn-danger:focus{ background:#b8241c !important; border-color:#b8241c !important; }
.btn-default{
  background:#fff !important; border-color:#d7dee7 !important; color:#4e5c6d !important;
}
.btn-default:hover, .btn-default:focus{ background:#f4f6f9 !important; border-color:#c3ced9 !important; }

/* Labels become pills, and stop shouting. Used for payout status and
   referral counts, where the old saturated blocks read as warnings. */
.label{
  display:inline-block; padding:4px 10px; border-radius:99px; font-size:11.5px;
  font-weight:700; letter-spacing:.02em; vertical-align:middle;
}
.label-success{ background:#e8f6f0 !important; color:#2f6a56 !important; }
.label-info{    background:#eaf1fb !important; color:#2e5686 !important; }
.label-warning{ background:#fff6e6 !important; color:#8a5a12 !important; }
.label-danger{  background:#fdecea !important; color:#a3261d !important; }
.label-default{ background:#f0f3f7 !important; color:#5b6878 !important; }

/* ---- payout request (.sc-pay) --------------------------------------
   portal/payout2.aspx, which is where /portal/payout actually lands - the
   older payout.aspx redirects here for everyone.

   The form is a Bootstrap dl-horizontal: labels floated into a 160px
   column with the values pushed off to the right, so a four-field form
   ran most of the page width with the balance stranded from its label.
   Same grid treatment as the profile fields below, plus overrides for the
   Telerik controls, which set their colours and fonts as attributes in
   the markup (ForeColor, Font-Names, Font-Size) and so arrive inline. */
.sc-pay .dl-horizontal{ margin:0; color:#4e5c6d !important; }
.sc-pay .dl-horizontal dt{
  float:none !important; width:auto !important; clear:both; text-align:left !important;
  color:#7d8b9b !important; font-size:12px !important; font-weight:700 !important;
  letter-spacing:.05em; text-transform:uppercase; padding:0 !important;
  margin:0 0 4px !important; white-space:normal;
}
.sc-pay .dl-horizontal dd{
  margin:0 0 16px !important; padding:0 !important; color:#0d1826; font-size:15px;
}
.sc-pay .dl-horizontal dd section,
.sc-pay .dl-horizontal dd label.input{ display:block; margin:0; }
/* The stray <br> between rows doubled the gap the margin above already gives. */
.sc-pay .dl-horizontal > br{ display:none; }

/* The available balance is the number the member came for. */
.sc-pay #lblBalance,
.sc-pay #lblBalance *{
  color:#0a7d55 !important; font-family:inherit !important;
  font-size:30px !important; font-weight:800 !important;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}

/* Telerik inputs, so the form does not mix two control styles. */
.sc-pay .RadComboBox, .sc-pay .RadComboBox .rcbInput{ font-size:15px !important; }
.sc-pay .RadComboBox_Bootstrap .rcbInputCell{ border-radius:8px; }

/* ---- settings / profile pages --------------------------------------
   Fields are <dt> label + <dd> value, with the Edit pencil as
   class="pull-right" INSIDE the <dd>. The float dropped it onto its own
   line, far from the value it edits, and each row ate ~120px for one
   short piece of text. Laying the row out as a grid puts label, value
   and action on one line and removes the dead space. Scoped to
   .profile-edit, which is the tab panel these fields live in. */
.profile-edit dl{ margin:0; }
.profile-edit dt{
  float:none !important; width:auto !important; clear:both;
  color:#7d8b9b !important; font-size:12px !important; font-weight:700 !important;
  letter-spacing:.05em; text-transform:uppercase; margin:0 0 3px !important;
}
.profile-edit dt strong span{ font-size:12px !important; font-weight:700 !important; }
.profile-edit dd{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 0 0 !important; padding:0 0 14px !important;
  color:#0d1826; font-size:15px; min-height:0 !important;
}
/* Push the trailing span - the one holding the Edit pencil - to the right end
   of the row. The :not(:first-child) guard matters: the Account ID row has no
   Edit action, so its ONLY child is a wrapper span, and without the guard that
   rule shoved the account number itself over to the right edge. */
.profile-edit dd > span:last-child:not(:first-child){ margin-left:auto; }
/* the pencil belongs on the row, not floated away from it */
.profile-edit dd .pull-right{ float:none !important; margin-left:auto; }
.profile-edit dd a .fa-pencil{ color:#e0342b !important; }
.profile-edit dd a{ color:#e0342b !important; font-weight:600; font-size:14px; }
.profile-edit hr{ margin:0 0 14px !important; border-top:1px solid #f1f4f8 !important; }

/* tabs: navy underline for the active one instead of a solid blue block */
.profile-edit-nav .nav-tabs,
.nav-tabs{ border-bottom:1px solid #e2e8f0 !important; }
.nav-tabs > li > a{
  color:#4e5c6d !important; font-weight:600; border:0 !important;
  background:transparent !important; border-radius:0 !important;
  border-bottom:2px solid transparent !important;
}
.nav-tabs > li > a:hover{ background:#f5f8fc !important; color:#0d1826 !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus{
  background:#fff !important; color:#0d1826 !important; font-weight:700;
  border:0 !important; border-bottom:2px solid #e0342b !important;
}

/* ---- Bank Account tab (.sc-bank) -----------------------------------
   Was nine fields stacked in one narrow column: the address was cut off
   inside its own box, the country dropdown was pinned at 300px while the
   text inputs were 100% so no two fields shared an edge, and bank /
   account / routing details read as one flat list.

   Now three labelled groups in a two-column grid that collapses to one
   column under 720px. The markup keeps every original control ID, so
   this is presentation only.

   The Telerik overrides below are the awkward part: RadTextBox renders
   <span class="RadInput"><input class="riTextBox"></span> and RadComboBox
   renders a table, both carrying skin widths and borders that fight a
   grid cell. They are neutralised here rather than in markup so the
   whole thing reverts by deleting this block. */
.sc-bank__grp{ border-top:1px solid #f1f4f8; padding-top:22px; margin-top:24px; }
.sc-bank__grp:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.sc-bank__hd{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.sc-bank__hd h3{
  margin:0; font-size:12px; font-weight:800; color:#0d1826;
  letter-spacing:.09em; text-transform:uppercase; font-family:inherit;
}
.sc-bank__hd span{ font-size:13px; color:#7d8b9b; }
.sc-bank__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 22px; margin-top:16px;
}
.sc-bank__f{ min-width:0; }
.sc-bank__f--wide{ grid-column:1 / -1; }
.sc-bank__l{
  display:block; font-size:12px; font-weight:700; color:#7d8b9b;
  letter-spacing:.05em; text-transform:uppercase; margin:0 0 6px;
}
.sc-bank__l-note{
  text-transform:none; letter-spacing:0; font-weight:600; color:#8b98a7;
}
.sc-bank__hint{ margin:6px 0 0; font-size:12.5px; color:#7d8b9b; line-height:1.5; }
.sc-bank__actions{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:28px; padding-top:22px; border-top:1px solid #f1f4f8;
}
.sc-bank__savenote{ font-size:13px; color:#7d8b9b; }

/* Telerik text boxes: let the grid cell decide the width. */
.sc-bank .RadInput,
.sc-bank .RadInput input.riTextBox{ width:100% !important; }
.sc-bank .RadInput{ display:block !important; }
.sc-bank .RadInput input.riTextBox{
  font-family:inherit !important; font-size:15px !important; color:#0d1826 !important;
  padding:10px 13px !important; height:auto !important; line-height:1.4 !important;
  border:1px solid #e2e8f0 !important; border-radius:9px !important;
  background:#fff !important; box-shadow:none !important;
}
.sc-bank .RadInput input.riTextBox:focus{
  border-color:#9db8dd !important; box-shadow:0 0 0 3px rgba(60,120,200,.12) !important;
}
/* EmptyMessage is the real placeholder - grey hint text that never saves.
   Without it, instruction text gets typed into the value, which is how
   "Enter the Bank Name" ended up stored on live accounts. */
.sc-bank .RadInput input.riEmpty{ color:#a9b4c0 !important; font-style:normal !important; }

/* Telerik combo box: same footprint as a text box. */
.sc-bank .RadComboBox{ width:100% !important; }
.sc-bank .RadComboBox table{ width:100% !important; }
.sc-bank .RadComboBox .rcbInputCell{ width:100% !important; }
.sc-bank .RadComboBox input.rcbInput{
  font-family:inherit !important; font-size:15px !important; color:#0d1826 !important;
  width:100% !important; padding:10px 13px !important; height:auto !important;
  line-height:1.4 !important; background:#fff !important;
}
.sc-bank .RadComboBox .rcbInputCell,
.sc-bank .RadComboBox .rcbArrowCell{
  border-color:#e2e8f0 !important; background:#fff !important; background-image:none !important;
}

/* digits that line up against a bank statement */
.sc-bank .sc-num input.riTextBox,
.sc-bank input.sc-num{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }

@media (max-width:720px){
  .sc-bank__grid{ grid-template-columns:minmax(0,1fr); }
}

/* ---- Referrals page (.sc-ref) --------------------------------------
   The old page was three stacked explanation blocks, four identical links
   rendered with <font> tags and inline color:Blue, and a commission list
   led by its weakest number - with none of the member's own figures on it
   at all, because the code-behind never read one.

   Now: link and copy button first, the member's own numbers second, the
   unverified-referrals nudge third, and the pitch led by upgrades. */
.sc-ref .sc-ref__h2{
  margin:0 0 6px; font-size:22px; font-weight:400; color:#0d1826;
  letter-spacing:-.01em; font-family:inherit;
}
.sc-ref .sc-ref__lead{ margin:0 0 18px; font-size:14.5px; color:#7d8b9b; }
.sc-ref .sc-ref__h3{
  margin:0 0 14px; font-size:12px; font-weight:800; color:#0d1826;
  letter-spacing:.09em; text-transform:uppercase;
}
.sc-ref .sc-ref__hero{ padding:4px 0 6px; }
.sc-ref .sc-ref__grp{ border-top:1px solid #f1f4f8; padding-top:22px; margin-top:24px; }

/* link + copy */
.sc-ref .sc-ref__linkrow{ display:flex; gap:10px; flex-wrap:wrap; }
.sc-ref .sc-ref__link{
  flex:1 1 320px; min-width:0; font:inherit; font-size:16px; color:#0d1826;
  padding:13px 15px; border:1px solid #e2e8f0; border-radius:9px;
  background:#fbfcfe; font-variant-numeric:tabular-nums;
}
.sc-ref .sc-ref__copy{
  background:#e0342b; color:#fff; border:0; border-radius:9px;
  font:inherit; font-weight:700; font-size:15px; padding:13px 24px; cursor:pointer;
}
.sc-ref .sc-ref__copy:hover{ background:#b8241c; }
.sc-ref .sc-ref__copy.is-copied{ background:#0a7d55; }
.sc-ref .sc-ref__share{ display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; align-items:center; }
.sc-ref .sc-ref__sharelbl{
  font-size:12.5px; color:#7d8b9b; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.sc-ref .sc-ref__chip{
  display:inline-block; padding:7px 14px; border:1px solid #e2e8f0; border-radius:99px;
  font-size:13.5px; font-weight:600; color:#4e5c6d !important; background:#fff; text-decoration:none;
}
.sc-ref .sc-ref__chip:hover{ border-color:#bcd4f5; color:#0d1826 !important; text-decoration:none; }
.sc-ref .sc-ref__alt{ margin-top:16px; }
.sc-ref .sc-ref__alt summary{ cursor:pointer; font-size:13.5px; color:#7d8b9b; font-weight:600; }
.sc-ref .sc-ref__alt ul{ margin:12px 0 0; padding-left:18px; font-size:14px; }
.sc-ref .sc-ref__alt li{ margin-bottom:9px; }
.sc-ref .sc-ref__alt code{
  background:#f5f8fc; color:#4e5c6d; border:0; font-size:13px; word-break:break-all;
}

/* stats */
.sc-ref .sc-ref__stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.sc-ref .sc-ref__stat{ border:1px solid #e2e8f0; border-radius:12px; padding:16px 18px; background:#fff; }
.sc-ref .sc-ref__k{
  margin:0 0 6px; font-size:11.5px; font-weight:800; color:#7d8b9b;
  letter-spacing:.07em; text-transform:uppercase;
}
.sc-ref .sc-ref__v{
  font-size:30px; font-weight:800; color:#0d1826; letter-spacing:-.03em;
  line-height:1.1; font-variant-numeric:tabular-nums;
}
.sc-ref .sc-ref__stat--money .sc-ref__v{ color:#0a7d55; }
.sc-ref .sc-ref__stat--warn .sc-ref__v{ color:#a15c00; }
.sc-ref .sc-ref__n{ margin:6px 0 0; font-size:12.5px; color:#7d8b9b; }

/* progress to the payout floor */
.sc-ref .sc-ref__prog{ margin-top:22px; padding-top:20px; border-top:1px solid #f1f4f8; }
.sc-ref .sc-ref__progtop{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap; margin-bottom:9px;
}
.sc-ref .sc-ref__proglbl{ font-size:13.5px; font-weight:700; color:#0d1826; }
.sc-ref .sc-ref__progrem{ font-size:13px; color:#7d8b9b; font-variant-numeric:tabular-nums; }
.sc-ref .sc-ref__bar{ height:10px; background:#eef1f5; border-radius:99px; overflow:hidden; }
.sc-ref .sc-ref__fill{ height:100%; background:#0a7d55; border-radius:99px; }

/* unverified nudge */
.sc-ref .sc-ref__nudge{
  background:#fff6e6; border:1px solid #f0d5a8; border-radius:12px;
  padding:18px 20px; color:#6b5a3d; margin-top:24px;
}
.sc-ref .sc-ref__nudge h4{
  margin:0 0 6px; font-size:15.5px; font-weight:700; color:#7a5f1f; font-family:inherit;
}
.sc-ref .sc-ref__nudge p{ margin:0; font-size:14.5px; }

/* commissions */
.sc-ref .sc-ref__comm{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.sc-ref .sc-ref__cc{ border:1px solid #e2e8f0; border-radius:12px; padding:18px 20px; }
.sc-ref .sc-ref__cc--hero{ border-color:#bfe5d5; background:#e8f6f0; }
.sc-ref .sc-ref__amt{
  font-size:30px; font-weight:800; letter-spacing:-.03em; color:#0a7d55;
  font-variant-numeric:tabular-nums;
}
.sc-ref .sc-ref__ct{ font-size:15px; font-weight:700; color:#0d1826; margin:2px 0 4px; }
.sc-ref .sc-ref__cs{ font-size:13.5px; color:#7d8b9b; margin:0; }

/* milestones */
.sc-ref .sc-ref__miles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.sc-ref .sc-ref__mile{
  border:1px solid #e2e8f0; border-radius:12px; padding:14px 16px;
  font-size:14px; color:#4e5c6d; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.sc-ref .sc-ref__mile b{ font-size:19px; color:#0d1826; font-variant-numeric:tabular-nums; }
.sc-ref .sc-ref__mile span{ margin-left:auto; font-weight:800; color:#0a7d55; }
.sc-ref .sc-ref__mile.is-done{ background:#e8f6f0; border-color:#bfe5d5; }
.sc-ref .sc-ref__next{ margin:14px 0 0; font-size:13.5px; color:#7d8b9b; }
.sc-ref .sc-ref__rep{ color:#e0342b !important; font-weight:700; }

@media (max-width:860px){ .sc-ref .sc-ref__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px){
  .sc-ref .sc-ref__comm, .sc-ref .sc-ref__miles{ grid-template-columns:minmax(0,1fr); }
}

/* ---- Inbox (.sc-inbox / .sc-row) -----------------------------------
   The list was an accordion of identical "message from X" rows - that
   string is a stored subject, not a sender field - with no way to see
   which messages still needed answering. messages.replied, messages.mread
   and the paidmessages table already held all of it; none was shown.

   Now: what needs a reply and what it is worth, first; then a filterable
   list where state is visible without expanding a row. */
.sc-inbox{ margin:0 0 6px; }
.sc-inbox__stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:20px;
}
.sc-inbox__stat{ border:1px solid #e2e8f0; border-radius:12px; padding:16px 18px; background:#fff; }
.sc-inbox__stat--act{ background:#fff6e6; border-color:#f0d5a8; }
.sc-inbox__stat--money{ background:#e8f6f0; border-color:#bfe5d5; }
.sc-inbox__k{
  margin:0 0 6px; font-size:11.5px; font-weight:800; color:#7d8b9b;
  letter-spacing:.07em; text-transform:uppercase;
}
.sc-inbox__stat--act .sc-inbox__k{ color:#a15c00; }
.sc-inbox__stat--money .sc-inbox__k{ color:#0a7d55; }
.sc-inbox__v{
  font-size:30px; font-weight:800; color:#0d1826; letter-spacing:-.03em;
  line-height:1.1; font-variant-numeric:tabular-nums;
}
.sc-inbox__stat--act .sc-inbox__v{ color:#a15c00; }
.sc-inbox__stat--money .sc-inbox__v{ color:#0a7d55; }
.sc-inbox__n{ margin:6px 0 0; font-size:12.5px; color:#7d8b9b; }

.sc-inbox__tabs{ display:flex; flex-wrap:wrap; border-bottom:1px solid #e2e8f0; }
.sc-inbox__tabs button{
  font:inherit; font-size:14px; font-weight:600; padding:11px 16px; border:0;
  background:none; color:#4e5c6d; cursor:pointer; border-bottom:2px solid transparent;
}
.sc-inbox__tabs button[aria-pressed="true"]{
  color:#0d1826; font-weight:700; border-bottom-color:#e0342b;
}
.sc-inbox__count{
  display:inline-block; margin-left:7px; padding:1px 8px; border-radius:99px;
  background:#fff6e6; color:#a15c00; font-size:12px; font-weight:800; border:1px solid #f0d5a8;
}
.sc-inbox__empty{ padding:26px 4px; color:#7d8b9b; font-size:14.5px; }

/* message rows - flat list, no accordion. The body is short enough
   (messages.message is varchar(1000)) that hiding it behind a click was
   the main cost of the old layout: a member could not tell what needed
   answering without opening every row. */
.sc-row{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 4px; border-bottom:1px solid #f1f4f8;
}
.sc-row:last-child{ border-bottom:0; }
.sc-row__av{
  width:40px; height:40px; flex:0 0 40px; border-radius:50%;
  background:#eef1f5; color:#0d1826; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:15px;
}
.sc-row--unread .sc-row__av{ background:#0d1826; color:#fff; }
.sc-row__main{ flex:1; min-width:0; }
.sc-row__top{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.sc-row__who{ font-size:15px; font-weight:700; color:#0d1826; }
.sc-row--unread .sc-row__who::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#e0342b; margin-right:8px; vertical-align:middle;
}
.sc-row__ctry{ font-size:13px; color:#7d8b9b; }
.sc-row__adm{ font-size:12.5px; color:#a15c00; background:#fff6e6;
  border:1px solid #f0d5a8; border-radius:99px; padding:1px 9px; }
.sc-row__date{ margin-left:auto; font-size:12.5px; color:#7d8b9b; white-space:nowrap; }
.sc-row__text{
  margin:6px 0 0; font-size:14.5px; color:#4e5c6d; line-height:1.55;
  word-break:break-word;
}
.sc-row--unread .sc-row__text{ color:#0d1826; }
.sc-row__foot{ display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.sc-row__pay{
  display:inline-block; padding:3px 11px; border-radius:99px; font-size:12px; font-weight:700;
  background:#fff6e6; color:#a15c00; border:1px solid #f0d5a8;
}
.sc-row__done{
  display:inline-block; padding:3px 11px; border-radius:99px; font-size:12px; font-weight:700;
  background:#e8f6f0; color:#0a7d55; border:1px solid #bfe5d5;
}
.sc-row__btn{
  display:inline-block; background:#e0342b; color:#fff !important; border:0;
  border-radius:9px; font-size:13.5px; font-weight:700; padding:9px 18px;
  text-decoration:none !important;
}
.sc-row__btn:hover{ background:#b8241c; color:#fff !important; }
.sc-row__btn--ghost{
  background:#fff; color:#4e5c6d !important; border:1px solid #e2e8f0; font-weight:600;
}
.sc-row__btn--ghost:hover{ background:#f5f8fc; border-color:#bcd4f5; color:#0d1826 !important; }

/* the list sat inside a Bootstrap accordion wrapper; neutralise its chrome */
.panel-group.acc-v1{ margin:0; }
.panel-group.acc-v1 > .sc-row{ background:#fff; }

@media (max-width:760px){ .sc-inbox__stats{ grid-template-columns:minmax(0,1fr); } }

/* ---- Compose (.sc-cmp) ---------------------------------------------
   The page had two identical amber alerts - one describing what the page
   is for, one warning that sharing contact details can suspend an
   account - so the warning carried no more weight than the description.
   The first is plain help text now.

   It also gave no sight of the message being replied to, and no hint of
   the character limit that silently threw at 1000. */
.sc-cmp__help{
  margin:0; padding:14px 18px; font-size:14.5px; color:#7d8b9b;
  border-bottom:1px solid #e2e8f0; background:#fff;
}
.sc-cmp__warn ul{ margin:8px 0 0; padding-left:20px; }
.sc-cmp__warn li{ margin-bottom:6px; font-size:14.5px; }
.sc-cmp__warn li:last-child{ margin-bottom:0; }
.sc-cmp__warn strong{ font-size:15px; }

/* what is being replied to */
.sc-cmp__quote{
  border-left:3px solid #e2e8f0; background:#f8fafc; border-radius:0 10px 10px 0;
  padding:14px 18px; margin:0 0 18px;
}
.sc-cmp__quotewho{
  font-size:12px; font-weight:800; color:#7d8b9b;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px;
}
.sc-cmp__quotetext{ font-size:15px; color:#0d1826; line-height:1.55; word-break:break-word; }

.sc-cmp__meta{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:8px 0 4px;
}
.sc-cmp__count{ font-size:12.5px; color:#7d8b9b; font-variant-numeric:tabular-nums; }
.sc-cmp__count.is-near{ color:#a15c00; font-weight:700; }
.sc-cmp__earn{
  margin-left:auto; display:inline-block; padding:3px 11px; border-radius:99px;
  font-size:12px; font-weight:700; background:#e8f6f0; color:#0a7d55; border:1px solid #bfe5d5;
}
/* shown once the message has been answered - replying again pays nothing,
   and saying so is better than repeating the "+$0.02" promise */
.sc-cmp__noearn{
  margin-left:auto; display:inline-block; padding:3px 11px; border-radius:99px;
  font-size:12px; font-weight:600; background:#f2f4f6; color:#7d8b9b; border:1px solid #e2e8f0;
}

/* Save Changes was theme blue while every other primary action on the
   site is red - the one inconsistency a member actually presses. */
.customizeIcon,
.customizeIcon .rbText{
  background:#e0342b !important; background-image:none !important;
  border:0 !important; border-radius:9px !important;
  color:#fff !important; font-weight:700 !important; text-shadow:none !important;
}
.customizeIcon:hover, .customizeIcon:hover .rbText{ background:#b8241c !important; color:#fff !important; }