/* ==========================================================================
   EAGLE DASHBOARD  --  port of Eagle-Dashboard-v2-photo-background

   Ported 1:1 from the Claude Design project "Mobile dashboard image design",
   file Eagle-Dashboard-v2-photo-background.dc.html. Every colour, radius,
   blur, weight and letter-spacing below is taken from that file rather than
   re-derived, so the two stay comparable.

   Two structural notes, because they are what make this design work and they
   are NOT what was here before:

   1. The photo is a 560px BAND at the top of the page, not a full-page fixed
      background. It scrolls away with the content, and a four-stop gradient
      hands it off to solid ground before the cards begin. That is why there
      is no contrast problem below the fold and no scroll-jump: the cards sit
      on opaque #050251, not on a photograph.

   2. Consequently there is no parallax. The band is in normal flow in the
      source design; dashboard-parallax.js is no longer loaded.

   Markup uses eg- prefixed classes written to match the design, rather than
   restyling stock .site-card / .user-cards markup, so there is no specificity
   fight and the result is the design rather than an approximation of it.
   ========================================================================== */

body.dark-theme {
	/* Ground and surfaces */
	--eg-ground: #050251;

	/* The ground again, as a bare "r, g, b" triple. Auth scrims fade a photo
	   into the ground at varying alpha, which needs rgba() and so cannot use
	   --eg-ground. Keeping it a token means a skin restates the colour here
	   instead of re-declaring the gradient rules at a higher specificity. */
	--eg-scrim-rgb: 5, 2, 81;

	/* The glass panel colour as a bare triple, for the same reason as the scrim:
	   the auth card fades it under a white sheen at its own alpha. Separate from
	   --eg-scrim-rgb because the card sits lighter than the ground it floats on. */
	--eg-glass-rgb: 18, 16, 102;
	--eg-panel: rgba(var(--eg-glass-rgb), 0.55);
	--eg-panel-edge: rgba(255, 255, 255, 0.14);
	--eg-row: rgba(255, 255, 255, 0.06);
	--eg-row-edge: rgba(255, 255, 255, 0.1);
	--eg-rule: rgba(255, 255, 255, 0.12);

	/* Header and bar */
	--eg-header: rgba(5, 2, 81, 0.92);
	--eg-header-edge: rgba(212, 175, 55, 0.22);
	--eg-bar: rgba(20, 18, 102, 0.8);
	--eg-bar-edge: rgba(212, 175, 55, 0.34);

	/* Accents */
	--eg-gold: #D4AF37;
	--eg-gold-hi: #E4C86B;
	--eg-gold-fill: rgba(212, 175, 55, 0.16);
	--eg-gold-edge: rgba(212, 175, 55, 0.38);
	--eg-teal: #5ae1cd;
	--eg-teal-fill: rgba(90, 225, 205, 0.12);
	--eg-teal-edge: rgba(90, 225, 205, 0.3);

	/* Ledger states. Teal already means "up", so money leaving and failed work
	   need their own hue, and a waiting state needs to read as neither. */
	--eg-rose: #ff8a9b;
	--eg-rose-fill: rgba(255, 138, 155, 0.12);
	--eg-rose-edge: rgba(255, 138, 155, 0.32);
	--eg-warn: #f5c451;
	--eg-warn-fill: rgba(245, 196, 81, 0.13);
	--eg-warn-edge: rgba(245, 196, 81, 0.34);

	/* Type */
	--eg-ink: #ffffff;
	--eg-ink-2: #e9ecff;
	--eg-ink-dim: rgba(255, 255, 255, 0.55);
	--eg-ink-mute: rgba(255, 255, 255, 0.7);
	--eg-on-bright: #050251;

	--eg-font: Manrope, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Ground
   -------------------------------------------------------------------------- */
html {
	background-color: #050251;
}

body.dark-theme {
	background: var(--eg-ground);
	font-family: var(--eg-font);
}

/* The photo band. Absolutely positioned at the top of the layout, so it
   scrolls with the page exactly as it does in the source design.

   object-fit is emulated with background-size:cover on the element itself --
   the design uses an <img>, but as a background it needs no extra markup in
   every view that extends this layout. object-position:center bottom becomes
   background-position:center bottom, which is what deliberately frames the
   keyboard at the TOP of the band. */
.eg-photo-band {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 560px;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
	background-color: var(--eg-ground);
	background-image:
		url("../images/dashboard-bg.jpg"),
		url("../images/dashboard-bg.jpeg"),
		url("../images/dashboard-bg.png");
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
}

/* The four-stop hand-off to solid ground. Values verbatim from the design. */
.eg-photo-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(5, 2, 81, 0.55) 0%,
		rgba(5, 2, 81, 0.12) 30%,
		rgba(5, 2, 81, 0.45) 72%,
		#050251 100%
	);
}

/* --------------------------------------------------------------------------
   Shell -- the design is a 430px column, centred
   -------------------------------------------------------------------------- */
body.dark-theme .panel-layout {
	position: relative;
	background: transparent;
	min-height: 100vh;
}

.eg-shell {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 430px;
	margin: 0 auto;
	padding-bottom: 120px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
body.dark-theme.dark-theme .panel-layout .panel-header {
	position: sticky;
	top: 0;
	z-index: 20;
	width: 100%;
	max-width: 430px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	padding-top: calc(14px + env(safe-area-inset-top, 0px));
	background: var(--eg-header);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 0;
	border-bottom: 1px solid var(--eg-header-edge);
	box-shadow: none;
}

.eg-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

/* The countdown sits at the top left of the page, immediately under the
   header, on the same 16px gutter the cards below it use. It reads over the
   photo band, hence the shadow -- the band's own brightness is not fixed. */
.eg-countdown-slot {
	display: flex;
	justify-content: flex-start;
	padding: 14px 16px 0;
}

.eg-countdown-slot .eg-countdown-label,
.eg-countdown-slot .eg-countdown-value {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}

.eg-brand-logo {
	display: block;
	text-decoration: none;
}

/* Live countdown to the next withdrawal window. Values taken from the design:
   5px teal dot, 8.5px/700 label at 50% white, 10px/800 teal figure.

   Tabular numerals are what stop the digits changing width once a second, and
   the min-width holds the row still when the day component narrows -- without
   both, a live countdown visibly jitters. */
.eg-countdown {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;

	/* Nothing around it: the design draws bare spans, so any inherited chip,
	   border, ring or underline is removed rather than restyled. */
	background: none;
	border: 0;
	outline: 0;
	box-shadow: none;
	padding: 0;
	border-radius: 0;
	text-decoration: none;
}

.eg-countdown-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--eg-teal);
	flex: none;
}

.eg-countdown-label {
	color: rgba(255, 255, 255, 0.5);
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.eg-countdown-value {
	color: var(--eg-teal);
	font-size: 10px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	min-width: 9.5ch;
}

/* --------------------------------------------------------------------------
   Notifications

   The stock partial keeps its own markup and behaviour -- the dropdown toggle,
   the unread count and the per-notification read links all come from it. Only
   the skin is v2: the trigger becomes one of the design's 36px circles and the
   panel becomes an opaque dark card, because it opens over scrolling content
   of unpredictable brightness.
   -------------------------------------------------------------------------- */
.eg-notify {
	position: relative;
	display: flex;
	align-items: center;
}

/* Bare icon -- no circle, no border, no focus ring. The badge is the only
   thing that should draw the eye here. */
.eg-notify .item,
.eg-notify .notification-dot {
	position: relative;
	width: 36px;
	height: 36px;
	background: none;
	border: 0;
	outline: 0;
	box-shadow: none;
	border-radius: 0;
	color: #cfd6ff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}

.eg-notify .item:hover {
	background: none;
	color: var(--eg-gold);
}

.eg-notify .item:focus,
.eg-notify .item:focus-visible,
.eg-notify .item:active {
	background: none;
	border: 0;
	outline: 0;
	box-shadow: none;
}

.eg-notify .item i {
	width: 17px;
	height: 17px;
}

/* Unread badge, kept as it was before the port: the stock red, white figure,
   18px circle -- and always shown, including a zero. Values from
   styles.css .notification-dot .number.

   Position is pulled in from the box corner rather than stock's -2/-5: with
   the circle gone the 36px button is mostly empty space, so a corner-anchored
   badge would float away from the bell it belongs to. */
.eg-notify .number {
	position: absolute;
	top: 1px;
	right: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ef476f;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.eg-notify .notification-pop {
	background: rgba(5, 2, 81, 0.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--eg-panel-edge);
	border-radius: 16px;
	padding: 0;
	overflow: hidden;
	min-width: 280px;
	box-shadow: 0 16px 38px rgba(3, 6, 22, 0.6);
}

.eg-notify .noti-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--eg-rule);
	color: var(--eg-ink);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.eg-notify .noti-head span {
	color: var(--eg-gold);
	font-weight: 800;
}

.eg-notify .all-noti {
	max-height: 320px;
	overflow-y: auto;
}

.eg-notify .single-noti a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--eg-rule);
	text-decoration: none;
	color: var(--eg-ink-2);
	font-size: 12.5px;
}

.eg-notify .single-noti a:hover {
	background: rgba(255, 255, 255, 0.05);
}

/* Read items recede rather than disappear. */
.eg-notify .single-noti a.read {
	color: var(--eg-ink-dim);
}

