/* =====================================================================
   Group Buy AI Tools — "Notion Mono" member-panel theme  (v1)
   ---------------------------------------------------------------------
   One stylesheet for the whole aMember member area. Uploaded to the
   web root of app.groupbuyaitools.com and linked from
   application/default/views/layout.phtml (<link href="/gb-theme.css?v=N">).

   DESIGN: white Notion-style app shell — persistent left sidebar for
   logged-in members, centered auth card for guests. Black is the only
   accent; colour is reserved for status (ok / warn / err).

   COMPAT: token names are kept from the previous "cream skin"
   (--cr-*) because signup/signup-cards.phtml and thanks.phtml still
   reference them from their own <style> blocks. Changing values here
   reskins those pages without touching their files.
   ===================================================================== */

:root{
  /* SURFACES */
  --cr-canvas: #FFFFFF;   /* main app background                        */
  --cr-side:   #FBFBFA;   /* sidebar background (Notion off-white)      */
  --cr-card:   #FFFFFF;   /* card surface                               */
  --cr-sunk:   #F1F1EF;   /* hover / pressed / segmented bg             */
  --cr-scan:   #FFFFFF;   /* QR quiet zone (legacy)                     */

  /* INK */
  --cr-ink:    #191918;   /* primary text + the accent                  */
  --cr-ink-2:  #37352F;   /* body copy (classic Notion ink)             */
  --cr-muted:  #6F6E6B;   /* secondary text — 5.10:1 on #FFF, 4.75:1 on #F7F7F5 */

  /* ON-BLACK (buttons, selected pills) */
  --cr-on-ink:   #FFFFFF;
  --cr-on-ink-2: #D5D5D3;
  --cr-on-ink-ok:#6FDB9C;

  /* EDGES */
  --cr-line:          #E0DFDC;  /* strong border (decorative)           */
  --cr-line-input:    #949390;  /* form-control edges — 3.07:1 on white  */
  --cr-line-soft:     #ECEBE8;  /* soft border                          */
  --cr-line-ink:      rgba(255,255,255,.35);
  --cr-line-ink-soft: rgba(255,255,255,.16);

  /* STATUS — soft chips, saturated text (Untitled-UI-ish, Notion-calm) */
  --cr-ok:   #087443; --cr-ok-bg:  #EDF7F0; --cr-ok-line:  #ABE3C1;
  --cr-err:  #B42318; --cr-err-bg: #FEF3F2; --cr-err-line: #F4C6C2;
  --cr-warn: #B54708; --cr-warn-bg:#FFFAEB; --cr-warn-line:#F6DE9C;

  --cr-radius:14px; --cr-radius-sm:8px; --cr-radius-pill:999px;

  --cr-shadow:    0 1px 2px rgba(16,24,40,.05);
  --cr-shadow-sm: 0 1px 2px rgba(16,24,40,.04);
  --cr-shadow-up: 0 10px 24px -12px rgba(16,24,40,.14);

  --cr-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --cr-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  /* LEGACY ALIASES — signup-cards.phtml + thanks.phtml consume these. */
  --cr-bg:       #F7F7F5;          /* recessed strips (th, nodata, offers) */
  --cr-bg-2:     var(--cr-sunk);
  --cr-white:    var(--cr-card);
  --cr-border:   var(--cr-line);
  --cr-border-2: var(--cr-line-soft);

  /* shell metrics */
  --gb-side-w: 264px;
  --gb-topbar-h: 64px;
  --gb-content-max: 1080px;
}

/* aMember's stock theme.css hardcodes these; keep the override. */
:root{ --am_page_bg:var(--cr-canvas)!important; --am_bg:var(--cr-canvas)!important;
       --am_header_bg:var(--cr-canvas)!important; }

/* ---------- Base ---------- */
*:focus-visible{outline:2px solid var(--cr-ink);outline-offset:2px;border-radius:inherit}
::placeholder{color:var(--cr-muted);opacity:1}
html,body{background:var(--cr-canvas)!important;color:var(--cr-ink-2)!important;
  font-family:var(--cr-font)!important;color-scheme:light;
  -webkit-font-smoothing:antialiased;margin:0;min-height:100%}
img{max-width:100%}

/* Neutralise the old chrome wherever it still renders. */
.am-header,.am-header-line,.am-account-toolbar,
.am-tabs-wrapper,.am-tabs-narrow-wrapper{display:none!important}
.am-layout,.am-common,.am-body,.am-body-content,.am-body-content-content,
.am-body-content-top,.am-body-content-wrapper{background:transparent!important;
  border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}

/* =====================================================================
   APP SHELL (logged-in)
   ===================================================================== */
.gb-shell{display:flex;flex-wrap:wrap;min-height:100vh;align-items:stretch}
/* Safety net: only the sidebar and the main column are meant to be flex items
   here. If anything else ends up as a direct child (a footer that escaped its
   wrapper, a plugin injecting markup at body-start), it must drop onto its own
   full-width row rather than silently stealing horizontal space from the
   content column — which is exactly how a stray footer once shrank every page
   from 1016px to 576px without erroring. */
/* Basis is calc(100% + 1px), not 100%: a flex line only breaks when the sum of
   hypothetical sizes EXCEEDS the line, and .gb-maincol's basis is 0 — so a flat
   100% would not break when .gb-side is out of flow (gb-side-collapsed, and
   every width <= 1020px where the sidebar is position:fixed). */
.gb-shell > *:not(.gb-side):not(.gb-scrim):not(.gb-maincol){
  flex:0 1 calc(100% + 1px);order:99;box-sizing:border-box}

/* ---------- Sidebar ---------- */
.gb-side{width:var(--gb-side-w);flex:0 0 var(--gb-side-w);
  background:var(--cr-side);border-right:1px solid var(--cr-line-soft);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  overflow-y:auto;z-index:40}
.gb-side-head{display:flex;align-items:center;gap:10px;
  padding:20px 18px 14px;min-height:64px;box-sizing:border-box}
.gb-side-head img,.gb-side-head .am-header-content-logo{height:30px;width:30px;
  max-height:none;object-fit:contain;display:block;flex:0 0 30px}
/* A 1x1 transparent placeholder ships with stock aMember themes; if that is
   still the configured logo it simply collapses and the title carries the
   header on its own. */
.gb-side-head img[width="1"]{display:none}
.gb-side-title{font-size:15.5px;font-weight:800;color:var(--cr-ink);
  letter-spacing:-.02em;line-height:1.15;min-width:0}
