/* =====================================================================
   EarnOrbit R7 - visibility, theming and motion pass
   =====================================================================

   Loaded LAST, after eo.css / eo-desktop.css / eo-print.css.

   Why this file exists at all: assets/css/app.css is 2,227 lines of
   stacked R0..R5 override blocks carrying 1,437 !important declarations
   over 1,204 hardcoded hex colours. Editing it in place is unreliable
   and it is the file R5 intends to delete. Everything R7 changes lives
   here instead, so the whole release reverts by removing one <link>.

   Every !important below is beating a specific app.css line, named in
   the comment above it. Nothing here uses !important for convenience.

   Sections
     1  Contrast fixes (code, home trust band, campaign cards)
     2  Navbar and layering
     3  Admin status badges and checkboxes
     4  Dark theme
     5  Elevation and the home promo animation
   ===================================================================== */


/* =====================================================================
   1. CONTRAST FIXES
   ===================================================================== */

/* 1.1 Inline <code>.
   app.css:83 sets color:#cfb2ff, a pale violet left over from the old
   dark theme. It now renders on a near-white page, which is why the
   support address is invisible on faq, contact, fraud-policy,
   is-earnorbit-legit and the hi/ pages. Dark blue on a pale blue chip
   measures about 10.8:1.
   app.css:537 and app.css:1874 re-scope it for admin, so those need
   matching specificity. */
code{
  color:#1e3a8a;
  background:#eef2ff;
  border:1px solid #dbe4fb;
  border-radius:6px;
  padding:.12rem .34rem;
}
body.eo-admin-area code,
body.eo-admin-area .eo-admin-main code{
  color:#1e3a8a!important;                /* beats app.css:1874 */
  background:#eef2ff!important;
  border:1px solid #dbe4fb;
}

/* 1.2 Home trust band ("Know what happens before you start.").
   app.css:1353-1354 shrank the heading to .95rem and dropped the body
   copy to .64rem (about 10px) at rgba(255,255,255,.77). Opaque colours
   and a readable size instead. */
.eo-trust-band h3{
  font-size:1.05rem!important;            /* beats app.css:1353 */
  color:#ffffff!important;
  line-height:1.3!important;
}
.eo-trust-band p{
  font-size:.78rem!important;             /* beats app.css:1354 */
  color:#efe9fb!important;
  line-height:1.5!important;
}
.eo-trust-band .eo-kicker{
  font-size:.74rem!important;             /* beats app.css:1352 */
  color:#e0d3fa!important;
}

/* 1.3 Campaign cards on /campaigns.php.
   The card is a purple gradient. app.css:1167 set the app name to
   .61rem (about 9.8px) and app.css:1049 left it translucent, which is
   the "Goal Offer / GoalApp" readability problem. Nothing in the card
   now sits below 12px or relies on alpha for contrast. */
.eo-offer-wall-copy h2{
  font-size:1rem!important;               /* beats app.css:1166 */
  color:#ffffff!important;
}
.eo-offer-app{
  font-size:.78rem!important;             /* beats app.css:1167 */
  color:#ede6f9!important;
}
.eo-offer-wall-desc{
  font-size:.78rem!important;             /* beats app.css:1168 */
  color:#e6dcf5!important;
  line-height:1.5!important;
}
.eo-offer-wall-copy .eo-offer-badges span{
  padding:.28rem .52rem!important;        /* beats app.css:1165 */
  font-size:.72rem!important;
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(255,255,255,.40)!important;
  color:#ffffff!important;
}
.eo-offer-wall-bottom>span{
  font-size:.72rem!important;             /* beats app.css:1049 */
  color:#e8e0f6!important;
}


/* =====================================================================
   2. NAVBAR AND LAYERING
   ===================================================================== */

/* 2.1 Remove the active-link underline.
   It is not text-decoration: it is a 2px ::after bar, declared five
   times (app.css:43, 314, 794, 1002, 1105). The active page stays
   obvious through its pill background, so nothing is lost. */
.eo-navbar .nav-link.active::after,
.eo-navbar .nav-link[aria-current="page"]::after{
  content:none!important;
  display:none!important;
}
.eo-navbar .nav-link,
.eo-navbar .navbar-brand,
.eo-navbar .eo-user-pill,
.eo-navbar .dropdown-toggle,
.eo-navbar .dropdown-item{
  text-decoration:none!important;
}

/* 2.2 Pin the navbar.
   It was already sticky (app.css:41) but at z-index:1030, and
   dashboard.php gave .eor-howto z-index:9999, so that panel painted
   over it while scrolling. The panel is fixed at source; this makes the
   navbar's layer unoverridable so the class of bug cannot come back.
   1030 is Bootstrap's fixed layer and matches --eo-z-nav. */
.eo-navbar{
  position:sticky!important;
  top:0!important;
  z-index:1030!important;
}


/* =====================================================================
   3. ADMIN STATUS BADGES AND CHECKBOXES
   ===================================================================== */

/* 3.1 Status badges.
   The V10 pass (app.css:1979-1998) covered success, warning and danger
   but never secondary or light, so "ended" kept Bootstrap's default.
   All four now carry white text on a solid fill that clears 4.5:1.

   Note on warning: Bootstrap's yellow cannot carry white text at AA, so
   "pending" and "paused" darken to amber. That is the cost of the white
   text that was asked for. */
/* Success was already covered by app.css:1981, but at #218b59 it
   measures 4.28:1 against white, just under AA. Darkened to 6.08:1
   while in here doing a contrast pass. */
body.eo-admin-area .eo-admin-main .badge.text-bg-success,
body.eo-admin-area .eo-admin-main .badge.bg-success{
  color:#ffffff!important;
  background:#1a7048!important;
  border:1px solid #1a7048!important;
  opacity:1!important;
}
body.eo-admin-area .eo-admin-main .badge.text-bg-secondary,
body.eo-admin-area .eo-admin-main .badge.bg-secondary{
  color:#ffffff!important;
  background:#5b6a60!important;
  border:1px solid #5b6a60!important;
  opacity:1!important;
}
body.eo-admin-area .eo-admin-main .badge.text-bg-warning,
body.eo-admin-area .eo-admin-main .badge.bg-warning{
  color:#ffffff!important;                /* beats app.css:1988-1993 */
  background:#9a6b00!important;
  border:1px solid #9a6b00!important;
  opacity:1!important;
}
body.eo-admin-area .eo-admin-main .badge.text-bg-light{
  color:#26352a!important;                /* light stays dark-on-light */
  background:#eef4eb!important;
  border:1px solid #d7e2d3!important;
}
body.eo-admin-area .eo-admin-main .badge.text-bg-danger,
body.eo-admin-area .eo-admin-main .badge.bg-danger{
  color:#ffffff!important;
  background:#c0392f!important;
  border:1px solid #c0392f!important;
}

/* 3.2 Checkboxes, including the fraud rules "Enabled" column.
   app.css:55 set `background:#090e1f` on .form-check-input. Two bugs in
   one declaration: the colour is a dark-theme leftover, and the
   `background` SHORTHAND resets background-image, which is how
   Bootstrap draws the white tick. A checked box was therefore a flat
   purple square with no tick at all.

   Using background-color (never the shorthand) is what makes the tick
   come back. White fill, black border, green fill plus a white tick
   when checked, so state never depends on colour alone.
   .form-switch keeps its own treatment from app.css:1807-1808. */
.form-check-input:not(.form-switch .form-check-input){
  background-color:#ffffff!important;     /* NOT `background` */
  border:2px solid #0f1a12!important;
  width:1.35em!important;
  height:1.35em!important;
  margin-top:.12em!important;
  opacity:1!important;
  box-shadow:none!important;
}
.form-check-input:not(.form-switch .form-check-input):checked{
  background-color:#1a7048!important;
  border-color:#0f1a12!important;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:78%!important;
}
.form-check-input:not(.form-switch .form-check-input):focus-visible{
  outline:2px solid #0f1a12;
  outline-offset:2px;
  box-shadow:0 0 0 4px #ffffff!important;
}
/* Disabled reads as unavailable, not as unchecked. */
.form-check-input:disabled{opacity:.45!important}