.eg-notify .single-noti .icon {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--eg-teal-fill);
	border: 1px solid var(--eg-teal-edge);
	color: var(--eg-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.eg-notify .single-noti .icon i {
	width: 14px;
	height: 14px;
}

.eg-notify .noti-footer {
	padding: 12px 16px;
}

.eg-notify .noti-footer a {
	display: block;
	text-align: center;
	color: var(--eg-gold);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.eg-notify .noti-footer a:hover {
	color: var(--eg-gold-hi);
}

/* Pay day: the dot and figure go gold, so the one day withdrawals are open
   reads differently from the six days of waiting. */
.eg-countdown.is-payday .eg-countdown-dot,
.eg-countdown.is-payday .eg-countdown-value {
	background: var(--eg-gold);
	color: var(--eg-gold);
}

.eg-countdown.is-payday .eg-countdown-value {
	background: none;
}

/* The real site logo in place of the design's lettermark. Height-capped and
   width-auto so any aspect ratio sits on the 34px optical line the design's
   tile established, without the logo dictating the header height. */
.eg-logo {
	height: 34px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
	display: block;
}

.eg-brand-mark {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: linear-gradient(140deg, #D4AF37, #8A6E23);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #141a52;
	font-weight: 800;
	font-size: 16px;
	flex: none;
}

.eg-brand-mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 9px;
}

.eg-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.eg-brand-1 {
	color: var(--eg-gold);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.22em;
}

.eg-brand-2 {
	color: var(--eg-ink);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	margin-top: 4px;
}

.eg-head-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.eg-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
}

.eg-circle-plain {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #cfd6ff;
}

.eg-circle-gold {
	background: var(--eg-gold-fill);
	border: 1px solid rgba(212, 175, 55, 0.4);
	color: var(--eg-gold);
	overflow: hidden;
}

.eg-circle-gold img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Greeting -- 200px of top padding is what floats it over the photo
   -------------------------------------------------------------------------- */
/* The design floats the greeting 200px below the header, deep into the photo
   band. That leaves a large empty gap under the countdown, so it is pulled up
   to 40px: the salutation now follows the countdown closely and the photo
   reads around and below the text rather than above it.

   This is the one value that sets how much bare photo shows before the
   content starts -- raise it to float the greeting lower again. */
.eg-greeting {
	padding: 40px 16px 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* 9.5px, down from the design's 13px. The design could afford 13px against a
   21px title; against 13px the label has to step back further or the two read
   as one block. Uppercase and the wide tracking carry it at this size. */
.eg-greeting-label {
	color: var(--eg-ink-mute);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* The design went 28px, then 21px in its latest revision. Reduced again to
   13px: with the greeting no longer floating deep in the photo band it sits
   close to the countdown and the first card, and anything larger dominated
   both. Weight drops to 700 too -- 800 at this size reads as heavy rather
   than emphatic. */
.eg-greeting-title {
	color: var(--eg-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */
.eg-section {
	padding: 16px 16px 0;
}

.eg-section-first {
	padding-top: 26px;
}

/* The quick-actions card loses its fill but keeps its outline -- the teal icon
   chips and their labels read straight against the photo band, inside the same
   20px rounded rectangle the cards below use.

   Padding and radius stay for that reason: with a border still drawn, the
   content has to sit inside it, and the shape has to match the panels beneath
   or the stack looks misaligned. Only the fill, blur and shadow are dropped.

   The labels pick up a shadow because they now sit on the photograph rather
   than on a panel, and its brightness is not fixed. */
.eg-section-first .eg-card {
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	border: 1px solid var(--eg-panel-edge);
}

.eg-section-first .eg-action-label {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.eg-card {
	background: var(--eg-panel);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--eg-panel-edge);
	border-radius: 20px;
	padding: 18px 16px;
}

.eg-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.eg-card-title {
	color: var(--eg-ink);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.eg-card-link {
	color: var(--eg-gold);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.eg-card-link:hover {
	color: var(--eg-gold-hi);
}

.eg-rule {
	height: 1px;
	background: var(--eg-rule);
	margin: 14px 0 16px;
}

/* --------------------------------------------------------------------------
   Quick actions
   -------------------------------------------------------------------------- */
.eg-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px 10px;
}

.eg-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	text-decoration: none;
}

.eg-action-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--eg-teal-fill);
	border: 1px solid var(--eg-teal-edge);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--eg-teal);
	font-size: 19px;
}

.eg-action-icon i {
	width: 19px;
	height: 19px;
}

.eg-action-label {
	color: var(--eg-ink-2);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Services

   The stock partial keeps its own markup so the membership gating and the
   Load more toggle keep working; only its skin is replaced. .service-tabs-more
   is left alone -- stock already has it display:none and jQuery slideToggle
   drives it, so setting display here would fight the animation.
   -------------------------------------------------------------------------- */
.eg-services .row,
.eg-services [class*="col-"] {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
}

.eg-services .site-card.service-card {
	background: var(--eg-panel);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--eg-panel-edge);
	border-radius: 20px;
	padding: 18px 16px;
	box-shadow: none;
}

.eg-services .site-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--eg-rule);
	padding-bottom: 14px;
	margin-bottom: 16px;
	background: transparent;
}

.eg-services .site-card-header .title {
	color: var(--eg-ink);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0;
}

.eg-services .site-card-body {
	padding: 0;
	background: transparent;
}

.eg-services .membership-badge {
	display: inline-block;
	background: var(--eg-gold-fill);
	border: 1px solid var(--eg-gold-edge);
	color: var(--eg-gold);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.eg-services .membership-badge.inactive {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--eg-row-edge);
	color: var(--eg-ink-dim);
}

.eg-services .service-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Unlocked services take the teal chip the design uses for quick actions;
   locked ones drop to the neutral row fill so the difference is legible
   without relying on the padlock alone. */
.eg-services .service-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--eg-teal-fill);
	border: 1px solid var(--eg-teal-edge);
	color: var(--eg-teal);
	border-radius: 14px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.eg-services .service-tab:hover {
	background: rgba(90, 225, 205, 0.2);
}

.eg-services .service-tab.locked {
	background: var(--eg-row);
	border-color: var(--eg-row-edge);
	color: var(--eg-ink-dim);
}

.eg-services .service-tab.locked:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--eg-ink-2);
}

.eg-services .service-tab i {
	width: 14px;
	height: 14px;
}

/* Membership is the action the other tiles depend on, so it is the only one
   painted solid -- teal outlines read as "a service", and this is not one. */
.eg-services .service-tab--membership {
	background: var(--eg-gold);
	border-color: var(--eg-gold);
	color: var(--eg-on-bright);
}

.eg-services .service-tab--membership:hover {
	filter: brightness(1.08);
	background: var(--eg-gold);
}

/* EagleFiba is a partner promo, not a gated Eagle service, so it takes the
   gold accent instead of the teal used for the SSO services. */
.eg-services .service-tab.featured {
	background: var(--eg-gold-fill);
	border-color: var(--eg-gold-edge);
	color: var(--eg-gold);
}

.eg-services .service-tab.featured:hover {
	background: rgba(212, 175, 55, 0.24);
}

.eg-services .service-tab-badge-new {
	margin-left: 4px;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	background: var(--eg-gold);
	color: var(--eg-on-bright);
}

/* Upline / joined / amount block above the quick actions. */
.eg-section .membership-meta {
	margin: 0;
}

.eg-section .membership-meta-upline {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.eg-section .membership-meta-label {
	color: var(--eg-ink-dim);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.eg-section .membership-meta-value {
	color: var(--eg-ink-2);
	font-size: 13px;
	font-weight: 600;
}

.eg-section .membership-meta-value.accent {
	color: var(--eg-gold);
}

.eg-section .membership-meta-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.eg-section .membership-meta-card {
	display: flex;
	flex: 1 1 150px;
	align-items: center;
	gap: 10px;
	padding: 12px;
	border-radius: 14px;
	background: var(--eg-row);
	border: 1px solid var(--eg-row-edge);
}

.eg-section .membership-meta-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--eg-gold-fill);
	color: var(--eg-gold);
}

.eg-section .membership-meta-card-icon i {
	width: 15px;
	height: 15px;
}

.eg-section .membership-meta-card-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.eg-services .service-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.eg-services .service-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--eg-ink-dim);
	font-size: 12px;
	margin: 0;
}

.eg-services .service-hint i {
	width: 14px;
	height: 14px;
}

/* The toggle reads as the card's own action, matching the gold "Manage" link
   on the wallets card rather than introducing a third button weight. */
.eg-services .more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--eg-gold);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.eg-services .more-toggle:hover {
	color: var(--eg-gold-hi);
}