.gb-logo-mark{width:26px;height:26px;border-radius:8px;background:var(--cr-ink);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;
  color:#fff;font-weight:800;font-size:13px}

.gb-nav-wrap{flex:1;padding:6px 0 12px}
ul.gb-nav{list-style:none;margin:0;padding:0 10px}
ul.gb-nav li{margin:2px 0;padding:0}
ul.gb-nav li a{display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:var(--cr-radius-sm);
  color:var(--cr-ink-2);font-size:14px;font-weight:500;text-decoration:none;
  transition:background .12s,color .12s;position:relative}
ul.gb-nav li a:hover{background:var(--cr-sunk);color:var(--cr-ink)}
ul.gb-nav li.active>a,ul.gb-nav li.current>a{background:#ECECEA;
  color:var(--cr-ink);font-weight:600}

/* Nav icons — Feather outlines as CSS masks keyed off the href, so the
   PHP menu needs no markup changes. Default dot first; specific after. */
ul.gb-nav li a::before{content:'';width:18px;height:18px;flex:0 0 18px;
  background:currentColor;opacity:.75;
  -webkit-mask:var(--gb-ic) center/contain no-repeat;
          mask:var(--gb-ic) center/contain no-repeat;
  --gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E")}
ul.gb-nav li.active>a::before{opacity:1}
ul.gb-nav a[href*="member"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z'/%3E%3C/svg%3E")}
ul.gb-nav a[href*="payment-history"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E")}
ul.gb-nav a[href*="signup"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.83z'/%3E%3Ccircle cx='7' cy='7' r='1.4' fill='black' stroke='none'/%3E%3C/svg%3E")}
ul.gb-nav a[href*="aff"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E")}
ul.gb-nav a[href*="helpdesk"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E")}
ul.gb-nav a[href*="profile"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
ul.gb-nav a[href*="logout"]::before{--gb-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E")}

/* Helpdesk unread badge — aMember emits ((N)) → span.menu-item-alert. */
.menu-item-alert{margin-left:auto;background:var(--cr-err);color:#fff;
  font-size:11px;font-weight:700;line-height:1;min-width:18px;height:18px;
  border-radius:999px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 5px}
.menu-item-alert span{display:none}

/* Sidebar footer — user identity block. */
.gb-side-foot{border-top:1px solid var(--cr-line-soft);padding:12px 14px}
/* amember.css:1389 floats this block, indents it 25px and paints a base64 grey
   "user" PNG behind it — which surfaces as a stray icon in the sidebar footer. */
.gb-side-foot .am-user-identity-block{display:flex!important;align-items:center;
  gap:8px;font-size:13px;color:var(--cr-muted);flex-wrap:wrap;
  float:none!important;padding-left:0!important;background-image:none!important;
  font-weight:400!important}
.gb-side-foot .am-user-identity-block_login{font-weight:600;color:var(--cr-ink-2);
  overflow:hidden;text-overflow:ellipsis;max-width:130px;white-space:nowrap}
.gb-side-foot .am-user-identity-block a{margin-left:auto;color:var(--cr-muted);
  font-weight:600;text-decoration:none;font-size:12.5px;
  padding:4px 10px;border:1px solid var(--cr-line);border-radius:var(--cr-radius-sm);
  background:var(--cr-card)}
.gb-side-foot .am-user-identity-block a:hover{color:var(--cr-ink);border-color:var(--cr-ink)}

/* ---------- Main column ---------- */
.gb-maincol{flex:1;min-width:0;display:flex;flex-direction:column}
.gb-topbar{height:var(--gb-topbar-h);display:flex;align-items:center;gap:12px;
  padding:0 28px;border-bottom:1px solid var(--cr-line-soft);
  position:sticky;top:0;background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px);z-index:30}
.gb-menu-btn{border:1px solid var(--cr-line);background:var(--cr-card);
  border-radius:var(--cr-radius-sm);width:34px;height:34px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--cr-ink-2);padding:0}
.gb-menu-btn:hover{background:var(--cr-sunk)}
.gb-topbar-spacer{flex:1}
.gb-avatar{width:36px;height:36px;border-radius:50%;background:var(--cr-ink);
  color:#fff;font-weight:700;font-size:14px;display:inline-flex;
  align-items:center;justify-content:center;text-decoration:none;
  border:2px solid var(--cr-card);box-shadow:0 0 0 1.5px var(--cr-line)}
.gb-avatar:hover{box-shadow:0 0 0 1.5px var(--cr-ink)}

/* NB: do NOT put `max-width` + `margin:0 auto` on this element. It is a flex
   item in .gb-maincol, and an auto cross-axis margin cancels align-self:stretch
   — the column then shrink-wraps its content, so page width silently changed
   with whatever was on the page (a narrow widget produced a narrow panel).
   Keep this full-width and centre the block-level .am-layout inside it. */
.gb-content{flex:1;width:100%;box-sizing:border-box;padding:34px 44px 60px}
.gb-content > .am-layout{max-width:var(--gb-content-max)!important;
  margin:0 auto!important;width:100%}
/* amember.css:749 `.am-main{max-width:800px;margin:0 auto;padding:0 20px}` is a
   second class on .am-body-content-wrapper / .am-footer-content-wrapper /
   .am-header-content-wrapper. The base reset strips its padding and margin but
   NOT its max-width, so without this the reading column is 800px flush-left
   inside a 1080px shell. */
.am-main{max-width:none!important}

/* Mobile scrim */
.gb-scrim{display:none}

/* ---------- Page headings ---------- */
.am-body-content-top h1,.am-body-content h1{font-size:26px;font-weight:800;
  color:var(--cr-ink);letter-spacing:-.02em;margin:2px 0 22px;line-height:1.2}
.am-body-content h2{font-size:17px;font-weight:700;color:var(--cr-ink);
  letter-spacing:-.01em}
.am-widget{margin:0 0 30px}
.am-widget h2{margin:0 0 12px}

/* =====================================================================
   COMPONENTS
   ===================================================================== */

/* ---------- Cards / blocks ---------- */
.am-block{background:var(--cr-card)!important;
  border:1px solid var(--cr-line)!important;
  border-radius:var(--cr-radius)!important;box-shadow:var(--cr-shadow-sm)!important;
  padding:6px 0!important;margin-bottom:14px!important;overflow:hidden}
/* .am-block's 6px padding is tuned for edge-to-edge list widgets; a block
   that wraps a form needs real padding instead. */
.am-block > form,.am-block > .am-form{padding:22px 24px;display:block}
.am-block-nodata,.member-subscriptions-no{background:var(--cr-bg)!important;
  border:1px dashed var(--cr-line)!important;border-radius:var(--cr-radius)!important;
  color:var(--cr-muted);padding:30px!important;text-align:center;font-size:13.5px}
.member-subscriptions-no h3{color:var(--cr-ink);margin:0 0 6px}
.member-subscriptions-no a{color:var(--cr-ink);font-weight:600}

/* ---------- Notices (admin-entered content + system messages) ---------- */
.am-info{background:var(--cr-bg)!important;border:1px solid var(--cr-line-soft)!important;
  color:var(--cr-ink-2)!important;padding:13px 18px!important;
  border-radius:var(--cr-radius-sm)!important;font-size:13.5px}
.am-error,.am-errors{background:var(--cr-err-bg)!important;
  border:1px solid var(--cr-err-line)!important;color:var(--cr-err)!important;
  padding:13px 18px!important;border-radius:var(--cr-radius-sm)!important}
.am-flash-content{background:var(--cr-ink)!important;color:#fff!important;
  border-radius:var(--cr-radius-sm)!important;border:0!important;
  padding:13px 18px!important;font-weight:600}
/* Reusable banner for admin-page announcements (like the price notice). */
.gb-notice{background:var(--cr-warn-bg);border:1px solid var(--cr-warn-line);
  border-left:4px solid #F0A22E;border-radius:var(--cr-radius-sm);
  padding:16px 20px;margin:0 0 26px;font-size:14px;color:var(--cr-ink-2)}
.gb-notice strong{color:var(--cr-warn)}
.gb-notice-title{display:flex;gap:9px;align-items:center;font-weight:700;
  color:var(--cr-warn);margin-bottom:6px;font-size:14.5px}

/* ---------- Status pills ---------- */
.gb-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  font-size:12px;font-weight:600;padding:4px 11px;line-height:1.3;white-space:nowrap}

/* ---------- Subscriptions list ---------- */
.am-widget-list{background:transparent;border:0;border-radius:0;
  overflow:hidden;padding:0;margin:0;list-style:none}
.am-widget-list>li{list-style:none;padding:15px 20px;display:flex;
  align-items:center;flex-wrap:wrap;gap:6px 12px;
  border-bottom:1px solid var(--cr-line-soft)}
.am-widget-list>li:last-child{border-bottom:0}
.am-list-subscriptions-title{font-weight:600;color:var(--cr-ink);font-size:14.5px;
  display:inline-flex;align-items:center;gap:10px}
.am-list-subscriptions-title::before{content:'';width:8px;height:8px;
  border-radius:50%;background:#12B76A;flex:0 0 8px}
/* amember.css:3174 appends content:" –" after the title as an inline separator.
   This theme pushes the date to the far side with margin-auto, so that dash
   lands as a stray glyph mid-row. */
.am-list-subscriptions .am-list-subscriptions-title::after{content:none}
.am-list-subscriptions-title a{color:var(--cr-ink);text-decoration:none}
.am-list-subscriptions-title a:hover{text-decoration:underline}
.am-list-subscriptions-date{margin-left:auto}
.am-list-subscriptions-date_expires{background:var(--cr-err-bg);color:var(--cr-err);
  border:1px solid var(--cr-err-line);border-radius:999px;font-size:12px;
  font-weight:600;padding:4px 11px;white-space:nowrap}
.am-list-subscriptions-date_rebill{background:var(--cr-ok-bg);color:var(--cr-ok);
  border:1px solid var(--cr-ok-line);border-radius:999px;font-size:12px;
  font-weight:600;padding:4px 11px;white-space:nowrap}
.am-list-subscriptions-date_lifetime{background:var(--cr-sunk);color:var(--cr-ink-2);
  border:1px solid var(--cr-line);border-radius:999px;font-size:12px;
  font-weight:600;padding:4px 11px}
.am-list-subscriptions-date_future{background:var(--cr-bg);color:var(--cr-muted);
  border:1px solid var(--cr-line-soft);border-radius:999px;font-size:12px;
  font-weight:600;padding:4px 11px}
.am-list-subscriptions-link{display:inline-flex;gap:10px}
.am-list-subscriptions-link a{color:var(--cr-muted);font-size:12.5px;font-weight:600}
.am-list-subscriptions-link a:hover{color:var(--cr-ink)}
/* amember.css:3190 renders this as a literal "|" character; we draw a rule. */
.am-list-subscriptions_divider{border-left:1px solid var(--cr-line);height:12px}
.am-list-subscriptions_divider::before{content:none}
.am-list-subscriptions-desc{flex-basis:100%;color:var(--cr-muted);
  font-size:12.5px;padding-left:18px}

/* Links widget */
.am-list-links a{color:var(--cr-ink);font-weight:500;text-decoration:none;font-size:14px}
.am-list-links a:hover{text-decoration:underline}

/* ---------- Resource (tool) cards ----------
   blocks/member-main-resources.phtml carries its own legacy <style>;
   these #id-scoped rules out-rank it, so that file stays untouched. */
#member-resources.am-grid-resources{display:flex;flex-wrap:wrap;gap:18px;
  background:transparent;border:0}
#member-resources .resource-card{background:var(--cr-card)!important;
  border:1px solid var(--cr-line)!important;border-radius:var(--cr-radius)!important;
  box-shadow:var(--cr-shadow-sm)!important;padding:0!important;
  width:calc(25% - 14px)!important;overflow:hidden;text-align:center;
  display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
#member-resources .resource-card:hover{transform:translateY(-3px)!important;
  box-shadow:var(--cr-shadow-up)!important;border-color:var(--cr-ink)!important}
#member-resources .resource-card img{width:100%;height:96px;object-fit:contain;
  margin:22px 0 14px;padding:0 18px;box-sizing:border-box}
#member-resources .resource-card a{display:block;text-decoration:none;
  background:var(--cr-ink)!important;color:#fff!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;
  padding:12px 8px!important;margin-top:auto;
  font-weight:600;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  transition:background .15s}
#member-resources .resource-card a:hover{background:#000!important;color:#fff!important}
#member-resources .fav-toggle{color:var(--cr-line-input);top:10px;right:12px}
/* State must not rest on a 2.12:1 amber. Ink reads at any size and matches
   the rest of the panel; the filled ★ glyph already carries the meaning. */
#member-resources .fav-toggle:hover,#member-resources .fav-toggle.fav-on{color:var(--cr-ink)}

/* Tool search */
.card-search-wrapper{margin:2px 0 22px}
/* amember.css caps inputs with a (0,2,1) `max-width:100%`, which beats a bare
   `.card-search`. Any width cap we set on an input has to be !important. */
.card-search{width:100%;max-width:460px!important;padding:11px 16px 11px 42px!important;
  border:1px solid var(--cr-line-input)!important;border-radius:10px!important;
  font-size:14px!important;font-family:var(--cr-font);background:var(--cr-card)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6E6B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E")
  14px center/17px no-repeat!important;box-sizing:border-box;color:var(--cr-ink)}
.card-search:focus{border-color:var(--cr-ink)!important;outline:none;
  box-shadow:0 0 0 3px rgba(25,25,24,.07)}
.card-search-empty{margin-top:12px;color:var(--cr-muted);display:none}

/* ---------- Forms ---------- */
.am-form{background:transparent}
.am-row{background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;margin:0 0 16px!important}
.am-element-title,.am-element>label,.am-form label{color:var(--cr-ink-2);
  font-weight:600;font-size:13px}
.am-element-title{margin-bottom:6px;display:block}
/* amember.css:2272/:2309 lay every .am-form out as a 35% right-aligned, floated
   label column beside a 65% field column above 500px, at (0,2,1). This theme
   never declares width/float/text-align, so that legacy two-column form wins on
   every desktop viewport unless it is explicitly unwound. */
.am-form div.am-element-title{width:auto!important;float:none!important;
  text-align:left!important;padding:0!important}
.am-form div.am-element{margin-left:0!important;padding:0}
.am-form input[type=text],.am-form input[type=email],.am-form input[type=password],
.am-form input[type=tel],.am-form select,.am-form textarea{width:100%;max-width:440px!important}
.am-form .am-row-buttons{margin-top:22px!important}
input:disabled,select:disabled,textarea:disabled{background:var(--cr-sunk)!important;
  color:var(--cr-muted)!important;cursor:not-allowed;border-color:var(--cr-line)!important}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],select,textarea{
  padding:10px 14px!important;border:1px solid var(--cr-line-input)!important;
  border-radius:var(--cr-radius-sm)!important;font-size:14.5px!important;
  font-family:var(--cr-font)!important;background:var(--cr-card)!important;
  color:var(--cr-ink)!important;box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s}
/* Suppressing the UA outline is only acceptable if what replaces it is
   actually visible. A 7%-alpha halo composites to ~#F0F0F0 on white (~1.1:1);
   this ring is --cr-ink at 22% plus a full-strength inner edge, which reads at
   a glance and still looks like the rest of the panel. */
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,
input[type=tel]:focus,input[type=number]:focus,select:focus,textarea:focus{
  outline:none!important;border-color:var(--cr-ink)!important;
  box-shadow:0 0 0 1px var(--cr-ink),0 0 0 4px rgba(25,25,24,.22)!important}

input[type=submit],button[type=submit],.button,a.button{
  background:var(--cr-ink)!important;color:#fff!important;
  border:1px solid var(--cr-ink)!important;padding:12px 26px!important;
  border-radius:10px!important;font-weight:600!important;font-size:14.5px!important;
  font-family:var(--cr-font)!important;letter-spacing:-.01em;cursor:pointer;
  text-decoration:none;display:inline-block;
  transition:background .14s,transform .14s,box-shadow .14s}
input[type=submit]:hover,button[type=submit]:hover,.button:hover,a.button:hover{
  background:#000!important;transform:translateY(-1px);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.gb-btn-ghost{background:var(--cr-card)!important;color:var(--cr-ink)!important;
  border:1px solid var(--cr-line)!important}
.gb-btn-ghost:hover{border-color:var(--cr-ink)!important;background:var(--cr-card)!important}

/* ---------- Auth (login / forgot password / logged-out pages) ---------- */
/* align-items MUST stay stretch. With `center`, .am-layout is a flex item on
   the cross axis and shrink-wraps to its content width — the 420px auth card
   rendered at 281px, and the footer resolved to a third width again (444px),
   so nothing on /login lined up with anything else. Stretch the column and
   centre the CARD instead, with its own margin:0 auto. */
body.am-logged-out .gb-auth-wrap{min-height:100vh;display:flex;
  flex-direction:column;align-items:stretch;justify-content:flex-start;
  padding:8vh 20px 40px;box-sizing:border-box}
body.am-logged-out .gb-auth-wrap > .am-layout{width:100%}
/* The footer is the other flex child; keep it on the same axis as the card. */
/* border-box, or the 28px side padding is added ON TOP of width:100% and the
   footer overflows the viewport by 56px. */
body.am-logged-out .gb-auth-wrap > .am-footer{width:100%;text-align:center;
  box-sizing:border-box}
body.am-logged-out .am-footer-content{justify-content:center}
body.am-logged-out .am-header{display:block!important;background:transparent!important;
  border:0!important;text-align:center;padding:0 0 26px!important}
/* amember.css:772 paints this wrapper #355873 with a tiled gradient and grey
   side borders — a navy rectangle above the auth card on /login and /signup. */
body.am-logged-out .am-header .am-header-content-wrapper{background:none!important;
  border:0!important;padding:0!important;max-width:none!important}
/* amember.css:777 floats the logo left with a 1em margin, pushing it ~8px off
   centre even once the block above is cleared. */
body.am-logged-out .am-header-content-logo{height:48px;width:auto;max-height:none;
  display:block;margin:0 auto!important;float:none!important}
.am-auth-form{background:var(--cr-card)!important;width:100%;
  border:1px solid var(--cr-line)!important;
  border-radius:var(--cr-radius)!important;box-shadow:var(--cr-shadow)!important;
  padding:30px!important;max-width:420px!important;margin:0 auto 16px!important;
  box-sizing:border-box}
.am-auth-form .am-row{margin:0 0 16px!important}
.am-auth-form form,.am-auth-form fieldset{border:0!important;padding:0!important;
  margin:0!important;background:transparent!important;box-shadow:none!important}
.am-auth-form legend,.am-auth-form .am-form-title{background:transparent!important;
  border:0!important;color:var(--cr-ink);font-size:20px!important;font-weight:800;
  letter-spacing:-.02em;text-align:center;width:100%;padding:0 0 18px!important;
  margin:0}
.am-auth-form input[type=text],.am-auth-form input[type=password]{width:100%}
.am-auth-form input[type=submit]{width:100%}
.am-auth-form .am-row-buttons{display:flex;flex-direction:column;gap:12px;
  align-items:center}
.am-form-login-switch-wrapper a,.am-signup-link a{color:var(--cr-ink);font-weight:600}
.am-signup-link{text-align:center;margin-top:14px;font-size:13.5px;color:var(--cr-muted)}
#am-form-login-remember{display:inline-flex;gap:7px;align-items:center;
  font-weight:500;color:var(--cr-muted);margin-top:8px}

/* ---------- Tables (payment history, invoices) ---------- */
.am-grid-container,.am-grid-wrap{background:var(--cr-card);
  border:1px solid var(--cr-line);border-radius:var(--cr-radius);
  overflow-x:auto;box-shadow:var(--cr-shadow-sm)}
table.am-grid,table{border-collapse:collapse;width:100%;background:transparent}
/* The wrapper is an overflow-x scroller, but a table pinned to width:100% can
   never exceed it — the columns squeeze to unreadable instead of scrolling.
   Give tables inside a scroller a floor so the scroller actually engages. */
.am-grid-container table,.am-grid-wrap table{min-width:640px}
/* amember.css:1119 `.am-grid th{text-transform:lowercase;font-variant:small-caps}`
   is (0,1,1) and beats a bare `th`, so both need !important here. */
th{background:var(--cr-bg)!important;color:var(--cr-muted)!important;
  font-size:11px!important;font-weight:700!important;
  text-transform:uppercase!important;font-variant-caps:normal!important;
  letter-spacing:.06em;text-align:left;padding:11px 16px!important;
  border-bottom:1px solid var(--cr-line)!important}
td{padding:13px 16px!important;border-bottom:1px solid var(--cr-line-soft)!important;
  color:var(--cr-ink-2);font-size:13.5px}
tr:last-child td{border-bottom:0!important}
/* amember.css paints the CELLS — `.am-grid tr.am-grid-row > td{background:#f6f7f8}`
   and `.am-grid tr.am-grid-row.odd td{background-color:#d3dce3}` — and an opaque
   td background always covers the row's. Neutralise at the td, not the tr.
   background-COLOR, not the shorthand: some Am_Grid cells carry a background
   image (td.record-sort) the shorthand would erase.
   ORDER MATTERS: the hover rule ties at (0,3,2) with the .odd rule and wins
   only on source order, so it must stay second. */
.am-grid tr.am-grid-row > td,
.am-grid tr.am-grid-row.odd > td,
.am-grid tr.am-grid-row.even > td,
.am-grid tr.am-grid-row > td.sorted{background-color:transparent!important}
.am-grid tr.am-grid-row:hover > td{background-color:#FAFAF9!important}
.am-member-payment-history-amount{font-weight:700;color:var(--cr-ink);
  font-variant-numeric:tabular-nums}
/* A refund is money going the other way — never render it as a charge. */
.am-member-payment-history-row-refund td{color:var(--cr-muted)}
.am-member-payment-history-row-refund .am-member-payment-history-amount{
  color:var(--cr-err);font-weight:700}
.am-member-payment-history-invoice_id a{color:var(--cr-ink);font-weight:600}
.am-grid-total{font-weight:800;color:var(--cr-ink)}

/* ---------- Thanks / receipt ---------- */
.am-thanks-status-success{background:var(--cr-ok-bg);color:var(--cr-ok);
  border:1px solid var(--cr-ok-line);border-radius:var(--cr-radius-sm);
  padding:16px 18px;font-weight:700}
.am-thanks-awaiting-payment,.am-thanks-awaiting-refresh{
  background:var(--cr-warn-bg);color:var(--cr-warn);
  border:1px solid var(--cr-warn-line);border-radius:var(--cr-radius-sm);
  padding:16px 18px}
.am-thanks-payment-details{background:var(--cr-card);
  border:1px solid var(--cr-line);border-radius:var(--cr-radius);
  padding:20px;margin-top:16px}
.am-thanks-login-offer{background:var(--cr-bg);border:1px solid var(--cr-line-soft);
  border-radius:var(--cr-radius);padding:22px;margin-top:16px;text-align:center}
.gb-thanks-actions{margin-top:14px}
.gb-dash-btn{background:var(--cr-ink);color:#fff!important;border-radius:10px;
  padding:12px 26px;font-weight:600;font-size:14.5px;text-decoration:none;
  display:inline-block;transition:background .14s,transform .14s}
.gb-dash-btn:hover{background:#000;transform:translateY(-1px)}

/* signup-cards.phtml hides the page <h1> with
   `.am-signup-cards .am-body-content-top > h1 {display:none!important}`.
   That is right for GUESTS (they get the .sc-hero headline instead) but
   leaves a logged-in member on Order/Renew with no page title at all, so
   put it back for them. Declared here so the local preview and the live
   page render identically. */
body.am-logged-in.am-signup-cards .am-body-content-top > h1{display:block!important}
body.am-logged-out.am-signup-cards .am-body-content-top > h1{display:none!important}

/* .bp-shine is added by signup-cards.phtml's JS to the UPI payment option.
   Its own rule paints a cream gradient (#FBF6EA) left over from the old skin;
   these two rules repaint it for the white theme without touching that file. */
.am-signup-cards .bp-shine{background:var(--cr-bg)!important;
  border:2px solid var(--cr-ink)!important;animation:none!important;
  position:relative;padding-right:150px!important}
/* The ⚡ INSTANT ACCESS badge is drawn by signup-cards.phtml as a ::after on
   .bp-shine; repaint it for the white theme and stop the pulse animation. */
.am-signup-cards .bp-shine::after{background:var(--cr-ink)!important;color:#fff!important;
  animation:none!important;border-radius:999px;font-size:10.5px;letter-spacing:.06em;
  content:"\26A1 INSTANT ACCESS";position:absolute;top:50%;right:12px;
  transform:translateY(-50%);font-weight:800;padding:6px 12px;white-space:nowrap}
@media (max-width:600px){
  .am-signup-cards .bp-shine{padding-right:17px!important;padding-bottom:44px!important}
  .am-signup-cards .bp-shine::after{top:auto;bottom:10px;transform:none}
}

/* Guest-signup chrome. GEOMETRY OWNED HERE for the same reason as the plan
   rows: signup-cards.phtml declares layout in its own <style>, and relying on
   it would make this stylesheet un-previewable in isolation. */
.am-signup-cards .am-signup{max-width:900px;margin:4px auto 0;padding:0;
  font-family:var(--cr-font)}
.sc-topnav{max-width:900px;margin:0 auto 26px;padding:0;text-align:center}
.sc-topnav .sc-tabs,.sc-topnav ul{list-style:none!important;margin:0;padding:4px;
  display:inline-flex;gap:3px;flex-wrap:wrap;background:var(--cr-sunk);
  border:1px solid var(--cr-line-soft);border-radius:10px}
.sc-topnav li{list-style:none!important;margin:0!important;padding:0!important;
  background:none!important;border:0!important}
.sc-topnav li::marker{content:none}
.sc-topnav li::before{content:none!important;display:none!important}
.sc-topnav .sc-tab,.sc-topnav ul a{display:inline-block;padding:8px 16px;
  border-radius:8px;color:var(--cr-ink-2);text-decoration:none;
  font-weight:600;font-size:13.5px;letter-spacing:-.01em;
  transition:background .14s,color .14s}
.sc-topnav .sc-tab:hover,.sc-topnav ul a:hover{background:var(--cr-card);
  color:var(--cr-ink);text-decoration:none}
.sc-topnav .sc-tab-active,.sc-topnav ul li.active > a{background:var(--cr-ink);
  color:#fff}

.sc-hero{text-align:center;margin:10px 0 32px}
.sc-hero h1{font-size:clamp(28px,4.4vw,40px)!important;margin:0 0 10px!important;
  color:var(--cr-ink);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.sc-hero p{color:var(--cr-ink-2);margin:0;font-size:16px}
.sc-trust{display:flex;gap:8px;justify-content:center;margin-top:18px;
  flex-wrap:wrap;font-size:12.5px;color:var(--cr-ink-2)}
.sc-trust span{background:var(--cr-card);border:1px solid var(--cr-line);
  border-radius:999px;padding:6px 13px;font-weight:600;color:var(--cr-ink-2)}

/* Guest signup is a marketing page: give it room and full-width fields. */
body.am-logged-out.am-signup-cards .gb-auth-wrap{padding:5vh 20px 40px;
  align-items:stretch}
/* NB: the base reset sets margin:0!important on .am-body-content, so the
   centering here must also be !important or the page hugs the left edge. */
body.am-logged-out.am-signup-cards .am-body-content{max-width:900px;
  margin:0 auto!important;width:100%}
body.am-signup-cards .am-row:not(#row-product_id):not(#row-paysys_id) input[type=text],
body.am-signup-cards .am-row:not(#row-product_id):not(#row-paysys_id) input[type=email],
body.am-signup-cards .am-row:not(#row-product_id):not(#row-paysys_id) input[type=password]{
  width:100%;max-width:460px!important}

/* ---------- Signup / Order-Renew (overrides for signup-cards.phtml) ----
   That file keeps its own <style>; two-class selectors below out-rank its
   single-class rules, so it needs no server edit for the new look. */
.am-signup-cards .sc-hero h1{font-size:26px}
.am-signup-cards .sc-tabs{background:var(--cr-sunk);border:1px solid var(--cr-line-soft);
  border-radius:10px;padding:4px}
.am-signup-cards .sc-tab{border-radius:8px;font-weight:600}
.am-signup-cards .sc-tab:hover{background:var(--cr-card);color:var(--cr-ink)}
.am-signup-cards .sc-tab-active,.am-signup-cards .sc-tab.sc-tab-active{
  background:var(--cr-ink);color:#fff;border-radius:8px}
.am-signup-cards .sc-section-title{font-size:17px;font-weight:700;color:var(--cr-ink)}

/* Plan rows → bordered choice cards (NoxTools-style).
   GEOMETRY IS OWNED HERE, not inherited from signup-cards.phtml's own
   <style>. That file lays the rows out as a borderless 24px/1fr ledger;
   re-declaring the grid below means the card look is identical whether or
   not that block is present, so the local preview cannot drift from live. */
.am-signup-cards .sc-products{display:block;border-top:0!important;margin-bottom:20px}
.am-signup-cards .sc-product{display:grid!important;
  grid-template-columns:1fr 24px!important;gap:5px 14px!important;
  align-items:start;cursor:pointer;
  border:1.5px solid var(--cr-line)!important;
  border-left:1.5px solid var(--cr-line)!important;
  border-radius:var(--cr-radius)!important;background:var(--cr-card)!important;
  margin:0 0 14px!important;padding:18px 20px!important;
  box-shadow:var(--cr-shadow-sm);transition:border-color .15s,box-shadow .15s}
.am-signup-cards .sc-product-head{grid-column:1!important;grid-row:1!important;
  display:block!important}
.am-signup-cards .sc-product-desc{grid-column:1!important;grid-row:2!important;
  -webkit-line-clamp:none;display:block!important;overflow:visible}
.am-signup-cards .sc-product-check{grid-column:2!important;grid-row:1/span 2!important;
  width:22px;height:22px;margin:0;align-self:center;
  display:flex!important;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:transparent;box-shadow:none}
.am-signup-cards .sc-product .sc-durations-inline{grid-column:1!important}
.am-signup-cards .sc-product:hover{border-color:var(--cr-ink)!important;
  background:var(--cr-card)!important}
.am-signup-cards .sc-product.active,.am-signup-cards .sc-product.sc-selected{
  border-color:var(--cr-ink)!important;border-width:2px!important;
  box-shadow:0 0 0 1px var(--cr-ink), var(--cr-shadow-up)!important;
  background:var(--cr-card)!important}
.am-signup-cards .sc-product-name{font-size:16.5px;font-weight:700;color:var(--cr-ink);
  text-transform:none;display:block;margin-bottom:3px}
.am-signup-cards .sc-product-from{color:var(--cr-ink);font-size:15px;font-weight:800;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:block;
  margin-bottom:4px;white-space:normal}
/* "for 30 days" — the billing period sits next to the price, not competing. */
.am-signup-cards .sc-product-per{color:var(--cr-muted);font-weight:500;font-size:13px}
/* 35 products is a long form. Group the singles under a heading and keep the
   rows compact so the three plans stay above the fold. */
.am-signup-cards .sc-group-head{font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--cr-muted);
  margin:26px 0 12px;padding-top:20px;border-top:1px solid var(--cr-line-soft)}
.am-signup-cards .sc-product-desc{color:var(--cr-muted);font-size:13px;line-height:1.55}
.am-signup-cards .sc-product-check{border:2px solid var(--cr-line-input);
  border-radius:6px;background:var(--cr-card)}
.am-signup-cards .sc-product.active .sc-product-check,
.am-signup-cards .sc-product.sc-selected .sc-product-check{
  background:var(--cr-ink);border-color:var(--cr-ink);color:#fff}
.am-signup-cards .sc-price,.am-signup-cards .sc-product-price{color:var(--cr-ink);font-weight:800}

/* Duration picker → tile cards.
   PRODUCTION TRUTH: signup-cards.phtml's JS appends .sc-durations-inline
   INSIDE each .sc-product row (not as a separate section), and each pill is
   `<div class="sc-duration">1 month <span class="sc-save">Save 12%</span></div>`.
   These selectors match that exactly. */
.am-signup-cards .sc-durations-inline{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.am-signup-cards .sc-duration{flex:1 1 96px;min-width:96px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1.5px solid var(--cr-line);border-radius:var(--cr-radius-sm);
  background:var(--cr-card);padding:12px 8px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--cr-ink-2);
  transition:border-color .15s,background .15s,color .15s}
.am-signup-cards .sc-duration:hover{border-color:var(--cr-ink);color:var(--cr-ink)}
.am-signup-cards .sc-duration.active{border-color:var(--cr-ink);border-width:2px;
  background:var(--cr-ink);color:#fff;box-shadow:none}
.am-signup-cards .sc-save{background:var(--cr-ok-bg);color:var(--cr-ok);
  border:1px solid var(--cr-ok-line);border-radius:999px;font-size:11px;
  font-weight:700;padding:2px 9px;display:inline-block;white-space:nowrap}
.am-signup-cards .sc-duration.active .sc-save{background:rgba(255,255,255,.16);
  color:#fff;border-color:rgba(255,255,255,.34)}
/* Only the CHOSEN plan's pill reads as selected — otherwise every row shows a
   black pill and the page has four "selected" states at once. */
.am-signup-cards .sc-product:not(.active) .sc-duration.active{
  background:var(--cr-card);color:var(--cr-ink-2);border-color:var(--cr-line);
  border-width:1.5px}
.am-signup-cards .sc-product:not(.active) .sc-duration.active .sc-save{
  background:var(--cr-ok-bg);color:var(--cr-ok);border-color:var(--cr-ok-line)}

/* Payment systems.
   PRODUCTION TRUTH (read off the live /signup page 2026-08-28): aMember has
   TWO render modes and the panel is currently in the first one.
     1. SINGLE paysystem (today — UPI only): plain spans, no radio —
        <span class="am-paysystem-title">UPI Payment</span>
        <span class="am-paysystem-desc">Pay via any UPI app (GPay…)</span>
     2. MULTIPLE paysystems (the moment a second one is enabled): each option
        becomes <label><input type=radio name=paysys_id> …the same spans.
   Both are styled below, so enabling Stripe/PayPal/crypto later needs NO
   theme change — the row just becomes a 2-up grid of selectable cards. */
.am-signup-cards [id^="row-paysys_id"]{display:block!important;margin-bottom:26px!important}
.am-signup-cards [id^="row-paysys_id"] > .am-element-title{margin-bottom:10px}
.am-signup-cards [id^="row-paysys_id"] > .am-element-title label{font-size:17px;
  font-weight:700;color:var(--cr-ink)!important}

/* Mode 1 — single system: a plain bordered card, nothing to choose. */
.am-signup-cards [id^="row-paysys_id"] > .am-element{
  border:1.5px solid var(--cr-line);border-radius:var(--cr-radius-sm);
  background:var(--cr-card);padding:15px 17px}
.am-signup-cards .am-paysystem-title{display:block;font-weight:700;
  color:var(--cr-ink);font-size:14.5px;margin-bottom:3px}
/* The desc is a full sentence ("Pay via any UPI app…"), never a chip. */
/* amember.css:2961 sets font-style:italic here and nothing below declares
   font-style, so it survives. Unscoped on purpose: PayController and
   CancelController emit the same span outside /signup. */
.am-paysystem-desc{font-style:normal}
.am-signup-cards .am-paysystem-desc{display:block;color:var(--cr-muted);
  font-size:13px;line-height:1.5;font-style:normal}
.am-signup-cards .am-paysystem-desc:empty{display:none}

/* Mode 2 — several systems: the .am-element becomes a grid of radio cards.
   :has() scopes this to the multi-option case only, so mode 1 is unaffected. */
.am-signup-cards [id^="row-paysys_id"] > .am-element:has(input[type=radio]){
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  border:0;background:none;padding:0}
.am-signup-cards [id^="row-paysys_id"] .am-element > label{display:flex;
  align-items:flex-start;gap:11px;flex-wrap:wrap;
  border:1.5px solid var(--cr-line);border-radius:var(--cr-radius-sm);
  background:var(--cr-card);padding:15px 17px;cursor:pointer;margin:0;
  font-weight:600!important;color:var(--cr-ink-2)!important;font-size:14px;
  transition:border-color .15s,background .15s}
.am-signup-cards [id^="row-paysys_id"] .am-element > label:hover{border-color:var(--cr-ink)}
.am-signup-cards [id^="row-paysys_id"] .am-element > label:has(input:checked){
  border-color:var(--cr-ink);border-width:2px;background:var(--cr-bg);
  box-shadow:0 0 0 1px var(--cr-ink)}
.am-signup-cards [id^="row-paysys_id"] input[type=radio]{accent-color:var(--cr-ink);
  width:17px;height:17px;margin:2px 0 0;flex:0 0 17px}
.am-signup-cards [id^="row-paysys_id"] .am-element > label .am-paysystem-title,
.am-signup-cards [id^="row-paysys_id"] .am-element > label .am-paysystem-desc{
  flex:1 1 calc(100% - 28px);margin-left:0}

/* Order summary — sticky total bar, matching signup-cards.phtml's real DOM:
   .sc-summary > .sc-summary-head(span "Total" + span.sc-total) + .sc-summary-items
   (inline .sc-summary-item chips joined by a "·" ::after). */
.am-signup-cards .sc-summary{background:var(--cr-bg);border:1px solid var(--cr-line);
  border-radius:var(--cr-radius);padding:16px 20px;margin:0 0 24px}
.am-signup-cards .sc-summary-head{display:flex;justify-content:space-between;
  align-items:center;gap:12px}
.am-signup-cards .sc-summary-head > span:first-child{font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--cr-muted)}
.am-signup-cards .sc-total{font-weight:800;color:var(--cr-ink);font-size:22px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.am-signup-cards .sc-summary-items{margin-top:6px;font-size:12.5px;color:var(--cr-muted);
  background:none;border:0;padding:0}
.am-signup-cards .sc-summary-item{background:none;border:0;padding:0;font-weight:600;
  color:var(--cr-muted)}

/* Section headings need air between the stacked steps. */
.am-signup-cards .sc-section-title{margin:28px 0 4px}
.am-signup-cards .sc-section-title:first-child{margin-top:0}
.am-signup-cards .sc-hint{margin:0 0 14px;color:var(--cr-muted);font-size:13.5px}

/* =====================================================================
   COVERAGE: pieces that exist on the live panel but not in the mocks.
   Ported from the outgoing skin (it learned these the hard way) plus the
   render modes read off the live /signup and /login pages.
   ===================================================================== */

/* Prose links only. NEVER add a blanket `.am-body-content a` rule — it has
   broken button labels twice: any link painting its own dark background
   (tool-page "Access Tool Now", .btn-action) inherits ink-on-ink and the
   label vanishes. Those come from admin-entered HTML, so they can't be
   enumerated — recolour running-text links and leave components alone. */
.am-body-content p a:not([class]),
.am-body-content li a:not([class]),
.am-info a,
.am-auth-form .am-row-buttons a,
.am-form-login-switch-wrapper a,
.am-signup-link a,
.am-thanks-login-offer a,
.am-thanks-payment-details a{color:var(--cr-ink);text-decoration-color:currentColor;text-decoration-thickness:1px;
  text-underline-offset:2px}
.am-body-content p a:not([class]):hover,.am-info a:hover,
.am-auth-form .am-row-buttons a:hover,
.am-form-login-switch-wrapper a:hover,
.am-signup-link a:hover{color:#000;text-decoration-color:var(--cr-ink)}

/* amember.css `.am-common a{color:#3f7fb0}` is (0,1,1) and outranks a bare
   `.btn-action{color:#fff}` (0,1,0), repainting those labels blue. Restore
   white at (0,1,2). Same for the admin-entered support/WhatsApp buttons. */
.am-body-content a.btn-action,
.am-body-content a.btn-action:visited,
.am-body-content a.btn-action:hover,
.am-body-content a.support-button,
.am-body-content a.whatsapp-button,
.am-body-content a.whatsapp-floating-button{color:#fff}
/* amember.css uses !important here, so matching it is unavoidable. */
.am-credits a{color:var(--cr-muted)!important}

/* Headings inside admin-entered tool pages. */
.am-body-content h3{font-size:16px;font-weight:700;color:var(--cr-ink)}
.am-body-content h4{font-size:14.5px;font-weight:700;color:var(--cr-ink-2)}

/* "If you already have an account…" notice above the signup form. */
.am-login-text{text-align:center}

/* Required-field asterisk. */
.required{color:var(--cr-err);font-weight:700}

/* Validation errors (aMember renders these inline per row). */
.am-error-label,.am-form-el-error-text{color:var(--cr-err)!important;
  font-weight:600;font-size:12.5px;margin-top:5px;display:block}
.am-row.error input,.am-row.error select,.am-row.error textarea,
input.error,select.error,textarea.error{border-color:var(--cr-err)!important}

/* --- FUTURE-PROOFING -------------------------------------------------
   None of the following is on the panel today. Each is styled now so that
   turning it on in aMember admin needs no theme change. */

/* reCAPTCHA / hCaptcha row (aMember emits .am-row-recaptcha + an element
   div that the widget iframe drops into; the checkbox widget is 302x76). */
.am-row-recaptcha,.am-row-login-recaptcha{margin-bottom:18px!important}
.am-recaptcha-element,.g-recaptcha,.h-captcha{max-width:100%;overflow:hidden}
.am-recaptcha-element iframe,.g-recaptcha iframe{max-width:100%}
.am-auth-form .am-recaptcha-element,.am-auth-form .g-recaptcha{
  display:flex;justify-content:center}

/* Coupon / discount-code row (present but empty-styled today). */
[id^="row-coupon"] input[type=text]{max-width:280px!important}
.am-coupon-applied,.am-coupon-ok{color:var(--cr-ok);font-weight:600;font-size:13px}

/* aMember's own CTA class on the signup submit. */
input.am-cta-signup{width:auto}

/* Native product markup — what aMember emits BEFORE signup-cards.phtml's JS
   transforms it into .sc-product cards, and what a JS-off or JS-error visitor
   actually sees. Styled so the page is never unusable. */
.am-signup-cards [id^="row-product_id"] .am-element > label{
  display:grid;grid-template-columns:1fr 22px;gap:4px 14px;align-items:start;
  border:1.5px solid var(--cr-line);border-radius:var(--cr-radius);
  background:var(--cr-card);padding:16px 18px;margin:0 0 12px;cursor:pointer;
  transition:border-color .15s}
.am-signup-cards [id^="row-product_id"] .am-element > label:hover{border-color:var(--cr-ink)}
.am-signup-cards [id^="row-product_id"] .am-element > label:has(input:checked){
  border-color:var(--cr-ink);border-width:2px;box-shadow:0 0 0 1px var(--cr-ink)}
.am-signup-cards [id^="row-product_id"] input[type=checkbox]{
  grid-column:2;grid-row:1/span 3;accent-color:var(--cr-ink);
  width:19px;height:19px;margin:2px 0 0;align-self:center}
.am-product-title{grid-column:1;font-weight:700;color:var(--cr-ink);font-size:16px}
.am-product-terms{grid-column:1;font-weight:800;color:var(--cr-ink);font-size:14.5px;
  font-variant-numeric:tabular-nums}
/* Plan descriptions are long emoji tool-lists entered in admin; clamp them so
   one plan can't push the next off the fold, and keep the line breaks. */
.am-product-desc{grid-column:1;color:var(--cr-muted);font-size:12.5px;
  line-height:1.5;white-space:pre-line;max-height:7.5em;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 72%,transparent);
          mask-image:linear-gradient(#000 72%,transparent)}
.am-signup-cards [id^="row-product_id"] .am-element > label:has(input:checked)
  .am-product-desc{max-height:none;-webkit-mask-image:none;mask-image:none}

/* =====================================================================
   MODULE COVERAGE — every remaining user-facing area of the panel.
   Derived by scanning all 69 non-admin .phtml templates on the server for
   the classes they emit, then styling the ones that carry visual meaning.
   ===================================================================== */

/* ---------- Dashboard two-column shell (member/main.phtml) ----------
   Restoring the missing <div class="am-layout-two-coll"> wrapper (see the
   theme's member/main.phtml override) also switches ON aMember's own
   two-column chrome, which had been dormant while the wrapper was absent:
     amember.css:1464  .am-layout-two-coll{border:1px solid #d9d9d9;
                       background-color:#f5f5f5;box-shadow:0 1px 3px #e3e3e3}
     amember.css:1472  + a tiled vertical divider background image
     amember.css:1502  .am-coll-left,.am-coll-right{float:left;width:50%}
   Every dashboard widget on this install lives in the LEFT column, so that
   renders as half-width content beside an empty grey panel. Flatten it. */
.am-layout-two-coll{border:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;display:block}
.am-layout-two-coll .am-coll-left,
.am-layout-two-coll .am-coll-right{float:none!important;width:auto!important;
  min-width:0}
.am-layout-two-coll .am-coll-left .am-coll-content,
.am-layout-two-coll .am-coll-right .am-coll-content{margin:0!important;min-width:0}
/* Spacers that only existed to clear the floats. */
.am-layout-two-coll .am-layout-two-coll-top,
.am-layout-two-coll .am-layout-two-coll-bottom{display:none!important}
/* If the admin ever does put widgets in the right column, give it a real 2-up
   instead of floats. :has() keeps the common single-column case untouched. */
@media (min-width:1000px){
  .am-layout-two-coll:has(.am-coll-right .am-widget:not(:has(.am-list-links))){display:grid!important;
    grid-template-columns:1.6fr 1fr;gap:0 28px;align-items:start}
  .am-layout-two-coll:has(.am-coll-right .am-widget:not(:has(.am-list-links))) .am-coll-right{grid-column:2}
}

/* ---------- Breadcrumbs ---------- */
.am-breadcrumbs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  padding:0;margin:0 0 14px;font-size:12.5px;color:var(--cr-muted)}
.am-breadcrumbs-item{list-style:none}
/* DO NOT add a ::after separator here — _breadcrumbs.phtml emits its own
   <li class="am-breadcrumbs-separator">&gt;</li>, so a generated one would
   render "Home / > Signup". Style theirs instead. */
.am-breadcrumbs-separator{list-style:none;color:var(--cr-line);
  font-size:11px;user-select:none}
.am-breadcrumbs a{color:var(--cr-muted);text-decoration:none}
.am-breadcrumbs a:hover{color:var(--cr-ink)}

/* ---------- Inline filter ("Type to Filter…" over subscriptions) ---------- */
.am-input-filter-wrapper{padding:14px 20px 4px}
.am-input-filter{width:100%;max-width:340px!important;padding:9px 14px!important;
  border:1px solid var(--cr-line-input)!important;border-radius:var(--cr-radius-sm)!important;
  font-size:13.5px!important;background:var(--cr-card)!important;box-sizing:border-box}
.am-input-filter-empty{color:var(--cr-muted);font-size:13px;padding:6px 0}

/* ---------- Cancel / upgrade popups ---------- */
.cancel-subscription-popup,.upgrade-subscription-popup{background:var(--cr-card);
  border:1px solid var(--cr-line);border-radius:var(--cr-radius);
  box-shadow:0 24px 60px -24px rgba(16,24,40,.35);padding:26px}
/* aMember puts .am-popup-close on two different nodes: the ✕ icon user.js
   builds (also carrying .am-popup-close-icon) and the plain text escape links
   in member/_cancel.phtml and _upgrade.phtml. Only the first is an icon. */
.am-popup .am-popup-close-icon{position:absolute;top:12px;right:14px;
  color:var(--cr-muted);font-size:20px;line-height:1;text-decoration:none;
  cursor:pointer}
.am-popup .am-popup-close-icon:hover{color:var(--cr-ink)}
.am-popup a.am-popup-close:not(.am-popup-close-icon){color:var(--cr-muted);
  font-weight:600;text-decoration:underline;cursor:pointer}
.am-popup a.am-popup-close:not(.am-popup-close-icon):hover{color:var(--cr-ink)}
.cancel-subscription,.upgrade-subscription,.am-active-invoice-cancel{
  color:var(--cr-muted);font-weight:600}
.cancel-subscription:hover,.upgrade-subscription:hover{color:var(--cr-ink)}

/* ---------- Receipt / invoice tables ---------- */
.am-receipt,.am-invoice-summary{background:var(--cr-card);
  border:1px solid var(--cr-line);border-radius:var(--cr-radius);
  padding:22px;margin-top:16px;overflow-x:auto}
.am-receipt-table{width:100%;border-collapse:collapse}
.am-receipt-am-row-head th{background:var(--cr-bg)!important}
.am-receipt-product{font-weight:600;color:var(--cr-ink)}
.am-receipt-product-options{color:var(--cr-muted);font-size:12.5px}
.am-receipt-qty,.am-receipt-unit-price,.am-receipt-price,
.am-invoice-summary-price,.am-receipt-discounted-price{text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.am-receipt-discounted-price{color:var(--cr-muted);text-decoration:line-through}
.am-receipt-total{font-weight:800;color:var(--cr-ink);font-size:15px;
  border-top:2px solid var(--cr-line)!important}
.am-receipt-indent{padding-left:26px!important;color:var(--cr-muted)}
/* The generic td/th rules above give receipt cells grid borders and padding
   they were never meant to have. NB: no background reset on .am-receipt th —
   .am-receipt-am-row-head th above has equal specificity and would lose. */
.am-receipt td{background:transparent!important;border:0!important;
  border-bottom:1px solid var(--cr-line-soft)!important}
.am-receipt th{border:0!important;border-bottom:1px solid var(--cr-line)!important}
.am-receipt td.am-receipt-total{background:transparent!important}

/* ---------- Thanks page: generated login details ---------- */
.am-thanks-password{font-family:var(--cr-mono);background:var(--cr-sunk);
  border:1px solid var(--cr-line);border-radius:6px;padding:3px 9px;
  font-size:13.5px;color:var(--cr-ink)}
.am-toggle-on-click{cursor:pointer;user-select:none}

/* ---------- Flash message overlay ---------- */
.am-flash-mask{position:fixed;inset:0;background:rgba(15,15,15,.28);z-index:60}
.am-flash-content{position:relative;z-index:61}

/* ---------- Login page wrappers (two stacked auth cards; aMember's JS
     shows one at a time — the hidden one must stay hidden). ---------- */
.am-login-form-wrapper,.am-sendpass-form-wrapper{width:100%}
.am-pass-reveal{padding-right:40px!important}
.am-row-wide{width:100%}

/* ---------- Help Desk module ---------- */
.am-helpdesk{color:var(--cr-ink-2)}
.am-helpdesk-ticket,.am-helpdesk-message{background:var(--cr-card);
  border:1px solid var(--cr-line);border-radius:var(--cr-radius);
  padding:18px 20px;margin-bottom:14px}
.am-helpdesk-message-header,.am-helpdesk-ticket-header{display:flex;
  flex-wrap:wrap;gap:8px 14px;align-items:baseline;
  border-bottom:1px solid var(--cr-line-soft);padding-bottom:10px;margin-bottom:12px}
.am-helpdesk-message-user,.am-helpdesk-ticket-subject{font-weight:700;color:var(--cr-ink)}
.am-helpdesk-message-date,.am-helpdesk-ticket-date{color:var(--cr-muted);
  font-size:12.5px;margin-left:auto}
.am-helpdesk-message-body{line-height:1.6;white-space:pre-wrap}
.am-helpdesk-ticket-status,.am-helpdesk-status{display:inline-flex;
  align-items:center;border-radius:999px;font-size:12px;font-weight:600;
  padding:4px 11px;background:var(--cr-sunk);color:var(--cr-ink-2);
  border:1px solid var(--cr-line)}
.am-helpdesk-status-awaiting_admin,.am-helpdesk-status-open{
  background:var(--cr-warn-bg);color:var(--cr-warn);border-color:var(--cr-warn-line)}
.am-helpdesk-status-closed{background:var(--cr-ok-bg);color:var(--cr-ok);
  border-color:var(--cr-ok-line)}
.am-helpdesk-reply-panel{margin-top:12px}
.am-helpdesk-action-active a{color:var(--cr-ink);font-weight:700}
.am-helpdesk textarea{width:100%;min-height:120px;line-height:1.55}

/* ---------- Newsletter / category / misc member lists ---------- */
.am-list-newsletters-item_title{font-weight:600;color:var(--cr-ink)}
.am-category-title{font-weight:700;color:var(--cr-ink);font-size:16px}

/* ---------- Error page ---------- */
.trace{font-family:var(--cr-mono);font-size:12px;color:var(--cr-muted);
  background:var(--cr-sunk);border-radius:var(--cr-radius-sm);padding:14px;
  overflow-x:auto;white-space:pre}

/* ---------- Active invoice card (member/_invoice.phtml) ---------- */
.am-active-invoice{background:var(--cr-card);border:1px solid var(--cr-line);
  border-radius:var(--cr-radius);padding:20px;margin-bottom:14px}
.am-active-invoice-header{display:flex;flex-wrap:wrap;gap:8px 14px;
  align-items:baseline;border-bottom:1px solid var(--cr-line-soft);
  padding-bottom:11px;margin-bottom:12px}
.am-active-invoice-num{font-weight:700;color:var(--cr-ink)}
.am-active-invoice-date,.am-active-invoice-paysys,
.am-active-invoice-terms{color:var(--cr-muted);font-size:12.5px}
.am-active-invoice-date{margin-left:auto}
.am-active-invoice-product-list{list-style:none;padding:0;margin:0 0 12px}
.am-active-invoice-product{padding:7px 0;border-bottom:1px solid var(--cr-line-soft);
  display:flex;justify-content:space-between;gap:12px}
.am-active-invoice-product:last-child{border-bottom:0}
.am-active-invoice-item-title{font-weight:600;color:var(--cr-ink-2)}
.am-active-invoice-rebill-info{color:var(--cr-muted);font-size:13px}
.am-active-invoice-rebill-date{font-weight:600;color:var(--cr-ink-2)}
.am-active-invoice-failed{background:var(--cr-err-bg);color:var(--cr-err);
  border:1px solid var(--cr-err-line);border-radius:var(--cr-radius-sm);
  padding:11px 14px;font-weight:600;font-size:13px;margin:10px 0}
.am-active-invoice-footer{display:flex;flex-wrap:wrap;gap:14px;
  border-top:1px solid var(--cr-line-soft);padding-top:12px;margin-top:12px;
  font-size:12.5px}
.am-active-invoice-manual-rebill,.am-active-invoice-restore,
.am-active-invoice-update-cc,.am-active-invoice-upgrade{display:inline-flex}
.am-active-invoice-footer a,.manual-rebill,.restore-subscription,.update-cc{
  color:var(--cr-muted);font-weight:600}
.am-active-invoice-footer a:hover,.manual-rebill:hover,
.restore-subscription:hover,.update-cc:hover{color:var(--cr-ink)}

/* ---------- Upgrade / cancel dialogs ---------- */
.am-upgrade-options{margin:14px 0}
.am-upgrade-options-comment{color:var(--cr-muted);font-size:13px;margin-bottom:10px}
.am-upgrade-coupon{margin:12px 0}
.cancel-subscription-popup-text{color:var(--cr-ink-2);line-height:1.6;margin-bottom:18px}
.cancel-subscription-buttons,.am-upgrade-buttons{display:flex;gap:12px;
  flex-wrap:wrap;margin-top:8px}
/* The destructive choice must not look like the primary action. */
.am-cta-cancel,.upgrade-subscription-no{background:var(--cr-card)!important;
  color:var(--cr-ink)!important;border:1px solid var(--cr-line-input)!important}
.am-cta-cancel:hover,.upgrade-subscription-no:hover{
  border-color:var(--cr-ink)!important;background:var(--cr-card)!important;
  transform:none;box-shadow:none}
.am-cta-upgrade,.upgrade-subscription-yes,.make-payment-button{
  background:var(--cr-ink)!important;color:#fff!important}

/* Stored-card reuse page. Inert today (UPI is the only paysystem), styled
   now so enabling Stripe doesn't ship an unthemed screen. */
.am-reuse-card-confirmation{background:var(--cr-card);border:1px solid var(--cr-line);
  border-radius:var(--cr-radius);padding:22px;max-width:520px}
.tb-btn{background:var(--cr-card);color:var(--cr-ink);border:1px solid var(--cr-line-input);
  border-radius:10px;padding:11px 22px;font-weight:600;font-size:14px;
  font-family:var(--cr-font);cursor:pointer;text-decoration:none;display:inline-block}
.tb-btn:hover{border-color:var(--cr-ink)}
.tb-btn-primary{background:var(--cr-ink);color:#fff;border-color:var(--cr-ink)}
.tb-btn-primary:hover{background:#000}

/* ---------- Invoice summary totals ---------- */
.am-invoice-summary-items{width:100%;border-collapse:collapse}
.am-invoice-summary-item-title{font-weight:600;color:var(--cr-ink-2)}
.am-invoice-summary-item-num,.am-invoice-summary-item-qty{color:var(--cr-muted);
  font-size:12.5px}
.am-invoice-summary-item-total,.am-invoice-summary-subtotal,
.am-invoice-summary-discount,.am-invoice-summary-shipping,
.am-invoice-summary-tax,.am-invoice-summary-total{text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.am-invoice-summary-discount{color:var(--cr-ok)}
.am-invoice-summary-row-total{border-top:2px solid var(--cr-line)}
.am-invoice-summary-total{font-weight:800;color:var(--cr-ink);font-size:15.5px}
.am-invoice-summary-delimeter,.am-receipt-row-delimiter{border-top:1px solid var(--cr-line-soft)}
.am-invoice-summary-terms,.am-receipt-terms,.am-receipt-row-terms{
  color:var(--cr-muted);font-size:12.5px}
.am-receipt-row-total{border-top:2px solid var(--cr-line)}
.am-receipt-content{min-width:0}

/* ---------- Thanks: generated login details ---------- */
.am-thanks-login-details{background:var(--cr-bg);border:1px solid var(--cr-line);
  border-radius:var(--cr-radius);padding:18px 20px;margin-top:14px}
.am-thanks-login-details-login,.am-thanks-login-details-pass{
  font-family:var(--cr-mono);font-weight:600;color:var(--cr-ink)}

/* ---------- Category page ---------- */
.am-category-search-wrapper{margin-bottom:18px}
.am-block-category-resource{margin-bottom:14px}

/* ---------- Unsubscribe / flash / language chooser ---------- */
.am-unsubscribe{max-width:620px}
.grid-no-highlight:hover{background:transparent!important}
.am-info-msg-flash{margin-bottom:18px}
.am-lang-choice{display:flex;gap:8px;align-items:center;font-size:12.5px;
  color:var(--cr-muted)}
.am-lang-choice_list{list-style:none;display:flex;gap:6px;padding:0;margin:0}
.am-lang-val{list-style:none}
.am-lang-val a{color:var(--cr-muted);text-decoration:none;padding:3px 8px;
  border-radius:6px}
.am-lang-val a:hover{background:var(--cr-sunk);color:var(--cr-ink)}
.am-lang-val-code{text-transform:uppercase;font-weight:600}

/* ---------- Sendpass (forgot password) rows ---------- */
.am-row-sendpass-notice{color:var(--cr-muted);font-size:13px;
  line-height:1.55;margin-bottom:16px!important}
.am-row-sendpass-email input{width:100%}

/* ---------- Signup login-offer ---------- */
.am-login-text_login{font-weight:600;color:var(--cr-ink)}

/* A tool page renders aMember's page title (the slug, e.g. "chatgpt") and then
   the widget's own <h1> with the proper tool name — two h1s, one of them ugly.
   Suppress the page title only where the widget is actually mounted. */
.am-body-content:has(#gb-portal) .am-body-content-top > h1{display:none}

/* ---------- Footer ---------- */
/* amember.css:823/828 paint the inner wrapper #325069 and pin BOTH elements to
   height:30px, so stock aMember's navy band survives and our footer content
   overflows it. The old solid-color skin carried the same counter-rule; a new
   theme has to bring its own. */
.am-footer,
.am-footer .am-footer-content-wrapper{background:transparent!important;
  color:var(--cr-muted)!important;height:auto!important;max-width:none!important}
.am-footer .am-footer-content-wrapper{padding:0!important}
.am-footer{border:0!important;border-top:1px solid var(--cr-line-soft)!important;
  margin-top:auto!important;padding:18px 28px 26px!important;font-size:12.5px}
.am-footer a{color:var(--cr-muted)!important}
.am-footer a:hover{color:var(--cr-ink)!important}
.am-credits,.am-footer-text{color:var(--cr-muted)!important}
.am-footer-content{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
#am-action-move-to-top{display:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1180px){
  #member-resources .resource-card{width:calc(33.333% - 12px)!important}
}
@media (max-width:1020px){
  .gb-side{position:fixed;left:0;top:0;bottom:0;height:100vh;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:none}
  body.gb-nav-open .gb-side{transform:translateX(0);
    box-shadow:0 0 0 100vmax rgba(15,15,15,.28)}
  .gb-scrim{display:none}
  body.gb-nav-open .gb-scrim{display:block;position:fixed;inset:0;z-index:35}
  .gb-content{padding:26px 20px 48px}
}
@media (max-width:760px){
  #member-resources .resource-card{width:calc(50% - 9px)!important}
  .am-widget-list>li{padding:14px 16px}
  .am-list-subscriptions-date{margin-left:0;flex-basis:100%}
  
}
@media (max-width:480px){
  #member-resources .resource-card{width:100%!important}
  .gb-content{padding:20px 14px 40px}
}
@media (min-width:1021px){
  body.gb-side-collapsed .gb-side{display:none}
}

/* =====================================================================
   ACCESS PASS — the tool-page widget (/page/chatgpt, /page/semrush, …)
   ---------------------------------------------------------------------
   This markup is produced by public/js/gb-portal.js from the GB_CONFIG
   block on each aMember tool page. Previously BOTH the CSS and the JS were
   pasted into every one of those ~25 pages; they now live here, so the
   design has one source of truth.

   THE STRUCTURE BELOW IS UNCHANGED from the version in the pages — same
   selectors, same layout, same boarding-pass concept. What changed is the
   palette: the widget was built for the old cream skin (canvas #efece4,
   cream accent #efe7d4) and read as a beige slab dropped into the white
   panel. The tokens now come from the theme, so the black ticket sits on
   the panel's own surface instead of its own background.
   ===================================================================== */
.gbA{
  /* Retuned to the panel. Old value in the comment for reference. */
  --bg-1:transparent;              /* was #efece4 — the panel supplies the canvas */
  --bg-2:transparent;              /* was #e2ddd0 */
  --card-1:#242423;                /* was #1b1b1a — the ticket stays black       */
  --card-2:#131312;                /* was #0a0a09                                */
  --edge:rgba(255,255,255,.12);
  --ink:#FFFFFF;                   /* was #f2efe7 cream                          */
  --dim:#A5A29B;                   /* was #9a968b                                */
  --hair:rgba(255,255,255,.10);
  --accent:#FFFFFF;                /* was #efe7d4 — primary button on the ticket */
  --accent-2:#D8D6D1;              /* was #dccfb6                                */
  --accent-soft:rgba(255,255,255,.13);
  --accent-ink:#191918;            /* was #16150f                                */
  --offink:var(--cr-muted);        /* was #6f6a5f — now the theme's muted ink    */
  --hair-cream:var(--cr-line);     /* was rgba(22,24,28,.12)                     */
  --mono:var(--cr-mono);
  --sys:var(--cr-font);

  box-sizing:border-box;
  font-family:var(--sys);
  color:var(--offink);
  background:transparent;          /* was a radial cream gradient */
  width:100%;
  margin:0;
  padding:0;                       /* was 40px 18px 48px — the panel pads already */
  display:flex;
  flex-direction:column;
  align-items:center;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
.gbA *{ box-sizing:border-box; }

.gbA .gbA-head{width:100%;max-width:760px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;margin:0 0 16px;padding:0 4px}
.gbA .gbA-brand{font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--offink);display:flex;align-items:center;gap:8px}
.gbA .gbA-brand svg{display:block}
/* No opacity on small text: --cr-muted clears AA by a hair (5.10:1) and any
   opacity multiplies against the page background, pushing it under 4.5:1. */
.gbA .gbA-boarding{font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--offink)}

/* ===== The ticket ===== */
.gbA .gbA-ticket{--notch:22px;position:relative;width:100%;max-width:760px;
  display:flex;align-items:stretch;
  background:linear-gradient(180deg,var(--card-1),var(--card-2));
  border:1px solid var(--edge);border-radius:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,
             0 24px 48px -28px rgba(16,24,40,.45),
             0 6px 18px -12px rgba(16,24,40,.30);
  isolation:isolate}

.gbA .gbA-main{flex:1 1 auto;min-width:0;padding:26px 26px 24px;
  display:flex;flex-direction:column;gap:18px}
.gbA .gbA-top{display:flex;align-items:center;gap:14px}
.gbA .gbA-logo{width:52px;height:52px;flex:0 0 auto;border-radius:13px;
  background:var(--accent-soft);border:1px solid var(--hair);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.gbA .gbA-logo img{width:100%;height:100%;object-fit:contain;padding:8px;display:block}
.gbA .gbA-titles{min-width:0}
.gbA .gbA-kick{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);margin:0 0 4px}
/* The tool name is an <h1> inside page content; the panel's own h1 rule would
   otherwise repaint it ink-on-black and it would vanish. */
.gbA .gbA-tool{font-size:22px;font-weight:650;letter-spacing:-.01em;
  color:var(--ink)!important;margin:0;line-height:1.15;word-break:break-word}

.gbA .gbA-route{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.gbA .gbA-route .dot{width:6px;height:6px;border-radius:50%;
  background:var(--accent-2);flex:0 0 auto}
.gbA .gbA-route .dash{flex:1 1 auto;height:1px;
  background:repeating-linear-gradient(90deg,var(--hair) 0 6px,transparent 6px 12px)}
.gbA .gbA-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:0}
.gbA .gbA-servers{display:flex;flex-direction:column;gap:10px}

/* Server buttons. These are <a> inside .am-body-content, where amember.css
   paints links blue — hence the !important colours, same as the old page CSS. */
.gbA a.gbA-btn{-webkit-appearance:none!important;appearance:none!important;
  display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;
  border-radius:12px;font-family:var(--sys);font-size:15px;font-weight:600;
  letter-spacing:.01em;text-decoration:none!important;cursor:pointer;
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
  border:1px solid transparent}
.gbA a.gbA-btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.gbA a.gbA-btn .gbA-btn-ic{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.gbA a.gbA-btn .gbA-btn-tx{flex:1 1 auto;min-width:0}
.gbA a.gbA-btn .gbA-btn-go{flex:0 0 auto;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;opacity:.75;display:flex;align-items:center;gap:6px}

.gbA a.gbA-primary{background:var(--accent)!important;color:var(--accent-ink)!important;
  border-color:var(--accent)!important;box-shadow:0 10px 22px -14px rgba(255,255,255,.45)}
.gbA a.gbA-primary:hover{background:var(--accent-2)!important;color:var(--accent-ink)!important;
  transform:translateY(-1px)}
.gbA a.gbA-primary:active{transform:translateY(0)}
.gbA a.gbA-ghost{background:transparent!important;color:var(--ink)!important;
  border-color:var(--edge)!important}
.gbA a.gbA-ghost:hover{background:var(--accent-soft)!important;color:var(--ink)!important;
  border-color:var(--accent-2)!important;transform:translateY(-1px)}
.gbA a.gbA-ghost:active{transform:translateY(0)}

/* ===== Perforation + stub ===== */
.gbA .gbA-perf{position:relative;flex:0 0 0px;width:0;align-self:stretch;
  border-left:2px dashed rgba(255,255,255,.18)}
/* The notches punch through to whatever is behind the ticket. That is the
   panel's card surface now, not the old cream canvas. */
.gbA .gbA-perf::before,.gbA .gbA-perf::after{content:"";position:absolute;left:50%;
  width:var(--notch);height:var(--notch);border-radius:50%;
  background:var(--cr-card);transform:translate(-50%,-50%);
  box-shadow:0 0 0 1px var(--cr-line) inset}
.gbA .gbA-perf::before{top:0}
.gbA .gbA-perf::after{top:100%}

.gbA .gbA-stub{flex:0 0 168px;width:168px;padding:24px 18px;display:flex;
  flex-direction:column;align-items:center;justify-content:space-between;
  gap:16px;text-align:center}
.gbA .gbA-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  padding:6px 12px;border:1px solid var(--accent-2);border-radius:999px;
  background:var(--accent-soft)}
.gbA .gbA-status .pip{width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.gbA .gbA-idlabel{font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);margin:0 0 5px}
.gbA .gbA-id{font-family:var(--mono);font-size:14px;letter-spacing:.16em;
  color:var(--ink);margin:0}
.gbA .gbA-barcode{width:100%;height:46px;display:flex;align-items:flex-end;
  gap:2px;justify-content:center}
.gbA .gbA-barcode i{display:block;width:2px;height:100%;background:var(--accent);opacity:.9}
.gbA .gbA-barcap{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);margin:0}

/* ===== Below the ticket ===== */
.gbA .gbA-below{width:100%;max-width:760px;margin:18px 0 0;
  display:flex;flex-direction:column;gap:14px}
.gbA details.gbA-steps{width:100%;border:1px solid var(--hair-cream);
  border-radius:12px;background:var(--cr-bg)}
.gbA details.gbA-steps summary{list-style:none;cursor:pointer;padding:13px 16px;
  display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--offink);user-select:none}
.gbA details.gbA-steps summary::-webkit-details-marker{display:none}
.gbA details.gbA-steps summary .chev{margin-left:auto;transition:transform .2s ease;display:flex}
.gbA details.gbA-steps[open] summary .chev{transform:rotate(180deg)}
.gbA .gbA-steplist{margin:0;padding:2px 16px 14px;list-style:none;counter-reset:step}
/* amember.css `.am-common ol li{list-style-type:decimal}` hits the LI itself,
   so `list-style:none` on the <ol> does not suppress it — without this the step
   list renders aMember's number AND our counter circle. Same for the <ul>. */
.gbA .gbA-steplist li,.gbA .gbA-important li{list-style:none!important;
  list-style-type:none!important;margin-bottom:0!important}
.gbA .gbA-steplist li{position:relative;padding:8px 0 8px 34px;font-size:13.5px;
  color:var(--offink);border-top:1px solid var(--hair-cream);counter-increment:step}
.gbA .gbA-steplist li:first-child{border-top:0}
.gbA .gbA-steplist li::before{content:counter(step);position:absolute;left:0;top:8px;
  width:22px;height:22px;border-radius:50%;background:var(--cr-ink);color:#fff;
  border:1px solid var(--cr-ink);font-family:var(--mono);font-size:11px;
  display:flex;align-items:center;justify-content:center}

.gbA .gbA-important{width:100%;border:1px solid var(--hair-cream);border-radius:12px;
  background:var(--cr-bg);padding:14px 16px}
.gbA .gbA-important h3{margin:0 0 10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--offink);
  display:flex;align-items:center;gap:8px}
.gbA .gbA-important ul{margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:9px}
.gbA .gbA-important li{position:relative;padding-left:22px;font-size:13.5px;color:var(--offink)}
.gbA .gbA-important li svg{position:absolute;left:0;top:3px}
/* icoDot strokes with var(--accent-2), which is near-white — invisible on the
   light card below the ticket. Repaint it to the ink used for the surface. */
.gbA .gbA-important li svg circle,.gbA .gbA-important li svg path{stroke:var(--cr-ink)}

.gbA a.gbA-wa{-webkit-appearance:none!important;appearance:none!important;
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:13px 16px;border-radius:12px;background:var(--card-1)!important;
  color:var(--ink)!important;border:1px solid var(--edge)!important;
  text-decoration:none!important;font-family:var(--sys);font-size:14px;
  font-weight:600;cursor:pointer;
  transition:transform .12s ease,border-color .2s ease,background .2s ease}
.gbA a.gbA-wa:hover{border-color:var(--accent-2)!important;background:var(--card-2)!important;
  color:var(--ink)!important;transform:translateY(-1px)}
.gbA a.gbA-wa:active{transform:translateY(0)}
.gbA a.gbA-wa .gbA-wa-num{font-family:var(--mono);letter-spacing:.06em;color:var(--accent)}
/* --accent-2 is near-white: correct on the black ticket, invisible here.
   This button is below the ticket on the light panel, so focus with ink. */
.gbA a.gbA-wa:focus-visible{outline:2px solid var(--cr-ink);outline-offset:2px}
.gbA details.gbA-steps summary:focus-visible{outline:2px solid var(--cr-ink);
  outline-offset:-2px}

.gbA .gbA-foot{width:100%;max-width:760px;margin:20px 0 0;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--offink)}

/* ===== Mobile: stack main over stub ===== */
@media (max-width:620px){
  .gbA .gbA-ticket{flex-direction:column}
  .gbA .gbA-main{padding:22px 20px 20px}
  .gbA .gbA-perf{width:auto;height:0;align-self:stretch;border-left:0;
    border-top:2px dashed rgba(255,255,255,.18)}
  .gbA .gbA-perf::before,.gbA .gbA-perf::after{top:50%;left:auto}
  .gbA .gbA-perf::before{left:0;transform:translate(-50%,-50%)}
  .gbA .gbA-perf::after{left:100%;top:50%;transform:translate(-50%,-50%)}
  .gbA .gbA-stub{flex:none;width:100%;flex-direction:row;flex-wrap:wrap;
    align-items:center;justify-content:flex-start;padding:18px 20px;
    gap:10px 14px;text-align:left}
  .gbA .gbA-stub .gbA-status{order:1}
  .gbA .gbA-stub .gbA-idwrap{order:2;margin-left:auto;text-align:right}
  .gbA .gbA-stub .gbA-idlabel,.gbA .gbA-stub .gbA-id{white-space:nowrap}
  .gbA .gbA-stub .gbA-barcode{order:3;width:100%;flex:0 0 100%;max-width:none;
    height:40px;justify-content:flex-start;margin-top:2px}
  .gbA .gbA-stub .gbA-barcap{order:4;width:100%;text-align:left}
  .gbA .gbA-tool{font-size:20px}
}


/* =====================================================================
   REDUCED MOTION — the panel animates the sidebar drawer, card lifts,
   button nudges and the ticket's hover transforms. Honour the OS setting.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  /* Movement, not just speed: drop the translate entirely. */
  #member-resources .resource-card:hover,
  input[type=submit]:hover,button[type=submit]:hover,.button:hover,a.button:hover,
  .gb-dash-btn:hover,.gbA a.gbA-btn:hover,.gbA a.gbA-wa:hover{transform:none!important}
}


/* =====================================================================
   PAGE-CONTENT CONTAINMENT
   ---------------------------------------------------------------------
   Tool pages are admin-entered HTML and most of them ship their own
   <style> block. Those blocks land inside .am-body-content-content, but
   their SELECTORS are global — a `body{max-width:970px;margin:0 auto}` or
   a bare `div{...}` written for a standalone mockup will re-lay-out the
   whole panel, which is how /content/p/id/44/ ended up with the entire
   shell centred at ~970px and a 520px void down the left.

   The shell's geometry is therefore re-asserted here, at the end of the
   sheet, at (0,1,2)+!important. A page's `body{...}` is (0,0,1) — even
   with !important it cannot win, and page CSS keeps full freedom inside
   the content area where it belongs.
   ===================================================================== */
/* `html` has to be pinned too: a universal selector in page CSS (`*{max-width:
   1000px}`, and the very common `*{max-width:100%}`) matches the root element,
   and constraining the root shrinks everything inside it no matter what the
   shell says. (0,0,1)+!important beats `*` at (0,0,0). */
html{max-width:none!important;width:auto!important;margin:0!important;
  padding:0!important;transform:none!important;zoom:normal!important}
html body.am-logged-in,html body.am-logged-out{max-width:none!important;
  width:auto!important;margin:0!important;padding:0!important;
  display:block!important;float:none!important;position:static!important;
  transform:none!important;zoom:normal!important;inset:auto!important}
html body > .gb-shell{max-width:none!important;width:auto!important;
  margin:0!important;padding:0!important;float:none!important}
html body > .gb-shell > .gb-side{max-width:none!important;float:none!important;
  margin:0!important}
html body > .gb-shell > .gb-maincol{max-width:none!important;float:none!important;
  margin:0!important;padding:0!important}
html body > .gb-shell > .gb-maincol > .gb-content{max-width:none!important;
  float:none!important;margin:0!important}

/* =====================================================================
   "Useful Links" widget — removed from the dashboard.
   Every entry in it (Logout, Change Password/Edit Profile, Payments
   History) is already a permanent item in the sidebar, so on this theme
   it is pure duplication sitting in a half-width column.

   Matched by its own list class rather than a block id, because the id in
   `id="widget-%3$s"` is assigned by aMember and is not stable to guess.
   The right column is dropped with it, otherwise the grid below would
   hold an empty half open. Both conditions ignore this one widget, so if
   a real widget is ever added to the right column the 2-up returns by
   itself.
   ===================================================================== */
.am-widget:has(.am-list-links){display:none!important}
.am-coll-right:not(:has(.am-widget:not(:has(.am-list-links)))){display:none!important}