/* =====================================================================
   4. DARK THEME
   =====================================================================

   Tokens live in includes/head_inline.php. This section is the part the
   tokens cannot reach: app.css hardcodes 1,204 hex colours behind 1,437
   !important declarations, so a token-only dark theme would leave every
   legacy surface bright while the design-system ones went dark.

   Scope, as agreed in the plan: the shell and the components the 37
   pages actually use. Selectors are prefixed with the theme attribute on
   <html>, which also buys the specificity needed to beat app.css.
   ===================================================================== */

/* 4.0 The toggle control itself (both themes). */
.eo-theme-toggle{
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:38px;padding:.42rem .7rem;
  border:1px solid var(--eo-border-strong);border-radius:999px;
  background:var(--eo-surface);color:var(--eo-ink);
  font-size:.78rem;font-weight:800;line-height:1;cursor:pointer;
  transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.eo-theme-toggle:hover{background:var(--eo-surface-sunken)}
.eo-theme-toggle:focus-visible{
  outline:2px solid var(--eo-focus);outline-offset:2px;
  box-shadow:0 0 0 4px var(--eo-focus-halo);
}
.eo-theme-toggle i{font-size:.95rem;line-height:1}
/* The label is for the dropdown entry and for widths that have room. In
   a tight bar the icon alone carries it. */
@media (max-width:1199.98px) and (min-width:992px){
  .eo-theme-toggle .eo-theme-toggle-text{display:none}
  .eo-theme-toggle{padding:.42rem .55rem}
}

/* 4.1 Shell. */
:root[data-eo-theme="dark"] body{
  background:var(--eo-canvas)!important;
  color:var(--eo-ink)!important;
}
:root[data-eo-theme="dark"] body::before{opacity:.02!important}
:root[data-eo-theme="dark"] .eo-navbar{
  background:rgba(16,19,15,.94)!important;
  border-bottom:1px solid var(--eo-border)!important;
  box-shadow:0 6px 20px rgba(0,0,0,.45)!important;
}
:root[data-eo-theme="dark"] .eo-navbar .nav-link,
:root[data-eo-theme="dark"] .eo-navbar .navbar-brand,
:root[data-eo-theme="dark"] .eo-user-pill,
:root[data-eo-theme="dark"] .eo-user-pill span:not(.eo-user-avatar){
  color:var(--eo-text-2)!important;
}
:root[data-eo-theme="dark"] .eo-navbar .nav-link:hover,
:root[data-eo-theme="dark"] .eo-navbar .nav-link.active{
  color:var(--eo-ink)!important;background:var(--eo-surface-sunken)!important;
}
:root[data-eo-theme="dark"] .navbar-toggler{
  border-color:var(--eo-border-strong)!important;background:var(--eo-surface)!important;
}
:root[data-eo-theme="dark"] .navbar-toggler-icon{filter:invert(1) brightness(1.6)}
:root[data-eo-theme="dark"] .eo-footer,
:root[data-eo-theme="dark"] footer{
  background:var(--eo-surface)!important;
  border-top:1px solid var(--eo-border)!important;
  color:var(--eo-text-2)!important;
}
:root[data-eo-theme="dark"] .eo-footer a{color:var(--eo-text-2)!important}
:root[data-eo-theme="dark"] .eo-footer a:hover{color:var(--eo-ink)!important}

/* 4.2 Dropdown menu. */
:root[data-eo-theme="dark"] .eo-navbar .dropdown-menu,
:root[data-eo-theme="dark"] .dropdown-menu{
  background:var(--eo-surface)!important;
  border:1px solid var(--eo-border)!important;
  box-shadow:var(--eo-elev-3)!important;
}
:root[data-eo-theme="dark"] .eo-navbar .dropdown-menu .dropdown-item,
:root[data-eo-theme="dark"] .dropdown-menu .dropdown-item{
  color:var(--eo-text-2)!important;background:transparent!important;
}
:root[data-eo-theme="dark"] .eo-navbar .dropdown-menu .dropdown-item:hover,
:root[data-eo-theme="dark"] .eo-navbar .dropdown-menu .dropdown-item:focus{
  background:var(--eo-surface-sunken)!important;color:var(--eo-ink)!important;
}
:root[data-eo-theme="dark"] .eo-account-menu-head,
:root[data-eo-theme="dark"] .eo-account-menu-head strong{color:var(--eo-ink)!important}
:root[data-eo-theme="dark"] .eo-account-menu-head small{color:var(--eo-muted)!important}
:root[data-eo-theme="dark"] .dropdown-divider{border-top-color:var(--eo-border)!important}

/* 4.3 Cards and panels. One list, because app.css gives every one of
   these a hardcoded #fff or #fbfcf9 background. */
:root[data-eo-theme="dark"] .card,
:root[data-eo-theme="dark"] .stat,
:root[data-eo-theme="dark"] .eo-offer-card,
:root[data-eo-theme="dark"] .eo-section-block,
:root[data-eo-theme="dark"] .eo-profile-card,
:root[data-eo-theme="dark"] .eo-how-card,
:root[data-eo-theme="dark"] .eo-quick-strip>div,
:root[data-eo-theme="dark"] .eo-trust-strip>div,
:root[data-eo-theme="dark"] .eo-empty-state,
:root[data-eo-theme="dark"] .eo-complete-state,
:root[data-eo-theme="dark"] .eo-detail-card,
:root[data-eo-theme="dark"] .eo-detail-section-block,
:root[data-eo-theme="dark"] .eo-referral-card,
:root[data-eo-theme="dark"] .eo-telegram-card,
:root[data-eo-theme="dark"] .eo-start-panel,
:root[data-eo-theme="dark"] .eo-editor-pane,
:root[data-eo-theme="dark"] .eo-preview-pane{
  background:var(--eo-surface)!important;
  border-color:var(--eo-border)!important;
  color:var(--eo-ink)!important;
}
:root[data-eo-theme="dark"] .eo-requirements-box,
:root[data-eo-theme="dark"] .eo-editor-help{
  background:var(--eo-surface-sunken)!important;
  border-color:var(--eo-border)!important;
  color:var(--eo-text-2)!important;
}
:root[data-eo-theme="dark"] h1,
:root[data-eo-theme="dark"] h2,
:root[data-eo-theme="dark"] h3,
:root[data-eo-theme="dark"] h4,
:root[data-eo-theme="dark"] h5,
:root[data-eo-theme="dark"] h6{color:var(--eo-ink)!important}
:root[data-eo-theme="dark"] .text-muted,
:root[data-eo-theme="dark"] .eo-offer-desc,
:root[data-eo-theme="dark"] .eo-detail-text,
:root[data-eo-theme="dark"] .eo-section-head p{color:var(--eo-muted)!important}
:root[data-eo-theme="dark"] .eo-offer-main p,
:root[data-eo-theme="dark"] .eo-quick-strip small,
:root[data-eo-theme="dark"] .eo-trust-strip small{color:var(--eo-muted)!important}
:root[data-eo-theme="dark"] .eo-quick-strip strong,
:root[data-eo-theme="dark"] .eo-trust-strip strong,
:root[data-eo-theme="dark"] .eo-offer-main h3{color:var(--eo-ink)!important}
:root[data-eo-theme="dark"] .eo-offer-logo{
  background:var(--eo-surface-sunken)!important;border-color:var(--eo-border)!important;
}
:root[data-eo-theme="dark"] .eo-offer-footer{border-top-color:var(--eo-border)!important}
:root[data-eo-theme="dark"] .eo-offer-footer>span{color:var(--eo-muted)!important}
:root[data-eo-theme="dark"] .eo-quick-icon,
:root[data-eo-theme="dark"] .eo-empty-icon{
  background:var(--eo-surface-sunken)!important;color:var(--eo-lime-300)!important;
}

/* 4.4 The pale-green home promo band and page banners. */
:root[data-eo-theme="dark"] .eo-catch-promo{
  background:linear-gradient(105deg,#1a2016 0%,#151a13 70%,#1c2318 100%)!important;
  border-color:var(--eo-border)!important;
}
:root[data-eo-theme="dark"] .eo-catch-shell,
:root[data-eo-theme="dark"] .eo-catch-topbar,
:root[data-eo-theme="dark"] .eo-catch-brand strong{color:var(--eo-ink)!important}
:root[data-eo-theme="dark"] .eo-catch-balance{
  background:var(--eo-surface)!important;color:var(--eo-ink)!important;
  border-color:var(--eo-border)!important;
}
:root[data-eo-theme="dark"] .eo-catch-promo p,
:root[data-eo-theme="dark"] .eo-catch-brand small{color:var(--eo-muted)!important}
:root[data-eo-theme="dark"] .eo-promo-gift{
  background:var(--eo-surface)!important;border-color:var(--eo-border)!important;
}
:root[data-eo-theme="dark"] .eo-promo-orbit{border-color:rgba(180,236,44,.22)!important}
:root[data-eo-theme="dark"] .eo-page-banner h1{color:var(--eo-ink)!important}
:root[data-eo-theme="dark"] .eo-page-banner p{color:var(--eo-muted)!important}
:root[data-eo-theme="dark"] .eo-kicker{color:var(--eo-accent)!important}

/* 4.5 Forms. */
:root[data-eo-theme="dark"] .form-control,
:root[data-eo-theme="dark"] .form-select,
:root[data-eo-theme="dark"] textarea.form-control{
  background:var(--eo-surface-sunken)!important;
  border-color:var(--eo-border-strong)!important;
  color:var(--eo-ink)!important;
}
:root[data-eo-theme="dark"] .form-control::placeholder{color:var(--eo-placeholder)!important}
:root[data-eo-theme="dark"] .form-control:focus,
:root[data-eo-theme="dark"] .form-select:focus{
  background:var(--eo-surface)!important;border-color:var(--eo-accent)!important;
  box-shadow:0 0 0 3px rgba(167,139,250,.25)!important;color:var(--eo-ink)!important;
}
:root[data-eo-theme="dark"] .form-label{color:var(--eo-text-2)!important}
:root[data-eo-theme="dark"] .form-text{color:var(--eo-muted)!important}
:root[data-eo-theme="dark"] .eo-searchbar{
  background:var(--eo-surface)!important;border-color:var(--eo-border-strong)!important;
}
:root[data-eo-theme="dark"] .eo-searchbar .form-control{background:transparent!important}
/* Checkbox keeps section 3's shape; only the unchecked fill flips, so a
   white box does not glare out of a dark form. */
:root[data-eo-theme="dark"] .form-check-input:not(.form-switch .form-check-input){
  background-color:var(--eo-surface)!important;
  border-color:var(--eo-border-strong)!important;
}
:root[data-eo-theme="dark"] .form-check-input:not(.form-switch .form-check-input):checked{
  background-color:#1a7048!important;border-color:#4ade80!important;
}
:root[data-eo-theme="dark"] .form-check-label{color:var(--eo-text-2)!important}

/* 4.6 Buttons. The lime reward fill keeps dark text in both themes. */
:root[data-eo-theme="dark"] .eo-btn-outline,
:root[data-eo-theme="dark"] .btn-outline-secondary,
:root[data-eo-theme="dark"] .btn-outline-dark,
:root[data-eo-theme="dark"] .btn-outline-primary{
  background:var(--eo-surface)!important;
  border-color:var(--eo-border-strong)!important;
  color:var(--eo-ink)!important;
}
:root[data-eo-theme="dark"] .eo-btn-outline:hover,
:root[data-eo-theme="dark"] .btn-outline-secondary:hover,
:root[data-eo-theme="dark"] .btn-outline-dark:hover{
  background:var(--eo-surface-sunken)!important;color:var(--eo-ink)!important;
}
:root[data-eo-theme="dark"] .eo-btn-white{
  background:var(--eo-surface)!important;color:var(--eo-ink)!important;
  border-color:var(--eo-border-strong)!important;
}
:root[data-eo-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.eo-offer-cta):not(.eo-offer-wall-cta):not(.navbar-brand):not(.eo-admin-link){
  color:var(--eo-accent)!important;
}

/* 4.7 Tables. */
:root[data-eo-theme="dark"] .table{
  --bs-table-color:var(--eo-ink);
  --bs-table-bg:transparent;
  --bs-table-border-color:var(--eo-border);
  --bs-table-striped-bg:rgba(255,255,255,.03);
  --bs-table-hover-bg:rgba(255,255,255,.05);
  color:var(--eo-ink)!important;
}
:root[data-eo-theme="dark"] .table thead th{
  color:var(--eo-text-2)!important;
  background:var(--eo-surface-sunken)!important;
  border-color:var(--eo-border)!important;
}
:root[data-eo-theme="dark"] .table td,
:root[data-eo-theme="dark"] .table th{border-color:var(--eo-border)!important}
:root[data-eo-theme="dark"] .table tbody td{color:var(--eo-text-2)!important}
:root[data-eo-theme="dark"] .border-bottom{border-bottom-color:var(--eo-border)!important}
:root[data-eo-theme="dark"] hr{border-top-color:var(--eo-border)!important}

/* 4.8 Alerts and inline code. */
:root[data-eo-theme="dark"] .alert-success{background:var(--eo-success-bg)!important;border-color:#1c5138!important;color:var(--eo-success-fg)!important}
:root[data-eo-theme="dark"] .alert-danger{background:var(--eo-danger-bg)!important;border-color:#6b2020!important;color:var(--eo-danger-fg)!important}
:root[data-eo-theme="dark"] .alert-warning{background:var(--eo-warning-bg)!important;border-color:#6b4d0d!important;color:var(--eo-warning-fg)!important}
:root[data-eo-theme="dark"] .alert-info{background:var(--eo-info-bg)!important;border-color:#1e3a6b!important;color:var(--eo-info-fg)!important}
/* Section 1.1 put the support address on a pale blue chip. On dark that
   chip has to invert or it becomes the brightest thing on the page. */
:root[data-eo-theme="dark"] code,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main code{
  color:#93c5fd!important;background:#11203c!important;border-color:#1e3a6b!important;
}

/* 4.9 Admin shell. */
:root[data-eo-theme="dark"] body.eo-admin-area,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-shell{background:var(--eo-canvas)!important;color:var(--eo-ink)!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-sidebar{
  background:var(--eo-surface)!important;border-right:1px solid var(--eo-border)!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-link{color:var(--eo-text-2)!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-link:hover,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-link.active{
  color:var(--eo-ink)!important;background:var(--eo-surface-sunken)!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-brand strong{color:var(--eo-ink)!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-brand span,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-side-group{color:var(--eo-muted)!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main{background:transparent!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main a:not(.btn):not(.eo-admin-link){color:var(--eo-accent)!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .table tbody td,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .table tbody td .text-muted{color:var(--eo-text-2)!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-navbar{background:rgba(16,19,15,.96)!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-navbar .nav-link{color:var(--eo-text-2)!important}

/* 4.10 Skip link. */
:root[data-eo-theme="dark"] .eo-skip{
  background:var(--eo-surface)!important;color:var(--eo-ink)!important;
  border:1px solid var(--eo-border-strong)!important;
}


/* =====================================================================
   5. ELEVATION AND THE HOME PROMO ANIMATION
   =====================================================================

   Everything here animates transform and opacity only, so it runs on
   the compositor and costs no layout. app.css:1069 already forces
   `animation:none!important` under prefers-reduced-motion, and section
   5.3 repeats the guard locally so it cannot be lost if app.css goes.
   ===================================================================== */

/* 5.1 The home promo art.
   This is the artwork in image-01.png: .eo-promo-orbit.one and .two are
   the rings, .eo-promo-gift is the white card, .eo-promo-coin is the
   rupee disc. The glyph is U+20B9, which the Inter subset declared in
   head_inline.php explicitly covers, so rotating it is safe. */
.eo-promo-art{
  perspective:680px;
  transform-style:preserve-3d;
}

/* Rings read as rings only if the stroke survives the turn. */
.eo-promo-orbit{
  border-width:1.5px!important;               /* beats app.css:1139 */
  will-change:transform;
}
/* The circle turns edge-on and back, which is what sells the depth. */
.eo-promo-orbit.one{
  animation:eo-r7-ring-turn 18s linear infinite;
}
/* The ellipse keeps its -18deg rest angle and spins through it. */
.eo-promo-orbit.two{
  animation:eo-r7-ring-spin 26s linear infinite reverse;
}
.eo-promo-coin{
  animation:eo-r7-coin-flip 6.5s cubic-bezier(.45,0,.2,1) infinite;
  transform-style:preserve-3d;
  will-change:transform;
}
.eo-promo-gift{
  position:relative;
  animation:eo-r7-gift-float 5s ease-in-out infinite;
  transform-style:preserve-3d;
  will-change:transform;
}
/* A shadow that shrinks as the card rises. Without it the float reads
   as the card changing size rather than lifting. */
.eo-promo-gift::after{
  content:"";
  position:absolute;
  left:50%;bottom:-13px;
  width:74%;height:11px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(58,78,26,.42),transparent 72%);
  animation:eo-r7-gift-shadow 5s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}

@keyframes eo-r7-ring-turn{
  from{transform:rotateY(0deg)}
  to{transform:rotateY(360deg)}
}
@keyframes eo-r7-ring-spin{
  from{transform:rotate(-18deg) rotateX(14deg)}
  to{transform:rotate(342deg) rotateX(14deg)}
}
/* Holds still, then turns. A continuous spin just blurs at this size. */
@keyframes eo-r7-coin-flip{
  0%,54%{transform:rotateY(0deg)}
  100%{transform:rotateY(360deg)}
}
@keyframes eo-r7-gift-float{
  0%,100%{transform:translateY(0) rotateX(0deg) scale(1)}
  50%{transform:translateY(-6px) rotateX(4deg) scale(1.045)}
}
@keyframes eo-r7-gift-shadow{
  0%,100%{opacity:.4;transform:translateX(-50%) scale(1)}
  50%{opacity:.16;transform:translateX(-50%) scale(.8)}
}

/* 5.2 Elevation.
   The --eo-elev-* ramp already existed in head_inline.php and was never
   applied: app.css:1332 flattened every card to one soft shadow. The
   dark ramp is redefined in the dark token block, so these rules work
   in both themes without being repeated. */
.card,
.stat,
.eo-offer-card,
.eo-offer-wall-card,
.eo-section-block,
.eo-profile-card,
.eo-how-card,
.eo-referral-card,
.eo-telegram-card,
.eo-trust-band,
.eo-empty-state,
.eo-complete-state,
.eo-detail-card,
.eo-quick-strip>div,
.eo-trust-strip>div{
  box-shadow:var(--eo-elev-2)!important;      /* beats app.css:1332 */
  transition:box-shadow .16s var(--eo-ease-standard),transform .16s var(--eo-ease-standard);
}
.card:hover,
.eo-offer-card:hover,
.eo-offer-wall-card:hover,
.eo-how-card:hover,
.eo-quick-strip>div:hover,
.eo-trust-strip>div:hover{
  box-shadow:var(--eo-elev-3)!important;
  transform:translateY(-3px);
}
/* Images inside cards get their own lift, since the ask named images
   as well as card-like containers. */
.eo-offer-logo,
.eo-promo-gift,
.eo-catch-mark{
  box-shadow:var(--eo-elev-2)!important;
}
.eo-offer-logo.large,
.eo-offer-logo.detail{
  box-shadow:var(--eo-elev-3)!important;
}

/* Buttons. app.css:1336 already lifts them 1px on hover; the shadow is
   what makes that lift legible. */
.btn,
.eo-offer-cta,
.eo-offer-wall-cta,
.eo-theme-toggle{
  box-shadow:var(--eo-elev-1)!important;
  transition:box-shadow .14s var(--eo-ease-standard),transform .14s var(--eo-ease-standard),background-color .14s ease,border-color .14s ease;
}
.btn:hover,
.eo-offer-cta:hover,
.eo-offer-wall-cta:hover,
.eo-theme-toggle:hover{
  box-shadow:var(--eo-elev-2)!important;
  transform:translateY(-1px);
}
.btn:active,
.eo-offer-cta:active,
.eo-offer-wall-cta:active{
  box-shadow:var(--eo-elev-1)!important;
  transform:translateY(0);
}
/* A focus ring must never be competing with a shadow for attention. */
.btn:focus-visible,
.eo-offer-cta:focus-visible,
.eo-offer-wall-cta:focus-visible{
  outline:2px solid var(--eo-focus);
  outline-offset:2px;
}

/* 5.3 Motion and transparency preferences.
   Repeated locally so the guard survives app.css being deleted in R5. */
@media (prefers-reduced-motion:reduce){
  .eo-promo-orbit.one,
  .eo-promo-orbit.two,
  .eo-promo-coin,
  .eo-promo-gift,
  .eo-promo-gift::after{
    animation:none!important;
    transform:none!important;
  }
  .eo-promo-orbit.two{transform:rotate(-18deg)!important}
  .card:hover,
  .eo-offer-card:hover,
  .eo-offer-wall-card:hover,
  .btn:hover,
  .eo-theme-toggle:hover{transform:none!important}
}


/* =====================================================================
   6. R7b REVISIONS
   =====================================================================
   Follow-up pass: icon-only theme button placed right of the account
   pill, light/dark only, a readable navbar in dark mode, and one brand
   logo everywhere.
   ===================================================================== */

/* 6.1 The theme button is now icon only.
   Section 4.0 sized it for an icon plus a label. It is a square target
   instead, 40px, which clears the 24px minimum comfortably and lines up
   with the account pill next to it. */
.eo-theme-toggle{
  width:40px;
  height:40px;
  min-height:40px;
  padding:0!important;
  gap:0;
  justify-content:center;
  border-radius:50%;
  flex:none;
}
.eo-theme-toggle i{font-size:1.05rem}
/* The label span only exists in the dropdown entry now. If any markup
   still carries one inside the round button, keep it out of the way. */
.eo-theme-toggle .eo-theme-toggle-text{display:none}
@media (max-width:991.98px){
  /* Collapsed menu: the button sits on its own row, so give it room. */
  .eo-theme-toggle{margin-top:.35rem}
}

/* 6.2 Dark mode navbar: black bar, white controls, logo on a white chip.

   Revised again in R7c. The previous pass kept the bar light so the dark
   ink wordmark stayed readable; the owner asked for a black bar instead,
   with the logo given a white backing plate. That is the better answer:
   the PNG has no light variant, so a white chip is the only way it reads
   on black without an invert filter mangling the violet.

   Specificity matters here, not just order. eo.css:410 carries
     body.eo-fx-glass:not(.eo-admin-area) .eo-navbar{background:...!important}
   which is (0,4,1). A selector of (0,3,0) LOSES to it, which is how the
   first dark pass ended up with pale grey links on a light glass bar.
   Everything below is (0,4,1) or higher. */
:root[data-eo-theme="dark"] body.eo-fx-glass .eo-navbar,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-navbar,
:root[data-eo-theme="dark"] body .eo-navbar{
  background:#000000!important;
  border-bottom:1px solid #2a2f28!important;
  box-shadow:0 4px 18px rgba(0,0,0,.6)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* The wordmark is dark ink on transparent. On black it needs a plate,
   not a filter: inverting it turns the violet orbit a muddy green. */
:root[data-eo-theme="dark"] .eo-navbar .navbar-brand{
  background:#ffffff!important;
  border-radius:10px!important;
  padding:5px 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  line-height:0!important;
}
:root[data-eo-theme="dark"] .eo-brand-logo{filter:none!important}

/* Links: white on black, and each one gets its own dark plate on hover
   so the hit area is obvious against the bar. */
:root[data-eo-theme="dark"] .eo-navbar .nav-link,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-navbar .nav-link{
  color:#ffffff!important;
  font-weight:800!important;
}
:root[data-eo-theme="dark"] .eo-navbar .nav-link i,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-navbar .nav-link i{
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-navbar .nav-link:hover,
:root[data-eo-theme="dark"] .eo-navbar .nav-link:focus,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-navbar .nav-link:hover{
  color:#ffffff!important;
  background:#23272160!important;
  background-color:#232721!important;
}
:root[data-eo-theme="dark"] .eo-navbar .nav-link.active,
:root[data-eo-theme="dark"] .eo-navbar .nav-link[aria-current="page"],
:root[data-eo-theme="dark"] body.eo-admin-area .eo-navbar .nav-link.active{
  color:#000000!important;
  background:#b4ec2c!important;      /* lime always carries dark text */
  font-weight:900!important;
}
:root[data-eo-theme="dark"] .eo-navbar .nav-link.active i{color:#000000!important}

/* Account pill and the collapse toggle. */
:root[data-eo-theme="dark"] .eo-navbar .eo-user-pill,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-navbar .eo-user-pill{
  background:#181c17!important;
  border:1px solid #454b42!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-navbar .eo-user-pill span:not(.eo-user-avatar),
:root[data-eo-theme="dark"] body.eo-admin-area .eo-navbar .eo-user-pill span:not(.eo-user-avatar){
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-navbar .eo-user-pill:hover{background:#232721!important}
:root[data-eo-theme="dark"] .eo-theme-toggle{
  background:#181c17!important;
  border:1px solid #ffffff!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-theme-toggle:hover{background:#2b302a!important}
:root[data-eo-theme="dark"] .eo-navbar .navbar-toggler{
  background:#181c17!important;
  border:1px solid #ffffff!important;
}
:root[data-eo-theme="dark"] .eo-navbar .navbar-toggler-icon{
  filter:invert(1) brightness(2)!important;
}
:root[data-eo-theme="dark"] .eo-navbar .btn-primary{
  background:#b4ec2c!important;border-color:#b4ec2c!important;color:#12190a!important;
}

/* The account dropdown hangs off a black bar, so it is dark too. */
:root[data-eo-theme="dark"] .eo-navbar .dropdown-menu{
  background:#0f120e!important;
  border:1px solid #2a2f28!important;
  box-shadow:0 14px 34px rgba(0,0,0,.7)!important;
}
:root[data-eo-theme="dark"] .eo-navbar .dropdown-menu .dropdown-item{color:#ffffff!important}
:root[data-eo-theme="dark"] .eo-navbar .dropdown-menu .dropdown-item:hover,
:root[data-eo-theme="dark"] .eo-navbar .dropdown-menu .dropdown-item:focus{
  background:#232721!important;color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-navbar .dropdown-menu .dropdown-item.text-danger{color:#ff9a9a!important}
:root[data-eo-theme="dark"] .eo-account-menu-head,
:root[data-eo-theme="dark"] .eo-account-menu-head strong{color:#ffffff!important}
:root[data-eo-theme="dark"] .eo-account-menu-head small{color:#b9c3b6!important}
:root[data-eo-theme="dark"] .eo-navbar .dropdown-divider{border-top-color:#2a2f28!important}

/* 6.3 One brand logo, three sizes.
   All of them are the same file now (eo_brand_logo() in includes/ui.php),
   so only the rendered width differs by context. */
.eo-admin-brand-logo{
  width:150px!important;
  height:auto!important;
  display:block;
  margin-bottom:.35rem;
}
.eo-admin-brand{
  display:block!important;
  text-align:left;
}
.eo-admin-brand strong{display:block;font-size:.88rem}
.eo-footer-logo{
  width:124px!important;
  height:auto!important;
  flex:none;
}
.eo-auth-brand{
  width:190px!important;
  height:auto!important;
  max-height:none!important;
}
@media (max-width:767.98px){
  .eo-auth-brand{width:168px!important}
  .eo-footer-logo{width:110px!important}
}
/* R7c: these used an invert filter in dark mode, which turned the violet
   orbit a muddy green. The PNG has no light variant, so every instance
   sits on a white plate instead. Same treatment as the navbar brand. */
:root[data-eo-theme="dark"] .eo-footer-logo,
:root[data-eo-theme="dark"] .eo-admin-brand-logo,
:root[data-eo-theme="dark"] .eo-auth-brand{
  filter:none!important;
  background:#ffffff!important;
  border-radius:8px!important;
  padding:6px 10px!important;
  box-sizing:border-box!important;
}


/* =====================================================================
   7. R7c - DARK MODE, SECOND PASS
   =====================================================================

   Why a second pass: section 4 was written at specificity (0,3,0), for
   example `:root[data-eo-theme="dark"] .card`. app.css scopes its admin
   theme as `body.eo-admin-area .eo-admin-main .card{...!important}`,
   which is (0,3,2) and therefore WINS. That is why every admin surface
   stayed white in dark mode however many !important flags section 4
   carried: the fight was never about !important, it was about selector
   weight.

   Everything in this section is prefixed to out-weigh app.css. The admin
   rules land at (0,5,2) or higher.

   Palette: page black, surfaces a hair above it so structure survives,
   text white, meta a light grey that still clears AA.
   ===================================================================== */

:root[data-eo-theme="dark"]{
  --eo-r7c-page:#000000;
  --eo-r7c-surface:#101210;
  --eo-r7c-raised:#171a16;
  --eo-r7c-line:#2e332c;
  --eo-r7c-text:#ffffff;
  --eo-r7c-meta:#c3ccc0;
}

/* 7.1 Offer detail page (campaign.php).
   These three blocks are pale green gradients in light mode and were
   unreadable once the page went dark around them. */
:root[data-eo-theme="dark"] .eo-detail-summary{
  background:#000000!important;           /* beats app.css:1053 */
  border:1px solid var(--eo-r7c-line)!important;
}
:root[data-eo-theme="dark"] .eo-detail-summary .eo-detail-summary-copy h1,
:root[data-eo-theme="dark"] .eo-detail-summary .eo-detail-summary-copy p,
:root[data-eo-theme="dark"] .eo-detail-summary-copy h1{
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-detail-summary-copy p{color:var(--eo-r7c-meta)!important}
:root[data-eo-theme="dark"] .eo-detail-summary .eo-offer-badges span{
  background:#1d211c!important;
  border-color:#3c423a!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-detail-summary .eo-offer-badges span.verified{
  background:#172a0c!important;border-color:#3c5a1c!important;color:#cdf07a!important;
}
:root[data-eo-theme="dark"] .eo-detail-reward small,
:root[data-eo-theme="dark"] .eo-detail-reward span{color:var(--eo-r7c-meta)!important}
:root[data-eo-theme="dark"] .eo-detail-reward strong{color:#cdf07a!important}

/* 7.2 The trust line under the summary. */
:root[data-eo-theme="dark"] .eo-detail-trustline span{
  background:#000000!important;           /* beats app.css:1053 */
  border:1px solid var(--eo-r7c-line)!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-detail-trustline i{color:#cdf07a!important}

/* 7.3 The start panel in the right rail. */
:root[data-eo-theme="dark"] .eo-start-panel{
  background:#000000!important;           /* beats app.css section 4.3 */
  border:1px solid var(--eo-r7c-line)!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-start-panel h2,
:root[data-eo-theme="dark"] .eo-start-panel .h5,
:root[data-eo-theme="dark"] .eo-start-panel strong{color:#ffffff!important}
:root[data-eo-theme="dark"] .eo-start-panel p,
:root[data-eo-theme="dark"] .eo-start-panel small{color:var(--eo-r7c-meta)!important}
:root[data-eo-theme="dark"] .eo-start-badge{
  background:#1d211c!important;border-color:#3c423a!important;color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-start-price{color:#cdf07a!important}
:root[data-eo-theme="dark"] .eo-start-points>div{border-color:var(--eo-r7c-line)!important}
:root[data-eo-theme="dark"] .eo-start-points i{color:#cdf07a!important}
/* The lime CTA keeps dark text in both themes. */
:root[data-eo-theme="dark"] .eo-start-panel .eo-btn-lime{
  background:#b4ec2c!important;border-color:#b4ec2c!important;color:#12190a!important;
}

/* Detail page body blocks, so the panel above does not sit on a light one. */
:root[data-eo-theme="dark"] .eo-detail-card,
:root[data-eo-theme="dark"] .eo-detail-section-block{
  background:var(--eo-r7c-surface)!important;
  border-color:var(--eo-r7c-line)!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-detail-section-title h3{color:#ffffff!important}
:root[data-eo-theme="dark"] .eo-detail-section-title small,
:root[data-eo-theme="dark"] .eo-detail-text,
:root[data-eo-theme="dark"] .eo-event-list small{color:var(--eo-r7c-meta)!important}
:root[data-eo-theme="dark"] .eo-event-list strong{color:#ffffff!important}
:root[data-eo-theme="dark"] .eo-event-list>div{border-bottom-color:var(--eo-r7c-line)!important}
:root[data-eo-theme="dark"] .eo-requirements-box{
  background:#0b0d0a!important;border-color:var(--eo-r7c-line)!important;color:var(--eo-r7c-meta)!important;
}

/* 7.4 Campaign tile initials.
   app.css:1041 colours .eo-offer-logo text #5b20a9, a dark violet. On the
   dark tile it merged into the background. White reads on both the dark
   tile and the purple card behind it. */
:root[data-eo-theme="dark"] .eo-offer-logo,
:root[data-eo-theme="dark"] .eo-offer-logo span,
:root[data-eo-theme="dark"] .eo-offer-logo.large,
:root[data-eo-theme="dark"] .eo-offer-logo.large span,
:root[data-eo-theme="dark"] .eo-offer-logo.detail,
:root[data-eo-theme="dark"] .eo-offer-logo.detail span{
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-offer-logo,
:root[data-eo-theme="dark"] .eo-offer-logo.large,
:root[data-eo-theme="dark"] .eo-offer-logo.detail{
  background:#1d211c!important;           /* beats app.css:1164 */
  border:1px solid #3c423a!important;
}
/* A real advertiser icon still gets a white plate: those PNGs are drawn
   for a light tile, exactly like the brand wordmark. */
:root[data-eo-theme="dark"] .eo-offer-logo img{
  background:#ffffff!important;
  border-radius:10px!important;
}

/* 7.5 ADMIN: black page, white text, on every admin screen.
   Prefixed to (0,5,2)+ so it beats app.css:1218-1235 and 1458-1484. */
:root[data-eo-theme="dark"] body.eo-admin-area{
  background:#000000!important;           /* beats app.css:1218 */
  color:var(--eo-r7c-text)!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-shell{background:#000000!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main{
  background:transparent!important;
  color:var(--eo-r7c-text)!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area::before{opacity:0!important}

/* Sidebar */
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-sidebar{
  background:#0b0d0a!important;           /* beats app.css:1459 */
  border-right:1px solid var(--eo-r7c-line)!important;
  box-shadow:none!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-link{
  color:#e4eae2!important;                /* beats app.css:1460 */
  background:transparent!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-link:hover{
  color:#ffffff!important;background:#1d211c!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-link.active{
  color:#000000!important;                /* beats app.css:1462 */
  background:#b4ec2c!important;
  box-shadow:inset 3px 0 0 #ffffff!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-brand{
  border-bottom-color:var(--eo-r7c-line)!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-brand strong{color:#ffffff!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-brand span,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-side-group{color:var(--eo-r7c-meta)!important}

/* Cards, panels and stat tiles */
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .card,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-panel,
:root[data-eo-theme="dark"] body.eo-admin-area .stat,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .eo-editor-pane,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .eo-preview-pane{
  background:var(--eo-r7c-surface)!important;   /* beats app.css:1227/1230 */
  border:1px solid var(--eo-r7c-line)!important;
  color:var(--eo-r7c-text)!important;
  box-shadow:none!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .card-body{color:var(--eo-r7c-text)!important}
:root[data-eo-theme="dark"] body.eo-admin-area .stat small{color:var(--eo-r7c-meta)!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main h1,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main h2,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main h3,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main h4,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main h5,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main h6,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-topbar h1{
  color:#ffffff!important;                /* beats app.css:1229/1475 */
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .text-muted,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main small.text-muted,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .form-text,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main p{
  color:var(--eo-r7c-meta)!important;     /* beats app.css:1476 */
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-topbar .kicker{color:#cdf07a!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main a:not(.btn):not(.eo-admin-link){
  color:#cdf07a!important;                /* beats app.css:1840 */
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main a:not(.btn):not(.eo-admin-link):hover{
  color:#e4ffa8!important;
}

/* Tables */
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .table{
  --bs-table-bg:transparent;
  --bs-table-color:#ffffff;
  --bs-table-border-color:#2e332c;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .table thead th{
  color:#ffffff!important;                /* beats app.css:536 */
  background:#1a1d19!important;
  border-color:var(--eo-r7c-line)!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .table td,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .table th{
  color:#ffffff!important;                /* beats app.css:1785 */
  border-color:var(--eo-r7c-line)!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .table tbody tr:hover > *{
  background:#1a1d19!important;           /* beats app.css:1786 */
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .table tbody td .text-muted,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .table tbody td small{
  color:var(--eo-r7c-meta)!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .border-bottom{
  border-bottom-color:var(--eo-r7c-line)!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main hr{border-top-color:var(--eo-r7c-line)!important}

/* Forms */
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .form-control,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .form-select,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main textarea.form-control,
:root[data-eo-theme="dark"] body.eo-admin-area .form-select{
  background:#0b0d0a!important;           /* beats app.css:1480 */
  border:1px solid #4a5147!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .form-control:focus,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .form-select:focus{
  background:#141711!important;border-color:#b4ec2c!important;
  box-shadow:0 0 0 3px rgba(180,236,44,.22)!important;color:#ffffff!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .form-label,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .form-check-label{
  color:#ffffff!important;                /* beats app.css:1805 */
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main input::placeholder,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main textarea::placeholder{
  color:#96a093!important;                /* beats app.css:1799 */
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .form-check-input:not(.form-switch .form-check-input){
  background-color:#0b0d0a!important;border-color:#ffffff!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .form-check-input:not(.form-switch .form-check-input):checked{
  background-color:#1a7048!important;border-color:#4ade80!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-upload-preview{
  background:#0b0d0a!important;border-color:var(--eo-r7c-line)!important;
}

/* Buttons */
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-outline-secondary,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-outline-dark,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-outline-primary,
:root[data-eo-theme="dark"] body.eo-admin-area .btn-outline-secondary,
:root[data-eo-theme="dark"] body.eo-admin-area .btn-dark{
  background:#171a16!important;           /* beats app.css:1481/1483/1825 */
  border:1px solid #6d766a!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-outline-secondary:hover,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-outline-dark:hover,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-outline-primary:hover,
:root[data-eo-theme="dark"] body.eo-admin-area .btn-dark:hover{
  background:#262b24!important;color:#ffffff!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-outline-danger{
  background:#171a16!important;border-color:#e08a92!important;color:#ff9a9a!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-outline-danger:hover{
  background:#2a1414!important;color:#ffbcbc!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-primary{
  background:#b4ec2c!important;border-color:#b4ec2c!important;color:#12190a!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-primary:hover{
  background:#c6f84e!important;color:#12190a!important;
}

/* Inline code, the notification list and the admin footer */
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main code{
  color:#9fd0ff!important;background:#0d1626!important;border-color:#1e3a6b!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area footer{
  background:#0b0d0a!important;           /* beats app.css:1484 */
  border-top-color:var(--eo-r7c-line)!important;
  color:var(--eo-r7c-meta)!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area footer a,
:root[data-eo-theme="dark"] body.eo-admin-area footer p{color:var(--eo-r7c-meta)!important}

/* 7.6 Public footer, same treatment as admin. */
:root[data-eo-theme="dark"] body.eo-fx-glass footer,
:root[data-eo-theme="dark"] body.eo-fx-glass .eo-footer{
  background:#0b0d0a!important;
  border-top:1px solid var(--eo-r7c-line)!important;
  color:var(--eo-r7c-meta)!important;
}
:root[data-eo-theme="dark"] body.eo-fx-glass footer a{color:var(--eo-r7c-meta)!important}
:root[data-eo-theme="dark"] body.eo-fx-glass footer a:hover{color:#ffffff!important}
:root[data-eo-theme="dark"] body.eo-fx-glass footer .text-muted,
:root[data-eo-theme="dark"] body.eo-fx-glass footer p{color:var(--eo-r7c-meta)!important}

/* 7.7 The dashboard referral panel was already a dark navy island in a
   light page. In dark mode it should match everything else. */
:root[data-eo-theme="dark"] .eor-howto{
  background:var(--eo-r7c-surface)!important;
  border-color:var(--eo-r7c-line)!important;
}


/* =====================================================================
   8. R7d - ADMIN SURFACES THE DARK PASS MISSED
   =====================================================================

   The reported symptom was "the button is white, and black when I hover
   it". It was not a button. The mechanism:

     app.css:1754  body.eo-admin-area .eo-admin-main .table-responsive
                   { background:#ffffff!important }            (0,3,2)
     app.css:1773  ... .table > :not(caption) > * > *
                   { background-color:transparent!important }
     eo-r7 sec 7   ... .table td { color:#ffffff!important }
     eo-r7 sec 7   ... .table tbody tr:hover > *
                   { background:#1a1d19!important }

   Section 7 turned the table TEXT white but never touched the wrapper,
   which app.css pins to white, and every cell is transparent. So a row
   was white-on-white until the cursor hit it, at which point the hover
   rule painted it near-black and the row appeared. The Edit button sits
   in that row, which is what made it look like a button problem.

   This section covers .table-responsive and the eleven other admin
   surfaces that still carried a hardcoded light background with no dark
   override. Found by diffing the classes the admin templates emit
   against the ones section 7 names.
   ===================================================================== */

/* 8.1 The table wrapper and its friends. This is the actual fix. */
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .table-responsive,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .list-group{
  background:transparent!important;       /* beats app.css:1754 */
  color:#ffffff!important;
  border-color:#2e332c!important;
  box-shadow:none!important;
}
/* Cells are transparent by app.css:1773, so the readable surface has to
   come from the row itself rather than the wrapper. */
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .table > :not(caption) > * > *{
  color:#ffffff!important;
  background-color:transparent!important;
  border-bottom-color:#2e332c!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .table > tbody > tr:nth-child(even) > *{
  background-color:#151814!important;     /* zebra, so rows read without hover */
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .table tbody tr:hover > *{
  background-color:#232821!important;     /* a step up, not a jump to black */
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .card-header,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .panel-header{
  background:#151814!important;           /* beats app.css:1762 */
  color:#ffffff!important;
  border-bottom-color:#2e332c!important;
}

/* 8.3 Campaign editor (admin/campaign_edit.php). */
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .eo-format-chip{
  background:#171a16!important;           /* beats app.css:2010 */
  border-color:#6d766a!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .eo-preview-card,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .eo-live-empty{
  background:#151814!important;
  border-color:#2e332c!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .eo-preview-label{color:#c3ccc0!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .eo-upload-helper{
  background:#151814!important;
  border-color:#2e332c!important;
  color:#c3ccc0!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .eo-editor-help{
  background:#151814!important;
  border-color:#2e332c!important;
  color:#c3ccc0!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .eo-editor-pane textarea{
  background:#0b0d0a!important;           /* beats app.css:2011 */
  color:#ffffff!important;
}

/* 8.4 Badges that were still light-on-light or light-on-dark. */
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .badge.text-bg-light,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .eo-role-badge{
  background:#2b302a!important;
  border-color:#4a5147!important;
  color:#ffffff!important;
}

/* 8.5 btn-warning had no admin rule at all, in either theme. Bootstrap's
   yellow with black text is fine on light; on dark it needs the same
   amber the status badges use so it does not glare. */
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-warning{
  background:#9a6b00!important;
  border-color:#9a6b00!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-warning:hover{
  background:#7d5700!important;color:#ffffff!important;
}

/* 8.6 Solid buttons had no explicit hover, so Bootstrap's variables took
   over and pulled them toward its own palette. Pin both states. */
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-success,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-success:hover{
  background:#1a7048!important;border-color:#1a7048!important;color:#ffffff!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-success:hover{background:#125237!important}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-danger,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-danger:hover{
  background:#c0392f!important;border-color:#c0392f!important;color:#ffffff!important;
}
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn-danger:hover{background:#9e2f26!important}

/* 8.7 Focus must stay visible on a dark surface. app.css and Bootstrap
   both aim their focus ring at a light page. */
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .btn:focus-visible,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-main .form-control:focus-visible,
:root[data-eo-theme="dark"] body.eo-admin-area .eo-admin-link:focus-visible{
  outline:2px solid #ffffff!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 4px rgba(0,0,0,.9)!important;
}


/* =====================================================================
   9. R7d - ADMIN NOTIFICATIONS PAGE
   =====================================================================

   This page always renders dark, in BOTH themes, as asked. It already
   did before R7d: it shipped an inline <style> with its own navy
   palette. That palette is gone (it fought the theme and app.css
   overrode only :hover, to a near-white, which made a hovered row
   unreadable against its near-white text). The page keeps a dark
   identity, but as black with white text, and with every state defined
   in one place so no hover can disagree with its own text again.

   app.css:1603 and :1859 are the rules being beaten; they are (0,4,1)
   and (0,2,2). These match or exceed that and load later.
   ===================================================================== */

/* 9.1 Page shell and heading. The h1 is a bare element inside
   .eo-notifications-page, so it takes its colour from here. */
body.eo-admin-area .eo-admin-main .eo-notifications-page{
  color:#ffffff!important;
  background:#000000!important;
  border:1px solid #2e332c!important;
  border-radius:18px!important;
  padding:20px!important;
}
body.eo-admin-area .eo-admin-main .eo-notifications-page h1{
  color:#ffffff!important;                /* beats eo.css:111 and app.css */
  background:transparent!important;
  margin:0 0 16px!important;
  font-size:1.5rem!important;
}

/* 9.2 The list container and its rows. */
body.eo-admin-area .eo-admin-main .eo-notifications-box{
  background:#0b0d0a!important;
  border:1px solid #2e332c!important;
  color:#ffffff!important;
}
body.eo-admin-area .eo-admin-main .eo-notification-item{
  background:transparent!important;
  color:#ffffff!important;
  border-bottom:1px solid #2e332c!important;
}
body.eo-admin-area .eo-admin-main .eo-notification-item:last-child{border-bottom:0!important}
/* One step up from the surface. Never a jump to white: that was the bug. */
body.eo-admin-area .eo-admin-main .eo-notification-item:hover{
  background:#232821!important;           /* beats app.css:1603 and :1859 */
}
body.eo-admin-area .eo-admin-main .eo-notification-item.unread{
  background:linear-gradient(90deg,#1e2a10,#0b0d0a 38%)!important;
  border-left:3px solid #b4ec2c!important;
}
body.eo-admin-area .eo-admin-main .eo-notification-item.unread:hover{
  background:linear-gradient(90deg,#2a3a17,#232821 38%)!important;
}

/* 9.3 Row contents. */
body.eo-admin-area .eo-admin-main .eo-notification-title{color:#ffffff!important}
body.eo-admin-area .eo-admin-main .eo-notification-message{color:#d7ded4!important}
body.eo-admin-area .eo-admin-main .eo-notification-date,
body.eo-admin-area .eo-admin-main .eo-notification-meta,
body.eo-admin-area .eo-admin-main .eo-notification-email,
body.eo-admin-area .eo-admin-main .eo-notification-item small{color:#b3bdb0!important}
body.eo-admin-area .eo-admin-main .eo-notification-type{color:#cdf07a!important}
body.eo-admin-area .eo-admin-main .eo-notifications-page strong{color:#ffffff!important}
body.eo-admin-area .eo-admin-main .eo-notifications-page span{color:#b3bdb0!important}

/* 9.4 The mark-read button and the empty state. */
body.eo-admin-area .eo-admin-main .eo-notification-mark-read{
  background:#171a16!important;
  color:#ffffff!important;
  border:1px solid #6d766a!important;
}
body.eo-admin-area .eo-admin-main .eo-notification-mark-read:hover{
  background:#262b24!important;color:#ffffff!important;border-color:#9aa397!important;
}
body.eo-admin-area .eo-admin-main .eo-notification-mark-read:focus-visible{
  outline:2px solid #ffffff!important;outline-offset:2px!important;
}
body.eo-admin-area .eo-admin-main .eo-notifications-empty{
  background:transparent!important;color:#c3ccc0!important;
}
body.eo-admin-area .eo-admin-main .eo-notifications-empty strong{color:#ffffff!important}


/* =====================================================================
   10. R7e - OFFER DETAIL PAGE, THE INNER SURFACES
   =====================================================================

   Section 7 themed the offer detail CONTAINERS (.eo-start-panel,
   .eo-detail-summary, .eo-detail-trustline) but not the cards nested
   inside them. app.css gives those a hardcoded white background:

     app.css:1054  .eo-start-points > div { background:#fff }

   Section 7.3 set only their border-color, so the cards stayed white
   while .eo-start-panel strong turned white. White on white: the
   "Tracked start / Clear eligibility / Verified payout" block was
   invisible. Same shape as the table wrapper in section 8 and the
   notifications rows in section 9.

   Audited the whole page the same way: thirteen classes carried a light
   background in app.css with no dark override. All thirteen are here.

   Dark mode only. In light mode these sit on a pale green panel and are
   correct as they are.
   ===================================================================== */

/* 10.1 The reported block: the three start points. */
:root[data-eo-theme="dark"] .eo-start-points>div{
  background:#000000!important;           /* beats app.css:1054 */
  border:1px solid #3c423a!important;
}
:root[data-eo-theme="dark"] .eo-start-points strong{color:#ffffff!important}
:root[data-eo-theme="dark"] .eo-start-points small{color:#c3ccc0!important}
:root[data-eo-theme="dark"] .eo-start-points i{color:#cdf07a!important}

/* 10.2 The badge above it. app.css:908 scopes this as
   body:not(.eo-admin-area) .eo-start-badge, which is (0,3,1); the
   section 7.3 rule was (0,3,0) and lost, so the badge kept its pale
   green. This is (0,4,1). */
:root[data-eo-theme="dark"] body:not(.eo-admin-area) .eo-start-badge,
:root[data-eo-theme="dark"] body .eo-start-badge{
  background:#1d211c!important;
  border:1px solid #3c423a!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] body .eo-start-badge i{color:#cdf07a!important}

/* 10.3 Requirement steps. */
:root[data-eo-theme="dark"] .eo-detail-step{
  background:#0b0d0a!important;
  border-color:#2e332c!important;
}
:root[data-eo-theme="dark"] .eo-detail-step strong{color:#ffffff!important}
:root[data-eo-theme="dark"] .eo-detail-step span,
:root[data-eo-theme="dark"] .eo-detail-step small,
:root[data-eo-theme="dark"] .eo-detail-step p{color:#c3ccc0!important}
:root[data-eo-theme="dark"] .eo-detail-step-index{
  background:#1e2a10!important;
  color:#cdf07a!important;
}

/* 10.4 Section-title chips and the event list bullets. */
:root[data-eo-theme="dark"] .eo-detail-section-title>span{
  background:#1e2a10!important;
  color:#cdf07a!important;
}
:root[data-eo-theme="dark"] .eo-event-list>div>span{
  background:#1e2a10!important;
  color:#cdf07a!important;
}

/* 10.5 The amber note. */
:root[data-eo-theme="dark"] .eo-detail-note{
  background:#2a2103!important;
  border-color:#5c4a12!important;
  color:#f0d98a!important;
}

/* 10.6 Balance pill and the round back button in the detail topbar. */
:root[data-eo-theme="dark"] .eo-balance-pill{
  background:#1e2a10!important;
  border-color:#3c5a1c!important;
  color:#cdf07a!important;
}
:root[data-eo-theme="dark"] .eo-round-btn{
  background:#171a16!important;           /* beats app.css, both copies */
  border:1px solid #6d766a!important;
  color:#ffffff!important;
  box-shadow:none!important;
}
:root[data-eo-theme="dark"] .eo-round-btn:hover{background:#262b24!important;color:#ffffff!important}

/* 10.7 Empty and completed states. */
:root[data-eo-theme="dark"] .eo-empty-state,
:root[data-eo-theme="dark"] .eo-complete-state{
  background:#101210!important;
  border-color:#2e332c!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-empty-state h2,
:root[data-eo-theme="dark"] .eo-empty-state h3,
:root[data-eo-theme="dark"] .eo-complete-state h2{color:#ffffff!important}
:root[data-eo-theme="dark"] .eo-empty-state p,
:root[data-eo-theme="dark"] .eo-complete-state p{color:#c3ccc0!important}
:root[data-eo-theme="dark"] .eo-empty-icon{
  background:#1e2a10!important;
  color:#cdf07a!important;
}

/* 10.8 The copy button inside the referral input group.
   app.css scopes it as .eo-referral-card .input-group .btn, (0,3,0). */
:root[data-eo-theme="dark"] .eo-referral-card .input-group .btn{
  background:#171a16!important;
  border-color:#6d766a!important;
  color:#ffffff!important;
}
:root[data-eo-theme="dark"] .eo-referral-card .input-group .btn:hover{
  background:#262b24!important;color:#ffffff!important;
}


/* =====================================================================
   11. R8 - MOBILE PASS: FOOTER DENSITY, LIGHT-MODE CONTRAST, TABLES
   =====================================================================

   Found on a phone after the first live deploy.

   - Footer links sat 52px apart on mobile: eo.css gives every footer
     link a 44px min-height and each <li> carried mb-2 on top. The markup
     now uses mb-lg-2 / py-4 py-lg-5, and the links below get a compact
     row on small screens only. Desktop is unchanged.

   - .alert-secondary (and -info, -primary, -light) kept the dark-era
     colours from app.css:75 in light mode: #dbe2f0 text on a near-white
     wash, effectively invisible. app.css:913-916 re-coloured only
     warning, success and danger for the light theme. Dark mode already
     reads correctly, so these rules are light only.

   - app.css:418 pins .eo-auth-subtitle to #9eabc2!important, 2.3:1 on
     white. Light only, for the same reason.

   - app.css:251 forces every .table to min-width:680px under 768px.
     That suits data tables, but the two- and three-column prose tables
     on the legal and help pages became a sideways scroller. Inside the
     legal shell they now wrap instead.
   ===================================================================== */

/* 11.1 Footer links: one compact row each on phones and tablets. */
@media (max-width:991.98px){
  footer .eo-footer-links a{
    display:block;
    min-height:0;               /* eo.css .eo-footer a sets 44px */
    padding-block:.3125rem;     /* keeps a ~31px tap row */
    line-height:1.35;
  }
  footer h2.h6{margin-bottom:.5rem}
}

/* 11.2 Bootstrap alerts without a light palette. */
:root:not([data-eo-theme="dark"]) .alert:not([class*="alert-"]),
:root:not([data-eo-theme="dark"]) .alert-secondary,
:root:not([data-eo-theme="dark"]) .alert-primary,
:root:not([data-eo-theme="dark"]) .alert-light{
  background:var(--eo-surface-sunken);
  border-color:var(--eo-border);
  color:var(--eo-text-2);
}
:root:not([data-eo-theme="dark"]) .alert-info{
  background:var(--eo-info-bg);
  border-color:#bfdbfe;
  color:var(--eo-info-fg);
}

/* 11.3 Auth page subtitle. */
:root:not([data-eo-theme="dark"]) .eo-auth-subtitle{
  color:var(--eo-text-2)!important; /* beats app.css:418 */
}

/* 11.4 Prose tables in the legal shell wrap rather than scroll. */
@media (max-width:767.98px){
  #legal-content .table-responsive > .table{min-width:0}
}

/* 11.5 eo.css .eo-footer a turns EVERY footer link into a 44px flex box,
   including the ones inside sentences ("Contact", "cybercrime.gov.in"),
   which split the safety note across lines. */
footer.eo-footer p a{display:inline;min-height:0}

/* 11.6 Legal shell: the collapsed table of contents for phones. */
.eo-legal__toc-mobile details{
  border:1px solid var(--eo-border);
  border-radius:var(--eo-r-md);
  padding:.625rem .875rem;
  background:var(--eo-surface);
}
.eo-legal__toc-mobile summary{cursor:pointer;letter-spacing:.06em}
.eo-legal__toc-mobile a{display:block;padding-block:.375rem;color:var(--eo-text-2)}

/* 11.7 Section eyebrow on the auth and help pages: 10px at 3.4:1.
   app.css:848 is (0,2,1); these tie or beat it and load later. */
body:not(.eo-admin-area) .section-eyebrow{font-size:.75rem}
:root:not([data-eo-theme="dark"]) body:not(.eo-admin-area) .section-eyebrow{color:#4d6b2a}

/* 11.8 Phone font floor. app.css shrinks these to 9.6-11.5px under 768px;
   the design system's floor is 12px. 16px on the search input stops iOS
   zooming the page when it is focused. */
@media (max-width:767.98px){
  body:not(.eo-admin-area) .eo-searchbar .form-control{
    font-size:16px!important;   /* beats app.css:1382 */
  }
  body:not(.eo-admin-area) .eo-searchbar .btn{
    font-size:.8125rem!important; /* beats app.css:1383 and app.css:1505 */
  }
  body:not(.eo-admin-area) .eo-page-banner p{
    font-size:.8125rem!important; /* beats app.css:1157, 1366, 1504 */
  }
  body:not(.eo-admin-area) .eo-catch-promo p{font-size:.8125rem}
  body:not(.eo-admin-area) .eo-catch-balance{font-size:.75rem}
  body:not(.eo-admin-area) .eo-profile-hero p{
    font-size:.8125rem!important; /* beats app.css:1450 */
  }
  body:not(.eo-admin-area) .eo-profile-info-grid strong{font-size:.875rem}
  body:not(.eo-admin-area) .eo-profile-trust-grid strong{font-size:.75rem}
}

/* 11.9 Collapsed mobile menu: give each link a full-size tap row. */
@media (max-width:991.98px){
  body:not(.eo-admin-area) .eo-navbar .navbar-collapse .nav-link{
    display:flex;align-items:center;min-height:44px;
  }
}