.eg-services .more-toggle i {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.eg-services .more-toggle[data-expanded="true"] i {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.eg-services .more-toggle i {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Wallet rows
   -------------------------------------------------------------------------- */
.eg-wallets {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.eg-wallet {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--eg-row);
	border: 1px solid var(--eg-row-edge);
	border-radius: 14px;
	padding: 12px 14px;
}

.eg-wallet-sym {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--eg-gold-fill);
	border: 1px solid var(--eg-gold-edge);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--eg-gold);
	font-size: 16px;
	font-weight: 800;
	flex: none;
}

.eg-wallet-id {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.eg-wallet-name {
	color: var(--eg-ink);
	font-size: 14px;
	font-weight: 700;
}

.eg-wallet-sub {
	color: var(--eg-ink-dim);
	font-size: 12px;
}

.eg-wallet-amt {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}

.eg-wallet-bal {
	color: var(--eg-ink);
	font-size: 15px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.eg-wallet-delta {
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.eg-delta-up {
	color: var(--eg-teal);
}

.eg-delta-flat {
	color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   Statistics -- bright tiles with dark ink, the one inversion in the design
   -------------------------------------------------------------------------- */
.eg-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

/* Statistic tile. Redesigned onto the dashboard's own glass-on-navy language
   -- the previous lime/amber fills were the only bright surfaces in the whole
   product and read as a different app. Contrast is carried by white ink on
   the dark panel, which clears AA comfortably, so the accent colour is free
   to live in the icon chip alone. */
.eg-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 15px 14px 16px;
	border-radius: 16px;
	background: var(--eg-row);
	border: 1px solid var(--eg-row-edge);
	transition: border-color 0.16s ease, transform 0.16s ease;
}

.eg-stat:hover {
	border-color: var(--eg-gold-edge);
	transform: translateY(-1px);
}

.eg-stat-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex: none;
	background: var(--eg-gold-fill);
	border: 1px solid var(--eg-gold-edge);
	color: var(--eg-gold);
}

/* Accent per tile. Names kept so existing markup keeps working. */
.eg-stat-lime .eg-stat-icon {
	background: var(--eg-teal-fill);
	border-color: var(--eg-teal-edge);
	color: var(--eg-teal);
}

.eg-stat-amber .eg-stat-icon {
	background: var(--eg-gold-fill);
	border-color: var(--eg-gold-edge);
	color: var(--eg-gold);
}

.eg-stat-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.eg-stat-value {
	color: var(--eg-ink);
	font-size: 23px;
	font-weight: 800;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.eg-stat-label {
	color: var(--eg-ink-dim);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Referral URL
   -------------------------------------------------------------------------- */
.eg-ref {
	display: flex;
	align-items: stretch;
	border-radius: 10px;
	overflow: hidden;
}

.eg-ref input {
	flex: 1;
	min-width: 0;
	background: rgba(0, 0, 0, 0.2);
	border: 0;
	padding: 12px 14px;
	color: var(--eg-ink-dim);
	font-family: inherit;
	font-size: 13px;
	font-style: italic;
	text-overflow: ellipsis;
}

.eg-ref input:focus {
	outline: 2px solid var(--eg-gold-edge);
	outline-offset: -2px;
}

.eg-ref button {
	background: var(--eg-gold);
	color: var(--eg-on-bright);
	border: none;
	font-family: inherit;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.06em;
	padding: 0 20px;
	cursor: pointer;
}

.eg-ref button:hover {
	background: var(--eg-gold-hi);
}

.eg-ref-note {
	color: rgba(255, 255, 255, 0.75);
	font-size: 12.5px;
	margin-top: 12px;
}

.eg-copied {
	color: var(--eg-teal);
	font-size: 12px;
	font-weight: 700;
	opacity: 0;
	transition: opacity 0.2s;
}

.eg-copied.show {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Bottom bar
   -------------------------------------------------------------------------- */
body.dark-theme .bottom-appbar,
.eg-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	padding: 0 20px 22px;
	padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
	pointer-events: none;
	background: none;
	border: 0;
	box-shadow: none;
	z-index: 30;
}

.eg-bar-inner {
	width: 100%;
	max-width: 390px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--eg-bar);
	backdrop-filter: blur(22px) saturate(150%);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	border: 1px solid var(--eg-bar-edge);
	border-radius: 22px;
	padding: 12px 10px;
	box-shadow: 0 16px 38px rgba(3, 6, 22, 0.6);
	pointer-events: auto;
}

/* Raised centre action, after driftsetoption's mobile trader nav: the bar
   keeps a gap in the middle and the button sits proud of it on a ring. */
.eg-bar-center {
	flex: none;
	width: 62px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin-top: -30px;
	pointer-events: auto;
}

.eg-bar-chat {
	position: relative;
	width: 54px;
	height: 54px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: manipulation;
}

/* Ring reads as the notch the bar would otherwise cut. */
.eg-bar-chat::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: var(--eg-header);
	border: 1px solid var(--eg-bar-edge);
}

.eg-bar-chat-inner {
	position: relative;
	z-index: 1;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	color: #050251;
	background: linear-gradient(135deg, var(--eg-gold-hi) 0%, var(--eg-gold) 100%);
	box-shadow: 0 6px 18px rgba(212, 175, 55, 0.42), 0 0 0 1.5px rgba(255, 255, 255, 0.10);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.eg-bar-chat:active .eg-bar-chat-inner {
	transform: scale(0.93);
	box-shadow: 0 3px 10px rgba(212, 175, 55, 0.34);
}

.eg-bar-chat-inner svg {
	width: 19px;
	height: 19px;
}

.eg-bar-chat-label {
	font-size: 8px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
}

.eg-bar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: rgba(244, 246, 255, 0.42);
}

.eg-bar-item.is-on {
	color: var(--eg-gold);
}

.eg-bar-item i {
	font-size: 17px;
	line-height: 1;
	width: 17px;
	height: 17px;
}

.eg-bar-label {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   Chrome the design does not have. The side nav and the stock desktop halves
   are not part of v2, which is a single 430px column. They are hidden rather
   than restyled so the port is the design and not a hybrid of it.
   -------------------------------------------------------------------------- */
body.dark-theme .panel-layout .side-nav {
	display: none !important;
}

/* The two dashboard compositions. Below 1024px the phone column runs; at and
   above it the desktop page does. The stock rules for these two classes are
   overridden in both directions, which is why both carry !important. */
body.dark-theme .eg-shell .desktop-screen-show {
	display: none !important;
}

/* v2 is one 430px column at every width, so the half stock reserves for small
   screens is the half that runs everywhere. Without this the dashboard is
   blank above 575px, where stock sets .mobile-screen-show to display:none. */
body.dark-theme .eg-shell .mobile-screen-show {
	display: block !important;
}

body.dark-theme .panel-layout .page-container,
body.dark-theme .panel-layout .main-content,
body.dark-theme .panel-layout .section-gap,
body.dark-theme .panel-layout .container-fluid {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	background: transparent !important;
}

/* ==========================================================================
   AUTH  --  port of "Eagle-Auth-v2-sheet.dc.html"

   Replaces the v1 card. The concept changed rather than the styling: the photo
   is now full-bleed behind the whole viewport, the content is anchored to the
   BOTTOM as a sheet with no card around it, and the fields are pill rows with
   an icon chip instead of labelled boxes.

   Three deliberate divergences, each noted where it occurs:

   1. Ground is the company navy #050251, not the design's near-black #05070f.
      The site footer, dashboard and auth all share one ground by standing
      instruction; the design's value would break that. Every gradient stop is
      shifted to the same family.
   2. Gold is --eg-gold (#D4AF37, the website colour) rather than #e8b53a.
   3. The Google / Wallet buttons and the OR divider above them are omitted --
      hyp has no social or wallet auth, so they would be dead controls.
   ========================================================================== */

.eg-auth {
	position: relative;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	background: var(--eg-ground);
	font-family: var(--eg-font);
}

/* justify-content:flex-end is what makes this a sheet -- the content sits on
   the bottom edge and the photo takes whatever height is left above it. */
.eg-auth-col {
	position: relative;
	width: 100%;
	max-width: 430px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Full-bleed photo, not the v1 band. object-position:center 30% keeps the
   desk in frame while the keyboard falls below the sheet. */
.eg-auth-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--eg-ground);
	background-image:
		url("../images/dashboard-bg.jpg"),
		url("../images/dashboard-bg.jpeg"),
		url("../images/dashboard-bg.png");
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
}

.eg-auth-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(var(--eg-scrim-rgb, 5, 2, 81), 0.5) 0%,
		rgba(var(--eg-scrim-rgb, 5, 2, 81), 0.08) 22%,
		rgba(var(--eg-scrim-rgb, 5, 2, 81), 0.86) 58%,
		rgb(var(--eg-scrim-rgb, 5, 2, 81)) 82%
	);
}

/* ---------- top bar ---------- */
.eg-auth-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 26px 22px 0;
	padding-top: calc(26px + env(safe-area-inset-top, 0px));
}

/* The bar has a single child now, so the row lives here. Full width on a
   phone, which reproduces the old space-between exactly; the wide-screen
   split narrows it to the form's width instead. */
.eg-auth-top-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-width: 0;
}

.eg-auth-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	text-decoration: none;
}

.eg-auth-mark {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: linear-gradient(145deg, #E7C563, #A5761A);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #050251;
	font-weight: 800;
	font-size: 14px;
	flex: none;
}

/* Uploaded logo, standing in for the initial tile + wordmark.

   The asset is a horizontal lockup of unknown proportions, so it is sized by
   height and left to find its own width -- max-width keeps a very wide one
   from pushing the Help link off the bar. */
.eg-auth-logo {
	height: 30px;
	width: auto;
	max-width: min(170px, 48vw);
	object-fit: contain;
	object-position: left center;
	flex: 0 1 auto;
	min-width: 0;

	/* Two shadows, not one: the bar floats over an uncontrolled photo, and in
	   the wide split it lands on the bright half where a gold wordmark other-
	   wise disappears. The tight one draws the edge, the soft one lifts it off
	   whatever is behind. The letter tile it replaced was a solid fill and
	   needed neither. */
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85))
		drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}

.eg-auth-word {
	color: #f4f6ff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);

	/* A long site name truncates rather than wrapping the bar onto two lines
	   or shoving Help off the edge. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eg-auth-help {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	flex: none;
}

.eg-auth-help:hover {
	color: var(--eg-gold);
}

/* ---------- the sheet ---------- */
.eg-auth-sheet {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding: 96px 22px 34px;
	padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
}

.eg-auth-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.eg-auth-eyebrow {
	color: var(--eg-gold);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.22em;
}

/* The design sets 38px. Reduced to 24px -- at 38px it dominated the sheet and,
   on register, pushed the field stack well below the fold. Tracking eases from
   -0.035em to -0.02em because tight negative tracking that reads as confident
   at display size reads as cramped at this one. */
.eg-auth-title {
	color: #fff;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.18;
	text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
}

.eg-auth-sub {
	color: rgba(255, 255, 255, 0.58);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	max-width: 330px;
}

/* ---------- pill fields ---------- */
.eg-auth-fields {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.eg-input {
	display: flex;
	align-items: center;
	gap: 13px;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 17px;
	padding: 4px 16px 4px 4px;
}

.eg-input:focus-within {
	border-color: rgba(212, 175, 55, 0.55);
	background: rgba(255, 255, 255, 0.08);
}

.eg-input-icon {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.55);
	flex: none;
}

.eg-input-icon i {
	width: 17px;
	height: 17px;
}

/* The input carries no chrome of its own -- the pill around it is the field. */
.eg-auth .eg-input input,
.eg-auth .eg-input select,
.eg-auth .eg-input textarea {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: #fff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	padding: 16px 0;
}

.eg-auth .eg-input textarea {
	padding: 14px 0;
	resize: vertical;
}

.eg-auth .eg-input input::placeholder,
.eg-auth .eg-input textarea::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

/* Chrome's inset-shadow override only paints the <input>'s own box, which
   stops short of the pill: the icon and the wrapper's 4px/16px padding sit
   outside it. Autofilling used to leave those slivers on the old translucent
   background while the input itself went solid, so the fill visibly stopped
   partway across the field instead of covering it.

   This rule is a backstop, not the fix: Chrome does not reliably restyle a
   :has() ancestor when the autofill state changes, so the coverage is done
   by bleeding the input's own box over the padding (see the rules below and
   in the card theme section). Where invalidation does fire, this makes the
   pill agree with the fill; where it doesn't, nothing depends on it.

   The wrapper's own 1px border is still rgba(255,255,255,0.11) -- barely
   there against the ordinary translucent fill, but the same translucent
   value reads as a hard ring the moment the fill behind it turns fully
   opaque. Restated to match the fill so it stops being visible rather than
   becoming more so. */
.eg-auth .eg-input:has(input:-webkit-autofill) {
	background: #0d0a4a;
	border-color: #0d0a4a;
}

/* Scoped to the sheet theme: the geometry below is this theme's pill padding
   (4px 16px 4px 4px), and the card theme's is different (0 15px). Left
   unscoped, the vertical bleed here would apply to a card-theme pill that
   has no vertical padding to bleed into and pull its fill 4px short at the
   top and bottom. The card theme carries its own copy further down.

   border-radius:0, not the pill's 14px: the inset shadow is clipped to the
   input's own rounded box, so a radius here curves the fill away at each end
   and leaves an arc of wrapper showing. The wrapper draws the rounded
   outline; the fill inside it only has to be square.

   Bleed is right and vertical only. The icon is rendered in this theme and
   paints before the input, so a left bleed would cover it -- that 4px is
   behind the icon anyway. */
.eg-auth--sheet .eg-input input:-webkit-autofill,
.eg-auth--sheet .eg-input input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px #0d0a4a inset;
	border-radius: 0;
	margin: -4px -16px -4px 0;
	padding: 20px 16px 20px 0;
}

.eg-auth .eg-input select option {
	background: #0d0a4a;
	color: #fff;
}

.eg-input.has-toggle {
	padding-right: 6px;
}

.eg-pass-toggle {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.55);
	font-family: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.eg-pass-toggle:hover {
	color: var(--eg-gold);
}

.eg-pass-toggle i {
	width: 16px;
	height: 16px;
}

/* Dial code sits in the icon slot so the phone row keeps the pill shape. */
.eg-input-code {
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
	font-weight: 700;
	flex: none;
	white-space: nowrap;
}

/* ---------- remember toggle ---------- */
.eg-auth-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 4px 0;
}

.eg-switch {
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.62);
	font-size: 12.5px;
	font-weight: 600;
	margin: 0;
}

.eg-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.eg-switch-track {
	width: 34px;
	height: 19px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 2px;
	box-sizing: border-box;
	flex: none;
	transition: background 0.16s, border-color 0.16s, justify-content 0s;
}

.eg-switch-knob {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	transition: transform 0.16s, background 0.16s;
}

.eg-switch input:checked + .eg-switch-track {
	background: rgba(212, 175, 55, 0.85);
	border-color: rgba(212, 175, 55, 0.9);
}

.eg-switch input:checked + .eg-switch-track .eg-switch-knob {
	background: #050251;
	transform: translateX(15px);
}

.eg-switch input:focus-visible + .eg-switch-track {
	outline: 2px solid var(--eg-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.eg-switch-track,
	.eg-switch-knob {
		transition: none;
	}
}

.eg-auth-link {
	color: var(--eg-gold);
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
}

.eg-auth-link:hover {
	color: var(--eg-gold-hi);
}

.eg-auth-terms {
	color: rgba(255, 255, 255, 0.42);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.45;
	padding: 3px 4px 0;
}

.eg-auth-terms a {
	color: var(--eg-gold);
	font-weight: 700;
	text-decoration: none;
}

/* ---------- actions ---------- */
.eg-auth-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.eg-auth-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: linear-gradient(145deg, #EBD08A, #C9971F);
	border: none;
	color: #050251;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.02em;
	padding: 18px 0;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 14px 34px rgba(212, 175, 55, 0.3);
}

.eg-auth-cta:hover {
	filter: brightness(1.06);
}

.eg-auth-cta i {
	width: 17px;
	height: 17px;
}

.eg-auth-switch {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding-top: 4px;
	color: rgba(255, 255, 255, 0.48);
	font-size: 13px;
	font-weight: 500;
}

.eg-auth-switch a {
	color: var(--eg-gold);
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
}

/* Only .eg-auth--card .eg-auth-secure existed before this -- padding and a
   margin reset, nothing else -- because the sheet theme never renders the
   element (__shell_end only prints it inside the card branch). With no base
   rule it fell back to the browser default: black, left-aligned, body-size
   text, which is why it read as stuck to the left edge instead of centred
   under the card like the rest of this footer group. */
.eg-auth-secure {
	text-align: center;
	color: rgba(255, 255, 255, 0.4);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.eg-auth-back {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
}

.eg-auth-back:hover {
	color: var(--eg-gold);
}

.eg-auth-back i {
	width: 14px;
	height: 14px;
}

/* ---------- messages ---------- */
.eg-auth-errors,
.eg-auth-note {
	border-radius: 17px;
	padding: 13px 16px;
	font-size: 12.5px;
	line-height: 1.5;
}

.eg-auth-errors {
	background: rgba(255, 107, 122, 0.14);
	border: 1px solid rgba(255, 107, 122, 0.42);
	color: #ffc9cf;
}

.eg-auth-errors ul {
	margin: 0;
	padding-left: 16px;
}

/* Teal, not gold: this reports that something succeeded, and gold is the
   accent for things you act on. */
.eg-auth-note {
	background: var(--eg-teal-fill);
	border: 1px solid var(--eg-teal-edge);
	color: #b8f4ea;
}

/* reCAPTCHA is a fixed-width iframe and overflows the 430px column. */
.eg-auth .g-recaptcha {
	transform: scale(0.88);
	transform-origin: 0 0;
	height: 68px;
}

/* Short viewports: the sheet's 96px top padding is there to push content off
   the photo, but on a small screen it pushes the CTA off the bottom instead. */
@media (max-height: 720px) {
	.eg-auth-sheet {
		padding-top: 54px;
		gap: 20px;
	}

	.eg-auth-title {
		font-size: 21px;
	}
}

/* --------------------------------------------------------------------------
   Avatar menu

   Same treatment as the notification panel: an opaque card, because it opens
   over page content of unpredictable brightness. The trigger keeps the
   design's 36px gold circle.
   -------------------------------------------------------------------------- */
.eg-user {
	position: relative;
	display: flex;
	align-items: center;
}

.eg-user > .eg-circle-gold {
	padding: 0;
	cursor: pointer;
}

.eg-user > .eg-circle-gold:focus,
.eg-user > .eg-circle-gold:focus-visible {
	outline: 0;
	box-shadow: none;
}

.eg-user-menu {
	background: rgba(8, 5, 60, 0.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--eg-panel-edge);
	border-radius: 16px;
	padding: 0;
	overflow: hidden;
	min-width: 232px;
	box-shadow: 0 16px 38px rgba(2, 4, 16, 0.6);
}

/* Identity row. Worth the space: the avatar is a 36px circle with no name
   beside it, so this is the only place the account is actually named. */
.eg-user-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--eg-rule);
}

.eg-user-name {
	color: var(--eg-ink);
	font-size: 13px;
	font-weight: 800;
}

.eg-user-mail {
	color: var(--eg-ink-dim);
	font-size: 11.5px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eg-user-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 11px 16px;
	background: none;
	border: 0;
	color: var(--eg-ink-2);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.eg-user-menu .dropdown-item:hover,
.eg-user-menu .dropdown-item:focus {
	background: rgba(255, 255, 255, 0.06);
	color: var(--eg-ink);
}

.eg-user-menu .dropdown-item i {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--eg-gold);
}

.eg-user-menu li.logout {
	border-top: 1px solid var(--eg-rule);
}

.eg-user-menu li.logout form {
	margin: 0;
}

/* Signing out is the one destructive action in the menu, so it reads warm
   rather than gold -- gold is used for navigation everywhere else here. */
.eg-user-menu li.logout .dropdown-item,
.eg-user-menu li.logout .dropdown-item i {
	color: #ff8b96;
}

.eg-user-menu li.logout .dropdown-item:hover {
	background: rgba(255, 107, 122, 0.12);
	color: #ffc9cf;
}

/* ==========================================================================
   PC VIEW

   Both designs are 430px phone frames. Left alone they render as a narrow
   strip down the middle of a monitor, so this widens them at two breakpoints.
   Nothing below 900px is touched -- the phone layout is the source of truth
   and this only adds to it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Auth -- angled photo panel, card on the right

   Third desktop treatment tried for this screen (the first split the
   viewport into two solid halves with an inset photo panel; the second went
   full-bleed with the card floating left). This one moves the card to the
   right and stops treating the photo as something to fade or darken text
   against -- it becomes a pure design object, a panel on the left with a
   diagonal edge instead of a straight one, and the card sits on plain ground
   beside it rather than on top of it.

   The card is pulled left from its aligned position (see the negative
   margin below) so it overlaps the panel's angled corner slightly. That
   overlap is what sells the two as one composition rather than a photo and a
   form that happen to share a screen.

   Because text no longer sits on the open photo, the heavy directional scrim
   the previous concept needed is gone -- only a light top fade remains, and
   that exists solely so the brand mark in the top bar (which still crosses
   the panel at its top-left corner) stays legible.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	/* Pinned to one viewport height rather than the phone's min-height:100vh,
	   which let a tall form (register) grow the column past the viewport and
	   drag the panel down the page with it on scroll -- there was nothing
	   fixed about a "fixed" photo whose box kept growing. Capped like this,
	   the panel (sized off this box below) can never be taller than the
	   screen; overflow:hidden stops a still-too-tall sheet from spilling past
	   the column and reintroducing page scroll. The sheet gets its own
	   scrollbar instead -- see .eg-auth-sheet below. */
	.eg-auth-col {
		max-width: none;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		box-sizing: border-box;
	}

	/* inset:0 becomes an explicit box on the left: right is no longer 0, so
	   the panel stops at its own width instead of reaching the far edge. The
	   clip-path is what turns that box into an angled panel -- the right edge
	   runs from full width at the top to 14% narrower at the bottom, so the
	   card's overlap (below) always lands against the sloped part of it
	   rather than a hard vertical line. */
	.eg-auth-photo {
		top: 0;
		right: auto;
		bottom: 0;
		left: 0;
		width: clamp(420px, 46vw, 720px);
		border-radius: 0;
		background-position: center center;
		box-shadow: none;
		clip-path: polygon(0 0, 100% 0, calc(100% - 14%) 100%, 0 100%);

		/* box-shadow is clipped away along with the rest of the box's
		   rectangular geometry; drop-shadow rasterises the shape first and
		   shadows that, so it follows the angle instead of being cut off. */
		filter: drop-shadow(22px 0 44px rgba(0, 0, 0, 0.35));
	}

	/* clip-path on the parent clips its generated content too, so this
	   inherits the panel's angle automatically without repeating it. */
	.eg-auth-photo::after {
		background: linear-gradient(
			180deg,
			rgba(var(--eg-scrim-rgb, 5, 2, 81), 0.46) 0%,
			rgba(var(--eg-scrim-rgb, 5, 2, 81), 0) 26%
		);
	}

	.eg-auth-top {
		padding: 30px 44px 0;
	}

	.eg-auth-sheet {
		width: min(440px, 100%);
		gap: 22px;

		/* Pulls the card left off the column's right-aligned edge and onto
		   the panel's sloped corner. clamp so the overlap holds proportionally
		   at the 900px breakpoint and doesn't grow large enough to swallow the
		   card's own content on a very wide monitor. */
		margin-left: clamp(-110px, -7vw, -56px);

		/* The column's height is now capped (see .eg-auth-col above), and a
		   flex item does not shrink below its content size by default -- so a
		   tall form (register) would just overflow the column's hidden edge
		   and vanish instead of becoming visible again. min-height:0 lifts
		   that default so max-height can actually take effect, and the sheet
		   scrolls within the space it's given rather than growing past it.
		   The photo panel is sized off the column, not the sheet, so none of
		   this touches it -- it holds its position through the scroll. */
		min-height: 0;
		max-height: 100%;
		overflow-y: auto;
	}

	.eg-auth-title {
		font-size: 30px;
	}

	.eg-auth-sub {
		max-width: 380px;
	}

	/* Only a right gutter -- the panel runs flush to the column's left edge
	   under its own width, not the column's padding. */
	.eg-auth--sheet .eg-auth-col {
		padding: 104px clamp(48px, 7vw, 120px) 104px 0;
	}

	.eg-auth--card .eg-auth-col {
		padding: 56px clamp(48px, 7vw, 120px) 56px 0;
	}

	/* The sheet theme's fields sit directly on the photo on a phone, which
	   works there because the phone's vertical scrim darkens the whole lower
	   half evenly. Here the card sits partly over bare photo pixels with no
	   scrim to lean on, so it needs to be an opaque object in its own right --
	   the same glass surface .eg-auth-card already draws for the card theme,
	   restated since the sheet theme has no separate wrapper to carry it. */
	.eg-auth--sheet .eg-auth-sheet {
		background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(var(--eg-scrim-rgb, 5, 2, 81), 0.78));
		backdrop-filter: blur(22px) saturate(140%);
		-webkit-backdrop-filter: blur(22px) saturate(140%);
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 26px;
		padding: 34px 30px 30px;
		box-shadow: 0 30px 64px rgba(2, 4, 16, 0.5);
	}
}

/* --------------------------------------------------------------------------
   Dashboard -- one column becomes two

   .eg-shell is a plain stack of .eg-section blocks, so switching it to a grid
   reflows the cards into two columns with no markup change. The countdown and
   greeting span both, since they introduce the page rather than belonging to
   either column.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.eg-shell {
		max-width: 1060px;
		padding-bottom: 140px;
	}

	/* The phone column gives way to the desktop composition here. Gridding
	   the phone markup into columns -- what this used to do -- put every card
	   in a cell as tall as its row and left holes beside the short ones. */
	body.dark-theme .eg-shell .mobile-screen-show {
		display: none !important;
	}

	body.dark-theme .eg-shell .desktop-screen-show {
		display: block !important;
	}

	/* The header follows the shell so the logo lines up with the first card
	   instead of floating in from the phone width. */
	body.dark-theme.dark-theme .panel-layout .panel-header {
		max-width: 1060px;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Shorter band: at this width the 560px phone value pushes the first row
	   of cards most of the way down the viewport. */
	.eg-photo-band {
		height: 420px;
	}

	.eg-greeting {
		padding-top: 56px;
	}

	.eg-greeting-title {
		font-size: 20px;
	}

	/* The quick actions get the room to spread rather than staying on the
	   phone's three-up grid. */
	.eg-section-first .eg-actions {
		grid-template-columns: repeat(6, 1fr);
	}

	.eg-bar-inner {
		max-width: 440px;
	}
}

@media (min-width: 1400px) {
	.eg-shell,
	body.dark-theme.dark-theme .panel-layout .panel-header {
		max-width: 1240px;
	}

	.eg-desk-body {
		grid-template-columns: minmax(0, 1fr) 380px;
	}
}

/* ==========================================================================
   AUTH THEME: CARD  --  port of "Eagle Auth.dc.html" (v1)

   The second of the two shipped layouts, chosen by
   Admin > Settings > Site > Global > Login Page Theme.

   Everything above styles the sheet theme. This section only overrides what
   differs, scoped to .eg-auth--card, so the two share one set of markup and a
   field added to a view renders correctly under either.

   Photo becomes a 400px band at the top rather than filling the viewport, the
   brand lockup stacks and centres, and the form sits inside a glass card with
   a tab pair at its head.
   ========================================================================== */

/* The sheet theme's bottom anchoring and the card theme's top alignment are
   the structural difference; everything else follows from it. */
.eg-auth--card .eg-auth-col {
	justify-content: flex-start;
}

.eg-auth--card .eg-auth-photo {
	height: 400px;
	bottom: auto;
	background-position: center bottom;
}

/* Phone only. This scrim exists to sink the 400px band into the content below
   it, which is a stacked-layout problem; on a wide screen the photo is a panel
   beside the form and takes the split scrim from the PC VIEW section instead.
   The bound is what lets it: unscoped it outranks that rule, which is a plain
   .eg-auth .eg-auth-photo::after of equal specificity but earlier in the
   file, and media queries add none of their own. */
@media (max-width: 899.98px) {
	.eg-auth--card .eg-auth-photo::after {
		background: linear-gradient(
			180deg,
			rgba(var(--eg-scrim-rgb, 5, 2, 81), 0.72) 0%,
			rgba(var(--eg-scrim-rgb, 5, 2, 81), 0.3) 34%,
			rgba(var(--eg-scrim-rgb, 5, 2, 81), 0.8) 76%,
			rgb(var(--eg-scrim-rgb, 5, 2, 81)) 100%
		);
	}
}

/* No top bar in this theme -- the lockup below replaces it. */
.eg-auth--card .eg-auth-top {
	display: none;
}

.eg-auth--card .eg-auth-sheet {
	padding: 0 20px 34px;
	gap: 0;
}

/* ---------- stacked brand lockup ---------- */
.eg-auth--card .eg-auth-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 56px 0 26px;
	text-decoration: none;
}

.eg-auth--card .eg-auth-mark {
	width: 56px;
	height: 56px;
	border-radius: 18px;
	font-size: 26px;
	box-shadow: 0 12px 30px rgba(212, 175, 55, 0.3);
}

/* Card lockup: the logo is the whole brand block. Held to the height of the
   56px tile it replaced, so the lockup keeps the weight the design gave it
   rather than growing to fill the space the wordmark used to take. */
.eg-auth--card .eg-auth-logo {
	height: 56px;
	max-width: min(210px, 60vw);
	object-position: center;
	filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.45));
}

.eg-auth--card .eg-auth-name {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.eg-auth--card .eg-auth-name b {
	color: #f4f6ff;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.eg-auth--card .eg-auth-name span {
	color: rgba(244, 246, 255, 0.5);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.22em;
}

/* ---------- the card ---------- */
.eg-auth--card .eg-auth-card {
	border-radius: 26px;
	padding: 24px 20px 22px;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(var(--eg-glass-rgb, 18, 16, 102), 0.72));
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 26px 56px rgba(2, 4, 16, 0.55);
}

/* ---------- tabs ----------
   Hidden in the sheet theme, which navigates from the switch line at the foot
   instead. Shown here at the head of the card. */
.eg-auth-tabs {
	display: none;
}

.eg-auth--card .eg-auth-tabs {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: 4px;
	background: rgba(0, 0, 0, 0.26);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
}

.eg-auth--card .eg-auth-tab {
	flex: 1;
	text-align: center;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.5);
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 11px 0;
	border-radius: 11px;
	cursor: pointer;
	text-decoration: none;
}

.eg-auth--card .eg-auth-tab.is-on {
	background: var(--eg-gold-fill);
	color: var(--eg-gold);
}

/* ---------- head ---------- */
.eg-auth--card .eg-auth-head {
	gap: 6px;
	padding: 22px 2px 20px;
}

/* v1 leads with the title; the eyebrow belongs to the sheet theme's larger
   display type and would double up with the tab that is already active. */
.eg-auth--card .eg-auth-eyebrow {
	display: none;
}

.eg-auth--card .eg-auth-title {
	font-size: 25px;
	letter-spacing: -0.025em;
	line-height: 1.15;
	text-shadow: none;
}

.eg-auth--card .eg-auth-sub {
	font-size: 13px;
	max-width: none;
}

/* ---------- fields ----------
   Boxed rather than pill-shaped, and without the leading icon chip: v1 uses a
   plain field with the label carried by the placeholder. */
.eg-auth--card .eg-input {
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	padding: 0 15px;
	gap: 0;
}

.eg-auth--card .eg-input:focus-within {
	border-color: rgba(212, 175, 55, 0.6);
	background: rgba(0, 0, 0, 0.4);
}

/* Own colour rather than inheriting the sheet theme's #0d0a4a navy: this
   theme's fields are translucent black over the glass card
   (rgba(0,0,0,0.28)), not navy, so the shared override read as a mismatched
   patch here even before the wrapper-coverage fix above. Wrapper and input
   share the same value for the reason given there -- one seamless solid
   pill rather than two colours meeting mid-field. */
.eg-auth--card .eg-input:has(input:-webkit-autofill) {
	background: #12101f;
	border-color: #12101f;
}

.eg-auth--card .eg-input input:-webkit-autofill,
.eg-auth--card .eg-input input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px #12101f inset;

	/* The pill pads 0 15px, and an inset shadow only ever paints the input's
	   own box -- so the two 15px side strips kept the pill's translucent
	   background and read as vertical lines down both edges of a filled
	   field. (Nothing appeared top or bottom, because the vertical padding is
	   already 0: the symptom's shape is the padding's shape.)

	   Bleeding the box out by exactly that padding and adding the same amount
	   back as the input's own padding puts the fill against the pill's edges
	   while leaving the text where it was. This does the work rather than the
	   :has() rule above because Chrome does not reliably restyle a :has()
	   ancestor when the autofill state itself changes -- that rule is kept as
	   a backstop where invalidation does fire, but nothing depends on it. */
	margin-left: -15px;
	margin-right: -15px;
	padding-left: 15px;
	padding-right: 15px;

	/* The pill draws the rounded shape. A radius here would only cut the fill
	   back off the corners it was just extended to cover. */
	border-radius: 0;
}

/* Register's phone row is the one case with something rendered to the input's
   left. The input paints after the dial-code chip, so a left bleed would sit
   on top of it -- that side keeps its padding. Structural :has(), matched
   once at parse time, not the dynamic autofill state. */
.eg-auth--card .eg-input:has(.eg-input-code) input:-webkit-autofill,
.eg-auth--card .eg-input:has(.eg-input-code) input:-webkit-autofill:focus {
	margin-left: 0;
	padding-left: 0;
}

.eg-auth--card .eg-input-icon {
	display: none;
}

.eg-auth--card .eg-input input,
.eg-auth--card .eg-input select,
.eg-auth--card .eg-input textarea {
	font-size: 14px;
	padding: 14px 0;
}

/* The dial code keeps its chip -- without it the phone row loses the only
   thing distinguishing the country prefix from the number. */
.eg-auth--card .eg-input-code {
	height: 34px;
	min-width: auto;
	margin-right: 10px;
	border-radius: 9px;
	font-size: 12.5px;
}

.eg-auth--card .eg-pass-toggle {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------- remember toggle ----------
   v1 draws a checkbox, not a switch. The markup is shared, so the switch track
   is reshaped into a box rather than swapped for different elements. */
.eg-auth--card .eg-switch-track {
	width: 19px;
	height: 19px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.22);
	justify-content: center;
	padding: 0;
}

.eg-auth--card .eg-switch-knob {
	width: 0;
	height: 0;
	background: none;
}

.eg-auth--card .eg-switch input:checked + .eg-switch-track {
	background: linear-gradient(145deg, #E9CB78, #C9971F);
	border-color: rgba(212, 175, 55, 0.7);
}

.eg-auth--card .eg-switch input:checked + .eg-switch-track .eg-switch-knob {
	transform: none;
}

.eg-auth--card .eg-switch input:checked + .eg-switch-track::after {
	content: "\2713";
	color: #050251;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

/* ---------- actions ---------- */
.eg-auth--card .eg-auth-actions {
	gap: 0;
}

.eg-auth--card .eg-auth-cta {
	border-radius: 15px;
	font-size: 14.5px;
	padding: 16px 0;
	box-shadow: 0 12px 28px rgba(212, 175, 55, 0.26);
}

/* The arrow belongs to the sheet theme's pill button. */
.eg-auth--card .eg-auth-cta i {
	display: none;
}

.eg-auth--card .eg-auth-switch {
	padding: 22px 0 0;
}

.eg-auth--card .eg-auth-secure {
	padding: 26px 0 0;
	margin-top: 0;
}

/* ---------- desktop ----------
   The card theme takes the same angled panel as the sheet theme -- see the
   PC VIEW section -- so this only adjusts what the card puts on top of it:
   the 400px band becomes the full-height panel, and the lockup's own
   clearance collapses now that the column's padding does that job instead.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
	/* The 400px band and its bottom-anchored crop are a phone device: they
	   give the lockup something to sit on when the photo is above the
	   content. This selector (0,2,0) has to restate full-bleed explicitly --
	   the shared .eg-auth-photo rule two sections up is a lower-specificity
	   0,1,0 and loses the tie to this one regardless of which the cascade
	   would otherwise prefer at this width. */
	.eg-auth--card .eg-auth-photo {
		height: auto;
		bottom: 0;
		background-position: center center;
	}

	/* Slightly wider than the sheet theme's floating stack: the card carries
	   20px of its own padding on each side, so matching 440px of field width
	   means giving the card back what it spends on its walls. */
	.eg-auth--card .eg-auth-sheet {
		width: min(480px, 100%);
		padding: 0;
	}

	.eg-auth--card .eg-auth-brand {
		padding: 0 0 26px;
	}
}

/* ==========================================================================
   GET APP  --  download button in the dashboard header

   Rendered by include/__app_download.blade.php, and only when a download URL
   is configured, so nothing here applies to a site that ships no app.

   Written entirely against the --eg-* tokens rather than the navy/brass
   literals, which is what lets the Ndore skin recolour it to amber by
   redefining the tokens alone -- dashboard-ndore.css needs no rule for this
   component.

   Two sizes, because the header is a 430px column on a phone: icon-only by
   default, and a labelled pill from 576px up where the header widens. That
   keeps the brand lockup and the three actions from ever colliding on a
   360px screen.
   ========================================================================== */
.eg-getapp {
	position: relative;
	flex: none;
}

.eg-getapp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 36px;
	width: 36px;
	padding: 0;
	border: 1px solid var(--eg-gold-edge);
	border-radius: 999px;
	background: linear-gradient(145deg, var(--eg-gold-hi), var(--eg-gold));
	color: var(--eg-on-bright);
	font-family: inherit;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 6px 18px -8px var(--eg-gold);
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.eg-getapp-btn:hover,
.eg-getapp-btn:focus-visible {
	color: var(--eg-on-bright);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -8px var(--eg-gold);
	filter: brightness(1.06);
}

.eg-getapp-btn:active {
	transform: translateY(0);
}

.eg-getapp-btn:focus-visible {
	outline: 2px solid var(--eg-ink);
	outline-offset: 2px;
}

/* The label is hidden rather than absent on phones, so the button collapses
   to the same 36px circle the notification bell and the avatar use. */
.eg-getapp-text {
	display: none;
}

.eg-getapp-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.eg-getapp-ico svg {
	width: 17px;
	height: 17px;
	stroke-width: 2.4;
}

/* The arrow falls, pauses, and falls again -- a download in miniature. Long
   gaps between beats: this sits in a sticky header on every page, so it has
   to be noticeable once and then forgettable. */
@keyframes eg-getapp-drop {
	0%, 62%, 100% { transform: translateY(0); }
	72% { transform: translateY(3px); }
	82% { transform: translateY(-1px); }
	90% { transform: translateY(0); }
}

.eg-getapp-btn .eg-getapp-ico svg {
	animation: eg-getapp-drop 3.6s ease-in-out infinite;
}

/* Sheen. A slim highlight crossing the pill on the same cadence as the drop,
   which is what reads as "fancy" without adding a second colour. */
.eg-getapp-sheen {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 45%;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-18deg);
	animation: eg-getapp-sheen 3.6s ease-in-out infinite;
}

@keyframes eg-getapp-sheen {
	0%, 55%, 100% { left: -60%; }
	85% { left: 130%; }
}

/* Motion is decoration here; the button says what it does without it. */
@media (prefers-reduced-motion: reduce) {
	.eg-getapp-btn .eg-getapp-ico svg,
	.eg-getapp-sheen {
		animation: none;
	}

	.eg-getapp-sheen {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Platform menu -- only rendered when both an Android and an iOS URL are set
   -------------------------------------------------------------------------- */
.eg-getapp-menu {
	min-width: 210px;
	padding: 6px;
	margin-top: 10px;
	border: 1px solid var(--eg-panel-edge);
	border-radius: 16px;
	/* Opaque ground rather than --eg-panel: this opens over the photo band,
	   where a 0.55-alpha surface leaves the photograph legible through the
	   labels. Taking the token means the Ndore skin gets its own ground for
	   free, which the older .eg-user-menu -- still on a navy literal -- does
	   not. */
	background: var(--eg-ground);
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
}

.eg-getapp-head {
	padding: 8px 12px 10px;
	color: var(--eg-ink-dim);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.eg-getapp-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 11px;
	color: var(--eg-ink-2);
	font-size: 13px;
	font-weight: 600;
	background: transparent;
}

.eg-getapp-menu .dropdown-item:hover,
.eg-getapp-menu .dropdown-item:focus {
	background: var(--eg-gold-fill);
	color: var(--eg-gold);
}

.eg-getapp-menu .dropdown-item i,
.eg-getapp-menu .dropdown-item svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* A platform with no download URL yet: listed, but going nowhere.

   Bootstrap's .disabled fades the whole row, which would take the badge down
   with it and leave two greys. The row is dimmed here instead, so the badge
   keeps a colour of its own and the eye lands on the one word that explains
   why the row does not respond. */
.eg-getapp-menu .dropdown-item.eg-getapp-soon {
	opacity: 1;
	color: var(--eg-ink-mute);
	cursor: default;
	background: transparent;
}

/* Nothing lights up under the pointer: there is nowhere to go. */
.eg-getapp-menu .dropdown-item.eg-getapp-soon:hover,
.eg-getapp-menu .dropdown-item.eg-getapp-soon:focus {
	background: transparent;
	color: var(--eg-ink-mute);
}

/* Teal, not gold and not rose: gold is the colour of the thing you can
   actually download and would compete with it two rows up, and rose reads as
   something having gone wrong. Teal is the skin's "live" accent, which is the
   right note for work that is on its way. Taking the tokens means the Ndore
   skin gets its own pair without a second rule. */
.eg-getapp-menu .eg-getapp-soon small {
	margin-left: auto;
	padding: 2px 8px;
	border: 1px solid var(--eg-teal-edge);
	border-radius: 999px;
	background: var(--eg-teal-fill);
	color: var(--eg-teal);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   From 576px the header widens to the two-column layout, so the pill can
   carry its label.
   -------------------------------------------------------------------------- */
@media (min-width: 576px) {
	.eg-getapp-btn {
		width: auto;
		padding: 0 15px 0 13px;
	}

	.eg-getapp-text {
		display: inline;
	}
}

/* ==========================================================================
   Ledger — transaction rows, filters and state pills
   --------------------------------------------------------------------------
   The transactions page reuses .eg-wallet as its row: a symbol, a two-line
   identity and a right-aligned amount is the same shape a wallet row has, so
   it inherits the ndore skin for free. What it needs on top is a direction
   (money in vs out), a status, and a filter bar — none of which the dashboard
   needed, so they are added here rather than bent out of existing classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tabs. .eg-auth-tabs is display:none unless it sits inside .eg-auth--card,
   so it cannot be reused on an ordinary page — this is the same control
   unbound from the auth sheet.
   -------------------------------------------------------------------------- */
.eg-tabs {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: rgba(0, 0, 0, 0.26);
	border: 1px solid var(--eg-panel-edge);
	border-radius: 14px;
}

/* Many filters will not fit a phone, so the strip scrolls rather than wrapping
   into a ragged block. The scrollbar is hidden; the overflow is the affordance. */
.eg-tabs--scroll {
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.eg-tabs--scroll::-webkit-scrollbar {
	display: none;
}

.eg-tab {
	flex: 1 0 auto;
	text-align: center;
	white-space: nowrap;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 11px;
	padding: 8px 13px;
	color: var(--eg-ink-dim);
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.2px;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.18s ease, background 0.18s ease;
}

.eg-tab:hover {
	color: var(--eg-ink);
	text-decoration: none;
}

.eg-tab.is-on {
	background: var(--eg-gold-fill);
	border-color: var(--eg-gold-edge);
	color: var(--eg-gold);
}

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */
.eg-filter {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 8px;
	align-items: center;
}

@media (max-width: 640px) {
	.eg-filter {
		grid-template-columns: 1fr;
	}
}

/* The field chrome is defined on .eg-input, but its inner control is only
   styled under .eg-auth. Restate it at lower specificity so the pill works on
   any page; the auth rules still win where they apply. */
.eg-input input,
.eg-input select {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--eg-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 12px 0;
}

.eg-input input::placeholder {
	color: var(--eg-ink-dim);
}

/* Date pickers render a near-black native icon on a dark field. */
.eg-input input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.55;
	cursor: pointer;
}

.eg-input--sm {
	padding: 2px 12px 2px 2px;
}

.eg-input--sm .eg-input-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
}

.eg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: var(--eg-gold-fill);
	border: 1px solid var(--eg-gold-edge);
	border-radius: 14px;
	padding: 12px 20px;
	color: var(--eg-gold);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.eg-btn:hover {
	background: var(--eg-gold-edge);
	color: var(--eg-ink);
	text-decoration: none;
}

.eg-btn i {
	width: 16px;
	height: 16px;
}

.eg-btn--quiet {
	background: transparent;
	border-color: var(--eg-panel-edge);
	color: var(--eg-ink-dim);
}

.eg-btn--quiet:hover {
	background: var(--eg-row);
	color: var(--eg-ink);
}

/* --------------------------------------------------------------------------
   Row direction. Credit borrows the teal accent, debit the rose one, so the
   icon carries the sign before the number is read.
   -------------------------------------------------------------------------- */
.eg-sym-in {
	background: var(--eg-teal-fill);
	border-color: var(--eg-teal-edge);
	color: var(--eg-teal);
}

.eg-sym-out {
	background: var(--eg-rose-fill);
	border-color: var(--eg-rose-edge);
	color: var(--eg-rose);
}

.eg-wallet-sym i {
	width: 18px;
	height: 18px;
}

.eg-bal-in {
	color: var(--eg-teal);
}

.eg-bal-out {
	color: var(--eg-rose);
}

.eg-delta-down {
	color: var(--eg-rose);
}

/* --------------------------------------------------------------------------
   State pills
   -------------------------------------------------------------------------- */
.eg-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border-radius: 999px;
	padding: 3px 9px;
	border: 1px solid transparent;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	white-space: nowrap;
}

.eg-pill-ok {
	background: var(--eg-teal-fill);
	border-color: var(--eg-teal-edge);
	color: var(--eg-teal);
}

.eg-pill-wait {
	background: var(--eg-warn-fill);
	border-color: var(--eg-warn-edge);
	color: var(--eg-warn);
}

.eg-pill-bad {
	background: var(--eg-rose-fill);
	border-color: var(--eg-rose-edge);
	color: var(--eg-rose);
}

.eg-pill-mute {
	background: var(--eg-row);
	border-color: var(--eg-row-edge);
	color: var(--eg-ink-dim);
}

/* A row's identity line can carry a pill; keep it on the text baseline rather
   than stretching it to the column width. */
.eg-wallet-tags {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Pagination. The paginator partial emits Bootstrap-shaped markup styled by
   styles.css for the light site chrome, which reads as a foreign object inside
   a dark card. Restyle it in place rather than forking the partial.
   -------------------------------------------------------------------------- */
.eg-card .site-pagination {
	display: flex;
	justify-content: center;
	margin: 0;
}

.eg-card .site-pagination .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eg-card .site-pagination .page-item {
	margin: 0;
}

.eg-card .site-pagination .page-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	background: var(--eg-row);
	border: 1px solid var(--eg-row-edge);
	border-radius: 10px;
	color: var(--eg-ink-dim);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: none;
}

.eg-card .site-pagination .page-link:hover,
.eg-card .site-pagination .page-item.active .page-link {
	background: var(--eg-gold-fill);
	border-color: var(--eg-gold-edge);
	color: var(--eg-gold);
}

.eg-card .site-pagination .page-item.disabled .page-link {
	opacity: 0.4;
}

/* --------------------------------------------------------------------------
   Empty state, shared with the team pages
   -------------------------------------------------------------------------- */
.eg-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 30px 16px;
	text-align: center;
}

.eg-empty-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--eg-row);
	border: 1px solid var(--eg-row-edge);
	color: var(--eg-ink-dim);
}

.eg-empty-title {
	color: var(--eg-ink);
	font-size: 14.5px;
	font-weight: 800;
}

.eg-empty-note {
	color: var(--eg-ink-dim);
	font-size: 12.5px;
	max-width: 320px;
}

/* --------------------------------------------------------------------------
   Reading lane

   .eg-shell opens to 1060px at 1024px and 1240px at 1400px, which the
   dashboard fills by gridding .mobile-screen-show into two or three columns.
   A single-column page has no such grid, so its cards stretch the full width
   and a list row ends up with a metre of empty space between its description
   and its amount. The lane caps that back to a comfortable measure without
   touching the shell, which the dashboard still needs at full width.
   -------------------------------------------------------------------------- */
.eg-lane {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   Ledger row, compact

   Scoped to .eg-tx so the dashboard's wallet rows and the team member rows
   keep their roomier proportions -- a list of four wallets wants air, a list
   of ten transactions wants density. Two lines each side: description over
   metadata on the left, amount over status on the right.
   -------------------------------------------------------------------------- */
.eg-wallets--tight {
	gap: 6px;
}

.eg-tx {
	gap: 10px;
	padding: 8px 11px;
	border-radius: 12px;
}

.eg-tx .eg-wallet-sym {
	width: 34px;
	height: 34px;
	border-radius: 10px;
}

.eg-tx .eg-wallet-sym i {
	width: 16px;
	height: 16px;
}

/* Descriptions run long ("Level 3 DIAMOND team bonus via A3b Tester"), and a
   wrapped one doubles the row height. Clipping keeps every row identical. */
.eg-tx .eg-wallet-name {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.eg-tx .eg-wallet-id {
	gap: 3px;
}

/* The metadata line carries the type chip and the identifiers on one row. */
.eg-tx-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-size: 11px;
	color: var(--eg-ink-dim);
}

.eg-tx-meta .eg-pill {
	flex: none;
}

.eg-tx-meta-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.eg-tx .eg-wallet-amt {
	flex: none;
	gap: 3px;
	align-items: flex-end;
}

.eg-tx .eg-wallet-bal {
	font-size: 13.5px;
}

.eg-tx .eg-pill {
	padding: 2px 7px;
	font-size: 9.5px;
	letter-spacing: 0.3px;
}

/* --------------------------------------------------------------------------
   Compact filter bar and tabs
   -------------------------------------------------------------------------- */
.eg-filter--tight {
	gap: 6px;
	grid-template-columns: 1fr 150px auto;
}

@media (max-width: 640px) {
	.eg-filter--tight {
		grid-template-columns: 1fr;
	}
}

.eg-filter--tight .eg-input {
	border-radius: 12px;
	padding: 2px 10px 2px 2px;
}

.eg-filter--tight .eg-input input {
	padding: 8px 0;
	font-size: 13px;
}

.eg-filter--tight .eg-input-icon {
	width: 30px;
	height: 30px;
	border-radius: 9px;
}

.eg-filter--tight .eg-input-icon i {
	width: 15px;
	height: 15px;
}

.eg-filter--tight .eg-btn {
	padding: 9px 16px;
	border-radius: 12px;
	font-size: 12.5px;
}

.eg-tabs--tight {
	padding: 3px;
	border-radius: 12px;
}

.eg-tabs--tight .eg-tab {
	padding: 6px 11px;
	font-size: 12px;
	border-radius: 9px;
}

/* The ledger card carries its own rhythm: the head, filters and list are all
   denser than a dashboard panel, so the panel padding comes in to match. */
.eg-card--tight {
	padding: 14px;
}

.eg-card--tight .eg-card-title {
	font-size: 11px;
}

/* The ledger card wants the filled panel, not the .eg-section-first treatment.
   That rule strips the fill so the quick-actions card reads as an outline over
   the photo band, which works for six icon chips and not at all for a dense
   list -- the photograph shows straight through the filter fields and the
   metadata line. This keeps the frosted panel and just restores the leading
   offset that .eg-section-first would have provided. */
.eg-section--lead {
	padding-top: 26px;
}

/* Narrow: the search field takes the full row, with the date and the submit
   sharing the one below. Three stacked full-width rows left the icon-only
   button as a wide empty bar. */
@media (max-width: 640px) {
	.eg-filter--tight {
		grid-template-columns: 1fr auto;
	}

	.eg-filter--tight .eg-filter-main {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------------------------
   Ledger title line

   The counterparty is the point of a commission row ("...via A7 Tester"), and
   it sits at the END of the description -- so a single ellipsised line loses
   precisely the part worth reading. Splitting the line lets the description
   shrink while the name is held back: the description carries all the
   flex-shrink, the name none, so the name only clips once it alone is too wide
   for the row.
   -------------------------------------------------------------------------- */
.eg-tx-title {
	display: flex;
	align-items: baseline;
	gap: 5px;
	min-width: 0;
}

.eg-tx-desc {
	/* Hugs rather than grows, so the name reads as a continuation of the
	   description instead of floating off in its own right-hand column. It
	   still carries all the shrink, so it is what gives way when space runs
	   out. */
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--eg-ink);
	font-size: 13px;
	font-weight: 700;
}

.eg-tx-from {
	flex: 0 0 auto;
	max-width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--eg-gold);
	font-size: 12.5px;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Ledger row detail

   Every row hides something: the full description, the gateway fields on a
   manual deposit, an admin's rejection note. Rather than a modal per row --
   which would put one dialog in the DOM for every transaction on the page --
   each row is a native <details> disclosure. No JavaScript, keyboard operable
   and correct for screen readers by construction.
   -------------------------------------------------------------------------- */
.eg-tx-item > summary {
	cursor: pointer;
	list-style: none;
}

/* Both spellings are needed: the pseudo-element for WebKit, list-style for
   everyone else. */
.eg-tx-item > summary::-webkit-details-marker {
	display: none;
}

.eg-tx-item > summary::marker {
	content: "";
}

.eg-tx-item > summary:hover {
	border-color: var(--eg-gold-edge);
}

.eg-tx-item > summary:focus-visible {
	outline: 2px solid var(--eg-gold);
	outline-offset: 2px;
}

/* Open: the row and its panel become one block, so the seam between them is
   squared off and the row's bottom border is dropped. */
.eg-tx-item[open] > summary {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: transparent;
}

.eg-tx-caret {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--eg-ink-dim);
	transition: transform 0.18s ease, color 0.18s ease;
}

.eg-tx-caret i {
	width: 15px;
	height: 15px;
}

.eg-tx-item[open] .eg-tx-caret {
	transform: rotate(180deg);
	color: var(--eg-gold);
}

.eg-tx-detail {
	background: var(--eg-row);
	border: 1px solid var(--eg-row-edge);
	border-top: none;
	border-radius: 0 0 12px 12px;
	padding: 2px 12px 10px;
	/* The symbol column is 34px plus the row's 10px gap, so the detail lines up
	   under the description rather than under the icon. */
	padding-left: 56px;
}

@media (max-width: 480px) {
	.eg-tx-detail {
		padding-left: 12px;
	}
}

.eg-tx-detail-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 5px 0;
	border-top: 1px solid var(--eg-rule);
}

.eg-tx-detail-row:first-child {
	border-top: none;
}

.eg-tx-key {
	flex: none;
	width: 110px;
	color: var(--eg-ink-dim);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

@media (max-width: 480px) {
	.eg-tx-detail-row {
		flex-direction: column;
		gap: 1px;
	}

	.eg-tx-key {
		width: auto;
	}
}

/* Values wrap: an address or a rejection note is the whole reason to open the
   panel, so nothing in here is allowed to clip. */
.eg-tx-val {
	flex: 1;
	min-width: 0;
	color: var(--eg-ink-2);
	font-size: 12.5px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.eg-tx-val--mono {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   PAYMENT SCREENS  --  deposit and withdraw

   These were the last pages still wearing the older site-card chrome, so a
   member arriving from the dashboard met a different-looking product. Built
   from the same --eg-* tokens as everything else, which is what lets the Ndore
   skin recolour them without a rule of its own.

   Form controls are .eg-control, deliberately NOT .eg-input: that name is
   already a flex WRAPPER on the auth screens, and reusing it here would drag
   its padding and border onto bare inputs.
   -------------------------------------------------------------------------- */

/* ---------- step rail ---------- */
.eg-steps {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.eg-step {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 160px;
	padding: 12px;
	border-radius: 14px;
	background: var(--eg-row);
	border: 1px solid var(--eg-row-edge);
	opacity: 0.55;
}

.eg-step.current {
	opacity: 1;
	border-color: var(--eg-gold-edge);
	background: var(--eg-gold-fill);
}

.eg-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	background: var(--eg-gold);
	color: var(--eg-on-bright);
}

.eg-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eg-step-title { color: var(--eg-ink-2); font-size: 12.5px; font-weight: 600; }
.eg-step-sub { color: var(--eg-ink-dim); font-size: 11px; }

/* ---------- forms ---------- */
.eg-form { display: flex; flex-direction: column; gap: 16px; }
.eg-field { display: flex; flex-direction: column; gap: 7px; }

.eg-label {
	color: var(--eg-ink-dim);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.eg-control {
	width: 100%;
	padding: 13px 15px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid var(--eg-row-edge);
	color: var(--eg-ink);
	font-family: inherit;
	font-size: 14px;
	outline: none;
}

.eg-control::placeholder { color: rgba(255, 255, 255, 0.35); }

.eg-control:focus {
	border-color: var(--eg-gold-edge);
	background: rgba(255, 255, 255, 0.08);
}

/* The native arrow is invisible on this ground, so one is drawn in. */
.eg-control-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--eg-ink-dim) 50%),
		linear-gradient(135deg, var(--eg-ink-dim) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.eg-control-select option { background: var(--eg-ground); color: var(--eg-ink); }

.eg-control-group { position: relative; display: flex; align-items: center; }
.eg-control-group .eg-control { padding-left: 34px; padding-right: 58px; }

.eg-control-prefix,
.eg-control-suffix {
	position: absolute;
	color: var(--eg-ink-dim);
	font-size: 13px;
	pointer-events: none;
}

.eg-control-prefix { left: 15px; }
.eg-control-suffix { right: 15px; font-size: 11px; letter-spacing: 0.06em; }

.eg-hint { color: var(--eg-ink-dim); font-size: 11.5px; }
.eg-empty { color: var(--eg-ink-dim); font-size: 13px; margin: 4px 0 0; }

/* ---------- buttons ---------- */
.eg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 18px;
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.2s, opacity 0.2s;
}

.eg-btn-primary {
	background: linear-gradient(135deg, var(--eg-gold-hi), var(--eg-gold));
	color: var(--eg-on-bright);
}

.eg-btn-primary:hover { filter: brightness(1.06); }

.eg-btn:disabled,
.eg-btn.is-busy { opacity: 0.6; cursor: default; }

/* ---------- summary ---------- */
.eg-summary {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border-radius: 14px;
	background: var(--eg-row);
	border: 1px solid var(--eg-row-edge);
}

.eg-summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--eg-ink-dim);
	font-size: 12.5px;
}

.eg-summary-row > span:last-child { color: var(--eg-ink-2); font-weight: 600; }

.eg-summary-total {
	padding-top: 10px;
	border-top: 1px solid var(--eg-rule);
	font-size: 14px;
}

.eg-summary-total > span:last-child { color: var(--eg-gold); font-weight: 700; }
.eg-summary-row.hidden { display: none; }
.eg-summary-row img { max-height: 22px; width: auto; }

/* ---------- M-Pesa card + live status ---------- */
/* Unified deposit method list. One row per method -- M-Pesa, each gateway, and
   the ones not switched on yet -- so a member picks from a single list instead
   of choosing between two separate forms first. */
/* An inline explanation above a form the member cannot use yet -- no
   membership, or outside the withdrawal window. Warm rather than red: nothing
   has gone wrong, they simply are not eligible right now. */
.eg-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	margin-bottom: 16px;
	border-radius: 14px;
	font-size: 12.5px;
	line-height: 1.5;
}

.eg-notice i {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 1px;
}

.eg-notice-warn {
	background: var(--eg-gold-fill);
	border: 1px solid var(--eg-gold-edge);
	color: var(--eg-gold);
}

.eg-notice a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

.eg-pm-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}

.eg-pm {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--eg-row);
	border: 1px solid var(--eg-row-edge);
	cursor: pointer;
}

.eg-pm:hover { background: rgba(255, 255, 255, 0.06); }

.eg-pm input[type="radio"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--eg-gold);
	margin: 0;
}

.eg-pm-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.eg-pm-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--eg-ink);
}

.eg-pm-sub {
	font-size: 11.5px;
	color: var(--eg-ink-dim);
}

/* The chosen row carries the gold the primary button uses, so the selection is
   readable without relying on the radio dot alone. */
.eg-pm:has(input:checked) {
	background: var(--eg-gold-fill);
	border-color: var(--eg-gold-edge);
}

.eg-pm-badge {
	flex-shrink: 0;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	background: var(--eg-gold);
	color: var(--eg-on-bright);
}

.eg-pay-card.is-primary { border-color: var(--eg-gold-edge); }

.eg-pay-badge {
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	background: var(--eg-teal-fill);
	border: 1px solid var(--eg-teal-edge);
	color: var(--eg-teal);
}

.eg-pay-status {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 14px;
	font-size: 12.5px;
	background: var(--eg-row);
	border: 1px solid var(--eg-row-edge);
	color: var(--eg-ink-2);
}

.eg-pay-status.is-ok { background: var(--eg-teal-fill); border-color: var(--eg-teal-edge); color: var(--eg-teal); }
.eg-pay-status.is-bad { background: var(--eg-rose-fill); border-color: var(--eg-rose-edge); color: var(--eg-rose); }
.eg-pay-status.is-warn { background: var(--eg-warn-fill); border-color: var(--eg-warn-edge); color: var(--eg-warn); }

.eg-pay-spinner {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-top-color: var(--eg-gold);
	animation: eg-spin 0.8s linear infinite;
}

.eg-pay-spinner[hidden] { display: none; }

@keyframes eg-spin { to { transform: rotate(360deg); } }

/* Respect a reduced-motion preference: the spinner still shows, it just
   stops turning, and the text alone carries the state. */
@media (prefers-reduced-motion: reduce) {
	.eg-pay-spinner { animation: none; }
}

/* ---------- coming soon ---------- */
/* ==========================================================================
   PERSON BLOCK  --  upline card and team member rows

   One block, two places: the affiliate page's upline card and every row of the
   team list, so the two never drift apart on which details they show.
   Mirrors eagle_main's /user/team-members columns: name, username, email,
   phone, tier.
   -------------------------------------------------------------------------- */
.eg-people { display: flex; flex-direction: column; gap: 10px; }

.eg-person-wrap {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px;
	border-radius: 14px;
	background: var(--eg-row);
	border: 1px solid var(--eg-row-edge);
}

.eg-person { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; }

.eg-person-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	font-weight: 700;
	background: var(--eg-gold-fill);
	border: 1px solid var(--eg-gold-edge);
	color: var(--eg-gold);
}

.eg-person-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.eg-person-name { color: var(--eg-ink); font-size: 13.5px; font-weight: 700; }
.eg-person-handle { color: var(--eg-ink-dim); font-size: 11.5px; }

.eg-person-rows { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }

.eg-person-row {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--eg-ink-mute);
	font-size: 11.5px;

	/* A long email must not push the tier badge off a narrow screen. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eg-person-row i,
.eg-person-row svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.75; }

.eg-person-note { margin-top: 5px; color: var(--eg-ink-dim); font-size: 11px; }

.eg-person-tier { flex-shrink: 0; }

.eg-person-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	background: var(--eg-gold-fill);
	border: 1px solid var(--eg-gold-edge);
	color: var(--eg-gold);
	white-space: nowrap;
}

.eg-person-badge.is-none {
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--eg-row-edge);
	color: var(--eg-ink-dim);
}

.eg-person-state {
	flex-shrink: 0;
	align-self: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--eg-ink-dim);
}

.eg-person-state.is-active { color: var(--eg-teal); }

/* On a phone the tier drops under the details rather than squeezing them. */
@media (max-width: 480px) {
	.eg-person-wrap { flex-wrap: wrap; }
	.eg-person-tier, .eg-person-state { margin-left: 50px; }
}

/* ==========================================================================
   DESKTOP DASHBOARD

   A wide screen gets its own composition (user/include/__desktop_dashboard),
   not the phone column stretched. What was here before gridded the phone
   markup into two or three columns: every card landed in a cell as tall as its
   row, so a short card beside a tall one left a hole, and the only navigation
   was the phone's floating bottom bar.

   Below 1024px none of this applies and the phone column is untouched.
   ========================================================================== */
.eg-desk { display: none; }

@media (min-width: 1024px) {
	.eg-desk { display: block; }

	/* ---------- header: greeting left, membership facts right ---------- */
	.eg-desk-head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 32px;
		flex-wrap: wrap;
		padding: 52px 0 22px;
	}

	.eg-desk-greet { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

	.eg-desk-title {
		color: var(--eg-ink);
		font-size: 26px;
		font-weight: 800;
		letter-spacing: -0.02em;
	}

	/* The meta block is built for a narrow column, so it is capped rather than
	   allowed to stretch across half the header. */
	.eg-desk-meta { flex: 0 1 460px; min-width: 0; }
	.eg-desk-meta .membership-meta { margin-bottom: 0; }

	.eg-desk-actions { margin-bottom: 20px; }

	/* Six across, because there is room for them. */
	.eg-desk-actions .eg-actions { grid-template-columns: repeat(6, 1fr); }

	/* ---------- body: main column + rail ----------

	   Two independent columns, not a grid of cells. Each column stacks its own
	   cards, so a short rail does not punch a hole in the main column. */
	.eg-desk-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 20px;
		align-items: start;
	}

	.eg-desk-main,
	.eg-desk-rail {
		display: flex;
		flex-direction: column;
		gap: 20px;
		min-width: 0;
	}

	/* The rail is short; letting it stick while the main column scrolls keeps
	   the invite link and the services within reach on a long page. */
	.eg-desk-rail {
		position: sticky;
		top: 88px;
	}

	/* ---------- navigation ----------

	   The floating pill is a phone control. On a wide screen it becomes a fixed
	   left rail, which is what desktop navigation looks like -- same markup,
	   same links, no second nav to keep in step. */
	.eg-bar {
		top: 0;
		bottom: 0;
		left: 0;
		right: auto;
		width: 104px;
		height: 100vh;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: stretch;
		background: var(--eg-header);
		border-right: 1px solid var(--eg-header-edge);
		/* The phone bar is click-through so the page shows past its gutters.
		   A rail is a surface, so it takes its own clicks back. */
		pointer-events: auto;
	}

	/* Undo the floating pill: the frosted panel, its ring and its shadow all
	   belong to a bar hovering over content, not to a rail welded to the edge.
	   backdrop-filter especially -- left on, it renders as a blurred blob. */
	.eg-bar-inner {
		flex-direction: column;
		justify-content: flex-start;
		gap: 6px;
		width: 100%;
		max-width: none;
		padding: 18px 8px;
		border-radius: 0;
		background: none;
		border: none;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.eg-bar-item {
		flex: none;
		width: 100%;
		padding: 12px 4px;
		border-radius: 14px;
		gap: 6px;
	}

	.eg-bar-item.is-on { background: var(--eg-gold-fill); }
	.eg-bar-label { font-size: 9.5px; }

	/* The raised centre action is a phone affordance. In a rail the chat button
	   is just the last item, sitting in the flow rather than proud of the bar. */
	.eg-bar-center {
		order: 9;
		width: 100%;
		margin-top: 10px;
		align-items: stretch;
	}

	.eg-bar-chat { position: static; transform: none; width: 100%; }
	.eg-bar-chat::before { display: none; }

	.eg-bar-chat-inner {
		width: 100%;
		height: auto;
		padding: 12px 4px;
		border-radius: 14px;
		flex-direction: column;
		gap: 6px;
	}

	/* Everything shifts right to clear the rail. The header sits inside
	   .panel-layout, so it inherits that offset -- adding its own would push it
	   twice and leave the logo floating away from the first card. */
	.panel-layout { padding-left: 104px; }
}

/* A tall rail needs the viewport to be tall enough; below that it scrolls with
   the page rather than clipping its own links. */
@media (min-width: 1024px) and (max-height: 700px) {
	.eg-bar { height: auto; bottom: auto; }
	.eg-desk-rail { position: static; }
}

/* Single-column pages get a reading measure on a wide screen.

   Deposit, withdraw, team and transactions are one column of cards. Left to
   the full shell width they became 1200px-wide forms with a metre-long submit
   button. The dashboard is unaffected: its desktop composition is built from
   .eg-desk-* wrappers and contains no .eg-section at all, so it keeps the whole
   width for its two columns. */
@media (min-width: 1024px) {
	.eg-shell > .eg-section,
	.mobile-screen-show > .eg-section {
		max-width: 860px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---------- team level search ---------- */
.eg-search {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	padding: 6px 6px 6px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid var(--eg-row-edge);
}

.eg-search:focus-within { border-color: var(--eg-gold-edge); }

.eg-search > i,
.eg-search > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--eg-ink-dim); }

.eg-search input {
	flex: 1;
	min-width: 0;
	background: none;
	border: none;
	outline: none;
	color: var(--eg-ink);
	font-family: inherit;
	font-size: 13.5px;
	padding: 8px 0;
}

.eg-search input::placeholder { color: rgba(255, 255, 255, 0.35); }

.eg-search-clear {
	display: inline-flex;
	align-items: center;
	color: var(--eg-ink-dim);
	padding: 4px;
}

.eg-search-clear:hover { color: var(--eg-rose); }
.eg-search-clear i, .eg-search-clear svg { width: 15px; height: 15px; }

.eg-search button {
	flex-shrink: 0;
	padding: 9px 16px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--eg-gold-hi), var(--eg-gold));
	color: var(--eg-on-bright);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}

.eg-search-result {
	margin: 0 0 12px;
	color: var(--eg-ink-dim);
	font-size: 12px;
}