/* =======================
   Harmoni Button Styles
   ======================= */

/* Base page background (light mode) */
html, body {
  background-color: #d4f2e9;
}

/* Dark mode page background */
html.dark, html.dark body {
  background-color: #07140F !important; /* deep sustainable green */
  color-scheme: dark;
}



/* Base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 0.5rem;         /* rounded-lg */
  transition: all 0.2s ease-in-out;
  line-height: 1.25rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

/* Sizes */
.btn-sm {
  padding: 0.5rem 0.75rem;      /* px-3 py-2 */
  font-size: 0.875rem;          /* text-sm */
}
.btn-md {
  padding: 0.625rem 1rem;       /* px-4 py-2.5 */
  font-size: 0.875rem;          /* text-sm */
}
.btn-lg {
  padding: 0.75rem 1.25rem;     /* px-5 py-3 */
  font-size: 1rem;              /* text-base */
}

/* Primary */
.btn-primary {
  background-color: #3D9970;    /* Harmoni green */
  color: #fff  !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-primary:hover {
  *background-color: #348660;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  transform: translateY(-1px);
  color: #fff !important;
}
.btn-primary:active {
  background-color: #2c7251;
  transform: translateY(0);
}

/* Secondary */
.btn-secondary {
  background-color: #fff;
  border: 1px solid #e5e7eb;    /* gray-200 */
  color: #2C3E50;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.btn-secondary:hover {
  background-color: #f9fafb;    /* gray-50 */
  color: #111827;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
.btn-secondary:active {
  background-color: #f3f4f6;    /* gray-100 */
  transform: translateY(0);
}

/* Subtle / Ghost */
.btn-subtle {
  background-color: rgba(61,153,112,0.08);
  color: #2C3E50;
}
.btn-subtle:hover {
  background-color: rgba(61,153,112,0.12);
  color: #111827;
  transform: scale(1.03);
}
.btn-subtle:active {
  transform: scale(0.98);
}


.btn-outline {
  border: 2px solid #3D9970;
  color: #3D9970;
  background-color: transparent;
}
.btn-outline:hover {
  box-shadow: 0 6px 12px rgba(61,153,112,0.25);
  transform: translateY(-1px);
  background-color: #FFF !important;
  color: #3D9970 !important;
}

.btn-gold {
  border: 2px solid #F1C40F;
  color: #B58900;
  background-color: transparent;
}
.btn-gold:hover {
  background-color: #FFF;
  box-shadow: 0 6px 12px rgba(241,196,15,0.25);
  transform: translateY(-1px);
}
.btn-gradient {
  background: linear-gradient(135deg, #3D9970, #F1C40F);
  color: #fff;
  border: none;
  
}
.btn-gradient:hover {
  background: linear-gradient(135deg, #2C3E50, #3D9970);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

/* Global Harmoni overrides */
[data-tooltip] {
  position: relative;
  cursor: help;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 90%;
  left: 50%;
  transform: translateX(-50%);
  background: #2C3E50;
  color: #fff;
  padding: 4px 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
[data-tooltip]:hover::after {
  opacity: 1;
}
/* Make sure later sections paint over the sticky header when needed */
.section-over-content {
  position: relative;
  z-index: 20; /* above the z-10 header */
}
/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"] {
  @apply rounded-lg border border-gray-300;
}

/* Focus */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(61,153,112,0.15);
  border-color: #3D9970;
}

/* Make the auth card a bit floaty on hover (subtle) */
.auth-card-hover:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(16, 36, 26, 0.12);
  transition: all 180ms ease;
}


/* ---------------------------------------
   Harmoni form controls (global override)
   --------------------------------------- */

/* Labels */
.form-label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #0f172a; /* slate-900 */
  margin-bottom: 0.35rem;
}

/* Base inputs (text / email / password / number / url / search) + textarea + select */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select {
  appearance: none;
  width: 100%;
  font-size: 0.95rem;
  line-height: 1.25rem;
  color: #0f172a;
  background: #fff !important;
  border: 1.5px solid #d1d5db !important;  /* gray-300 */
  border-radius: 6px !important;           /* less rounded */
  padding: 0.75rem 0.875rem !important;    /* 12px x 14px */
  height: 2.875rem;                        /* ~46px; feels substantial */
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

/* Make room for password toggle on inputs that have a toggle button */
input[data-has-toggle="true"] {
  padding-right: 2.5rem !important; /* space for the eye icon button */
}

/* Focus */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #3D9970 !important; /* Harmoni green */
  box-shadow: 0 0 0 4px rgba(61,153,112,0.15) !important;
}

/* Disabled */
input:disabled,
textarea:disabled,
select:disabled {
  background: #f8fafc !important; /* slate-50 */
  color: #64748b !important;       /* slate-500 */
  cursor: not-allowed;
}

/* Error helper (optional utility) */
.form-error {
  color: #b91c1c; /* red-700 */
  font-size: 0.82rem;
  margin-top: 0.35rem;
}

/* Links: brand green globally */
a {
  color: #3D9970;
}

/* Small helper for input groups (label + field spacing) */
.form-group { margin-bottom: 1rem; }

/* Subtle placeholder color */
::placeholder { color: #94a3b8; } /* slate-400 */

/* Wallet chip & menu refinements */
.wallet-chip { transition: box-shadow .15s ease; }
.wallet-chip:focus-within, .wallet-chip:hover { box-shadow: 0 1px 8px rgba(0,0,0,.06); }

.chip-menu { overflow: hidden; }
.chip-item {
  display:block; padding:.5rem .75rem; font-size:.875rem; color:#111827;
}
.chip-item:hover { background:#f9fafb; }
.chip-menu-trigger svg { transition: transform .15s ease; }
.wallet-chip:focus-within .chip-menu-trigger svg,
.wallet-chip:hover .chip-menu-trigger svg { transform: scale(1.06); }


/* Sleek wallet chips */
.group:hover { }

/* Akuno Reband and more */
/* ===============================
   Akuno global sizing + spacing
   =============================== */

/* Slight global size increase  */
html {
  font-size: 17px; /* ~9% bigger than default 16px 
} 

/* Constrain page width a bit for a “closer” look 
.max-w-7xl {
  max-width: 72rem; /* same as Tailwind 6xl 
}

/* Navbar and header adjustments 
nav.fixed .h-16 {
  height: 5rem !important; /* 80px instead of 64px */
}

/* Larger logo for better visual balance */
nav img[alt~="Akuno"] {
  height: 2 rem;
}

/* Buttons and CTA tweaks */
.btn, .btn-primary, .btn-secondary {
  font-size: 1rem; /* 16px */
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
}

/* Optional: slightly larger hero text 
.hero h1 {
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  line-height: 1.15;
}


/* ============================
   AKUNO THEME TOKENS + PRIMITIVES
   Light by default; Dark via [data-theme="dark"]
   ============================ */

/* ---------- LIGHT (default) ---------- */
:root {
  /* Core brand */
  --akuno-primary:        #3D9970; /* Primary Green */
  --akuno-primary-hover:  #60A04E; /* Secondary Green */
  --akuno-primary-active: #2E7252; /* pressed state */
  --akuno-gold:           #F1C40F;

  /* Canvas & surfaces */
  --akuno-bg:             #F8F9F9; /* page background */
  --akuno-surface:        #FFFFFF; /* cards, modals */

  /* Text & lines */
  --akuno-text:           #2C3E50; /* headings/body */
  --akuno-muted:          #758B7A; /* subtext */
  --akuno-divider:        #E0E4E4; /* borders/separators */

  /* States */
  --akuno-success:        #60A04E;
  --akuno-warning:        #F1C40F;
  --akuno-error:          #C0392B;

  /* Radii, shadow, motion */
  --akuno-radius: 12px;
  --akuno-shadow-1: 0 2px 10px rgba(0,0,0,0.06);
  --akuno-shadow-2: 0 8px 28px rgba(0,0,0,0.10);
  --akuno-transition: all .2s ease;
}

/* ---------- DARK (opt-in) ---------- */
:root[data-theme="dark"] {
  --akuno-primary:        #60A04E; /* Primary Accent in dark */
  --akuno-primary-hover:  #3D9970;
  --akuno-primary-active: #4A8A3C;

  --akuno-bg:             #1B2E23; /* canvas */
  --akuno-surface:        #244636; /* panels/cards */

  --akuno-text:           #F8F9F9;
  --akuno-muted:          #9FB8A7;
  --akuno-divider:        rgba(255,255,255,0.12);

  --akuno-success:        #60A04E;
  --akuno-warning:        #F1C40F;
  --akuno-error:          #E06157; /* softened for dark */
}

/* Optional: auto-respect system preference without toggler */
/*
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
  :root:not([data-theme]) { 
    /* uncomment if you want auto-dark by system */
    /* [data-theme="dark"] rules could be duplicated here */
  }
}
*/

/* ============================
   THEME UTILITIES (use anywhere)
   ============================ */

.bg-app        { background-color: var(--akuno-bg); }
.bg-surface    { background-color: var(--akuno-surface); }
.text-app      { color: var(--akuno-text); }
.text-muted    { color: var(--akuno-muted); }
.border-app    { border-color: var(--akuno-divider); }
.divider       { border-top: 1px solid var(--akuno-divider); }

.shadow-1 { box-shadow: var(--akuno-shadow-1); }
.shadow-2 { box-shadow: var(--akuno-shadow-2); }

.rounded-app { border-radius: var(--akuno-radius); }

.link {
  color: var(--akuno-primary);
  text-decoration: none;
  transition: var(--akuno-transition);
}
.link:hover { color: var(--akuno-primary-hover); }

/* ============================
   COMPONENT PRIMITIVES
   ============================ */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-weight: 600;
  border-radius: var(--akuno-radius);
  padding: .75rem 1.1rem;
  transition: var(--akuno-transition);
  line-height: 1.2;
}

.btn-primary {
  background: var(--akuno-primary);
  color: #fff;
  box-shadow: var(--akuno-shadow-1);
}
/*.btn-primary:hover  { background: var(--akuno-primary-hover); transform: translateY(-1px); }*/


.btn-primary:active { background: var(--akuno-primary-active); transform: translateY(0); }
.btn-primary:focus-visible { outline: 2px solid var(--akuno-gold); outline-offset: 2px; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--akuno-primary);
  color: var(--akuno-primary);
}
.btn-outline:hover { background: color-mix(in srgb, var(--akuno-primary) 12%, transparent); }

.btn-ghost {
  background: transparent;
  color: var(--akuno-primary);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--akuno-primary) 10%, transparent); }

.btn-gold {
  background: var(--akuno-gold);
  color: #1E1E1E;
  box-shadow: var(--akuno-shadow-1);
}
.btn-gold:hover { filter: brightness(0.95); }

/* Inputs */
.input, .select, .textarea {
  width: 100%;
  background: var(--akuno-surface);
  color: var(--akuno-text);
  border: 1px solid var(--akuno-divider);
  border-radius: var(--akuno-radius);
  padding: .75rem .9rem;
  transition: var(--akuno-transition);
}
.input::placeholder, .textarea::placeholder { color: var(--akuno-muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--akuno-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akuno-primary) 20%, transparent);
}

/* Cards */
.card {
  background: var(--akuno-surface);
  color: var(--akuno-text);
  border: 1px solid var(--akuno-divider);
  border-radius: var(--akuno-radius);
  box-shadow: var(--akuno-shadow-1);
}

/* Badges / Status */
.badge { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem; border-radius:999px; font-weight:600; font-size:.85rem; }
.badge-success { background: color-mix(in srgb, var(--akuno-success) 18%, transparent); color: var(--akuno-success); }
.badge-warning { background: color-mix(in srgb, var(--akuno-gold) 22%, transparent); color:#6A5900; }
.badge-error   { background: color-mix(in srgb, var(--akuno-error) 16%, transparent); color: var(--akuno-error); }

/* All nav links bold by default */
.navbar a,
.navbar button {
  font-weight: 600;
  color: var(--akuno-text);
  letter-spacing: -0.01em;
  transition: color .2s, border-color .2s, background-color .2s;
}

/* Hover / focus */
.navbar a:hover,
.navbar button:hover,
.navbar a:focus-visible {
  color: var(--akuno-primary);
}

/* Active state (covers both .active and aria-current) */
.navbar a.active,
.navbar a[aria-current="page"] {
  color: var(--akuno-primary) !important;
  font-weight: 600;
  *border-bottom: 2px solid var(--akuno-primary);
  padding-bottom: 8px;
}

/* Mobile menu */
#mobile-menu a,
#mobile-menu button {
  font-weight: 600;
  color: var(--akuno-text);
}
#mobile-menu a:hover,
#mobile-menu button:hover {
  color: var(--akuno-primary);
}
#mobile-menu a[aria-current="page"],
#mobile-menu a.active {
  color: var(--akuno-gold) !important;
  font-weight: 700;
}

/* ==========================================
   AKUNO BUTTON SYSTEM (independent & secure)
   ========================================== */

/* Reset isolation: prevent inheritance issues */
.btn, .btn * {
  all: unset; /* start fresh to prevent parent text/link styles */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
}

/* Base */
.btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--akuno-radius);
  padding: 0.75rem 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
  position: relative;
  isolation: isolate; /* keep internal shadows/filters from leaking */
  text-align: center;
}

/* Hover lift */
.btn:hover:not(:disabled),
.btn:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* Active press */
.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Disabled */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================
   VARIANTS
   ========================================== */

/* 1️⃣ Primary (Akuno Green) */
.btn-primary {
  background-color: var(--akuno-primary);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: var(--akuno-shadow-1);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--akuno-primary-hover);
}
.btn-primary:active {
  background-color: var(--akuno-primary-active);
}

/* 2️⃣ Gold (accent) */
.btn-gold {
  background-color: var(--akuno-gold);
  color: #2C3E50;
  border: 1px solid transparent;
  box-shadow: var(--akuno-shadow-1);
}
.btn-gold:hover:not(:disabled) {
  filter: brightness(0.95);
  transform: translateY(-2px);
}
.btn-gold:active {
  filter: brightness(0.9);
  transform: translateY(0);
}

/* 3️⃣ Outline (bordered green) */
.btn-outline {
  background-color: transparent;
  color: var(--akuno-primary);
  border: 1.5px solid var(--akuno-primary);
}
.btn-outline:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--akuno-primary) 10%, white);
  color: var(--akuno-primary-active);
}

/* 4️⃣ Ghost (subtle text-only) */
.btn-ghost {
  background-color: transparent;
  color: var(--akuno-primary);
}
.btn-ghost:hover:not(:disabled) {
  background-color: rgba(61,153,112,0.1);
}

/* 5️⃣ Danger / Red (optional) */
.btn-danger {
  background-color: #C0392B;
  color: #fff;
  border: 1px solid transparent;
}
.btn-danger:hover:not(:disabled) {
  background-color: #A93226;
}

/* ==========================================
   SIZE VARIANTS
   ========================================== */
.btn-sm {
  font-size: 0.875rem;
  padding: 0.8rem 1rem;
  border-radius: calc(var(--akuno-radius) - 2px);
}
.btn-lg {
  font-size: 1.125rem;
  padding: 0.9rem 1.6rem;
  border-radius: calc(var(--akuno-radius) + 2px);
}

/* ==========================================
   FOCUS RING (accessibility)
   ========================================== */
.btn:focus-visible {
  outline: 2px solid var(--akuno-gold);
  outline-offset: 3px;
}


/* ==========================================
   FINAL OVERRIDES – Freeze primary hover bg
   ========================================== */

/* Keep primary the same green on default + hover */
.btn-primary {
  background-color: var(--akuno-primary) !important;
  color: #fff !important;
  border: 1px solid transparent;
}

/* Hover: only lift + shadow, no colour change */
.btn-primary:hover:not(:disabled),
.btn-primary:focus-visible:not(:disabled) {
  background-color: var(--akuno-primary) !important; /* no tint shift */
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

/* Active (pressed) can stay slightly darker for feedback */
.btn-primary:active {
  background-color: var(--akuno-primary-active) !important;
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* =========================================
   HEADER ELEVATION (Akuno global polish)
   ========================================= */

/* Production shadow (light mode) */
.navbar.has-shadow {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
  transition: box-shadow .35s ease;
}

/* Optional: slightly stronger on return (nice feel) */
@media (prefers-reduced-motion: no-preference) {
  .navbar.has-shadow {
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14) !important;
	transition: all 0.3s ease-in-out;
  }
}

/* Dark mode prep (future) */
:root[data-theme="dark"] .navbar.has-shadow {
  box-shadow: 0 4px 18px rgba(0,0,0,0.20) !important;
}
/* Smooth in-viewport hero snap when coming from the header */
.hero-snap {
  scroll-margin-top: 5rem;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .btn, .navbar { transition: none !important; }
}


@keyframes ak-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.35); transform: scale(1); }
  70%  { box-shadow: 0 0 0 10px rgba(16,185,129,0); transform: scale(1.12); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); transform: scale(1); }
}
.animate-ak-pulse { animation: ak-pulse 1.8s ease-out infinite; }

#hero-chip .cd-box {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 2.6rem; padding: .25rem .45rem; border-radius: .5rem;
  background: #3D9970; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
#hero-chip .cd-num { font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1; }
#hero-chip .cd-lbl { font-size: 10px; line-height: .9; opacity: .95; }
#hero-chip .cd-sep { align-self: center; padding: 0 .15rem; color: #9CA3AF; } /* gray-400 */


@keyframes ak-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.35); transform: scale(1); }
  70%  { box-shadow: 0 0 0 10px rgba(16,185,129,0); transform: scale(1.12); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); transform: scale(1); }
}
.animate-ak-pulse { animation: ak-pulse 1.8s ease-out infinite; }

@keyframes ak-glow {
  0%   { box-shadow: 0 0 0 0 rgba(61,153,112,.30);   transform: translateZ(0); }
  50%  { box-shadow: 0 0 16px 2px rgba(61,153,112,.40); }
  100% { box-shadow: 0 0 0 0 rgba(61,153,112,.30); }
}
#hero-chip .cd-clock{
  background:#3D9970; color:#fff; padding:.28rem .5rem; border-radius:.5rem;
  line-height:1; display:inline-flex; align-items:center; justify-content:center;
  animation: ak-glow 2.2s ease-in-out infinite;
}
#hero-chip .cd-hms{
  font-weight:800; letter-spacing:.02em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

@keyframes ak-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.35); transform: scale(1); }
  70%  { box-shadow: 0 0 0 10px rgba(16,185,129,0); transform: scale(1.12); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); transform: scale(1); }
}
.animate-ak-pulse { animation: ak-pulse 1.8s ease-out infinite; }

/* numeric alignment */
.tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }


.bg-gold-200 {
	--tw-bg-opacity: 1;
  background-color: rgb(245, 198, 69);
}

/* Optional, subtle brand glow on focus */
.theme-glow:focus-visible {
  box-shadow: 0 0 0 3px rgba(61,153,112,0.12), inset 0 0 18px rgba(61,153,112,0.25) !important;
}

/* Keep your layout intact; only colour tweaks */

/* Header shadow stays subtle */
.navbar.has-shadow { box-shadow: 0 10px 18px -12px rgba(0,0,0,.18); }
.dark .navbar.has-shadow { box-shadow: 0 10px 18px -12px rgba(0,0,0,.45); }

/* Top navigation links */
.toplink { /* inherits light styles from component */ }
.dark .toplink { color: #FAF6E9CC !important; }
.dark .toplink:hover,
.dark .toplink.active { color: #FAF6E9 !important; }

/* Primary CTA on dark */
.dark .btn.btn-primary {
  background-color: #FAF6E9 !important;
  color: #2C3E50 !important;
  border-color: transparent !important;
}
.dark .btn.btn-primary:hover { background-color: #FFFFFF !important; }

/* Logo swap without Tailwind dark utilities */
.logo-dark { display: none; }
.dark .logo-dark { display: inline; }
.dark .logo-light { display: none; }

/* Log-in text in header and mobile menu */
.dark a[href*="login"],
.dark .x-auth-link,
.dark .auth-link {
  color: #FAF6E9CC !important;
}

.dark a[href*="login"]:hover,
.dark .x-auth-link:hover,
.dark .auth-link:hover {
  color: #FAF6E9 !important;
}

/* =========================================
   NAV BACKGROUND BY POSITION (LIGHT / DARK)
   Uses data-state from Alpine on <nav>
   ========================================= */

/* 1) Light mode — TOP of home: fully transparent, no border */
html:not(.dark) .navbar[data-state="top"] {
  background: transparent !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2) Light mode — SCROLLED or non-home: frosted white */
html:not(.dark) .navbar[data-state="scrolled"] {
  background-color: rgba(255,255,255,0.90) !important; /* white/90 */
  border-bottom: 1px solid #e5e7eb !important;         /* gray-200 */
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}

/* Keep the same shadow behaviour you already use */
html:not(.dark) .navbar.has-shadow {
  box-shadow: 0 10px 18px -12px rgba(0,0,0,.18) !important;
}

/* 3) Dark mode — TOP of home: transparent (blends with hero) */
.dark .navbar[data-state="top"] {
  background: transparent !important;
  border-color: transparent !important;
}

/* 4) Dark mode — SCROLLED or non-home: your dark frosted bar */
.dark .navbar[data-state="scrolled"] {
  background-color: rgba(14,20,17,0.90) !important; /* #0E1411/80 */
  background-color: rgb(18, 47, 36) !important;
  background-color: rgb(0, 109, 66) !important;
  
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
}

/* Link colours remain unchanged in light mode; dark mode you already set:
   .dark .toplink { color: #FAF6E9CC } etc. */

/* =========================================
   BACK TO TOP BUTTON (light + dark mode)
   ========================================= */
/* Smooth transitions shared across both themes */
button[aria-label="Back to top"] {
  transition: background-color 0.25s ease,
              box-shadow 0.25s ease,
              transform 0.25s ease;
}

/* ------------------------------------------ */
/* LIGHT MODE                                 */
/* ------------------------------------------ */
html:not(.dark) button[aria-label="Back to top"] {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #374151 !important; /* keep icon slightly dark */
}

html:not(.dark) button[aria-label="Back to top"]:hover {
  background-color: #ffffff !important; /* bright but clean */
  border-color: rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* softer and more modern */
  transform: translateY(-2px);
}

html:not(.dark) button[aria-label="Back to top"] svg {
  transition: transform .25s ease;
}

html:not(.dark) button[aria-label="Back to top"]:hover svg {
  transform: translateY(-2px);
}


/* ------------------------------------------ */
/* DARK MODE — Akuno signature feel           */
/* ------------------------------------------ */
.dark button[aria-label="Back to top"] {
  background-color: rgba(36, 70, 54, 0.9) !important; /* deep organic dark green */
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #FAF6E9 !important; /* cream */
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 6px 16px -4px rgba(0, 0, 0, 0.55);
}

.dark button[aria-label="Back to top"]:hover {
  background-color: rgba(36, 70, 54, 0.75) !important; /* slightly brighter, not greenish */
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 10px 26px rgba(0, 0, 0, 0.65);
  transform: translateY(-2px);
}

/* Icon behaviour in dark mode */
.dark button[aria-label="Back to top"] svg {
  color: #FAF6E9 !important;
  fill: #FAF6E9 !important;
  transition: transform .25s ease;
}

.dark button[aria-label="Back to top"]:hover svg {
  transform: translateY(-2px);
}


/* ===== HERO dark gradient polish (already set via classes; optional soft vignette) */
@media (prefers-color-scheme: dark) {
  .dark .hero-vignette::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(1200px 600px at 70% 30%, rgba(255,255,255,0.06), transparent 60%);
  }
}

/* ===== Outline button on dark (cream) */
.dark .btn.btn-outline {
  border-color: #FAF6E9 !important;
  color: #FAF6E9 !important;
  background: transparent !important;
}
.dark .btn.btn-outline:hover {
  background: rgba(250,246,233,0.06) !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* ===== Hero chip internals on dark */
.dark #hero-chip { color: #EDE7D4; }
.dark #hero-chip .text-gray-700 { color: #EDE7D4 !important; }
.dark #hero-chip .text-gray-600 { color: #C9C3B2 !important; }

/* Countdown ring track + progress in dark */
.dark #cd-ring circle:first-child { stroke: rgba(250,246,233,0.18) !important; }
.dark #cd-progress { stroke: var(--akuno-primary) !important; }

/* Seconds emphasis in dark stays fresh green-ish cream */
.dark #cd-s { color: #AEE6C8 !important; }

/* Put in custom.css if you use the fallback */
.hero-gradient{
  background: linear-gradient(to bottom, rgba(16,185,129,0.07), #fff);
}
.dark .hero-gradient{
  background: linear-gradient(180deg, #0E1411 0%, #0C120F 55%, #0A0F0D 100%);


/* OPTION 10 — Clean Energy Emerald */
background: linear-gradient(180deg, #07120F 0%, #0D2C22 45%, #165842 100%);
/* OPTION 7 — Digital Verdant Mist */
background: linear-gradient(180deg, #0A1411 0%, #0F2620 50%, #1A463A 100%);
  /* OPTION 1 — Emerald Pulse */
background: linear-gradient(180deg, #0E1915 0%, #0F2A22 50%, #0C3A2A 100%);

}

/* ---------- HERO TEXT IN DARK MODE ---------- */
.dark .hero h1 {
  color: #FAF6E9 !important;          /* Cream headline */
  text-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.dark .hero p {
  color: #EAE6D8 !important;          /* Softer cream for body */
}
.dark .hero p .font-semibold {
  color: #FAF6E9 !important;          /* Emphasis keeps full cream */
}

/* ---------- STATUS CHIP IN DARK MODE ---------- */
.dark #hero-chip {
  background: rgba(250,246,233,0.08) !important;  /* translucent cream veil */
  border-color: rgba(250,246,233,0.18) !important;
  color: #FAF6E9 !important;
}

/* Tidy the “state” text colors inside the chip (override Tailwind grays) */
.dark #hero-chip span.text-sm,
.dark #hero-chip .text-gray-700,
.dark #hero-chip .text-gray-600,
.dark #hero-chip .text-gray-500,
.dark #hero-chip .text-gray-900 {
  color: #FAF6E9 !important;
}

/* Keep the separators subtle in dark */
.dark #hero-chip .text-gray-500 {
  color: rgba(250,246,233,0.55) !important;
}

/* The “seconds” stays green as your signature cue */
.dark #hero-chip #cd-s {
  color: #7CE0A0 !important;          /* brightened green on dark */
}

/* Circular loader track & progress tuned for dark canvas */
.dark #cd-track { stroke: rgba(250,246,233,0.18) !important; }
.dark #cd-progress { stroke: #60A04E !important; } /* Akuno green accent */

/* Keep the pulsing dot visible on dark */
.dark #hero-chip .animate-ak-pulse {
  box-shadow: 0 0 0 0 rgba(96,160,78,.35);
}


.dark .btn.btn-primary {
  background-color: #F5C644  !important;
  color: #2C3E50 !important;
  border-color: transparent !important;
  
}

.dark .btn.btn-primary:hover {
  background-color: #F5C644  !important;
  color: #2C3E50 !important;
  border-color: transparent !important;
  
}

/* Hide the fallback select when JS is available */
.ak-lang-fallback { position: absolute; inset: 0 auto auto 0; width: 0; height: 0; overflow: hidden; }
.ak-lang-fallback-select { display: none; }

/* --- Language picker container --- */
.ak-lang { position: relative; display: inline-block; }

/* --- Button (light) --- */
.ak-lang__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 2.25rem; padding: 0 .75rem; border-radius: .75rem;
  border: 1px solid rgba(20, 20, 20, 0.08);
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #1f2937; /* gray-800 */
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.ak-lang__btn:hover { border-color: rgba(20,20,20,.14); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.ak-lang__icon { font-size: .95rem; opacity: .9; }
.ak-lang__label { font-weight: 700; font-size: .8rem; letter-spacing: .02em; }
.ak-lang__caret { width: 1rem; height: 1rem; opacity: .6; }

/* --- Dropdown menu (light) --- */
.ak-lang__menu {
  position: absolute; top: calc(100% + .5rem); right: 0; min-width: 12rem;
  background: #ffffff; border: 1px solid rgba(20,20,20,.08);
  border-radius: .9rem; box-shadow: 0 10px 28px rgba(0,0,0,.12);
  padding: .4rem; z-index: 50;
}
.ak-lang__option {
  width: 100%; display: flex; align-items: center; gap: .6rem;
  padding: .6rem .7rem; border-radius: .65rem; background: transparent; border: 0;
  color: #111827; /* gray-900 */ text-align: left; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .08s ease;
}
.ak-lang__option:hover { background: rgba(61, 153, 112, .10); color: #0b3a29; }
.ak-lang__option:active { transform: translateY(1px); }
.ak-lang__option-code {
  display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: .65rem;
  background: rgba(61,153,112,.12); color: #2f6e54; font-weight: 800; font-size: .8rem;
}

/* --- Dark theme --- */
.dark .ak-lang__btn {
  background: rgba(14, 20, 17, .85);
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.dark .ak-lang__btn:hover { border-color: rgba(255,255,255,.18); box-shadow: 0 2px 8px rgba(0,0,0,.5); }

.dark .ak-lang__menu {
  background: rgba(16, 22, 19, .98);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
}
.dark .ak-lang__option { color: rgba(255,255,255,.92); }
.dark .ak-lang__option:hover { background: rgba(61,153,112,.18); color: #eaf7f1; }
.dark .ak-lang__option-code {
  background: rgba(61,153,112,.22);
  color: rgba(255,255,255,.95);
}

/* Small screens (keeps the same look) */
@media (max-width: 640px) {
  .ak-lang__menu { min-width: 10.5rem; }
}


/* Language selector – light */
.lang-trigger{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .6rem; font-size:.875rem; line-height:1;
  border-radius:.5rem;
  background: rgba(61,153,112,.12); /* #3D9970/12% */
  border:1px solid rgba(61,153,112,.25);
  color:#2C3E50;
  backdrop-filter: blur(4px);
  transition: background .2s ease, border-color .2s ease;
}
.lang-trigger:hover{ background: rgba(61,153,112,.18); }

.lang-menu{
  position:absolute; right:0; margin-top:.5rem; min-width:10rem;
  padding:.35rem; border-radius:.75rem;
  background: #fff; border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.lang-menu button{
  width:100%; text-align:left; padding:.55rem .65rem; border-radius:.5rem;
  font-size:.9rem; color:#2C3E50;
}
.lang-menu button[aria-selected="true"]{
  background: rgba(61,153,112,.10); color:#1f3a2f; font-weight:600;
}
.lang-menu button:hover{ background: rgba(61,153,112,.14); }

/* Dark mode */
:root.dark .lang-trigger{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #E6F2EC;
}
:root.dark .lang-trigger:hover{ background: rgba(255,255,255,.10); }

:root.dark .lang-menu{
  background: rgba(14,20,17,.96); /* your dark navbar tone */
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
:root.dark .lang-menu button{
  color:#E6F2EC;
}
:root.dark .lang-menu button[aria-selected="true"]{
  background: rgba(61,153,112,.20); color:#EAF7F0;
}
:root.dark .lang-menu button:hover{
  background: rgba(255,255,255,.08);
}

/* Language selector – trigger */
.lang-trigger{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.42rem .6rem; font-size:.875rem; line-height:1;
  border-radius:.6rem;
  background: rgba(61,153,112,.12);
  border:1px solid rgba(61,153,112,.25);
  color:#1f2d2a; backdrop-filter: blur(4px);
  transition: background .2s ease, border-color .2s ease, transform .06s ease;
}
.lang-trigger:hover{ background: rgba(61,153,112,.16); }
.lang-trigger:active{ transform: translateY(1px); }

/* Menu */
.lang-menu{
  position:absolute; right:0; margin-top:.5rem; min-width:11rem;
  padding:.35rem; border-radius:.75rem;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}
.lang-menu a{
  display:block; text-decoration:none;
  padding:.55rem .7rem; border-radius:.5rem;
  font-size:.92rem; color:#26332f;
}
.lang-menu a[aria-selected="true"]{
  background: rgba(61,153,112,.12);
  font-weight:600; color:#1c2a25;
}
.lang-menu a:hover{ background: rgba(61,153,112,.16); }

/* Dark mode */
:root.dark .lang-trigger{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color:#E6F2EC;
}
:root.dark .lang-trigger:hover{ background: rgba(255,255,255,.10); }

:root.dark .lang-menu{
  background: rgba(14,20,17,.96);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 14px 36px rgba(0,0,0,.5);
}
:root.dark .lang-menu a{ color:#E6F2EC; }
:root.dark .lang-menu a[aria-selected="true"]{
  background: rgba(61,153,112,.20); color:#F2FBF6;
}
:root.dark .lang-menu a:hover{
  background: rgba(255,255,255,.08);
}

.lang-trigger{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .6rem; font-size:.875rem; line-height:1;
  border-radius:.5rem;
  background: rgba(61,153,112,.12);
  border:1px solid rgba(61,153,112,.25);
  color:#2C3E50;
  backdrop-filter: blur(4px);
  transition: background .2s ease, border-color .2s ease;
}
.lang-trigger:hover{ background: rgba(61,153,112,.18); }

.lang-menu{
  position:absolute; right:0; margin-top:.5rem; min-width:10rem;
  padding:.35rem; border-radius:.75rem;
  background: #fff; border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  display:flex; flex-direction:column; gap:.15rem;
}
.lang-menu a{
  display:block; width:100%; text-align:left; padding:.55rem .65rem; border-radius:.5rem;
  font-size:.9rem; color:#2C3E50; text-decoration:none;
}
.lang-menu a[aria-selected="true"]{
  background: rgba(61,153,112,.10); color:#1f3a2f; font-weight:600;
}
.lang-menu a:hover{ background: rgba(61,153,112,.14); }

/* Dark mode */
:root.dark .lang-trigger{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #E6F2EC;
}
:root.dark .lang-trigger:hover{ background: rgba(255,255,255,.10); }

:root.dark .lang-menu{
  background: rgba(14,20,17,.96);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
:root.dark .lang-menu a{
  color:#E6F2EC;
}
:root.dark .lang-menu a[aria-selected="true"]{
  background: rgba(61,153,112,.20); color:#EAF7F0;
}
:root.dark .lang-menu a:hover{
  background: rgba(255,255,255,.08);
}

/* --- Account button theming --- */

/* Light mode: use normal dark text */
.nav-account-button {
  color: #111827; /* slate-900-ish */
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Hover in light mode */
.nav-account-button:hover {
  color: #020617;
}

/* Dark mode: match your creamy nav link colour */
.dark .nav-account-button {
  color: #FDF7E3; /* cream for username + caret */
}

/* Hover in dark mode – a touch brighter */
.dark .nav-account-button:hover {
  color: #ffffff;
}

/* Avatar / icon contrast */
.nav-account-avatar {
  background: rgba(61, 153, 112, 0.3); /* soft green on light */
  color: #166534 !important;                       /* deep green icon */
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.dark .nav-account-avatar {
  background: rgba(61, 153, 112, 0.36); /* richer green glow on dark */
  color: #FDF7E3 !important;                       /* cream icon on dark */
  box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.15);
}

/* Make lucide user icon a bit bolder so it reads clearly */
.nav-account-avatar i svg,
.nav-account-avatar svg {
  stroke-width: 2.2;
}


/* --- Account button theming & hover size (match toplinks) --- */

/* Base colours */
.nav-account-button {
  color: #111827; /* light mode text */
  transition: color .15s ease, transform .15s ease;
}

/* Hover in light mode */
.nav-account-button:hover {
  color: #020617;
}

/* Dark mode colours – match your cream nav links */
.dark .nav-account-button {
  color: #FDF7E3;
}

.dark .nav-account-button:hover {
  color: #ffffff;
}

/* Slight grow on hover – same feel as toplinks */


/* Avatar / icon contrast */
.nav-account-avatar {
  background: rgba(61, 153, 112, 0.12);
  color: #166534;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.dark .nav-account-avatar {
  background: rgba(61, 153, 112, 0.36);
  color: #FDF7E3;
  box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.15);
}

/* Make lucide icon a touch bolder */
.nav-account-avatar i svg,
.nav-account-avatar svg {
  stroke-width: 2.2;
}

/* Smooth size change only on the text/chevron, not the avatar */
.nav-account-label {
  transition: transform .15s ease;
}

.nav-account-button:hover .nav-account-label {
  transform: translateY(-1px) scale(1.03);
  transition-duration: 200ms;
}

.nav-account-button:active .nav-account-label {
  transform: translateY(0) scale(0.98);
}




{{-- Minimal, component-scoped CSS (light + dark) for the language picker + account + thumb menu --}}

  /* Hide the plain select when JS is available */
  .ak-lang-fallback { display: none; }
  /* Show fallback if JS is disabled */
  noscript .ak-lang-fallback { display: block !important; }

  .ak-lang { position: relative; }
  .ak-lang__btn {
    display: inline-flex; align-items: center; gap: .5rem;
    height: 2.25rem; padding: 0 .75rem;
    border-radius: .75rem;
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(17,24,39,.08);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    font-size: .875rem; line-height: 1rem; color: #111827;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .05s;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .ak-lang__btn:hover { background: rgba(255,255,255,.95); border-color: rgba(17,24,39,.12); }
  .ak-lang__btn:active { transform: translateY(1px); }
  .ak-lang__icon { font-size: 1rem; opacity: .8; }
  .ak-lang__label { letter-spacing: .02em; font-weight: 600; }
  .ak-lang__caret { width: 1rem; height: 1rem; opacity: .7; }

  .ak-lang__menu {
    position: absolute; top: calc(100% + .5rem); right: 0; min-width: 10rem; z-index: 50;
    border-radius: .75rem; overflow: hidden;
    border: 1px solid rgba(17,24,39,.08);
    background: #fff; box-shadow: 0 10px 30px rgba(2,6,23,.12);
  }
  .ak-lang__option {
    display: flex; align-items: center; gap: .5rem;
    width: 100%; padding: .625rem .75rem; text-align: left; font-size: .9rem; color: #111827;
    background: transparent; border: 0; cursor: pointer;
    transition: background .15s;
  }
  .ak-lang__option:hover { background: rgba(16,185,129,.08); }
  .ak-lang__option:active { background: rgba(16,185,129,.14); }
  .ak-lang__option-code {
    display:inline-flex; width: 2rem; height: 1.6rem; align-items:center; justify-content:center;
    font-weight: 700; font-size: .75rem; border-radius: .5rem;
    background: rgba(16,185,129,.12); color: #065f46;
  }

  /* Dark theme */
  .dark .ak-lang__btn {
    background: rgba(17,24,39,.6);
    border-color: rgba(255,255,255,.08);
    color: #e5e7eb;
    box-shadow: inset 0 1px rgba(255,255,255,.04);
  }
  .dark .ak-lang__btn:hover { background: rgba(17,24,39,.72); border-color: rgba(255,255,255,.14); }
  .dark .ak-lang__caret { color: #cbd5e1; }
  .dark .ak-lang__menu {
    background: rgba(14,20,17,.98);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
  }
  .dark .ak-lang__option { color: #e5e7eb; }
  .dark .ak-lang__option:hover { background: rgba(61,153,112,.2); }
  .dark .ak-lang__option:active { background: rgba(61,153,112,.28); }
  .dark .ak-lang__option-code {
    background: rgba(61,153,112,.22); color: #d1fae5;
  }

  /* Fallback select basic styling (so it doesn’t look broken when JS off) */
  .ak-lang-fallback-select {
    appearance: none; -webkit-appearance: none; -moz-appearance:none;
    font-size:.875rem; padding:.4rem .6rem; border-radius:.5rem; border:1px solid rgba(17,24,39,.12);
    background:#fff; color:#111827;
  }
  .dark .ak-lang-fallback-select {
    background: rgba(17,24,39,.6); color:#e5e7eb; border-color: rgba(255,255,255,.12);
  }

  /* Account button subtle tweaks */
  .nav-account-avatar {
    box-shadow: 0 0 0 1px rgba(15,23,42,.06);
  }
  .dark .nav-account-avatar {
    box-shadow: 0 0 0 1px rgba(248,250,252,.12);
  }

  /* Mobile thumb menu – full-screen overlay with bottom stack */

  .ak-thumb-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15,23,42,0.45);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
  .dark .ak-thumb-overlay {
    background: rgba(0,0,0,0.7);
  }

  .ak-thumb-container {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
  }

  .ak-thumb-inner {
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
    margin-bottom: 1rem;
    padding-inline: 1rem;
    pointer-events: auto;
    position: relative;
  }

  .ak-thumb-menu {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: stretch;
    margin-bottom: 0.9rem;
  }

  .ak-thumb-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 0.9rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    background: rgba(248,249,249,0.98);
    color: #111827;
    box-shadow:
      0 0 0 1px rgba(15,23,42,0.04),
      0 10px 24px rgba(15,23,42,0.16);
    transform-origin: center bottom;
    transition:
      transform 0.18s cubic-bezier(.19,.75,.32,1.25),
      box-shadow 0.18s ease-out,
      background 0.16s ease-out;
  }

  .ak-thumb-item i,
  .ak-thumb-item svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
  }

  .ak-thumb-item span {
    flex: 1;
  }

  .ak-thumb-item:hover {
    transform: translateY(-1px);
    box-shadow:
      0 0 0 1px rgba(15,23,42,0.06),
      0 12px 26px rgba(15,23,42,0.22);
    background: #ffffff;
  }

  .dark .ak-thumb-item {
    background: rgba(21,32,28,0.98);
    color: #E5E7EB;
    box-shadow:
      0 0 0 1px rgba(248,250,252,0.06),
      0 14px 30px rgba(0,0,0,0.85);
  }
  .dark .ak-thumb-item:hover {
    background: rgba(32,52,42,0.98);
    box-shadow:
      0 0 0 1px rgba(248,250,252,0.1),
      0 16px 34px rgba(0,0,0,0.95);
  }

  .ak-thumb-fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 9999px;
    background: #3D9970;
    color: #FAF6E9;
    box-shadow:
      0 0 0 1px rgba(15,23,42,0.06),
      0 18px 36px rgba(15,23,42,0.7);
    transition:
      transform 0.18s cubic-bezier(.19,.75,.32,1.25),
      box-shadow 0.18s ease-out,
      background 0.18s ease-out;
  }
  .ak-thumb-fab i,
  .ak-thumb-fab svg {
    width: 1.3rem;
    height: 1.3rem;
  }
  .ak-thumb-fab:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow:
      0 0 0 1px rgba(15,23,42,0.1),
      0 20px 40px rgba(15,23,42,0.85);
  }
  .dark .ak-thumb-fab {
    background: linear-gradient(135deg, #1E4332, #3D9970);
    box-shadow:
      0 0 0 1px rgba(248,250,252,0.08),
      0 20px 40px rgba(0,0,0,0.95);
  }
  .dark .ak-thumb-fab:hover {
    background: linear-gradient(135deg, #285740, #46A57C);
  }

  .ak-thumb-icon-closed,
  .ak-thumb-icon-open {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.14s ease-out, transform 0.16s ease-out;
  }
  .ak-thumb-icon-closed {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  .ak-thumb-icon-open {
    opacity: 0;
    transform: scale(0.7) rotate(-90deg);
  }

  [data-thumb-open="true"] .ak-thumb-icon-closed {
    opacity: 0;
    transform: scale(0.7) rotate(90deg);
  }
  [data-thumb-open="true"] .ak-thumb-icon-open {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  @media (min-width: 640px) {
    /* Hide thumb menu + overlay on tablet/desktop */
    .ak-thumb-container,
    .ak-thumb-overlay {
      display: none !important;
    }
  }



/* Improve FAB visibility in dark mode */
.dark .ak-thumb-fab {
  background: #184A30;
  box-shadow:
    0 0 0 3px rgba(61,153,112,0.5),
    0 14px 32px rgba(0,0,0,0.9);
}

.dark .ak-thumb-fab:hover {
  box-shadow:
    0 0 0 4px rgba(61,153,112,0.7),
    0 16px 36px rgba(0,0,0,1);
}


/* ───────────────────────────────
   HOW IT WORKS – FLAT STYLE
   ─────────────────────────────── */

/* Section background + default text */
.ak-how-section {
  background-color: rgb(233 240 234 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 1;
}

.ak-how-section h2 {
  color: #111827; /* slate-900 */
}

.ak-how-section p {
  color: #374151; /* slate-700 */
}

/* Dark mode: flat, calm green */
.dark .ak-how-section {
  background-color: #02110c;
}

.dark .ak-how-section h2 {
  color: #ecfdf5; /* emerald-50-ish */
}

.dark .ak-how-section p {
  color: rgba(226, 232, 240, 0.9); /* slate-200-ish */
}

/* Remove the old “glow blobs” / gradients if they still exist */
.ak-how-section::before,
.ak-how-section::after {
  content: none !important;
}

/* Slight spacing tweak on mobile so it breathes */
@media (max-width: 767.98px) {
  .ak-how-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* ───────────────────────────────
   Video card – flat, simple, bigger icon
   ─────────────────────────────── */

.ak-how-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background-color: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark mode video */
.dark .ak-how-video {
  border-color: rgba(148, 163, 184, 0.3);
  background-color: #04151a;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.9);
}

/* Kill the sheen/gradient we had before */
.ak-how-video-sheen {
  display: none !important;
}

/* Central play button – larger, flatter */
.ak-how-video-button {
  position: relative;
  z-index: 1;
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  border: none;
  background-color: #3D9970;
  color: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.1),
    0 20px 40px rgba(15, 23, 42, 0.4);
  transition:
    transform 0.16s cubic-bezier(.19,.75,.32,1.25),
    box-shadow 0.16s ease-out,
    background-color 0.16s ease-out;
}

.ak-how-video-button:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.15),
    0 24px 46px rgba(15, 23, 42, 0.55);
  background-color: #358760;
}

.ak-how-video-button:focus-visible {
  outline: 2px solid #facc15;
  outline-offset: 4px;
}

/* Dark mode button */
.dark .ak-how-video-button {
  background-color: #22c55e;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.75),
    0 24px 50px rgba(0, 0, 0, 0.9);
}

.dark .ak-how-video-button:hover {
  background-color: #16a34a;
}

/* Bigger play icon */
.ak-how-video-icon svg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}

/* Remove pulse rings if you want it super flat */
.ak-how-video-ring {
  display: none !important;
}

/* Label under card */
.ak-how-video-label {
  position: absolute;
  inset-inline: 1.5rem;
  bottom: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  background-color: rgba(15, 23, 42, 0.9);
  color: #f9fafb;
  backdrop-filter: blur(10px);
}

.ak-how-video-label-tag {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  background-color: rgba(241, 196, 15, 0.18);
  color: #fef9c3;
}

.dark .ak-how-video-label {
  background-color: rgba(15, 23, 42, 0.92);
}

.dark .ak-how-video-label-tag {
  background-color: rgba(34, 197, 94, 0.18);
  color: #bbf7d0;
}

/* Caption text */
.ak-how-video-caption {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: #4b5563;
}

.dark .ak-how-video-caption {
  color: rgba(209, 213, 219, 0.85);
}

/* ───────────────────────────────
   Steps – large ringed numbers
   ─────────────────────────────── */

.ak-how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ak-how-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Large, ringed numbers */
.ak-how-step-number {
  position: relative;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0f172a;
  background-color: #fdfdfb;
  border: 2px solid #3D9970;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.08),
    0 10px 22px rgba(15, 23, 42, 0.12);
  flex-shrink: 0;
}

/* Outer ring */
.ak-how-step-number::before {
  content: "";
  position: absolute;
  inset: -0.3rem;
  border-radius: inherit;
  border: 1px dashed rgba(55, 65, 81, 0.18);
}

/* Turn off the old vertical connector line */
.ak-how-step-number::after {
  display: none !important;
}

/* Dark mode number */
.dark .ak-how-step-number {
  color: #022c22;
  color: #fdd144;
  background-color: #ecfdf5;
  background-color: transparent;
  border-color: #fdd144;
  border-color: 0 10px 24px rgba(0, 0, 0, 0.85);
  box-shadow:
    0 0 0 1px rgba(6, 95, 70, 0.7),
    0 10px 24px rgba(0, 0, 0, 0.85);
}

.dark .ak-how-step-number::before {
  border-color: rgba(148, 163, 184, 0.4);
}

/* Step text */
.ak-how-step-body h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.ak-how-step-body p {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #4b5563;
}

.dark .ak-how-step-body h3 {
  color: #e5e7eb;
}

.dark .ak-how-step-body p {
  color: rgba(209, 213, 219, 0.9);
}

/* ───────────────────────────────
   HOW IT WORKS – SECTION
   ─────────────────────────────── */

.ak-how-section {
  background-color: rgb(233 240 234 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 1;
  color: #111827;
}

.ak-how-title {
  color: #111827; /* deep neutral, not blue */
}

.ak-how-lead {
  color: #374151;
  font-size: 0.98rem;
}

/* Dark mode: deep, calm green – no blue cast */
.dark .ak-how-section {
  background-color: #02110c;
}

.dark .ak-how-title {
  color: #FAF6E9; /* warm off-white */
}

.dark .ak-how-lead {
  color: rgba(226, 232, 240, 0.9);
}

/* ───────────────────────────────
   VIDEO CARD – FLAT + ON-BRAND
   ─────────────────────────────── */

.ak-how-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background-color: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark mode video */
.dark .ak-how-video {
  border-color: rgba(52, 211, 153, 0.25);
  background-color: #031812;
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.9);
}

/* Central play button – large, flat, Akuno green */
.ak-how-video-button {
  position: relative;
  z-index: 1;
  width: 5rem;
  height: 5rem;
  border-radius: 9999px;
  border: none;
  background-color: #3D9970;
  color: #FAF6E9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.09),
    0 20px 40px rgba(15, 23, 42, 0.4);
  transition:
    transform 0.16s cubic-bezier(.19,.75,.32,1.25),
    box-shadow 0.16s ease-out,
    background-color 0.16s ease-out;
}

.ak-how-video-button:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.14),
    0 24px 46px rgba(15, 23, 42, 0.55);
  background-color: #358760;
}

.ak-how-video-button:focus-visible {
  outline: 2px solid #F1C40F;
  outline-offset: 4px;
}

/* Dark mode button */
.dark .ak-how-video-button {
  background-color: #22c55e;
  box-shadow:
    0 0 0 1px rgba(6, 95, 70, 0.75),
    0 24px 50px rgba(0, 0, 0, 0.95);
}

.dark .ak-how-video-button:hover {
  background-color: #16a34a;
}

/* Larger play icon */
.ak-how-video-icon svg {
  width: 2.1rem;
  height: 2.1rem;
  fill: currentColor;
}

/* Bottom label – warm, not blue */
.ak-how-video-label {
  position: absolute;
  inset-inline: 1.5rem;
  bottom: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  background-color: rgba(3, 24, 14, 0.9); /* deep green, not navy */
  color: #f9fafb;
  backdrop-filter: blur(10px);
}

.ak-how-video-label-tag {
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  background-color: rgba(241, 196, 15, 0.22);
  color: #fef9c3;
}

.dark .ak-how-video-label {
  background-color: rgba(2, 20, 13, 0.95);
}

.dark .ak-how-video-label-tag {
  background-color: rgba(34, 197, 94, 0.22);
  color: #bbf7d0;
}

/* ───────────────────────────────
   STEPS – LARGE RINGED NUMBERS
   ─────────────────────────────── */

.ak-how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ak-how-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Ringed numbers with Akuno colours */
.ak-how-step-number {
  position: relative;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: #3D9970;
  background-color: transparent;
  border: 2px solid #3D9970;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.06),
    0 10px 22px rgba(15, 23, 42, 0.12);
  flex-shrink: 0;
}

.ak-how-step-number::before {
  content: "";
  position: absolute;
  inset: -0.3rem;
  border-radius: inherit;
  border: 1px dashed rgba(55, 65, 81, 0.18);
}

/* Dark mode numbers */
.dark .ak-how-step-number {

  color: #fdd144;
  background-color: transparent;
  border-color: #fdd144;
  box-shadow:
    0 0 0 1px rgba(6, 95, 70, 0.7),
    0 10px 24px rgba(0, 0, 0, 0.85);
}

.dark .ak-how-step-number::before {
  border-color: rgba(148, 163, 184, 0.4);
}

/* Step text */
.ak-how-step-body h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
}

.ak-how-step-body p {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #4b5563;
}

.dark .ak-how-step-body h3 {
  color: #e5e7eb;
}

.dark .ak-how-step-body p {
  color: rgba(209, 213, 219, 0.9);
}

/* Small spacing tweak on narrow screens */
@media (max-width: 767.98px) {
  .ak-how-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}
/* --- How it Works: Video Placeholder --- */

.ak-how-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 1.25rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.dark .ak-how-video {
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}

/* Play button */
.ak-how-video-button {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 70px;
  height: 70px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
}

.dark .ak-how-video-button {
  background: rgba(20, 32, 27, 0.75);
  border: 1px solid rgba(255,255,255,.1);
}

.ak-how-video-button:hover {
  transform: scale(1.06);
  background: rgba(255,255,255,0.95);
}

.dark .ak-how-video-button:hover {
  background: rgba(40, 64, 55, 0.9);
}

.ak-how-video-icon svg {
  width: 30px;
  height: 30px;
  fill: #3D9970;
}

.dark .ak-how-video-icon svg {
  fill: #F1C40F;
}

/* Label bottom-left */
.ak-how-video-label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255,255,255,0.85);
  padding: .4rem .8rem;
  border-radius: .75rem;
  font-size: .8rem;
  font-weight: 500;
  color: #0f1b14;
  backdrop-filter: blur(6px);
}

.dark .ak-how-video-label {
  background: rgba(20,32,27,0.8);
  color: #F8F8F0;
}

.ak-how-video-label-tag {
  font-size: .7rem;
  opacity: .75;
}


/* --------------------------------------------------------
   HOW-IT-WORKS — Video Placeholder Enhancements
   -------------------------------------------------------- */

/* Taller video area (more cinematic) */
.ak-how-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;            /* default fallback */
  height: auto;
  padding-top: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Increased height specifically */
  min-height: 260px;               /* mobile */
}

@media (min-width: 640px) {
  .ak-how-video {
    min-height: 320px;
  }
}

@media (min-width: 1024px) {
  .ak-how-video {
    min-height: 380px;             /* desktop — feels premium */
  }
}

/* Play button centered */
.ak-how-video-button {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 90px;
  width: 90px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    0 4px 14px rgba(0,0,0,0.25),
    0 0 0 1px rgba(0,0,0,0.08);

  transition: transform .25s ease, box-shadow .25s ease;
}

.dark .ak-how-video-button {
  background: rgba(14,20,17,0.8);
  box-shadow:
    0 4px 18px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.08);
}

/* Hover / tap effect */
.ak-how-video-button:hover {
  transform: scale(1.06);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.3),
    0 0 0 1px rgba(0,0,0,0.12);
}
.dark .ak-how-video-button:hover {
  box-shadow:
    0 6px 22px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.1);
}

/* BIGGER PLAY ICON */
.ak-how-video-icon svg {
  width: 48px;
  height: 48px;
  fill: #3D9970;
}

.dark .ak-how-video-icon svg {
  fill: #F1C40F;
}


/* --------------------------------------------------------
   RULES SECTION – shared rules for all Circles
   -------------------------------------------------------- */

/* Section background */
.ak-rules-section {
  --tw-bg-opacity: 1;
  background-color: rgb(233 240 234 / var(--tw-bg-opacity));
  background-color: rgb(217, 231, 224);
}

.dark .ak-rules-section {
  background: radial-gradient(circle at top, #163b2d 0%, #02120c 55%, #010b08 100%);
}

/* Heading */
.ak-rules-title {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #111827;
}

.ak-rules-sub {
  margin-top: 0.75rem;
  font-size: 0.98rem;
  color: #374151;
}

.dark .ak-rules-title {
  color: #f9fafb;
}

.dark .ak-rules-sub {
  color: #d1d5db;
}

/* Grid keeps using Tailwind cols but we control max width */
.ak-rules-grid {
  max-width: 72rem;
  margin-inline: auto;
}

/* Rule cards */
.ak-rule-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.25rem 1.5rem;
  border-radius: 1.35rem;
  background: #ffffff;
  border: 1px solid rgba(16, 185, 129, 0.16);
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.7);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

.ak-rule-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(16, 185, 129, 0.28);
  border-color: rgba(16, 185, 129, 0.35);
}

.dark .ak-rule-card {
  background: rgba(10, 19, 15, 0.98);
  border-color: rgba(16, 185, 129, 0.32);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}

.dark .ak-rule-card:hover {
  background: rgba(14, 27, 20, 0.98);
  border-color: rgba(74, 222, 128, 0.4);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(16, 185, 129, 0.55);
}

/* Icon */
.ak-rule-icon {
  flex-shrink: 0;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: rgba(61, 153, 112, 0.08);
  color: #166534;
}

.dark .ak-rule-icon {
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
}

/* Text */
.ak-rule-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #374151;
}

.ak-rule-text {
  margin-top: 0.45rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #1f2933;
}

.ak-rule-text strong {
  font-weight: 700;
}

.dark .ak-rule-label {
  color: #e5e7eb;
}

.dark .ak-rule-text {
  color: #e5e7eb;
}

/* CTA link for full rules */
.ak-rules-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  font-size: 0.9rem;
  font-weight: 500;
  color: #065f46;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  transition:
    background 0.18s ease-out,
    color 0.18s ease-out,
    border-color 0.18s ease-out,
    box-shadow 0.18s ease-out,
    transform 0.16s ease-out;
}

.ak-rules-cta:hover {
  background: #ffffff;
  border-color: rgba(16, 185, 129, 0.65);
  color: #064e3b;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.dark .ak-rules-cta {
  background: rgba(10, 19, 15, 0.98);
  color: #bbf7d0;
  border-color: rgba(74, 222, 128, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
}

.dark .ak-rules-cta:hover {
  background: rgba(16, 24, 20, 0.98);
  border-color: rgba(110, 231, 183, 0.85);
  color: #ecfdf5;
}
/* --------------------------------------------------------
   Explore the Circles – light + dark treatments
   -------------------------------------------------------- */

/* Section background */
.ak-circles-section {
  background-color: #edebe5d6; /* light “paper” */
}

.dark .ak-circles-section {
  background: radial-gradient(circle at top, #0f261f 0%, #0f2b23 55%, #0c3829 100%);
}

/* Heading + subtext */
.ak-circles-title {
  color: #111827;
}

.ak-circles-sub {
  color: #4b5563;
  font-size: 0.98rem;
}

.dark .ak-circles-title {
  color: #f9fafb;
}

.dark .ak-circles-sub {
  color: #e5e7eb;
}

/* Cards */
.ak-circle-card {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.4);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.9);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

.ak-circle-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.2),
    0 0 0 1px rgba(148, 163, 184, 0.7);
border-color: rgba(16, 185, 129, 0.35);
}

.dark .ak-circle-card {
  background: rgba(6, 14, 11, 0.98);
  border-color: rgba(51, 65, 85, 0.8);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.95);
}

.dark .ak-circle-card:hover {
  background: rgba(11, 24, 19, 0.98);
  border-color: rgba(74, 222, 128, 0.5);
}

/* Icon “pill” */
.ak-circle-icon {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.dark .ak-circle-icon {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.75);
}

/* Text colours inside cards */
.ak-circle-title,
.ak-circle-facts,
.ak-circle-price,
.ak-circle-time-value {
  color: #111827;
}

.ak-circle-time-label {
  color: #6b7280;
}

.dark .ak-circle-title,
.dark .ak-circle-facts,
.dark .ak-circle-price,
.dark .ak-circle-time-value {
  color: #e5e7eb;
}

.dark .ak-circle-time-label {
  color: #9ca3af;
}

/* Progress bar track + bar (time left) */
.ak-circle-progress-track {
  background-color: #e5e7eb;
}

.dark .ak-circle-progress-track {
  background-color: rgba(15, 23, 42, 0.9);
}

.ak-circle-progress-bar {
  /* light mode already uses brand green inline; we just tweak dark a bit */
}

.dark .ak-circle-progress-bar {
  background-color: #3d9970 !important; /* keep brand green, make sure it stays visible */
}


/* --------------------------------------------------------
   CIRCLES – Cards that feel like actual “Circles”
   -------------------------------------------------------- */

/* Section background */
.ak-circles-section {
  background-color: #edebe5d6;
}

.dark .ak-circles-section {
  background: radial-gradient(circle at top, #082018 0%, #020c08 55%, #010705 100%);
}

/* Heading */
.ak-circles-title {
  color: #0f172a;
}

.ak-circles-sub {
  color: #4b5563;
  font-size: 0.98rem;
}

.dark .ak-circles-title {
  color: #f9fafb;
}

.dark .ak-circles-sub {
  color: #e5e7eb;
}

/* Card shell */
.ak-circle-card {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.45);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.9);
}

.ak-circle-card:hover {
  transform: translateY(-4px);
  border-color: rgba(148, 163, 184, 0.8);
  box-shadow:
    0 20px 42px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(148, 163, 184, 0.9);
}

.dark .ak-circle-card {
  background: radial-gradient(circle at top, #05130e 0%, #020906 75%);
  border-color: rgba(30, 64, 54, 0.9);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(15, 23, 42, 0.8);
}

.dark .ak-circle-card:hover {
  border-color: rgba(74, 222, 128, 0.55);
}

/* Orbit + ring */
.ak-circle-orbit-wrapper {
  position: relative;
}

.ak-circle-orbit {
  position: relative;
  width: 9.75rem;
  height: 9.75rem;
}

.ak-circle-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

/* Track (full circle) */
.ak-circle-ring-track {
  fill: none;
  stroke-width: 5;
  stroke: rgba(209, 213, 219, 0.9);
}

/* Progress (remaining time) */
.ak-circle-ring-progress {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke: #3d9970;
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
}

.dark .ak-circle-ring-track {
  stroke: rgba(15, 23, 42, 0.95);
}

.dark .ak-circle-ring-progress {
  stroke: #4ade80;
}

/* Circle core (the “inner” Circle people join) */
.ak-circle-core {
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: radial-gradient(circle at 30% 10%, #fef3c7 0%, #fefce8 40%, #ecfdf5 100%);
  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* Dark theme core */
.dark .ak-circle-core {
  background: radial-gradient(circle at 30% 10%, #022c22 0%, #064e3b 45%, #020617 100%);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.9),
    inset 0 0 0 1px rgba(148, 163, 184, 0.6);
}

/* Icon chip inside the circle */
.ak-circle-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  font-size: 1.35rem;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
}

.dark .ak-circle-chip {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.85);
}

/* Name + price */
.ak-circle-name {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #374151;
}

.ak-circle-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: #111827;
}

.ak-circle-price span {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.85;
  margin-left: 0.15rem;
  letter-spacing: 0.06em;
}

.ak-circle-winners {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #047857;
}

.dark .ak-circle-name {
  color: #e5e7eb;
}

.dark .ak-circle-price {
  color: #fefce8;
}

.dark .ak-circle-winners {
  color: #bbf7d0;
}

/* Body (rule text + footer) */
.ak-circle-body {
  color: #111827;
}

.ak-circle-rule {
  color: #4b5563;
}

.dark .ak-circle-body {
  color: #e5e7eb;
}

.dark .ak-circle-rule {
  color: #cbd5f5;
}

/* Footer row: time + CTAs */
.ak-circle-meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ak-circle-time-label {
  display: block;
  color: #6b7280;
  margin-bottom: 0.1rem;
}

.ak-circle-time-value {
  color: #111827;
}

.dark .ak-circle-time-label {
  color: #9ca3af;
}

.dark .ak-circle-time-value {
  color: #e5e7eb;
}

@media (min-width: 1024px) {
  .ak-circle-meta-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
/* ============================================
   Circles section – light + dark
   ============================================ */

/* Section background */
.ak-circles-section {
  background-color: #edebe5d6; /* calm light tone */
}

.dark .ak-circles-section {
  background:
    radial-gradient(circle at top, #0f2f23 0, transparent 55%),
    radial-gradient(circle at bottom, #022c22 0, transparent 60%),
    #020712;
}

/* Heading */
.ak-circles-title {
  color: #020617;
}

.ak-circles-sub {
  color: #4b5563;
  font-size: 0.95rem;
}

.dark .ak-circles-title {
  color: #f9fafb;
}

.dark .ak-circles-sub {
  color: #e5e7eb;
}

/* ============================================
   Circle cards
   ============================================ */

.ak-circle-card {
  position: relative;
  border-radius: 1.6rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #ffffff;
  color: #111827;
  padding: 1.5rem;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(148, 163, 184, 0.12);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

.ak-circle-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 22px 50px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(16, 185, 129, 0.25);
}

.dark .ak-circle-card {
  background: radial-gradient(circle at top, #020617 0, #020712 55%, #020617 100%);
  border-color: rgba(148, 163, 184, 0.35);
  color: #e5e7eb;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.8);
}

.dark .ak-circle-card:hover {
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(52, 211, 153, 0.4);
}

/* Icon chip */
.ak-circle-icon {
  height: 3.25rem;
  width: 3.25rem;
  border-radius: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow:
    0 10px 20px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(148, 163, 184, 0.22);
}

.dark .ak-circle-icon {
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(148, 163, 184, 0.55);
}

/* Text + facts */
.ak-circle-name {
  color: #020617;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dark .ak-circle-name {
  color: #f9fafb;
}

.ak-circle-facts {
  border-color: rgba(209, 213, 219, 0.85);
}

.dark .ak-circle-facts {
  border-color: rgba(31, 41, 55, 0.9);
}

.ak-circle-price {
  color: #020617;
}

.dark .ak-circle-price {
  color: #f9fafb;
}

.ak-circle-price-unit {
  margin-left: 0.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7280;
}

.dark .ak-circle-price-unit {
  color: #9ca3af;
}

.ak-circle-meta-line {
  color: #4b5563;
  font-size: 0.9rem;
}

.dark .ak-circle-meta-line {
  color: #d1d5db;
}

/* (Hidden) linear progress holder – just to carry data attrs */
.ak-circle-progress-track {
  width: 100%;
  height: 0.375rem;
  border-radius: 999px;
  background-color: #e5e7eb;
  overflow: hidden;
}

.ak-circle-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background-color: #3d9970;
  transition: width 0.25s ease-out;
}

.dark .ak-circle-progress-track {
  background-color: rgba(31, 41, 55, 0.9);
}

.dark .ak-circle-progress-bar {
  background: linear-gradient(90deg, #22c55e, #3d9970);
}

/* ============================================
   Circular countdown ring
   ============================================ */

.ak-circle-ring-wrap {
  position: relative;
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* halo / border to make the ring pop */
.ak-circle-ring-wrap::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(circle at 30% 0%, rgba(52, 211, 153, 0.22) 0, transparent 55%);
}

.dark .ak-circle-ring-wrap::before {
  border-color: rgba(148, 163, 184, 0.45);
  background:
    radial-gradient(circle at 40% 0%, rgba(45, 212, 191, 0.32) 0, transparent 55%);
}

.ak-circle-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* so 0° is at the top */
}

.ak-circle-ring-track,
.ak-circle-ring-progress {
  fill: none;
  stroke-width: 4;
}

/* remaining time track */
.ak-circle-ring-track {
  stroke: rgba(209, 213, 219, 0.9);
}

.dark .ak-circle-ring-track {
  stroke: rgba(15, 23, 42, 0.95);
}

/* elapsed time segment (JS animates dashoffset) */
.ak-circle-ring-progress {
  stroke: #059669;
  stroke-linecap: round;
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 420ms cubic-bezier(.19,.75,.32,1.1);
}

.dark .ak-circle-ring-progress {
  stroke: #6ee7b7;
}

/* ============================================
   Countdown label & time
   ============================================ */

.ak-circle-countdown-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #047857; /* emerald 700 – readable on light */
}

.dark .ak-circle-countdown-label {
  color: #6ee7b7;
}

.ak-circle-countdown-time {
  margin-top: 0.08rem;
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #111827; /* strong for light mode */
}

.dark .ak-circle-countdown-time {
  color: #e5e7eb;
}

/* ============================================
   Urgent / FOMO state (last 12h)
   ============================================ */

.ak-circle-card--urgent .ak-circle-ring-progress {
  stroke: #f97316; /* orange */
}

.ak-circle-card--urgent .ak-circle-ring-wrap::before {
  border-color: rgba(250, 204, 21, 0.85);
  box-shadow:
    0 0 0 1px rgba(250, 204, 21, 0.4),
    0 0 16px rgba(250, 204, 21, 0.6);
}

.ak-circle-card--urgent .ak-circle-countdown-label,
.ak-circle-card--urgent .ak-circle-countdown-time {
  color: #f59e0b;
}


.dark\:text-emerald-300 {
	--tw-text-opacity: 1;
	color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

/* ================================
   Explore the Circles – DARK MODE
   ================================ */

/* Section background (different to rules section) */
.dark .ak-circles-section {
  /* Deep, flatter teal/ink blend – no heavy radial */
  background:
    linear-gradient(180deg, #020814 0%, #020b10 40%, #000406 100%);

	
	
	  background:
	linear-gradient(180deg, #0d1714 0%, #121b15 40%, #0e1d18 100%);
	
	background: linear-gradient(180deg, #09271d 0%, #0d3427 40%, #0d3728 100%);
}

/* Circle cards in dark mode */
.dark .ak-circle-card {
  background: linear-gradient(145deg, #020915, #04171b);
  background: linear-gradient(145deg, #0b1811, #04171b);
  border-color: rgba(148, 163, 184, 0.35);
  color: #e5e7eb;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.8);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

.dark .ak-circle-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(145deg, #04171b, #061f24);
  background: linear-gradient(145deg, #042015, #04171b);
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(52, 211, 153, 0.4);
}

/* Icon pill on dark cards */
.dark .ak-circle-icon {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(148, 163, 184, 0.6);
}

/* Text colours inside cards */
.dark .ak-circle-name,
.dark .ak-circle-price {
  color: #f9fafb;
}

.dark .ak-circle-price-unit {
  color: #9ca3af;
}

.dark .ak-circle-meta-line {
  color: #d1d5db;
}

.dark .ak-circle-facts {
  border-color: rgba(31, 41, 55, 0.9);
}

/* Countdown label + time – keep legible on dark */
.dark .ak-circle-countdown-label {
  color: #6ee7b7;        /* mint accent */
}

.dark .ak-circle-countdown-time {
  color: #e5e7eb;
}

/* Circular ring on dark cards */
.dark .ak-circle-ring-wrap::before {
  border-color: rgba(45, 212, 191, 0.35);
  background:
    radial-gradient(circle at 30% 0%, rgba(45, 212, 191, 0.28) 0, transparent 55%);
}

.dark .ak-circle-ring-track {
  stroke: rgba(15, 23, 42, 0.95);
  stroke: rgba(8, 20, 15, 0.95);
}

.dark .ak-circle-ring-progress {
  
    stroke: rgb(34, 197, 94);
	stroke: #6ee7b7;
  filter: drop-shadow(0 0 4px rgba(45, 212, 191, 0.7));
}

/* Urgent state tweak in dark mode */
.dark .ak-circle-card.ak-circle-card--urgent .ak-circle-ring-progress {
  stroke: #f97316;
  filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.9));
}

.dark .ak-circle-card.ak-circle-card--urgent .ak-circle-countdown-label,
.dark .ak-circle-card.ak-circle-card--urgent .ak-circle-countdown-time {
  color: #fbbf24;
}

/* CLOSED STATE */
.ak-circle-card.ak-closed {
  pointer-events: none;
  opacity: 0.78;
}

/* CLOSED ring */
.ak-circle-card.ak-closed .ak-circle-ring-progress {
  stroke: #9CA3AF !important;
  filter: none !important;
  animation: none !important;
}

.ak-circle-card.ak-closed .ak-circle-ring-wrap::before {
  border-color: rgba(156,163,175,0.35); /* gray-400 */
  box-shadow: none !important;
}

/* CLOSED label + time */
.ak-circle-card.ak-closed .ak-circle-countdown-label {
  color: #6b7280 !important; /* gray-500 */
}

.ak-circle-card.ak-closed .ak-circle-countdown-time {
  color: #4b5563 !important; /* gray-600 */
}

/* DISABLED BUTTON */
.ak-circle-card.ak-closed .btn-primary {
  background: #e5e7eb !important; /* gray-200 */
  color: #9ca3af !important;      /* gray-400 */
  cursor: not-allowed !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.dark .ak-circle-card.ak-closed .btn-primary {
  background: #1f2937 !important; /* gray-800 */
  color: #6b7280 !important;      /* gray-500 */
}

/* === Closed state – grey ring + muted text + disabled CTA === */

/* Ring + label */
.ak-circle-card--closed .ak-circle-ring-progress {
  stroke: #9ca3af;            /* grey */
  filter: none;
}

.ak-circle-card--closed .ak-circle-countdown-label,
.ak-circle-card--closed .ak-circle-countdown-time {
  color: #6b7280;             /* grey-500 */
}

.dark .ak-circle-card--closed .ak-circle-ring-progress {
  stroke: #4b5563;            /* darker grey in dark mode */
}

.dark .ak-circle-card--closed .ak-circle-countdown-label,
.dark .ak-circle-card--closed .ak-circle-countdown-time {
  color: #9ca3af;
}

/* Join button (disabled look) */
.ak-circle-card--closed .btn-primary {
  background-color: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  border-color: transparent;
}

.dark .ak-circle-card--closed .btn-primary {
  background-color: #111827;
  color: #6b7280;
}
/* Closed state – clearly disabled Join button */
.ak-circle-card--closed .btn-primary,
.ak-circle-card-join--closed {
  background-color: #e5e7eb;      /* gray-200 */
  color: #9ca3af;                 /* gray-400 text */
  border-color: #d1d5db;          /* gray-300 border */
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  opacity: 0.9;
}

/* Make sure hover/focus don't "wake it up" in light mode */
.ak-circle-card--closed .btn-primary:hover,
.ak-circle-card--closed .btn-primary:focus-visible,
.ak-circle-card-join--closed:hover,
.ak-circle-card-join--closed:focus-visible {
  background-color: #e5e7eb;
  color: #9ca3af;
  border-color: #d1d5db;
  box-shadow: none;
  transform: none;
}

/* Dark mode closed button */
.dark .ak-circle-card--closed .btn-primary,
.dark .ak-circle-card-join--closed {
  background-color: #020617;      /* near-black */
  color: #6b7280;                 /* gray-500 text */
  border-color: #111827;          /* slate-ish border */
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.85;
}

/* Dark mode hover/focus – still muted */
.dark .ak-circle-card--closed .btn-primary:hover,
.dark .ak-circle-card--closed .btn-primary:focus-visible,
.dark .ak-circle-card-join--closed:hover,
.dark .ak-circle-card-join--closed:focus-visible {
  background-color: #020617;
  color: #6b7280;
  border-color: #111827;
  box-shadow: none;
  transform: none;
}
/* ================================
   Announcements (Light + Dark) — refined weight + responsive table
   ================================ */

.ak-announce-section { background:#ffffff; }
.dark .ak-announce-section { background:#02110c; }

.ak-announce-title { color:#0b1220; font-weight:800; }
.ak-announce-sub { color:#475569; font-weight:500; }

.dark .ak-announce-title { color:#f8fafc; }
.dark .ak-announce-sub { color:rgba(226,232,240,.78); }

/* Tabs (match screenshot, but less heavy) */
.ak-tabs{
  display:inline-flex;
  gap:.25rem;
  padding:.35rem;
  border-radius:1rem;
  border:1px solid rgba(15,23,42,.10);
  background:#ffffff;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}
.dark .ak-tabs{
  border-color:rgba(148,163,184,.22);
  background:rgba(2,6,10,.65);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}

.ak-tab{
  border:0;
  background:transparent;
  padding:.58rem 1.05rem;
  border-radius:.85rem;
  font-weight:600;
  font-size:.95rem;
  color:#334155;
  transition:background .12s ease, color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.ak-tab:hover{ color:#0f172a; }
.dark .ak-tab{ color:rgba(226,232,240,.80); }
.dark .ak-tab:hover{ color:#ffffff; }

.ak-tab.is-active{
  background:#059669;
  color:#ffffff;
  box-shadow:0 10px 18px rgba(5,150,105,.18);
}
.dark .ak-tab.is-active{
  background:#10b981;
  box-shadow:0 14px 26px rgba(16,185,129,.18);
}

/* Empty panel */
.ak-panel-empty{
  padding:1.25rem;
  border-radius:1rem;
  border:1px solid rgba(15,23,42,.08);
  background:#f8fafc;
  color:#334155;
  text-align:center;
  font-weight:500;
}
.dark .ak-panel-empty{
  border-color:rgba(148,163,184,.18);
  background:rgba(2,6,10,.55);
  color:rgba(226,232,240,.85);
}

/* ================================
   Winners table — scroll on small screens
   ================================ */

/* Make wrapper scroll on small screens, normal on large */
.ak-table-wrap{
  overflow:hidden;
  border-radius:1.15rem;
  border:1px solid rgba(15,23,42,.08);
  background:#ffffff;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

/* the scroller layer */
.ak-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter: stable both-edges;
}
.ak-table-wrap::-webkit-scrollbar{ height:10px; }
.ak-table-wrap::-webkit-scrollbar-track{ background:transparent; }
.ak-table-wrap::-webkit-scrollbar-thumb{
  background:rgba(15,23,42,.18);
  border-radius:999px;
}
.dark .ak-table-wrap::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.22);
}

.dark .ak-table-wrap{
  border-color:rgba(148,163,184,.18);
  background:rgba(2,6,10,.55);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}

.ak-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:.93rem;
  min-width: 920px; /* key: enables horizontal scroll on small screens */
}

/* header: lighter weight */
.ak-table thead th{
  
  font-weight:600;
  letter-spacing:.01em;
  padding:.95rem 1.1rem;
  color:#334155;
  background:#f8fafc;
  border-bottom:1px solid rgba(15,23,42,.06);
  white-space:nowrap;
}
.dark .ak-table thead th{
  color:rgba(226,232,240,.88);
  background:rgba(2,6,10,.30);
  border-bottom:1px solid rgba(148,163,184,.14);
}

/* body */
.ak-table tbody td{
  padding:1.0rem 1.1rem;
  color:#0f172a;
  border-bottom:1px solid rgba(15,23,42,.06);
  vertical-align:middle;
  font-weight:500;
}
.ak-table tbody tr:last-child td{ border-bottom:none; }

.dark .ak-table tbody td{
  color:rgba(226,232,240,.88);
  border-bottom:1px solid rgba(148,163,184,.12);
}

/* hover: subtle */
.ak-table tbody tr:hover{
  background:rgba(5,150,105,.04);
}
.dark .ak-table tbody tr:hover{
  background:rgba(16,185,129,.06);
}

/* focus-within: keyboard row focus state (subtle) */
.ak-table tbody tr:focus-within{
  background:rgba(5,150,105,.06);
  outline:2px solid rgba(5,150,105,.22);
  outline-offset:-2px;
}
.dark .ak-table tbody tr:focus-within{
  background:rgba(16,185,129,.08);
  outline:2px solid rgba(16,185,129,.22);
}

/* Make the action link show a nice focus ring */
.ak-table a.ak-link:focus-visible{
  outline:2px solid rgba(5,150,105,.40);
  outline-offset:3px;
  border-radius:.4rem;
}
.dark .ak-table a.ak-link:focus-visible{
  outline:2px solid rgba(52,211,153,.40);
}

/* Circle icon chip in table */
.ak-circle-chip{
  width:2.25rem;
  height:2.25rem;
  border-radius:.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#dcfce7;
  box-shadow:0 10px 18px rgba(15,23,42,.08);
  flex-shrink:0;
}
.dark .ak-circle-chip{
  background:rgba(16,185,129,.14);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}

/* Reduce “heavy” emphasis */
.ak-table-strong{
  color:#0b1220;
  font-weight:600;
}
.dark .ak-table-strong{ color:#ffffff; font-weight:600; }

/* ================================
   Updates cards — cleaner weight
   ================================ */

.ak-update-card{
  border-radius:1.15rem;
  border:1px solid rgba(15,23,42,.08);
  background:#ffffff;
  padding:1.25rem;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}
.dark .ak-update-card{
  border-color:rgba(148,163,184,.18);
  background:rgba(2,6,10,.55);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}

.ak-update-date{ color:#64748b; font-weight:500; }
.dark .ak-update-date{ color:rgba(226,232,240,.65); }

.ak-update-title{ color:#0b1220; font-weight:700; }
.dark .ak-update-title{ color:#ffffff; }

.ak-update-desc{ color:#475569; font-weight:500; }
.dark .ak-update-desc{ color:rgba(226,232,240,.78); }

/* Links */
.ak-link{
  color:#047857;
  font-weight:600;
  text-decoration:none;
}
.ak-link:hover{ text-decoration:underline; }
.dark .ak-link{ color:#34d399; }


/* ================================
   Blockchain Power feature band
   Stands out in BOTH light & dark
   ================================ */

.ak-bc-section{
  color:#ffffff;
  background:
    radial-gradient(circle at 22% 15%, rgba(241,196,15,.16) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(61,153,112,.18) 0%, transparent 60%),
    linear-gradient(180deg, #0C201A 0%, #0C1A24 100%);
  position:relative;
}

/* In light mode we still want it to be a “dark feature band” so it pops */
.ak-bc-section .ak-bc-grid{
  opacity:.12;
  color:rgba(255,255,255,.65);
}

/* Dark mode: slightly deeper + calmer so it still feels distinct */
.dark .ak-bc-section{
  background:
    radial-gradient(circle at 22% 15%, rgba(241,196,15,.10) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(16,185,129,.12) 0%, transparent 60%),
    linear-gradient(180deg, #04110D 0%, #020712 100%);
}
.dark .ak-bc-section .ak-bc-grid{
  opacity:.10;
  color:rgba(226,232,240,.55);
}

/* Glows */
.ak-bc-glow{
  position:absolute;
  filter: blur(42px);
  opacity:.35;
  pointer-events:none;
}
.ak-bc-glow--a{
  width:520px; height:260px;
  left:-120px; top:-90px;
  background: radial-gradient(circle, rgba(241,196,15,.55), transparent 70%);
}
.ak-bc-glow--b{
  width:520px; height:260px;
  right:-140px; bottom:-120px;
  background: radial-gradient(circle, rgba(61,153,112,.55), transparent 70%);
}
.dark .ak-bc-glow{ opacity:.28; }

/* Typography */
.ak-bc-title{ color:#ffffff; }
.ak-bc-sub{ color: rgba(226,232,240,.86); }
.ak-bc-accent{ color:#F1C40F; }

/* Chips */
.ak-bc-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.42rem .7rem;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.01em;
  background: rgba(241,196,15,.14);
  border: 1px solid rgba(241,196,15,.25);
  color:#fff;
}
.ak-bc-chip--soft{
  background: rgba(226,232,240,.10);
  border-color: rgba(226,232,240,.18);
  color: rgba(255,255,255,.92);
}
.dark .ak-bc-chip--soft{
  background: rgba(148,163,184,.10);
  border-color: rgba(148,163,184,.18);
}

/* Bulleted list */
.ak-bc-list{
  color: rgba(226,232,240,.86);
}
.ak-bc-bullet{
  width:.55rem; height:.55rem;
  margin-top:.42rem;
  border-radius:999px;
  background: #F1C40F;
  box-shadow: 0 0 0 4px rgba(241,196,15,.10);
  flex-shrink:0;
}

/* CTA: keep your btn system, just ensure it reads well here */
.ak-bc-cta{
  box-shadow: 0 18px 34px rgba(0,0,0,.30);
}
.dark .ak-bc-cta{
  box-shadow: 0 20px 44px rgba(0,0,0,.55);
}

/* Logo */
.ak-bc-logoWrap{
  width: 16rem;
  height: 16rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (min-width:1024px){
  .ak-bc-logoWrap{ width: 18rem; height: 18rem; }
}
.ak-bc-logoHalo{
  position:absolute;
  inset:-18px;
  border-radius:999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(241,196,15,.28) 0%, transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(61,153,112,.22) 0%, transparent 60%);
  box-shadow:
    0 0 0 1px rgba(226,232,240,.12),
    0 26px 60px rgba(0,0,0,.35);
  opacity:.9;
}
.dark .ak-bc-logoHalo{
  box-shadow:
    0 0 0 1px rgba(148,163,184,.14),
    0 34px 80px rgba(0,0,0,.70);
  opacity:.75;
}
.ak-bc-logo{
  width: 14rem;
  height: 14rem;
}
@media (min-width:1024px){
  .ak-bc-logo{ width: 18rem; height: 18rem; }
}


/* ================================
   FEATURE SURFACE (Blockchain band)
================================ */

/* Base (light mode) */
.ak-feature-surface {
  background: #f4f6f3; /* calm, premium off-white */
  color: #0f172a;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.ak-feature-sub {
  color: #475569;
}

.ak-feature-list {
  color: #334155;
  font-size: 0.95rem;
}

.ak-feature-list li {
  display: flex;
  gap: 0.75rem;
  line-height: 1.6;
}

.ak-bullet {
  color: #16a34a; /* emerald */
  margin-top: 0.15rem;
}

.ak-accent {
  color: #16a34a;
}

.ak-feature-logo {
  opacity: 0.95;
}

/* subtle grid */
.ak-feature-grid {
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: 0.25;
}

/* ================================
   Dark mode
================================ */
.dark .ak-feature-surface {
  background: linear-gradient(180deg, #0c201a 0%, #0c1a24 100%);
  color: #f8fafc;
  border-color: transparent;
}

.dark .ak-feature-sub {
  color: #cbd5e1;
}

.dark .ak-feature-list {
  color: #e2e8f0;
}

.dark .ak-bullet {
  color: #facc15; /* gold accent */
}

.dark .ak-accent {
  color: #facc15;
}

.dark .ak-feature-grid {
  opacity: 0.12;
}


/* ================================
   HELP & FAQ (Light + Dark)
================================ */

.ak-helpfaq {
  background: #eef4f0;
  color: #0f172a;
  position: relative;
}

.ak-helpfaq-top-accent {
  position: absolute;
  left: 0; right: 0; top: -2rem;
  height: 2rem;
  background: linear-gradient(to bottom, rgba(209, 250, 229, 0.75), transparent);
}

.ak-helpfaq-sub { color: #334155; }

.ak-helpfaq-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
}

.ak-helpfaq-icon { background: #3D9970; }

.ak-helpfaq-kicker { color: #64748b; }

.ak-helpfaq-card-title {
  font-weight: 600;         /* less “heavy bold” */
  color: #0f172a;
}

.ak-helpfaq-body { color: #334155; }

.ak-helpfaq-muted { color: #64748b; }

.ak-helpfaq-divider {
  border: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
}

.ak-helpfaq-bullet { color: #334155; }
.ak-helpfaq-bullet-ic { color: #16a34a; }

/* FAQ container */
.ak-faq {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
  overflow: hidden;
}

/* Fix the “divider line” issue cleanly:
   We remove divide-y and instead use item borders with controlled inset. */
.ak-faq-item {
  border-top: 1px solid rgba(15, 23, 42, 0.10);
}
.ak-faq-item:first-child { border-top: 0; }

.ak-faq-q {
  padding: 1.5rem;
}

.ak-faq-h {
  font-weight: 600;      /* cleaner than bold */
  color: #0f172a;
}

.ak-faq-chev { color: #64748b; }

.ak-faq-a {
  padding: 0 1.5rem 1.5rem 1.5rem;
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Bottom “View all” row */
.ak-faq-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(15, 23, 42, 0.02);
}

.ak-faq-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #0f766e;
  font-weight: 600;
}
.ak-faq-all:hover { text-decoration: underline; }

/* ================================
   Dark mode
================================ */

.dark .ak-helpfaq {
  background: #07110d; /* deep, calm green-black */
  color: #e2e8f0;
}

.dark .ak-helpfaq-top-accent {
  background: linear-gradient(to bottom, rgba(16, 185, 129, 0.18), transparent);
}

.dark .ak-helpfaq-sub { color: #cbd5e1; }

.dark .ak-helpfaq-card {
  background: #050b08;
  border-color: rgba(148, 163, 184, 0.22);
}

.dark .ak-helpfaq-kicker { color: #94a3b8; }
.dark .ak-helpfaq-card-title { color: #e2e8f0; }
.dark .ak-helpfaq-body { color: #cbd5e1; }
.dark .ak-helpfaq-muted { color: #94a3b8; }

.dark .ak-helpfaq-divider {
  border-top-color: rgba(148, 163, 184, 0.22);
}

.dark .ak-helpfaq-bullet { color: #cbd5e1; }
.dark .ak-helpfaq-bullet-ic { color: #34d399; }

.dark .ak-faq {
  background: #050b08;
  border-color: rgba(148, 163, 184, 0.22);
}

.dark .ak-faq-item {
  border-top-color: rgba(148, 163, 184, 0.22);
}

.dark .ak-faq-h { color: #e2e8f0; }
.dark .ak-faq-chev { color: #94a3b8; }
.dark .ak-faq-a { color: #cbd5e1; }

.dark .ak-faq-footer {
  border-top-color: rgba(148, 163, 184, 0.22);
  background: rgba(148, 163, 184, 0.06);
}

.dark .ak-faq-all { color: #34d399; color: #ddb40e; }


/* =========================
   BLOCKCHAIN (Feature Surface)
========================= */

.ak-feature-surface{
  position: relative;
  /* Light mode: stays "light", but distinct */
  background:
    radial-gradient(900px 500px at 18% 8%, rgba(61,153,112,.10), rgba(255,255,255,0) 60%),
    radial-gradient(700px 420px at 86% 25%, rgba(44,62,80,.06), rgba(255,255,255,0) 65%),
    linear-gradient(180deg, #fbfcfb 0%, #f4f8f5 100%);
}

.ak-feature-grid{
  /* subtle grid without SVG */
  background-image:
    linear-gradient(to right, rgba(44,62,80,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(44,62,80,.06) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: .55;
  mask-image: radial-gradient(70% 55% at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: radial-gradient(70% 55% at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,0));
}

.ak-feature-title{ color:#0b1220; }
.ak-feature-sub{ color: rgba(11,18,32,.78); }

.ak-accent{ color:#1f8f66; } /* adjust to your brand emerald if needed */

.ak-feature-list{
  color: rgba(11,18,32,.78);
}

.ak-bullet{
  display:inline-block;
  width: 1.25rem;
  color: rgba(31,143,102,.95);
}

/* Dark mode */
.dark .ak-feature-surface{
  background:
    radial-gradient(950px 520px at 18% 10%, rgba(61,153,112,.22), rgba(0,0,0,0) 58%),
    radial-gradient(760px 460px at 86% 30%, rgba(241,196,15,.08), rgba(0,0,0,0) 65%),
    linear-gradient(180deg, #081512 0%, #07131a 100%);
}

.dark .ak-feature-grid{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  opacity: .14;
  mask-image: radial-gradient(72% 58% at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: radial-gradient(72% 58% at 50% 35%, rgba(0,0,0,1), rgba(0,0,0,0));
}

.dark .ak-feature-title{ color: rgba(255,255,255,.96); }
.dark .ak-feature-sub{ color: rgba(255,255,255,.72); }
.dark .ak-feature-list{ color: rgba(255,255,255,.74); }
.dark .ak-accent{ color:#F1C40F; } /* gold on dark looks premium */
.dark .ak-bullet{ color: rgba(241,196,15,.92); }


/* =========================
   HELP/FAQ Divider (Top Accent)
========================= */

.ak-helpfaq{
  /* your base can stay Tailwind-driven; this just ensures consistency */
  background: #eef4f0;
  background: #e1f0ea;
}

.dark .ak-helpfaq{
  background: #071512;
}

/* Light mode: softer, less “neon” */
.ak-helpfaq-top-accent{
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  height: 70px;
  pointer-events: none;

  background:
    radial-gradient(1100px 70px at 50% 45px, rgba(61,153,112,.18), rgba(61,153,112,0) 65%),
    linear-gradient(180deg, rgba(61,153,112,.10), rgba(61,153,112,0));

  filter: blur(2px);
  opacity: .75;
}

/* Dark mode: keep the dramatic band you like */
.dark .ak-helpfaq-top-accent{
  top: -22px;
  height: 72px;

  background:
    radial-gradient(1100px 80px at 50% 40px, rgba(61,153,112,.42), rgba(61,153,112,0) 62%),
    radial-gradient(900px 60px at 50% 55px, rgba(241,196,15,.12), rgba(241,196,15,0) 70%),
    linear-gradient(180deg, rgba(7,21,18,0), rgba(7,21,18,1));

  filter: blur(1px);
  opacity: 1;
}
/* =========================
   BLOCKCHAIN: stronger grid
========================= */

.ak-feature-surface{
  position: relative;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(61,153,112,.12), rgba(255,255,255,0) 60%),
    radial-gradient(700px 460px at 86% 22%, rgba(241,196,15,.08), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #fbfcfb 0%, #f1f6f3 100%);
}

.ak-feature-grid{
  background-image:
    linear-gradient(to right, rgba(44,62,80,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(44,62,80,.12) 1px, transparent 1px);
  background-size: 28px 28px;          /* smaller cells = more visible grid */
  opacity: .75;                        /* stronger */
  mask-image: radial-gradient(75% 55% at 50% 30%, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: radial-gradient(75% 55% at 50% 30%, rgba(0,0,0,1), rgba(0,0,0,0));
}

.ak-feature-sub{ color: rgba(11,18,32,.78); }
.ak-feature-list{ color: rgba(11,18,32,.78); }
.ak-accent{ color: #1f8f66; }
.ak-bullet{ display:inline-block; width:1.25rem; color: rgba(31,143,102,.95); }

/* Dark mode */
.dark .ak-feature-surface{
  background:
    radial-gradient(900px 560px at 18% 10%, rgba(61,153,112,.22), rgba(0,0,0,0) 58%),
    radial-gradient(760px 500px at 86% 26%, rgba(241,196,15,.10), rgba(0,0,0,0) 64%),
    linear-gradient(180deg, #081512 0%, #07131a 100%);
	
	background: 
	radial-gradient(900px 560px at 18% 10%, rgba(61,153,112,.22), rgba(0,0,0,0) 58%), radial-gradient(760px 500px at 86% 26%, rgba(241,196,15,.10), rgba(0,0,0,0) 64%), linear-gradient(180deg, #081512 0%, #030b08 100%);
}

.dark .ak-feature-grid{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .22; /* still subtle, but clearly visible on dark */
  mask-image: radial-gradient(78% 58% at 50% 30%, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: radial-gradient(78% 58% at 50% 30%, rgba(0,0,0,1), rgba(0,0,0,0));
}

.dark .ak-feature-sub{ color: rgba(255,255,255,.72); }
.dark .ak-feature-list{ color: rgba(255,255,255,.74); }
.dark .ak-accent{ color:#F1C40F; }
.dark .ak-bullet{ color: rgba(241,196,15,.92); }


/* =========================
   NEW END-TO-END DIVIDER
   (clean + intentional)
========================= */

.ak-section-divider{
  width: 100%;
  height: 18px;
  position: relative;
  overflow: hidden;

  /* Light mode: crisp band with soft inner highlight */
  background:
    linear-gradient(90deg,
      rgba(61,153,112,0) 0%,
      rgba(61,153,112,.22) 18%,
      rgba(241,196,15,.18) 50%,
      rgba(61,153,112,.22) 82%,
      rgba(61,153,112,0) 100%
    ),
    linear-gradient(180deg, rgba(44,62,80,.10), rgba(44,62,80,0));
}

.ak-section-divider::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.22) 0px,
      rgba(255,255,255,.22) 10px,
      rgba(255,255,255,0) 10px,
      rgba(255,255,255,0) 22px
    );
  opacity: .28; /* subtle texture */
  mix-blend-mode: overlay;
}

/* Dark mode: cinematic, but still a "line", not a glow cloud */
.dark .ak-section-divider{
  height: 20px;
  background:
    linear-gradient(90deg,
      rgba(61,153,112,0) 0%,
      rgba(61,153,112,.30) 18%,
      rgba(241,196,15,.20) 50%,
      rgba(61,153,112,.30) 82%,
      rgba(61,153,112,0) 100%
    ),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}

.dark .ak-section-divider::after{
  opacity: .18;
}

/* =========================
   Akuno Footer (Light/Dark)
   ========================= */

.ak-footer {
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  margin-top: 0;
}

.ak-footer-brand {
  font-weight: 600;
  color: #0f172a;
}

.ak-footer-muted {
  color: #475569;
}

.ak-footer-heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
}

.ak-footer-link {
  color: #475569;
  text-decoration: none;
  transition: color .15s ease;
}

.ak-footer-link:hover {
  color: #0f172a;
}

.ak-footer-social {
  color: #64748b;
  transition: color .15s ease, transform .15s ease;
}

.ak-footer-social:hover {
  color: #0f172a;
  transform: translateY(-1px);
}

.ak-footer-topline {
  border-top: 1px solid #e5e7eb;
}

.ak-footer-fine {
  color: #64748b;
}

.ak-footer-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
}

.ak-footer-dot {
  width: .375rem;
  height: .375rem;
  border-radius: 999px;
}

.ak-footer-sep {
  color: #cbd5e1;
}

/* Dark mode: relies on your existing pattern of adding `.dark` to <html> */
.dark .ak-footer {
  background: #02110e;          /* slate-950 vibe */
  border-top: 1px solid rgba(255,255,255,.10);
}

.dark .ak-footer-brand,
.dark .ak-footer-heading {
  color: rgba(255,255,255,.92);
}

.dark .ak-footer-muted,
.dark .ak-footer-link,
.dark .ak-footer-fine {
  color: rgba(255,255,255,.68);
}

.dark .ak-footer-link:hover {
  color: rgba(255,255,255,.92);
}

.dark .ak-footer-social {
  color: rgba(255,255,255,.60);
}

.dark .ak-footer-social:hover {
  color: rgba(255,255,255,.92);
}

.dark .ak-footer-topline {
  border-top: 1px solid rgba(255,255,255,.10);
}

.dark .ak-footer-chip {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
}

.dark .ak-footer-sep {
  color: rgba(255,255,255,.20);
}


/* =========================
   Akuno Subpages (MOST RECENT CLEAN VERSION)
   - Header surface (sleek + light/dark)
   - Body surface (no blue/purple in dark)
   - Sidebar “How every circle works” card (premium glass)
   ========================= */

/* Brand tokens (scoped to header so we can use var(--ak-gold) etc.) */
.ak-subpage-header{
  --ak-green: #3D9970;
  --ak-gold:  #F1C40F;

  position: relative;
  overflow: hidden;

  /* LIGHT MODE: clean, slightly contrasty */
  background: #e9ece6;
}

/* Visible grid (softened via mask) */
.ak-subpage-header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  opacity:.36;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.12) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(78% 85% at 50% 20%, #000 52%, transparent 82%);
}

/* Subtle bottom divider bar for separation */
.ak-subpage-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 3px;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(61,153,112,.00),
    rgba(61,153,112,.25),
    rgba(241,196,15,.18),
    rgba(61,153,112,.25),
    rgba(61,153,112,.00)
  );
  opacity: .85;
}

/* Optional inner wrapper (if you’re using it in Blade) */
.ak-subpage-header__inner{
  position: relative;
  z-index: 1;
}

/* DARK MODE header */
.dark .ak-subpage-header{
  background:
    radial-gradient(1000px 340px at 12% 0%, rgba(61,153,112,.26), transparent 58%),
    radial-gradient(760px 300px at 86% 18%, rgba(241,196,15,0), transparent 54%),
    linear-gradient(to bottom, #04110c, #050b08);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.dark .ak-subpage-header::before{
  opacity: .28;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(78% 85% at 50% 20%, #000 52%, transparent 82%);
}

.dark .ak-subpage-header::after{
  opacity: .55;
}

/* Typography + breadcrumbs */
.ak-subpage-title{ color:#0f172a; }
.ak-subpage-breadcrumbs{ color: rgba(15,23,42,.74); }

.ak-subpage-crumblink{
  color: rgba(15,23,42,.74);
  text-decoration: none;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.ak-subpage-crumblink:hover{
  color:#3d9970;
}

.ak-subpage-crumbsep{ color: rgba(15,23,42,.35); }

/* Current breadcrumb (light) */
.ak-subpage-crumbcurrent{
  color: #3d9970;
  font-weight: 600;
}

.ak-subpage-lead{
  color: rgba(15,23,42,.72);
  max-width: 64ch;
  line-height: 1.6;
}

/* Dark mode text */
.dark .ak-subpage-title{ color: rgba(255,255,255,.96); }
.dark .ak-subpage-breadcrumbs,
.dark .ak-subpage-lead{ color: rgba(255,255,255,.72); }

.dark .ak-subpage-crumblink{ color: rgba(255,255,255,.72); }
.dark .ak-subpage-crumblink:hover{
  color: rgba(255,255,255,.96);
  text-decoration-color: rgba(241,196,15,.85);
}

.dark .ak-subpage-crumbsep{ color: rgba(255,255,255,.26); }

/* Current breadcrumb (dark) */
.dark .ak-subpage-crumbcurrent{
  color: var(--ak-gold);
}

/* =========================
   Subpage Body Surface (NO blue/purple in dark mode)
   ========================= */

.ak-subpage-body{
  position: relative;
  overflow: hidden;
  background: #f4f5f5;
/*
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(61,153,112,.12), transparent 60%),
    radial-gradient(700px 440px at 85% 10%, rgba(241,196,15,.10), transparent 55%),
    linear-gradient(to bottom, #f7fbf9, #f2f7f4);
	*/
}

.ak-subpage-body::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  opacity: .16;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(78% 70% at 50% 10%, #000 55%, transparent 85%);
}

.dark .ak-subpage-body{
  background:
    radial-gradient(1100px 680px at 18% -10%, rgba(61,153,112,.16), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(241,196,15,.08), transparent 55%),
    linear-gradient(to bottom, #050b08, #040705);
}

.dark .ak-subpage-body::before{
  opacity: .12;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(78% 70% at 50% 10%, #000 55%, transparent 85%);
}

/* =========================
   Left “How every circle works” card
   ========================= */

.ak-subpage-card{
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 10px 30px rgba(15,23,42,.06),
    0 1px 0 rgba(255,255,255,.6) inset;
}

.ak-subpage-card-head{
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.ak-subpage-card-title{ color:#0f172a; }
.ak-subpage-card-sub{ color: rgba(15,23,42,.72); }

.ak-subpage-text-strong{ color:#0f172a; }
.ak-subpage-text{ color: rgba(15,23,42,.72); }

.ak-subpage-pill{
  background: rgba(61,153,112,.10);
  border: 1px solid rgba(61,153,112,.18);
  color: #2f7e5f;
}

.ak-subpage-link{
  color: #2f7e5f;
  text-decoration: none;
}
.ak-subpage-link:hover{
  text-decoration: underline;
  text-decoration-color: rgba(241,196,15,.65);
}

/* Dark card = premium glass on green-black */
.dark .ak-subpage-card{
  background: rgba(7, 14, 10, .72);
  background: rgb(3, 31, 20);
  background: rgb(8, 36, 25);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 48px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.06) inset;
}

.dark .ak-subpage-card-head{
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.dark .ak-subpage-card-title{ color: rgba(255,255,255,.94); }
.dark .ak-subpage-card-sub{ color: rgba(255,255,255,.68); }

.dark .ak-subpage-text-strong{ color: rgba(255,255,255,.92); }
.dark .ak-subpage-text{ color: rgba(255,255,255,.70); }

.dark .ak-subpage-pill{
  background: rgba(61,153,112,.14);
  border: 1px solid rgba(61,153,112,.22);
  color: rgba(255,255,255,.86);
}

.dark .ak-subpage-link{
  color: #F1C40F;
}
.dark .ak-subpage-link:hover{
  text-decoration-color: rgba(241,196,15,.9);
}

/* Subpage right-side heading text (does not touch circle cards) */
.ak-subpage-h2{ color:#0f172a; }
.ak-subpage-sub{ color: rgba(15,23,42,.72); }
.dark .ak-subpage-h2{ color: rgba(255,255,255,.96); }
.dark .ak-subpage-sub{ color: rgba(255,255,255,.72); }



/* =========================
   Circle Show (clean, simple, premium)
   ========================= */

.ak-circle-show__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}

.ak-circle-show__fee{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
}

.ak-circle-show__feeValue{
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,.95);
}
.ak-circle-show__feeUnit{
  font-size: .85rem;
  font-weight: 700;
  color: rgba(15,23,42,.70);
}
.ak-circle-show__network{
  font-size: .85rem;
  color: rgba(15,23,42,.60);
}

.dark .ak-circle-show__feeValue{ color: rgba(255,255,255,.96); }
.dark .ak-circle-show__feeUnit{ color: rgba(255,255,255,.72); }
.dark .ak-circle-show__network{ color: rgba(255,255,255,.62); }

/* Tiny system bits */
.ak-mini-muted{
  font-size: 12px;
  color: rgba(15,23,42,.60);
}
.dark .ak-mini-muted{
  color: rgba(255,255,255,.62);
}

.ak-divider{
  height:1px;
  background: rgba(15,23,42,.08);
}
.dark .ak-divider{
  background: rgba(255,255,255,.10);
}

/* Status chip */
.ak-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(15,23,42,.78);
}
.ak-chip__strong{ font-weight: 800; }

.ak-chip--open{
  border-color: rgba(61,153,112,.22);
}
.ak-chip--closed{
  border-color: rgba(241,196,15,.22);
}

.dark .ak-chip{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7, 14, 10, .60);
  color: rgba(255,255,255,.72);
}

.ak-dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(241,196,15,.85);
}
.ak-dot--pulse{
  background: #3D9970;
  box-shadow: 0 0 0 0 rgba(61,153,112,.35);
  animation: akPulse 1.4s ease-in-out infinite;
}
@keyframes akPulse{
  0%   { box-shadow: 0 0 0 0 rgba(61,153,112,.35); }
  70%  { box-shadow: 0 0 0 10px rgba(61,153,112,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,153,112,0); }
}

/* Primary panel (Send entry) */
.ak-panel{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 18px 55px rgba(15,23,42,.08),
    0 1px 0 rgba(255,255,255,.65) inset;
}

.dark .ak-panel{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7, 14, 10, .74);
  background: rgb(1, 27, 17);
  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06) inset;
}

.ak-panel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.dark .ak-panel__head{
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.ak-panel__title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(15,23,42,.95);
}
.ak-panel__sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(15,23,42,.68);
}

.dark .ak-panel__title{ color: rgba(255,255,255,.94); }
.dark .ak-panel__sub{ color: rgba(255,255,255,.70); }

.ak-panel__body{
  padding: 18px 20px 22px;
}

/* badge */
.ak-badge{
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
}
.ak-badge--open{
  background: rgba(61,153,112,.12);
  color: rgba(15,23,42,.85);
  border-color: rgba(61,153,112,.18);
}
.ak-badge--closed{
  background: rgba(241,196,15,.14);
  color: rgba(15,23,42,.85);
  border-color: rgba(241,196,15,.22);
}
.dark .ak-badge{
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.80);
}
.dark .ak-badge--open{
  background: rgba(61,153,112,.18);
  border-color: rgba(61,153,112,.22);
}
.dark .ak-badge--closed{
  background: rgba(241,196,15,.16);
  border-color: rgba(241,196,15,.22);
}

/* callout */
.ak-callout{
  border: 1px solid rgba(241,196,15,.20);
  background: rgba(241,196,15,.10);
  padding: 12px 12px;
  border-radius: 14px;
  font-size: 13px;
  color: rgba(15,23,42,.78);
}
.dark .ak-callout{
  border-color: rgba(241,196,15,.18);
  background: rgba(241,196,15,.08);
  color: rgba(255,255,255,.72);
  border-color: rgba(241, 196, 15, 0.59);
  background: rgba(228, 166, 21, 0.08);
}

/* fields */
.ak-fieldlabel{
  display:block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(15,23,42,.65);
  margin-bottom: 8px;
}
.dark .ak-fieldlabel{
  color: rgba(255,255,255,.68);
}

.ak-copyrow{
  display:flex;
  align-items:stretch;
}

.ak-address{
  flex:1;
  text-align:left;
  padding: 10px 12px;
  border-radius: 14px 0 0 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15, 42, 37, 0.96);
  color: rgba(236,253,245,.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  word-break: break-all;
}

.dark .ak-address{
  border-color: rgba(255,255,255,.12);
  background: rgba(0,0,0,.55);
  color: rgba(236,253,245,.92);
}

.ak-copybtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 46px;
  border-radius: 0 14px 14px 0;
  border: 1px solid rgba(15,23,42,.10);
  border-left: none;
  background: rgba(10, 29, 26, 0.96);
  color: rgba(255,255,255,.92);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ak-copybtn:hover{
  transform: translateY(-1px);
}
.ak-copybtn--ok{
  box-shadow: 0 0 0 3px rgba(61,153,112,.28);
}

.dark .ak-copybtn{
  border-color: rgba(255,255,255,.12);
  background: rgba(0,0,0,.60);
}

/* QR box */
.ak-qrbox{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.80);
  border-radius: 16px;
  padding: 24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dark .ak-qrbox{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

/* disclosure */
.ak-disclosure{
  border-radius: 14px;
}
.ak-disclosure__summary{
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight: 700;
  color: rgba(15,23,42,.86);
  list-style:none;
}
.ak-disclosure__summary::-webkit-details-marker{ display:none; }
.ak-disclosure__hint{
  font-size: 12px;
  font-weight: 600;
  color: rgba(15,23,42,.55);
}
.dark .ak-disclosure__summary{ color: rgba(255,255,255,.90); }
.dark .ak-disclosure__hint{ color: rgba(255,255,255,.58); }

/* steps */
.ak-steps{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.ak-step{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.ak-step__icon{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  flex: 0 0 auto;
}

/* auth card */
.ak-authcard{
  padding: 4px 0;
}
.ak-authcard__title{
  font-size: 15px;
  font-weight: 800;
  color: rgba(15,23,42,.92);
}
.ak-authcard__sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(15,23,42,.70);
}
.dark .ak-authcard__title{ color: rgba(255,255,255,.94); }
.dark .ak-authcard__sub{ color: rgba(255,255,255,.70); }

/* tracking chips */
.ak-pillchip{
  position: relative;
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  overflow:hidden;
}
.dark .ak-pillchip{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.ak-pillchip__btn{
  padding: 7px 12px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  color: rgba(15,23,42,.82);
}
.dark .ak-pillchip__btn{ color: rgba(255,255,255,.78); }

.ak-pillchip__x{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  display:flex;
  align-items:center;
}
.ak-pillchip__remove{
  width: 30px;
  height: 100%;
  font-weight: 900;
  color: rgba(15,23,42,.70);
  background: rgba(15,23,42,.06);
}
.ak-pillchip__remove:hover{
  background: rgba(15,23,42,.10);
}
.dark .ak-pillchip__remove{
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.06);
}
.dark .ak-pillchip__remove:hover{
  background: rgba(255,255,255,.10);
}

/* inputs */
.ak-input{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 13px;
  background: rgba(255,255,255,.85);
  color: rgba(15,23,42,.86);
}
.ak-input:focus{
  outline:none;
  box-shadow: 0 0 0 3px rgba(61,153,112,.22);
  border-color: rgba(61,153,112,.35);
}
.dark .ak-input{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.84);
}

/* flash + warn */
.ak-flash{
  margin-bottom: 12px;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid rgba(61,153,112,.22);
  background: rgba(61,153,112,.10);
  color: rgba(15,23,42,.85);
}
.dark .ak-flash{
  border-color: rgba(61,153,112,.20);
  background: rgba(61,153,112,.10);
  color: rgba(255,255,255,.78);
}

.ak-warn{
  font-size: 12px;
  color: rgba(190,24,93,.92);
}
.dark .ak-warn{
  color: rgba(241,196,15,.92);
}

/* =========================
   Circle Show – top fee/status bar
   ========================= */

.ak-circle-show__topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 16px 18px;
  border-radius: 18px;

  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 44px rgba(15,23,42,.07);
}

.dark .ak-circle-show__topbar{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7, 14, 10, .70);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

.ak-circle-show__bigfee{
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.95);
  line-height: 1.1;
}
.ak-circle-show__bigfee span{
  font-size: .95rem;
  font-weight: 800;
  color: rgba(15,23,42,.70);
  margin-left: 6px;
}
.ak-circle-show__netline{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(15,23,42,.62);
}

.dark .ak-circle-show__bigfee{ color: rgba(255,255,255,.96); }
.dark .ak-circle-show__bigfee span{ color: rgba(255,255,255,.72); }
.dark .ak-circle-show__netline{ color: rgba(255,255,255,.64); }

/* make it stack nicely on small screens */
@media (max-width: 640px){
  .ak-circle-show__topbar{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================
   Address size tweak (more readable)
   ========================= */

.ak-address{
  font-size: 18px; /* was 13px */
  line-height: 1.35;
}

/* =========================
   Links: normal underline colour (no custom underline colour)
   ========================= */

.ak-subpage-link{
  text-decoration: none;
}
.ak-subpage-link:hover{
  text-decoration: underline;
}

/* remove any custom underline colour if it exists elsewhere */
.ak-subpage-link:hover{
  text-decoration-color: currentColor;
}


/* =========================
   Announcements (subpage) — light/dark parity
   Keeps homepage look, but makes it work anywhere
   ========================= */

.ak-tabs{
  display:inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ak-tab{
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  color: rgba(15,23,42,.78);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.ak-tab:hover{
  background: rgba(15,23,42,.04);
}

.ak-tab.is-active{
  background: #3D9970;
  color: #fff;
  box-shadow: 0 8px 18px rgba(61,153,112,.35);
}

.dark .ak-tabs{
  background: rgba(7, 14, 10, .66);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

.dark .ak-tab{
  color: rgba(255,255,255,.72);
}

.dark .ak-tab:hover{
  background: rgba(255,255,255,.06);
}

.dark .ak-tab.is-active{
  background: #3D9970;
  color: #fff;
}

/* Table wrap: keep it premium and readable in dark */
.ak-table-wrap{
  border-radius: 18px;
  overflow: auto;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

.ak-table{
  width: 100%;
  font-size: 14px;
}

.ak-table thead th{
  background: rgba(15,23,42,.03);
  color: rgba(15,23,42,.72);
  font-weight: 800;
  padding: 14px 14px;
  white-space: nowrap;
}

.ak-table tbody td{
  padding: 14px 14px;
  color: rgba(15,23,42,.86);
}

.ak-table tbody tr:hover{
  background: rgba(15,23,42,.03);
}

.ak-table-strong{
  color: rgba(15,23,42,.92);
}

/* Circle chip (emoji pill) */
.ak-circle-chip{
  height: 38px;
  width: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(61,153,112,.10);
  border: 1px solid rgba(61,153,112,.18);
}

.ak-circle-chip img {
	border-radius: 14px;
	height: 38px;
	width: 38px;
	border: 2px solid rgb(205, 226, 216);
}

/* Dark mode table */
.dark .ak-table-wrap{
  background: rgba(7, 14, 10, .72);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

.dark .ak-table thead th{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.72);
}

.dark .ak-table tbody td{
  color: rgba(255,255,255,.82);
}

.dark .ak-table tbody tr:hover{
  background: rgba(255,255,255,.05);
}

.dark .ak-table-strong{
  color: rgba(255,255,255,.92);
}

.dark .ak-circle-chip{
  background: rgba(61,153,112,.14);
  border: 1px solid rgba(61,153,112,.22);
}

/* Empty panel (used on homepage too) */
.ak-panel-empty{
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.78);
}

.dark .ak-panel-empty{
  background: rgba(7, 14, 10, .72);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);
}

/* Update cards */
.ak-update-card{
  border-radius: 18px;
  padding: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

.ak-update-date{ color: rgba(15,23,42,.55); }
.ak-update-title{ color: rgba(15,23,42,.92); }
.ak-update-desc{ color: rgba(15,23,42,.72); line-height: 1.6; }

.dark .ak-update-card{
  background: rgba(7, 14, 10, .72);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

.dark .ak-update-date{ color: rgba(255,255,255,.60); }
.dark .ak-update-title{ color: rgba(255,255,255,.94); }
.dark .ak-update-desc{ color: rgba(255,255,255,.72); }

/* Links: keep underline colour consistent (no funky underline tint) */
.ak-link{
  color: #2f7e5f;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}

.ak-link:hover{
  color: #3D9970;
  text-decoration-color: currentColor;
}

.dark .ak-link{
  color: #F1C40F;
  text-decoration-color: currentColor;
}

.dark .ak-link:hover{
  color: #F1C40F;
  opacity: .92;
}

/* Pagination wrapper */
.ak-pagination .pagination{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
}

.ak-pagination .pagination > *{
  border-radius: 12px;
}

/* =========================
   Announcement details page
   ========================= */

.ak-announce-top{
  position: relative;
}

.ak-announce-chip{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(61,153,112,.12);
  border: 1px solid rgba(61,153,112,.18);
  font-size: 18px;
}

.dark .ak-announce-chip{
  background: rgba(61,153,112,.16);
  border-color: rgba(61,153,112,.22);
}

.ak-announce-title{
  color: #0f172a;
}
.dark .ak-announce-title{
  color: rgba(255,255,255,.96);
}

.ak-announce-meta{
  color: rgba(15,23,42,.70);
}
.dark .ak-announce-meta{
  color: rgba(255,255,255,.72);
}

.ak-announce-stat{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  border-radius: 14px;
  padding: 10px 12px;
}

.dark .ak-announce-stat{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.ak-announce-stat-k{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,.60);
}

.dark .ak-announce-stat-k{
  color: rgba(255,255,255,.62);
}

.ak-announce-stat-v{
  margin-top: 4px;
  font-weight: 800;
  color: rgba(15,23,42,.92);
}

.dark .ak-announce-stat-v{
  color: rgba(255,255,255,.92);
}

.ak-announce-unit{
  font-size: 12px;
  font-weight: 700;
  opacity: .8;
}

/* Card heads */
.ak-announce-cardhead{
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.dark .ak-announce-cardhead{
  border-bottom-color: rgba(255,255,255,.10);
}

.ak-announce-muted{
  color: rgba(15,23,42,.66);
}
.dark .ak-announce-muted{
  color: rgba(255,255,255,.66);
}

/* Summary dl */
.ak-announce-dl{
  display: grid;
  gap: 10px;
}

.ak-announce-dl > div{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px dashed rgba(15,23,42,.12);
  padding-bottom: 10px;
}

.ak-announce-dl > div:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.ak-announce-dl dt{
  font-size: 13px;
  color: rgba(15,23,42,.70);
}
.ak-announce-dl dd{
  font-weight: 800;
  color: rgba(15,23,42,.92);
}

.dark .ak-announce-dl > div{
  border-bottom-color: rgba(255,255,255,.12);
}
.dark .ak-announce-dl dt{
  color: rgba(255,255,255,.70);
}
.dark .ak-announce-dl dd{
  color: rgba(255,255,255,.92);
}

/* Pills / buttons */
.ak-announce-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(61,153,112,.20);
  background: rgba(61,153,112,.10);
  color: rgba(15,23,42,.92);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.ak-announce-pill:hover{
  filter: brightness(0.98);
}

.dark .ak-announce-pill{
  border-color: rgba(61,153,112,.26);
  background: rgba(61,153,112,.14);
  color: rgba(255,255,255,.92);
}

/* Search row */
.ak-announce-search{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
}

@media (max-width: 640px){
  .ak-announce-search{
    grid-template-columns: 1fr;
  }
}

.ak-announce-input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.86);
  padding: 10px 12px;
  font-size: 13px;
  outline: none;
}

.ak-announce-input:focus{
  border-color: rgba(61,153,112,.45);
  box-shadow: 0 0 0 3px rgba(61,153,112,.16);
}

.dark .ak-announce-input{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
}

.dark .ak-announce-input::placeholder{
  color: rgba(255,255,255,.55);
}

.ak-announce-btn{
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid rgba(15,23,42,.12);
  background: #3D9970;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ak-announce-btn:hover{
  filter: brightness(0.98);
}

.ak-announce-btn--ghost{
  background: transparent;
  color: rgba(15,23,42,.88);
  border-color: rgba(15,23,42,.14);
}

.ak-announce-btn--ghost:hover{
  background: rgba(15,23,42,.04);
}

.dark .ak-announce-btn{
  border-color: rgba(255,255,255,.12);
}

.dark .ak-announce-btn--ghost{
  color: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.14);
}

.dark .ak-announce-btn--ghost:hover{
  background: rgba(255,255,255,.06);
}

/* Notes */
.ak-announce-note{
  border: 1px solid rgba(61,153,112,.20);
  background: rgba(61,153,112,.10);
  color: rgba(15,23,42,.90);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
}

.dark .ak-announce-note{
  border-color: rgba(61,153,112,.24);
  background: rgba(61,153,112,.14);
  color: rgba(255,255,255,.90);
}

.ak-announce-warn{
  border: 1px solid rgba(241,196,15,.26);
  background: rgba(241,196,15,.12);
  color: rgba(15,23,42,.92);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
}

.dark .ak-announce-warn{
  border-color: rgba(241,196,15,.22);
  background: rgba(241,196,15,.10);
  color: rgba(255,255,255,.90);
}

/* Links (normal underline colour, no special underline tint) */
.ak-announce-link{
  color: #2f7e5f;
  text-decoration: none;
}
.ak-announce-link:hover{
  text-decoration: underline;
}

.dark .ak-announce-link{
  color: rgba(241,196,15,.92);
}

/* Table */
.ak-announce-tablehead{
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.dark .ak-announce-tablehead{
  border-bottom-color: rgba(255,255,255,.10);
}

.ak-announce-badge{
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-left: 8px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.80);
}

.dark .ak-announce-badge{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
}

.ak-announce-tablewrap{
  overflow-x: auto;
}

.ak-announce-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.ak-announce-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  padding: 12px 14px;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.70);
}

.dark .ak-announce-table thead th{
  background: rgba(7,14,10,.72);
  border-bottom-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.70);
}

.ak-announce-table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  color: rgba(15,23,42,.88);
  vertical-align: top;
}

.dark .ak-announce-table tbody td{
  border-bottom-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
}

.ak-announce-table tbody tr:hover td{
  background: rgba(15,23,42,.03);
}
.dark .ak-announce-table tbody tr:hover td{
  background: rgba(255,255,255,.04);
}

/* Winner highlight */
.ak-announce-table tbody tr.is-winner td{
  background: rgba(61,153,112,.10);
}
.dark .ak-announce-table tbody tr.is-winner td{
  background: rgba(61,153,112,.12);
}

/* Winner tags */
.ak-announce-win{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: #3D9970;
  color: #fff;
  width: fit-content;
}

.ak-announce-pending{
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.80);
  width: fit-content;
}

.ak-announce-fail{
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(244,63,94,.24);
  background: rgba(244,63,94,.10);
  color: rgba(15,23,42,.88);
  width: fit-content;
}

.dark .ak-announce-pending{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.80);
}

.dark .ak-announce-fail{
  border-color: rgba(244,63,94,.22);
  background: rgba(244,63,94,.10);
  color: rgba(255,255,255,.88);
}

/* =========================
   Announcement details: table visibility + dropdown tools
   ========================= */

.ak-announce-jump{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
}

.dark .ak-announce-jump{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.ak-announce-jump__title{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(15,23,42,.72);
}

.dark .ak-announce-jump__title{
  color: rgba(255,255,255,.72);
}

.ak-announce-jump__meta{
  margin-top: 2px;
  font-size: 13px;
  color: rgba(15,23,42,.70);
}

.dark .ak-announce-jump__meta{
  color: rgba(255,255,255,.70);
}

.ak-announce-jump__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.88);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.ak-announce-jump__cta:hover{
  background: rgba(15,23,42,.06);
  text-decoration: underline;
}

.dark .ak-announce-jump__cta{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
}

.dark .ak-announce-jump__cta:hover{
  background: rgba(255,255,255,.08);
}

/* Mini summary in table head */
.ak-announce-mini{
  font-size: 13px;
  color: rgba(15,23,42,.70);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.dark .ak-announce-mini{
  color: rgba(255,255,255,.70);
}

/* Tools layout */
.ak-announce-tools__row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.ak-announce-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.ak-announce-field--grow{
  flex: 1 1 320px;
  min-width: 240px;
}

.ak-announce-field--actions{
  display:flex;
  flex-direction:row;
  gap:10px;
  align-items:flex-end;
}

.ak-announce-label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.70);
}

.dark .ak-announce-label{
  color: rgba(255,255,255,.70);
}

/* Dropdown */
.ak-announce-select{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.86);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  outline: none;
}

.ak-announce-select:focus{
  border-color: rgba(61,153,112,.45);
  box-shadow: 0 0 0 3px rgba(61,153,112,.16);
}

.dark .ak-announce-select{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
}
	
	
	/* Jump-to-table: make it look intentional (not bland) */
.ak-announce-jump{
  display:inline-flex;
  align-items:center;
  gap:.45rem;

  padding:.5rem .8rem;
  border-radius:999px;

  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);

  font-size:.875rem;
  font-weight:600;
  text-decoration:none;

  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.ak-announce-jump:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

.ak-announce-jump:focus{
  outline: none;
}

.ak-announce-jump:focus-visible{
  box-shadow: 0 0 0 3px rgba(61,153,112,.25);
}

/* Light mode: keep it crisp + consistent */
html:not(.dark) .ak-announce-jump{
  border-color: rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  color: rgba(15,23,42,.82);
}

html:not(.dark) .ak-announce-jump:hover{
  background: rgba(255,255,255,.95);
  border-color: rgba(15,23,42,.14);
}

/* =========================
   Akuno • Impact / Charity Pot
   Light + Dark mode
   ========================= */

.ak-impact-page{
  background: #f4f5f5;
}
.dark .ak-impact-page{
  background: #0b1411; /* deep green-black */
}

/* Cards */
.ak-impact-card{
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.dark .ak-impact-card{
  background: rgba(10, 20, 16, 0.72);
  border-color: rgba(255,255,255,0.10);
}

/* Balance hero card (subtle mint tint in light, deep tint in dark) */
.ak-impact-balance{
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.18);
}
.dark .ak-impact-balance{
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.18);
}

/* Typography tokens */
.ak-impact-title{
  color: #0f172a;
}
.dark .ak-impact-title{
  color: rgba(255,255,255,0.92);
}

.ak-impact-k{
  color: rgba(15, 23, 42, 0.90);
}
.dark .ak-impact-k{
  color: rgba(255,255,255,0.78);
}

.ak-impact-v{
  color: #0f172a;
}
.dark .ak-impact-v{
  color: rgba(255,255,255,0.95);
}

.ak-impact-body{
  color: rgba(15, 23, 42, 0.78);
}
.dark .ak-impact-body{
  color: rgba(255,255,255,0.78);
}

.ak-impact-muted{
  color: rgba(15, 23, 42, 0.62);
}
.dark .ak-impact-muted{
  color: rgba(255,255,255,0.62);
}

.ak-impact-strong{
  color: rgba(15, 23, 42, 0.92);
}
.dark .ak-impact-strong{
  color: rgba(255,255,255,0.90);
}

/* Links: no weird underline colour — keep it currentColor */
.ak-impact-link{
  color: #047857; /* emerald-700 */
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}
.ak-impact-link:hover{
  color: #065f46; /* emerald-800 */
}
.dark .ak-impact-link{
  color: rgba(52, 211, 153, 0.95);
}
.dark .ak-impact-link:hover{
  color: rgba(110, 231, 183, 0.98);
}

/* Code pill */
.ak-impact-code{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: rgba(15, 23, 42, 0.92);
}
.dark .ak-impact-code{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.86);
}

/* Small icon buttons (copy) */
.ak-impact-iconbtn{
  color: rgba(15, 23, 42, 0.60);
  transition: transform 120ms ease, color 120ms ease;
}
.ak-impact-iconbtn:hover{
  color: rgba(15, 23, 42, 0.88);
  transform: translateY(-1px);
}
.dark .ak-impact-iconbtn{
  color: rgba(255,255,255,0.60);
}
.dark .ak-impact-iconbtn:hover{
  color: rgba(255,255,255,0.88);
}

/* Visual feedback after copy */
.copy-btn.is-copied{
  color: #047857 !important;
}
.dark .copy-btn.is-copied{
  color: rgba(52, 211, 153, 0.95) !important;
}

/* Table cards */
.ak-impact-tablecard{
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.dark .ak-impact-tablecard{
  background: rgba(10, 20, 16, 0.72);
  border-color: rgba(255,255,255,0.10);
}

.ak-impact-tablehead{
  border-bottom: 1px solid #eef2f7;
  background: rgba(249, 250, 251, 0.9);
}
.dark .ak-impact-tablehead{
  border-bottom-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

.ak-impact-tablefoot{
  border-top: 1px solid #eef2f7;
  background: rgba(249, 250, 251, 0.9);
}
.dark .ak-impact-tablefoot{
  border-top-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

/* Tables */
.ak-impact-table thead{
  background: rgba(249, 250, 251, 0.9);
}
.ak-impact-table thead th{
  color: rgba(15, 23, 42, 0.72);
  font-weight: 600;
}
.dark .ak-impact-table thead{
  background: rgba(255,255,255,0.04);
}
.dark .ak-impact-table thead th{
  color: rgba(255,255,255,0.70);
}

.ak-impact-table tbody tr{
  border-top: 1px solid #eef2f7;
}
.dark .ak-impact-table tbody tr{
  border-top-color: rgba(255,255,255,0.08);
}

.ak-impact-table tbody tr:hover{
  background: rgba(15, 23, 42, 0.03);
}
.dark .ak-impact-table tbody tr:hover{
  background: rgba(255,255,255,0.03);
}

/* Form inputs */
.ak-impact-label{
  color: rgba(15, 23, 42, 0.72);
}
.dark .ak-impact-label{
  color: rgba(255,255,255,0.72);
}

.ak-impact-input{
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: rgba(15, 23, 42, 0.92);
  padding: 0.6rem 0.8rem;
  outline: none;
}
.ak-impact-input:focus{
  border-color: rgba(16, 185, 129, 0.65);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.dark .ak-impact-input{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.88);
}
.dark .ak-impact-input:focus{
  border-color: rgba(52, 211, 153, 0.70);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
}

/* Success toast */
.ak-impact-toast{
  background: rgba(16, 185, 129, 0.10);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.22);
}
.dark .ak-impact-toast{
  background: rgba(16, 185, 129, 0.10);
  color: rgba(255,255,255,0.88);
  border-color: rgba(16, 185, 129, 0.22);
}


/* =========================
   Akuno • Impact / Charity Pot
   Light + Dark mode (Akuno style)
   - Dark links: GOLD
   - Dark inputs: NOT white, strong contrast + visible caret
   - Copy icon: classic, subtle
   ========================= */

.ak-impact-page{
  background: #f4f5f5;
}
.dark .ak-impact-page{
  background: #0b1411;
}

/* Cards */
.ak-impact-card{
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.dark .ak-impact-card{
  background: rgba(10, 20, 16, 0.78);
  border-color: rgba(255,255,255,0.10);
}

/* Balance hero card */
.ak-impact-balance{
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.18);
}
.dark .ak-impact-balance{
  background: rgb(2, 61, 38);
  border-color: rgba(16, 185, 129, 0.18);
}

/* Typography */
.ak-impact-title{ color: #0f172a; }
.dark .ak-impact-title{ color: rgba(255,255,255,0.92); }

.ak-impact-k{ color: rgba(15, 23, 42, 0.88); }
.dark .ak-impact-k{ color: rgba(255,255,255,0.78); }

.ak-impact-v{ color: #0f172a; }
.dark .ak-impact-v{ color: rgba(255,255,255,0.95); }

.ak-impact-body{ color: rgba(15, 23, 42, 0.78); }
.dark .ak-impact-body{ color: rgba(255,255,255,0.78); }

.ak-impact-muted{ color: rgba(15, 23, 42, 0.62); }
.dark .ak-impact-muted{ color: rgba(255,255,255,0.62); }

.ak-impact-strong{ color: rgba(15, 23, 42, 0.92); }
.dark .ak-impact-strong{ color: rgba(255,255,255,0.90); }

/* LINKS
   Light: emerald
   Dark: gold (Akuno) */
.ak-impact-link{
  color: #047857;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}
.ak-impact-link:hover{
  color: #065f46;
}
.dark .ak-impact-link{
  color: #f1c40f; /* GOLD */
}
.dark .ak-impact-link:hover{
  color: rgba(241,196,15,0.90);
}

/* Code pill (address) */
.ak-impact-code{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: rgba(15, 23, 42, 0.92);
}
.dark .ak-impact-code{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.88);
}

/* Icon buttons (copy) – subtle, classic */
.ak-impact-iconbtn{
  color: rgba(15, 23, 42, 0.55);
  transition: transform 120ms ease, color 120ms ease, opacity 120ms ease;
  opacity: 0.9;
}
.ak-impact-iconbtn:hover{
  color: rgba(15, 23, 42, 0.90);
  transform: translateY(-1px);
  opacity: 1;
}
.dark .ak-impact-iconbtn{
  color: rgba(255,255,255,0.62);
}
.dark .ak-impact-iconbtn:hover{
  color: #f1c40f; /* gold highlight */
}

/* Copy feedback */
.copy-btn.is-copied{
  color: #047857 !important;
}
.dark .copy-btn.is-copied{
  color: #f1c40f !important;
}

/* Table cards */
.ak-impact-tablecard{
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.dark .ak-impact-tablecard{
  background: rgba(10, 20, 16, 0.78);
  border-color: rgba(255,255,255,0.10);
}

/* Table header/footer */
.ak-impact-tablehead{
  border-bottom: 1px solid #eef2f7;
  background: rgba(249, 250, 251, 0.95);
}
.dark .ak-impact-tablehead{
  border-bottom-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.ak-impact-tablefoot{
  border-top: 1px solid #eef2f7;
  background: rgba(249, 250, 251, 0.95);
}
.dark .ak-impact-tablefoot{
  border-top-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

/* Table */
.ak-impact-table thead{
  background: rgba(249, 250, 251, 0.95);
}
.ak-impact-table thead th{
  color: rgba(15, 23, 42, 0.72);
  font-weight: 600;
}
.dark .ak-impact-table thead{
  background: rgba(255,255,255,0.04);
}
.dark .ak-impact-table thead th{
  color: rgba(255,255,255,0.70);
}
.ak-impact-table tbody tr{
  border-top: 1px solid #eef2f7;
}
.dark .ak-impact-table tbody tr{
  border-top-color: rgba(255,255,255,0.08);
}
.ak-impact-table tbody tr:hover{
  background: rgba(15, 23, 42, 0.03);
}
.dark .ak-impact-table tbody tr:hover{
  background: rgba(255,255,255,0.03);
}

/* Form labels */
.ak-impact-label{
  color: rgba(15, 23, 42, 0.72);
}
.dark .ak-impact-label{
  color: rgba(255,255,255,0.72);
}

/* Inputs
   Light: standard
   Dark: dark glass, high contrast, visible caret/text/placeholder */
.ak-impact-input{
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: rgba(15, 23, 42, 0.92);
  padding: 0.6rem 0.8rem;
  outline: none;
}
.ak-impact-input::placeholder{
  color: rgba(15, 23, 42, 0.45);
}
.ak-impact-input:focus{
  border-color: rgba(16, 185, 129, 0.65);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.dark .ak-impact-input{
  background: rgba(255,255,255,0.06);      /* NOT white */
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.90);           /* visible text */
  caret-color: rgba(255,255,255,0.95);     /* visible cursor */
}
.dark .ak-impact-input::placeholder{
  color: rgba(255,255,255,0.45);
}
.dark .ak-impact-input:focus{
  border-color: rgba(241,196,15,0.55);     /* gold focus */
  box-shadow: 0 0 0 3px rgba(241,196,15,0.16);
}

/* Success toast */
.ak-impact-toast{
  background: rgba(16, 185, 129, 0.10);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.22);
}
.dark .ak-impact-toast{
  background: rgba(241,196,15,0.10);
  color: rgba(255,255,255,0.90);
  border-color: rgba(241,196,15,0.22);
}
/* =========================================================
   HARD OVERRIDES (beats Tailwind utilities on Impact page)
   Put this at the VERY END of app.css
   ========================================================= */

/* Dark mode form fields must NEVER render as white */
.dark .ak-impact-page input,
.dark .ak-impact-page textarea,
.dark .ak-impact-page select{
  background-color: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.92) !important;
  caret-color: rgba(255,255,255,0.95) !important;

  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: none !important;
}

/* Placeholder contrast */
.dark .ak-impact-page input::placeholder,
.dark .ak-impact-page textarea::placeholder{
  color: rgba(255,255,255,0.45) !important;
}

/* Focus state (gold, consistent with Akuno dark links) */
.dark .ak-impact-page input:focus,
.dark .ak-impact-page textarea:focus,
.dark .ak-impact-page select:focus{
  outline: none !important;
  border-color: rgba(241,196,15,0.60) !important;
  box-shadow: 0 0 0 3px rgba(241,196,15,0.16) !important;
}

/* If any field is disabled */
.dark .ak-impact-page input:disabled,
.dark .ak-impact-page textarea:disabled,
.dark .ak-impact-page select:disabled{
  opacity: 0.55 !important;
}

/* Make sure the cursor is visible even if some global reset interferes */
.dark .ak-impact-page *{
  caret-color: rgba(255,255,255,0.95);
}


/* Tiny “Copied” toast */
.ak-copy-toast{
  position: absolute;
  z-index: 9999;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
}

/* Light */
:root .ak-copy-toast{
  background: rgba(17,24,39,.92);
  color: #fff;
}

/* Dark */
.dark .ak-copy-toast{
  background: rgba(0,0,0,.72);
  color: #F1C40F; /* gold */
  border-color: rgba(241,196,15,.22);
}


/* ===== Impact Page: Toast (viewport anchored so it never gets clipped) ===== */
.ak-copy-toast{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 99999;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

.ak-copy-toast.is-show{
  opacity: 1;
  transform: translateY(0);
}

/* Light */
:root .ak-copy-toast{
  background: rgba(17,24,39,.92);
  color: #fff;
}

/* Dark: keep gold link vibe */
.dark .ak-copy-toast{
  background: rgba(0,0,0,.72);
  color: #F1C40F;
  border-color: rgba(241,196,15,.22);
}


/* Tooltip-style "Copied" near the clicked icon */
.ak-copy-tooltip{
  position: absolute;
  z-index: 99999;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  transform: translateY(-4px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  backdrop-filter: blur(6px);
}

/* little arrow */
.ak-copy-tooltip::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  transform: rotate(45deg);
  left: 50%;
  margin-left: -5px;
  top: -5px;
  border-radius: 2px;
}

.ak-copy-tooltip.is-show{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Light */
:root .ak-copy-tooltip{
  background: rgba(17,24,39,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
}
:root .ak-copy-tooltip::after{
  background: rgba(17,24,39,.92);
  border-left: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
}

/* Dark (gold copy feedback) */
.dark .ak-copy-tooltip{
  background: rgba(0,0,0,.72);
  color: #F1C40F;
  border: 1px solid rgba(241,196,15,.22);
}
.dark .ak-copy-tooltip::after{
  background: rgba(0,0,0,.72);
  border-left: 1px solid rgba(241,196,15,.22);
  border-top: 1px solid rgba(241,196,15,.22);
}


/* =========================
   ABOUT (Light + Dark)
========================= */

.ak-about-hero{
  background: #fdfdf9;
}

.dark .ak-about-hero{
  background: #081e13;
}

/* Soft surface like your other subpages */
.ak-about-surface{
  background: #e1f0ea;
}
.dark .ak-about-surface{
  background: #08140d;
}

/* Verify section slightly distinct */
.ak-about-verify{
  background: #ffffff;
}
.dark .ak-about-verify{
  background: #132b1d;
}

.ak-about-cta{
  background: #e1f0ea;
}
.dark .ak-about-cta{
  background: #030f0d;
}

.ak-about-h2{
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
}
.dark .ak-about-h2{
  color: #f3f4f6;
}

.ak-about-p{
  color: #374151;
  line-height: 1.65;
}
.dark .ak-about-p{
  color: rgba(243,244,246,.82);
}

/* Hero image wrapper */
.ak-about-heroimg{
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.08);
  background: rgba(16,185,129,.06);
}
.dark .ak-about-heroimg{
  border-color: rgba(241,196,15,.14);
  background: rgba(241,196,15,.06);
}

/* Floating chips on image */
.ak-about-floatchips{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}

.ak-chip{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  border: 1px solid rgba(17,24,39,.08);
  background: #fff;
  color: #111827;
}
.dark .ak-chip{
  background: rgba(255,255,255,.03);
  border-color: rgba(241,196,15,.16);
  color: rgba(243,244,246,.9);
}

.ak-dot{ width: 8px; height: 8px; border-radius: 999px; }
.ak-dot--emerald{ background: #10b981; }
.ak-dot--amber{ background: #f59e0b; }
.ak-dot--slate{ background: #64748b; }

.ak-chip--emerald{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.18); color: #065f46; }
.ak-chip--amber{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.18); color: #78350f; }
.ak-chip--slate{ background: rgba(100,116,139,.10); border-color: rgba(100,116,139,.18); color: #0f172a; }

.dark .ak-chip--emerald{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.22); color: rgba(236,253,245,.9); }
.dark .ak-chip--amber{ background: rgba(241,196,15,.12); border-color: rgba(241,196,15,.20); color: rgba(255,251,235,.92); }
.dark .ak-chip--slate{ background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.18); color: rgba(243,244,246,.9); }

/* Pills below hero */
.ak-pill{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(16,185,129,.08);
  color: #065f46;
}
.dark .ak-pill{
  border-color: rgba(241,196,15,.18);
  background: rgba(241,196,15,.08);
  color: #f1c40f;
}

.ak-pill--ok{
  background: rgba(16,185,129,.10);
  color: #065f46;
  border-color: rgba(16,185,129,.20);
}
.dark .ak-pill--ok{
  background: rgba(16,185,129,.10);
  color: rgba(236,253,245,.9);
  border-color: rgba(16,185,129,.22);
}

.ak-pill--link{
  background: rgba(0,0,0,.03);
  color: #0f766e;
  border-color: rgba(15,118,110,.20);
  text-decoration: none;
}
.ak-pill--link:hover{ text-decoration: underline; }
.dark .ak-pill--link{
  background: rgba(255,255,255,.03);
  color: #f1c40f;
  border-color: rgba(241,196,15,.22);
}

/* Feature cards */
.ak-about-card{
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(17,24,39,.10);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}
.dark .ak-about-card{
  background: rgba(255,255,255,.03);
  border-color: rgba(241,196,15,.14);
  box-shadow: none;
}

.ak-about-icon{
  height: 42px;
  width: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ak-about-icon--emerald{
  background: rgba(16,185,129,.14);
  color: #047857;
}
.ak-about-icon--amber{
  background: rgba(245,158,11,.16);
  color: #92400e;
}
.ak-about-icon--slate{
  background: rgba(100,116,139,.14);
  color: #0f172a;
}
.dark .ak-about-icon--emerald{ background: rgba(16,185,129,.16); color: rgba(236,253,245,.92); }
.dark .ak-about-icon--amber{ background: rgba(241,196,15,.16); color: #f1c40f; }
.dark .ak-about-icon--slate{ background: rgba(148,163,184,.16); color: rgba(243,244,246,.9); }

.ak-about-cardtitle{
  font-weight: 700;
  color: #111827;
  margin-bottom:6px;
}
.dark .ak-about-cardtitle{
  color: rgba(243,244,246,.95);
}
.ak-about-cardtext{
  color: #374151;
  font-size: .95rem;
  line-height: 1.55;
}
.dark .ak-about-cardtext{
  color: rgba(243,244,246,.80);
}

/* Verify panel + steps */
.ak-about-panel{
  border-radius: 1rem;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(16,185,129,.07);
  padding: 1.25rem;
}
.dark .ak-about-panel{
  border-color: rgba(241,196,15,.14);
  background: rgba(241,196,15,.07);
}

.ak-about-paneltitle{
  font-weight: 900;
  color: #111827;
}
.dark .ak-about-paneltitle{ color: rgba(243,244,246,.95); }

.ak-about-list{
  margin: 0;
  padding-left: 1.1rem;
  color: #374151;
}
.ak-about-list li{ margin: .5rem 0; }
.dark .ak-about-list{ color: rgba(243,244,246,.82); }

.ak-about-step{
  display: flex;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: 1rem;
  border: 1px solid rgba(17,24,39,.10);
  background: #ffffff;
}
.dark .ak-about-step{
  background: rgba(255,255,255,.03);
  border-color: rgba(241,196,15,.14);
}

.ak-about-stepnum{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(16,185,129,.14);
  color: #047857;
  flex-shrink: 0;
}
.dark .ak-about-stepnum{
  background: rgba(241,196,15,.16);
  color: #f1c40f;
}

.ak-about-steptitle{
  font-weight: 900;
  color: #111827;
}
.dark .ak-about-steptitle{ color: rgba(243,244,246,.95); }

.ak-about-steptext{
  color: #374151;
  font-size: .95rem;
  line-height: 1.55;
}
.dark .ak-about-steptext{
  color: rgba(243,244,246,.80);
}

.ak-about-stepfoot{
  font-size: .82rem;
  font-weight: 700;
  color: rgba(17,24,39,.70);
}
.dark .ak-about-stepfoot{
  color: rgba(243,244,246,.65);
}

/* Note */
.ak-about-note{
  border-radius: 1rem;
  border: 1px dashed rgba(17,24,39,.18);
  background: rgba(0,0,0,.02);
  padding: 1.2rem;
}
.dark .ak-about-note{
  border-color: rgba(241,196,15,.18);
  background: rgba(255,255,255,.03);
}

.ak-about-notetitle{
  font-weight: 900;
  color: #111827;
}
.dark .ak-about-notetitle{ color: rgba(243,244,246,.95); }

.ak-about-notetext{
  color: #374151;
  line-height: 1.6;
}
.dark .ak-about-notetext{ color: rgba(243,244,246,.80); }

/* Links (gold in dark mode) */
.ak-about-link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  text-decoration: none;
  color: #0f766e;
}
.ak-about-link:hover{ text-decoration: underline; }

.dark .ak-about-link{
  color: #f1c40f;
}

.ak-about-link--cta{
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(0,0,0,.02);
}
.dark .ak-about-link--cta{
  border-color: rgba(241,196,15,.20);
  background: rgba(255,255,255,.03);
}

/* CTA badge/title */
.ak-about-badge{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 900;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.18);
  color: #065f46;
}
.dark .ak-about-badge{
  background: rgba(241,196,15,.08);
  border-color: rgba(241,196,15,.20);
  color: #f1c40f;
}

.ak-about-cta-title{
  font-size: 1.65rem;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: #111827;
}
.dark .ak-about-cta-title{
  color: rgba(243,244,246,.95);
}

/* =========================
   SUPPORT PAGE (Akuno)
   Light + Dark
========================= */

.ak-support-page{
  background: #f7fbf8;
  color: #0f172a;
}

.dark .ak-support-page{
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(61,153,112,.18), transparent 60%), 
	radial-gradient(700px 300px at 80% 10%, rgba(241,196,15,.10), transparent 55%), 
	linear-gradient(to bottom, #06130b, #0f2418);
background: radial-gradient(900px 420px at 10% 0%, rgba(0, 0, 0, 0.18), transparent 60%), radial-gradient(700px 300px at 80% 10%, rgba(97, 80, 9, 0.1), #040b08c9 55%), linear-gradient(to bottom, #06130b, #0f2418);
  color: rgba(255,255,255,.92);
}

/* Headings */
.ak-support-h2{
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.ak-support-h3{
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.ak-support-muted{ color: rgba(15,23,42,.70); }
.dark .ak-support-muted{ color: rgba(255,255,255,.72); }

.ak-support-strong{ color: #0f172a; }
.dark .ak-support-strong{ color: rgba(255,255,255,.92); }

/* Links: emerald in light, gold in dark */
.ak-support-link{
  color: #0f766e;
  text-decoration: none;
}
.ak-support-link:hover{ text-decoration: underline; }
.dark .ak-support-link{
  color: #f1c40f;
}
.dark .ak-support-link:hover{ text-decoration: underline; }

.ak-support-sep{ color: rgba(15,23,42,.25); }
.dark .ak-support-sep{ color: rgba(255,255,255,.25); }

/* Search */
.ak-support-search{
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(15,23,42,.12);
  background: #ffffff;
  padding: .85rem 2.5rem .85rem 1rem;
  font-size: .9rem;
  outline: none;
}
.ak-support-search:focus{
  box-shadow: 0 0 0 3px rgba(61,153,112,.20);
  border-color: rgba(61,153,112,.35);
}
.dark .ak-support-search{
  background: rgba(255,255,255,.06);
  border-color: rgba(241,196,15,.18);
  color: rgba(255,255,255,.92);
}
.dark .ak-support-search::placeholder{
  color: rgba(255,255,255,.55);
}
.ak-support-icon{ color: rgba(15,23,42,.45); }
.dark .ak-support-icon{ color: rgba(255,255,255,.55); }

/* Cards */
.ak-support-card{
  border: 1px solid rgba(15,23,42,.10);
  background: #ffffff;
}
.dark .ak-support-card{
  border-color: rgba(241,196,15,.16);
  background: rgba(255,255,255,.03);
}

/* Tip */
.ak-support-tip{
  background: rgba(61,153,112,.10);
  color: #0f172a;
  border: 1px solid rgba(61,153,112,.20);
}
.dark .ak-support-tip{
  background: rgba(241,196,15,.10);
  border-color: rgba(241,196,15,.18);
  color: rgba(255,255,255,.88);
}

/* Chips */
.ak-support-chip{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 800;
  border: 1px solid rgba(15,23,42,.12);
  background: #ffffff;
  color: rgba(15,23,42,.82);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ak-support-chip:hover{
  background: rgba(0,0,0,.02);
}
.ak-support-chip.is-active{
  background: #3d9970;
  border-color: #3d9970;
  color: #ffffff;
}
.dark .ak-support-chip{
  background: rgba(255,255,255,.03);
  border-color: rgba(241,196,15,.18);
  color: rgba(255,255,255,.82);
}
.dark .ak-support-chip:hover{
  background: rgba(255,255,255,.05);
}
.dark .ak-support-chip.is-active{
  background: rgba(241,196,15,.18);
  border-color: rgba(241,196,15,.28);
  color: rgba(255,255,255,.94);
}

/* FAQ wrapper + items */
.ak-support-faqwrap{
  border-radius: 1rem;
  border: 1px solid rgba(15,23,42,.10);
  background: #ffffff;
  overflow: hidden;
}
.dark .ak-support-faqwrap{
  border-color: rgba(241,196,15,.16);
  background: rgba(255,255,255,.03);
}

.ak-support-faqitem{
  padding: 1.15rem 1.25rem;
  border-top: 1px solid rgba(15,23,42,.08);
}
.ak-support-faqitem:first-child{ border-top: 0; }
.dark .ak-support-faqitem{
  border-top-color: rgba(241,196,15,.12);
}

.ak-support-faqbtn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.ak-support-body{ color: rgba(15,23,42,.82); }
.dark .ak-support-body{ color: rgba(255,255,255,.78); }

/* Video cards */
.ak-support-video{
  border-radius: 1rem;
  border: 1px solid rgba(15,23,42,.10);
  background: #ffffff;
  overflow: hidden;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ak-support-video:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.dark .ak-support-video{
  border-color: rgba(241,196,15,.16);
  background: rgba(255,255,255,.03);
  box-shadow: none;
}

.ak-support-videoThumb{
  position: relative;
  aspect-ratio: 16/9;
  background: rgba(0,0,0,.04);
}
.dark .ak-support-videoThumb{
  background: rgba(255,255,255,.04);
}

.ak-support-play{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.ak-support-play > svg{
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 999px;
  background: rgba(61,153,112,.92);
  color: #fff;
  transition: background .15s ease;
}
.ak-support-video:hover .ak-support-play > svg{
  background: rgba(61,153,112,1);
}
.dark .ak-support-play > svg{
  background: rgba(241,196,15,.26);
  color: rgba(255,255,255,.95);
}
.dark .ak-support-video:hover .ak-support-play > svg{
  background: rgba(241,196,15,.32);
}


/* Support search: force dark-mode readable input (override globals) */
.ak-support-page input.ak-support-search{
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15,23,42,.12) !important;
  caret-color: #0f172a !important;
}

.ak-support-page input.ak-support-search::placeholder{
  color: rgba(15,23,42,.45) !important;
}

.dark .ak-support-page input.ak-support-search{
  background: rgba(255,255,255,.06) !important;  /* dark surface */
  color: rgba(255,255,255,.92) !important;      /* readable text */
  border-color: rgba(241,196,15,.18) !important;/* subtle gold */
  caret-color: rgba(255,255,255,.95) !important;/* visible cursor */
}

.dark .ak-support-page input.ak-support-search::placeholder{
  color: rgba(255,255,255,.55) !important;
}

.dark .ak-support-page input.ak-support-search:focus{
  box-shadow: 0 0 0 3px rgba(241,196,15,.16) !important;
  border-color: rgba(241,196,15,.30) !important;
}


/* ================================
   Akuno Legal Pages (shared)
   Reuse this on Terms / Privacy / Cookies / etc.
   ================================ */

.ak-legal-page{
  background: #f7fbf8; /* simple, clean */
  color: #0f172a;
}

.dark .ak-legal-page{
  background: #07110c; /* no blue tint, deep green-black */
  color: rgba(255,255,255,.90);
}

.ak-legal-shell{
  /* spacing handled by utilities in Blade */
}

.ak-legal-article{
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

/* Cards */
.ak-legal-jumpcard,
.ak-legal-metacard,
.ak-legal-contact{
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.70);
  border-radius: 16px;
  padding: 14px;
}

.dark .ak-legal-jumpcard,
.dark .ak-legal-metacard,
.dark .ak-legal-contact{
  border-color: rgba(241,196,15,.16);
  background: rgba(19,43,29,.40); /* #132b1d vibe */
}

/* Kicker / meta */
.ak-legal-kicker{
  font-size: 12px;
  font-weight: 700;
  color: rgba(15,23,42,.72);
  margin-bottom: 10px;
}

.dark .ak-legal-kicker{
  color: rgba(255,255,255,.72);
}

.ak-legal-meta-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(15,23,42,.55);
}

.dark .ak-legal-meta-label{
  color: rgba(255,255,255,.55);
}

.ak-legal-meta-value{
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(15,23,42,.80);
}

.dark .ak-legal-meta-value{
  color: rgba(255,255,255,.85);
}

/* Sidebar links */
.ak-legal-side{
  display: block;
  padding: 6px 8px;
  border-radius: 10px;
  color: rgba(15,23,42,.70);
  text-decoration: none;
}

.ak-legal-side:hover{
  background: rgba(15,23,42,.05);
  color: rgba(15,23,42,.92);
}

.dark .ak-legal-side{
  color: rgba(255,255,255,.72);
}

.dark .ak-legal-side:hover{
  background: rgba(241,196,15,.08);
  color: rgba(255,255,255,.92);
}

/* Main headings + section separators */
.ak-legal-section{
  border-top: 1px solid rgba(15,23,42,.10);
  padding-top: 22px;
}

.dark .ak-legal-section{
  border-top-color: rgba(241,196,15,.12);
}

.ak-legal-h{
  font-size: 16px;
  font-weight: 800;
  color: rgba(15,23,42,.92);
}

.dark .ak-legal-h{
  color: rgba(255,255,255,.92);
}

.ak-legal-p{
  margin-top: 10px;
  line-height: 1.8;
  color: rgba(15,23,42,.72);
}

.dark .ak-legal-p{
  color: rgba(255,255,255,.72);
}

/* Prose intro */
.ak-legal-prose p{
  line-height: 1.8;
  color: rgba(15,23,42,.72);
}

.dark .ak-legal-prose p{
  color: rgba(255,255,255,.72);
}

/* Lists */
.ak-legal-list{
  margin-top: 12px;
  padding-left: 18px;
  list-style: disc;
  line-height: 1.8;
  color: rgba(15,23,42,.72);
}

.dark .ak-legal-list{
  color: rgba(255,255,255,.72);
}

/* Links: green in light, GOLD in dark (your preference) */
.ak-legal-link{
  color: #0f7a55; /* emerald-ish */
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
}

.ak-legal-link:hover{
  text-decoration: underline;
}

.dark .ak-legal-link{
  color: #f1c40f; /* gold */
}

.dark .ak-legal-link:hover{
  color: #f6d55c;
}

/* Optional: smooth scroll globally (if not already) */
html{ scroll-behavior: smooth; }

/* =========================
   Akuno Auth (shared styles)
   Applies to login/register/forgot
   ========================= */

/* Supports either: <html class="dark"> OR <html data-theme="dark"> */
:root {
  --ak-bg: #f6faf7;
  --ak-card: rgba(255,255,255,0.92);
  --ak-border: rgba(15, 23, 42, 0.12);
  --ak-text: #0f172a;
  --ak-muted: rgba(15, 23, 42, 0.65);

  --ak-deep: #132b1d;         /* your preferred dark green */
  --ak-deep-2: #0f2418;
  --ak-card-dark: rgb(12, 44, 28);
  --ak-border-dark: rgba(255,255,255,0.10);
  --ak-text-dark: rgba(255,255,255,0.92);
  --ak-muted-dark: rgba(255,255,255,0.68);

  --ak-gold: #F1C40F;
  --ak-gold-2: #d8ad0a;

  --ak-input-bg: rgba(255,255,255,0.95);
  --ak-input-text: #0f172a;
  --ak-input-border: rgba(15, 23, 42, 0.18);

  --ak-input-bg-dark: rgba(255,255,255,0.06);
  --ak-input-text-dark: rgba(255,255,255,0.92);
  --ak-input-border-dark: rgba(255,255,255,0.14);

  --ak-focus: rgba(241, 196, 15, 0.35); /* warm focus ring */
}

/* If your layout sets a wrapper class, great. If not, this still works. */
.ak-auth-card {
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--ak-border);
  background: var(--ak-card);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  backdrop-filter: blur(10px);
}

.ak-auth-head {
  display: grid;
  gap: 6px;
}

.ak-auth-h2 {
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 800;
  color: #222429;
}

.ak-auth-sub {
  font-size: 0.875rem;
  color: var(--ak-muted);
}

.ak-auth-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.82);
}

/* The key fix: inputs that work in dark mode (no white-on-white) */
.ak-auth-input {
  width: 100%;
  margin-top: 6px;
  padding: 0.75rem 0.875rem;
  border-radius: 12px;
  border: 1px solid var(--ak-input-border);
  background: var(--ak-input-bg);
  color: var(--ak-input-text);
  outline: none;
  caret-color: currentColor;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ak-auth-input::placeholder {
  color: rgba(15, 23, 42, 0.45);
}

.ak-auth-input:focus {
  border-color: rgba(241, 196, 15, 0.55);
  box-shadow: 0 0 0 4px var(--ak-focus);
}

/* Eye button */
.ak-auth-iconbtn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 38px;
  width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: rgba(15, 23, 42, 0.62);
  transition: background .15s ease, color .15s ease;
}

.ak-auth-iconbtn:hover {
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.85);
}

.ak-auth-check {
  color: rgba(15, 23, 42, 0.72);
}

.ak-auth-checkbox {
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.22);
}

.ak-auth-muted {
  color: var(--ak-muted);
}

.ak-auth-dot {
  margin: 0 0.4rem;
  opacity: 0.55;
}

/* Links: gold in dark mode (and still warm in light) */
.ak-auth-link {
  text-decoration: none;
  color: rgba(15, 23, 42, 0.72);
  font-weight: 600;
}

.ak-auth-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgba(15, 23, 42, 0.72);
}

.ak-auth-link--gold {
  color: #b7791f; /* warm amber-ish for light mode */
}

.ak-auth-link--gold:hover {
  color: #9a6518;
}

/* Alerts */
.ak-auth-alert {
  margin-top: 16px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 0.875rem;
}

.ak-auth-alert--ok {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.25);
  color: rgba(6, 95, 70, 1);
}

.ak-auth-alert--err {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.22);
  color: rgba(153, 27, 27, 1);
}

/* Button polish (doesn't break your btn system; just refines it on auth pages) */
.ak-auth-primary.btn.btn-primary {
  border-radius: 14px;
  font-weight: 800;
}

/* -------------------------
   DARK MODE OVERRIDES
   ------------------------- */
html.dark .ak-auth-card,
html[data-theme="dark"] .ak-auth-card {
  background: rgb(2, 61, 38);
  border-color: var(--ak-border-dark);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}

html.dark .ak-auth-h2,
html[data-theme="dark"] .ak-auth-h2 {
  color: var(--ak-text-dark);
}

html.dark .ak-auth-sub,
html[data-theme="dark"] .ak-auth-sub,
html.dark .ak-auth-muted,
html[data-theme="dark"] .ak-auth-muted {
  color: var(--ak-muted-dark);
}

html.dark .ak-auth-label,
html[data-theme="dark"] .ak-auth-label {
  color: rgba(255,255,255,0.82);
}

html.dark .ak-auth-input,
html[data-theme="dark"] .ak-auth-input {
  background: var(--ak-input-bg-dark);
  border-color: var(--ak-input-border-dark);
  color: var(--ak-input-text-dark);
  caret-color: var(--ak-input-text-dark);
}

html.dark .ak-auth-input::placeholder,
html[data-theme="dark"] .ak-auth-input::placeholder {
  color: rgba(255,255,255,0.45);
}

html.dark .ak-auth-input:focus,
html[data-theme="dark"] .ak-auth-input:focus {
  border-color: rgba(241, 196, 15, 0.55);
  box-shadow: 0 0 0 4px rgba(241, 196, 15, 0.18);
}

/* Gold links in dark mode (as you requested) */
html.dark .ak-auth-link--gold,
html[data-theme="dark"] .ak-auth-link--gold {
  color: var(--ak-gold);
}

html.dark .ak-auth-link--gold:hover,
html[data-theme="dark"] .ak-auth-link--gold:hover {
  color: var(--ak-gold-2);
}

/* Normal links stay readable in dark mode */
html.dark .ak-auth-link,
html[data-theme="dark"] .ak-auth-link {
  color: rgba(255,255,255,0.70);
}

html.dark .ak-auth-link:hover,
html[data-theme="dark"] .ak-auth-link:hover {
  color: rgba(255,255,255,0.92);
}

/* Eye button in dark mode */
html.dark .ak-auth-iconbtn,
html[data-theme="dark"] .ak-auth-iconbtn {
  color: rgba(255,255,255,0.65);
}

html.dark .ak-auth-iconbtn:hover,
html[data-theme="dark"] .ak-auth-iconbtn:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
}

/* Alerts in dark mode */
html.dark .ak-auth-alert--ok,
html[data-theme="dark"] .ak-auth-alert--ok {
  color: rgba(236, 253, 245, 0.92);
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.20);
}

html.dark .ak-auth-alert--err,
html[data-theme="dark"] .ak-auth-alert--err {
  color: rgba(254, 242, 242, 0.92);
  background: rgb(35, 37, 9);
  border-color: rgba(239, 68, 68, 0.18);
}

/* =========================
   Akuno Auth (layout + cards)
   Shared across login/register/forgot
   ========================= */

/* Light defaults */
:root{
  --ak-bg: #f6faf7;
  --ak-text: #0f172a;
  --ak-muted: rgba(15, 23, 42, 0.62);

  --ak-deep: #132b1d;
  --ak-deep-2: #0f2418;
  --ak-gold: #F1C40F;
  --ak-gold-2: #d8ad0a;

  --ak-card: rgba(255,255,255,0.92);
  --ak-border: rgba(15, 23, 42, 0.12);

  --ak-input-bg: rgba(255,255,255,0.96);
  --ak-input-text: #0f172a;
  --ak-input-border: rgba(15, 23, 42, 0.18);

  --ak-focus: rgba(241, 196, 15, 0.35);
}

/* If you later add a toggle, support both conventions */
html.dark,
html[data-theme="dark"]{
  color-scheme: dark;
}

/* Fallback: system dark mode (works immediately even without a toggle) */
@media (prefers-color-scheme: dark){
  :root{
    --ak-bg: #0b1510;
    --ak-text: rgba(255,255,255,0.92);
    --ak-muted: rgba(255,255,255,0.68);

    --ak-card: rgba(19, 43, 29, 0.66);
    --ak-border: rgba(255,255,255,0.10);

    --ak-input-bg: rgba(255,255,255,0.06);
    --ak-input-text: rgba(255,255,255,0.92);
    --ak-input-border: rgba(255,255,255,0.14);

    --ak-focus: rgba(241, 196, 15, 0.18);
  }
}

/* Also apply dark variables when you explicitly set html.dark or data-theme="dark" */
html.dark :root,
html[data-theme="dark"] :root{}

/* Shell backgrounds */
.ak-auth-shell{
  background: var(--ak-bg);
  color: var(--ak-text);
}

/* Right panel */
.ak-auth-main{
  background: var(--ak-bg);
}

/* Left panel (no blue-ish, deep green theme) */
.ak-auth-aside{
  color: rgba(255,255,255,0.92);
  background: radial-gradient(1200px 700px at 10% 10%, rgba(241,196,15,0.10), transparent 60%),
              linear-gradient(135deg, var(--ak-deep), var(--ak-deep-2));
}

.ak-auth-aside svg { color: rgba(255,255,255,0.65); }

.ak-auth-aside-muted{
  color: rgba(255,255,255,0.72);
}

.ak-auth-bullet{ background: rgba(61,153,112,0.95); }
.ak-auth-bullet-2{ background: rgba(61,153,112,0.75); }

.ak-auth-glow-1{ background: rgba(61,153,112,0.18); }
.ak-auth-glow-2{ background: rgba(241,196,15,0.14); }

.ak-auth-back{
  color: rgba(15, 23, 42, 0.58);
  font-weight: 600;
}
.ak-auth-back:hover{ color: rgba(15, 23, 42, 0.88); }

@media (prefers-color-scheme: dark){
  .ak-auth-back{
    color: rgba(255,255,255,0.62);
  }
  .ak-auth-back:hover{
    color: rgba(255,255,255,0.92);
  }
}

/* Card */
.ak-auth-card{
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--ak-border);
  background: var(--ak-card);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  backdrop-filter: blur(10px);
}

@media (prefers-color-scheme: dark){
  .ak-auth-card{
    box-shadow: 0 14px 34px rgba(0,0,0,0.35);
  }
}

.ak-auth-head{ display: grid; gap: 6px; }

.ak-auth-h2{
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 700;
  color: #222429;
}
.ak-auth-sub{
  font-size: 0.875rem;
  color: var(--ak-muted);
}

.ak-auth-label{
  display:block;
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.82);
}
@media (prefers-color-scheme: dark){
  .ak-auth-label{ color: rgba(255,255,255,0.82); }
}

/* Inputs: fixes the white-on-white issue properly */
.ak-auth-input{
  width: 100%;
  margin-top: 6px;
  padding: 0.75rem 0.875rem;
  border-radius: 12px;
  border: 1px solid var(--ak-input-border);
  background: var(--ak-input-bg);
  color: var(--ak-input-text);
  outline: none;
  caret-color: currentColor;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ak-auth-input::placeholder{
  color: rgba(15, 23, 42, 0.45);
}
@media (prefers-color-scheme: dark){
  .ak-auth-input::placeholder{ color: rgba(255,255,255,0.45); }
}

.ak-auth-input:focus{
  border-color: rgba(241, 196, 15, 0.55);
  box-shadow: 0 0 0 4px var(--ak-focus);
}

/* Eye button */
.ak-auth-iconbtn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 38px;
  width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: rgba(15, 23, 42, 0.62);
  transition: background .15s ease, color .15s ease;
}
.ak-auth-iconbtn:hover{
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.88);
}
@media (prefers-color-scheme: dark){
  .ak-auth-iconbtn{ color: rgba(255,255,255,0.65); }
  .ak-auth-iconbtn:hover{
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
  }
}

/* Misc */
.ak-auth-muted{ color: var(--ak-muted); }
.ak-auth-dot{ margin: 0 .4rem; opacity: .55; }

/* Links: gold in dark mode (and warm in light mode) */
.ak-auth-link{
  text-decoration: none;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.72);
}
.ak-auth-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgba(15, 23, 42, 0.72);
}

.ak-auth-link--gold{ color: #b7791f; }
.ak-auth-link--gold:hover{ color: #9a6518; }

@media (prefers-color-scheme: dark){
  .ak-auth-link{ color: rgba(255,255,255,0.72); }
  .ak-auth-link:hover{ color: rgba(255,255,255,0.92); }
  .ak-auth-link--gold{ color: var(--ak-gold); }
  .ak-auth-link--gold:hover{ color: var(--ak-gold-2); }
}

/* Alerts */
.ak-auth-alert{
  margin-top: 16px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 0.875rem;
}
.ak-auth-alert--ok{
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.25);
  color: rgba(6, 95, 70, 1);
}
.ak-auth-alert--err{
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.22);
  color: rgba(153, 27, 27, 1);
}

@media (prefers-color-scheme: dark){
  .ak-auth-alert--ok{
    color: rgba(236, 253, 245, 0.92);
    border-color: rgba(16, 185, 129, 0.20);
  }
  .ak-auth-alert--err{
    color: rgba(254, 242, 242, 0.92);
    border-color: rgba(239, 68, 68, 0.18);
  }
}

/* Button polish (keeps your btn system intact) */
.ak-auth-primary.btn.btn-primary{
  border-radius: 14px;
  font-weight: 800;
}

/* =========================
   Akuno Auth (layout + cards)
   Shared across login/register/forgot
   Theme controlled by html[data-theme]
   ========================= */

/* Default (light) variables */
:root{
  --ak-bg: #f6faf7;
  --ak-text: #0f172a;
  --ak-muted: rgba(15, 23, 42, 0.62);

  --ak-deep: #132b1d;
  --ak-deep-2: #0f2418;
  --ak-gold: #F1C40F;
  --ak-gold-2: #d8ad0a;

  --ak-card: rgba(255,255,255,0.92);
  --ak-border: rgba(15, 23, 42, 0.12);

  --ak-input-bg: rgba(255,255,255,0.96);
  --ak-input-text: #0f172a;
  --ak-input-border: rgba(15, 23, 42, 0.18);

  --ak-focus: rgba(241, 196, 15, 0.35);
}

/* Explicit dark mode (only when your site sets it) */
html[data-theme="dark"]{
  color-scheme: dark;

  --ak-bg: #0b1510;
  --ak-text: rgba(255,255,255,0.92);
  --ak-muted: rgba(255,255,255,0.68);

  --ak-card: rgba(19, 43, 29, 0.66);
  --ak-border: rgba(255,255,255,0.10);

  --ak-input-bg: rgba(255,255,255,0.06);
  --ak-input-text: rgba(255,255,255,0.92);
  --ak-input-border: rgba(255,255,255,0.14);

  --ak-focus: rgba(241, 196, 15, 0.18);
}

/* Optional: if you do NOT store theme anywhere, fall back to system */
html:not([data-theme]){
  /* nothing */
}
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    color-scheme: dark;
  }
  html:not([data-theme]) :root{
    /* If you ever remove the head script, this is your safety net */
  }
}

/* Shell backgrounds */
.ak-auth-shell{
  background: var(--ak-bg);
  color: var(--ak-text);
}

.ak-auth-main{
  background: var(--ak-bg);
}

/* Left panel */
.ak-auth-aside{
  color: rgba(255,255,255,0.92);
  background: radial-gradient(1200px 700px at 10% 10%, rgba(241,196,15,0.10), transparent 60%),
              linear-gradient(135deg, var(--ak-deep), var(--ak-deep-2));
  background: radial-gradient(1200px 700px at 10% 10%, rgba(26, 21, 2, 0), #072d1f 60%), linear-gradient(135deg, #0f2719, #021f11);
}
.ak-auth-aside svg { color: rgba(255,255,255,0.65); }

.ak-auth-aside-muted{
  color: rgba(255,255,255,0.72);
}

.ak-auth-bullet{ background: rgba(61,153,112,0.95); }
.ak-auth-bullet-2{ background: rgba(61,153,112,0.75); }

.ak-auth-glow-1{ background: rgba(61,153,112,0.18); }
.ak-auth-glow-2{ background: rgba(241,196,15,0.14); }

.ak-auth-back{
  color: rgba(15, 23, 42, 0.58);
  font-weight: 600;
}
.ak-auth-back:hover{ color: rgba(15, 23, 42, 0.88); }

html[data-theme="dark"] .ak-auth-back{
  color: rgba(255,255,255,0.62);
}
html[data-theme="dark"] .ak-auth-back:hover{
  color: rgba(255,255,255,0.92);
}

/* Card */
.ak-auth-card{
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--ak-border);
  background: var(--ak-card);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .ak-auth-card{
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}

.ak-auth-head{ display: grid; gap: 6px; }

.ak-auth-h2{
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ak-text);
}
.ak-auth-sub{
  font-size: 0.875rem;
  color: var(--ak-muted);
}

.ak-auth-label{
  display:block;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.82);
}
html[data-theme="dark"] .ak-auth-label{
  color: rgba(255,255,255,0.82);
}

/* Inputs */
.ak-auth-input{
  width: 100%;
  margin-top: 6px;
  padding: 0.75rem 0.875rem;
  border-radius: 12px;
  border: 1px solid var(--ak-input-border);
  background: var(--ak-input-bg);
  color: var(--ak-input-text);
  outline: none;
  caret-color: currentColor;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ak-auth-input::placeholder{
  color: rgba(15, 23, 42, 0.45);
}
html[data-theme="dark"] .ak-auth-input::placeholder{
  color: rgba(255,255,255,0.45);
}

.ak-auth-input:focus{
  border-color: rgba(241, 196, 15, 0.55);
  box-shadow: 0 0 0 4px var(--ak-focus);
}

/* Eye button */
.ak-auth-iconbtn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 38px;
  width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: rgba(15, 23, 42, 0.62);
  transition: background .15s ease, color .15s ease;
}
.ak-auth-iconbtn:hover{
  background: rgba(15, 23, 42, 0.06);
  color: rgba(15, 23, 42, 0.88);
}
html[data-theme="dark"] .ak-auth-iconbtn{
  color: rgba(255,255,255,0.65);
}
html[data-theme="dark"] .ak-auth-iconbtn:hover{
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
}

/* Misc */
.ak-auth-muted{ color: var(--ak-muted); }
.ak-auth-dot{ margin: 0 .4rem; opacity: .55; }

/* Links */
.ak-auth-link{
  text-decoration: none;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.72);
}
.ak-auth-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgba(15, 23, 42, 0.72);
}
.ak-auth-link--gold{ color: #b7791f; }
.ak-auth-link--gold:hover{ color: #9a6518; }

html[data-theme="dark"] .ak-auth-link{ color: rgba(255,255,255,0.72); }
html[data-theme="dark"] .ak-auth-link:hover{ color: rgba(255,255,255,0.92); }
html[data-theme="dark"] .ak-auth-link--gold{ color: var(--ak-gold); }
html[data-theme="dark"] .ak-auth-link--gold:hover{ color: var(--ak-gold-2); }

/* Alerts */
.ak-auth-alert{
  margin-top: 16px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 0.875rem;
}
.ak-auth-alert--ok{
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.25);
  color: rgba(6, 95, 70, 1);
}
.ak-auth-alert--err{
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.22);
  color: rgba(153, 27, 27, 1);
}
html[data-theme="dark"] .ak-auth-alert--ok{
  color: rgba(236, 253, 245, 0.92);
  border-color: rgba(16, 185, 129, 0.20);
}
html[data-theme="dark"] .ak-auth-alert--err{
  color: rgba(254, 242, 242, 0.92);
  border-color: rgba(239, 68, 68, 0.18);
}

/* Button polish */
.ak-auth-primary.btn.btn-primary{
  border-radius: 14px;
  font-weight: 800;
}


/* =========================================
   FORCE INPUT VISIBILITY (Dark mode)
   - White input bg
   - Dark text
   - Visible caret
   - Akuno focus ring
   ========================================= */

html[data-theme="dark"] .ak-auth-input,
html[data-theme="dark"] input.ak-auth-input,
html[data-theme="dark"] textarea.ak-auth-input,
html[data-theme="dark"] select.ak-auth-input{
  background: #ffffff !important;
  color: #0f172a !important;          /* dark text */
  caret-color: #0f172a !important;     /* visible cursor */
  border-color: rgba(15, 23, 42, 0.22) !important;
  -webkit-text-fill-color: #0f172a !important; /* fixes Safari/Chrome autofill text */
}

/* Placeholder in dark mode (on white bg) */
html[data-theme="dark"] .ak-auth-input::placeholder{
  color: rgba(15, 23, 42, 0.45) !important;
}

/* Focus styling (Akuno gold ring + slightly stronger border) */
html[data-theme="dark"] .ak-auth-input:focus{
  border-color: rgba(241, 196, 15, 0.75) !important;
  box-shadow: 0 0 0 4px rgba(241, 196, 15, 0.25) !important;
  outline: none !important;
}

/* Autofill background override (Chrome) */
html[data-theme="dark"] .ak-auth-input:-webkit-autofill,
html[data-theme="dark"] .ak-auth-input:-webkit-autofill:hover,
html[data-theme="dark"] .ak-auth-input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
  transition: background-color 9999s ease-out 0s;
}

/* If your search input isn't using ak-auth-input, force it too:
   (Only applies to search fields inside your Support page block if you add the wrapper class)
*/
html[data-theme="dark"] .ak-support input[type="text"],
html[data-theme="dark"] .ak-support input[type="search"]{
  background: #ffffff !important;
  color: #0f172a !important;
  caret-color: #0f172a !important;
}
html[data-theme="dark"] .ak-support input[type="text"]::placeholder,
html[data-theme="dark"] .ak-support input[type="search"]::placeholder{
  color: rgba(15, 23, 42, 0.45) !important;
}
html[data-theme="dark"] .ak-support input[type="text"]:focus,
html[data-theme="dark"] .ak-support input[type="search"]:focus{
  border-color: rgba(241, 196, 15, 0.75) !important;
  box-shadow: 0 0 0 4px rgba(241, 196, 15, 0.25) !important;
  outline: none !important;
}
/* =========================================
   Akuno wordmark theme switching
   ========================================= */

.ak-logo-dark{
  display: none;
}

html[data-theme="dark"] .ak-logo-light{
  display: none;
}

html[data-theme="dark"] .ak-logo-dark{
  display: inline-block;
}

/* Optional: subtle hover polish */
a.group:hover img{
  opacity: 0.95;
}

/* =========================
   AKUNO — INTERNAL UI (Dashboard + other app pages)
   Reusable tokens + components (light/dark)
   ========================= */

.ak-dash{
  background: #f4f5f5; /* simple, calm */
  color: #0f1d16;
}
.dark .ak-dash{
  background: #0b1711; /* deep green (no blue) */
  color: #eef6f0;
}

/* Cards */
.ak-card{
  border: 1px solid rgba(19,43,29,0.10);
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(16,24,18,0.05);
  padding: 18px;
}
@media (min-width: 1024px){
  .ak-card{ padding: 22px; }
}
.dark .ak-card{
  background: #0f2118;
  border-color: rgba(220,252,231,0.10);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}
.ak-card--hero{
  padding: 18px;
}
@media (min-width: 1024px){
  .ak-card--hero{ padding: 22px; }
}

.ak-cardHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 12px;
}

.ak-divider{
  height: 1px;
  background: rgba(19,43,29,0.10);
  margin: 16px 0;
}
.dark .ak-divider{
  background: rgba(220,252,231,0.10);
}

/* Typography */
.ak-kicker{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,29,22,0.65);
}
.dark .ak-kicker{ color: rgba(238,246,240,0.65); }

.ak-h1{
  font-size: 26px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.ak-h2{
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.ak-sub{
  margin-top: 8px;
  font-size: 14px;
  color: rgba(15,29,22,0.72);
}
.dark .ak-sub{ color: rgba(238,246,240,0.72); }

.ak-muted{
  color: rgba(15,29,22,0.66);
}
.dark .ak-muted{ color: rgba(238,246,240,0.68); }

.ak-small{ font-size: 12px; }

.ak-dot{
  margin: 0 8px;
  color: rgba(15,29,22,0.35);
}
.dark .ak-dot{ color: rgba(238,246,240,0.35); }

/* Hero layout */
.ak-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap: wrap;
}
.ak-heroRight{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-direction: column;
}
.ak-actions{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
}

/* Buttons (internal, not replacing your global .btn) */
.ak-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 650;
  font-size: 14px;
  line-height: 1;
  border: 1px solid transparent;
  text-decoration:none;
  user-select:none;
}
.ak-btn--sm{ padding: 8px 10px; font-size: 13px; border-radius: 12px; }
.ak-btn--block{ width: 100%; }

.ak-btn--primary{
  background: #1b5e3a; /* rich green */
  color: #fff;
  border-color: rgba(0,0,0,0.0);
}
.ak-btn--primary:hover{ background: #174f32; }

.dark .ak-btn--primary{
  background: #2b7a4e;
}
.dark .ak-btn--primary:hover{ background: #256a44; }

.ak-btn--ghost{
  background: rgba(19,43,29,0.05);
  color: rgba(15,29,22,0.92);
  border-color: rgba(19,43,29,0.10);
}
.ak-btn--ghost:hover{ background: rgba(19,43,29,0.08); }

.dark .ak-btn--ghost{
  background: rgba(220,252,231,0.05);
  color: rgba(238,246,240,0.92);
  border-color: rgba(220,252,231,0.10);
}
.dark .ak-btn--ghost:hover{ background: rgba(220,252,231,0.08); }

/* Links */
.ak-link{
  color: #9a7b00; /* calm gold */
  font-weight: 650;
  text-decoration: none;
}
.ak-link:hover{ text-decoration: underline; }
.ak-link--strong{ color: #1b5e3a; }
.dark .ak-link--strong{ color: #7bd19f; }

/* Pills / badges */
.ak-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 750;
  border: 1px solid transparent;
}
.ak-pill--tiny{ padding: 5px 9px; font-size: 11px; }

.ak-pill--open{
  background: rgba(27,94,58,0.12);
  color: #1b5e3a;
  border-color: rgba(27,94,58,0.18);
}
.dark .ak-pill--open{
  background: rgba(123,209,159,0.14);
  color: #baf2d3;
  border-color: rgba(123,209,159,0.18);
}

.ak-pill--closed{
  background: rgba(15,29,22,0.06);
  color: rgba(15,29,22,0.78);
  border-color: rgba(15,29,22,0.10);
}
.dark .ak-pill--closed{
  background: rgba(238,246,240,0.06);
  color: rgba(238,246,240,0.78);
  border-color: rgba(238,246,240,0.10);
}

.ak-pill--ok{
  background: rgba(27,94,58,0.12);
  color: #1b5e3a;
  border-color: rgba(27,94,58,0.18);
}
.dark .ak-pill--ok{
  background: rgba(123,209,159,0.14);
  color: #baf2d3;
  border-color: rgba(123,209,159,0.18);
}

.ak-pill--pending{
  background: rgba(154,123,0,0.14);
  color: #9a7b00;
  border-color: rgba(154,123,0,0.18);
}
.dark .ak-pill--pending{
  background: rgba(241,196,15,0.16);
  color: #f6dc66;
  border-color: rgba(241,196,15,0.20);
}

.ak-pill--muted{
  background: rgba(15,29,22,0.06);
  color: rgba(15,29,22,0.78);
  border-color: rgba(15,29,22,0.10);
}
.dark .ak-pill--muted{
  background: rgba(238,246,240,0.06);
  color: rgba(238,246,240,0.78);
  border-color: rgba(238,246,240,0.10);
}

.ak-badge{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 650;
  background: rgba(19,43,29,0.05);
  border: 1px solid rgba(19,43,29,0.10);
  color: rgba(15,29,22,0.85);
}
.dark .ak-badge{
  background: rgba(220,252,231,0.05);
  border-color: rgba(220,252,231,0.10);
  color: rgba(238,246,240,0.85);
}

.ak-warn{
  color: #9a7b00;
  font-weight: 650;
}
.dark .ak-warn{ color: #f6dc66; }

/* Metrics */
.ak-metrics{
  margin-top: 16px;
  display:grid;
  gap:12px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px){
  .ak-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px){
  .ak-metrics{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ak-metric{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(19,43,29,0.10);
  background: rgba(255,255,255,0.75);
  text-decoration:none;
  transition: transform .12s ease, background .12s ease;
}
.ak-metric:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.95);
}
.dark .ak-metric{
  background: rgba(11,23,17,0.45);
  border-color: rgba(220,252,231,0.10);
}
.dark .ak-metric:hover{
  background: rgba(11,23,17,0.62);
}

.ak-metricLabel{
  font-size: 12px;
  font-weight: 700;
  color: rgba(15,29,22,0.70);
}
.dark .ak-metricLabel{ color: rgba(238,246,240,0.70); }

.ak-metricValue{
  margin-top: 6px;
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.02em;
}
.ak-unit{
  font-size: 12px;
  font-weight: 750;
  opacity: .75;
  margin-left: 6px;
}
.ak-metricHint{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap:8px;
}

/* Forms */
.ak-formRow{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;
  align-items: end;
  margin-top: 14px;
}
@media (min-width: 768px){
  .ak-formRow{ grid-template-columns: 2fr 1fr; }
}
.ak-field{ min-width: 0; }
.ak-field--btn{ display:flex; align-items:flex-end; }

.ak-label{
  display:block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  color: rgba(15,29,22,0.80);
}
.dark .ak-label{ color: rgba(238,246,240,0.80); }

/* INPUTS: intentionally white in dark mode, but with dark text/caret */
.ak-input{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(19,43,29,0.18);
  background: #fff;
  color: #0f1d16;
  padding: 10px 12px;
  outline: none;
}
.ak-input::placeholder{ color: rgba(15,29,22,0.45); }

.ak-input:focus{
  border-color: rgba(27,94,58,0.55);
  box-shadow: 0 0 0 4px rgba(27,94,58,0.14);
}

/* Force dark mode: keep white input, but ensure text + caret are dark */
.dark .ak-input{
  background: #ffffff !important;
  color: #0f1d16 !important;
  -webkit-text-fill-color: #f8fafc!important;
  caret-color: #0f1d16 !important;
  border-color: rgba(255,255,255,0.55) !important;
}
.dark .ak-input::placeholder{
  color: rgba(15,29,22,0.45) !important;
  -webkit-text-fill-color: #f8fafc !important;
}
.dark .ak-input:focus{
  border-color: rgba(241,196,15,0.55) !important;
  box-shadow: 0 0 0 4px rgba(241,196,15,0.16) !important;
}

.ak-help{ margin-top: 8px; font-size: 12px; }
.ak-help--ok{ color: rgba(15,29,22,0.62); }
.ak-help--warn{ color: #9a7b00; font-weight: 650; }
.dark .ak-help--ok{ color: rgba(238,246,240,0.62); }
.dark .ak-help--warn{ color: #f6dc66; }

.ak-error{
  margin-top: 8px;
  font-size: 13px;
  color: #b42318;
}

/* Wallet chips */
.ak-miniHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.ak-miniTitle{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,29,22,0.60);
}
.dark .ak-miniTitle{ color: rgba(238,246,240,0.60); }

.ak-walletGrid{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
}
.ak-walletChip{
  position: relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(19,43,29,0.12);
  background: rgba(19,43,29,0.04);
}
.dark .ak-walletChip{
  border-color: rgba(220,252,231,0.10);
  background: rgba(220,252,231,0.04);
}

.ak-walletAddr{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color: inherit;
  min-width: 0;
}
.ak-walletAddr:hover{ text-decoration: underline; }

.ak-walletIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(19,43,29,0.12);
  color: rgba(15,29,22,0.80);
}
.dark .ak-walletIcon{
  background: rgba(11,23,17,0.80);
  border-color: rgba(220,252,231,0.10);
  color: rgba(238,246,240,0.88);
}

.ak-chipBtn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
}
.ak-chipBtn:hover{
  background: rgba(255,255,255,0.75);
  border-color: rgba(19,43,29,0.12);
}
.dark .ak-chipBtn:hover{
  background: rgba(11,23,17,0.65);
  border-color: rgba(220,252,231,0.10);
}

/* Dropdown menu */
.ak-menu{
  position:absolute;
  right: 8px;
  top: calc(100% + 8px);
  width: 180px;
  border-radius: 16px;
  border: 1px solid rgba(19,43,29,0.12);
  background: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
  overflow:hidden;
  z-index: 40;
}
.dark .ak-menu{
  background: #0b1711;
  border-color: rgba(220,252,231,0.10);
  box-shadow: 0 18px 36px rgba(0,0,0,0.45);
}
.ak-menuItem{
  display:block;
  width:100%;
  text-align:left;
  padding: 10px 12px;
  font-size: 13px;
  background: transparent;
  border: 0;
  color: inherit;
  text-decoration:none;
}
.ak-menuItem:hover{
  background: rgba(19,43,29,0.05);
}
.dark .ak-menuItem:hover{
  background: rgba(220,252,231,0.06);
}
.ak-menuItem--danger{
  color: #b42318;
}
.dark .ak-menuItem--danger{
  color: #ffb4a9;
}

/* Tables */
.ak-tableWrap{ overflow-x:auto; border-radius: 16px; }
.ak-table{
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}
.ak-table thead th{
 
  font-weight: 700;
  font-size: 12px;
  padding: 12px 12px;
  color: rgba(15,29,22,0.70);
  background: rgba(19,43,29,0.04);
  border-bottom: 1px solid rgba(19,43,29,0.10);
}
.dark .ak-table thead th{
  color: rgba(238,246,240,0.70);
  background: rgba(220,252,231,0.04);
  border-bottom-color: rgba(220,252,231,0.10);
}
.ak-table tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(19,43,29,0.08);
  vertical-align: top;
}
.dark .ak-table tbody td{
  border-bottom-color: rgba(220,252,231,0.08);
}
.ak-table tbody tr:hover td{
  background: rgba(19,43,29,0.03);
}
.dark .ak-table tbody tr:hover td{
  background: rgba(220,252,231,0.03);
}
.ak-nowrap{ white-space: nowrap; }
.ak-taRight{ text-align: right; }

/* Empty states */
.ak-empty{
  padding: 16px;
  border-radius: 16px;
  border: 1px dashed rgba(19,43,29,0.18);
  background: rgba(19,43,29,0.03);
  color: rgba(15,29,22,0.70);
}
.dark .ak-empty{
  border-color: rgba(220,252,231,0.14);
  background: rgba(220,252,231,0.03);
  color: rgba(238,246,240,0.70);
}

/* Steps */
.ak-steps{ margin-top: 10px; padding-left: 18px; }
.ak-steps li{ margin: 12px 0; }
.ak-stepTitle{ font-weight: 800; }

/* Link rows */
.ak-quickLinks{ margin-top: 10px; }
.ak-linkRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: inherit;
  border: 1px solid rgba(19,43,29,0.10);
  background: rgba(19,43,29,0.03);
  margin-top: 10px;
}
.ak-linkRow:hover{ background: rgba(19,43,29,0.06); }
.dark .ak-linkRow{
  border-color: rgba(220,252,231,0.10);
  background: rgba(220,252,231,0.03);
}
.dark .ak-linkRow:hover{ background: rgba(220,252,231,0.06); }

/* Icon buttons */
.ak-iconBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(19,43,29,0.12);
  background: rgba(19,43,29,0.03);
  margin-left: 8px;
}
.ak-iconBtn:hover{ background: rgba(19,43,29,0.06); }
.dark .ak-iconBtn{
  border-color: rgba(220,252,231,0.10);
  background: rgba(220,252,231,0.03);
}
.dark .ak-iconBtn:hover{ background: rgba(220,252,231,0.06); }

/* Copy toast near the clicked icon */
.ak-copy-toast{
  position: absolute;
  z-index: 50;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 750;
  border: 1px solid rgba(19,43,29,0.18);
  background: #ffffff;
  color: #0f1d16;
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}
.dark .ak-copy-toast{
  background: #0b1711;
  color: rgba(238,246,240,0.92);
  border-color: rgba(220,252,231,0.12);
  box-shadow: 0 18px 36px rgba(0,0,0,0.45);
}


/* =========================
   Akuno internal UI (Dashboard)
   Light/Dark safe overrides
   ========================= */

.ak-page { background: #f7fbf8; }
html.dark .ak-page { background: #0c1611; }

/* Text helpers */
.ak-text { color: #111827; }
.ak-muted { color: #6b7280; }
.ak-warn { color: #b45309; }
.ak-error { color: #be123c; }
.ak-dot { margin: 0 .4rem; color: #9ca3af; }

html.dark .ak-text { color: #ecfdf5; }
html.dark .ak-muted { color: #a7b2ab; }
html.dark .ak-warn { color: #fbbf24; }
html.dark .ak-error { color: #fb7185; }
html.dark .ak-dot { color: #5b6a61; }

/* Links */
.ak-link { color: #0f7a54; text-decoration: none; }
.ak-link:hover { text-decoration: underline; }
html.dark .ak-link { color: #F1C40F; }
html.dark .ak-link:hover { color: #ffd561; }

/* Strip */
.ak-strip{
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
html.dark .ak-strip{
  border-color: rgba(255,255,255,.10);
  background: rgba(19,43,29,.55);
  box-shadow: none;
}

/* Cards */
.ak-card{
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.04);
}
html.dark .ak-card{
  border-color: rgba(255,255,255,.10);
  background: rgba(19,43,29,.45);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.ak-card-head{
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.ak-title{
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.01em;
}
.ak-sub{
  margin-top: .2rem;
  font-size: .875rem;
  color: #6b7280;
}
html.dark .ak-title{ color:#ecfdf5; }
html.dark .ak-sub{ color:#a7b2ab; }

/* Metrics */
.ak-metric{
  display:block;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  border-radius: .9rem;
  padding: .9rem;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.ak-metric:hover{
  border-color:#cbd5e1;
  background:#ffffff;
  transform: translateY(-1px);
  text-decoration:none;
}
html.dark .ak-metric{
  border-color: rgba(255,255,255,.10);
  background: rgba(10,24,16,.55);
}
html.dark .ak-metric:hover{
  border-color: rgba(241,196,15,.35);
  background: rgba(10,24,16,.75);
}
.ak-metric-k{ font-size:.75rem; color:#6b7280; }
.ak-metric-v{ font-size:1.35rem; font-weight:900; color:#111827; margin-top:.15rem; }
.ak-metric-s{ font-size:.75rem; margin-top:.2rem; }
html.dark .ak-metric-k{ color:#a7b2ab; }
html.dark .ak-metric-v{ color:#ecfdf5; }

/* Callouts */
.ak-callout{
  border-radius: .9rem;
  padding: .9rem;
  display:flex;
  gap:.8rem;
  align-items:flex-start;
  border:1px solid;
}
.ak-callout-ico{
  width: 2rem; height: 2rem;
  border-radius: .75rem;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
}
.ak-callout-link{ margin-left:auto; white-space:nowrap; align-self:center; }

.ak-callout-warn{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.10);
}
.ak-callout-warn .ak-callout-ico{
  background: rgba(245,158,11,.18);
  color:#b45309;
}
.ak-callout-ok{
  border-color: rgba(16,185,129,.25);
  background: rgba(16,185,129,.08);
}
.ak-callout-ok .ak-callout-ico{
  background: rgba(16,185,129,.16);
  color:#065f46;
}
html.dark .ak-callout-warn{ background: rgba(245,158,11,.08); }
html.dark .ak-callout-warn .ak-callout-ico{ color:#fbbf24; }
html.dark .ak-callout-ok{ background: rgba(16,185,129,.06); }
html.dark .ak-callout-ok .ak-callout-ico{ color:#34d399; }

/* Inputs (force readable in dark mode) */
.ak-label{
  display:block;
  font-size:.875rem;
  font-weight:700;
  color:#374151;
  margin-bottom:.35rem;
}
html.dark .ak-label{ color:#d1d5db; }

.ak-input{
  width:100%;
  height: 2.75rem;
  border-radius: .85rem;
  border: 1px solid #d1d5db;
  background: #ffffff;
  padding: .65rem .85rem;
  color:#111827;
  outline: none;
}
.ak-input::placeholder{ color:#9ca3af; }
.ak-input:focus{
  border-color: rgba(16,185,129,.65);
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}

/* IMPORTANT: override “white on white” issue in dark mode */
html.dark .ak-input{
  background: rgba(10,24,16,.78) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #ecfdf5 !important;
  caret-color: #F1C40F !important;
}
html.dark .ak-input::placeholder{
  color: rgba(236,253,245,.45) !important;
}
html.dark .ak-input:focus{
  border-color: rgba(241,196,15,.55) !important;
  box-shadow: 0 0 0 3px rgba(241,196,15,.14) !important;
}

/* Tables */
.ak-table-wrap{
  overflow-x:auto;
  border-radius: .9rem;
  border: 1px solid #e5e7eb;
}
html.dark .ak-table-wrap{ border-color: rgba(255,255,255,.10); }

.ak-table{
  width:100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .875rem;
}
.ak-table thead th{
  
  font-weight:700;
  padding: .75rem .85rem;
  background:#f9fafb;
  color:#374151;
  border-bottom: 1px solid #e5e7eb;
}
.ak-table tbody td{
  padding: .75rem .85rem;
  border-bottom: 1px solid #eef2f7;
  color:#111827;
}
.ak-row:hover td{ background: rgba(16,185,129,.06); }
html.dark .ak-table thead th{
  background: rgba(10,24,16,.55);
  color:#d1d5db;
  border-bottom-color: rgba(255,255,255,.10);
}
html.dark .ak-table tbody td{
  border-bottom-color: rgba(255,255,255,.08);
  color:#ecfdf5;
}
html.dark .ak-row:hover td{ background: rgba(241,196,15,.08); }

/* Pills */
.ak-pill{
  display:inline-flex;
  align-items:center;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  border:1px solid transparent;
}
.ak-pill-ok{ background: rgba(16,185,129,.12); color:#065f46; border-color: rgba(16,185,129,.25); }
.ak-pill-warn{ background: rgba(245,158,11,.14); color:#92400e; border-color: rgba(245,158,11,.25); }
.ak-pill-muted{ background: rgba(107,114,128,.14); color:#374151; border-color: rgba(107,114,128,.25); }
html.dark .ak-pill-ok{ color:#34d399; }
html.dark .ak-pill-warn{ color:#fbbf24; }
html.dark .ak-pill-muted{ color:#d1d5db; }

/* Circle rows */
.ak-circle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.9rem;
  border:1px solid #e5e7eb;
  background:#ffffff;
  border-radius: .9rem;
  padding: .85rem .9rem;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.ak-circle-row:hover{
  border-color:#cbd5e1;
  background:#f9fafb;
  transform: translateY(-1px);
  text-decoration:none;
}
html.dark .ak-circle-row{
  border-color: rgba(255,255,255,.10);
  background: rgba(10,24,16,.55);
}
html.dark .ak-circle-row:hover{
  border-color: rgba(241,196,15,.35);
  background: rgba(10,24,16,.75);
}
.ak-circle-cta{
  width:2rem; height:2rem;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #e5e7eb;
  color:#374151;
  background:#ffffff;
}
html.dark .ak-circle-cta{
  border-color: rgba(255,255,255,.12);
  background: rgba(19,43,29,.6);
  color:#ecfdf5;
}

/* Badges */
.ak-badge{
  display:inline-flex;
  align-items:center;
  padding:.15rem .5rem;
  border-radius: 999px;
  font-size:.72rem;
  font-weight:900;
  border: 1px solid transparent;
}
.ak-badge-ok{ background: rgba(16,185,129,.12); color:#065f46; border-color: rgba(16,185,129,.25); }
.ak-badge-muted{ background: rgba(107,114,128,.14); color:#374151; border-color: rgba(107,114,128,.25); }
html.dark .ak-badge-ok{ color:#34d399; }
html.dark .ak-badge-muted{ color:#d1d5db; }

/* Empty */
.ak-empty{
  border: 1px dashed rgba(156,163,175,.6);
  border-radius: .9rem;
  padding: 1rem;
  background: rgba(249,250,251,.6);
}
html.dark .ak-empty{
  border-color: rgba(255,255,255,.14);
  background: rgba(10,24,16,.45);
}
.ak-empty-title{ font-weight:900; }
.ak-empty-sub{ margin-top:.25rem; font-size:.875rem; }

/* Wallet chips */
.ak-wallet-chip{
  position: relative;
  display:flex;
  align-items:center;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  border-radius: .9rem;
  overflow: hidden;
}
html.dark .ak-wallet-chip{
  border-color: rgba(255,255,255,.10);
  background: rgba(10,24,16,.55);
}
.ak-wallet-chip-link{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding: .55rem .65rem;
  text-decoration:none;
}
.ak-wallet-chip-link:hover{ background: rgba(16,185,129,.06); }
html.dark .ak-wallet-chip-link:hover{ background: rgba(241,196,15,.08); }

.ak-wallet-ico{
  width: 2rem; height:2rem;
  border-radius: .75rem;
  border:1px solid #e5e7eb;
  background:#ffffff;
  display:flex; align-items:center; justify-content:center;
  color:#374151;
}
html.dark .ak-wallet-ico{
  border-color: rgba(255,255,255,.12);
  background: rgba(19,43,29,.6);
  color:#ecfdf5;
}

.ak-chip-menu-btn{
  margin-left:auto;
  width: 2.5rem;
  height: 2.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-left: 1px solid rgba(229,231,235,.9);
  color:#374151;
}
.ak-chip-menu-btn:hover{ background: rgba(0,0,0,.03); }
html.dark .ak-chip-menu-btn{
  border-left-color: rgba(255,255,255,.10);
  color:#ecfdf5;
}
html.dark .ak-chip-menu-btn:hover{ background: rgba(255,255,255,.05); }

.ak-chip-menu{
  position:absolute;
  right: .4rem;
  top: calc(100% + .35rem);
  width: 11rem;
  border-radius: .9rem;
  border: 1px solid #e5e7eb;
  background:#ffffff;
  box-shadow: 0 18px 30px rgba(0,0,0,.10);
  z-index: 20;
  overflow:hidden;
}
html.dark .ak-chip-menu{
  border-color: rgba(255,255,255,.12);
  background: rgba(10,24,16,.92);
  box-shadow: 0 24px 50px rgba(0,0,0,.45);
}
.ak-chip-item{
  display:block;
  padding: .65rem .75rem;
  font-size: .875rem;
  color:#111827;
}
.ak-chip-item:hover{ background:#f3f4f6; }
html.dark .ak-chip-item{ color:#ecfdf5; }
html.dark .ak-chip-item:hover{ background: rgba(255,255,255,.06); }

.ak-chip-copied{ font-weight: 900; }

/* Prevent random horizontal scroll */
.ak-page, .ak-page * { max-width: 100%; }
.ak-page { overflow-x: hidden; }

/* Hero */
.ak-hero{
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 1.1rem;
  padding: 1.1rem 1.1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.04);
}
html.dark .ak-hero{
  border-color: rgba(255,255,255,.10);
  background: rgba(19,43,29,.45);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

/* Open/Closed pill */
.ak-status{
  display:inline-flex;
  align-items:center;
  padding:.3rem .6rem;
  border-radius: 999px;
  font-size:.75rem;
  font-weight:900;
  border:1px solid transparent;
  white-space:nowrap;
}
.ak-status-open{ background: rgba(16,185,129,.12); color:#065f46; border-color: rgba(16,185,129,.25); }
.ak-status-closed{ background: rgba(107,114,128,.14); color:#374151; border-color: rgba(107,114,128,.25); }
html.dark .ak-status-open{ color:#34d399; }
html.dark .ak-status-closed{ color:#d1d5db; }

/* Stats - tighter + app-like */
.ak-stat{
  display:block;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius: 1rem;
  padding: .9rem .95rem;
  text-decoration:none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.ak-stat:hover{ transform: translateY(-1px); border-color:#cbd5e1; background:#f9fafb; }
html.dark .ak-stat{
  border-color: rgba(255,255,255,.10);
  background: rgba(10,24,16,.55);
}
html.dark .ak-stat:hover{
  border-color: rgba(241,196,15,.35);
  background: rgba(10,24,16,.75);
}
.ak-stat-k{ font-size:.75rem; color:#6b7280; }
.ak-stat-v{ font-size:1.35rem; font-weight:900; color:#111827; margin-top:.15rem; }
.ak-stat-s{ font-size:.75rem; margin-top:.15rem; }
html.dark .ak-stat-k{ color:#a7b2ab; }
html.dark .ak-stat-v{ color:#ecfdf5; }

/* Simple “row link” cards */
.ak-rowlink{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius: 1rem;
  padding: .85rem .9rem;
  text-decoration:none;
  transition: border-color .12s ease, background .12s ease;
}
.ak-rowlink:hover{ border-color:#cbd5e1; background:#f9fafb; }
html.dark .ak-rowlink{
  border-color: rgba(255,255,255,.10);
  background: rgba(10,24,16,.55);
}
html.dark .ak-rowlink:hover{
  border-color: rgba(241,196,15,.35);
  background: rgba(10,24,16,.75);
}
.ak-rowchev{
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e5e7eb;
  color:#374151;
  background:#fff;
  flex: 0 0 auto;
}
html.dark .ak-rowchev{
  border-color: rgba(255,255,255,.12);
  background: rgba(19,43,29,.6);
  color:#ecfdf5;
}

/* Item cards (recent entries) */
.ak-item{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius: 1rem;
  padding: .9rem .95rem;
}
html.dark .ak-item{
  border-color: rgba(255,255,255,.10);
  background: rgba(10,24,16,.55);
}
.ak-mini{
  font-size: .75rem;
  color: #0f7a54;
  background: transparent;
  padding: .2rem 0;
}
.ak-mini:hover{ text-decoration: underline; }
html.dark .ak-mini{ color:#F1C40F; }

/* Chips (simplified) */
.ak-chip{
  position: relative;
  display:flex;
  align-items:center;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  border-radius: 999px;
  overflow:hidden;
}
html.dark .ak-chip{
  border-color: rgba(255,255,255,.10);
  background: rgba(10,24,16,.55);
}
.ak-chip-main{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding: .5rem .75rem;
  text-decoration:none;
}
.ak-chip-ico{
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#374151;
  background:#fff;
  flex: 0 0 auto;
}
html.dark .ak-chip-ico{
  border-color: rgba(255,255,255,.12);
  background: rgba(19,43,29,.6);
  color:#ecfdf5;
}
.ak-chip-btn{
  width: 2.2rem;
  height: 2.2rem;
  border-left: 1px solid rgba(229,231,235,.9);
  color:#374151;
}
html.dark .ak-chip-btn{
  border-left-color: rgba(255,255,255,.10);
  color:#ecfdf5;
}

/* Menu positioning stays the same */

/* Clean separator (no gold pipes / circles) */
.ak-sep{
  margin: 0 .5rem;
  opacity: .65;
}

/* Countdown badge */
.ak-countdown{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,24,16,.55);
  border-radius: 1rem;
  padding: .55rem .75rem;
  min-width: 120px;
  text-align: right;
}
.ak-countdown-k{
  font-size: .72rem;
  color: rgba(255,255,255,.70);
  line-height: 1.1;
}
.ak-countdown-v{
  margin-top: .15rem;
  font-weight: 900;
  color: #F1C40F;
  letter-spacing: .2px;
}
.ak-countdown.is-closed .ak-countdown-v{ color: rgba(255,255,255,.75); }
html:not(.dark) .ak-countdown{
  border-color: #e5e7eb;
  background: #fff;
}
html:not(.dark) .ak-countdown-k{ color:#6b7280; }
html:not(.dark) .ak-countdown-v{ color:#8a6a00; }

/* Make hero buttons behave (no odd hover inversions) */
.ak-hero .btn{ transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; }
.ak-hero .btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }

/* Wallet chip menu (ensure it shows above cards) */
.ak-chip{ position: relative; }
.ak-chip-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 190px;
  z-index: 50;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,24,16,.92);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  overflow: hidden;
}
html:not(.dark) .ak-chip-menu{
  border-color:#e5e7eb;
  background:#fff;
  box-shadow: 0 20px 40px rgba(0,0,0,.10);
}
.ak-chip-item{
  display:block;
  padding: .7rem .85rem;
  font-size: .9rem;
  color: rgba(255,255,255,.86);
}
html:not(.dark) .ak-chip-item{ color:#111827; }
.ak-chip-item:hover{
  background: rgba(241,196,15,.10);
}
html:not(.dark) .ak-chip-item:hover{ background:#f9fafb; }

/* Wallet “⋯” button hover */
.ak-chip-btn:hover{
  background: rgba(241,196,15,.12);
}

/* Ensure form bottom alignment (extra safety) */
[data-wallet-form]{ align-items: end; }


/* Tiles (wallet cards) */
.ak-tile{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,24,16,.35);
  padding: 14px;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.ak-tile:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.ak-tile.is-active{
  border-color: rgba(241,196,15,.55);
  box-shadow: 0 0 0 3px rgba(241,196,15,.14);
}

html:not(.dark) .ak-tile{
  border-color:#e5e7eb;
  background:#fff;
}
html:not(.dark) .ak-tile.is-active{
  border-color:#d1b44a;
  box-shadow: 0 0 0 3px rgba(241,196,15,.18);
}

.ak-chiptag{
  display:inline-flex;
  align-items:center;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  background: rgba(241,196,15,.12);
  color: rgba(241,196,15,.95);
}
html:not(.dark) .ak-chiptag{
  background:#fff7d1;
  color:#7a5a00;
}

.ak-badge{
  font-size:.72rem;
  font-weight:800;
  color:#F1C40F;
}
html:not(.dark) .ak-badge{ color:#7a5a00; }

/* Select */
.ak-select{
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,24,16,.35);
  color: rgba(255,255,255,.92);
  padding: 0 .7rem;
}
.ak-select:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(241,196,15,.14);
  border-color: rgba(241,196,15,.55);
}
html:not(.dark) .ak-select{
  background:#fff;
  color:#111827;
  border-color:#e5e7eb;
}

/* Table */
.ak-tablewrap{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,24,16,.25);
}
html:not(.dark) .ak-tablewrap{
  border-color:#e5e7eb;
  background:#fff;
}
.ak-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.ak-table thead th{
  
  padding: 12px 14px;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  background: rgba(10,24,16,.45);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
html:not(.dark) .ak-table thead th{
  color:#6b7280;
  background:#f9fafb;
  border-bottom:1px solid #e5e7eb;
}
.ak-table tbody td{
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  vertical-align: top;
}
html:not(.dark) .ak-table tbody td{
  border-top: 1px solid #f3f4f6;
}

/* Mini copy button */
.ak-mini{
  margin-left: .5rem;
  font-size: .75rem;
  color: rgba(241,196,15,.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}
html:not(.dark) .ak-mini{ color:#7a5a00; }

/* History page inputs */
.ak-check{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(10,24,16,.35);
  appearance: none;
  display: inline-block;
  position: relative;
}
.ak-check:checked{
  border-color: rgba(241,196,15,.65);
  box-shadow: 0 0 0 3px rgba(241,196,15,.12);
}
.ak-check:checked::after{
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  background: rgba(241,196,15,.95);
}
html:not(.dark) .ak-check{
  background:#fff;
  border-color:#d1d5db;
}
html:not(.dark) .ak-check:checked{
  border-color:#d1b44a;
}

/* Winner pill */
.ak-pill-win{
  display:inline-flex;
  align-items:center;
  padding:.25rem .6rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  background: rgba(99,102,241,.16);
  color: rgba(199,210,254,.98);
  border: 1px solid rgba(99,102,241,.25);
}
html:not(.dark) .ak-pill-win{
  background:#eef2ff;
  color:#3730a3;
  border-color:#c7d2fe;
}

/* Make date inputs consistent if your ak-input doesn't fully style them */
.ak-input[type="date"]{
  min-height: 44px;
}
/* =========================================================
   PROFILE PAGE — DARK MODE ONLY (no layout changes)
   Works with Breeze/Jetstream default markup + Tailwind classes
   ========================================================= */

/* Page background + general text */
html.dark .min-h-screen.bg-gray-100,
html.dark body {
  background: #070c0a; /* deep green-black */
  color: rgba(255,255,255,.92);
}

/* Top "Profile" bar area (keep structure, just dark colours) */
html.dark header.bg-white,
html.dark header {
  *background: rgba(12, 20, 16, .92);
  *background: rgba(11, 41, 26, 0.92);
  *background: rgb(2, 61, 38) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

html.dark .ak-subpage-header {
  *background: rgba(12, 20, 16, .92);
  *background: rgba(11, 41, 26, 0.92);
  background: rgb(2, 61, 38) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.dark header.bg-white {
background: rgb(2, 61, 38) !important;
}


html.dark header h2,
html.dark header .text-gray-800 {
  color: rgba(255,255,255,.92) !important;
}

/* Cards */
html.dark .bg-white.shadow.sm\:rounded-lg {
  background: rgba(12, 20, 16, .72) !important;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* Section headings + helper text */
html.dark .bg-white.shadow.sm\:rounded-lg h2,
html.dark .bg-white.shadow.sm\:rounded-lg h3,
html.dark .bg-white.shadow.sm\:rounded-lg .text-gray-900,
html.dark .bg-white.shadow.sm\:rounded-lg .text-gray-800,
html.dark .bg-white.shadow.sm\:rounded-lg .text-gray-700 {
  color: rgba(255,255,255,.92) !important;
}

html.dark .bg-white.shadow.sm\:rounded-lg .text-gray-600,
html.dark .bg-white.shadow.sm\:rounded-lg .text-gray-500 {
  color: rgba(255,255,255,.70) !important;
}

/* Inputs (keep them readable + correct caret/placeholder) */
html.dark .bg-white.shadow.sm\:rounded-lg input[type="text"],
html.dark .bg-white.shadow.sm\:rounded-lg input[type="email"],
html.dark .bg-white.shadow.sm\:rounded-lg input[type="password"] {
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.14) !important;
}

html.dark .bg-white.shadow.sm\:rounded-lg input::placeholder {
  color: rgba(255,255,255,.45) !important;
}

html.dark .bg-white.shadow.sm\:rounded-lg input:focus {
  outline: none !important;
  border-color: rgba(61,153,112,.75) !important; /* Akuno green */
  box-shadow: 0 0 0 3px rgba(61,153,112,.22) !important;
}

/* Labels */
html.dark .bg-white.shadow.sm\:rounded-lg label,
html.dark .bg-white.shadow.sm\:rounded-lg .text-gray-700 {
  color: rgba(255,255,255,.82) !important;
}

/* Validation/errors */
html.dark .bg-white.shadow.sm\:rounded-lg .text-red-600,
html.dark .bg-white.shadow.sm\:rounded-lg .text-red-500 {
  color: #fb7185 !important;
}

/* Make SAVE buttons Akuno green (without touching Delete Account) */
/* Breeze usually uses: bg-gray-800 hover:bg-gray-700 */
html .bg-white.shadow.sm\:rounded-lg button.bg-gray-800:not(.bg-red-600):not(.bg-rose-600),
html .bg-white.shadow.sm\:rounded-lg a.bg-gray-800:not(.bg-red-600):not(.bg-rose-600) {
  background: #0b7a57 !important;          /* Akuno green */
  border-color: transparent !important;
}

html .bg-white.shadow.sm\:rounded-lg button.bg-gray-800:not(.bg-red-600):not(.bg-rose-600):hover,
html .bg-white.shadow.sm\:rounded-lg a.bg-gray-800:not(.bg-red-600):not(.bg-rose-600):hover {
  background: #096b4d !important;
}

/* If buttons are not using bg-gray-800 (some Breeze versions), this still upgrades primary submits */
html .bg-white.shadow.sm\:rounded-lg form button[type="submit"]:not(.bg-red-600):not(.bg-rose-600) {
  background: #0b7a57;
  color: #fff;
}

html .bg-white.shadow.sm\:rounded-lg form button[type="submit"]:not(.bg-red-600):not(.bg-rose-600):hover {
  background: #096b4d;
}

/* Keep Delete button clearly destructive in dark mode */
html.dark .bg-white.shadow.sm\:rounded-lg button.bg-red-600,
html.dark .bg-white.shadow.sm\:rounded-lg button.bg-rose-600 {
  box-shadow: 0 0 0 3px rgba(244,63,94,.14);
}

/* =========================================================
   ADMIN UI HELPERS (light + dark)
   Used by admin dashboard + future admin pages
   ========================================================= */

.ak-admin-subhead{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  padding: 0 4px;
}

.ak-admin-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

/* Card */
.ak-card{
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.ak-card--pad{ padding:16px; }

html.dark .ak-card{
  background: rgba(12, 20, 16, .72);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* Typography helpers */
.ak-kicker{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: rgba(107,114,128,1);
}

html.dark .ak-kicker{ color: rgba(255,255,255,.55); }

.ak-metric{
  margin-top:6px;
  font-size:26px;
  font-weight:700;
  color: rgba(17,24,39,1);
}

html.dark .ak-metric{ color: rgba(255,255,255,.92); }

.ak-subtext{
  margin-top:6px;
  font-size:12px;
  color: rgba(107,114,128,1);
}

html.dark .ak-subtext{ color: rgba(255,255,255,.62); }

/* Chips (actions) */
.ak-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.14);
  color: rgba(17,24,39,.88);
  background: rgba(255,255,255,.75);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
}

.ak-chip:hover{
  background: rgba(249,250,251,1);
}

.ak-chip--primary{
  background:#0b7a57;
  border-color: transparent;
  color:#fff;
}

.ak-chip--primary:hover{ background:#096b4d; }

html.dark .ak-chip{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
}

html.dark .ak-chip:hover{
  background: rgba(255,255,255,.09);
}

html.dark .ak-chip--primary{
  background:#0b7a57;
  color:#fff;
}

/* Links */
.ak-link{
  color:#0b7a57;
  font-weight:600;
  text-decoration:none;
}
.ak-link:hover{ text-decoration:underline; }

html.dark .ak-link{
  color: #F1C40F; /* gold links in dark mode */
}

/* Pills */
.ak-pill{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid transparent;
}

.ak-pill--good{ background: rgba(16,185,129,.16); color: rgba(16,185,129,1); border-color: rgba(16,185,129,.25); }
.ak-pill--warn{ background: rgba(245,158,11,.18); color: rgba(217,119,6,1); border-color: rgba(245,158,11,.25); }
.ak-pill--bad{  background: rgba(244,63,94,.16);  color: rgba(244,63,94,1);  border-color: rgba(244,63,94,.25); }
.ak-pill--neutral{ background: rgba(107,114,128,.14); color: rgba(107,114,128,1); border-color: rgba(107,114,128,.25); }

html.dark .ak-pill--good{ color: rgba(255,255,255,.92); background: rgba(16,185,129,.22); border-color: rgba(16,185,129,.25); }
html.dark .ak-pill--warn{ color: rgba(255,255,255,.92); background: rgba(245,158,11,.22); border-color: rgba(245,158,11,.25); }
html.dark .ak-pill--bad{  color: rgba(255,255,255,.92); background: rgba(244,63,94,.22); border-color: rgba(244,63,94,.25); }

/* Mini stat blocks inside circle cards */
.ak-mini{
  border-radius:12px;
  padding:10px;
  border:1px solid rgba(17,24,39,.08);
  background: rgba(249,250,251,1);
}

.ak-mini-k{ font-size:11px; color: rgba(107,114,128,1); }
.ak-mini-v{ margin-top:4px; font-weight:800; color: rgba(17,24,39,1); }
.ak-mini-s{ margin-top:2px; font-size:11px; color: rgba(107,114,128,1); }

.ak-mini--good{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.18); }
.ak-mini--bad{  background: rgba(244,63,94,.10); border-color: rgba(244,63,94,.18); }
.ak-mini--warn{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.18); }

html.dark .ak-mini{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}

html.dark .ak-mini-k,
html.dark .ak-mini-s{ color: rgba(255,255,255,.60); }

html.dark .ak-mini-v{ color: rgba(255,255,255,.92); }

/* Tables */
.ak-thead{
  background: rgba(249,250,251,1);
  color: rgba(55,65,81,1);
}

html.dark .ak-thead{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.70);
}

.ak-tr{
  border-top:1px solid rgba(17,24,39,.08);
}

html.dark .ak-tr{
  border-top:1px solid rgba(255,255,255,.10);
}

html.dark table,
html.dark td,
html.dark th{
  color: rgba(255,255,255,.82);
}


/* =========================
   Admin dashboard (scoped)
   ========================= */

.admin-dashboard .admin-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.06);
  padding: 16px;
}

.admin-dashboard .admin-kicker{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(71,85,105,.9);
}

.admin-dashboard .admin-metric{
  margin-top: 6px;
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}

.admin-dashboard .admin-sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(71,85,105,.95);
}

.admin-dashboard .admin-muted{ color: rgba(71,85,105,.95); }
.admin-dashboard .admin-strong{ color: #0f172a; }
.admin-dashboard .admin-dim{ color: rgba(148,163,184,.95); }

.admin-dashboard .admin-link{
  color: #0f766e; /* Akuno green-ish */
  font-weight: 500;
  text-decoration: none;
}
.admin-dashboard .admin-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-dashboard .admin-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
  color: rgba(15,23,42,.85);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.admin-dashboard .admin-pill:hover{
  background: rgba(2,6,23,.04);
}
.admin-dashboard .admin-pill--primary{
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
.admin-dashboard .admin-pill--primary:hover{
  background: #0b5f58;
}

.admin-dashboard .admin-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #065f46;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.25);
}

.admin-dashboard .admin-mini{
  border-radius: 12px;
  padding: 10px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(2,6,23,.02);
}
.admin-dashboard .admin-mini__label{
  font-size: 11px;
  color: rgba(71,85,105,.95);
}
.admin-dashboard .admin-mini__value{
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}
.admin-dashboard .admin-mini__sub{
  margin-top: 2px;
  font-size: 11px;
  color: rgba(71,85,105,.95);
}

.admin-dashboard .admin-mini--good{
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.22);
}
.admin-dashboard .admin-mini--bad{
  background: rgba(244,63,94,.08);
  border-color: rgba(244,63,94,.18);
}
.admin-dashboard .admin-mini--wait{
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.20);
}

.admin-dashboard .admin-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
  color: rgba(15,23,42,.90);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.admin-dashboard .admin-btn:hover{ background: rgba(2,6,23,.04); }
.admin-dashboard .admin-btn--soft{
  border-color: rgba(15,118,110,.22);
  color: #0f766e;
}

.admin-dashboard .admin-thead{
  background: rgba(2,6,23,.03);
  color: rgba(71,85,105,.95);
}
.admin-dashboard .admin-tr{
  border-top: 1px solid rgba(15,23,42,.10);
}
.admin-dashboard .admin-status{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(148,163,184,.18);
  color: rgba(15,23,42,.85);
}
.admin-dashboard .admin-status--ok{
  background: rgba(16,185,129,.16);
  color: #065f46;
}
.admin-dashboard .admin-status--bad{
  background: rgba(244,63,94,.14);
  color: #9f1239;
}
.admin-dashboard .admin-status--wait{
  background: rgba(245,158,11,.16);
  color: #92400e;
}

/* ---- Dark mode ---- */
.dark .admin-dashboard .admin-card{
  background: rgba(17,24,39,.55);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.dark .admin-dashboard .admin-kicker{
  color: rgba(203,213,225,.75);
}

.dark .admin-dashboard .admin-metric,
.dark .admin-dashboard .admin-strong{
  color: rgba(255,255,255,.92);
}

.dark .admin-dashboard .admin-sub,
.dark .admin-dashboard .admin-muted{
  color: rgba(203,213,225,.82);
}

.dark .admin-dashboard .admin-dim{
  color: rgba(148,163,184,.70);
}

.dark .admin-dashboard .admin-link{
  color: #f1c40f; /* gold links in dark mode */
}
.dark .admin-dashboard .admin-link:hover{
  text-decoration: underline;
}

.dark .admin-dashboard .admin-pill{
  background: rgba(17,24,39,.40);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
}
.dark .admin-dashboard .admin-pill:hover{
  background: rgba(255,255,255,.06);
}
.dark .admin-dashboard .admin-pill--primary{
  background: rgba(15,118,110,.95);
  border-color: rgba(15,118,110,.95);
  color: #fff;
}
.dark .admin-dashboard .admin-pill--primary:hover{
  background: rgba(13,96,90,.95);
}

.dark .admin-dashboard .admin-chip{
  color: rgba(236,253,245,.92);
  background: rgba(16,185,129,.18);
  border-color: rgba(16,185,129,.22);
}

.dark .admin-dashboard .admin-mini{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.dark .admin-dashboard .admin-mini__label{
  color: rgba(203,213,225,.78);
}
.dark .admin-dashboard .admin-mini__value{
  color: rgba(255,255,255,.92);
}
.dark .admin-dashboard .admin-mini__sub{
  color: rgba(203,213,225,.72);
}

.dark .admin-dashboard .admin-mini--good{
  background: rgba(16,185,129,.14);
  border-color: rgba(16,185,129,.20);
}
.dark .admin-dashboard .admin-mini--bad{
  background: rgba(244,63,94,.12);
  border-color: rgba(244,63,94,.18);
}
.dark .admin-dashboard .admin-mini--wait{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.20);
}

.dark .admin-dashboard .admin-btn{
  background: rgba(17,24,39,.40);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
}
.dark .admin-dashboard .admin-btn:hover{
  background: rgba(255,255,255,.06);
}
.dark .admin-dashboard .admin-btn--soft{
  border-color: rgba(241,196,15,.25);
  color: #f1c40f;
}

.dark .admin-dashboard .admin-thead{
  background: rgba(255,255,255,.04);
  color: rgba(203,213,225,.80);
}
.dark .admin-dashboard .admin-tr{
  border-top-color: rgba(255,255,255,.08);
}

.dark .admin-dashboard .admin-status{
  background: rgba(148,163,184,.16);
  color: rgba(255,255,255,.80);
}
.dark .admin-dashboard .admin-status--ok{
  background: rgba(16,185,129,.18);
  color: rgba(236,253,245,.92);
}
.dark .admin-dashboard .admin-status--bad{
  background: rgba(244,63,94,.16);
  color: rgba(255,228,230,.92);
}
.dark .admin-dashboard .admin-status--wait{
  background: rgba(245,158,11,.18);
  color: rgba(255,251,235,.92);
}


/* =========================
   Admin Entries (scoped)
   ========================= */

.admin-entries .admin-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.06);
  padding: 16px;
  text-decoration: none; /* prevent weird underline inheritance */
}

.admin-entries .admin-card--link:hover{
  background: rgba(2,6,23,.02);
}

.admin-entries .admin-kicker{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(71,85,105,.9);
}

.admin-entries .admin-muted{ color: rgba(71,85,105,.95); }
.admin-entries .admin-strong{ color: #0f172a; }

.admin-entries .admin-go{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(15,118,110,.25); /* Akuno green */
  color: #0f766e;
  background: rgba(15,118,110,.06);
  flex: 0 0 auto;
}

/* ---- Dark mode ---- */
.dark .admin-entries .admin-card{
  background: rgba(17,24,39,.55);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.dark .admin-entries .admin-card--link:hover{
  background: rgba(255,255,255,.05);
}

.dark .admin-entries .admin-kicker{
  color: rgba(203,213,225,.75);
}

.dark .admin-entries .admin-muted{
  color: rgba(203,213,225,.82);
}

.dark .admin-entries .admin-strong{
  color: rgba(255,255,255,.92);
}

.dark .admin-entries .admin-go{
  border-color: rgba(241,196,15,.25); /* gold accent in dark */
  color: #f1c40f;
  background: rgba(241,196,15,.10);
}

/* =========================
   Admin Entries Show (scoped)
   ========================= */

.admin-entries-show .admin-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}

.admin-entries-show .admin-card{ padding:16px; }
.admin-entries-show .admin-card.overflow-x-auto{ padding:0; }

.admin-entries-show .admin-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.admin-entries-show .admin-kicker{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(71,85,105,.9);
}

.admin-entries-show .admin-muted{ color:rgba(71,85,105,.95); }
.admin-entries-show .admin-strong{ color:#0f172a; }

.admin-entries-show .admin-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,118,110,.25);
  background:rgba(15,118,110,.06);
  color:#0f766e;
  font-size:13px;
  text-decoration:none;
}
.admin-entries-show .admin-chip:hover{
  background:rgba(15,118,110,.10);
}

.admin-entries-show .admin-link{
  color:#0f766e;             /* Akuno green */
  text-decoration:none;       /* kill unwanted underlines */
}
.admin-entries-show .admin-link:hover{
  text-decoration:underline;  /* only on hover */
}

.admin-entries-show .admin-table thead{
  background:rgba(2,6,23,.03);
}
.admin-entries-show .admin-table th{
  color:#0f172a;
  font-weight:600;
}
.admin-entries-show .admin-table td,
.admin-entries-show .admin-table th{
  white-space:nowrap;
}
.admin-entries-show .admin-table td{
  color:#111827;
}

.admin-entries-show .admin-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(15,23,42,.10);
}

.admin-entries-show .admin-badge--ok{
  background:rgba(16,185,129,.12);
  color:rgba(5,150,105,1);
  border-color:rgba(16,185,129,.25);
}
.admin-entries-show .admin-badge--bad{
  background:rgba(244,63,94,.10);
  color:rgba(190,18,60,1);
  border-color:rgba(244,63,94,.22);
}
.admin-entries-show .admin-badge--wait{
  background:rgba(245,158,11,.12);
  color:rgba(180,83,9,1);
  border-color:rgba(245,158,11,.25);
}

/* ---- Dark mode ---- */
.dark .admin-entries-show .admin-card{
  background:rgba(17,24,39,.55);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}

.dark .admin-entries-show .admin-card-head{
  border-bottom-color:rgba(255,255,255,.08);
}

.dark .admin-entries-show .admin-kicker{ color:rgba(203,213,225,.70); }
.dark .admin-entries-show .admin-muted{ color:rgba(203,213,225,.82); }
.dark .admin-entries-show .admin-strong{ color:rgba(255,255,255,.92); }

.dark .admin-entries-show .admin-chip{
  border-color:rgba(241,196,15,.22);
  background:rgba(241,196,15,.10);
  color:#f1c40f;
}

.dark .admin-entries-show .admin-link{
  color:#f1c40f; /* gold on dark */
}

.dark .admin-entries-show .admin-table thead{
  background:rgba(255,255,255,.04);
}
.dark .admin-entries-show .admin-table th{
  color:rgba(255,255,255,.86);
}
.dark .admin-entries-show .admin-table td{
  color:rgba(226,232,240,.90);
}

.dark .admin-entries-show .admin-badge{
  border-color:rgba(255,255,255,.10);
}
/* =========================
   Admin Entries History (scoped)
   ========================= */

.admin-entries-history .admin-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}

.admin-entries-history .admin-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.admin-entries-history .admin-muted{ color:rgba(71,85,105,.95); }
.admin-entries-history .admin-strong{ color:#0f172a; }

.admin-entries-history .admin-link{
  color:#0f766e;
  text-decoration:none;
}
.admin-entries-history .admin-link:hover{
  text-decoration:underline;
}

.admin-entries-history .admin-table thead{
  background:rgba(2,6,23,.03);
}
.admin-entries-history .admin-table th{
  color:#0f172a;
  font-weight:600;
}
.admin-entries-history .admin-table td{
  color:#111827;
}
.admin-entries-history .admin-table td,
.admin-entries-history .admin-table th{
  white-space:nowrap;
}

.admin-entries-history .admin-input{
  height:44px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:#0f172a;
  outline:none;
}
.admin-entries-history .admin-input:focus{
  border-color:rgba(15,118,110,.55);
  box-shadow:0 0 0 3px rgba(15,118,110,.15);
}

.admin-entries-history .admin-btn{
  height:44px;
  padding:0 14px;
  border-radius:12px;
  background:#0f766e;
  color:#fff;
  font-weight:600;
  border:1px solid rgba(15,118,110,.25);
}
.admin-entries-history .admin-btn:hover{ filter:brightness(.95); }

.admin-entries-history .admin-btn--small{
  height:36px;
  padding:0 12px;
  border-radius:999px;
  font-size:13px;
}

/* ---- Dark mode ---- */
.dark .admin-entries-history .admin-card{
  background:rgba(17,24,39,.55);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.dark .admin-entries-history .admin-card-head{
  border-bottom-color:rgba(255,255,255,.08);
}
.dark .admin-entries-history .admin-muted{ color:rgba(203,213,225,.82); }
.dark .admin-entries-history .admin-strong{ color:rgba(255,255,255,.92); }

.dark .admin-entries-history .admin-link{
  color:#f1c40f;
}

.dark .admin-entries-history .admin-table thead{
  background:rgba(255,255,255,.04);
}
.dark .admin-entries-history .admin-table th{
  color:rgba(255,255,255,.86);
}
.dark .admin-entries-history .admin-table td{
  color:rgba(226,232,240,.90);
}

.dark .admin-entries-history .admin-input{
  background:rgba(17,24,39,.70);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
}
.dark .admin-entries-history .admin-input:focus{
  border-color:rgba(241,196,15,.40);
  box-shadow:0 0 0 3px rgba(241,196,15,.14);
}

.dark .admin-entries-history .admin-btn{
  background:#0f766e;
  border-color:rgba(15,118,110,.35);
}
/* =========================
   Admin Draws (scoped)
   ========================= */

.admin-draws .admin-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}

.admin-draws .admin-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.admin-draws .admin-card-head--tight{
  padding:12px 16px;
}

.admin-draws .admin-muted{ color:rgba(71,85,105,.95); }
.admin-draws .admin-strong{ color:#0f172a; }

.admin-draws .admin-alert{
  border-radius:12px;
  padding:10px 12px;
  border:1px solid transparent;
  font-weight:500;
}
.admin-draws .admin-alert--error{
  background:rgba(244,63,94,.12);
  border-color:rgba(244,63,94,.25);
  color:#9f1239;
}
.admin-draws .admin-alert--success{
  background:rgba(16,185,129,.12);
  border-color:rgba(16,185,129,.25);
  color:#065f46;
}

.admin-draws .admin-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid transparent;
  white-space:nowrap;
}
.admin-draws .admin-pill--ok{
  background:rgba(15,118,110,.12);
  border-color:rgba(15,118,110,.28);
  color:#0f766e;
}
.admin-draws .admin-pill--warn{
  background:rgba(245,158,11,.16);
  border-color:rgba(245,158,11,.30);
  color:#92400e;
}
.admin-draws .admin-pill--neutral{
  background:rgba(2,6,23,.06);
  border-color:rgba(2,6,23,.10);
  color:#334155;
}

.admin-draws .admin-draw-card{
  box-shadow:none;
}
.admin-draws .admin-draw-card--ok{
  border-color:rgba(15,118,110,.28) !important;
}

.admin-draws .admin-btn{
  height:40px;
  padding:0 14px;
  border-radius:12px;
  background:#0f766e;
  color:#fff;
  font-weight:700;
  border:1px solid rgba(15,118,110,.25);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.admin-draws .admin-btn:hover{ filter:brightness(.95); }
.admin-draws .admin-btn--small{
  height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:13px;
}

.admin-draws .admin-chip-link{
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  color:#0f172a;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.admin-draws .admin-chip-link:hover{
  background:rgba(2,6,23,.03);
}

.admin-draws .admin-link{
  color:#0f766e;
  text-decoration:none;
  font-weight:600;
}
.admin-draws .admin-link:hover{ text-decoration:underline; }
.admin-draws .admin-link--muted{
  color:rgba(51,65,85,.92);
}

.admin-draws .admin-table thead{
  background:rgba(2,6,23,.03);
}
.admin-draws .admin-table th{
  color:#0f172a;
  font-weight:700;
}
.admin-draws .admin-table td{
  color:#111827;
}

/* ---- Dark mode ---- */
.dark .admin-draws .admin-card{
  background:rgba(17,24,39,.55);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.dark .admin-draws .admin-card-head{
  border-bottom-color:rgba(255,255,255,.08);
}
.dark .admin-draws .admin-muted{ color:rgba(203,213,225,.82); }
.dark .admin-draws .admin-strong{ color:rgba(255,255,255,.92); }

.dark .admin-draws .admin-alert--error{
  background:rgba(244,63,94,.14);
  border-color:rgba(244,63,94,.22);
  color:rgba(254,202,202,.92);
}
.dark .admin-draws .admin-alert--success{
  background:rgba(16,185,129,.14);
  border-color:rgba(16,185,129,.22);
  color:rgba(167,243,208,.92);
}

.dark .admin-draws .admin-pill--neutral{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  color:rgba(226,232,240,.92);
}
.dark .admin-draws .admin-pill--warn{
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.28);
  color:rgba(253,230,138,.92);
}
.dark .admin-draws .admin-pill--ok{
  background:rgba(15,118,110,.18);
  border-color:rgba(15,118,110,.30);
  color:rgba(167,243,208,.92);
}

.dark .admin-draws .admin-chip-link{
  background:rgba(17,24,39,.65);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.90);
}
.dark .admin-draws .admin-chip-link:hover{
  background:rgba(255,255,255,.06);
}

.dark .admin-draws .admin-link{
  color:#f1c40f;
}
.dark .admin-draws .admin-link--muted{
  color:rgba(226,232,240,.82);
}

.dark .admin-draws .admin-table thead{
  background:rgba(255,255,255,.04);
}
.dark .admin-draws .admin-table th{
  color:rgba(255,255,255,.86);
}
.dark .admin-draws .admin-table td{
  color:rgba(226,232,240,.90);
}

/* =========================
   Admin Draws Show (scoped)
   ========================= */

.admin-draw-show .admin-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}

.admin-draw-show .admin-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.admin-draw-show .admin-muted{ color:rgba(71,85,105,.95); }
.admin-draw-show .admin-strong{ color:#0f172a; }

.admin-draw-show .admin-alert{
  border-radius:12px;
  padding:10px 12px;
  border:1px solid transparent;
  font-weight:600;
}
.admin-draw-show .admin-alert--warn{
  background:rgba(245,158,11,.16);
  border-color:rgba(245,158,11,.28);
  color:#92400e;
}
.admin-draw-show .admin-alert--error{
  background:rgba(244,63,94,.12);
  border-color:rgba(244,63,94,.25);
  color:#9f1239;
}
.admin-draw-show .admin-alert--success{
  background:rgba(16,185,129,.12);
  border-color:rgba(16,185,129,.25);
  color:#065f46;
}

.admin-draw-show .admin-link{
  color:#0f766e;
  text-decoration:none;
  font-weight:700;
}
.admin-draw-show .admin-link:hover{ text-decoration:underline; }

.admin-draw-show .admin-chip-link{
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  color:#0f172a;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.admin-draw-show .admin-chip-link:hover{ background:rgba(2,6,23,.03); }

.admin-draw-show .admin-btn{
  height:40px;
  padding:0 14px;
  border-radius:12px;
  background:#0f766e;
  color:#fff;
  font-weight:800;
  border:1px solid rgba(15,118,110,.25);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.admin-draw-show .admin-btn:hover{ filter:brightness(.95); }
.admin-draw-show .admin-btn--small{
  height:34px;
  padding:0 12px;
  border-radius:12px;
  font-size:12px;
}
.admin-draw-show .admin-btn--danger{
  background:#e11d48;
  border-color:rgba(225,29,72,.25);
}
.admin-draw-show .admin-btn--danger:hover{ filter:brightness(.95); }

.admin-draw-show .admin-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid transparent;
  white-space:nowrap;
}
.admin-draw-show .admin-pill--ok{
  background:rgba(15,118,110,.12);
  border-color:rgba(15,118,110,.28);
  color:#0f766e;
}
.admin-draw-show .admin-pill--warn{
  background:rgba(245,158,11,.16);
  border-color:rgba(245,158,11,.30);
  color:#92400e;
}
.admin-draw-show .admin-pill--bad{
  background:rgba(244,63,94,.12);
  border-color:rgba(244,63,94,.25);
  color:#9f1239;
}

.admin-draw-show .admin-table thead{
  background:rgba(2,6,23,.03);
}
.admin-draw-show .admin-table th{
  color:#0f172a;
  font-weight:800;
}
.admin-draw-show .admin-table td{
  color:#111827;
}

.admin-draw-show .admin-input{
  width:100%;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.16);
  padding:0 10px;
  background:#fff;
  color:#0f172a;
  outline:none;
}
.admin-draw-show .admin-input:focus{
  border-color:rgba(15,118,110,.55);
  box-shadow:0 0 0 3px rgba(15,118,110,.18);
}

.admin-draw-show .admin-form-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* ---- Dark mode ---- */
.dark .admin-draw-show .admin-card{
  background:rgba(17,24,39,.55);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.dark .admin-draw-show .admin-card-head{
  border-bottom-color:rgba(255,255,255,.08);
}
.dark .admin-draw-show .admin-muted{ color:rgba(203,213,225,.82); }
.dark .admin-draw-show .admin-strong{ color:rgba(255,255,255,.92); }

.dark .admin-draw-show .admin-alert--warn{
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.26);
  color:rgba(253,230,138,.92);
}
.dark .admin-draw-show .admin-alert--error{
  background:rgba(244,63,94,.14);
  border-color:rgba(244,63,94,.22);
  color:rgba(254,202,202,.92);
}
.dark .admin-draw-show .admin-alert--success{
  background:rgba(16,185,129,.14);
  border-color:rgba(16,185,129,.22);
  color:rgba(167,243,208,.92);
}

.dark .admin-draw-show .admin-link{ color:#f1c40f; }

.dark .admin-draw-show .admin-chip-link{
  background:rgba(17,24,39,.65);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.90);
}
.dark .admin-draw-show .admin-chip-link:hover{
  background:rgba(255,255,255,.06);
}

.dark .admin-draw-show .admin-pill--ok{
  background:rgba(15,118,110,.18);
  border-color:rgba(15,118,110,.30);
  color:rgba(167,243,208,.92);
}
.dark .admin-draw-show .admin-pill--warn{
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.28);
  color:rgba(253,230,138,.92);
}
.dark .admin-draw-show .admin-pill--bad{
  background:rgba(244,63,94,.16);
  border-color:rgba(244,63,94,.26);
  color:rgba(254,202,202,.92);
}

.dark .admin-draw-show .admin-table thead{
  background:rgba(255,255,255,.04);
}
.dark .admin-draw-show .admin-table th{
  color:rgba(255,255,255,.86);
}
.dark .admin-draw-show .admin-table td{
  color:rgba(226,232,240,.90);
}

.dark .admin-draw-show .admin-input{
  background:rgba(17,24,39,.70);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
}
.dark .admin-draw-show .admin-input:focus{
  border-color:rgba(241,196,15,.55);
  box-shadow:0 0 0 3px rgba(241,196,15,.14);
}


/* =========================
   Admin Draw Preview (scoped)
   ========================= */

.admin-draw-preview .admin-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}

.admin-draw-preview .admin-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.admin-draw-preview .admin-muted{ color:rgba(71,85,105,.95); }
.admin-draw-preview .admin-strong{ color:#0f172a; }

.admin-draw-preview .admin-alert{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid transparent;
  background:#fff;
}
.admin-draw-preview .admin-alert--warn{
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.25);
  color:#92400e;
  font-weight:700;
}
.admin-draw-preview .admin-alert--success{
  background:rgba(15,118,110,.12);
  border-color:rgba(15,118,110,.25);
  color:#065f46;
  font-weight:700;
}

.admin-draw-preview .admin-link{
  color:#0f766e;
  text-decoration:none;
  font-weight:800;
}
.admin-draw-preview .admin-link:hover{ text-decoration:underline; }

.admin-draw-preview .admin-chip-link{
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  color:#0f172a;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.admin-draw-preview .admin-chip-link:hover{ background:rgba(2,6,23,.03); }

.admin-draw-preview .admin-btn{
  height:40px;
  padding:0 14px;
  border-radius:12px;
  background:#0f766e;
  color:#fff;
  font-weight:900;
  border:1px solid rgba(15,118,110,.25);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.admin-draw-preview .admin-btn:hover{ filter:brightness(.95); }

.admin-draw-preview .admin-table thead{
  background:rgba(2,6,23,.03);
}
.admin-draw-preview .admin-table th{
  color:#0f172a;
  font-weight:900;
}
.admin-draw-preview .admin-table td{
  color:#111827;
}

/* winner row highlight (Akuno gold tint, subtle) */
.admin-draw-preview .admin-row-winner{
  background:rgba(241,196,15,.10);
}

.admin-draw-preview .admin-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid transparent;
  white-space:nowrap;
}
.admin-draw-preview .admin-pill--winner{
  background:rgba(241,196,15,.18);
  border-color:rgba(241,196,15,.30);
  color:#7a5d00;
}

/* ---- Dark mode ---- */
.dark .admin-draw-preview .admin-card{
  background:rgba(17,24,39,.55);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.dark .admin-draw-preview .admin-card-head{
  border-bottom-color:rgba(255,255,255,.08);
}

.dark .admin-draw-preview .admin-muted{ color:rgba(203,213,225,.82); }
.dark .admin-draw-preview .admin-strong{ color:rgba(255,255,255,.92); }

.dark .admin-draw-preview .admin-alert--warn{
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.26);
  color:rgba(253,230,138,.92);
}
.dark .admin-draw-preview .admin-alert--success{
  background:rgba(15,118,110,.16);
  border-color:rgba(15,118,110,.26);
  color:rgba(167,243,208,.92);
}

.dark .admin-draw-preview .admin-link{ color:#f1c40f; }

.dark .admin-draw-preview .admin-chip-link{
  background:rgba(17,24,39,.65);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.90);
}
.dark .admin-draw-preview .admin-chip-link:hover{
  background:rgba(255,255,255,.06);
}

.dark .admin-draw-preview .admin-table thead{
  background:rgba(255,255,255,.04);
}
.dark .admin-draw-preview .admin-table th{
  color:rgba(255,255,255,.86);
}
.dark .admin-draw-preview .admin-table td{
  color:rgba(226,232,240,.90);
}

.dark .admin-draw-preview .admin-row-winner{
  background:rgba(241,196,15,.12);
}

.dark .admin-draw-preview .admin-pill--winner{
  background:rgba(241,196,15,.20);
  border-color:rgba(241,196,15,.28);
  color:rgba(255,244,200,.92);
}


/* =========================
   Admin Draw Confirm (scoped)
   ========================= */

.admin-draw-confirm .admin-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  overflow:hidden;
}

.admin-draw-confirm .admin-muted{ color:rgba(71,85,105,.95); }
.admin-draw-confirm .admin-strong{ color:#0f172a; }

.admin-draw-confirm .admin-kpi{
  border:1px solid rgba(15,23,42,.08);
  background:rgba(2,6,23,.02);
  border-radius:14px;
  padding:12px;
}

.admin-draw-confirm .admin-alert{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid transparent;
  background:#fff;
  font-weight:700;
}

.admin-draw-confirm .admin-alert--warn{
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.25);
  color:#92400e;
}

.admin-draw-confirm .admin-alert--success{
  background:rgba(15,118,110,.12);
  border-color:rgba(15,118,110,.25);
  color:#065f46;
}

.admin-draw-confirm .admin-alert--danger{
  background:rgba(244,63,94,.10);
  border-color:rgba(244,63,94,.22);
  color:#9f1239;
}

.admin-draw-confirm .admin-chip-link{
  height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  color:#0f172a;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.admin-draw-confirm .admin-chip-link:hover{ background:rgba(2,6,23,.03); }

.admin-draw-confirm .admin-btn{
  height:40px;
  padding:0 16px;
  border-radius:12px;
  background:#0f766e;
  color:#fff;
  font-weight:900;
  border:1px solid rgba(15,118,110,.25);
}
.admin-draw-confirm .admin-btn:hover{ filter:brightness(.95); }

/* ---- Dark mode ---- */
.dark .admin-draw-confirm .admin-card{
  background:rgba(17,24,39,.55);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}

.dark .admin-draw-confirm .admin-muted{ color:rgba(203,213,225,.82); }
.dark .admin-draw-confirm .admin-strong{ color:rgba(255,255,255,.92); }

.dark .admin-draw-confirm .admin-kpi{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

.dark .admin-draw-confirm .admin-alert--warn{
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.26);
  color:rgba(253,230,138,.92);
}

.dark .admin-draw-confirm .admin-alert--success{
  background:rgba(15,118,110,.16);
  border-color:rgba(15,118,110,.26);
  color:rgba(167,243,208,.92);
}

.dark .admin-draw-confirm .admin-alert--danger{
  background:rgba(244,63,94,.14);
  border-color:rgba(244,63,94,.24);
  color:rgba(254,205,211,.92);
}

.dark .admin-draw-confirm .admin-chip-link{
  background:rgba(17,24,39,.65);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.90);
}
.dark .admin-draw-confirm .admin-chip-link:hover{
  background:rgba(255,255,255,.06);
}

/* =========================
   Admin Circles Index (scoped)
   ========================= */

.admin-circles-index .admin-muted{ color:rgba(71,85,105,.95); }
.admin-circles-index .admin-strong{ color:#0f172a; }

/* Cards / containers */
.admin-circles-index .admin-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}

/* Alerts */
.admin-circles-index .admin-alert{
  border-radius:14px;
  padding:12px 14px;
  border:1px solid transparent;
  font-weight:800;
}
.admin-circles-index .admin-alert--success{
  background:rgba(15,118,110,.12);
  border-color:rgba(15,118,110,.25);
  color:#065f46;
}
.admin-circles-index .admin-alert--danger{
  background:rgba(244,63,94,.10);
  border-color:rgba(244,63,94,.22);
  color:#9f1239;
}

/* Buttons / links (Akuno green) */
.admin-circles-index .admin-btn{
  height:40px;
  padding:0 16px;
  border-radius:12px;
  background:#0f766e;
  color:#fff;
  font-weight:900;
  border:1px solid rgba(15,118,110,.25);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.admin-circles-index .admin-btn:hover{ filter:brightness(.95); }

.admin-circles-index .admin-chip-link{
  height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  color:#0f172a;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.admin-circles-index .admin-chip-link:hover{ background:rgba(2,6,23,.03); }

/* Table */
.admin-circles-index .admin-table thead{
  background:rgba(2,6,23,.03);
}
.admin-circles-index .admin-table th{
  color:rgba(71,85,105,.95);
  font-weight:800;
  letter-spacing:.01em;
  white-space:nowrap;
}
.admin-circles-index .admin-row{
  border-top:1px solid rgba(15,23,42,.08);
}
.admin-circles-index .admin-row:hover{
  background:rgba(2,6,23,.02);
}

/* Clean links (no weird underlines) */
.admin-circles-index .admin-link{
  color:#0f766e;
  font-weight:800;
  text-decoration:none;
}
.admin-circles-index .admin-link:hover{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

/* Pills */
.admin-circles-index .admin-pill{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.admin-circles-index .admin-pill--active{ background:#0f766e; color:#fff; }
.admin-circles-index .admin-pill--disabled{ background:rgba(148,163,184,.35); color:#0f172a; }

.admin-circles-index .admin-pill--bsc{
  background:rgba(245,158,11,.18);
  color:#92400e;
  border:1px solid rgba(245,158,11,.25);
}
.admin-circles-index .admin-pill--tron{
  background:rgba(244,63,94,.14);
  color:#9f1239;
  border:1px solid rgba(244,63,94,.20);
}

/* ---- Dark mode ---- */
.dark .admin-circles-index .admin-card{
  background:rgba(17,24,39,.55);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}

.dark .admin-circles-index .admin-muted{ color:rgba(203,213,225,.82); }
.dark .admin-circles-index .admin-strong{ color:rgba(255,255,255,.92); }

.dark .admin-circles-index .admin-chip-link{
  background:rgba(17,24,39,.65);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.90);
}
.dark .admin-circles-index .admin-chip-link:hover{ background:rgba(255,255,255,.06); }

.dark .admin-circles-index .admin-table thead{
  background:rgba(255,255,255,.04);
}
.dark .admin-circles-index .admin-table th{
  color:rgba(203,213,225,.85);
}
.dark .admin-circles-index .admin-row{
  border-top:1px solid rgba(255,255,255,.08);
}
.dark .admin-circles-index .admin-row:hover{
  background:rgba(255,255,255,.04);
}

.dark .admin-circles-index .admin-link{ color:rgba(110,231,183,.92); }
.dark .admin-circles-index .admin-pill--disabled{ background:rgba(148,163,184,.18); color:rgba(255,255,255,.86); }

.dark .admin-circles-index .admin-pill--bsc{
  background:rgba(245,158,11,.20);
  color:rgba(253,230,138,.92);
  border-color:rgba(245,158,11,.24);
}
.dark .admin-circles-index .admin-pill--tron{
  background:rgba(244,63,94,.16);
  color:rgba(254,205,211,.92);
  border-color:rgba(244,63,94,.22);
}

/* =========================
   Admin Create Circle (scoped)
   ========================= */

.admin-circle-create .admin-muted{ color:rgba(71,85,105,.95); }
.admin-circle-create .admin-strong{ color:#0f172a; }

.admin-circle-create .admin-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}

/* Clean links (no random underline) */
.admin-circle-create .admin-link{
  color:#0f766e;
  font-weight:800;
  text-decoration:none;
}
.admin-circle-create .admin-link:hover{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

.admin-circle-create .admin-label{ color:rgba(15,23,42,.88); }

/* Inputs (forces readable in dark mode + fixes cursor/placeholder) */
.admin-circle-create .admin-input{
  border-radius:12px;
  border:1px solid rgba(15,23,42,.16);
  background:#fff;
  padding:10px 12px;
  color:#0f172a;
  outline:none;
}
.admin-circle-create .admin-input::placeholder{ color:rgba(100,116,139,.85); }
.admin-circle-create .admin-input:focus{
  border-color:rgba(15,118,110,.65);
  box-shadow:0 0 0 4px rgba(15,118,110,.12);
}

/* Checkboxes */
.admin-circle-create .admin-check input{
  width:16px;
  height:16px;
  accent-color:#0f766e;
}

/* Errors */
.admin-circle-create .admin-error{ color:#be123c; font-weight:700; }

/* Buttons */
.admin-circle-create .admin-btn{
  height:42px;
  padding:0 18px;
  border-radius:12px;
  background:#0f766e;
  color:#fff;
  font-weight:900;
  border:1px solid rgba(15,118,110,.25);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.admin-circle-create .admin-btn:hover{ filter:brightness(.95); }

.admin-circle-create .admin-btn-secondary{
  height:42px;
  padding:0 18px;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font-weight:900;
  border:1px solid rgba(15,23,42,.14);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.admin-circle-create .admin-btn-secondary:hover{ background:rgba(2,6,23,.03); }

/* ---- Dark mode ---- */
.dark .admin-circle-create .admin-muted{ color:rgba(203,213,225,.82); }
.dark .admin-circle-create .admin-strong{ color:rgba(255,255,255,.92); }
.dark .admin-circle-create .admin-label{ color:rgba(255,255,255,.86); }

.dark .admin-circle-create .admin-card{
  background:rgba(17,24,39,.55);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}

.dark .admin-circle-create .admin-input{
  background:rgba(15,23,42,.55);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
}
.dark .admin-circle-create .admin-input::placeholder{ color:rgba(203,213,225,.55); }
.dark .admin-circle-create .admin-input:focus{
  border-color:rgba(110,231,183,.60);
  box-shadow:0 0 0 4px rgba(16,185,129,.14);
}

.dark .admin-circle-create .admin-btn-secondary{
  background:rgba(17,24,39,.65);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.90);
}
.dark .admin-circle-create .admin-btn-secondary:hover{ background:rgba(255,255,255,.06); }

.dark .admin-circle-create .admin-link{ color:rgba(110,231,183,.92); }

/* Akuno form primitives (prevents theme overrides breaking inputs across modes) */
.ak-input{
  width:100%;
  border-radius:0.75rem;
  border:1px solid rgb(209 213 219);
  background:#fff;
  color:rgb(17 24 39);
  padding:0.6rem 0.75rem;
  outline:none;
}
.dark .ak-input{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.92);
}
.ak-input::placeholder{ color:rgb(156 163 175); }
.dark .ak-input::placeholder{ color:rgba(255,255,255,.45); }

.ak-input:focus{
  border-color:rgba(16,185,129,.65);
  box-shadow:0 0 0 3px rgba(16,185,129,.18);
}

/* Checkbox */
.ak-check{
  width:1rem;
  height:1rem;
  border-radius:0.25rem;
  border:1px solid rgb(209 213 219);
}
.dark .ak-check{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
}

/* Buttons */
.ak-btn-primary{
  border-radius:0.75rem;
  background:rgb(4 120 87);      /* Akuno green */
  color:#fff;
}
.ak-btn-primary:hover{ background:rgb(6 95 70); }

.ak-btn-ghost{
  border-radius:0.75rem;
  border:1px solid rgb(209 213 219);
  color:rgb(17 24 39);
  background:transparent;
}
.ak-btn-ghost:hover{ background:rgb(243 244 246); }

.dark .ak-btn-ghost{
  border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.85);
}
.dark .ak-btn-ghost:hover{ background:rgba(255,255,255,.06); }

/* -------------------------------------------------------
   Admin UI base (LIGHT by default, DARK only under .dark)
   Scope everything to .admin-circle-edit so we don't
   accidentally affect public pages.
-------------------------------------------------------- */

/* Page base */
.admin-circle-edit {
  color: rgb(17 24 39); /* gray-900 */
}

/* Cards */
.admin-circle-edit .admin-card{
  border-radius: 1rem;
  border: 1px solid rgb(229 231 235); /* gray-200 */
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* Text helpers */
.admin-circle-edit .admin-strong{ color: rgb(17 24 39); } /* gray-900 */
.admin-circle-edit .admin-muted { color: rgb(75 85 99); }  /* gray-600 */
.admin-circle-edit .admin-label { color: rgb(31 41 55); }  /* gray-800 */
.admin-circle-edit .admin-error { color: rgb(190 18 60); } /* rose-700 */

/* Links */
.admin-circle-edit .admin-link{
  color: rgb(4 120 87); /* emerald-700 (Akuno green family) */
  text-decoration: none;
}
.admin-circle-edit .admin-link:hover{
  text-decoration: underline;
}

/* Inputs (LIGHT MODE) */
.admin-circle-edit .admin-input{
  border-radius: 0.75rem;
  border: 1px solid rgb(209 213 219); /* gray-300 */
  background: #fff;
  color: rgb(17 24 39); /* gray-900 */
  padding: 0.6rem 0.75rem;
  outline: none;
}
.admin-circle-edit .admin-input::placeholder{
  color: rgb(156 163 175); /* gray-400 */
}
.admin-circle-edit .admin-input:focus{
  border-color: rgba(16,185,129,.75); /* emerald */
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}

/* Check labels */
.admin-circle-edit .admin-check{
  color: rgb(31 41 55); /* gray-800 */
}

/* Buttons */
.admin-circle-edit .admin-btn{
  border-radius: 0.75rem;
  background: rgb(4 120 87); /* emerald-700 */
  color: #fff;
  padding: 0.65rem 1.1rem;
}
.admin-circle-edit .admin-btn:hover{ background: rgb(6 95 70); } /* emerald-800 */

.admin-circle-edit .admin-btn-secondary{
  border-radius: 0.75rem;
  border: 1px solid rgb(209 213 219); /* gray-300 */
  background: transparent;
  color: rgb(17 24 39); /* gray-900 */
  padding: 0.65rem 1.1rem;
  text-decoration: none;
}
.admin-circle-edit .admin-btn-secondary:hover{
  background: rgb(243 244 246); /* gray-100 */
}

/* -------------------------------------------------------
   DARK MODE overrides (ONLY when html has class="dark")
-------------------------------------------------------- */
.dark .admin-circle-edit {
  color: rgba(255,255,255,.92);
}

.dark .admin-circle-edit .admin-card{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: none;
}

.dark .admin-circle-edit .admin-strong{ color: rgba(255,255,255,.95); }
.dark .admin-circle-edit .admin-muted { color: rgba(255,255,255,.65); }
.dark .admin-circle-edit .admin-label { color: rgba(255,255,255,.80); }
.dark .admin-circle-edit .admin-error { color: rgb(253 164 175); } /* rose-300 */

.dark .admin-circle-edit .admin-link{
  color: rgb(245 158 11); /* gold-ish for links in dark mode */
}
.dark .admin-circle-edit .admin-link:hover{
  text-decoration: underline;
}

/* Inputs (DARK MODE) */
.dark .admin-circle-edit .admin-input{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}
.dark .admin-circle-edit .admin-input::placeholder{
  color: rgba(255,255,255,.45);
}
.dark .admin-circle-edit .admin-input:focus{
  border-color: rgba(16,185,129,.70);
  box-shadow: 0 0 0 3px rgba(16,185,129,.22);
}

.dark .admin-circle-edit .admin-btn-secondary{
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
}
.dark .admin-circle-edit .admin-btn-secondary:hover{
  background: rgba(255,255,255,.06);
}

/* =======================================================
   Charity admin ledger (scoped)
======================================================= */
.admin-charity-ledger{
  color: rgb(17 24 39); /* gray-900 */
}

.admin-charity-ledger .admin-strong{ color: rgb(17 24 39); }
.admin-charity-ledger .admin-muted{ color: rgb(75 85 99); } /* gray-600 */

.admin-charity-ledger .admin-flash{
  border-radius: 0.9rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgb(167 243 208); /* emerald-200 */
  background: rgb(236 253 245); /* emerald-50 */
  color: rgb(6 95 70); /* emerald-800 */
}

/* Card */
.admin-charity-ledger .admin-card{
  border-radius: 1rem;
  border: 1px solid rgb(229 231 235); /* gray-200 */
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.admin-charity-ledger .admin-card-head{
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgb(229 231 235);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.admin-charity-ledger .admin-card-foot{
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgb(229 231 235);
  background: rgb(249 250 251); /* gray-50 */
}

/* Table */
.admin-charity-ledger .admin-table thead{
  background: rgb(249 250 251); /* gray-50 */
}
.admin-charity-ledger .admin-table th{
  font-weight: 600;
  color: rgb(55 65 81); /* gray-700 */
}
.admin-charity-ledger .admin-table tbody tr{
  border-top: 1px solid rgb(229 231 235);
}
.admin-charity-ledger .admin-table tbody tr:hover{
  background: rgb(249 250 251); /* subtle hover */
}

/* Remove unwanted underline globally inside tables */
.admin-charity-ledger .admin-table a,
.admin-charity-ledger .admin-table button{
  text-decoration: none;
}

/* Links */
.admin-charity-ledger .admin-link{
  color: rgb(4 120 87); /* emerald-700 */
  font-weight: 600;
}
.admin-charity-ledger .admin-link:hover{
  text-decoration: underline;
}

.admin-charity-ledger .admin-link-danger{
  color: rgb(220 38 38); /* red-600 */
  font-weight: 600;
  background: transparent;
  border: none;
  padding: 0;
}
.admin-charity-ledger .admin-link-danger:hover{
  text-decoration: underline;
}

/* =======================================================
   Dark mode
======================================================= */
.dark .admin-charity-ledger{
  color: rgba(255,255,255,.92);
}

.dark .admin-charity-ledger .admin-strong{ color: rgba(255,255,255,.95); }
.dark .admin-charity-ledger .admin-muted{ color: rgba(255,255,255,.65); }

.dark .admin-charity-ledger .admin-flash{
  border-color: rgba(16,185,129,.25);
  background: rgba(16,185,129,.10);
  color: rgba(255,255,255,.88);
}

.dark .admin-charity-ledger .admin-card{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: none;
}

.dark .admin-charity-ledger .admin-card-head{
  border-bottom-color: rgba(255,255,255,.10);
}

.dark .admin-charity-ledger .admin-card-foot{
  border-top-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.dark .admin-charity-ledger .admin-table thead{
  background: rgba(255,255,255,.06);
}
.dark .admin-charity-ledger .admin-table th{
  color: rgba(255,255,255,.75);
}
.dark .admin-charity-ledger .admin-table tbody tr{
  border-top-color: rgba(255,255,255,.10);
}
.dark .admin-charity-ledger .admin-table tbody tr:hover{
  background: rgba(255,255,255,.04);
}

.dark .admin-charity-ledger .admin-link{
  color: rgb(245 158 11); /* gold accent in dark mode */
}
.dark .admin-charity-ledger .admin-link-danger{
  color: rgb(248 113 113); /* red-400 */
}

/* =======================================================
   Charity inflow form (scoped)
======================================================= */
.admin-charity-inflow{
  color: rgb(17 24 39);
}

/* page header strip (Profile-style) */
.admin-charity-inflow .admin-pagehead{
  background: #fff;
  border-bottom: 1px solid rgb(229 231 235);
}
.admin-charity-inflow .admin-pagehead-title{
  color: rgb(17 24 39);
}

/* small row above card */
.admin-charity-inflow .admin-subhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.admin-charity-inflow .admin-subhead-title{
  font-size: 1.125rem;
  font-weight: 700;
  color: rgb(17 24 39);
}

.admin-charity-inflow .admin-card{
  border-radius: 1rem;
  border: 1px solid rgb(229 231 235);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.admin-charity-inflow .admin-label{
  color: rgb(55 65 81);
}

.admin-charity-inflow .admin-input{
  border: 1px solid rgb(209 213 219);
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: #fff;
  color: rgb(17 24 39);
  outline: none;
}
.admin-charity-inflow .admin-input:focus{
  border-color: rgba(4,120,87,.85);
  box-shadow: 0 0 0 3px rgba(4,120,87,.18);
}

.admin-charity-inflow .admin-error{
  color: rgb(190 18 60);
}

.admin-charity-inflow .admin-link{
  color: rgb(4 120 87);
  font-weight: 700;
  text-decoration: none;
}
.admin-charity-inflow .admin-link:hover{ text-decoration: underline; }

.admin-charity-inflow .admin-link-muted{
  color: rgb(75 85 99);
  font-weight: 600;
  text-decoration: none;
}
.admin-charity-inflow .admin-link-muted:hover{ text-decoration: underline; }

.admin-charity-inflow .admin-btn-primary{
  border-radius: 0.75rem;
  padding: 0.65rem 1rem;
  background: rgb(4 120 87);
  color: #fff;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,0);
}
.admin-charity-inflow .admin-btn-primary:hover{
  background: rgb(6 95 70);
}

/* =======================================================
   Dark mode
======================================================= */
.dark .admin-charity-inflow{
  color: rgba(255,255,255,.92);
}

.dark .admin-charity-inflow .admin-pagehead{
  background: rgba(0,0,0,.10);
  border-bottom-color: rgba(255,255,255,.10);
}
.dark .admin-charity-inflow .admin-pagehead-title{
  color: rgba(255,255,255,.92);
}

.dark .admin-charity-inflow .admin-subhead-title{
  color: rgba(255,255,255,.92);
}

.dark .admin-charity-inflow .admin-card{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: none;
}

.dark .admin-charity-inflow .admin-label{
  color: rgba(255,255,255,.78);
}

.dark .admin-charity-inflow .admin-input{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.dark .admin-charity-inflow .admin-input::placeholder{
  color: rgba(255,255,255,.45);
}
.dark .admin-charity-inflow .admin-input:focus{
  border-color: rgba(16,185,129,.80);
  box-shadow: 0 0 0 3px rgba(16,185,129,.20);
}

.dark .admin-charity-inflow .admin-link{
  color: rgb(245 158 11); /* Akuno gold accent */
}
.dark .admin-charity-inflow .admin-link-muted{
  color: rgba(255,255,255,.70);
}

/* =======================================================
   Charity outflow form (scoped)
======================================================= */
.admin-charity-outflow{
  color: rgb(17 24 39);
}

/* page header strip (Profile-style) */
.admin-charity-outflow .admin-pagehead{
  background: #fff;
  border-bottom: 1px solid rgb(229 231 235);
}
.admin-charity-outflow .admin-pagehead-title{
  color: rgb(17 24 39);
}

/* small row above card */
.admin-charity-outflow .admin-subhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.admin-charity-outflow .admin-subhead-title{
  font-size: 1.125rem;
  font-weight: 700;
  color: rgb(17 24 39);
}

.admin-charity-outflow .admin-card{
  border-radius: 1rem;
  border: 1px solid rgb(229 231 235);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.admin-charity-outflow .admin-label{
  color: rgb(55 65 81);
}

.admin-charity-outflow .admin-input{
  border: 1px solid rgb(209 213 219);
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: #fff;
  color: rgb(17 24 39);
  outline: none;
}
.admin-charity-outflow .admin-textarea{
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
.admin-charity-outflow .admin-input:focus{
  border-color: rgba(4,120,87,.85);
  box-shadow: 0 0 0 3px rgba(4,120,87,.18);
}

.admin-charity-outflow .admin-error{
  color: rgb(190 18 60);
}

.admin-charity-outflow .admin-link{
  color: rgb(4 120 87);
  font-weight: 700;
  text-decoration: none;
}
.admin-charity-outflow .admin-link:hover{ text-decoration: underline; }

.admin-charity-outflow .admin-link-muted{
  color: rgb(75 85 99);
  font-weight: 600;
  text-decoration: none;
}
.admin-charity-outflow .admin-link-muted:hover{ text-decoration: underline; }

.admin-charity-outflow .admin-btn-primary{
  border-radius: 0.75rem;
  padding: 0.65rem 1rem;
  background: rgb(4 120 87);
  color: #fff;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,0);
}
.admin-charity-outflow .admin-btn-primary:hover{
  background: rgb(6 95 70);
}

/* =======================================================
   Dark mode
======================================================= */
.dark .admin-charity-outflow{
  color: rgba(255,255,255,.92);
}

.dark .admin-charity-outflow .admin-pagehead{
  background: rgba(0,0,0,.10);
  border-bottom-color: rgba(255,255,255,.10);
}
.dark .admin-charity-outflow .admin-pagehead-title{
  color: rgba(255,255,255,.92);
}

.dark .admin-charity-outflow .admin-subhead-title{
  color: rgba(255,255,255,.92);
}

.dark .admin-charity-outflow .admin-card{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: none;
}

.dark .admin-charity-outflow .admin-label{
  color: rgba(255,255,255,.78);
}

.dark .admin-charity-outflow .admin-input{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}
.dark .admin-charity-outflow .admin-input::placeholder{
  color: rgba(255,255,255,.45);
}
.dark .admin-charity-outflow .admin-input:focus{
  border-color: rgba(16,185,129,.80);
  box-shadow: 0 0 0 3px rgba(16,185,129,.20);
}

.dark .admin-charity-outflow .admin-link{
  color: rgb(245 158 11); /* Akuno gold accent */
}
.dark .admin-charity-outflow .admin-link-muted{
  color: rgba(255,255,255,.70);
}
.admin-image-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.admin-image-preview-wrap{
  width:72px;
  height:72px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
  flex:0 0 auto;
}

.dark .admin-image-preview-wrap{
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
}

.admin-image-preview{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.admin-circle-thumb{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}

.dark .admin-circle-thumb{
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
}

/* Circle thumbnails on cards */
.ak-circle-thumb{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}

.dark .ak-circle-thumb{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
}

.ak-circle-thumb__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Circle hero image on show page */
.ak-circle-hero{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}

.dark .ak-circle-hero{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
}

.ak-circle-hero__img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px){
  .ak-circle-hero__img{ height: 260px; }
}
/* Admin form fields — DARK MODE */
.dark .admin-input,
.dark select.admin-input,
.dark textarea.admin-input {
  background: #0b1411;
  color: #f8fafc;
  border-color: rgba(255,255,255,0.16);
}

.dark .admin-input::placeholder {
  color: rgba(248,250,252,0.45);
}

/* Fix number + file inputs specifically (browsers can ignore generic rules) */
.dark input[type="number"].admin-input,
.dark input[type="file"].admin-input {
  background: #0b1411;
  color: #f8fafc;
  border-color: rgba(255,255,255,0.16);
}

/* Labels + helper text */
.dark .admin-label { color: #e5e7eb; }
.dark .admin-muted { color: rgba(229,231,235,0.6); }


/* Dark mode admin inputs */
.dark .admin-input,
.dark .admin-select,
.dark .admin-textarea {
  background-color: #0b1411;
  color: #f8fafc;
  border-color: rgba(255,255,255,0.15);
}

.dark .admin-input::placeholder {
  color: rgba(248,250,252,0.45);
}

.ak-circle-icon{
  width: 50px;
  height: 50px;
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.6);
}

.dark .ak-circle-icon{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.ak-circle-icon-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ======================================
   RULE ICON – refined, alive, consistent
   ====================================== */

.ak-rule-icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  /* Light mode base */
  background:
    radial-gradient(
      120% 120% at 30% 25%,
      rgba(255,255,255,0.95),
      rgba(255,255,255,0.55) 40%,
      rgba(255,255,255,0) 70%
    ),
    linear-gradient(
      145deg,
      rgba(61,153,112,0.28),
      rgba(241,196,15,0.22)
    );

  border: 1px solid rgba(44,62,80,0.12);

  box-shadow:
    0 12px 26px rgba(17,24,39,0.14),
    0 1px 0 rgba(255,255,255,0.9) inset;

  color: rgba(17,24,39,0.9);
}

/* Iconify + SVG sizing */
.ak-rule-icon iconify-icon,
.ak-rule-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.12));
}

/* -----------------
   Dark mode
   ----------------- */

.dark .ak-rule-icon {
  background:
    radial-gradient(
      120% 120% at 30% 25%,
      rgba(255,255,255,0.14),
      rgba(255,255,255,0.06) 42%,
      rgba(0,0,0,0) 70%
    ),
    linear-gradient(
      145deg,
      rgba(61,153,112,0.35),
      rgba(241,196,15,0.18)
    );

  border: 1px solid rgba(61,153,112,0.35);

  box-shadow:
    0 16px 32px rgba(0,0,0,0.55),
    0 0 0 5px rgba(241,196,15,0.10);

  color: rgba(255,255,255,0.92);
}

/* ================================
   RULES – ICON + HOVER POLISH ONLY
   ================================ */

/* ---------- Base card ---------- */
.ak-rule-card{
  transition: 
    box-shadow .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

/* ---------- ICON BASE ---------- */
.ak-rule-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  background: rgba(61,153,112,0.12);
  color: #3D9970;

  transition:
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

/* ---------- LIGHT MODE ---------- */
html:not(.dark) .ak-rule-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px rgba(61,153,112,0.18);
  border-color: rgba(61,153,112,0.35);
}

html:not(.dark) .ak-rule-icon{
  background: rgba(61,153,112,0.14);
  color: #3D9970;
}

/* Slight emphasis on hover */
html:not(.dark) .ak-rule-card:hover .ak-rule-icon{
  background: rgba(61,153,112,0.22);
  box-shadow: 0 6px 18px rgba(61,153,112,0.25);
}

/* ---------- DARK MODE ---------- */
.dark .ak-rule-icon{
  background: rgba(61,153,112,0.22); /* deep green */
  color: #F1C40F; /* gold icon */
}

.dark .ak-rule-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(241,196,15,0.25),
    0 18px 48px rgba(241,196,15,0.22);
  border-color: rgba(241,196,15,0.45);
}

/* Gold glow on icon only in dark mode */
.dark .ak-rule-card:hover .ak-rule-icon{
  background: rgba(61,153,112,0.35);
  box-shadow:
    0 0 0 1px rgba(241,196,15,0.45),
    0 8px 26px rgba(241,196,15,0.35);
  color: #F1C40F;
}


/* =========================
   Subpage header – calm, subtle circles (no grid)
   ========================= */

.ak-subpage-header{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(16,185,129,.16);
}

/* light mode base */
.ak-subpage-header{
  background:
    radial-gradient(900px 420px at 18% 20%,
      rgba(61,153,112,.10),
      rgba(61,153,112,0) 60%),
    radial-gradient(800px 380px at 80% 30%,
      rgba(241,196,15,.08),
      rgba(241,196,15,0) 62%),
    linear-gradient(180deg, rgba(248,249,249,1), rgba(248,249,249,.92));
}

/* subtle rings layer */
.ak-subpage-header::before{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 35%,
      transparent 0 52%,
      rgba(61,153,112,.10) 52.2% 52.7%,
      transparent 53% 100%),
    radial-gradient(circle at 22% 68%,
      transparent 0 44%,
      rgba(241,196,15,.08) 44.2% 44.7%,
      transparent 45% 100%),
    radial-gradient(circle at 70% 75%,
      transparent 0 40%,
      rgba(61,153,112,.06) 40.2% 40.6%,
      transparent 41% 100%);
  opacity:.55;
  filter: blur(.2px);
}

/* keep content above */
.ak-subpage-header__inner{
  position: relative;
  z-index: 1;
}

/* typography stays crisp */
.ak-subpage-title{ color:#0f172a; }
.ak-subpage-lead{ color: rgba(15,23,42,.70); max-width:60ch; }

/* Dark mode */
.dark .ak-subpage-header{
  background:
    radial-gradient(900px 420px at 18% 20%,
      rgba(61,153,112,.14),
      rgba(61,153,112,0) 62%),
    radial-gradient(820px 380px at 78% 30%,
      rgba(241,196,15,.10),
      rgba(241,196,15,0) 64%),
    linear-gradient(180deg, rgba(1,8,6,1), rgba(1,8,6,.86));
  border-bottom: 1px solid rgba(16,185,129,.18);
}

.dark .ak-subpage-header::before{
  opacity:.35; /* more subtle in dark */
  background:
    radial-gradient(circle at 78% 35%,
      transparent 0 54%,
      rgba(241,196,15,.10) 54.2% 54.6%,
      transparent 55% 100%),
    radial-gradient(circle at 22% 68%,
      transparent 0 46%,
      rgba(61,153,112,.10) 46.2% 46.6%,
      transparent 47% 100%),
    radial-gradient(circle at 70% 75%,
      transparent 0 40%,
      rgba(241,196,15,.06) 40.2% 40.5%,
      transparent 41% 100%);
}

.dark .ak-subpage-title{ color: rgba(255,255,255,.94); }
.dark .ak-subpage-lead{ color: rgba(255,255,255,.74); }

/* Links */
.ak-subpage-crumblink{
  color: rgba(15,23,42,.68);
  text-decoration:none;
}
.ak-subpage-crumblink:hover{ color:#3D9970; }
.dark .ak-subpage-crumblink{ color: rgba(255,255,255,.72); }
.dark .ak-subpage-crumblink:hover{ color:#F1C40F; }

/* mobile: even calmer */
@media (max-width: 640px){
  .ak-subpage-header::before{ opacity:.25; }
}

/* =========================
   Subpage header layout (premium + shorter)
   ========================= */

.ak-subpage-header__inner{
  padding-top: 18px;
  padding-bottom: 18px;
}

.ak-subpage-header__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
}

.ak-subpage-header__titlewrap{
  min-width:0;
}

.ak-subpage-title{
  margin:0;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.1;
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
}

.ak-subpage-lead{
  margin-top: 6px;
  font-size: 0.98rem;
  line-height: 1.5;
  max-width: 62ch;
}

/* Breadcrumbs right, compact and tidy */
.ak-subpage-breadcrumbs{
  flex: 0 0 auto;
  margin-top: 4px;
}

.ak-subpage-breadcrumbs__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
  font-size: 13px;
  line-height: 1.2;
  max-width: 46ch;          /* prevents it dominating */
  text-align: right;
}

.ak-subpage-crumbitem{
  white-space:nowrap;
}

.ak-subpage-crumbsep{
  opacity:.45;
}

/* Subtle pill treatment (premium, not loud) */
.ak-subpage-breadcrumbs__list{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16,185,129,.18);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
}

/* Dark mode breadcrumb pill */
.dark .ak-subpage-breadcrumbs__list{
  border-color: rgba(241,196,15,.18);
  background: rgba(3,12,9,.42);
}

/* Links */
.ak-subpage-crumblink{
  opacity:.8;
}
.ak-subpage-crumblink:hover{
  opacity:1;
}

/* Mobile: stack, breadcrumbs go below title, aligned left */
@media (max-width: 640px){
  .ak-subpage-header__inner{
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .ak-subpage-header__top{
    flex-direction:column;
    gap: 10px;
  }

  .ak-subpage-breadcrumbs{
    margin-top: 0;
  }

  .ak-subpage-breadcrumbs__list{
    justify-content:flex-start;
    text-align:left;
    max-width: 100%;
  }

  .ak-subpage-lead{
    font-size: 0.95rem;
  }
}


/* =========================
   Subpage header: compact + left-aligned
   ========================= */

.ak-subpage-header{
  position: relative;
  overflow: hidden;
}

.ak-subpage-header__inner{
  position: relative;
  z-index: 1;
  padding-top: 16px;
  padding-bottom: 16px;
}

.ak-subpage-breadcrumbs{
  margin-bottom: 8px;
}

.ak-subpage-title{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.8rem, 2.2vw, 2.35rem);
}

.ak-subpage-lead{
  margin-top: 8px;
  opacity: .9;
  max-width: 72ch;
}

@media (max-width: 640px){
  .ak-subpage-header__inner{
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .ak-subpage-breadcrumbs{
    margin-bottom: 6px;
  }
}

/* =========================
   Background: grid + large subtle circles
   (no obvious blobs, premium)
   ========================= */

.ak-subpage-header::before,
.ak-subpage-header::after{
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
}

/* DARK MODE */
.dark .ak-subpage-header{
  border-bottom: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(900px 260px at 18% 35%, rgba(61,153,112,.18), rgba(0,0,0,0) 62%),
    radial-gradient(700px 240px at 78% 42%, rgba(241,196,15,.10), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(4,12,9,1) 0%, rgba(3,9,7,1) 100%);
}

/* subtle grid */
.dark .ak-subpage-header::before{
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .14;
  mask-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,1) 0 55%, rgba(0,0,0,0) 78%);
}

/* big circles (very subtle) */
.dark .ak-subpage-header::after{
  background:
    radial-gradient(circle at 22% 52%, rgba(241,196,15,.14) 0 140px, rgba(241,196,15,0) 141px),
    radial-gradient(circle at 68% 45%, rgba(61,153,112,.14) 0 180px, rgba(61,153,112,0) 181px),
    radial-gradient(circle at 86% 30%, rgba(255,255,255,.08) 0 120px, rgba(255,255,255,0) 121px);
  opacity: .55;
  filter: blur(0.2px);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
}

/* LIGHT MODE */
:root:not(.dark) .ak-subpage-header{
  border-bottom: 1px solid rgba(15,23,42,.08);
  background:
    radial-gradient(900px 260px at 18% 35%, rgba(61,153,112,.12), rgba(255,255,255,0) 62%),
    radial-gradient(700px 240px at 78% 42%, rgba(241,196,15,.10), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,249,249,1) 100%);
}

/* subtle grid */
:root:not(.dark) .ak-subpage-header::before{
  background:
    linear-gradient(to right, rgba(15,23,42,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.08) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .10;
  mask-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,1) 0 55%, rgba(0,0,0,0) 78%);
}

/* big circles (very subtle) */
:root:not(.dark) .ak-subpage-header::after{
  background:
    radial-gradient(circle at 22% 52%, rgba(241,196,15,.12) 0 140px, rgba(241,196,15,0) 141px),
    radial-gradient(circle at 68% 45%, rgba(61,153,112,.12) 0 180px, rgba(61,153,112,0) 181px),
    radial-gradient(circle at 86% 30%, rgba(15,23,42,.08) 0 120px, rgba(15,23,42,0) 121px);
  opacity: .45;
  filter: blur(0.2px);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
}
/* =========================
   Subpage header: compact + left-aligned
   ========================= */

.ak-subpage-header{
  position: relative;
  overflow: hidden;
}

.ak-subpage-header__inner{
  position: relative;
  z-index: 1;
  padding-top: 16px;
  padding-bottom: 16px;
}

.ak-subpage-breadcrumbs{
  margin-bottom: 8px;
}

.ak-subpage-title{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.8rem, 2.2vw, 2.35rem);
}

.ak-subpage-lead{
  margin-top: 8px;
  opacity: .9;
  max-width: 72ch;
}

@media (max-width: 640px){
  .ak-subpage-header__inner{
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .ak-subpage-breadcrumbs{
    margin-bottom: 6px;
  }
}

/* =========================
   Background: grid + large subtle circles
   (no obvious blobs, premium)
   ========================= */

.ak-subpage-header::before,
.ak-subpage-header::after{
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
}

/* DARK MODE */
.dark .ak-subpage-header{
  border-bottom: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(900px 260px at 18% 35%, rgba(61,153,112,.18), rgba(0,0,0,0) 62%),
    radial-gradient(700px 240px at 78% 42%, rgba(241,196,15,.10), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(4,12,9,1) 0%, rgba(3,9,7,1) 100%);
}

/* subtle grid */
.dark .ak-subpage-header::before{
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .14;
  mask-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,1) 0 55%, rgba(0,0,0,0) 78%);
}

/* big circles (very subtle) */
.dark .ak-subpage-header::after{
  background:
    radial-gradient(circle at 22% 52%, rgba(241,196,15,.14) 0 140px, rgba(241,196,15,0) 141px),
    radial-gradient(circle at 68% 45%, rgba(61,153,112,.14) 0 180px, rgba(61,153,112,0) 181px),
    radial-gradient(circle at 86% 30%, rgba(255,255,255,.08) 0 120px, rgba(255,255,255,0) 121px);
  opacity: .55;
  filter: blur(0.2px);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
}

/* LIGHT MODE */
:root:not(.dark) .ak-subpage-header{
  border-bottom: 1px solid rgba(15,23,42,.08);
  background:
    radial-gradient(900px 260px at 18% 35%, rgba(61,153,112,.12), rgba(255,255,255,0) 62%),
    radial-gradient(700px 240px at 78% 42%, rgba(241,196,15,.10), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,249,249,1) 100%);
}

/* subtle grid */
:root:not(.dark) .ak-subpage-header::before{
  background:
    linear-gradient(to right, rgba(15,23,42,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.08) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .10;
  mask-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,1) 0 55%, rgba(0,0,0,0) 78%);
}

/* big circles (very subtle) */
:root:not(.dark) .ak-subpage-header::after{
  background:
    radial-gradient(circle at 22% 52%, rgba(241,196,15,.12) 0 140px, rgba(241,196,15,0) 141px),
    radial-gradient(circle at 68% 45%, rgba(61,153,112,.12) 0 180px, rgba(61,153,112,0) 181px),
    radial-gradient(circle at 86% 30%, rgba(15,23,42,.08) 0 120px, rgba(15,23,42,0) 121px);
  opacity: .45;
  filter: blur(0.2px);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
}

/* =========================
   Subpage header: premium + compact
   ========================= */

.ak-subpage-header{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.ak-subpage-header__inner{
  position: relative;
  z-index: 1;
  padding-top: 16px;
  padding-bottom: 16px;
}

.ak-subpage-header__top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.ak-subpage-title{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.8rem, 2.2vw, 2.35rem);
}

.ak-subpage-lead{
  margin-top: 8px;
  opacity: .9;
  max-width: 72ch;
}

@media (max-width: 640px){
  .ak-subpage-header__inner{
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .ak-subpage-header__top{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* =========================
   Breadcrumbs: clean inline text
   ========================= */

.ak-crumbs{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1;
}

.ak-crumb-sep{
  opacity: .5;
  font-size: 12px;
}

.ak-crumb-link{
  font-weight: 600;
  text-decoration: none;
  opacity: .9;
  transition: opacity .15s ease, color .15s ease;
}

.ak-crumb-link:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ak-crumb-current{
  font-weight: 600;
  opacity: .95;
}

/* Light mode crumbs */
:root:not(.dark) .ak-crumb-link{ color: #3D9970; }
:root:not(.dark) .ak-crumb-current{ color: #0f172a; }
:root:not(.dark) .ak-crumb-sep{ color: rgba(15,23,42,.5); }

/* Dark mode crumbs */
.dark .ak-crumb-link{ color: rgba(241,196,15,.92); }
.dark .ak-crumb-current{ color: rgba(255,255,255,.92); }
.dark .ak-crumb-sep{ color: rgba(255,255,255,.45); }

/* =========================
   Background: subtle "nodes + links" (blockchain/community)
   No obvious circles. No grid.
   ========================= */

.ak-subpage-header::before,
.ak-subpage-header::after{
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
}

/* Dark base */
.dark .ak-subpage-header{
  background:
    radial-gradient(900px 240px at 18% 30%, rgba(61,153,112,.18), rgba(0,0,0,0) 60%),
    radial-gradient(700px 220px at 78% 45%, rgba(241,196,15,.08), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(4,12,9,1) 0%, rgba(3,9,7,1) 100%);
}

/* Node field (tiny dots) */
.dark .ak-subpage-header::before{
  background:
    radial-gradient(circle at 18% 35%, rgba(241,196,15,.22) 0 1.5px, rgba(241,196,15,0) 2.5px),
    radial-gradient(circle at 30% 58%, rgba(61,153,112,.22) 0 1.5px, rgba(61,153,112,0) 2.5px),
    radial-gradient(circle at 52% 40%, rgba(255,255,255,.16) 0 1.2px, rgba(255,255,255,0) 2.2px),
    radial-gradient(circle at 72% 55%, rgba(241,196,15,.18) 0 1.5px, rgba(241,196,15,0) 2.5px),
    radial-gradient(circle at 84% 32%, rgba(61,153,112,.18) 0 1.5px, rgba(61,153,112,0) 2.5px),

    radial-gradient(circle at 24% 48%, rgba(255,255,255,.10) 0 1.1px, rgba(255,255,255,0) 2.1px),
    radial-gradient(circle at 62% 62%, rgba(255,255,255,.09) 0 1.1px, rgba(255,255,255,0) 2.1px);
  opacity: .9;
  filter: blur(.2px);
}

/* “Links” hint: very soft diagonal strokes */
.dark .ak-subpage-header::after{
  background:
    linear-gradient(115deg, rgba(241,196,15,.10), rgba(241,196,15,0) 55%),
    linear-gradient(240deg, rgba(61,153,112,.10), rgba(61,153,112,0) 60%),
    radial-gradient(600px 160px at 55% 55%, rgba(255,255,255,.05), rgba(0,0,0,0) 70%);
  opacity: .35;
  filter: blur(10px);
}

/* Light base */
:root:not(.dark) .ak-subpage-header{
  border-bottom: 1px solid rgba(15,23,42,.08);
  background:
    radial-gradient(900px 240px at 18% 30%, rgba(61,153,112,.12), rgba(255,255,255,0) 62%),
    radial-gradient(700px 220px at 78% 45%, rgba(241,196,15,.10), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,249,249,1) 100%);
}

:root:not(.dark) .ak-subpage-header::before{
  background:
    radial-gradient(circle at 18% 35%, rgba(61,153,112,.22) 0 1.5px, rgba(61,153,112,0) 2.6px),
    radial-gradient(circle at 30% 58%, rgba(61,153,112,.18) 0 1.5px, rgba(61,153,112,0) 2.6px),
    radial-gradient(circle at 52% 40%, rgba(15,23,42,.12) 0 1.2px, rgba(15,23,42,0) 2.2px),
    radial-gradient(circle at 72% 55%, rgba(241,196,15,.18) 0 1.5px, rgba(241,196,15,0) 2.6px),
    radial-gradient(circle at 84% 32%, rgba(61,153,112,.16) 0 1.5px, rgba(61,153,112,0) 2.6px);
  opacity: .55;
}

:root:not(.dark) .ak-subpage-header::after{
  background:
    linear-gradient(115deg, rgba(241,196,15,.10), rgba(241,196,15,0) 55%),
    linear-gradient(240deg, rgba(61,153,112,.10), rgba(61,153,112,0) 60%);
  opacity: .20;
  filter: blur(12px);
}

/* =========================
   Subpage header: compact + left-aligned
   ========================= */

.ak-subpage-header{
  position: relative;
  overflow: hidden;
}

.ak-subpage-header__inner{
  position: relative;
  z-index: 1;
  padding-top: 16px;
  padding-bottom: 16px;
}

.ak-subpage-breadcrumbs{
  margin-bottom: 0px;
}

.ak-subpage-title{
  margin: 0;
  margin-bottom: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.8rem, 2.2vw, 2.35rem);
}

.ak-subpage-lead{
  margin-top: 8px;
  opacity: .9;
  max-width: 72ch;
}

@media (max-width: 640px){
  .ak-subpage-header__inner{
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .ak-subpage-breadcrumbs{
    margin-bottom: 6px;
  }
}

/* =========================
   Background: grid + large subtle circles
   (no obvious blobs, premium)
   ========================= */

.ak-subpage-header::before,
.ak-subpage-header::after{
  content: "";
  position: absolute;
  inset: -40px;
  pointer-events: none;
}

/* DARK MODE */
.dark .ak-subpage-header{
  border-bottom: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(900px 260px at 18% 35%, rgba(61,153,112,.18), rgba(0,0,0,0) 62%),
    radial-gradient(700px 240px at 78% 42%, rgba(241,196,15,.10), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(4,12,9,1) 0%, rgba(3,9,7,1) 100%);
}

/* subtle grid */
.dark .ak-subpage-header::before{
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .14;
  mask-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,1) 0 55%, rgba(0,0,0,0) 78%);
}

/* big circles (very subtle) */
.dark .ak-subpage-header::after{
  background:
    radial-gradient(circle at 22% 52%, rgba(241,196,15,.14) 0 140px, rgba(241,196,15,0) 141px),
    radial-gradient(circle at 68% 45%, rgba(61,153,112,.14) 0 180px, rgba(61,153,112,0) 181px),
    radial-gradient(circle at 86% 30%, rgba(255,255,255,.08) 0 120px, rgba(255,255,255,0) 121px);
  opacity: .55;
  filter: blur(0.2px);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
}

/* LIGHT MODE */
:root:not(.dark) .ak-subpage-header{
  border-bottom: 1px solid rgba(15,23,42,.08);
  background:
    radial-gradient(900px 260px at 18% 35%, rgba(61,153,112,.12), rgba(255,255,255,0) 62%),
    radial-gradient(700px 240px at 78% 42%, rgba(241,196,15,.10), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,249,249,1) 100%);
	background: radial-gradient(900px 260px at 18% 35%, rgba(61,153,112,.12), rgba(255,255,255,0) 62%), radial-gradient(700px 240px at 78% 42%, rgba(130, 158, 136, 0.1), rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgb(248, 249, 249) 100%);
}

/* subtle grid */
:root:not(.dark) .ak-subpage-header::before{
  background:
    linear-gradient(to right, rgba(15,23,42,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.08) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .10;
  mask-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,1) 0 55%, rgba(0,0,0,0) 78%);
}

/* big circles (very subtle) */
:root:not(.dark) .ak-subpage-header::after{
  background:
    radial-gradient(circle at 22% 52%, rgba(241,196,15,.12) 0 140px, rgba(241,196,15,0) 141px),
    radial-gradient(circle at 68% 45%, rgba(61,153,112,.12) 0 180px, rgba(61,153,112,0) 181px),
    radial-gradient(circle at 86% 30%, rgba(15,23,42,.08) 0 120px, rgba(15,23,42,0) 121px);
  opacity: .45;
  filter: blur(0.2px);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
}

/* =========================
   SUBPAGE "HOW IT WORKS" ROWS
   (replaces emoji pills with premium icon dots)
   ========================= */

.ak-rule-row{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
}

.ak-rule-dot{
  flex:0 0 auto;
  height: 34px;
  width: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  color: #1f7a57;
}

.dark .ak-rule-dot{
  border-color: rgba(255,255,255,.10);
  background: rgba(9, 18, 14, .55);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  color: rgba(241,196,15,.95); /* gold icon in dark */
}

/* optional gold emphasis for the pot split icon */
.ak-rule-dot--gold{
  color: #b8860b;
}
.dark .ak-rule-dot--gold{
  color: rgba(241,196,15,.95);
}

.ak-strong-warn{
  font-weight: 700;
  color: #b8860b;
}
.dark .ak-strong-warn{
  color: rgba(241,196,15,.95);
}

/* =========================
   POT SPLIT (visual bar + pills)
   ========================= */

.ak-splitbar{
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: rgba(0,0,0,.06);
}

.dark .ak-splitbar{
  background: rgba(255,255,255,.10);
}

.ak-splitbar__seg{ height: 100%; display:block; }

.ak-splitbar__seg--winners{
  background: linear-gradient(90deg, rgba(241,196,15,.95), rgba(241,196,15,.72));
}
.ak-splitbar__seg--platform{
  background: linear-gradient(90deg, rgba(61,153,112,.95), rgba(61,153,112,.65));
}
.ak-splitbar__seg--charity{
  background: linear-gradient(90deg, rgba(44,62,80,.75), rgba(44,62,80,.55));
}

.ak-splitbar__legend{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}

.ak-splitbar__pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size: .75rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
}

.dark .ak-splitbar__pill{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}

.ak-pill-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
}

.ak-pill-dot--winners{ background: rgba(241,196,15,.95); }
.ak-pill-dot--platform{ background: rgba(61,153,112,.95); }
.ak-pill-dot--charity{ background: rgba(44,62,80,.70); }

.dark .ak-pill-dot--charity{ background: rgba(203,213,225,.75); }

/* =========================
   CIRCLE CARD META (Winners / Selection labels)
   ========================= */

.ak-circle-meta-line{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
}

.ak-circle-meta-k{
  flex:0 0 auto;
  font-size:.70rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.75;
  margin-top:2px;
  white-space:nowrap;
}

.ak-circle-meta-v{
  flex:1 1 auto;
}


/* =========================
   SUBPAGE "HOW IT WORKS" (light + dark)
   ========================= */

.ak-rule-row{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
}

/* Make ALL rule dots consistent (no odd gold one in light mode) */
.ak-rule-dot{
  flex:0 0 auto;
  height: 34px;
  width: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;

  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.80);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);

  color: #1f7a57; /* emerald-ish */
}

.dark .ak-rule-dot{
  border-color: rgba(255,255,255,.12);
  background: rgba(9, 18, 14, .55);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  color: rgba(241,196,15,.95); /* gold in dark is fine */
}

/* Light mode warning should be GREEN as requested */
.ak-strong-warn{
  font-weight: 700;
  color: #1f7a57;
}
.dark .ak-strong-warn{
  color: rgba(241,196,15,.95);
}

/* =========================
   POT SPLIT (bar + legend)
   ========================= */

.ak-splitbar{
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: rgba(0,0,0,.08);
}
.dark .ak-splitbar{
  background: rgba(255,255,255,.10);
}

.ak-splitbar__seg{ height: 100%; display:block; }

.ak-splitbar__seg--winners{
  background: linear-gradient(90deg, rgba(241,196,15,.95), rgba(241,196,15,.72));
}
.ak-splitbar__seg--platform{
  background: linear-gradient(90deg, rgba(61,153,112,.95), rgba(61,153,112,.65));
}
.ak-splitbar__seg--charity{
  background: linear-gradient(90deg, rgba(44,62,80,.75), rgba(44,62,80,.55));
}

.ak-splitbar__legend{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}

/* Explicit text colour so it never turns white in light mode */
.ak-splitbar__pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;

  font-size: .75rem;
  padding: .28rem .55rem;
  border-radius: 999px;

  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  color: rgba(17,24,39,.78); /* slate-900-ish */
}

.dark .ak-splitbar__pill{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(226,232,240,.85);
}

.ak-pill-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
}

.ak-pill-dot--winners{ background: rgba(241,196,15,.95); }
.ak-pill-dot--platform{ background: rgba(61,153,112,.95); }
.ak-pill-dot--charity{ background: rgba(44,62,80,.70); }
.dark .ak-pill-dot--charity{ background: rgba(203,213,225,.75); }

/* =========================
   CIRCLE CARD META (Winners / Selection)
   ========================= */

.ak-circle-meta-line{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
}

.ak-circle-meta-k{
  flex:0 0 auto;
  font-size:.70rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.75;
  margin-top:2px;
  white-space:nowrap;
}

.ak-circle-meta-v{
  flex:1 1 auto;
}

/* Circle show: make BNB network more obvious */
.ak-net-ic{
  width: 18px;
  height: 18px;
  object-fit: contain;
  transform: translateY(-.5px);
  filter: saturate(1.05);
}

/* Make the step rows match the aside “rule dot” style */
.ak-steps{ display:flex; flex-direction:column; gap: 1rem; }
.ak-step{ display:flex; gap:.85rem; align-items:flex-start; }

/* Copy button icon alignment */
.ak-copybtn__ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Optional muted callout for closed state */
.ak-callout--muted{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
}
.dark .ak-callout--muted{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}

/* ========== FULL GUIDE PAGE (public/guide) ========== */
.ak-guide-page { position: relative; }
.ak-guide-shell { }

.ak-guide-hero{
  display:grid;
  gap: 1.5rem;
  grid-template-columns: 1.05fr .95fr;
  align-items: stretch;
}
@media (max-width: 1023px){
  .ak-guide-hero{ grid-template-columns: 1fr; }
}

.ak-guide-h1{
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #0f172a;
}
.dark .ak-guide-h1{ color: #e5e7eb; }

.ak-guide-lead{
  margin-top: .8rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #334155;
  max-width: 62ch;
}
.dark .ak-guide-lead{ color: rgba(226,232,240,.86); }

.ak-guide-hero__chips{ margin-top: 1rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.ak-chip--soft{
  display:inline-flex; align-items:center; gap:.45rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  font-size: .85rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.7);
  color: #0f172a;
}
.dark .ak-chip--soft{
  border-color: rgba(148,163,184,.18);
  background: rgba(2,6,23,.35);
  color: rgba(226,232,240,.92);
}

/* Video card */
.ak-guide-video{
  border-radius: 1.5rem;
  border: 1px solid rgba(15,23,42,.10);
  background-size: cover;
  background-position:center;
  position: relative;
  min-height: 280px;
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
}
.dark .ak-guide-video{
  border-color: rgba(148,163,184,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.40);
}
.ak-guide-video::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
}
.ak-guide-video__button{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; gap: .9rem;
  padding: 1.2rem;
  z-index:1;
  color: #fff;
  text-decoration:none;
}
.ak-guide-video__icon{
  height: 56px; width: 56px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(241,196,15,.95);
  color: #0b0f0d;
  flex: 0 0 auto;
}
.ak-guide-video__icon svg{ width: 22px; height: 22px; fill: currentColor; }
.ak-guide-video__label{ display:flex; flex-direction:column; gap:.15rem; }
.ak-guide-video__title{ font-weight: 800; font-size: 1.05rem; }
.ak-guide-video__hint{ font-size: .9rem; opacity: .9; max-width: 42ch; }

/* Section heads */
.ak-guide-sectionHead{ max-width: 64ch; }
.ak-guide-h2{
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color:#0f172a;
}
.dark .ak-guide-h2{ color:#e5e7eb; }
.ak-guide-sub{
  margin-top:.35rem;
  color:#475569;
  line-height:1.6;
}
.dark .ak-guide-sub{ color: rgba(226,232,240,.80); }

/* Tutorial cards */
.ak-guide-grid{
  display:grid;
  gap: .9rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1023px){ .ak-guide-grid{ grid-template-columns: 1fr; } }

.ak-guide-tcard{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding: 1rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.85);
  text-decoration:none;
  color: inherit;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
.dark .ak-guide-tcard{
  border-color: rgba(148,163,184,.18);
  background: rgba(2,6,23,.35);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.ak-guide-tcard__icon{
  height: 40px; width: 40px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(61,153,112,.10);
  color: #3D9970;
  flex: 0 0 auto;
}
.dark .ak-guide-tcard__icon{
  background: rgba(61,153,112,.18);
  color: #7de2bd;
}
.ak-guide-tcard__title{ font-weight: 800; color:#0f172a; }
.dark .ak-guide-tcard__title{ color:#e5e7eb; }
.ak-guide-tcard__desc{ margin-top:.15rem; color:#475569; line-height:1.5; }
.dark .ak-guide-tcard__desc{ color: rgba(226,232,240,.78); }
.ak-guide-tcard__meta{ margin-top:.4rem; font-size:.85rem; color:#64748b; }
.dark .ak-guide-tcard__meta{ color: rgba(148,163,184,.85); }
.ak-guide-tcard__chev{ margin-left:auto; opacity:.7; padding-top:.25rem; }

/* Shared rule panels */
.ak-guide-panels{
  display:grid;
  gap:.9rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 1023px){ .ak-guide-panels{ grid-template-columns: 1fr; } }

.ak-guide-panel{
  display:flex; gap:.9rem;
  padding: 1.05rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
.dark .ak-guide-panel{
  border-color: rgba(148,163,184,.18);
  background: rgba(2,6,23,.35);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.ak-guide-panel__ic{
  height: 40px; width: 40px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(241,196,15,.14);
  color: #b07d00;
  flex: 0 0 auto;
}
.dark .ak-guide-panel__ic{
  background: rgba(241,196,15,.16);
  color: #F1C40F;
}
.ak-guide-h3{ font-weight: 900; color:#0f172a; }
.dark .ak-guide-h3{ color:#e5e7eb; }
.ak-guide-p{ margin-top:.25rem; color:#475569; line-height:1.6; }
.dark .ak-guide-p{ color: rgba(226,232,240,.80); }

/* Split card */
.ak-splitcard{
  border-radius: 1.5rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.85);
  padding: 1.1rem;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
.dark .ak-splitcard{
  border-color: rgba(148,163,184,.18);
  background: rgba(2,6,23,.35);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.ak-splitcard__bar{
  height: 14px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(2,6,23,.06);
  display:flex;
}
.dark .ak-splitcard__bar{ background: rgba(148,163,184,.12); }

.ak-splitcard__seg--winners{ background: #3D9970; }
.ak-splitcard__seg--platform{ background: #F1C40F; }
.ak-splitcard__seg--charity{ background: #2C3E50; }

.ak-splitcard__legend{
  margin-top: 1rem;
  display:grid;
  gap:.75rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1023px){ .ak-splitcard__legend{ grid-template-columns: 1fr; } }

.ak-splitcard__pill{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.8rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.75);
}
.dark .ak-splitcard__pill{
  border-color: rgba(148,163,184,.16);
  background: rgba(2,6,23,.22);
}
.ak-splitcard__pillTitle{ font-weight: 900; color:#0f172a; }
.dark .ak-splitcard__pillTitle{ color:#e5e7eb; }
.ak-splitcard__pillSub{ color:#64748b; font-size:.92rem; }
.dark .ak-splitcard__pillSub{ color: rgba(148,163,184,.85); }

.ak-splitcard__note{
  margin-top: 1rem;
  display:flex; gap:.5rem; align-items:center;
  color:#475569;
  font-size:.92rem;
}
.dark .ak-splitcard__note{ color: rgba(226,232,240,.78); }

/* Strategy cards */
.ak-guide-grid2{
  display:grid;
  gap: .9rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 1023px){ .ak-guide-grid2{ grid-template-columns: 1fr; } }

.ak-guide-scard{
  border-radius: 1.5rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.85);
  padding: 1.05rem;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
.dark .ak-guide-scard{
  border-color: rgba(148,163,184,.18);
  background: rgba(2,6,23,.35);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.ak-guide-scard__top{ display:flex; gap:.8rem; align-items:flex-start; }
.ak-guide-scard__icon{
  height: 40px; width: 40px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(61,153,112,.10);
  color:#3D9970;
  flex: 0 0 auto;
}
.dark .ak-guide-scard__icon{ background: rgba(61,153,112,.18); color:#7de2bd; }
.ak-guide-scard__title{ font-weight: 900; color:#0f172a; }
.dark .ak-guide-scard__title{ color:#e5e7eb; }
.ak-guide-scard__when{ margin-top:.1rem; color:#64748b; font-size:.92rem; }
.dark .ak-guide-scard__when{ color: rgba(148,163,184,.85); }
.ak-guide-scard__label{ margin-top:.9rem; font-weight: 800; color:#0f172a; font-size:.95rem; }
.dark .ak-guide-scard__label{ color:#e5e7eb; }
.ak-guide-scard__text{ margin-top:.25rem; color:#475569; line-height:1.6; }
.dark .ak-guide-scard__text{ color: rgba(226,232,240,.80); }
.ak-guide-scard__example{
  margin-top:.25rem;
  padding:.75rem .85rem;
  border-radius: 1rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(2,6,23,.02);
  color:#0f172a;
}
.dark .ak-guide-scard__example{
  border-color: rgba(148,163,184,.16);
  background: rgba(2,6,23,.22);
  color: rgba(226,232,240,.90);
}

/* Verify section */
.ak-guide-verify{
  display:grid;
  gap: 1rem;
  grid-template-columns: 1.1fr .9fr;
  align-items:start;
}
@media (max-width: 1023px){ .ak-guide-verify{ grid-template-columns: 1fr; } }

.ak-guide-olist{
  counter-reset: step;
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.65rem;
}
.ak-guide-olist li{
  counter-increment: step;
  padding: .85rem 1rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  color:#334155;
  line-height:1.6;
  position:relative;
  padding-left: 3.05rem;
}
.ak-guide-olist li::before{
  content: counter(step);
  position:absolute;
  left: .9rem; top: .85rem;
  height: 28px; width: 28px;
  border-radius: 10px;
  display:grid; place-items:center;
  font-weight: 900;
  background: rgba(241,196,15,.20);
  color:#7a5600;
}
.dark .ak-guide-olist li{
  border-color: rgba(148,163,184,.18);
  background: rgba(2,6,23,.35);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  color: rgba(226,232,240,.82);
}
.dark .ak-guide-olist li::before{
  background: rgba(241,196,15,.18);
  color:#F1C40F;
}

.ak-guide-verifyCard{
  border-radius: 1.5rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.85);
  padding: 1.05rem;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
.dark .ak-guide-verifyCard{
  border-color: rgba(148,163,184,.18);
  background: rgba(2,6,23,.35);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.ak-guide-verifyCard__kicker{ font-size:.85rem; text-transform:uppercase; letter-spacing:.16em; color:#64748b; }
.dark .ak-guide-verifyCard__kicker{ color: rgba(148,163,184,.85); }
.ak-guide-verifyCard__title{ margin-top:.35rem; font-weight: 900; color:#0f172a; font-size:1.15rem; }
.dark .ak-guide-verifyCard__title{ color:#e5e7eb; }
.ak-guide-verifyCard__p{ margin-top:.5rem; color:#475569; line-height:1.65; }
.dark .ak-guide-verifyCard__p{ color: rgba(226,232,240,.80); }

.ak-guide-bnbRow{
  margin-top: 1rem;
  display:flex; gap:.8rem; align-items:center;
  padding: .8rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(2,6,23,.02);
}
.dark .ak-guide-bnbRow{
  border-color: rgba(148,163,184,.16);
  background: rgba(2,6,23,.22);
}
.ak-guide-bnbLogo{ width: 44px; height: 44px; object-fit:contain; }
.ak-guide-bnbRow__label{ font-size:.85rem; color:#64748b; }
.dark .ak-guide-bnbRow__label{ color: rgba(148,163,184,.85); }
.ak-guide-bnbRow__value{ font-weight: 900; color:#0f172a; }
.dark .ak-guide-bnbRow__value{ color:#e5e7eb; }

.ak-guide-verifyCard__note{
  margin-top: .9rem;
  padding: .75rem .9rem;
  border-radius: 1rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(241,196,15,.10);
  color:#7a5600;
  font-weight: 700;
}
.dark .ak-guide-verifyCard__note{
  border-color: rgba(241,196,15,.22);
  background: rgba(241,196,15,.12);
  color:#F1C40F;
}

/* Values */
.ak-guide-values{
  border-radius: 1.75rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.75);
  padding: 1.2rem;
}
.dark .ak-guide-values{
  border-color: rgba(148,163,184,.18);
  background: rgba(2,6,23,.30);
}

.ak-guide-valuesGrid{
  display:grid;
  gap:.85rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1023px){ .ak-guide-valuesGrid{ grid-template-columns: 1fr; } }

.ak-guide-v{
  display:flex; gap:.75rem; align-items:flex-start;
  padding: .95rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.75);
  color:#334155;
}
.dark .ak-guide-v{
  border-color: rgba(148,163,184,.16);
  background: rgba(2,6,23,.22);
  color: rgba(226,232,240,.82);
}
.ak-guide-v__t{ font-weight: 900; color:#0f172a; }
.dark .ak-guide-v__t{ color:#e5e7eb; }
.ak-guide-v__p{ margin-top:.15rem; color:#64748b; }
.dark .ak-guide-v__p{ color: rgba(148,163,184,.85); }


/* Full Guide (doc-style, minimal visuals) */
.ak-guide-doc .ak-guide-article p,
.ak-guide-doc .ak-legal-p { line-height: 1.75; }

.ak-guide-actions { display:flex; gap:.75rem; flex-wrap:wrap; }

.ak-guide-videoRow{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 1.25rem;
  align-items: stretch;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 1.25rem;
  overflow:hidden;
  background: rgba(255,255,255,.75);
}
.dark .ak-guide-videoRow{
  border-color: rgba(148,163,184,.18);
  background: rgba(2,6,23,.30);
}
@media (max-width: 768px){
  .ak-guide-videoRow{ grid-template-columns: 1fr; }
}
.ak-guide-videoThumb{
  background-size: cover;
  background-position:center;
  min-height: 160px;
}
.ak-guide-videoMeta{ padding: 1.1rem; }

.ak-guide-kicker{
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #64748b;
}
.dark .ak-guide-kicker{ color: rgba(148,163,184,.85); }

.ak-guide-h{
  margin-top: .25rem;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color:#0f172a;
}
.dark .ak-guide-h{ color:#e5e7eb; }

.ak-guide-p{
  margin-top:.35rem;
  color:#475569;
}
.dark .ak-guide-p{ color: rgba(226,232,240,.80); }

.ak-guide-subh{
  margin-top: 1.25rem;
  font-weight: 800;
  color:#0f172a;
}
.dark .ak-guide-subh{ color:#e5e7eb; }

.ak-guide-note{
  margin-top: .9rem;
  padding: .9rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(241,196,15,.22);
  background: rgba(241,196,15,.10);
  color: #6b4e00;
}
.dark .ak-guide-note{
  background: rgba(241,196,15,.12);
  color: #F1C40F;
}

.ak-guide-example{
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(2,6,23,.02);
}
.dark .ak-guide-example{
  border-color: rgba(148,163,184,.16);
  background: rgba(2,6,23,.22);
}

.ak-guide-steps{
  margin-top: .75rem;
  padding-left: 1.25rem;
  display:grid;
  gap:.35rem;
}
.ak-guide-links{
  margin-top: .4rem;
  padding-left: 1.1rem;
  display:grid;
  gap:.35rem;
}

/* Pot split (one purposeful visual) */
.ak-guide-split{ margin-top: .8rem; }
.ak-guide-splitBar{
  height: 12px;
  border-radius: 999px;
  overflow:hidden;
  display:flex;
  background: rgba(2,6,23,.06);
}
.dark .ak-guide-splitBar{ background: rgba(148,163,184,.12); }
.ak-guide-splitSeg--winners{ background: #3D9970; }
.ak-guide-splitSeg--platform{ background: #F1C40F; }
.ak-guide-splitSeg--charity{ background: #2C3E50; }
.ak-guide-splitList{ margin-top: .75rem; padding-left: 1.1rem; }

/* Universal Akuno field styling (auth + forms) */
.ak-field,
.ak-impact-input,
.ak-auth-input {
  width: 100%;
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.85);
  color: rgba(15,23,42,0.95);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.ak-field::placeholder,
.ak-impact-input::placeholder,
.ak-auth-input::placeholder {
  color: rgba(15,23,42,0.45);
}

.ak-field:focus,
.ak-impact-input:focus,
.ak-auth-input:focus {
  border-color: rgba(241,196,15,0.85);
  box-shadow: 0 0 0 3px rgba(241,196,15,0.18);
}

/* DARK MODE: force non-white fields */
.dark .ak-field,
.dark .ak-impact-input,
.dark .ak-auth-input {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.88);
}

.dark .ak-field::placeholder,
.dark .ak-impact-input::placeholder,
.dark .ak-auth-input::placeholder {
  color: rgba(255,255,255,0.45);
}

.dark .ak-field:focus,
.dark .ak-impact-input:focus,
.dark .ak-auth-input:focus {
  border-color: rgba(241,196,15,0.9);
  box-shadow: 0 0 0 3px rgba(241,196,15,0.22);
}

/* Remember me line: readable in both modes */
.ak-remember {
  color: rgba(15,23,42,0.75);
  font-size: 0.875rem;
}

.dark .ak-remember {
  color: rgba(255,255,255,0.80);
}

.ak-check {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(0,0,0,0.22);
  background: rgba(255,255,255,0.9);
}

.dark .ak-check {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}



/* Add to your main CSS (e.g. resources/css/app.css) */

/* ---------- Dashboard base ---------- */
.akdash { position: relative; }
.akdash-shell { position: relative; }

.akdash-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin-bottom: 14px;
}
.akdash-week-k{ font-size:12px; opacity:.75; }
.akdash-week-v{ font-size:22px; font-weight:800; letter-spacing:-0.02em; }

.akdash-arrow{ opacity:.65; padding:0 6px; }

.akdash-status{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin-top: 8px;
}
.akdash-status-text{ font-size: 13px; opacity:.8; }
.akdash-status-strong{ font-size: 13px; font-weight:700; }

.akdash-dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.28);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
.akdash-dot--red{ background: rgba(239,68,68,.95); box-shadow:0 0 0 4px rgba(239,68,68,.16); }
.akdash-dot--green{ background: rgba(34,197,94,.95); box-shadow:0 0 0 4px rgba(34,197,94,.16); }

.akdash-hello{ text-align:right; }
.akdash-hello-v{ font-size: 18px; font-weight:800; }
.akdash-hello-link{ font-size:12px; opacity:.85; text-decoration:none; }
.akdash-hello-link:hover{ text-decoration: underline; }

/* ---------- Stats ---------- */
.akdash-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin: 16px 0 18px;
}
@media (max-width: 980px){
  .akdash-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.akdash-stat{
  display:flex; gap:12px; align-items:center;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 14px 14px;
  text-decoration:none;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.akdash-stat:hover{
  transform: translateY(-1px);
  border-color: rgba(241,196,15,.35);
  background: rgba(255,255,255,.045);
}
.akdash-stat-ico{ flex: 0 0 auto; }
.akdash-badge{
  width:44px; height:44px; border-radius: 999px;
  display:grid; place-items:center;
  background: rgba(241,196,15,.14);
  border: 1px solid rgba(241,196,15,.20);
}
.akdash-ico{ width:22px; height:22px; opacity:.95; }
.akdash-stat-k{ font-size: 12px; opacity:.75; }
.akdash-stat-v{ font-size: 22px; font-weight: 900; letter-spacing:-0.02em; line-height:1.1; }
.akdash-unit{ font-size: 12px; opacity:.7; font-weight:700; margin-left:6px; }
.akdash-stat-s{ font-size: 12px; opacity:.85; color: rgba(241,196,15,.95); }

/* ---------- Layout ---------- */
.akdash-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 980px){
  .akdash-grid{ grid-template-columns: 1fr; }
}

.akdash-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.akdash-card--main{ padding: 16px; }
.akdash-card--links{ padding: 0; }
.akdash-side{ display:flex; flex-direction:column; gap: 16px; }

.akdash-card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap: 12px;
  padding: 14px 16px;
}
.akdash-card--main .akdash-card-head{ padding: 0 0 12px; }
.akdash-card-h{ font-weight: 800; font-size: 16px; }
.akdash-card-sub{ font-size: 13px; opacity:.75; margin-top:2px; }
.akdash-card-link{ font-size: 13px; color: rgba(241,196,15,.95); text-decoration:none; white-space:nowrap; }
.akdash-card-link:hover{ text-decoration: underline; }

/* ---------- Notes / empty ---------- */
.akdash-note{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  margin: 12px 0;
}
.akdash-note--warn{ background: rgba(241,196,15,.08); border-color: rgba(241,196,15,.20); }
.akdash-note--soft{ background: rgba(255,255,255,.03); }
.akdash-note-title{ font-weight: 700; font-size: 14px; }
.akdash-note-body{ font-size: 13px; opacity: .82; margin-top: 4px; line-height:1.5; }
.akdash-note-actions{ margin-top: 10px; display:flex; gap:10px; flex-wrap:wrap; }

.akdash-empty{ padding: 18px 16px; }
.akdash-empty-title{ font-weight: 700; }
.akdash-empty-sub{ opacity:.78; margin-top: 4px; font-size: 13px; }

/* ---------- Recent list ---------- */
.akdash-list{ display:flex; flex-direction:column; gap: 10px; margin-top: 10px; }
.akdash-row{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 14px;
  display:flex; justify-content:space-between; gap: 14px;
  transition: border-color .14s ease, background .14s ease;
}
.akdash-row:hover{ border-color: rgba(241,196,15,.25); background: rgba(255,255,255,.03); }

.akdash-row-top{ display:flex; align-items:center; gap: 10px; }
.akdash-row-title{ font-weight: 900; max-width: 360px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.akdash-row-meta{ margin-top: 4px; font-size: 13px; opacity:.78; display:flex; gap: 8px; flex-wrap:wrap; }
.akdash-sep{ opacity:.55; }

.akdash-pill{
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
}
.akdash-pill--ok{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.24); color: rgba(34,197,94,.95); }
.akdash-pill--warn{ background: rgba(241,196,15,.10); border-color: rgba(241,196,15,.24); color: rgba(241,196,15,.98); }
.akdash-pill--muted{ background: rgba(148,163,184,.08); border-color: rgba(148,163,184,.18); color: rgba(148,163,184,.95); }

.akdash-row-right{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap: 8px; min-width: 160px; }
.akdash-tx{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; text-decoration:none; color: rgba(241,196,15,.95); }
.akdash-tx:hover{ text-decoration: underline; }
.akdash-tx--muted{ opacity:.7; color: inherit; }

.akdash-copy{
  display:inline-flex; align-items:center; gap: 8px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(241,196,15,.28);
  background: rgba(241,196,15,.10);
  color: rgba(241,196,15,.98);
  transition: transform .14s ease, background .14s ease;
}
.akdash-copy:hover{ transform: translateY(-1px); background: rgba(241,196,15,.14); }
.akdash-copysvg{ width:16px; height:16px; }

/* ---------- Quick links ---------- */
.akdash-links{ padding: 6px 8px 12px; }
.akdash-linkrow{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 10px;
  border-radius: 14px;
  text-decoration:none;
  border: 1px solid transparent;
  transition: background .14s ease, border-color .14s ease;
}
.akdash-linkrow:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
.akdash-chev{ opacity:.75; }

/* ---------- Circles ---------- */
.akdash-circles{ padding: 2px 12px 14px; display:flex; flex-direction:column; gap: 10px; }
.akdash-circle{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  text-decoration:none;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.akdash-circle:hover{
  transform: translateY(-1px);
  border-color: rgba(241,196,15,.22);
  background: rgba(255,255,255,.03);
}
.akdash-circle-name{ font-weight: 900; }
.akdash-circle-meta{ font-size: 13px; opacity:.78; margin-top: 2px; }
.akdash-circle-pill{
  width: 34px; height: 34px; border-radius: 999px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* ---------- Wallets ---------- */
.akdash-walletform{ padding: 10px 16px 14px; }
.akdash-label{ display:block; font-size: 12px; font-weight: 800; opacity:.9; margin: 10px 0 6px; }
.akdash-inputrow{ display:flex; gap: 10px; align-items:stretch; }
.akdash-input{
  flex:1;
  height: 48px;
  border-radius: 14px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  outline:none;
}
.akdash-input::placeholder{ color: rgba(255,255,255,.42); }
.akdash-input:focus{
  border-color: rgba(241,196,15,.70);
  box-shadow: 0 0 0 3px rgba(241,196,15,.18);
}
.akdash-save{ height: 48px; white-space:nowrap; }

.akdash-help{ font-size: 12px; opacity:.75; margin-top: 8px; line-height:1.4; }
.akdash-error{ font-size: 13px; color: rgba(239,68,68,.98); margin-top: 8px; }

.akdash-wallets{ padding: 0 16px 16px; }
.akdash-wallets-k{ font-size: 12px; opacity:.75; margin: 12px 0 8px; }
.akdash-walletchips{ display:flex; flex-direction:column; gap: 10px; }
.akdash-wchip{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.akdash-wchip-left{ display:flex; align-items:center; gap: 10px; min-width:0; }
.akdash-bnb{ width: 18px; height: 18px; opacity: .9; }
.akdash-wchip-net{
  width: 34px; height: 34px; border-radius: 999px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}
.akdash-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.akdash-waddr{
  overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 520px;
}
@media (max-width: 980px){
  .akdash-waddr{ max-width: 260px; }
}

.akdash-wchip-actions{ display:flex; gap: 8px; flex:0 0 auto; }
.akdash-inline{ display:inline; margin:0; padding:0; }
.akdash-iconbtn{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  display:grid; place-items:center;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.akdash-iconbtn:hover{ transform: translateY(-1px); border-color: rgba(241,196,15,.25); background: rgba(255,255,255,.05); }
.akdash-iconbtn--danger:hover{ border-color: rgba(239,68,68,.28); }
.akdash-trash{ width:18px; height:18px; opacity:.92; }

/* ---------- Toast ---------- */
.akdash-toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(10px);
  font-size: 13px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .14s ease, transform .14s ease;
  z-index: 50;
}
.akdash-toast.is-show{ opacity: 1; transform: translateY(0); }

/* ---------- LIGHT MODE tweaks (assumes you toggle .dark on html/body) ---------- */
:not(.dark) .akdash-status{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
}
:not(.dark) .akdash-dot{ background: rgba(15,23,42,.20); box-shadow:0 0 0 4px rgba(15,23,42,.06); }

:not(.dark) .akdash-card{
  border-color: rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
}
:not(.dark) .akdash-stat{
  border-color: rgba(15,23,42,.10);
  background: rgba(255,255,255,.85);
}
:not(.dark) .akdash-row,
:not(.dark) .akdash-circle,
:not(.dark) .akdash-wchip{
  border-color: rgba(15,23,42,.10);
  background: rgba(15,23,42,.02);
}
:not(.dark) .akdash-linkrow:hover{ background: rgba(15,23,42,.03); border-color: rgba(15,23,42,.10); }

:not(.dark) .akdash-input{
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.92);
}
:not(.dark) .akdash-input::placeholder{ color: rgba(15,23,42,.40); }

:not(.dark) .akdash-copy{
  border-color: rgba(241,196,15,.45);
  background: rgba(241,196,15,.16);
}
:not(.dark) .akdash-toast{
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
}

/* Make long pages anchor nicely below header */
#wallets{ scroll-margin-top: 110px; }

/* =========================
   Akuno Dashboard (akdash)
   Fix surfaces for dark + light
   ========================= */

/* Theme hooks (covers most setups) */
:root {
  --akdash-bg: #f6f7f7;
  --akdash-surface: #ffffff;
  --akdash-surface-2: #fbfbfb;
  --akdash-border: rgba(17, 24, 39, 0.10);
  --akdash-text: #0f172a;
  --akdash-muted: rgba(15, 23, 42, 0.65);
  --akdash-link: #0b6b43;
  --akdash-gold: #caa133;

  --akdash-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
  --akdash-shadow-hover: 0 14px 40px rgba(2, 6, 23, 0.10);

  --akdash-pill-ok-bg: rgba(16, 185, 129, 0.12);
  --akdash-pill-ok-tx: #065f46;

  --akdash-pill-warn-bg: rgba(245, 158, 11, 0.14);
  --akdash-pill-warn-tx: #92400e;

  --akdash-pill-muted-bg: rgba(148, 163, 184, 0.22);
  --akdash-pill-muted-tx: rgba(15, 23, 42, 0.70);

  --akdash-note-warn-bg: rgba(202, 161, 51, 0.12);
  --akdash-note-warn-bd: rgba(202, 161, 51, 0.25);

  --akdash-note-soft-bg: rgba(11, 107, 67, 0.08);
  --akdash-note-soft-bd: rgba(11, 107, 67, 0.18);
}

/* Dark mode selectors: supports (html.dark), (.dark), (data-theme="dark"), (body.theme-dark) */
html.dark,
.dark,
[data-theme="dark"],
body.theme-dark {
  --akdash-bg: #07110d;
  --akdash-surface: #0b1712;
  --akdash-surface-2: #0a1511;
  --akdash-border: rgba(255, 255, 255, 0.10);
  --akdash-text: rgba(255, 255, 255, 0.95);
  --akdash-muted: rgba(255, 255, 255, 0.66);
  --akdash-link: #f1c40f;
  --akdash-gold: #f1c40f;

  --akdash-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  --akdash-shadow-hover: 0 18px 55px rgba(0, 0, 0, 0.45);

  --akdash-pill-ok-bg: rgba(34, 197, 94, 0.14);
  --akdash-pill-ok-tx: rgba(134, 239, 172, 0.95);

  --akdash-pill-warn-bg: rgba(245, 158, 11, 0.14);
  --akdash-pill-warn-tx: rgba(253, 230, 138, 0.95);

  --akdash-pill-muted-bg: rgba(148, 163, 184, 0.16);
  --akdash-pill-muted-tx: rgba(255, 255, 255, 0.70);

  --akdash-note-warn-bg: rgba(241, 196, 15, 0.10);
  --akdash-note-warn-bd: rgba(241, 196, 15, 0.22);

  --akdash-note-soft-bg: rgba(16, 185, 129, 0.10);
  --akdash-note-soft-bd: rgba(16, 185, 129, 0.20);
}

/* Optional: if you rely on prefers-color-scheme but don’t set classes */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light) {
    --akdash-bg: #07110d;
    --akdash-surface: #0b1712;
    --akdash-surface-2: #0a1511;
    --akdash-border: rgba(255, 255, 255, 0.10);
    --akdash-text: rgba(255, 255, 255, 0.95);
    --akdash-muted: rgba(255, 255, 255, 0.66);
    --akdash-link: #f1c40f;
    --akdash-gold: #f1c40f;
    --akdash-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    --akdash-shadow-hover: 0 18px 55px rgba(0, 0, 0, 0.45);
  }
}

/* Base */
.akdash {
  background: var(--akdash-bg);
  color: var(--akdash-text);
}

.akdash .akdash-shell {
  background: transparent;
}

/* Top strip */
.akdash-top { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; }
.akdash-week-k { font-size: 12px; color: var(--akdash-muted); }
.akdash-week-v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-right:10px }
.akdash-status { margin-top: 10px; display:inline-flex; align-items:center; gap:10px; color: var(--akdash-muted); font-size: 13px; }
.akdash-status-strong { color: var(--akdash-text); font-weight: 700; }
.akdash-dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(239, 68, 68, 0.9); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14); }
.akdash-dot--green { background: rgba(34, 197, 94, 0.95); box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14); }
.akdash-dot--red { background: rgba(239, 68, 68, 0.95); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14); }

/* Cards */
.akdash-card,
.akdash-stat {
  background: var(--akdash-surface) !important;
  border: 1px solid var(--akdash-border) !important;
  border-radius: 18px;
  box-shadow: var(--akdash-shadow);
}

.akdash-card:hover,
.akdash-stat:hover {
  transform: translateY(-1px);
  box-shadow: var(--akdash-shadow-hover);
}

.akdash-card,
.akdash-stat,
.akdash-row,
.akdash-note {
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease, background-color .18s ease;
}

/* Stats row */
.akdash-stats {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1024px) {
  .akdash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.akdash-stat { display:flex; gap:14px; padding:16px; text-decoration:none; }
.akdash-stat:hover { border-color: rgba(241, 196, 15, 0.35) !important; }
.akdash-stat-k { font-size: 12px; color: var(--akdash-muted); }
.akdash-stat-v { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
.akdash-unit { font-size: 12px; font-weight: 700; color: var(--akdash-muted); margin-left: 8px; }
.akdash-stat-s { margin-top: 6px; font-size: 12px; color: var(--akdash-link); }

.akdash-badge {
  display:inline-flex;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  align-items:center;
  justify-content:center;
  background: rgba(241, 196, 15, 0.12);
  border: 1px solid rgba(241, 196, 15, 0.25);
}
.akdash-ico { width: 22px; height: 22px; color: var(--akdash-gold); }

/* Grid */
.akdash-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 18px;
}
@media (max-width: 1024px) {
  .akdash-grid { grid-template-columns: 1fr; }
}

.akdash-card-head { display:flex; justify-content:space-between; gap:16px; padding:18px 18px 10px; }
.akdash-card-h { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.akdash-card-sub { margin-top: 4px; font-size: 12px; color: var(--akdash-muted); }
.akdash-card-link { color: var(--akdash-link); font-weight: 600; font-size: 13px; text-decoration:none; }
.akdash-card-link:hover { text-decoration: underline; }

/* Notes */
.akdash-note { margin: 14px 18px; padding: 16px; border-radius: 16px; border: 1px solid var(--akdash-border); background: var(--akdash-surface-2); }
.akdash-note--warn { background: var(--akdash-note-warn-bg); border-color: var(--akdash-note-warn-bd); }
.akdash-note--soft { background: var(--akdash-note-soft-bg); border-color: var(--akdash-note-soft-bd); }
.akdash-note-title { font-weight: 700; }
.akdash-note-body { margin-top: 6px; color: var(--akdash-muted); font-size: 13px; }
.akdash-note-actions { margin-top: 12px; display:flex; flex-wrap:wrap; gap:10px; }

.akdash-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Recent rows */
.akdash-list { padding: 0 18px 18px; display:flex; flex-direction:column; gap:12px; }

.akdash-row {
  background: var(--akdash-surface-2) !important;
  border: 1px solid var(--akdash-border) !important;
  border-radius: 16px;
  padding: 14px;
  display:flex;
  justify-content:space-between;
  gap:16px;
}

.akdash-row:hover { border-color: rgba(241, 196, 15, 0.28) !important; }

.akdash-row-title { font-weight: 900; letter-spacing:-0.01em; }
.akdash-row-meta { margin-top: 6px; font-size: 12px; color: var(--akdash-muted); }

.akdash-row-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.akdash-tx { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; color: var(--akdash-link); text-decoration:none; }
.akdash-tx:hover { text-decoration: underline; }
.akdash-tx--muted { color: var(--akdash-muted); }

/* Pills */
.akdash-pill { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--akdash-border); }
.akdash-pill--ok { background: var(--akdash-pill-ok-bg); color: var(--akdash-pill-ok-tx); border-color: rgba(34, 197, 94, 0.25); }
.akdash-pill--warn { background: var(--akdash-pill-warn-bg); color: var(--akdash-pill-warn-tx); border-color: rgba(245, 158, 11, 0.25); }
.akdash-pill--muted { background: var(--akdash-pill-muted-bg); color: var(--akdash-pill-muted-tx); }

/* Copy button in rows */
.akdash-copy {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 800;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(241, 196, 15, 0.28);
  background: rgba(241, 196, 15, 0.10);
  color: var(--akdash-link);
}
.akdash-copy:hover { background: rgba(241, 196, 15, 0.16); border-color: rgba(241, 196, 15, 0.40); }

.akdash-copysvg { width: 16px; height: 16px; }

/* Side links */
.akdash-links { padding: 6px 0 12px; }
.akdash-linkrow {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 18px;
  text-decoration:none;
  color: var(--akdash-text);
  border-top: 1px solid var(--akdash-border);
}
.akdash-linkrow:first-child { border-top: 0; }
.akdash-linkrow:hover { background: rgba(241, 196, 15, 0.08); }
.akdash-chev { color: var(--akdash-link); font-weight: 900; }

/* Circles list */
.akdash-circles { padding: 0 18px 18px; display:flex; flex-direction:column; gap:10px; }
.akdash-circle {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration:none;
  background: var(--akdash-surface-2);
  border: 1px solid var(--akdash-border);
  color: var(--akdash-text);
}
.akdash-circle:hover { border-color: rgba(241, 196, 15, 0.28); }
.akdash-circle-name { font-weight: 900; }
.akdash-circle-meta { margin-top: 4px; font-size: 12px; color: var(--akdash-muted); }
.akdash-circle-pill {
  width: 30px; height: 30px;
  display:grid; place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(241, 196, 15, 0.25);
  background: rgba(241, 196, 15, 0.10);
  color: var(--akdash-link);
  font-weight: 900;
}

/* Wallet form styling (forces non-white inputs in dark mode) */
.akdash-walletform { padding: 12px 18px 18px; }
.akdash-label { display:block; font-size: 12px; font-weight: 800; color: var(--akdash-muted); margin-bottom: 8px; }
.akdash-inputrow { display:grid; grid-template-columns: 1fr auto; gap: 10px; align-items:center; }

.akdash-input {
  height: 46px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--akdash-border) !important;
  background: var(--akdash-surface-2) !important;
  color: var(--akdash-text) !important;
  padding: 0 12px;
  outline: none;
}
.akdash-input::placeholder { color: rgba(148, 163, 184, 0.85); }
.akdash-input:focus {
  border-color: rgba(241, 196, 15, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(241, 196, 15, 0.14);
}

.akdash-help { margin-top: 8px; font-size: 12px; color: var(--akdash-muted); }
.akdash-error { margin-top: 8px; font-size: 12px; color: #ef4444; }

/* Wallet chips */
.akdash-wallets { padding: 0 0px 0px; }
.akdash-wallets-k { font-size: 12px; font-weight: 900; color: var(--akdash-muted); margin-bottom: 10px; }
.akdash-walletchips { display:flex; flex-direction:column; gap:10px; }

.akdash-wchip {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--akdash-surface-2);
  border: 1px solid var(--akdash-border);
}
.akdash-wchip-left { display:flex; align-items:center; gap:10px; min-width:0; }
.akdash-wchip-net {
  width: 34px; height: 34px; border-radius: 999px;
  display:grid; place-items:center;
  background: rgba(241, 196, 15, 0.10);
  border: 1px solid rgba(241, 196, 15, 0.22);
  color: var(--akdash-gold);
}
.akdash-bnb { width: 18px; height: 18px; }

.akdash-waddr { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 520px; color: var(--akdash-text); }
@media (max-width: 640px) { .akdash-waddr { max-width: 240px; } }

.akdash-wchip-actions { display:flex; gap:8px; }
.akdash-iconbtn {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--akdash-border);
  background: var(--akdash-surface);
  color: var(--akdash-text);
  display:grid; place-items:center;
}
.akdash-iconbtn:hover { border-color: rgba(241, 196, 15, 0.32); }
.akdash-iconbtn--danger:hover { border-color: rgba(239, 68, 68, 0.35); }
.akdash-trash { width: 18px; height: 18px; }

/* Toast */
.akdash-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--akdash-surface);
  border: 1px solid var(--akdash-border);
  box-shadow: var(--akdash-shadow);
  color: var(--akdash-text);
  font-weight: 900;
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.akdash-toast.is-show { opacity: 1; transform: translateY(0); }

/* Small separators */
.akdash-sep { margin: 0 8px; color: var(--akdash-muted); }

/* Prevent any global "card bg" rules from overriding us */
.akdash .card,
.akdash [class*="card"] {
  background: unset;
}
/* =========================
   Akuno Dashboard (akdash)
   Light/Dark via existing .dark class
   ========================= */

/* LIGHT DEFAULTS */
.akdash{
  --ak-bg: #f4f7f5;
  --ak-bg2: #eef3f0;
  --ak-surface: #ffffff;
  --ak-surface2: #fbfcfb;
  --ak-border: rgba(16, 24, 16, .10);
  --ak-border2: rgba(16, 24, 16, .14);

  --ak-text: #0f1b13;
  --ak-muted: rgba(15, 27, 19, .68);

  --ak-green: #0b6b4d;      /* brand green */
  --ak-green2: #0f7a58;     /* hover */
  --ak-gold: #f1c40f;

  --ak-shadow: 0 10px 30px rgba(8, 20, 12, .08);
  --ak-shadow2: 0 10px 22px rgba(8, 20, 12, .10);

  --ak-pill-ok-bg: rgba(11, 107, 77, .12);
  --ak-pill-ok-fg: #0b6b4d;

  --ak-pill-warn-bg: rgba(241, 196, 15, .20);
  --ak-pill-warn-fg: #8a6a00;

  --ak-pill-muted-bg: rgba(15, 27, 19, .10);
  --ak-pill-muted-fg: rgba(15, 27, 19, .70);

  --ak-note-warn-bg: #fbf4df;
  --ak-note-warn-border: rgba(241, 196, 15, .35);

  --ak-note-soft-bg: #f4fbf7;
  --ak-note-soft-border: rgba(11, 107, 77, .20);
}

/* DARK OVERRIDES (matches your existing theme toggle if it uses .dark on html/body) */
html.dark .akdash,
body.dark .akdash,
.dark .akdash{
  --ak-bg: #07110c;
  --ak-bg2: #050e0a;
  --ak-surface: rgba(11, 20, 15, .88);
  --ak-surface2: rgba(9, 18, 13, .92);
  --ak-border: rgba(190, 255, 220, .10);
  --ak-border2: rgba(190, 255, 220, .14);

  --ak-text: rgba(245, 255, 248, .96);
  --ak-muted: rgba(245, 255, 248, .66);

  --ak-green: #12b981;
  --ak-green2: #17c88d;

  --ak-shadow: 0 18px 55px rgba(0,0,0,.40);
  --ak-shadow2: 0 14px 34px rgba(0,0,0,.35);

  --ak-pill-ok-bg: rgba(18, 185, 129, .16);
  --ak-pill-ok-fg: rgba(200, 255, 235, .95);

  --ak-pill-warn-bg: rgba(241, 196, 15, .18);
  --ak-pill-warn-fg: rgba(255, 235, 170, .95);

  --ak-pill-muted-bg: rgba(245, 255, 248, .10);
  --ak-pill-muted-fg: rgba(245, 255, 248, .70);

  --ak-note-warn-bg: rgba(241, 196, 15, .10);
  --ak-note-warn-border: rgba(241, 196, 15, .22);

  --ak-note-soft-bg: rgba(18, 185, 129, .08);
  --ak-note-soft-border: rgba(18, 185, 129, .18);
}

/* PAGE BACKGROUND + SHELL */
.akdash{
  background: #f4f5f5;
  min-height: calc(100vh - 110px);
}

.akdash-shell{
  color: var(--ak-text);
}

/* TOP STRIP */
.akdash-week-k,
.akdash-card-sub,
.akdash-help,
.akdash-empty-sub,
.akdash-row-meta,
.akdash-hello-link{
  color: var(--ak-muted);
}

/* STATUS PILL */
.akdash-status{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--ak-border);
  background: var(--ak-surface2);
  border-radius: 999px;
  box-shadow: var(--ak-shadow2);
}
.akdash-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(200, 30, 30, .9);
  box-shadow: 0 0 0 4px rgba(200, 30, 30, .12);
}
.akdash-dot--green{
  background: rgba(18, 185, 129, .95);
  box-shadow: 0 0 0 4px rgba(18, 185, 129, .14);
}
.akdash-dot--red{
  background: rgba(230, 60, 60, .95);
  box-shadow: 0 0 0 4px rgba(230, 60, 60, .14);
}
.akdash-status-text{ color: var(--ak-muted); }
.akdash-status-strong{ color: var(--ak-text); font-weight: 700; }

/* CARDS */
.akdash-card,
.akdash-stat{
  background: var(--ak-surface);
  border: 1px solid var(--ak-border);
  border-radius: 18px;
  box-shadow: var(--ak-shadow);
}

/* HOVERS */
.akdash-card:hover,
.akdash-stat:hover{
  border-color: var(--ak-border2);
  transform: translateY(-1px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.akdash-stat:hover{
  box-shadow: var(--ak-shadow2);
}

/* STAT BADGE */
.akdash-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(241, 196, 15, .16);
  color: var(--ak-green);
  border: 1px solid rgba(241, 196, 15, .25);
}

/* LIST ROWS */
.akdash-row{
  background: var(--ak-surface2);
  border: 1px solid var(--ak-border);
  border-radius: 14px;
}
.akdash-row:hover{
  border-color: var(--ak-border2);
}

/* PILLS */
.akdash-pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--ak-border);
}
.akdash-pill--ok{ background: var(--ak-pill-ok-bg); color: var(--ak-pill-ok-fg); border-color: rgba(18, 185, 129, .22); }
.akdash-pill--warn{ background: var(--ak-pill-warn-bg); color: var(--ak-pill-warn-fg); border-color: rgba(241, 196, 15, .28); }
.akdash-pill--muted{ background: var(--ak-pill-muted-bg); color: var(--ak-pill-muted-fg); }

/* LINKS + TX */
.akdash-card-link,
.akdash-tx{
  color: var(--ak-gold);
  text-decoration: none;
}
.akdash-card-link:hover,
.akdash-tx:hover{
  text-decoration: underline;
}

/* QUICK LINKS */
.akdash-linkrow{
  border-top: 1px solid var(--ak-border);
}
.akdash-linkrow:hover{
  background: var(--ak-surface2);
}

/* NOTES */
.akdash-note{
  border-radius: 16px;
  border: 1px solid var(--ak-border);
}
.akdash-note--warn{
  background: var(--ak-note-warn-bg);
  border-color: var(--ak-note-warn-border);
}
.akdash-note--soft{
  background: var(--ak-note-soft-bg);
  border-color: var(--ak-note-soft-border);
}

/* INPUTS (forces dark inputs to not go white) */
.akdash-input{
  background: var(--ak-surface2);
  color: var(--ak-text);
  border: 1px solid var(--ak-border);
  border-radius: 14px;
  height: 52px;
  padding: 0 14px;
  outline: none;
}
.akdash-input::placeholder{ color: rgba(127, 145, 132, .85); }
.akdash-input:focus{
  border-color: rgba(18, 185, 129, .45);
  box-shadow: 0 0 0 4px rgba(18, 185, 129, .16);
}

/* “Remember me” + general form controls in dashboard area */
.akdash input[type="checkbox"],
.akdash input[type="radio"]{
  accent-color: var(--ak-green);
}

/* Tiny toast */
.akdash-toast{
  background: rgba(15, 27, 19, .92);
  color: #fff;
}
html.dark .akdash-toast,
body.dark .akdash-toast,
.dark .akdash-toast{
  background: rgba(245,255,248,.14);
  color: var(--ak-text);
  border: 1px solid var(--ak-border);
}
/* =========================
   AKDASH FIX V2
   Forces cards/tiles to truly switch in light mode
   (must be LAST in your CSS file)
   ========================= */

/* LIGHT variables */
.akdash{
  --akdash-bg: #f4f7f5;
  --akdash-bg2: #eef3f0;

  --akdash-card: #ffffff;
  --akdash-card2: #fbfcfb;

  --akdash-border: rgba(16,24,16,.10);
  --akdash-border2: rgba(16,24,16,.16);

  --akdash-text: #0f1b13;
  --akdash-muted: rgba(15,27,19,.66);

  --akdash-green: #0b6b4d;
  --akdash-gold: #f1c40f;

  --akdash-shadow: 0 10px 30px rgba(8,20,12,.08);
  --akdash-shadow2: 0 12px 22px rgba(8,20,12,.10);

  --akdash-row: #f7faf8;

  --akdash-note-warn-bg: #fbf4df;
  --akdash-note-warn-border: rgba(241,196,15,.38);

  --akdash-note-soft-bg: #f2fbf6;
  --akdash-note-soft-border: rgba(11,107,77,.22);
}

/* DARK variables */
html.dark .akdash,
body.dark .akdash,
.dark .akdash{
  --akdash-bg: #07110c;
  --akdash-bg2: #050e0a;

  --akdash-card: rgba(11,20,15,.88);
  --akdash-card2: rgba(9,18,13,.92);

  --akdash-border: rgba(190,255,220,.10);
  --akdash-border2: rgba(190,255,220,.16);

  --akdash-text: rgba(245,255,248,.96);
  --akdash-muted: rgba(245,255,248,.66);

  --akdash-green: #12b981;
  --akdash-gold: #f1c40f;

  --akdash-shadow: 0 18px 55px rgba(0,0,0,.40);
  --akdash-shadow2: 0 14px 34px rgba(0,0,0,.35);

  --akdash-row: rgba(245,255,248,.06);

  --akdash-note-warn-bg: rgba(241,196,15,.10);
  --akdash-note-warn-border: rgba(241,196,15,.22);

  --akdash-note-soft-bg: rgba(18,185,129,.08);
  --akdash-note-soft-border: rgba(18,185,129,.18);
}

/* PAGE background (wins) */
.akdash{
  background:
	background: #f4f5f5; 
  color: var(--akdash-text) !important;
}

.dark .akdash {
	background: #050e0a;
}

/* These are the bits stuck in dark mode — override hard backgrounds */
.akdash .akdash-card,
.akdash .akdash-stat,
.akdash .akdash-row{
  background: var(--akdash-card) !important;
  border: 1px solid var(--akdash-border) !important;
  box-shadow: var(--akdash-shadow) !important;
  color: var(--akdash-text) !important;
}

.dark .akdash-card {
	background: rgba(3, 31, 20, 0.4) !important;
}

.akdash .akdash-row{
  background: var(--akdash-row) !important;
  box-shadow: none !important;
}

/* headings + supporting text */
.akdash .akdash-week-k,
.akdash .akdash-card-sub,
.akdash .akdash-help,
.akdash .akdash-empty-sub,
.akdash .akdash-row-meta,
.akdash .akdash-hello-link{
  color: var(--akdash-muted);
}

/* quick links rows */
.akdash .akdash-linkrow{
  border-top: 1px solid var(--akdash-border) !important;
}
.akdash .akdash-linkrow:hover{
  background: var(--akdash-card2) !important;
}

/* status pill */
.akdash .akdash-status{
  background: var(--akdash-card2) !important;
  border: 1px solid var(--akdash-border) !important;
  box-shadow: var(--akdash-shadow2) !important;
}

/* stat icon badge */
.akdash .akdash-badge{
  background: rgba(241,196,15,.16) !important;
  border: 1px solid rgba(241,196,15,.25) !important;
  color: var(--akdash-green) !important;
}

/* pills */
.akdash .akdash-pill{ border-color: var(--akdash-border) !important; }
.akdash .akdash-pill--ok{
  background: rgba(11,107,77,.12) !important;
  color: var(--akdash-green) !important;
  border-color: rgba(11,107,77,.22) !important;
}
html.dark .akdash .akdash-pill--ok,
body.dark .akdash .akdash-pill--ok,
.dark .akdash .akdash-pill--ok{
  background: rgba(18,185,129,.16) !important;
  color: rgba(200,255,235,.95) !important;
  border-color: rgba(18,185,129,.22) !important;
}

.akdash .akdash-pill--warn{
  background: rgba(241,196,15,.20) !important;
  color: #8a6a00 !important;
  border-color: rgba(241,196,15,.28) !important;
}
html.dark .akdash .akdash-pill--warn,
body.dark .akdash .akdash-pill--warn,
.dark .akdash .akdash-pill--warn{
  color: rgba(255,235,170,.95) !important;
}

/* note blocks */
.akdash .akdash-note--warn{
  background: var(--akdash-note-warn-bg) !important;
  border-color: var(--akdash-note-warn-border) !important;
  
}
.akdash .akdash-note--soft{
  background: var(--akdash-note-soft-bg) !important;
  border-color: var(--akdash-note-soft-border) !important;
}

/* inputs (keeps them correct in dark + light) */
.akdash .akdash-input{
  background: var(--akdash-card2) !important;
  color: var(--akdash-text) !important;
  border: 1px solid var(--akdash-border) !important;
}
.akdash .akdash-input::placeholder{
  color: rgba(127,145,132,.85) !important;
}
.akdash .akdash-input:focus{
  border-color: rgba(18,185,129,.45) !important;
  box-shadow: 0 0 0 4px rgba(18,185,129,.16) !important;
}

/* gold links */
.akdash .akdash-card-link,
.akdash .akdash-chev{
  color: var(--akdash-gold) !important;
}
/* =========================
   AKDASH ACCENT FIX
   Green / dark in light mode
   Gold ONLY on dark surfaces
   ========================= */

/* LIGHT MODE — no gold as primary accent */
.akdash{
  --akdash-accent: #0b6b4d;        /* Akuno green */
  --akdash-accent-soft: rgba(11,107,77,.12);
  --akdash-link: #3d9970;
  --akdash-icon: #0f1b13;
}

/* DARK MODE — gold allowed */
html.dark .akdash,
body.dark .akdash,
.dark .akdash{
  --akdash-accent: #f1c40f;
  --akdash-accent-soft: rgba(241,196,15,.18);
  --akdash-link: #f1c40f;
  --akdash-icon: #f1c40f;
}

/* ===== Icons ===== */
.akdash svg,
.akdash .akdash-ico,
.akdash .akdash-circle-pill,
.akdash .akdash-chev{
  color: var(--akdash-icon);
 
  color: #3d9970;
}

.dark .akdash svg {
	 color: #f5c645;
	
}

/* ===== Links ===== */
.akdash .akdash-card-link,
.akdash .akdash-linkrow span:last-child{
  color: var(--akdash-link) !important;
}



/* ===== Buttons that looked wrong ===== */
.akdash .btn-outline{
  color: var(--akdash-accent) !important;
  border-color: var(--akdash-accent) !important;
}

/* ===== Copy TXID button ===== */
.akdash .akdash-copy,
.akdash .copy-txid,
.akdash .btn-copy{
  color: var(--akdash-accent) !important;
  background: transparent !important;
  border-color: var(--akdash-accent-soft) !important;
}

/* ===== Stat icon badge ===== */
.akdash .akdash-badge{
  background: var(--akdash-accent-soft) !important;
  border-color: var(--akdash-accent) !important;
  color: var(--akdash-accent) !important;
}

/* ===== Pills ===== */
.akdash .akdash-pill--ok{
  color: var(--akdash-accent) !important;
  border-color: var(--akdash-accent) !important;
}

/* Invalid / muted stay neutral */
.akdash .akdash-pill--muted{
  color: #6b7280 !important;
  border-color: rgba(107,114,128,.3) !important;
}
/* =========================
   TXID COLOR FIX
   ========================= */

/* Default TXID (light mode) */
.akdash-tx,
.akdash-copy,
.akdash-copy span,
.akdash-copy svg{
  color: #0b6b4d !important; /* Akuno green */
}

/* Muted TXID (fallback) */
.akdash-tx--muted{
  color: #6b7280 !important;
}

/* Dark mode keeps gold */
.dark .akdash-tx,
.dark .akdash-copy,
.dark .akdash-copy span,
.dark .akdash-copy svg{
  color: #f1c40f !important;
}


/* =========================
   COPY TOAST — LIGHT & DARK
   ========================= */

.akdash-toast{
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  transition: opacity .15s ease, transform .15s ease;
  transform: translateY(6px);
  opacity: 0;
  z-index: 50;
}

/* Show */
.akdash-toast.is-show{
  opacity: 1;
  transform: translateY(0);
}

/* LIGHT MODE */
.akdash-toast{
  background: #ffffff;
  color: #0f1b13;
  border: 1px solid rgba(11,107,77,.25);
}

/* DARK MODE */
.dark .akdash-toast{
  background: #0f1b13;
  color: #ffffff;
  border: 1px solid rgba(241,196,15,.35);
}


/* Contributions: Track wallet spacing (small tidy) */
.ak-page [data-track-form]{
  margin-top: 1rem;
}
.ak-page [data-track-form] .ak-input{
  padding-left: 14px;
  padding-right: 14px;
}

/* Dark mode: selects must be readable */
.dark .ak-select{
  background: rgba(255,255,255,.04);
  border-color: rgba(148,163,184,.22);
  color: #f8fafc;
}

/* Dropdown list (browser renders options separately) */
.dark .ak-select option{
  background: #ffffff;
  color: #0b1220;
}


/* Dark mode: inputs visible + placeholder readable */
.dark .ak-input{
  background: rgba(255,255,255,.04);
  border-color: rgba(148,163,184,.22);
  color: #f8fafc;
}

.dark .ak-input::placeholder{
  color: rgba(226,232,240,.55);
}
/* =========================================================
   Dark mode — form controls (inputs + selects) must be readable
   Fixes: invisible typed text, invisible placeholder, select value
   ========================================================= */

.dark .ak-input,
.dark .ak-select{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.22);
  color: #f8fafc;                 /* typed text */
}

.dark .ak-input::placeholder{
  color: rgba(226,232,240,.55);   /* placeholder */
  opacity: 1;
}

/* Some browsers treat select placeholder/value differently */
.dark .ak-select:required:invalid{
  color: rgba(226,232,240,.55);   /* "All circles" / placeholder style */
}

/* Ensure options list is readable when dropdown opens */
.dark .ak-select option{
  background: #0b1220;
  color: #f8fafc;
}

/* If Tailwind/base styles are forcing text-fill (Safari/Chromium) */
.dark .ak-input{
  -webkit-text-fill-color: #f8fafc;
}
.dark .ak-input::placeholder{
  -webkit-text-fill-color: #f8fafc;
}


/* =========================================================
   Dark mode form controls fix (inputs + selects + options)
   - Fixes invisible typed text
   - Fixes placeholder in dark
   - Makes <select> match dark UI (including dropdown list)
   ========================================================= */

/* INPUTS (dark mode) */
.dark .ak-input{
  background: rgba(7, 18, 13, .70);
  color: rgba(248, 250, 252, .95);
  border-color: rgba(148, 163, 184, .22);
  caret-color: rgba(248, 250, 252, .95);
}

.dark .ak-input::placeholder{
  color: rgba(226, 232, 240, .55);
}

.dark .ak-input:focus{
  border-color: rgba(241, 196, 15, .55);
  box-shadow: 0 0 0 4px rgba(241, 196, 15, .14);
  outline: none;
}

/* SELECT (dark mode) */
.dark .ak-select{
  background: rgba(7, 18, 13, .70);
  color: rgba(248, 250, 252, .95);
  border-color: rgba(148, 163, 184, .22);
  box-shadow: none;
}

.dark .ak-select:focus{
  border-color: rgba(241, 196, 15, .55);
  box-shadow: 0 0 0 4px rgba(241, 196, 15, .14);
  outline: none;
}

/* The dropdown list (browser-dependent, but this covers most) */
.dark .ak-select option{
  background: #07120d;              /* dark panel */
  color: rgba(248, 250, 252, .95);  /* white text */
}

/* Fix “All circles” looking faded/white in dark mode */
.dark .ak-select option[disabled],
.dark .ak-select:invalid{
  color: rgba(226, 232, 240, .70);
}

/* ===========================
   Dark mode: form controls
   =========================== */

.dark .ak-input,
.dark .ak-select{
  color-scheme: dark !important; /* tells browser to render form UI as dark */
  background-color: rgba(7,18,13,.72) !important;
  color: rgba(248,250,252,.95) !important;
  border-color: rgba(148,163,184,.22) !important;
}

.dark .ak-input::placeholder{
  color: rgba(226,232,240,.55) !important;
}

.dark .ak-input:focus,
.dark .ak-select:focus{
  border-color: rgba(241,196,15,.55) !important;
  box-shadow: 0 0 0 4px rgba(241,196,15,.14) !important;
  outline: none !important;
}

/* Make the disabled "All circles" readable when it's the selected placeholder */
.dark .ak-select:invalid{
  color: rgba(226,232,240,.75) !important;
}

/* Dropdown list items (Chrome/Edge respect this; some browsers ignore option styling) */
.dark .ak-select option{
  background-color: #07120d !important;
  color: rgba(248,250,252,.95) !important;
}
/* ===========================
   Dark mode – wallet input legibility
   =========================== */

.dark .ak-input{
  color: #f8fafc !important;            /* typed text */
  caret-color: #f8fafc !important;     /* cursor */
}

/* Placeholder (already partly fixed, reinforce it) */
.dark .ak-input::placeholder{
  color: rgba(226,232,240,.55) !important;
}

/* Chrome / Safari autofill fix */
.dark .ak-input:-webkit-autofill,
.dark .ak-input:-webkit-autofill:hover,
.dark .ak-input:-webkit-autofill:focus{
  -webkit-text-fill-color: #f8fafc !important;
  box-shadow: 0 0 0 1000px rgba(7,18,13,.72) inset !important;
  transition: background-color 9999s ease-out 0s;
}
/* ================================
   Private beta banner (latest)
   - full width, calm, sticky top
   - close icon: green (light), gold (dark), bigger
   - nav offset only when banner is present (fixes “vacuum gap”)
   ================================ */

:root { --ak-beta-h: 0px; }

/* Set this class on <html> or <body> only when banner is visible */
.ak-has-beta-banner { --ak-beta-h: 52px; } /* tweak if your banner height differs */

/* Banner wrapper */
.ak-beta{
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid rgba(15,23,42,.10);
  position: sticky;
  top: 0;
  z-index: 60;
}

.dark .ak-beta{
  background: rgba(2,10,7,1);
  background: rgb(14, 32, 26);
  background: rgb(4, 70, 44);
  border-bottom: 1px solid rgba(148,163,184,.18);
}

/* Inner row */
.ak-beta__inner{
  max-width: 80rem; /* ~max-w-7xl */
  margin: 0 auto;
  padding: .20rem 1.75rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Pill */
.ak-beta__pill{
  display: inline-flex;
  align-items: center;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .02em;
  color: #0b1220;
  background: rgba(61,153,112,.12);
  border: 1px solid rgba(61,153,112,.30);
  white-space: nowrap;
}

.dark .ak-beta__pill{
  color: #eafff6;
  background: rgba(61,153,112,.14);
  border-color: rgba(61,153,112,.38);
}

/* Text + link */
.ak-beta__text{
  margin: 0;
  font-size: .9rem;
  color: #334155;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  min-width: 0;
}

.dark .ak-beta__text{
  color: rgba(226,232,240,.86);
}

.ak-beta__link{
  font-weight: 700;
  color: #1f7a57;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dark .ak-beta__link{
  color: #7fe0b9;
}

/* Close button (bigger, obvious) */
.ak-beta-close{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  cursor: pointer;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: #3D9970; /* light: green */
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05);
  padding-bottom:4px; 
}

.ak-beta-close span{
  font-size: 30px;
}

.ak-beta-close:hover{
  background: rgba(61,153,112,.12);
}

.ak-beta-close:active{
  transform: scale(.94);
}

.ak-beta-close:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.dark .ak-beta-close{
  color: #F1C40F; /* dark: gold */
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}

.dark .ak-beta-close:hover{
  background: rgba(241,196,15,.15);
}

/* ================================
   Nav offset fix (no “vacuum gap”)
   Only apply top offset when banner is visible
   ================================ */

.ak-nav, .ak-navbar, .site-nav, nav.sticky, nav.fixed {
  top: 0;
}

.ak-has-beta-banner .ak-nav,
.ak-has-beta-banner .ak-navbar,
.ak-has-beta-banner .site-nav,
.ak-has-beta-banner nav.sticky,
.ak-has-beta-banner nav.fixed {
  top: var(--ak-beta-h);
}


/* ================================
   Beta banner — mobile polish
   ================================ */
@media (max-width: 640px){

  /* tighter but breathable */
  .ak-beta__inner{
    padding: .6rem .9rem;
    gap: .6rem;
    align-items: flex-start;
  }

  /* allow multi-line layout */
  .ak-beta__text{
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    line-height: 1.35;
  }

  /* keep pill + close aligned nicely */
  .ak-beta__pill{
    margin-top: 2px;
  }

  /* make the link sit on its own line and feel tappable */
  .ak-beta__link{
    display: inline-flex;
    padding: .1rem 0;
    text-underline-offset: 4px;
    word-break: normal;
  }

  /* close button: better hit area and less “floating” */
  .ak-beta-close{
    width: 44px;
    height: 44px;
    margin-left: .25rem;
    margin-top: -2px;
  }

  .ak-beta-close iconify-icon{
    font-size: 26px;
  }
}

/* Ultra small screens: stop the pill stealing horizontal space */
@media (max-width: 380px){
  .ak-beta__inner{
    flex-wrap: wrap;
  }
  .ak-beta__pill{
    order: 0;
  }
  .ak-beta__text{
    order: 1;
    flex: 1 1 100%;
  }
  .ak-beta-close{
    order: 2;
    margin-left: auto;
    margin-top: -6px;
  }
}


/* =========================================
   Subpage header — grid + outline circles
   (dark + light variants)
   ========================================= */

.ak-subpage-header{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(148,163,184,.14);
  padding: 2.25rem 0 1.75rem;
  background: #06130f; /* dark base */
}

/* Soft gradient wash */
.ak-subpage-header::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(61,153,112,.20), transparent 60%),
    radial-gradient(700px 520px at 82% 70%, rgba(241,196,15,.14), transparent 62%),
    radial-gradient(520px 420px at 55% 45%, rgba(61,153,112,.12), transparent 65%);
  pointer-events:none;
  z-index:0;
}

/* Grid overlay (subtle) */
.ak-subpage-header::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(148,163,184,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.10) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .22;
  pointer-events:none;
  z-index:0;
}

/* Outline circles layer */
.ak-subpage-header__orbits{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.ak-subpage-header__orbit{
  position:absolute;
  border-radius:9999px;
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: inset 0 0 0 1px rgba(2, 12, 9, .05);
  opacity:.55;
  filter: blur(.0px);
}

/* circle placements (tweak freely) */
.ak-subpage-header__orbit--a{
  width: 360px; height: 360px;
  right: -120px; top: 14px;
  border-color: rgba(61,153,112,.20);
  opacity:.45;
}
.ak-subpage-header__orbit--b{
  width: 520px; height: 520px;
  right: -210px; top: -120px;
  border-color: rgba(148,163,184,.14);
  opacity:.35;
}
.ak-subpage-header__orbit--c{
  width: 220px; height: 220px;
  right: 36px; top: 64px;
  border-color: rgba(241,196,15,.22);
  opacity:.40;
}
.ak-subpage-header__orbit--d{
  width: 140px; height: 140px;
  right: 140px; top: 38px;
  border-color: rgba(148,163,184,.12);
  opacity:.35;
}

/* Ensure content sits above overlays */
.ak-subpage-header__inner{
  position: relative;
  z-index: 1;
}

/* Typography */
.ak-subpage-title{
  margin-top: .45rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #f8fafc;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.1;
}

.ak-subpage-lead{
  margin-top: .65rem;
  max-width: 70ch;
  color: rgba(226,232,240,.86);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Breadcrumbs */
.ak-subpage-breadcrumbs{ margin-bottom: .25rem; }
.ak-crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  align-items:center;
  color: rgba(226,232,240,.72);
  font-size: .9rem;
}
.ak-crumb-link{
  color: rgba(226,232,240,.82);
  text-decoration: none;
}
.ak-crumb-link:hover{ text-decoration: underline; text-underline-offset: 3px; }
.ak-crumb-current{ color: rgba(226,232,240,.92); font-weight: 650; }
.ak-crumb-sep{ opacity:.55; }

/* Light mode variant */
.light .ak-subpage-header,
:root:not(.dark) .ak-subpage-header{
  background: #f7fbf9;
  border-bottom-color: rgba(15,23,42,.10);
}

.light .ak-subpage-header::before,
:root:not(.dark) .ak-subpage-header::before{
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(61,153,112,.12), transparent 62%),
    radial-gradient(700px 520px at 82% 70%, rgba(241,196,15,.10), transparent 64%),
    radial-gradient(520px 420px at 55% 45%, rgba(15,23,42,.05), transparent 70%);
}

.light .ak-subpage-header::after,
:root:not(.dark) .ak-subpage-header::after{
  background-image:
    linear-gradient(to right, rgba(15,23,42,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.07) 1px, transparent 1px);
  opacity: .18;
}

.light .ak-subpage-title,
:root:not(.dark) .ak-subpage-title{
  color: #0b1220;
}

.light .ak-subpage-lead,
:root:not(.dark) .ak-subpage-lead{
  color: #334155;
}

.light .ak-crumbs,
:root:not(.dark) .ak-crumbs{
  color: #475569;
}


.light .ak-subpage-header__orbit,
:root:not(.dark) .ak-subpage-header__orbit{
  border-color: rgba(15,23,42,.10);
  opacity:.55;
}

.light .ak-subpage-header__orbit--a,
:root:not(.dark) .ak-subpage-header__orbit--a{
  border-color: rgba(61,153,112,.22);
}
.light .ak-subpage-header__orbit--c,
:root:not(.dark) .ak-subpage-header__orbit--c{
  border-color: rgba(241,196,15,.22);
}

/* Mobile polish */
@media (max-width: 640px){
  .ak-subpage-header{ padding: 1.6rem 0 1.25rem; }
  .ak-subpage-header::after{ background-size: 34px 34px; }
  .ak-subpage-header__orbit--b{ right:-260px; top:-170px; }
  .ak-subpage-header__orbit--a{ right:-150px; top:30px; }
  .ak-subpage-title{ font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .ak-subpage-lead{ font-size: 1rem; }
}


/* =========================================
   Slim subpage header — grid + orbits (v2)
   ========================================= */

.ak-subpage-header{
  position: relative;
  overflow: hidden;
  padding: 0.1rem 0 .1rem; /* SLIM */
  border-bottom: 1px solid rgba(148,163,184,.16);
  background: #06130f;
}

/* Colour wash — stronger but controlled */
.ak-subpage-header::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(600px 260px at 12% 10%, rgba(61,153,112,.32), transparent 60%),
    radial-gradient(520px 260px at 88% 55%, rgba(241,196,15,.24), transparent 62%),
    radial-gradient(420px 220px at 50% 40%, rgba(61,153,112,.18), transparent 65%);
  pointer-events:none;
  z-index:0;
}

/* Fine grid — denser, lighter */
.ak-subpage-header::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(148,163,184,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.10) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity:.22;
  pointer-events:none;
  z-index:0;
}

/* Orbit layer */
.ak-subpage-header__orbits{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.ak-subpage-header__orbit{
  position:absolute;
  border-radius:9999px;
  border:1px solid rgba(148,163,184,.18);
  opacity:.55;
}

/* Smaller, tighter circles */
.ak-subpage-header__orbit--a{
  width:260px; height:260px;
  right:-110px; top:-60px;
  border-color: rgba(61,153,112,.32);
}
.ak-subpage-header__orbit--b{
  width:380px; height:380px;
  right:-180px; top:-160px;
  border-color: rgba(241,196,15,.28);
  opacity:.38;
}
.ak-subpage-header__orbit--c{
  width:140px; height:140px;
  right:40px; top:18px;
  border-color: rgba(148,163,184,.26);
}

/* Content above visuals */
.ak-subpage-header__inner{
  position:relative;
  z-index:1;
}

/* Breadcrumbs — compact */
.ak-subpage-breadcrumbs{ margin-bottom:.2rem; }
.ak-crumbs{
  display:flex;
  gap:.35rem;
  font-size:.78rem;
  color: rgba(226,232,240,.70);
}
.ak-crumb-link{
  color: rgba(226,232,240,.85);
  text-decoration:none;
}
.ak-crumb-link:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}
.ak-crumb-current{
  font-weight:600;
  color: rgba(226,232,240,.95);
}
.ak-crumb-sep{ opacity:.5; }

/* Title — bold but compact */
.ak-subpage-title{
  margin:0;
  font-weight:900;
  letter-spacing:-.02em;
  font-size: clamp(1.55rem, 2.4vw, 2.2rem);
  line-height:1.15;
  color:#f8fafc;
}

/* Optional lead */
.ak-subpage-lead{
  margin-top:.25rem;
  font-size:.95rem;
  color: rgba(226,232,240,.82);
  max-width:65ch;
}

/* =====================
   Light mode variant
   ===================== */

.light .ak-subpage-header,
:root:not(.dark) .ak-subpage-header{
  background:#e9ece6;
 background:#e3f5e8;
 background: #e1f0eb;
  border-bottom-color: rgba(15,23,42,.10);
}

.light .ak-subpage-header::before,
:root:not(.dark) .ak-subpage-header::before{
  background:
    radial-gradient(600px 260px at 12% 10%, rgba(61,153,112,.22), transparent 62%),
    radial-gradient(520px 260px at 88% 55%, rgba(241,196,15,.20), transparent 64%),
    radial-gradient(420px 220px at 50% 40%, rgba(15,23,42,.06), transparent 70%);
}

.light .ak-subpage-header::after,
:root:not(.dark) .ak-subpage-header::after{
  background-image:
    linear-gradient(to right, rgba(15,23,42,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.08) 1px, transparent 1px);
  opacity:.18;
}

.light .ak-subpage-title,
:root:not(.dark) .ak-subpage-title{
  color:#0b1220;
}

.light .ak-subpage-lead,
:root:not(.dark) .ak-subpage-lead{
  color:#334155;
}

.light .ak-crumbs,
:root:not(.dark) .ak-crumbs{
  color:#475569;
}


/* Mobile — ultra compact */
@media (max-width:640px){
  .ak-subpage-header{ padding:.85rem 0 .75rem; }
  .ak-subpage-title{
    font-size:1.45rem;
  }
  .ak-subpage-header__orbit--b{ display:none; }
}

/* Topbar chips row */
.ak-circle-show__chips{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.65rem;
  flex-wrap:wrap;
}

/* Network chip (matches countdown pill vibe) */
.ak-chip--network{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .85rem;
  border-radius:9999px;
  background: rgba(255,255,255,.06);
  background: rgb(252, 253, 253);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.ak-chip--network .ak-chip__ic{
  width:18px;
  height:18px;
  display:block;
}

.ak-chip--network .ak-chip__strong{
  font-weight:800;
  letter-spacing:.01em;
}

/* Light mode tweak if needed */
:root:not(.dark) .ak-chip--network{
  background: rgb(243, 249, 246);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

.ak-subpage-titleRow{
  display:flex;
  align-items:center;
  gap:.85rem;
}

.ak-subpage-titleIcon{
  width:54px;
  height:54px;
  border-radius:16px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  flex:0 0 auto;
}

:root:not(.dark) .ak-subpage-titleIcon{
  background: rgba(255,255,255,.78);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 14px 34px rgba(15,23,42,.10);
}

.ak-subpage-titleImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* slightly bigger on large screens */
@media (min-width: 1024px){
  .ak-subpage-titleIcon{ width:62px; height:62px; border-radius:18px; }
}


/* =========================================
   Circle show topbar – image + pills layout
   ========================================= */

.ak-circle-show__topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem 1.2rem;
  border-radius:1.25rem;
  border:1px solid rgba(148,163,184,.18);
  background: rgba(2, 12, 9, .62);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}

:root:not(.dark) .ak-circle-show__topbar{
  background: rgba(255,255,255,.74);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 18px 44px rgba(15,23,42,.10);
}

.ak-circle-show__titleWrap{
  display:flex;
  align-items:center;
  gap:.9rem;
  min-width:0;
}

.ak-circle-show__img{
  width:56px;
  height:56px;
  border-radius:18px;
  overflow:hidden;
  flex:0 0 auto;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(148,163,184,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

:root:not(.dark) .ak-circle-show__img{
  background: rgba(255,255,255,.85);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 14px 34px rgba(15,23,42,.12);
}

.ak-circle-show__imgEl{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ak-circle-show__bigfee{
  font-size:1.55rem;
  font-weight:900;
  line-height:1.05;
  color: rgba(255,255,255,.96);
  letter-spacing:-.02em;
}

:root:not(.dark) .ak-circle-show__bigfee{
  color:#0b1220;
}

.ak-circle-show__bigfee span{
  font-size:.95rem;
  font-weight:800;
  opacity:.9;
  margin-left:.45rem;
}

.ak-circle-show__topbarRight{
  display:flex;
  align-items:center;
}

.ak-circle-show__chips{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* -----------------------------------------
   Chips
   ----------------------------------------- */

.ak-chip{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.52rem .78rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.20);
  background: rgba(2,6,10,.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(226,232,240,.92);
  font-size:.92rem;
  line-height:1;
  white-space:nowrap;
  box-shadow: 0 16px 30px rgba(0,0,0,.22);
}

:root:not(.dark) .ak-chip{
  background: rgba(255,255,255,.76);
  border-color: rgba(15,23,42,.10);
  color: #0b1220;
  box-shadow: 0 16px 30px rgba(15,23,42,.10);
}

.ak-chip__strong{
  font-weight:800;
}

.ak-chip__ic{
  width:18px;
  height:18px;
  display:block;
}

/* network chip slightly calmer */
.ak-chip--network{
  background: rgba(61,153,112,.10);
  background: rgb(252, 253, 253);
  border-color: rgba(61,153,112,.26);
}

:root:not(.dark) .ak-chip--network{
  background: rgba(61,153,112,.12);
  border-color: rgba(61,153,112,.22);
}

/* open/closed emphasis */
.ak-chip--open{
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.28);
}

.ak-chip--closed{
  background: rgba(148,163,184,.10);
  border-color: rgba(148,163,184,.22);
}

/* dot */
.ak-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(148,163,184,.85);
  box-shadow: 0 0 0 4px rgba(148,163,184,.15);
}

.ak-dot--pulse{
  background: rgba(16,185,129,.95);
  box-shadow: 0 0 0 4px rgba(16,185,129,.18);
  animation: akPulse 1.4s ease-in-out infinite;
}

@keyframes akPulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.18); opacity: .82; }
}

/* -----------------------------------------
   Responsive
   ----------------------------------------- */

@media (max-width: 900px){
  .ak-circle-show__topbar{
    flex-direction:column;
    align-items:flex-start;
  }
  .ak-circle-show__chips{
    width:100%;
    justify-content:flex-start;
  }
}

@media (max-width: 520px){
  .ak-circle-show__img{ width:48px; height:48px; border-radius:16px; }
  .ak-circle-show__bigfee{ font-size:1.35rem; }
  .ak-chip{ font-size:.88rem; padding:.5rem .72rem; }
}

/* Page header title row with circle image */
.ak-ph-titleRow{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-top:.55rem;
  min-width:0;
}

.ak-ph-avatar{
  width:46px;
  height:46px;
  border-radius:18px;
  overflow:hidden;
  flex:0 0 auto;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(148,163,184,.18);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}

:root:not(.dark) .ak-ph-avatar{
  background: rgba(255,255,255,.85);
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 14px 30px rgba(15,23,42,.12);
}

.ak-ph-avatar__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width: 520px){
  .ak-ph-avatar{ width:46px; height:46px; border-radius:16px; }
}


/* ================================
   About — Calm reassurance section (Light + Dark)
   ================================ */

.ak-about-calm{
  background: #ffffff;
}

.dark .ak-about-calm{
  background: #02110c; /* matches your dark surfaces vibe */
}

/* Soft cards (3 columns) */
.ak-about-softcard{
  border-radius: 1rem;
  padding: 1.25rem 1.25rem;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.85);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  backdrop-filter: blur(8px);
}

.dark .ak-about-softcard{
  border-color: rgba(148,163,184,.18);
  background: rgba(2,6,10,.55);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* Titles and text */
.ak-about-softtitle{
  color: #0b1220;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 0.95rem;
}

.dark .ak-about-softtitle{
  color: #f8fafc;
}

.ak-about-softtext{
  margin-top: .45rem;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.55;
  font-weight: 500;
}

.dark .ak-about-softtext{
  color: rgba(226,232,240,.78);
}

/* Optional: keep the section feeling "calm" on smaller screens */
@media (max-width: 640px){
  .ak-about-softcard{
    padding: 1.05rem 1.05rem;
  }
}


/* ================================
   About — Two super cards (Calm assurance) — Light + Dark
   ================================ */

.ak-about-calm{ background:#ffffff; }
.dark .ak-about-calm{ background:#02110c; }

/* Base super card */
.ak-about-super{
  border-radius: 1.25rem;
  border: 1px solid rgba(15,23,42,.10);
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 44px rgba(2,6,10,.08);
}

.dark .ak-about-super{
  border-color: rgba(148,163,184,.18);
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
}

/* Inner padding */
.ak-about-super__inner{
  padding: 1.4rem 1.4rem;
}

@media (min-width: 1024px){
  .ak-about-super__inner{ padding: 1.8rem 1.8rem; }
}

/* Primary (left) — mature, futuristic, calm */
.ak-about-super--primary{
  background: linear-gradient(135deg, rgba(61,153,112,.12), rgba(241,196,15,.08) 55%, rgba(248,249,249,.92));
  
}

.dark .ak-about-super--primary{
  background: linear-gradient(135deg, rgba(61,153,112,.14), rgba(241,196,15,.06) 55%, rgba(2,6,10,.62));
  background: linear-gradient(135deg, rgb(10, 34, 23), rgb(6, 41, 27) 55%, rgb(1, 51, 31));
}

/* Secondary (right) — quieter */
.ak-about-super--secondary{
  background: rgba(248,250,252,.92);
}

.dark .ak-about-super--secondary{
  background: rgba(2,6,10,.58);
}

/* Kicker */
.ak-about-kicker{
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,.62);
}

.dark .ak-about-kicker{
  color: rgba(226,232,240,.68);
}

/* Titles */
.ak-about-super__title{
  margin-top: .55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0b1220;
  font-size: 1.6rem;
  line-height: 1.35;
}

.dark .ak-about-super__title{
  color: #f8fafc;
}

@media (min-width: 1024px){
  .ak-about-super__title{ font-size: 2rem; }
}

.ak-about-super__miniTitle{
  font-weight: 900;
  letter-spacing: -0.01em;
  color:#0b1220;
  font-size: 1.05rem;
}

.dark .ak-about-super__miniTitle{
  color:#f8fafc;
}

/* Lead + note */
.ak-about-super__lead,
.ak-about-super__note{
  margin-top: .8rem;
  color: #475569;
  font-size: .95rem;
  line-height: 1.65;
  font-weight: 500;
}

.dark .ak-about-super__lead,
.dark .ak-about-super__note{
  color: rgba(226,232,240,.78);
}

/* Divider */
.ak-about-super__divider{
  height: 1px;
  margin: 1.1rem 0;
  background: rgba(15,23,42,.10);
}

.dark .ak-about-super__divider{
  background: rgba(148,163,184,.16);
}

/* Bullets (primary card) */
.ak-about-super__bullets{
  margin: .4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
}

.ak-about-super__bullets li{
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  color: rgba(15,23,42,.78);
  font-size: .95rem;
  line-height: 1.5;
  font-weight: 600;
}

.dark .ak-about-super__bullets li{
  color: rgba(226,232,240,.82);
}

.ak-about-dot{
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  margin-top: .35rem;
  flex: 0 0 auto;
  background: rgba(61,153,112,.9);
  box-shadow: 0 0 0 4px rgba(61,153,112,.12);
}

.dark .ak-about-dot{
  background: rgba(241,196,15,.95);
  box-shadow: 0 0 0 4px rgba(241,196,15,.10);
}

/* Mini grid (secondary card) */
.ak-about-miniGrid{
  margin-top: .9rem;
  display: grid;
  gap: .8rem;
}

@media (min-width: 640px){
  .ak-about-miniGrid{
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
  }
}

.ak-about-mini{
  border-radius: 1rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.70);
  padding: .9rem .9rem;
}

.dark .ak-about-mini{
  border-color: rgba(148,163,184,.14);
  background: rgba(2,6,10,.40);
}

.ak-about-mini__k{
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(15,23,42,.62);
}

.dark .ak-about-mini__k{
  color: rgba(226,232,240,.66);
}

.ak-about-mini__v{
  margin-top: .3rem;
  font-size: .92rem;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(15,23,42,.86);
}

.dark .ak-about-mini__v{
  color: rgba(226,232,240,.84);
}


.cream-text {
	color: rgb(250, 246, 233) !important;
}





.ak-link-colour {
  color: #3d9970 !important;
}

.ak-link-colour:hover { 
text-decoration: underline;
color: #3d9970;
}

.dark .ak-link-colour { 
color: #34d399; 
color: #ddb40e !important;
}

/* ================================
   Dashboard top week + status pill
   ================================ */

.akdash-week-line{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap; /* allows the pill to drop under on small widths */
}

.akdash-status{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.42rem .65rem;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#ffffff;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
  color:#0b1220;
  line-height:1;
  white-space:nowrap;
  margin-bottom:12px;
}

.dark .akdash-status{
  border-color:rgba(148,163,184,.22);
  background:rgba(2,6,10,.55);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  color:#f8fafc;
}

.akdash-status-text{
  font-size:.85rem;
  font-weight:650;
  opacity:.86;
}

.akdash-status-strong{
  font-size:.85rem;
  font-weight:800;
  letter-spacing:-.01em;
}

.akdash-dot{
  width:.6rem;
  height:.6rem;
  border-radius:999px;
  display:inline-block;
  background:rgba(148,163,184,.9);
  box-shadow:0 0 0 3px rgba(148,163,184,.15);
}

.akdash-dot--green{
  background:#16a34a !important; /* emerald/green */
  box-shadow:0 0 0 4px rgba(22,163,74,.18), 0 10px 30px rgba(22,163,74,.14);
}

.akdash-dot--muted{
  background:rgba(148,163,184,.95);
  box-shadow:0 0 0 3px rgba(148,163,184,.18);
}

/* On larger screens: keep week + pill on one line when there's room */
@media (min-width: 1024px){
  .akdash-week-line{ flex-wrap:nowrap; }
}

/* ================================
   Dashboard stats — Akuno "oomph"
   ================================ */

.akdash-stats--hero{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

@media (max-width: 1024px){
  .akdash-stats--hero{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .akdash-stats--hero{ grid-template-columns:1fr; }
}

.akdash-stat{
  position:relative;
  display:block;
  border-radius:18px;
  padding:14px 14px 13px;
  text-decoration:none;
  overflow:hidden;
  transform:translateZ(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

/* base surfaces (light/dark) */
.akdash-stat{
  border:1px solid rgba(15, 23, 42, .10);
  background:
    radial-gradient(1200px 220px at 12% -10%, rgba(61,153,112,.12), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #ffffff, #fbfcfd);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}
.dark .akdash-stat{
  border:1px solid rgba(148,163,184,.16);
  background:
    radial-gradient(1200px 240px at 12% -10%, rgba(241,196,15,.09), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(2, 17, 12, .92), rgba(2, 10, 7, .92));
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}

/* animated accent edge (subtle, premium) */
.akdash-stat::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:1px;
  background: linear-gradient(120deg, rgba(61,153,112,.0), rgba(241,196,15,.0));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  opacity:.0;
  transition: opacity .18s ease;
}

.akdash-stat::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:18px;
  background: radial-gradient(900px 240px at 10% 0%, rgba(241,196,15,.18), rgba(0,0,0,0) 60%);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}

.akdash-stat:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(15, 23, 42, .12);
  border-color: rgba(15, 23, 42, .14);
}
.dark .akdash-stat:hover{
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
  border-color: rgba(241,196,15,.18);
}

.akdash-stat:hover::before{ opacity:1; }
.akdash-stat:hover::after{ opacity:1; }

/* layout inside each card */
.akdash-stat-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.akdash-stat-k{
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  color: rgba(15,23,42,.70);
}
.dark .akdash-stat-k{
  color: rgba(226,232,240,.76);
}

.akdash-stat-go{
  font-size:14px;
  font-weight:900;
  color: rgba(15,23,42,.35);
  transition: transform .18s ease, color .18s ease;
}
.dark .akdash-stat-go{
  color: rgba(226,232,240,.35);
}

.akdash-stat:hover .akdash-stat-go{
  transform: translateX(2px);
  color: rgba(15,23,42,.55);
}
.dark .akdash-stat:hover .akdash-stat-go{
  color: rgba(241,196,15,.75);
}

.akdash-stat-mid{
  margin-top:10px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

/* the number */
.akdash-stat-v{
  font-weight:900;
  font-size:26px;
  line-height:1.05;
  letter-spacing:-.02em;
  color:#0b1220;
}
.dark .akdash-stat-v{ color:#f8fafc; }

.akdash-unit{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  margin-left:6px;
  color: rgba(15,23,42,.45);
}
.dark .akdash-unit{
  color: rgba(226,232,240,.55);
}

/* helper line */
.akdash-stat-s{
  margin-top:8px;
  font-size:12px;
  font-weight:600;
  color: rgba(15,23,42,.55);
}
.dark .akdash-stat-s{
  color: rgba(226,232,240,.62);
}

/* icon badge (premium, floating) */
.akdash-stat-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.akdash-badge{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 24px rgba(15,23,42,.10);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.dark .akdash-badge{
  border-color: rgba(241,196,15,.22);
  background: rgba(2, 6, 10, .55);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}

.akdash-ico{
  width:20px;
  height:20px;
}

.akdash-stat:hover .akdash-badge{
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(61,153,112,.32);
}

/* per-card accent themes */
.akdash-stat--emerald::before{
  background: linear-gradient(120deg, rgba(61,153,112,.65), rgba(241,196,15,.20));
}
.akdash-stat--slate::before{
  background: linear-gradient(120deg, rgba(148,163,184,.55), rgba(241,196,15,.18));
}
.akdash-stat--gold::before{
  background: linear-gradient(120deg, rgba(241,196,15,.62), rgba(61,153,112,.22));
}
.akdash-stat--charity::before{
  background: linear-gradient(120deg, rgba(61,153,112,.50), rgba(241,196,15,.38));
}

/* make icon colour feel intentional */
.akdash-stat--emerald .akdash-badge{ color:#1f7a56; }
.akdash-stat--slate  .akdash-badge{ color:#334155; }
.akdash-stat--gold   .akdash-badge{ color:#8a6a00; }
.akdash-stat--charity .akdash-badge{ color:#1f7a56; }

.dark .akdash-stat--emerald .akdash-badge{ color:#a7f3d0; }
.dark .akdash-stat--slate  .akdash-badge{ color:#e2e8f0; }
.dark .akdash-stat--gold   .akdash-badge{ color:#f1c40f; }
.dark .akdash-stat--charity .akdash-badge{ color:#f1c40f; }

/* keyboard focus */
.akdash-stat:focus{
  outline:none;
}
.akdash-stat:focus-visible{
  box-shadow: 0 0 0 3px rgba(241,196,15,.35), 0 18px 44px rgba(15,23,42,.10);
  border-color: rgba(241,196,15,.45);
}
.dark .akdash-stat:focus-visible{
  box-shadow: 0 0 0 3px rgba(241,196,15,.28), 0 28px 70px rgba(0,0,0,.55);
}


/* =========================================
   Dashboard stats — tighter, no gradients
   ========================================= */

.akdash-stats--elevated{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

@media (max-width: 1024px){
  .akdash-stats--elevated{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .akdash-stats--elevated{ grid-template-columns:1fr; }
}

.akdash-stats--elevated .akdash-stat{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  border-radius:16px;
  padding:12px 12px;
  text-decoration:none;
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Light / Dark base */
.akdash-stats--elevated .akdash-stat{
  background:#ffffff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
}
.dark .akdash-stats--elevated .akdash-stat{
  background: rgba(2, 10, 7, .92);
  border:1px solid rgba(148,163,184,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}

/* Clickable feel even without hover (mobile): subtle link tint + left rail */
.akdash-stats--elevated .akdash-stat{
  color: inherit;
}
.akdash-stats--elevated .akdash-stat::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background: rgba(61,153,112,.55);
  opacity:.9;
}
.dark .akdash-stats--elevated .akdash-stat::before{
  opacity:.7;
}

/* Hover / focus */
.akdash-stats--elevated .akdash-stat:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(15,23,42,.12);
  border-color: rgba(15,23,42,.14);
}
.dark .akdash-stats--elevated .akdash-stat:hover{
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
  border-color: rgba(241,196,15,.18);
}

.akdash-stats--elevated .akdash-stat:focus{ outline:none; }
.akdash-stats--elevated .akdash-stat:focus-visible{
  box-shadow: 0 0 0 3px rgba(241,196,15,.25), 0 18px 48px rgba(15,23,42,.10);
  border-color: rgba(241,196,15,.42);
}

/* Icon badge */
.akdash-stats--elevated .akdash-badge{
  width:42px;
  height:42px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.9);
  transition: transform .16s ease, border-color .16s ease;
}
.dark .akdash-stats--elevated .akdash-badge{
  border-color: rgba(241,196,15,.22);
  background: rgba(2, 6, 10, .55);
}

.akdash-stats--elevated .akdash-ico{
  width:20px;
  height:20px;
}

.akdash-stats--elevated .akdash-stat:hover .akdash-badge{
  transform: translateY(-1px);
  border-color: rgba(61,153,112,.26);
}

/* Body */
.akdash-stats--elevated .akdash-stat-body{ min-width:0; }

.akdash-stats--elevated .akdash-stat-k{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color: rgba(15,23,42,.58);
  line-height:1.1;
}
.dark .akdash-stats--elevated .akdash-stat-k{
  color: rgba(226,232,240,.70);
}

.akdash-stats--elevated .akdash-stat-v{
  margin-top:3px;
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#0b1220;
  line-height:1.05;
  white-space:nowrap;
}
.dark .akdash-stats--elevated .akdash-stat-v{
  color:#f8fafc;
}

.akdash-stats--elevated .akdash-unit{
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  margin-left:6px;
  color: rgba(15,23,42,.40);
}
.dark .akdash-stats--elevated .akdash-unit{
  color: rgba(226,232,240,.55);
}

.akdash-stats--elevated .akdash-stat-s{
  margin-top:4px;
  font-size:12px;
  font-weight:700;
  color: rgba(15,23,42,.55);
  line-height:1.1;
}
.dark .akdash-stats--elevated .akdash-stat-s{
  color: rgba(226,232,240,.62);
}

/* Right-side affordance: hidden by default, appears on hover/focus */
.akdash-stats--elevated .akdash-stat-afford{
  margin-left:auto;
  width:32px;
  height:32px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.9);
  color: rgba(15,23,42,.55);
  opacity:0;
  transform: translateX(-4px);
  transition: opacity .16s ease, transform .16s ease, border-color .16s ease;
}
.dark .akdash-stats--elevated .akdash-stat-afford{
  border-color: rgba(241,196,15,.20);
  background: rgba(2, 6, 10, .55);
  color: rgba(241,196,15,.85);
}

.akdash-stats--elevated .akdash-stat:hover .akdash-stat-afford,
.akdash-stats--elevated .akdash-stat:focus-visible .akdash-stat-afford{
  opacity:1;
  transform: translateX(0);
}

/* Theme accents (no gradients) */
.akdash-stats--elevated .akdash-stat--emerald::before{ background: rgba(61,153,112,.75); }
.akdash-stats--elevated .akdash-stat--slate::before{ background: rgba(44,62,80,.55); }
.akdash-stats--elevated .akdash-stat--gold::before{ background: rgba(241,196,15,.70); }
.akdash-stats--elevated .akdash-stat--charity::before{ background: rgba(61,153,112,.55); }

.akdash-stats--elevated .akdash-stat--emerald .akdash-badge{ color:#1f7a56; }
.akdash-stats--elevated .akdash-stat--slate  .akdash-badge{ color:#2c3e50; }
.akdash-stats--elevated .akdash-stat--gold   .akdash-badge{ color:#8a6a00; }
.akdash-stats--elevated .akdash-stat--charity .akdash-badge{ color:#1f7a56; }

.dark .akdash-stats--elevated .akdash-stat--emerald .akdash-badge{ color:#a7f3d0; }
.dark .akdash-stats--elevated .akdash-stat--slate  .akdash-badge{ color:#e2e8f0; }
.dark .akdash-stats--elevated .akdash-stat--gold   .akdash-badge{ color:#f1c40f; }
.dark .akdash-stats--elevated .akdash-stat--charity .akdash-badge{ color:#f1c40f; }


/* =========================================
   Dashboard win banner (design-only)
   ========================================= */

.akdash-winbar{
  margin: 14px 0 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15,23,42,.07);
}

.dark .akdash-winbar{
  border-color: rgba(148,163,184,.16);
  background: rgba(2,10,7,.92);
  box-shadow: 0 30px 80px rgba(0,0,0,.50);
}

.akdash-winbar-inner{
  display:flex;
  gap:14px;
  padding: 14px;
  align-items: stretch;
}

@media (max-width: 900px){
  .akdash-winbar-inner{ flex-direction: column; }
}

.akdash-winbar-left{
  flex: 1.1;
  border-radius: 16px;
  padding: 14px 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(248,250,252,.70);
}

.dark .akdash-winbar-left{
  border-color: rgba(241,196,15,.14);
  background: rgba(2,6,10,.45);
}

.akdash-winbadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(15,23,42,.72);
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
}

.dark .akdash-winbadge{
  color: rgba(241,196,15,.90);
  border-color: rgba(241,196,15,.20);
  background: rgba(2,6,10,.55);
}

.akdash-winbadge-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(61,153,112,.95);
  box-shadow: 0 0 0 3px rgba(61,153,112,.16);
}

.dark .akdash-winbadge-dot{
  background: rgba(241,196,15,.95);
  box-shadow: 0 0 0 3px rgba(241,196,15,.12);
}

.akdash-winbar-title{
  margin-top: 10px;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: #0b1220;
  line-height: 1.08;
}

.dark .akdash-winbar-title{ color: #f8fafc; }

.akdash-winbar-sub{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 650;
  color: rgba(15,23,42,.60);
  line-height: 1.35;
  max-width: 52ch;
}

.dark .akdash-winbar-sub{ color: rgba(226,232,240,.68); }

.akdash-winbar-meta{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap:8px;
  font-size: 12px;
  font-weight: 650;
  color: rgba(15,23,42,.55);
}

.dark .akdash-winbar-meta{ color: rgba(226,232,240,.62); }

.akdash-winbar-sep{ opacity: .75; }

/* Right side list */
.akdash-winbar-right{
  flex: 1;
  border-radius: 16px;
  padding: 8px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
}

.dark .akdash-winbar-right{
  border-color: rgba(148,163,184,.14);
  background: rgba(2,6,10,.40);
}

.akdash-winlist{
  display:grid;
  gap:10px;
}

/* Each “result card” inside the banner */
.akdash-winitem{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 10px;
  border-radius: 14px;
  text-decoration:none;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.75);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  color: inherit;
}

.dark .akdash-winitem{
  border-color: rgba(148,163,184,.16);
  background: rgba(2,10,7,.55);
}

.akdash-winitem:hover{
  transform: translateY(-2px);
  border-color: rgba(241,196,15,.24);
  box-shadow: 0 16px 40px rgba(15,23,42,.10);
}

.dark .akdash-winitem:hover{
  border-color: rgba(241,196,15,.22);
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
}

.akdash-winitem:focus{ outline:none; }
.akdash-winitem:focus-visible{
  box-shadow: 0 0 0 3px rgba(241,196,15,.22), 0 16px 40px rgba(15,23,42,.10);
  border-color: rgba(241,196,15,.45);
}

.akdash-winitem-img{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
}

.dark .akdash-winitem-img{
  border-color: rgba(241,196,15,.20);
  background: rgba(2,6,10,.50);
}

.akdash-winitem-mid{ min-width: 0; flex: 1; }

.akdash-winitem-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
}

.akdash-winitem-circle{
  font-size: 13px;
  font-weight: 900;
  color: #0b1220;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .akdash-winitem-circle{ color: #f8fafc; }

.akdash-winitem-pill{
  font-size: 11px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(241,196,15,.22);
  color: rgba(15,23,42,.70);
  background: rgba(241,196,15,.14);
  white-space: nowrap;
}

.dark .akdash-winitem-pill{
  color: rgba(241,196,15,.92);
  border-color: rgba(241,196,15,.22);
  background: rgba(241,196,15,.10);
}

.akdash-winitem-sub{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 650;
  color: rgba(15,23,42,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .akdash-winitem-sub{ color: rgba(226,232,240,.60); }

.akdash-winitem-right{
  text-align: right;
  display:flex;
  align-items:center;
  gap:10px;
}

.akdash-winitem-amt{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: #0b1220;
  line-height: 1.1;
}

.dark .akdash-winitem-amt{ color: #f8fafc; }

.akdash-winitem-unit{
  margin-left: 6px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  color: rgba(15,23,42,.45);
}

.dark .akdash-winitem-unit{ color: rgba(226,232,240,.55); }

.akdash-winitem-cta{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  color: rgba(15,23,42,.55);
  transition: transform .16s ease, opacity .16s ease;
  opacity: .95;
}

.dark .akdash-winitem-cta{
  border-color: rgba(241,196,15,.18);
  background: rgba(2,6,10,.55);
  color: rgba(241,196,15,.85);
}

.akdash-winitem:hover .akdash-winitem-cta{
  transform: translateX(1px);
}


/* =========================================
   Winner cards (clean, happy, no gradients)
   ========================================= */

.akdash-wins{
  display:grid;
  gap: 12px;
  margin: 14px 0 14px;
}

.akdash-wincard{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15,23,42,.07);
  overflow: hidden;
}

.dark .akdash-wincard{
  border-color: rgba(148,163,184,.16);
  background: rgba(2,10,7,.92);
  box-shadow: 0 30px 80px rgba(0,0,0,.50);
}

/* header */
.akdash-wincard-head{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.dark .akdash-wincard-head{
  border-bottom-color: rgba(148,163,184,.10);
}

.akdash-wincard-badge{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(241,196,15,.22);
  background: rgba(241,196,15,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.dark .akdash-wincard-badge{
  border-color: rgba(241,196,15,.22);
  background: rgba(241,196,15,.10);
}

.akdash-wincard-spark{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(61,153,112,.95);
  box-shadow: 0 0 0 4px rgba(61,153,112,.14);
}

.dark .akdash-wincard-spark{
  background: rgba(241,196,15,.95);
  box-shadow: 0 0 0 4px rgba(241,196,15,.12);
}

.akdash-wincard-circle{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.akdash-wincard-img{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
}

.dark .akdash-wincard-img{
  border-color: rgba(241,196,15,.20);
  background: rgba(2,6,10,.50);
}

.akdash-wincard-fallback{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.70);
  color: rgba(15,23,42,.55);
  font-weight: 900;
}

.dark .akdash-wincard-fallback{
  border-color: rgba(241,196,15,.20);
  background: rgba(2,6,10,.45);
  color: rgba(241,196,15,.80);
}

.akdash-wincard-titlewrap{ min-width: 0; }

.akdash-wincard-title{
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -.01em;
  color: #0b1220;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .akdash-wincard-title{ color: #f8fafc; }

.akdash-wincard-sub{
  margin-top: 3px;
  font-size: 12px;
  font-weight: 650;
  color: rgba(15,23,42,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .akdash-wincard-sub{ color: rgba(226,232,240,.62); }

.akdash-wincard-circlename{
  color: rgba(61,153,112,.95);
  font-weight: 900;
}

.dark .akdash-wincard-circlename{
  color: rgba(241,196,15,.92);
}

.akdash-wincard-sep{ opacity: .7; margin: 0 4px; }

/* amount */
.akdash-wincard-amt{
  text-align:right;
  flex: 0 0 auto;
  padding-left: 8px;
}

.akdash-wincard-amtv{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: #0b1220;
  line-height: 1.05;
}

.dark .akdash-wincard-amtv{ color: #f8fafc; }

.akdash-wincard-amtc{
  margin-top: 2px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  color: rgba(15,23,42,.45);
}

.dark .akdash-wincard-amtc{ color: rgba(226,232,240,.55); }

/* body */
.akdash-wincard-body{
  padding: 12px;
  display:grid;
  gap: 10px;
}

.akdash-wincard-kv{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}

.akdash-wincard-k{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
  flex: 0 0 auto;
}

.dark .akdash-wincard-k{ color: rgba(226,232,240,.60); }

.akdash-wincard-v{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
  min-width: 0;
}

.akdash-wincard-link{
  text-decoration: none;
  color: rgba(15,23,42,.80);
  border-bottom: 1px solid rgba(241,196,15,.0);
  transition: border-color .14s ease, color .14s ease;
  min-width: 0;
}

.dark .akdash-wincard-link{
  color: rgba(226,232,240,.84);
}

.akdash-wincard-link:hover{
  color: rgba(61,153,112,.95);
  border-color: rgba(61,153,112,.45);
}

.dark .akdash-wincard-link:hover{
  color: rgba(241,196,15,.92);
  border-color: rgba(241,196,15,.45);
}

.akdash-wincard-copy{
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(248,250,252,.80);
  color: rgba(15,23,42,.70);
  font-size: 12px;
  font-weight: 850;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
  flex: 0 0 auto;
}

.dark .akdash-wincard-copy{
  border-color: rgba(148,163,184,.16);
  background: rgba(2,6,10,.50);
  color: rgba(226,232,240,.78);
}

.akdash-wincard-copy:hover{
  transform: translateY(-1px);
  border-color: rgba(61,153,112,.35);
}

.dark .akdash-wincard-copy:hover{
  border-color: rgba(241,196,15,.28);
}

/* actions */
.akdash-wincard-actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  flex-wrap: wrap;
  margin-top: 2px;
}

.akdash-wincard-btn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
  white-space: nowrap;
}

.akdash-wincard-btn--ghost{
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(248,250,252,.70);
  color: rgba(15,23,42,.72);
}

.dark .akdash-wincard-btn--ghost{
  border-color: rgba(148,163,184,.16);
  background: rgba(2,6,10,.45);
  color: rgba(226,232,240,.78);
}

.akdash-wincard-btn--solid{
  border: 1px solid rgba(241,196,15,.28);
  background: rgba(241,196,15,.16);
  color: rgba(15,23,42,.80);
}

.dark .akdash-wincard-btn--solid{
  border-color: rgba(241,196,15,.22);
  background: rgba(241,196,15,.12);
  color: rgba(241,196,15,.92);
}

.akdash-wincard-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(61,153,112,.28);
}

.dark .akdash-wincard-btn:hover{
  border-color: rgba(241,196,15,.30);
}

/* Responsive tightening */
@media (max-width: 640px){
  .akdash-wincard-head{
    align-items:flex-start;
  }
  .akdash-wincard-amt{
    margin-left: auto;
  }
  .akdash-wincard-kv{
    flex-direction: column;
    align-items:flex-start;
  }
  .akdash-wincard-v{
    justify-content:flex-start;
    width: 100%;
  }
  .akdash-wincard-actions{
    justify-content:flex-start;
  }
}

/* =========================================
   Winner cards — compact, celebratory, clean
   ========================================= */

.akdash-wins{
  display:grid;
  gap: 12px;
  margin: 12px 0 14px;
}

/* Card */
.akdash-win{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: #ffffff;
  box-shadow: 0 16px 44px rgba(15,23,42,.07);
  overflow: hidden;
}

.dark .akdash-win{
  border-color: rgba(148,163,184,.16);
  background: rgba(2,10,7,.92);
  box-shadow: 0 28px 74px rgba(0,0,0,.46);
}

/* Header */
.akdash-win-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.dark .akdash-win-head{
  border-bottom-color: rgba(148,163,184,.10);
}

.akdash-win-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

/* Celebrate icon */
.akdash-win-cele{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(241,196,15,.26);
  background: rgba(241,196,15,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.dark .akdash-win-cele{
  border-color: rgba(241,196,15,.22);
  background: rgba(241,196,15,.10);
}

.akdash-win-celeSvg{
  width: 20px;
  height: 20px;
  color: rgba(61,153,112,.95);
}

.dark .akdash-win-celeSvg{
  color: rgba(241,196,15,.92);
}

/* Circle image */
.akdash-win-imgwrap{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(248,250,252,.70);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  overflow: hidden;
}

.dark .akdash-win-imgwrap{
  border-color: rgba(241,196,15,.20);
  background: rgba(2,6,10,.45);
}

.akdash-win-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.akdash-win-img.is-fallback{
  object-fit: contain;
  padding: 7px;
  opacity: .95;
}

/* Title */
.akdash-win-title{
  min-width: 0;
}

.akdash-win-h{
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -.01em;
  color: #0b1220;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .akdash-win-h{ color:#f8fafc; }

.akdash-win-sub{
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(15,23,42,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .akdash-win-sub{ color: rgba(226,232,240,.62); }

.akdash-win-circle{
  color: rgba(61,153,112,.95);
  font-weight: 950;
}

.dark .akdash-win-circle{ color: rgba(241,196,15,.92); }

.akdash-win-sep{ opacity:.75; margin: 0 4px; }

/* Amount */
.akdash-win-amt{
  text-align:right;
  flex: 0 0 auto;
  padding-left: 8px;
}

.akdash-win-amtv{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: #0b1220;
  line-height: 1.05;
}

.dark .akdash-win-amtv{ color:#f8fafc; }

.akdash-win-amtc{
  margin-top: 2px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  color: rgba(15,23,42,.45);
}

.dark .akdash-win-amtc{ color: rgba(226,232,240,.55); }

/* Body: ultra compact lines */
.akdash-win-body{
  padding: 10px 12px 12px;
  display:grid;
  gap: 8px;
}

.akdash-win-line{
  display:grid;
  grid-template-columns: 92px minmax(0, 1fr) 36px;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(248,250,252,.72);
}

.dark .akdash-win-line{
  border-color: rgba(148,163,184,.14);
  background: rgba(2,6,10,.42);
}

.akdash-win-k{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.60);
  letter-spacing: .01em;
}

.dark .akdash-win-k{ color: rgba(226,232,240,.64); }

.akdash-win-val{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .akdash-win-val{ color: rgba(226,232,240,.82); }

.akdash-win-link{
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0);
  transition: color .14s ease, border-color .14s ease;
}

.akdash-win-link:hover{
  color: rgba(61,153,112,.95);
  border-color: rgba(61,153,112,.35);
}

.dark .akdash-win-link:hover{
  color: rgba(241,196,15,.92);
  border-color: rgba(241,196,15,.35);
}

/* Copy icon button */
.akdash-win-copy{
  width: 36px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: #ffffff;
  color: rgba(15,23,42,.70);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.dark .akdash-win-copy{
  border-color: rgba(148,163,184,.14);
  background: rgba(2,6,10,.35);
  color: rgba(226,232,240,.78);
}

.akdash-win-copy:hover{
  transform: translateY(-1px);
  border-color: rgba(61,153,112,.28);
}

.dark .akdash-win-copy:hover{
  border-color: rgba(241,196,15,.28);
}

.akdash-win-copySvg{
  width: 18px;
  height: 18px;
}

/* Actions */
.akdash-win-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.akdash-win-btn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 950;
  transition: transform .14s ease, border-color .14s ease;
  white-space: nowrap;
}

.akdash-win-btn--ghost{
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(248,250,252,.70);
  color: rgba(15,23,42,.74);
}

.dark .akdash-win-btn--ghost{
  border-color: rgba(148,163,184,.16);
  background: rgba(2,6,10,.35);
  color: rgba(226,232,240,.78);
}

.akdash-win-btn--solid{
  border: 1px solid rgba(241,196,15,.26);
  background: rgba(241,196,15,.14);
  color: rgba(15,23,42,.84);
}

.dark .akdash-win-btn--solid{
  border-color: rgba(241,196,15,.22);
  background: rgba(241,196,15,.11);
  color: rgba(241,196,15,.92);
}

.akdash-win-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(61,153,112,.24);
}

.dark .akdash-win-btn:hover{
  border-color: rgba(241,196,15,.30);
}

/* Mobile tightening */
@media (max-width: 640px){
  .akdash-win-head{
    align-items:flex-start;
  }
  .akdash-win-amt{
    margin-left: auto;
  }
  .akdash-win-line{
    grid-template-columns: 86px minmax(0, 1fr) 34px;
    padding: 8px 9px;
  }
  .akdash-win-actions{
    justify-content:flex-start;
  }
}


/* =========================================
   Winner strip (light + dark) — compact
   ========================================= */

.akwin-wrap{
  display:grid;
  gap: 12px;
  margin: 10px 0 14px;
}

/* The strip */
.akwin{
  display:grid;
  grid-template-columns: 64px 1fr 56px;
  gap: 12px;
  align-items: center;

  padding: 12px 14px;
  border-radius: 18px;

  background: #fbf6e7; /* warm “celebration paper” */
  border: 2px solid rgba(61,153,112,.35);  /* emerald */
  box-shadow: 0 18px 50px rgba(15,23,42,.10);

  position: relative;
  overflow: hidden;
}

.dark .akwin{
  background: rgba(6,18,13,.88);
  border-color: rgba(241,196,15,.28); /* gold */
  box-shadow: 0 28px 80px rgba(0,0,0,.46);
}

/* Left: circle image with ring */
.akwin-left{ display:flex; justify-content:center; }

.akwin-ring{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 2px solid rgba(241,196,15,.30);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 0 0 6px rgba(61,153,112,.12);
}

.dark .akwin-ring{
  background: rgba(2,6,10,.45);
  border-color: rgba(241,196,15,.22);
  box-shadow: inset 0 0 0 6px rgba(241,196,15,.10);
}

.akwin-img{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
}

.akwin-img.is-fallback{
  object-fit: contain;
  padding: 5px;
  opacity: .95;
}

/* Mid */
.akwin-mid{ min-width: 0; }

.akwin-topline{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

.akwin-title{
  font-size: 15px;
  font-weight: 950;
  color: #0b1220;
  letter-spacing: -.01em;
  line-height: 1.15;
  min-width: 0;
}

.dark .akwin-title{ color:#f8fafc; }

.akwin-sub{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .akwin-sub{ color: rgba(226,232,240,.62); }

.akwin-circle{
  color: rgba(61,153,112,.95);
  font-weight: 950;
}

.dark .akwin-circle{ color: rgba(241,196,15,.92); }

.akwin-dot{ opacity: .75; padding: 0 4px; }

.akwin-amount{
  text-align:right;
  flex: 0 0 auto;
  padding-top: 1px;
}

.akwin-amtv{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: #0b1220;
  line-height: 1.05;
}

.dark .akwin-amtv{ color:#f8fafc; }

.akwin-amtc{
  display:block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .10em;
  color: rgba(15,23,42,.50);
}

.dark .akwin-amtc{ color: rgba(226,232,240,.58); }

/* Links + meta lines */
.akwin-links{
  margin-top: 0px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items:center;
}

.akwin-link{
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
  color: rgba(61,153,112,.95);
  border-bottom: 1px solid rgba(61,153,112,.28);
}

.dark .akwin-link{
  color: rgba(241,196,15,.92);
  border-bottom-color: rgba(241,196,15,.28);
}

.akwin-kv{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

.akwin-k{
  font-size: 11px;
  font-weight: 900;
  color: rgba(15,23,42,.55);
}

.dark .akwin-k{ color: rgba(226,232,240,.60); }

.akwin-v{
  font-size: 12px;
  font-weight: 950;
  color: rgba(15,23,42,.80);
  text-decoration: none;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .akwin-v{ color: rgba(226,232,240,.86); }

.akwin-v:hover{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Copy icon (space saver) */
.akwin-copy{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.75);
  color: rgba(15,23,42,.70);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .14s ease, border-color .14s ease;
}

.dark .akwin-copy{
  border-color: rgba(148,163,184,.16);
  background: rgba(2,6,10,.35);
  color: rgba(226,232,240,.78);
}

.akwin-copy:hover{
  transform: translateY(-1px);
  border-color: rgba(61,153,112,.30);
}

.dark .akwin-copy:hover{
  border-color: rgba(241,196,15,.30);
}

.akwin-copySvg{ width: 16px; height: 16px; }

/* Right: confetti */
.akwin-right{
  display:flex;
  justify-content:flex-end;
}

.akwin-confetti{
  width: 44px;
  height: 44px;
  color: rgba(241,196,15,.85);
}

.dark .akwin-confetti{
  color: rgba(241,196,15,.70);
}

/* Mobile collapse: stack neatly, keep it tight */
@media (max-width: 640px){
  .akwin{
    grid-template-columns: 54px 1fr;
    grid-template-areas:
      "left mid"
      "right mid";
    row-gap: 10px;
  }
  .akwin-left{ grid-area: left; }
  .akwin-mid{ grid-area: mid; }
  .akwin-right{ grid-area: right; justify-content:flex-start; opacity:.9; }

  .akwin-topline{
    flex-direction: column;
    align-items:flex-start;
    gap: 6px;
  }

  .akwin-amount{
    text-align:left;
  }

  .akwin-v{ max-width: 140px; }
  .akwin-confetti{ width: 36px; height: 36px; }
}



/* CLAI */



/* ========================================
   WINNER CARDS - COLLAPSIBLE SECTION
   ======================================== */

.akwin-container {
  margin-bottom: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header */
.akwin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(61, 153, 112, 0.08) 0%, rgba(61, 153, 112, 0.04) 100%);
  border: 1px solid rgba(61, 153, 112, 0.2);
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  user-select: none;
  transition: all 0.25s ease;
}

.akwin-header:hover {
  *background: linear-gradient(135deg, rgba(61, 153, 112, 0.12) 0%, rgba(61, 153, 112, 0.06) 100%);
  border-color: rgba(61, 153, 112, 0.3);
}

/* Dark mode header */
.dark .akwin-header {
  background: rgba(3, 31, 20, 0.5);
  border-color: rgba(61, 153, 112, 0.25);
}

.dark .akwin-header:hover {
  background: rgba(3, 31, 20, 0.7);
  border-color: rgba(61, 153, 112, 0.35);
}

.akwin-header-left {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1;
}

.akwin-header-icon {
  width: 24px;
  height: 24px;
  color: #3D9970;
  flex-shrink: 0;
}

.dark .akwin-header-icon {
  color: #f1c40f;
}

.akwin-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.akwin-header-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
  line-height: 1.3;
  margin: 0;
}

.dark .akwin-header-title {
  color: rgb(243, 244, 246);
}

.akwin-header-sub {
  font-size: 0.8125rem;
  color: rgb(107, 114, 128);
  margin: 0;
  line-height: 1.4;
}

.dark .akwin-header-sub {
  color: rgb(156, 163, 175);
}

/* Toggle button */
.akwin-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(61, 153, 112, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.akwin-toggle:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(61, 153, 112, 0.4);
  transform: scale(1.05);
}

.akwin-toggle:active {
  transform: scale(0.95);
}

.dark .akwin-toggle {
  background: rgba(2, 61, 38, 0.5);
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akwin-toggle:hover {
  background: rgba(2, 61, 38, 0.7);
  border-color: rgba(241, 196, 15, 0.4);
}

.akwin-toggle-icon {
  width: 18px;
  height: 18px;
  color: #3D9970;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .akwin-toggle-icon {
  color: #f1c40f;
}

/* Collapsed state */
.akwin-container.is-collapsed .akwin-toggle-icon {
  transform: rotate(180deg);
}

.akwin-container.is-collapsed .akwin-header {
  border-radius: 12px;
  margin-bottom: 0;
}

/* Winners list wrapper */
.akwin-wrap {
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem;
  margin-top: -5px;
  background: #ebf0ee;
  border: 1px solid rgba(61, 153, 112, 0.2);
  border-top: none;
  border-radius: 0 0 12px 12px;
  max-height: 2000px;
  overflow: hidden;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .akwin-wrap {
  background: rgba(3, 31, 20, 0.4);
  border-color: rgba(61, 153, 112, 0.25);
}

.akwin-container.is-collapsed .akwin-wrap {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  margin-top: -1px;
}

/* Individual winner card */
.akwin {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.125rem 1.25rem;
  background: #ffffff;
  border: 1.5px solid rgba(61, 153, 112, 0.2);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.dark .akwin {
  background: rgba(2, 61, 38, 0.3);
  border-color: rgba(61, 153, 112, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.akwin:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.dark .akwin:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Left: Circle image */
.akwin-left {
  display: flex;
  align-items: center;
  justify-content: center;
}

.akwin-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(61, 153, 112, 0.1);
  border: 2px solid rgba(61, 153, 112, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.dark .akwin-ring {
  background: rgba(2, 61, 38, 0.5);
  border-color: rgba(241, 196, 15, 0.3);
}

.akwin-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.akwin-img.is-fallback {
  width: 32px;
  height: 32px;
  opacity: 0.6;
}

/* Middle: Content */
.akwin-mid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.akwin-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem;
}

.akwin-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
  line-height: 1.4;
}

.dark .akwin-title {
  color: rgb(243, 244, 246);
}

.akwin-sub {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgb(107, 114, 128);
  margin-top: 0.25rem;
}

.dark .akwin-sub {
  color: rgb(156, 163, 175);
}

.akwin-circle {
  color: #3D9970;
  font-weight: 500;
}

.dark .akwin-circle {
  color: #f1c40f;
}

.akwin-dot {
  color: rgb(209, 213, 219);
}

.dark .akwin-dot {
  color: rgb(75, 85, 99);
}

.akwin-week {
  color: rgb(107, 114, 128);
}

.dark .akwin-week {
  color: rgb(156, 163, 175);
}

.akwin-amount {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  flex-shrink: 0;
}

.akwin-amtv {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3D9970;
  line-height: 1;
}

.dark .akwin-amtv {
  color: #f1c40f;
}

.akwin-amtc {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(107, 114, 128);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.dark .akwin-amtc {
  color: rgb(156, 163, 175);
}

/* Links section */
.akwin-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 0.8125rem;
}

.akwin-link {
  color: #3D9970;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
}

.akwin-link:hover {
  color: #2d7456;
  border-bottom-color: #2d7456;
}

.dark .akwin-link {
  color: #f1c40f;
}

.dark .akwin-link:hover {
  color: #f4d03f;
  border-bottom-color: #f1c40f;
}

/* Key-value pairs */
.akwin-kv {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.akwin-k {
  color: rgb(107, 114, 128);
  font-weight: 500;
  white-space: nowrap;
}

.dark .akwin-k {
  color: rgb(156, 163, 175);
}

.akwin-v {
  color: rgb(55, 65, 81);
  text-decoration: none;
  transition: color 0.2s ease;
}

.dark .akwin-v {
  color: rgb(209, 213, 219);
}

.akwin-v:hover {
  color: #3D9970;
}

.dark .akwin-v:hover {
  color: #f1c40f;
}

.akwin-mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.8125rem;
}

/* Copy button */
.akwin-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: rgb(156, 163, 175);
  transition: all 0.2s ease;
}

.akwin-copy:hover {
  background: rgba(61, 153, 112, 0.1);
  color: #3D9970;
}

.akwin-copy:active {
  transform: scale(0.9);
}

.dark .akwin-copy {
  color: rgb(107, 114, 128);
}

.dark .akwin-copy:hover {
  background: rgba(241, 196, 15, 0.15);
  color: #f1c40f;
}

.akwin-copySvg {
  width: 16px;
  height: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .akwin-header {
    padding: 0.875rem 1rem;
  }
  
  .akwin-header-icon {
    width: 22px;
    height: 22px;
  }
  
  .akwin-header-title {
    font-size: 0.9375rem;
  }
  
  .akwin-header-sub {
    font-size: 0.75rem;
  }
  
  .akwin {
    gap: 0.875rem;
    padding: 1rem;
  }
  
  .akwin-topline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
  }
  
  .akwin-amtv {
    font-size: 1.375rem;
  }
  
  .akwin-links {
    gap: 0.875rem;
  }
  
  .akwin-kv {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .akwin-header-left {
    gap: 0.75rem;
  }
  
  .akwin {
    padding: 0.875rem 1rem;
  }
  
  .akwin-ring {
    width: 48px;
    height: 48px;
  }
  
  .akwin-img {
    width: 38px;
    height: 38px;
  }
  
  .akwin-title {
    font-size: 0.875rem;
  }
  
  .akwin-sub {
    flex-wrap: wrap;
    font-size: 0.75rem;
  }
}

/* Animation for initial load */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.akwin-container:not(.is-collapsed) .akwin {
  animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.akwin-container:not(.is-collapsed) .akwin:nth-child(1) {
  animation-delay: 0.05s;
}

.akwin-container:not(.is-collapsed) .akwin:nth-child(2) {
  animation-delay: 0.1s;
}

.akwin-container:not(.is-collapsed) .akwin:nth-child(3) {
  animation-delay: 0.15s;
}



/* ========================================
   METRICS CARDS - MODERN & CONSISTENT
   ======================================== */

.akdash-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .akdash-metrics {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .akdash-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .akdash-metrics {
    grid-template-columns: 1fr;
  }
}

/* Individual metric card */
.akdash-metric {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.125rem;
  background: #ffffff;
  border: 1px solid rgba(61, 153, 112, 0.15);
  *border-left: 3px solid #3D9970;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.dark .akdash-metric {
  background: rgba(3, 31, 20, 0.4);
  border-color: rgba(61, 153, 112, 0.25);
  *border-left-color: #3D9970;
}

.akdash-metric:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  *border-left-color: #2d7456;
}

.dark .akdash-metric:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  *border-left-color: #f1c40f;
}

/* Icon container */
.akdash-metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(61, 153, 112, 0.1);
  border: 1px solid rgba(61, 153, 112, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.dark .akdash-metric-icon {
  background: rgba(61, 153, 112, 0.15);
  border-color: rgba(61, 153, 112, 0.3);
}

.akdash-metric:hover .akdash-metric-icon {
  background: rgba(61, 153, 112, 0.15);
  transform: scale(1.05);
}

.dark .akdash-metric:hover .akdash-metric-icon {
  background: rgba(241, 196, 15, 0.15);
  border-color: rgba(241, 196, 15, 0.3);
}

.akdash-metric-svg {
  width: 20px;
  height: 20px;
  color: #3D9970;
  transition: color 0.25s ease;
}

.dark .akdash-metric-svg {
  color: #3D9970;
}

.dark .akdash-metric:hover .akdash-metric-svg {
  color: #f1c40f;
}

/* Content */
.akdash-metric-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  flex: 1;
}

.akdash-metric-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(107, 114, 128);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.dark .akdash-metric-label {
  color: rgb(156, 163, 175);
}

.akdash-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.dark .akdash-metric-value {
  color: rgb(243, 244, 246);
}

.akdash-metric-unit {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(107, 114, 128);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.25rem;
}

.dark .akdash-metric-unit {
  color: rgb(156, 163, 175);
}

.akdash-metric-desc {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  line-height: 1.3;
}

.dark .akdash-metric-desc {
  color: rgb(156, 163, 175);
}

/* Responsive font scaling */
@media (max-width: 768px) {
  .akdash-metric {
    padding: 1rem;
    gap: 0.75rem;
  }
  
  .akdash-metric-icon {
    width: 36px;
    height: 36px;
  }
  
  .akdash-metric-svg {
    width: 18px;
    height: 18px;
  }
  
  .akdash-metric-value {
    font-size: 1.375rem;
  }
  
  .akdash-metric-label {
    font-size: 0.6875rem;
  }
  
  .akdash-metric-desc {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .akdash-metric {
    padding: 0.875rem;
  }
  
  .akdash-metric-value {
    font-size: 1.25rem;
  }
}

/* ========================================
   DASHBOARD - CONSISTENT MODERN STYLES
   ======================================== */

/* Card containers */
.akdash-card {
  background: #ffffff;
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 12px;
  overflow: hidden;
}

.dark .akdash-card {
  background: rgba(3, 31, 20, 0.4);
  border-color: rgba(61, 153, 112, 0.25);
}

/* Card headers */
.akdash-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  border-bottom: 1px solid rgba(61, 153, 112, 0.1);
}

.dark .akdash-card-header {
  border-bottom-color: rgba(61, 153, 112, 0.2);
}

.akdash-card-header-text {
  flex: 1;
  min-width: 0;
}

.akdash-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
  line-height: 1.3;
  margin: 0;
}

.dark .akdash-card-title {
  color: rgb(243, 244, 246);
}

.akdash-card-subtitle {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  line-height: 1.4;
}

.dark .akdash-card-subtitle {
  color: rgb(156, 163, 175);
}

.akdash-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #3D9970;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.akdash-card-link:hover {
  color: #2d7456;
}

.dark .akdash-card-link {
  color: #f1c40f;
}

.dark .akdash-card-link:hover {
  color: #f4d03f;
}

.akdash-card-link-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.akdash-card-link:hover .akdash-card-link-icon {
  transform: translateX(2px);
}

/* ========================================
   ENTRIES LIST
   ======================================== */

.akdash-entries {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}

.akdash-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: rgba(61, 153, 112, 0.03);
  border: 1px solid rgba(61, 153, 112, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.dark .akdash-entry {
  background: rgba(2, 61, 38, 0.25);
  border-color: rgba(61, 153, 112, 0.2);
}

.akdash-entry:hover {
  background: rgba(61, 153, 112, 0.05);
  border-color: rgba(61, 153, 112, 0.2);
}

.dark .akdash-entry:hover {
  background: rgba(2, 61, 38, 0.35);
  border-color: rgba(61, 153, 112, 0.3);
}

.akdash-entry-main {
  flex: 1;
  min-width: 0;
}

.akdash-entry-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.akdash-entry-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .akdash-entry-name {
  color: rgb(243, 244, 246);
}

.akdash-entry-status {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.akdash-entry-status--confirmed {
  background: rgba(61, 153, 112, 0.15);
  color: #2d7456;
}

.dark .akdash-entry-status--confirmed {
  background: rgba(61, 153, 112, 0.2);
  color: #3D9970;
}

.akdash-entry-status--pending {
  background: rgba(241, 196, 15, 0.15);
  color: #c29d0b;
}

.dark .akdash-entry-status--pending {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
}

.akdash-entry-status--muted {
  background: rgba(107, 114, 128, 0.1);
  color: rgb(75, 85, 99);
}

.dark .akdash-entry-status--muted {
  background: rgba(107, 114, 128, 0.15);
  color: rgb(156, 163, 175);
}

.akdash-entry-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
}

.dark .akdash-entry-meta {
  color: rgb(156, 163, 175);
}

.akdash-entry-sep {
  color: rgb(209, 213, 219);
}

.dark .akdash-entry-sep {
  color: rgb(75, 85, 99);
}

.akdash-entry-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.akdash-entry-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3D9970;
  text-decoration: none;
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  background: rgba(61, 153, 112, 0.05);
}

.akdash-entry-link:hover {
  background: rgba(61, 153, 112, 0.1);
  color: #2d7456;
}

.dark .akdash-entry-link {
  color: #f1c40f;
  background: rgba(241, 196, 15, 0.1);
}

.dark .akdash-entry-link:hover {
  background: rgba(241, 196, 15, 0.15);
  color: #f4d03f;
}

.akdash-entry-link--disabled {
  color: rgb(156, 163, 175);
  background: transparent;
  cursor: not-allowed;
}

.akdash-entry-link-icon {
  width: 14px;
  height: 14px;
}

.akdash-entry-copy {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(61, 153, 112, 0.2);
  background: transparent;
  border-radius: 6px;
  color: rgb(107, 114, 128);
  cursor: pointer;
  transition: all 0.2s ease;
}

.akdash-entry-copy:hover {
  background: rgba(61, 153, 112, 0.1);
  color: #3D9970;
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akdash-entry-copy {
  border-color: rgba(61, 153, 112, 0.25);
  color: rgb(156, 163, 175);
}

.dark .akdash-entry-copy:hover {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.3);
}

.akdash-entry-copy svg {
  width: 16px;
  height: 16px;
}

/* ========================================
   QUICK LINKS
   ======================================== */

.akdash-links {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}

.akdash-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  color: rgb(17, 24, 39);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.akdash-link:hover {
  background: rgba(61, 153, 112, 0.05);
}

.dark .akdash-link {
  color: rgb(243, 244, 246);
}

.dark .akdash-link:hover {
  background: rgba(61, 153, 112, 0.1);
}

.akdash-link-text {
  font-size: 0.9375rem;
  font-weight: 500;
}

.akdash-link-icon {
  width: 16px;
  height: 16px;
  color: rgb(156, 163, 175);
  transition: all 0.2s ease;
}

.akdash-link:hover .akdash-link-icon {
  color: #3D9970;
  transform: translateX(2px);
}

.dark .akdash-link:hover .akdash-link-icon {
  color: #f1c40f;
}

/* ========================================
   CIRCLES LIST
   ======================================== */

.akdash-circles {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}

.akdash-circle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: rgba(61, 153, 112, 0.03);
  border: 1px solid rgba(61, 153, 112, 0.1);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dark .akdash-circle {
  background: rgba(2, 61, 38, 0.25);
  border-color: rgba(61, 153, 112, 0.2);
}

.akdash-circle:hover {
  background: rgba(61, 153, 112, 0.08);
  border-color: rgba(61, 153, 112, 0.25);
  transform: translateX(2px);
}

.dark .akdash-circle:hover {
  background: rgba(2, 61, 38, 0.4);
  border-color: rgba(61, 153, 112, 0.3);
}

.akdash-circle-content {
  flex: 1;
  min-width: 0;
}

.akdash-circle-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
  margin-bottom: 0.25rem;
}

.dark .akdash-circle-name {
  color: rgb(243, 244, 246);
}

.akdash-circle-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
}

.dark .akdash-circle-meta {
  color: rgb(156, 163, 175);
}

.akdash-circle-sep {
  color: rgb(209, 213, 219);
}

.dark .akdash-circle-sep {
  color: rgb(75, 85, 99);
}

.akdash-circle-icon {
  width: 20px;
  height: 20px;
  color: rgb(156, 163, 175);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.akdash-circle:hover .akdash-circle-icon {
  color: #3D9970;
  transform: translateX(2px);
}

.dark .akdash-circle:hover .akdash-circle-icon {
  color: #f1c40f;
}

/* ========================================
   WALLET TRACKING
   ======================================== */

.akdash-info-box {
  display: flex;
  gap: 0.875rem;
  padding: 1rem;
  margin: 0.5rem 1.25rem 1rem;
  background: rgba(61, 153, 112, 0.05);
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 8px;
}

.dark .akdash-info-box {
  background: rgba(2, 61, 38, 0.3);
  border-color: rgba(61, 153, 112, 0.25);
}

.akdash-info-box-icon {
  width: 20px;
  height: 20px;
  color: #3D9970;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.dark .akdash-info-box-icon {
  color: #f1c40f;
}

.akdash-info-box-content {
  flex: 1;
  min-width: 0;
}

.akdash-info-box-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
  margin-bottom: 0.25rem;
}

.dark .akdash-info-box-title {
  color: rgb(243, 244, 246);
}

.akdash-info-box-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  line-height: 1.5;
}

.dark .akdash-info-box-text {
  color: rgb(156, 163, 175);
}

.akdash-info-box-sep {
  color: rgb(209, 213, 219);
  margin: 0 0.375rem;
}

.dark .akdash-info-box-sep {
  color: rgb(75, 85, 99);
}

/* Form */
.akdash-form {
  padding: 0 1.25rem 1.25rem;
}

.akdash-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.akdash-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
}

.dark .akdash-label {
  color: rgb(209, 213, 219);
}

.akdash-input-group {
  display: flex;
  gap: 0.75rem;
}

.akdash-input {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(17, 24, 39);
  background: #ffffff;
  border: 1px solid rgba(61, 153, 112, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

.akdash-input:focus {
  outline: none;
  border-color: #3D9970;
  box-shadow: 0 0 0 3px rgba(61, 153, 112, 0.1);
}

.dark .akdash-input {
  background: rgba(2, 61, 38, 0.3);
  border-color: rgba(61, 153, 112, 0.3);
  color: rgb(243, 244, 246);
}

.dark .akdash-input:focus {
  border-color: #f1c40f;
  box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.1);
}

.akdash-help-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  line-height: 1.4;
}

.dark .akdash-help-text {
  color: rgb(156, 163, 175);
}

.akdash-error-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(220, 38, 38);
  line-height: 1.4;
}

.dark .akdash-error-text {
  color: rgb(248, 113, 113);
}

/* Buttons */
.akdash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.akdash-btn--primary {
  background: #3D9970;
  color: #ffffff;
}

.akdash-btn--primary:hover {
  background: #2d7456;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(61, 153, 112, 0.2);
}

.dark .akdash-btn--primary {
  background: #f1c40f;
  color: rgb(17, 24, 39);
}

.dark .akdash-btn--primary:hover {
  background: #f4d03f;
}

.akdash-btn--secondary {
  background: rgba(61, 153, 112, 0.1);
  color: #3D9970;
  border: 1px solid rgba(61, 153, 112, 0.2);
}

.akdash-btn--secondary:hover {
  background: rgba(61, 153, 112, 0.15);
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akdash-btn--secondary {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.2);
}

.dark .akdash-btn--secondary:hover {
  background: rgba(241, 196, 15, 0.15);
  border-color: rgba(241, 196, 15, 0.3);
}

/* Wallet list */
.akdash-wallet-list {
  padding: 0 1.25rem 1.25rem;
}

.akdash-wallet-list-header {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
  margin-bottom: 0.75rem;
}

.dark .akdash-wallet-list-header {
  color: rgb(209, 213, 219);
}

.akdash-wallets {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.akdash-wallet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: rgba(61, 153, 112, 0.03);
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 8px;
}

.dark .akdash-wallet {
  background: rgba(2, 61, 38, 0.25);
  border-color: rgba(61, 153, 112, 0.25);
}

.akdash-wallet-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.akdash-wallet-badge {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(61, 153, 112, 0.1);
  border: 1px solid rgba(61, 153, 112, 0.2);
  border-radius: 6px;
  flex-shrink: 0;
}

.dark .akdash-wallet-badge {
  background: rgba(241, 196, 15, 0.1);
  border-color: rgba(241, 196, 15, 0.2);
}

.akdash-wallet-badge-icon {
  width: 18px;
  height: 18px;
  color: #3D9970;
}

.dark .akdash-wallet-badge-icon {
  color: #f1c40f;
}

.akdash-wallet-address {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(55, 65, 81);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .akdash-wallet-address {
  color: rgb(209, 213, 219);
}

.akdash-wallet-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.akdash-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(61, 153, 112, 0.2);
  background: transparent;
  border-radius: 6px;
  color: rgb(107, 114, 128);
  cursor: pointer;
  transition: all 0.2s ease;
}

.akdash-icon-btn:hover {
  background: rgba(61, 153, 112, 0.1);
  color: #3D9970;
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akdash-icon-btn {
  border-color: rgba(61, 153, 112, 0.25);
  color: rgb(156, 163, 175);
}

.dark .akdash-icon-btn:hover {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.3);
}

.akdash-icon-btn--danger:hover {
  background: rgba(220, 38, 38, 0.1);
  color: rgb(220, 38, 38);
  border-color: rgba(220, 38, 38, 0.3);
}

.dark .akdash-icon-btn--danger:hover {
  background: rgba(248, 113, 113, 0.1);
  color: rgb(248, 113, 113);
  border-color: rgba(248, 113, 113, 0.3);
}

.akdash-icon-btn svg {
  width: 16px;
  height: 16px;
}

.akdash-inline-form {
  display: inline;
}

/* ========================================
   ALERTS & EMPTY STATES
   ======================================== */

.akdash-alert {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  margin: 1rem 1.25rem;
  border-radius: 10px;
}

.akdash-alert--info {
  background: rgba(241, 196, 15, 0.08);
  border: 1px solid rgba(241, 196, 15, 0.2);
}

.dark .akdash-alert--info {
  background: rgba(241, 196, 15, 0.1);
  border-color: rgba(241, 196, 15, 0.25);
}

.akdash-alert-icon {
  width: 24px;
  height: 24px;
  color: #c29d0b;
  flex-shrink: 0;
}

.dark .akdash-alert-icon {
  color: #f1c40f;
}

.akdash-alert-icon svg {
  width: 100%;
  height: 100%;
}

.akdash-alert-content {
  flex: 1;
  min-width: 0;
}

.akdash-alert-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
  margin-bottom: 0.375rem;
}

.dark .akdash-alert-title {
  color: rgb(243, 244, 246);
}

.akdash-alert-body {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.dark .akdash-alert-body {
  color: rgb(156, 163, 175);
}

.akdash-alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.akdash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.akdash-empty-icon {
  width: 48px;
  height: 48px;
  color: rgb(209, 213, 219);
  margin-bottom: 1rem;
}

.dark .akdash-empty-icon {
  color: rgb(75, 85, 99);
}

.akdash-empty-icon svg {
  width: 100%;
  height: 100%;
}

.akdash-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
  margin-bottom: 0.5rem;
}

.dark .akdash-empty-title {
  color: rgb(209, 213, 219);
}

.akdash-empty-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  max-width: 36ch;
  line-height: 1.5;
}

.dark .akdash-empty-text {
  color: rgb(156, 163, 175);
}

/* ========================================
   UTILITIES
   ======================================== */

.akdash-mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.875em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .akdash-card-header {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .akdash-entry {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .akdash-entry-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .akdash-input-group {
    flex-direction: column;
  }
  
  .akdash-btn {
    width: 100%;
  }
  
  .akdash-wallet {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .akdash-wallet-main {
    width: 100%;
  }
  
  .akdash-wallet-actions {
    width: 100%;
    justify-content: flex-end;
  }
}


/* ========================================
   CONTRIBUTIONS PAGE - MODERN LAYOUT
   ======================================== */

.akhistory-page {
  min-height: 100vh;
}

/* ========================================
   HEADER
   ======================================== */

.akhistory-header {
  background: #ffffff;
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.dark .akhistory-header {
  background: rgba(3, 31, 20, 0.4);
  border-color: rgba(61, 153, 112, 0.25);
}

.akhistory-header-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .akhistory-header-main {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.akhistory-header-text {
  flex: 1;
  min-width: 0;
}

.akhistory-header-desc {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  line-height: 1.5;
  margin: 0;
}

.dark .akhistory-header-desc {
  color: rgb(156, 163, 175);
}

.akhistory-header-window {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  margin: 0.5rem 0 0;
}

.dark .akhistory-header-window {
  color: rgb(156, 163, 175);
}

.akhistory-header-window-value {
  font-weight: 600;
  color: rgb(17, 24, 39);
}

.dark .akhistory-header-window-value {
  color: rgb(243, 244, 246);
}

.akhistory-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.akhistory-header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #3D9970;
  text-decoration: none;
  transition: color 0.2s ease;
}

.akhistory-header-link:hover {
  color: #2d7456;
}

.dark .akhistory-header-link {
  color: #f1c40f;
}

.dark .akhistory-header-link:hover {
  color: #f4d03f;
}

.akhistory-header-link-icon {
  width: 18px;
  height: 18px;
}

/* ========================================
   LAYOUT
   ======================================== */

.akhistory-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.akhistory-filters-wrapper {
  width: 100%;
}

.akhistory-filters-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .akhistory-filters-grid {
    grid-template-columns: 400px 1fr;
  }
}

.akhistory-table-section {
  width: 100%;
}

/* ========================================
   CARD COMPONENT
   ======================================== */

.akhistory-card {
  background: #ffffff;
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 12px;
  overflow: hidden;
}

.dark .akhistory-card {
  background: rgba(3, 31, 20, 0.4);
  border-color: rgba(61, 153, 112, 0.25);
}

.akhistory-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.25rem;
  border-bottom: 1px solid rgba(61, 153, 112, 0.1);
}

.dark .akhistory-card-header {
  border-bottom-color: rgba(61, 153, 112, 0.2);
}

/* Clickable header for collapse */
.akhistory-card-header--clickable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.akhistory-card-header--clickable:hover {
  background: rgba(61, 153, 112, 0.03);
}

.dark .akhistory-card-header--clickable:hover {
  background: rgba(2, 61, 38, 0.2);
}

.akhistory-card-header-text-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 1rem;
}

.akhistory-collapse-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgb(107, 114, 128);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.akhistory-collapse-btn:hover {
  background: rgba(61, 153, 112, 0.1);
  color: #3D9970;
}

.dark .akhistory-collapse-btn {
  color: rgb(156, 163, 175);
}

.dark .akhistory-collapse-btn:hover {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
}

.akhistory-collapse-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.akhistory-collapsible-content {
  max-height: 2000px;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.akhistory-collapsible-content.is-collapsed {
  max-height: 0;
}

.akhistory-collapsible-content.is-collapsed ~ .akhistory-card-header--clickable .akhistory-collapse-icon {
  transform: rotate(-90deg);
}

/* Add wallet form */
.akhistory-add-wallet-form {
  padding: 1.25rem;
  border-bottom: 1px solid rgba(61, 153, 112, 0.1);
}

.dark .akhistory-add-wallet-form {
  border-bottom-color: rgba(61, 153, 112, 0.2);
}

.akhistory-add-wallet-input-group {
  display: flex;
  gap: 0.5rem;
}

.akhistory-add-wallet-input-group .akhistory-input {
  flex: 1;
}

.akhistory-add-wallet-input-group .akhistory-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.akhistory-add-wallet-input-group .akhistory-btn svg {
  width: 16px;
  height: 16px;
}

.akhistory-error {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(220, 38, 38);
  margin-top: 0.5rem;
}

.dark .akhistory-error {
  color: rgb(248, 113, 113);
}

.akhistory-card-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(61, 153, 112, 0.1);
  border: 1px solid rgba(61, 153, 112, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #3D9970;
}

.dark .akhistory-card-header-icon {
  background: rgba(61, 153, 112, 0.15);
  border-color: rgba(61, 153, 112, 0.3);
}

.akhistory-card-header-icon svg {
  width: 20px;
  height: 20px;
}

.akhistory-card-header-text {
  flex: 1;
  min-width: 0;
}

.akhistory-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
  line-height: 1.3;
  margin: 0;
}

.dark .akhistory-card-title {
  color: rgb(243, 244, 246);
}

.akhistory-card-subtitle {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  line-height: 1.4;
}

.dark .akhistory-card-subtitle {
  color: rgb(156, 163, 175);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.akhistory-form {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.akhistory-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.akhistory-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
}

.dark .akhistory-label {
  color: rgb(209, 213, 219);
}

.akhistory-input {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(17, 24, 39);
  background: #ffffff;
  border: 1px solid rgba(61, 153, 112, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.akhistory-input:focus {
  outline: none;
  border-color: #3D9970;
  box-shadow: 0 0 0 3px rgba(61, 153, 112, 0.1);
}

.dark .akhistory-input {
  background: rgba(2, 61, 38, 0.3);
  border-color: rgba(61, 153, 112, 0.3);
  color: rgb(243, 244, 246);
}

.dark .akhistory-input:focus {
  border-color: #f1c40f;
  box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.1);
}

.akhistory-input--mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

.akhistory-select {
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(17, 24, 39);
  background: #ffffff;
  border: 1px solid rgba(61, 153, 112, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233D9970'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  cursor: pointer;
}

.akhistory-select:focus {
  outline: none;
  border-color: #3D9970;
  box-shadow: 0 0 0 3px rgba(61, 153, 112, 0.1);
}

.dark .akhistory-select {
  background-color: rgba(2, 61, 38, 0.3);
  border-color: rgba(61, 153, 112, 0.3);
  color: rgb(243, 244, 246);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f1c40f'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

.dark .akhistory-select:focus {
  border-color: #f1c40f;
  box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.1);
}

.akhistory-help-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  margin-top: 0.375rem;
}

.dark .akhistory-help-text {
  color: rgb(156, 163, 175);
}

/* Date group */
.akhistory-date-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.akhistory-date-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.akhistory-date-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(107, 114, 128);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .akhistory-date-label {
  color: rgb(156, 163, 175);
}

/* Checkbox group */
.akhistory-checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(61, 153, 112, 0.03);
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dark .akhistory-checkbox-group {
  background: rgba(2, 61, 38, 0.25);
  border-color: rgba(61, 153, 112, 0.25);
}

.akhistory-checkbox-group:hover {
  background: rgba(61, 153, 112, 0.06);
  border-color: rgba(61, 153, 112, 0.25);
}

.dark .akhistory-checkbox-group:hover {
  background: rgba(2, 61, 38, 0.35);
  border-color: rgba(61, 153, 112, 0.3);
}

.akhistory-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(61, 153, 112, 0.3);
  border-radius: 4px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
}

.dark .akhistory-checkbox {
  background: rgba(2, 61, 38, 0.3);
  border-color: rgba(61, 153, 112, 0.4);
}

.akhistory-checkbox:checked {
  background: #3D9970;
  border-color: #3D9970;
}

.dark .akhistory-checkbox:checked {
  background: #f1c40f;
  border-color: #f1c40f;
}

.akhistory-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dark .akhistory-checkbox:checked::after {
  border-color: rgb(17, 24, 39);
}

.akhistory-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
  cursor: pointer;
  flex: 1;
}

.dark .akhistory-checkbox-label {
  color: rgb(243, 244, 246);
}

.akhistory-checkbox-icon {
  width: 16px;
  height: 16px;
  color: #c29d0b;
}

.dark .akhistory-checkbox-icon {
  color: #f1c40f;
}

.akhistory-filter-form {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ========================================
   BUTTONS
   ======================================== */

.akhistory-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.akhistory-btn--primary {
  background: #3D9970;
  color: #ffffff;
  border-color: #3D9970;
}

.akhistory-btn--primary:hover {
  background: #2d7456;
  border-color: #2d7456;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(61, 153, 112, 0.2);
}

.dark .akhistory-btn--primary {
  background: #f1c40f;
  color: rgb(17, 24, 39);
  border-color: #f1c40f;
}

.dark .akhistory-btn--primary:hover {
  background: #f4d03f;
  border-color: #f4d03f;
}

.akhistory-btn--secondary {
  background: rgba(61, 153, 112, 0.1);
  color: #3D9970;
  border-color: rgba(61, 153, 112, 0.2);
}

.akhistory-btn--secondary:hover {
  background: rgba(61, 153, 112, 0.15);
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akhistory-btn--secondary {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.2);
}

.dark .akhistory-btn--secondary:hover {
  background: rgba(241, 196, 15, 0.15);
  border-color: rgba(241, 196, 15, 0.3);
}

.akhistory-btn--full {
  width: 100%;
}

/* ========================================
   WALLET LIST
   ======================================== */

.akhistory-wallet-list {
  padding: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 400px;
  overflow-y: auto;
}

/* Custom scrollbar */
.akhistory-wallet-list::-webkit-scrollbar {
  width: 6px;
}

.akhistory-wallet-list::-webkit-scrollbar-track {
  background: rgba(61, 153, 112, 0.05);
  border-radius: 3px;
}

.akhistory-wallet-list::-webkit-scrollbar-thumb {
  background: rgba(61, 153, 112, 0.2);
  border-radius: 3px;
}

.akhistory-wallet-list::-webkit-scrollbar-thumb:hover {
  background: rgba(61, 153, 112, 0.3);
}

.dark .akhistory-wallet-list::-webkit-scrollbar-track {
  background: rgba(2, 61, 38, 0.3);
}

.dark .akhistory-wallet-list::-webkit-scrollbar-thumb {
  background: rgba(61, 153, 112, 0.3);
}

.dark .akhistory-wallet-list::-webkit-scrollbar-thumb:hover {
  background: rgba(61, 153, 112, 0.4);
}

.akhistory-wallet-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(61, 153, 112, 0.03);
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.dark .akhistory-wallet-item {
  background: rgba(2, 61, 38, 0.25);
  border-color: rgba(61, 153, 112, 0.25);
}

.akhistory-wallet-item--active {
  background: rgba(61, 153, 112, 0.08);
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akhistory-wallet-item--active {
  background: rgba(2, 61, 38, 0.4);
  border-color: rgba(61, 153, 112, 0.35);
}

.akhistory-wallet-item:hover {
  background: rgba(61, 153, 112, 0.06);
  border-color: rgba(61, 153, 112, 0.25);
}

.dark .akhistory-wallet-item:hover {
  background: rgba(2, 61, 38, 0.35);
  border-color: rgba(61, 153, 112, 0.3);
}

.akhistory-wallet-item-content {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.akhistory-wallet-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.akhistory-wallet-item-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(107, 114, 128);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .akhistory-wallet-item-label {
  color: rgb(156, 163, 175);
}

.akhistory-wallet-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: rgba(61, 153, 112, 0.15);
  color: #2d7456;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .akhistory-wallet-badge {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
}

.akhistory-wallet-item-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
}

.dark .akhistory-wallet-item-value {
  color: rgb(243, 244, 246);
}

.akhistory-wallet-item-address-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.akhistory-wallet-item-address {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(55, 65, 81);
  word-break: break-all;
  flex: 1;
}

.dark .akhistory-wallet-item-address {
  color: rgb(209, 213, 219);
}

.akhistory-wallet-explorer-link {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(61, 153, 112, 0.2);
  background: transparent;
  border-radius: 4px;
  color: rgb(107, 114, 128);
  text-decoration: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.akhistory-wallet-explorer-link:hover {
  background: rgba(61, 153, 112, 0.1);
  color: #3D9970;
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akhistory-wallet-explorer-link {
  border-color: rgba(61, 153, 112, 0.25);
  color: rgb(156, 163, 175);
}

.dark .akhistory-wallet-explorer-link:hover {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.3);
}

.akhistory-wallet-explorer-link svg {
  width: 12px;
  height: 12px;
}

.akhistory-wallet-remove-form {
  margin: 0;
}

.akhistory-wallet-remove-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(220, 38, 38, 0.2);
  background: transparent;
  border-radius: 6px;
  color: rgb(220, 38, 38);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.akhistory-wallet-remove-btn:hover {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.3);
}

.dark .akhistory-wallet-remove-btn {
  color: rgb(248, 113, 113);
  border-color: rgba(248, 113, 113, 0.2);
}

.dark .akhistory-wallet-remove-btn:hover {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.3);
}

.akhistory-wallet-remove-btn svg {
  width: 16px;
  height: 16px;
}

.akhistory-wallet-item-remove {
  margin: 0;
}

.akhistory-btn-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(220, 38, 38);
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.akhistory-btn-remove:hover {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.3);
}

.dark .akhistory-btn-remove {
  color: rgb(248, 113, 113);
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.2);
}

.dark .akhistory-btn-remove:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
}

.akhistory-btn-remove svg {
  width: 16px;
  height: 16px;
}

/* ========================================
   EMPTY STATE
   ======================================== */

.akhistory-empty {
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.akhistory-empty-icon {
  width: 56px;
  height: 56px;
  color: rgb(209, 213, 219);
  margin-bottom: 1rem;
}

.dark .akhistory-empty-icon {
  color: rgb(75, 85, 99);
}

.akhistory-empty-icon svg {
  width: 100%;
  height: 100%;
}

.akhistory-empty-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
  margin-bottom: 0.5rem;
}

.dark .akhistory-empty-title {
  color: rgb(243, 244, 246);
}

.akhistory-empty-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  max-width: 36ch;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.dark .akhistory-empty-text {
  color: rgb(156, 163, 175);
}

.akhistory-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ========================================
   TABLE
   ======================================== */

.akhistory-table-container {
  padding: 1rem 0;
}

.akhistory-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(61, 153, 112, 0.1);
}

.dark .akhistory-table-wrapper {
  border-color: rgba(61, 153, 112, 0.2);
}

.akhistory-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.akhistory-table thead {
  background: rgba(61, 153, 112, 0.05);
  border-bottom: 2px solid rgba(61, 153, 112, 0.15);
}

.dark .akhistory-table thead {
  background: rgba(2, 61, 38, 0.3);
  border-bottom-color: rgba(61, 153, 112, 0.25);
}

.akhistory-table th {
  padding: 0.875rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(55, 65, 81);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.dark .akhistory-table th {
  color: rgb(209, 213, 219);
}

.akhistory-table tbody tr {
  border-bottom: 1px solid rgba(61, 153, 112, 0.08);
  transition: background-color 0.15s ease;
}

.dark .akhistory-table tbody tr {
  border-bottom-color: rgba(61, 153, 112, 0.15);
}

.akhistory-table tbody tr:hover {
  background: rgba(61, 153, 112, 0.03);
}

.dark .akhistory-table tbody tr:hover {
  background: rgba(2, 61, 38, 0.2);
}

.akhistory-table tbody tr:last-child {
  border-bottom: none;
}

/* Winner row highlighting */
.akhistory-row--winner {
  background: rgba(241, 196, 15, 0.06);
}

.dark .akhistory-row--winner {
  background: rgba(241, 196, 15, 0.08);
}

.akhistory-row--winner:hover {
  background: rgba(241, 196, 15, 0.1);
}

.dark .akhistory-row--winner:hover {
  background: rgba(241, 196, 15, 0.12);
}

.akhistory-table td {
  padding: 1rem;
  color: rgb(55, 65, 81);
  vertical-align: middle;
}

.dark .akhistory-table td {
  color: rgb(209, 213, 219);
}

/* Status badges */
.akhistory-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.akhistory-status--confirmed {
  background: rgba(61, 153, 112, 0.15);
  color: #2d7456;
}

.dark .akhistory-status--confirmed {
  background: rgba(61, 153, 112, 0.2);
  color: #3D9970;
}

.akhistory-status--pending {
  background: rgba(241, 196, 15, 0.15);
  color: #c29d0b;
}

.dark .akhistory-status--pending {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
}

.akhistory-status--invalid,
.akhistory-status--muted {
  background: rgba(107, 114, 128, 0.1);
  color: rgb(75, 85, 99);
}

.dark .akhistory-status--invalid,
.dark .akhistory-status--muted {
  background: rgba(107, 114, 128, 0.15);
  color: rgb(156, 163, 175);
}

/* Amount column */
.akhistory-td-amount {
  white-space: nowrap;
}

.akhistory-amount-wrapper {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.akhistory-amount {
  font-size: 0.9375rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
}

.dark .akhistory-amount {
  color: rgb(243, 244, 246);
}

.akhistory-currency {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(107, 114, 128);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .akhistory-currency {
  color: rgb(156, 163, 175);
}

.akhistory-won-amount {
  font-size: 0.875rem;
  font-weight: 700;
  color: #c29d0b;
  margin-top: 0.25rem;
}

.dark .akhistory-won-amount {
  color: #f1c40f;
}

/* Winner badge */
.akhistory-winner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  background: rgba(241, 196, 15, 0.15);
  color: #c29d0b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.dark .akhistory-winner-badge {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
}

.akhistory-winner-badge svg {
  width: 12px;
  height: 12px;
}

.akhistory-dash {
  color: rgb(209, 213, 219);
}

.dark .akhistory-dash {
  color: rgb(75, 85, 99);
}

/* Address column */
.akhistory-td-address {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.8125rem;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TXID column */
.akhistory-td-txid {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.8125rem;
}

.akhistory-txid-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.akhistory-txid-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  color: #3D9970;
  text-decoration: none;
  transition: color 0.2s ease;
}

.akhistory-txid-link:hover {
  color: #2d7456;
}

.dark .akhistory-txid-link {
  color: #f1c40f;
}

.dark .akhistory-txid-link:hover {
  color: #f4d03f;
}

.akhistory-txid-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.akhistory-txid-text {
  color: rgb(107, 114, 128);
}

.dark .akhistory-txid-text {
  color: rgb(156, 163, 175);
}

.akhistory-copy-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(61, 153, 112, 0.2);
  background: transparent;
  border-radius: 4px;
  color: rgb(107, 114, 128);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.akhistory-copy-btn:hover {
  background: rgba(61, 153, 112, 0.1);
  color: #3D9970;
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akhistory-copy-btn {
  border-color: rgba(61, 153, 112, 0.25);
  color: rgb(156, 163, 175);
}

.dark .akhistory-copy-btn:hover {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.3);
}

.akhistory-copy-btn.is-copied {
  background: rgba(61, 153, 112, 0.15);
  color: #3D9970;
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akhistory-copy-btn.is-copied {
  background: rgba(241, 196, 15, 0.15);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.3);
}

.akhistory-copy-btn svg {
  width: 12px;
  height: 12px;
}

/* Mobile: Convert table to cards */
@media (max-width: 1024px) {
  .akhistory-table-wrapper {
    border: none;
  }
  
  .akhistory-table,
  .akhistory-table thead,
  .akhistory-table tbody,
  .akhistory-table tr,
  .akhistory-table th,
  .akhistory-table td {
    display: block;
  }
  
  .akhistory-table thead {
    display: none;
  }
  
  .akhistory-table tbody tr {
    background: rgba(61, 153, 112, 0.03);
    border: 1px solid rgba(61, 153, 112, 0.15);
    border-radius: 10px;
    margin-bottom: 1rem;
    padding: 1rem;
  }
  
  .dark .akhistory-table tbody tr {
    background: rgba(2, 61, 38, 0.25);
    border-color: rgba(61, 153, 112, 0.25);
  }
  
  .akhistory-row--winner {
    background: rgba(241, 196, 15, 0.08);
    border-color: rgba(241, 196, 15, 0.3);
    border-width: 2px;
  }
  
  .dark .akhistory-row--winner {
    background: rgba(241, 196, 15, 0.12);
    border-color: rgba(241, 196, 15, 0.35);
  }
  
  .akhistory-table td {
    padding: 0.5rem 0;
    border: none;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0.75rem;
    align-items: start;
  }
  
  .akhistory-table td::before {
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(107, 114, 128);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .dark .akhistory-table td::before {
    color: rgb(156, 163, 175);
  }
  
  .akhistory-td-address,
  .akhistory-td-txid {
    max-width: none;
    overflow: visible;
    word-break: break-all;
  }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 640px) {
  .akhistory-header {
    padding: 1.25rem;
  }

  .akhistory-header-actions {
    flex-direction: column;
    width: 100%;
  }

  .akhistory-btn--secondary {
    width: 100%;
  }

  .akhistory-card-header {
    padding: 1rem;
  }

  .akhistory-form {
    padding: 1rem;
  }

  .akhistory-filter-form {
    padding: 1rem;
  }

  .akhistory-wallet-list {
    padding: 0 1rem 1rem;
  }

  .akhistory-entries {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .akhistory-entry {
    padding: 1rem;
  }

  .akhistory-entry-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .akhistory-entry-amount {
    font-size: 1.125rem;
  }

  .akhistory-entry-row {
    grid-template-columns: 70px 1fr;
    gap: 0.5rem;
  }
}

/* ========================================
   LOADING OVERLAY
   ======================================== */

.akhistory-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 20, 17, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.dark .akhistory-loader-overlay {
  background: rgba(3, 31, 20, 0.85);
}

.akhistory-loader-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

.akhistory-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid rgba(61, 153, 112, 0.2);
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dark .akhistory-loader-content {
  background: rgba(2, 61, 38, 0.98);
  border-color: rgba(61, 153, 112, 0.3);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

.akhistory-loader-overlay.is-visible .akhistory-loader-content {
  transform: scale(1);
}

.akhistory-loader-spinner {
  width: 48px;
  height: 48px;
  position: relative;
}

.akhistory-loader-svg {
  width: 100%;
  height: 100%;
  animation: akhistory-rotate 1.4s linear infinite;
}

.akhistory-loader-svg circle {
  stroke: #3D9970;
  stroke-linecap: round;
  animation: akhistory-dash 1.4s ease-in-out infinite;
}

.dark .akhistory-loader-svg circle {
  stroke: #f1c40f;
}

@keyframes akhistory-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes akhistory-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

.akhistory-loader-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
  letter-spacing: 0.01em;
}

.dark .akhistory-loader-text {
  color: rgb(243, 244, 246);
}

/* Loading state for elements */
.akhistory-wallet-item.is-loading,
.akhistory-entry.is-loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.akhistory-wallet-item.is-loading::after,
.akhistory-entry.is-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(61, 153, 112, 0.1), transparent);
  animation: akhistory-shimmer 1.5s infinite;
}

.dark .akhistory-wallet-item.is-loading::after,
.dark .akhistory-entry.is-loading::after {
  background: linear-gradient(90deg, transparent, rgba(241, 196, 15, 0.1), transparent);
}

@keyframes akhistory-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ========================================
   CONTRIBUTIONS PAGE - MODERN LAYOUT
   ======================================== */

.akcontrib-page {
  min-height: 100vh;
}

/* ========================================
   HEADER
   ======================================== */

.akcontrib-header {
  background: #ffffff;
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.dark .akcontrib-header {
  background: rgba(3, 31, 20, 0.4);
  border-color: rgba(61, 153, 112, 0.25);
}

.akcontrib-header-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .akcontrib-header-main {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.akcontrib-header-text {
  flex: 1;
  min-width: 0;
}

.akcontrib-header-desc {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  line-height: 1.5;
  margin: 0;
}

.dark .akcontrib-header-desc {
  color: rgb(156, 163, 175);
}

.akcontrib-header-window {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  margin: 0.5rem 0 0;
}

.dark .akcontrib-header-window {
  color: rgb(156, 163, 175);
}

.akcontrib-header-window-value {
  font-weight: 600;
  color: rgb(17, 24, 39);
}

.dark .akcontrib-header-window-value {
  color: rgb(243, 244, 246);
}

.akcontrib-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.akcontrib-header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #3D9970;
  text-decoration: none;
  transition: color 0.2s ease;
}

.akcontrib-header-link:hover {
  color: #2d7456;
}

.dark .akcontrib-header-link {
  color: #f1c40f;
}

.dark .akcontrib-header-link:hover {
  color: #f4d03f;
}

.akcontrib-header-link-icon {
  width: 18px;
  height: 18px;
}

/* ========================================
   GRID LAYOUT
   ======================================== */

.akcontrib-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .akcontrib-grid {
    grid-template-columns: 320px 1fr;
    align-items: start;
  }
}

/* ========================================
   SIDEBAR
   ======================================== */

.akcontrib-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .akcontrib-sidebar {
    position: sticky;
    top: 1.5rem;
  }
}

/* ========================================
   CARD COMPONENT
   ======================================== */

.akcontrib-card {
  background: #ffffff;
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 12px;
  overflow: hidden;
}

.dark .akcontrib-card {
  background: rgba(3, 31, 20, 0.4);
  border-color: rgba(61, 153, 112, 0.25);
}

.akcontrib-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.25rem;
  border-bottom: 1px solid rgba(61, 153, 112, 0.1);
}

.dark .akcontrib-card-header {
  border-bottom-color: rgba(61, 153, 112, 0.2);
}

.akcontrib-card-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(61, 153, 112, 0.1);
  border: 1px solid rgba(61, 153, 112, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #3D9970;
}

.dark .akcontrib-card-header-icon {
  background: rgba(61, 153, 112, 0.15);
  border-color: rgba(61, 153, 112, 0.3);
}

.akcontrib-card-header-icon svg {
  width: 20px;
  height: 20px;
}

.akcontrib-card-header-text {
  flex: 1;
  min-width: 0;
}

.akcontrib-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
  line-height: 1.3;
  margin: 0;
}

.dark .akcontrib-card-title {
  color: rgb(243, 244, 246);
}

.akcontrib-card-subtitle {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  line-height: 1.4;
}

.dark .akcontrib-card-subtitle {
  color: rgb(156, 163, 175);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

.akcontrib-form {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.akcontrib-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.akcontrib-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
}

.dark .akcontrib-label {
  color: rgb(209, 213, 219);
}

.akcontrib-input {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(17, 24, 39);
  background: #ffffff;
  border: 1px solid rgba(61, 153, 112, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.akcontrib-input:focus {
  outline: none;
  border-color: #3D9970;
  box-shadow: 0 0 0 3px rgba(61, 153, 112, 0.1);
}

.dark .akcontrib-input {
  background: rgba(2, 61, 38, 0.3);
  border-color: rgba(61, 153, 112, 0.3);
  color: rgb(243, 244, 246);
}

.dark .akcontrib-input:focus {
  border-color: #f1c40f;
  box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.1);
}

.akcontrib-input--mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

.akcontrib-select {
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(17, 24, 39);
  background: #ffffff;
  border: 1px solid rgba(61, 153, 112, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%233D9970'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  cursor: pointer;
}

.akcontrib-select:focus {
  outline: none;
  border-color: #3D9970;
  box-shadow: 0 0 0 3px rgba(61, 153, 112, 0.1);
}

/* Select options styling - Light mode */
.akcontrib-select option {
  background: #ffffff !important;
  color: rgb(17, 24, 39) !important;
  padding: 0.5rem;
}

.akcontrib-select option:hover,
.akcontrib-select option:focus,
.akcontrib-select option:checked {
  background: rgba(61, 153, 112, 0.15) !important;
  color: rgb(17, 24, 39) !important;
}

.dark .akcontrib-select {
  background-color: rgba(2, 61, 38, 0.3) !important;
  border-color: rgba(61, 153, 112, 0.3) !important;
  color: rgb(243, 244, 246) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f1c40f'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

.dark .akcontrib-select:focus {
  border-color: #f1c40f !important;
  box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.1) !important;
}

/* Dark mode dropdown options - Force with !important */
.dark .akcontrib-select option {
  background: rgba(3, 31, 20, 0.98) !important;
  background-color: rgba(3, 31, 20, 0.98) !important;
  color: rgb(243, 244, 246) !important;
}

.dark .akcontrib-select option:hover,
.dark .akcontrib-select option:focus,
.dark .akcontrib-select option:checked {
  background: rgba(61, 153, 112, 0.4) !important;
  background-color: rgba(61, 153, 112, 0.4) !important;
  color: rgb(243, 244, 246) !important;
}

.akcontrib-error {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(220, 38, 38);
  margin-top: 0.25rem;
}

.dark .akcontrib-error {
  color: rgb(248, 113, 113);
}

.akcontrib-filter-form {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ========================================
   BUTTONS
   ======================================== */

.akcontrib-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.akcontrib-btn--primary {
  background: #3D9970;
  color: #ffffff;
  border-color: #3D9970;
}

.akcontrib-btn--primary:hover {
  background: #2d7456;
  border-color: #2d7456;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(61, 153, 112, 0.2);
}

.dark .akcontrib-btn--primary {
  background: #f1c40f;
  color: rgb(17, 24, 39);
  border-color: #f1c40f;
}

.dark .akcontrib-btn--primary:hover {
  background: #f4d03f;
  border-color: #f4d03f;
}

.akcontrib-btn--secondary {
  background: rgba(61, 153, 112, 0.1);
  color: #3D9970;
  border-color: rgba(61, 153, 112, 0.2);
}

.akcontrib-btn--secondary:hover {
  background: rgba(61, 153, 112, 0.15);
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akcontrib-btn--secondary {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.2);
}

.dark .akcontrib-btn--secondary:hover {
  background: rgba(241, 196, 15, 0.15);
  border-color: rgba(241, 196, 15, 0.3);
}

.akcontrib-btn--full {
  width: 100%;
}

/* ========================================
   WALLET LIST
   ======================================== */

.akcontrib-wallet-list {
  padding: 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.akcontrib-wallet-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(61, 153, 112, 0.03);
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.dark .akcontrib-wallet-item {
  background: rgba(2, 61, 38, 0.25);
  border-color: rgba(61, 153, 112, 0.25);
}

.akcontrib-wallet-item--active {
  background: rgba(61, 153, 112, 0.08);
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akcontrib-wallet-item--active {
  background: rgba(2, 61, 38, 0.4);
  border-color: rgba(61, 153, 112, 0.35);
}

.akcontrib-wallet-item:hover {
  background: rgba(61, 153, 112, 0.06);
  border-color: rgba(61, 153, 112, 0.25);
}

.dark .akcontrib-wallet-item:hover {
  background: rgba(2, 61, 38, 0.35);
  border-color: rgba(61, 153, 112, 0.3);
}

.akcontrib-wallet-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.akcontrib-wallet-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.akcontrib-wallet-item-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(107, 114, 128);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .akcontrib-wallet-item-label {
  color: rgb(156, 163, 175);
}

.akcontrib-wallet-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: rgba(61, 153, 112, 0.15);
  color: #2d7456;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .akcontrib-wallet-badge {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
}

.akcontrib-wallet-item-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
  margin-top: 0.375rem;
}

.dark .akcontrib-wallet-item-value {
  color: rgb(243, 244, 246);
}

.akcontrib-wallet-item-address {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(55, 65, 81);
  margin-top: 0.375rem;
  word-break: break-all;
}

.dark .akcontrib-wallet-item-address {
  color: rgb(209, 213, 219);
}

.akcontrib-wallet-item-remove {
  margin: 0;
}

.akcontrib-btn-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  width: 100%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(220, 38, 38);
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.akcontrib-btn-remove:hover {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.3);
}

.dark .akcontrib-btn-remove {
  color: rgb(248, 113, 113);
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.2);
}

.dark .akcontrib-btn-remove:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
}

.akcontrib-btn-remove svg {
  width: 16px;
  height: 16px;
}

/* ========================================
   EMPTY STATE
   ======================================== */

.akcontrib-empty {
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.akcontrib-empty-icon {
  width: 56px;
  height: 56px;
  color: rgb(209, 213, 219);
  margin-bottom: 1rem;
}

.dark .akcontrib-empty-icon {
  color: rgb(75, 85, 99);
}

.akcontrib-empty-icon svg {
  width: 100%;
  height: 100%;
}

.akcontrib-empty-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
  margin-bottom: 0.5rem;
}

.dark .akcontrib-empty-title {
  color: rgb(243, 244, 246);
}

.akcontrib-empty-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  max-width: 36ch;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.dark .akcontrib-empty-text {
  color: rgb(156, 163, 175);
}

.akcontrib-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ========================================
   ENTRIES LIST
   ======================================== */

.akcontrib-entries {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.akcontrib-entry {
  padding: 1.125rem;
  background: rgba(61, 153, 112, 0.03);
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.dark .akcontrib-entry {
  background: rgba(2, 61, 38, 0.25);
  border-color: rgba(61, 153, 112, 0.25);
}

.akcontrib-entry:hover {
  background: rgba(61, 153, 112, 0.05);
  border-color: rgba(61, 153, 112, 0.2);
}

.dark .akcontrib-entry:hover {
  background: rgba(2, 61, 38, 0.35);
  border-color: rgba(61, 153, 112, 0.3);
}

.akcontrib-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(61, 153, 112, 0.1);
}

.dark .akcontrib-entry-header {
  border-bottom-color: rgba(61, 153, 112, 0.2);
}

.akcontrib-entry-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.akcontrib-entry-circle {
  font-size: 1rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark .akcontrib-entry-circle {
  color: rgb(243, 244, 246);
}

.akcontrib-entry-status {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.akcontrib-entry-status--confirmed {
  background: rgba(61, 153, 112, 0.15);
  color: #2d7456;
}

.dark .akcontrib-entry-status--confirmed {
  background: rgba(61, 153, 112, 0.2);
  color: #3D9970;
}

.akcontrib-entry-status--pending {
  background: rgba(241, 196, 15, 0.15);
  color: #c29d0b;
}

.dark .akcontrib-entry-status--pending {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
}

.akcontrib-entry-status--invalid,
.akcontrib-entry-status--muted {
  background: rgba(107, 114, 128, 0.1);
  color: rgb(75, 85, 99);
}

.dark .akcontrib-entry-status--invalid,
.dark .akcontrib-entry-status--muted {
  background: rgba(107, 114, 128, 0.15);
  color: rgb(156, 163, 175);
}

.akcontrib-entry-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
  white-space: nowrap;
}

.dark .akcontrib-entry-amount {
  color: rgb(243, 244, 246);
}

.akcontrib-entry-unit {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(107, 114, 128);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.25rem;
}

.dark .akcontrib-entry-unit {
  color: rgb(156, 163, 175);
}

.akcontrib-entry-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.akcontrib-entry-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0.75rem;
  align-items: start;
}

@media (min-width: 640px) {
  .akcontrib-entry-row {
    grid-template-columns: 100px 1fr;
  }
}

.akcontrib-entry-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(107, 114, 128);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .akcontrib-entry-label {
  color: rgb(156, 163, 175);
}

.akcontrib-entry-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(55, 65, 81);
  word-break: break-word;
}

.dark .akcontrib-entry-value {
  color: rgb(209, 213, 219);
}

.akcontrib-entry-value--mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.8125rem;
}

.akcontrib-entry-txid {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.akcontrib-entry-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #3D9970;
  text-decoration: none;
  transition: color 0.2s ease;
}

.akcontrib-entry-link:hover {
  color: #2d7456;
}

.dark .akcontrib-entry-link {
  color: #f1c40f;
}

.dark .akcontrib-entry-link:hover {
  color: #f4d03f;
}

.akcontrib-entry-link-icon {
  width: 14px;
  height: 14px;
}

.akcontrib-entry-txid-text {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(55, 65, 81);
}

.dark .akcontrib-entry-txid-text {
  color: rgb(209, 213, 219);
}

.akcontrib-entry-copy {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(61, 153, 112, 0.2);
  background: transparent;
  border-radius: 6px;
  color: rgb(107, 114, 128);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.akcontrib-entry-copy:hover {
  background: rgba(61, 153, 112, 0.1);
  color: #3D9970;
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akcontrib-entry-copy {
  border-color: rgba(61, 153, 112, 0.25);
  color: rgb(156, 163, 175);
}

.dark .akcontrib-entry-copy:hover {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.3);
}

.akcontrib-entry-copy.is-copied {
  background: rgba(61, 153, 112, 0.15);
  color: #3D9970;
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akcontrib-entry-copy.is-copied {
  background: rgba(241, 196, 15, 0.15);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.3);
}

.akcontrib-entry-copy svg {
  width: 14px;
  height: 14px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 640px) {
  .akcontrib-header {
    padding: 1.25rem;
  }

  .akcontrib-header-actions {
    flex-direction: column;
    width: 100%;
  }

  .akcontrib-btn--secondary {
    width: 100%;
  }

  .akcontrib-card-header {
    padding: 1rem;
  }

  .akcontrib-form {
    padding: 1rem;
  }

  .akcontrib-filter-form {
    padding: 1rem;
  }

  .akcontrib-wallet-list {
    padding: 0 1rem 1rem;
  }

  .akcontrib-entries {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .akcontrib-entry {
    padding: 1rem;
  }

  .akcontrib-entry-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .akcontrib-entry-amount {
    font-size: 1.125rem;
  }

  .akcontrib-entry-row {
    grid-template-columns: 70px 1fr;
    gap: 0.5rem;
  }
}

/* ========================================
   LOADING OVERLAY
   ======================================== */

.akcontrib-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 20, 17, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.dark .akcontrib-loader-overlay {
  background: rgba(3, 31, 20, 0.85);
}

.akcontrib-loader-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

.akcontrib-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid rgba(61, 153, 112, 0.2);
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dark .akcontrib-loader-content {
  background: rgba(2, 61, 38, 0.98);
  border-color: rgba(61, 153, 112, 0.3);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

.akcontrib-loader-overlay.is-visible .akcontrib-loader-content {
  transform: scale(1);
}

.akcontrib-loader-spinner {
  width: 48px;
  height: 48px;
  position: relative;
}

.akcontrib-loader-svg {
  width: 100%;
  height: 100%;
  animation: akcontrib-rotate 1.4s linear infinite;
}

.akcontrib-loader-svg circle {
  stroke: #3D9970;
  stroke-linecap: round;
  animation: akcontrib-dash 1.4s ease-in-out infinite;
}

.dark .akcontrib-loader-svg circle {
  stroke: #f1c40f;
}

@keyframes akcontrib-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes akcontrib-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

.akcontrib-loader-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
  letter-spacing: 0.01em;
}

.dark .akcontrib-loader-text {
  color: rgb(243, 244, 246);
}

/* Loading state for elements */
.akcontrib-wallet-item.is-loading,
.akcontrib-entry.is-loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.akcontrib-wallet-item.is-loading::after,
.akcontrib-entry.is-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(61, 153, 112, 0.1), transparent);
  animation: akcontrib-shimmer 1.5s infinite;
}

.dark .akcontrib-wallet-item.is-loading::after,
.dark .akcontrib-entry.is-loading::after {
  background: linear-gradient(90deg, transparent, rgba(241, 196, 15, 0.1), transparent);
}

@keyframes akcontrib-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}


/* HISTORY PAGE - FILTERS ON TOP, TABLE BELOW */

.akhistory-page {
  min-height: 100vh;
}

/* HEADER */
.akhistory-header {
  background: #ffffff;
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.dark .akhistory-header {
  background: rgba(3, 31, 20, 0.4);
  border-color: rgba(61, 153, 112, 0.25);
}

.akhistory-header-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .akhistory-header-main {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.akhistory-header-text {
  flex: 1;
}

.akhistory-header-desc {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  margin: 0;
}

.dark .akhistory-header-desc {
  color: rgb(156, 163, 175);
}

.akhistory-header-window {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  margin: 0.5rem 0 0;
}

.dark .akhistory-header-window {
  color: rgb(156, 163, 175);
}

.akhistory-header-window-value {
  font-weight: 600;
  color: rgb(17, 24, 39);
}

.dark .akhistory-header-window-value {
  color: rgb(243, 244, 246);
}

.akhistory-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.akhistory-header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #3D9970;
  text-decoration: none;
  transition: color 0.2s ease;
}

.akhistory-header-link:hover {
  color: #2d7456;
}

.dark .akhistory-header-link {
  color: #f1c40f;
}

.dark .akhistory-header-link:hover {
  color: #f4d03f;
}

.akhistory-header-link-icon {
  width: 18px;
  height: 18px;
}

/* FILTERS WRAPPER */
.akhistory-filters-wrapper {
  margin-bottom: 1.5rem;
}

.akhistory-filters-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .akhistory-filters-grid {
    grid-template-columns: 400px 1fr;
  }
}

/* TABLE SECTION */
.akhistory-table-section {
  width: 100%;
}

/* CARD */
.akhistory-card {
  background: #ffffff;
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 12px;
  overflow: hidden;
}

.dark .akhistory-card {
  background: rgba(3, 31, 20, 0.4);
  border-color: rgba(61, 153, 112, 0.25);
}

.akhistory-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.25rem;
  border-bottom: 1px solid rgba(61, 153, 112, 0.1);
}

.dark .akhistory-card-header {
  border-bottom-color: rgba(61, 153, 112, 0.2);
}

.akhistory-card-header--clickable {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.akhistory-card-header--clickable:hover {
  background: rgba(61, 153, 112, 0.03);
}

.dark .akhistory-card-header--clickable:hover {
  background: rgba(2, 61, 38, 0.2);
}

.akhistory-card-header-text-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 1rem;
}

.akhistory-card-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(61, 153, 112, 0.1);
  border: 1px solid rgba(61, 153, 112, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #3D9970;
}

.dark .akhistory-card-header-icon {
  background: rgba(61, 153, 112, 0.15);
  border-color: rgba(61, 153, 112, 0.3);
}

.akhistory-card-header-icon svg {
  width: 20px;
  height: 20px;
}

.akhistory-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
  margin: 0;
}

.dark .akhistory-card-title {
  color: rgb(243, 244, 246);
}

.akhistory-card-subtitle {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
}

.dark .akhistory-card-subtitle {
  color: rgb(156, 163, 175);
}

/* COLLAPSIBLE */
.akhistory-collapse-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgb(107, 114, 128);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.akhistory-collapse-btn:hover {
  background: rgba(61, 153, 112, 0.1);
  color: #3D9970;
}

.dark .akhistory-collapse-btn {
  color: rgb(156, 163, 175);
}

.dark .akhistory-collapse-btn:hover {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
}

.akhistory-collapse-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.akhistory-collapsible-content {
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  max-height: 2000px;
  opacity: 1;
}

.akhistory-collapsible-content.is-collapsed {
  max-height: 0;
  opacity: 0;
}

/* FORM */
.akhistory-filter-form {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.akhistory-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.akhistory-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
}

.dark .akhistory-label {
  color: rgb(209, 213, 219);
}

.akhistory-input {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(17, 24, 39) !important;
  background: #ffffff !important;
  border: 1px solid rgba(61, 153, 112, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.akhistory-input::placeholder {
  color: rgb(156, 163, 175) !important;
  opacity: 0.7;
}

.akhistory-input:focus {
  outline: none;
  border-color: #3D9970;
  box-shadow: 0 0 0 3px rgba(61, 153, 112, 0.1);
}

.dark .akhistory-input {
  background: rgba(2, 61, 38, 0.3) !important;
  background-color: rgba(2, 61, 38, 0.3) !important;
  border-color: rgba(61, 153, 112, 0.3) !important;
  color: rgb(243, 244, 246) !important;
}

.dark .akhistory-input::placeholder {
  color: rgb(156, 163, 175) !important;
  opacity: 0.6;
}

.dark .akhistory-input:focus {
  border-color: #f1c40f !important;
  box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.1);
}

.akhistory-date-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.akhistory-date-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.akhistory-date-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(107, 114, 128);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .akhistory-date-label {
  color: rgb(156, 163, 175);
}

.akhistory-help-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  margin-top: 0.375rem;
}

.dark .akhistory-help-text {
  color: rgb(156, 163, 175);
}

.akhistory-checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(61, 153, 112, 0.03);
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dark .akhistory-checkbox-group {
  background: rgba(2, 61, 38, 0.25);
  border-color: rgba(61, 153, 112, 0.25);
}

.akhistory-checkbox-group:hover {
  background: rgba(61, 153, 112, 0.06);
  border-color: rgba(61, 153, 112, 0.25);
}

.dark .akhistory-checkbox-group:hover {
  background: rgba(2, 61, 38, 0.35);
  border-color: rgba(61, 153, 112, 0.3);
}

.akhistory-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(61, 153, 112, 0.3);
  border-radius: 4px;
  background: #ffffff !important;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
}

.dark .akhistory-checkbox {
  background: rgba(2, 61, 38, 0.3) !important;
  background-color: rgba(2, 61, 38, 0.3) !important;
  border-color: rgba(61, 153, 112, 0.4) !important;
}

.akhistory-checkbox:checked {
  background: #3D9970 !important;
  background-color: #3D9970 !important;
  border-color: #3D9970 !important;
}

.dark .akhistory-checkbox:checked {
  background: #f1c40f !important;
  background-color: #f1c40f !important;
  border-color: #f1c40f !important;
}

.akhistory-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dark .akhistory-checkbox:checked::after {
  border-color: rgb(17, 24, 39) !important;
}

.akhistory-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
  cursor: pointer;
  flex: 1;
}

.dark .akhistory-checkbox-label {
  color: rgb(243, 244, 246);
}

.akhistory-checkbox-icon {
  width: 16px;
  height: 16px;
  color: #c29d0b;
}

.dark .akhistory-checkbox-icon {
  color: #f1c40f;
}

/* BUTTONS */
.akhistory-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.akhistory-btn--primary {
  background: #3D9970;
  color: #ffffff;
  border-color: #3D9970;
}

.akhistory-btn--primary:hover {
  background: #2d7456;
  border-color: #2d7456;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(61, 153, 112, 0.2);
}

.dark .akhistory-btn--primary {
  background: #f1c40f;
  color: rgb(17, 24, 39);
  border-color: #f1c40f;
}

.dark .akhistory-btn--primary:hover {
  background: #f4d03f;
  border-color: #f4d03f;
}

.akhistory-btn--secondary {
  background: rgba(61, 153, 112, 0.1);
  color: #3D9970;
  border-color: rgba(61, 153, 112, 0.2);
}

.akhistory-btn--secondary:hover {
  background: rgba(61, 153, 112, 0.15);
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akhistory-btn--secondary {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.2);
}

.dark .akhistory-btn--secondary:hover {
  background: rgba(241, 196, 15, 0.15);
  border-color: rgba(241, 196, 15, 0.3);
}

.akhistory-btn--full {
  width: 100%;
}

/* ADD WALLET FORM */
.akhistory-add-wallet-form {
  padding: 1.25rem;
  border-bottom: 1px solid rgba(61, 153, 112, 0.1);
}

.dark .akhistory-add-wallet-form {
  border-bottom-color: rgba(61, 153, 112, 0.2);
}

.akhistory-add-wallet-group {
  display: flex;
  gap: 0.5rem;
}

.akhistory-add-wallet-group .akhistory-input {
  flex: 1;
}

.akhistory-input--mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.8125rem;
}

.akhistory-btn--add {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.akhistory-btn--add svg {
  width: 16px;
  height: 16px;
}

.akhistory-form-error {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(220, 38, 38);
  margin-top: 0.5rem;
}

.dark .akhistory-form-error {
  color: rgb(248, 113, 113);
}

/* WALLET LIST */
.akhistory-wallet-list {
  padding: 0.8rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 400px;
  overflow-y: auto;
}

/* Custom scrollbar */
.akhistory-wallet-list::-webkit-scrollbar {
  width: 6px;
}

.akhistory-wallet-list::-webkit-scrollbar-track {
  background: rgba(61, 153, 112, 0.05);
  border-radius: 3px;
}

.akhistory-wallet-list::-webkit-scrollbar-thumb {
  background: rgba(61, 153, 112, 0.2);
  border-radius: 3px;
}

.akhistory-wallet-list::-webkit-scrollbar-thumb:hover {
  background: rgba(61, 153, 112, 0.3);
}

.dark .akhistory-wallet-list::-webkit-scrollbar-track {
  background: rgba(2, 61, 38, 0.3);
}

.dark .akhistory-wallet-list::-webkit-scrollbar-thumb {
  background: rgba(61, 153, 112, 0.3);
}

.dark .akhistory-wallet-list::-webkit-scrollbar-thumb:hover {
  background: rgba(61, 153, 112, 0.4);
}

.akhistory-wallet-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(61, 153, 112, 0.03);
  border: 1px solid rgba(61, 153, 112, 0.15);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.dark .akhistory-wallet-item {
  background: rgba(2, 61, 38, 0.25);
  border-color: rgba(61, 153, 112, 0.25);
}

.akhistory-wallet-item--active {
  background: rgba(61, 153, 112, 0.08);
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akhistory-wallet-item--active {
  background: rgba(2, 61, 38, 0.4);
  border-color: rgba(61, 153, 112, 0.35);
}

.akhistory-wallet-item:hover {
  background: rgba(61, 153, 112, 0.06);
  border-color: rgba(61, 153, 112, 0.25);
}

.dark .akhistory-wallet-item:hover {
  background: rgba(2, 61, 38, 0.35);
  border-color: rgba(61, 153, 112, 0.3);
}

.akhistory-wallet-content {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.akhistory-wallet-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.akhistory-wallet-item-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(107, 114, 128);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .akhistory-wallet-item-label {
  color: rgb(156, 163, 175);
}

.akhistory-wallet-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: rgba(61, 153, 112, 0.15);
  color: #2d7456;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .akhistory-wallet-badge {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
}

.akhistory-wallet-item-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
}

.dark .akhistory-wallet-item-value {
  color: rgb(243, 244, 246);
}

.akhistory-wallet-item-address {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(55, 65, 81);
  word-break: break-all;
}

.dark .akhistory-wallet-item-address {
  color: rgb(209, 213, 219);
}

.akhistory-wallet-remove-form {
  margin: 0;
}

.akhistory-wallet-remove-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(220, 38, 38, 0.2);
  background: transparent;
  border-radius: 6px;
  color: rgb(220, 38, 38);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.akhistory-wallet-remove-btn:hover {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.3);
}

.dark .akhistory-wallet-remove-btn {
  color: rgb(248, 113, 113);
  border-color: rgba(248, 113, 113, 0.2);
}

.dark .akhistory-wallet-remove-btn:hover {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.3);
}

.akhistory-wallet-remove-btn svg {
  width: 16px;
  height: 16px;
}

/* EMPTY STATE */
.akhistory-empty {
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.akhistory-empty-icon {
  width: 56px;
  height: 56px;
  color: rgb(209, 213, 219);
  margin-bottom: 1rem;
}

.dark .akhistory-empty-icon {
  color: rgb(75, 85, 99);
}

.akhistory-empty-icon svg {
  width: 100%;
  height: 100%;
}

.akhistory-empty-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
  margin-bottom: 0.5rem;
}

.dark .akhistory-empty-title {
  color: rgb(243, 244, 246);
}

.akhistory-empty-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(107, 114, 128);
  max-width: 36ch;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.dark .akhistory-empty-text {
  color: rgb(156, 163, 175);
}

.akhistory-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* TABLE */
.akhistory-table-container {
  padding: 1rem 0;
}

.akhistory-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(61, 153, 112, 0.1);
}

.dark .akhistory-table-wrapper {
  border-color: rgba(61, 153, 112, 0.2);
}

.akhistory-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.akhistory-table thead {
  background: rgba(61, 153, 112, 0.05);
  border-bottom: 2px solid rgba(61, 153, 112, 0.15);
}

.dark .akhistory-table thead {
  background: rgba(2, 61, 38, 0.3);
  border-bottom-color: rgba(61, 153, 112, 0.25);
}

.akhistory-table th {
  padding: 0.875rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(55, 65, 81);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.dark .akhistory-table th {
  color: rgb(209, 213, 219);
}

.akhistory-table tbody tr {
  border-bottom: 1px solid rgba(61, 153, 112, 0.08);
  transition: background-color 0.15s ease;
}

.dark .akhistory-table tbody tr {
  border-bottom-color: rgba(61, 153, 112, 0.15);
}

.akhistory-table tbody tr:hover {
  background: rgba(61, 153, 112, 0.03);
}

.dark .akhistory-table tbody tr:hover {
  background: rgba(2, 61, 38, 0.2);
}

.akhistory-table tbody tr:last-child {
  border-bottom: none;
}

.akhistory-row--winner {
  background: rgba(241, 196, 15, 0.06);
}

.dark .akhistory-row--winner {
  background: rgba(241, 196, 15, 0.08);
}

.akhistory-row--winner:hover {
  background: rgba(241, 196, 15, 0.1);
}

.dark .akhistory-row--winner:hover {
  background: rgba(241, 196, 15, 0.12);
}

.akhistory-table td {
  padding: 1rem;
  color: rgb(55, 65, 81);
  vertical-align: middle;
}

.dark .akhistory-table td {
  color: rgb(209, 213, 219);
}

.akhistory-status {
  display: inline-flex;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.akhistory-status--confirmed {
  background: rgba(61, 153, 112, 0.15);
  color: #2d7456;
}

.dark .akhistory-status--confirmed {
  background: rgba(61, 153, 112, 0.2);
  color: #3D9970;
}

.akhistory-status--pending {
  background: rgba(241, 196, 15, 0.15);
  color: #c29d0b;
}

.dark .akhistory-status--pending {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
}

.akhistory-status--invalid,
.akhistory-status--muted {
  background: rgba(107, 114, 128, 0.1);
  color: rgb(75, 85, 99);
}

.dark .akhistory-status--invalid,
.dark .akhistory-status--muted {
  background: rgba(107, 114, 128, 0.15);
  color: rgb(156, 163, 175);
}

.akhistory-td-amount {
  white-space: nowrap;
}

.akhistory-amount {
  font-size: 0.9375rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
}

.dark .akhistory-amount {
  color: rgb(243, 244, 246);
}

.akhistory-currency {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(107, 114, 128);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .akhistory-currency {
  color: rgb(156, 163, 175);
}

.akhistory-won-amount {
  font-size: 0.875rem;
  font-weight: 700;
  color: #c29d0b;
  margin-top: 0.25rem;
}

.dark .akhistory-won-amount {
  color: #f1c40f;
}

.akhistory-winner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  background: rgba(241, 196, 15, 0.15);
  color: #c29d0b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.dark .akhistory-winner-badge {
  background: rgba(241, 196, 15, 0.2);
  color: #f1c40f;
}

.akhistory-winner-badge svg {
  width: 12px;
  height: 12px;
}

.akhistory-dash {
  color: rgb(209, 213, 219);
}

.dark .akhistory-dash {
  color: rgb(75, 85, 99);
}

.akhistory-td-address {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.8125rem;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.akhistory-td-txid {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.8125rem;
}

.akhistory-txid-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.akhistory-txid-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  color: #3D9970;
  text-decoration: none;
  transition: color 0.2s ease;
}

.akhistory-txid-link:hover {
  color: #2d7456;
}

.dark .akhistory-txid-link {
  color: #f1c40f;
}

.dark .akhistory-txid-link:hover {
  color: #f4d03f;
}

.akhistory-txid-icon {
  width: 12px;
  height: 12px;
}

.akhistory-txid-text {
  color: rgb(107, 114, 128);
}

.dark .akhistory-txid-text {
  color: rgb(156, 163, 175);
}

.akhistory-copy-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(61, 153, 112, 0.2);
  background: transparent;
  border-radius: 4px;
  color: rgb(107, 114, 128);
  cursor: pointer;
  transition: all 0.2s ease;
}

.akhistory-copy-btn:hover {
  background: rgba(61, 153, 112, 0.1);
  color: #3D9970;
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akhistory-copy-btn {
  border-color: rgba(61, 153, 112, 0.25);
  color: rgb(156, 163, 175);
}

.dark .akhistory-copy-btn:hover {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.3);
}

.akhistory-copy-btn.is-copied {
  background: rgba(61, 153, 112, 0.15);
  color: #3D9970;
  border-color: rgba(61, 153, 112, 0.3);
}

.dark .akhistory-copy-btn.is-copied {
  background: rgba(241, 196, 15, 0.15);
  color: #f1c40f;
  border-color: rgba(241, 196, 15, 0.3);
}

.akhistory-copy-btn svg {
  width: 12px;
  height: 12px;
}

/* PAGINATION */
.akhistory-pagination {
  padding: 1.25rem;
  border-top: 1px solid rgba(61, 153, 112, 0.1);
}

.dark .akhistory-pagination {
  border-top-color: rgba(61, 153, 112, 0.2);
}

/* MOBILE TABLE */
@media (max-width: 1024px) {
  .akhistory-table-wrapper {
    border: none;
  }
  
  .akhistory-table,
  .akhistory-table thead,
  .akhistory-table tbody,
  .akhistory-table tr,
  .akhistory-table th,
  .akhistory-table td {
    display: block;
  }
  
  .akhistory-table thead {
    display: none;
  }
  
  .akhistory-table tbody tr {
    background: rgba(61, 153, 112, 0.03);
    border: 1px solid rgba(61, 153, 112, 0.15);
    border-radius: 10px;
    margin-bottom: 1rem;
    padding: 1rem;
  }
  
  .dark .akhistory-table tbody tr {
    background: rgba(2, 61, 38, 0.25);
    border-color: rgba(61, 153, 112, 0.25);
  }
  
  .akhistory-row--winner {
    background: rgba(241, 196, 15, 0.08);
    border-color: rgba(241, 196, 15, 0.3);
    border-width: 2px;
  }
  
  .dark .akhistory-row--winner {
    background: rgba(241, 196, 15, 0.12);
    border-color: rgba(241, 196, 15, 0.35);
  }
  
  .akhistory-table td {
    padding: 0.5rem 0;
    border: none;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0.75rem;
    align-items: start;
  }
  
  .akhistory-table td::before {
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(107, 114, 128);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .dark .akhistory-table td::before {
    color: rgb(156, 163, 175);
  }
  
  .akhistory-td-address,
  .akhistory-td-txid {
    max-width: none;
    overflow: visible;
    word-break: break-all;
  }
}

/* LOADER */
.akhistory-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 20, 17, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.dark .akhistory-loader-overlay {
  background: rgba(3, 31, 20, 0.85);
}

.akhistory-loader-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

.akhistory-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.98);
  border: 2px solid rgba(61, 153, 112, 0.2);
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dark .akhistory-loader-content {
  background: rgba(2, 61, 38, 0.98);
  border-color: rgba(61, 153, 112, 0.3);
}

.akhistory-loader-overlay.is-visible .akhistory-loader-content {
  transform: scale(1);
}

.akhistory-loader-spinner {
  width: 48px;
  height: 48px;
}

.akhistory-loader-svg {
  width: 100%;
  height: 100%;
  animation: rotate 1.4s linear infinite;
}

.akhistory-loader-svg circle {
  stroke: #3D9970;
  stroke-linecap: round;
  animation: dash 1.4s ease-in-out infinite;
}

.dark .akhistory-loader-svg circle {
  stroke: #f1c40f;
}

@keyframes rotate {
  100% { transform: rotate(360deg); }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

.akhistory-loader-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgb(17, 24, 39);
}

.dark .akhistory-loader-text {
  color: rgb(243, 244, 246);
}




/* DASHBOARD TOP SECTION - REFINED */
.akdash-top {
margin-bottom: 4px !important;	
}
	
.akdash-week-k {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(107, 114, 128);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dark .akdash-week-k {
  color: rgb(156, 163, 175);
}

.akdash-week-line {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .akdash-week-line {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}

.akdash-week-v {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
  line-height: 1.2;
  white-space: nowrap;
}

.dark .akdash-week-v {
  color: rgb(243, 244, 246);
}

@media (min-width: 768px) {
  .akdash-week-v {
    font-size: 1.1rem;
  }
}

.akdash-arrow {
  color: rgb(107, 114, 128);
  margin: 0 0.25rem;
}

.dark .akdash-arrow {
  color: rgb(156, 163, 175);
}

/* Status pill */
.akdash-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(61, 153, 112, 0.1);
  border: 1px solid rgba(61, 153, 112, 0.2);
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s ease;
  margin-top:-2px;
}

.dark .akdash-status {
  background: rgba(2, 61, 38, 0.3);
  border-color: rgba(61, 153, 112, 0.3);
}

.akdash-status.is-open {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

.dark .akdash-status.is-open {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.35);
}

.akdash-status.is-closed {
  background: rgba(107, 114, 128, 0.1);
  border-color: rgba(107, 114, 128, 0.2);
}

.dark .akdash-status.is-closed {
  background: rgba(107, 114, 128, 0.15);
  border-color: rgba(107, 114, 128, 0.25);
}

.akdash-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.akdash-dot--green {
  background: rgb(34, 197, 94);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.akdash-dot--muted {
  background: rgb(156, 163, 175);
}

.akdash-dot--red {
  background: rgb(239, 68, 68);
}

.akdash-status-text {
  color: rgb(55, 65, 81);
}

.dark .akdash-status-text {
  color: rgb(209, 213, 219);
}

.akdash-status-strong {
  font-weight: 700;
  color: rgb(17, 24, 39);
  font-variant-numeric: tabular-nums;
}

.dark .akdash-status-strong {
  color: rgb(243, 244, 246);
}

/* Hello section */
.akdash-hello {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

@media (min-width: 768px) {
  .akdash-hello {
    align-items: flex-end;
    text-align: right;
  }
}

.akdash-hello-v {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
}

.dark .akdash-hello-v {
  color: rgb(243, 244, 246);
}

.akdash-hello-link {
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
  margin-top: -9px !important;
}

.akdash-hello-link:hover {
  opacity: 0.8;
}

.ak-link-colour {
  color: #3D9970;
}

.dark .ak-link-colour {
  color: #f1c40f;
}

/* Mobile refinements */
@media (max-width: 639px) {
  .akdash-week-v {
    font-size: 1.25rem;
	
	
  }
  
  .akdash-status {
    align-self: flex-start;
    font-size: 0.75rem;
    padding: 0.4375rem 0.875rem;
  }
}

/* Tablet refinements */
@media (min-width: 640px) and (max-width: 767px) {
  .akdash-top {
    gap: 1.5rem;
  }
  
  .akdash-week-v {
    font-size: 1.5rem;
  }
}

/* Desktop polish */
@media (min-width: 1024px) {
  .akdash-top {
    margin-bottom: 2rem;
  }
  
  .akdash-week-v {
    font-size: 1.4rem;
	margin-top:-10px !important;
  }
}


.akwin-ring {

  border-radius: 50%;
  background: none !important;
  border: none !important;
}


/* Force entry cards to stay within bounds on mobile */
@media (max-width: 640px) {
  .akdash-entry {
    flex-direction: column !important;
	max-width: 100% !important;
    align-items: flex-start !important;
  }

  .akdash-entry-actions {
    width: 100% !important;
    overflow: hidden !important;
  }

  .akdash-entry-link,
  .akdash-entry-link .akdash-mono {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .akdash-card--main {
  padding: 0px !important;
}
  
}

/* Ensure mono text never causes overflow anywhere */
.akdash-mono {
  word-break: break-all !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 640px) {
  .akdash-mono {
    max-width: 100% !important;
    display: inline-block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Prevent horizontal scroll on mobile - target all potential culprits */
@media (max-width: 640px) {
  /* Ensure the grid doesn't cause overflow */
  .akdash-grid {
    display: block !important;
    width: 100% !important;
  }

  /* Ensure cards don't overflow */
  .akdash-card,
  .akdash-card--main {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Fix the entries container */
  .akdash-entries {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem !important;
  }

  /* Fix individual entry cards */
  .akdash-entry {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Fix the main content area */
  .akdash-entry-main {
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 !important;
  }

  /* Fix the actions area */
  .akdash-entry-actions {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Fix links and mono text */
  .akdash-entry-link {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .akdash-mono {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Center circle cards grid when not full */
#circles .grid.sm\:grid-cols-2.xl\:grid-cols-4 {
  justify-items: center !important;
}

/* Alternative approach - center the entire grid */
@media (min-width: 1280px) {
  #circles .grid.xl\:grid-cols-4 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  #circles .grid.xl\:grid-cols-4 > * {
    width: calc(25% - 1.125rem) !important;
    max-width: 350px !important;
  }
}

@media (min-width: 640px) and (max-width: 1279px) {
  #circles .grid.sm\:grid-cols-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  #circles .grid.sm\:grid-cols-2 > * {
    width: calc(50% - 0.75rem) !important;
    max-width: 400px !important;
  }
}

.ak-legal-sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(61, 153, 112, 0.3) transparent;
}

.ak-legal-sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.ak-legal-sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.ak-legal-sidebar-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(61, 153, 112, 0.3);
  border-radius: 3px;
}

.ak-legal-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(61, 153, 112, 0.5);
}

/* Dark mode */
.dark .ak-legal-sidebar-scroll {
  scrollbar-color: rgba(241, 196, 15, 0.3) transparent;
}

.dark .ak-legal-sidebar-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(241, 196, 15, 0.3);
}

.dark .ak-legal-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(241, 196, 15, 0.5);
}

.ak-hash-wrap {
  word-break: break-all;      /* Break long strings */
  overflow-wrap: break-word;  /* Wrap at any point if needed */
  display: inline-block;
  max-width: 100%;            /* Never exceed container */
}

@media (max-width: 640px) {
  .ak-hash-wrap {
    font-size: 0.75rem;       /* Slightly smaller on mobile */
  }
}

/* ===================================
   Back to Dashboard Button Styles
   =================================== */

/* Light mode - keep as is (white with gray border) */
.back-to-dashboard-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    transition: all 0.15s ease;
}

.back-to-dashboard-btn:hover {
    background-color: #f9fafb;
}

.back-to-dashboard-btn:focus {
    outline: none;
    ring: 2px;
    ring-offset: 2px;
    ring-color: #10b981;
}

.back-to-dashboard-btn svg {
    width: 1rem;
    height: 1rem;
}

/* Dark mode - emerald green with subtle border */
@media (prefers-color-scheme: dark) {
    .back-to-dashboard-btn {
        background-color: #065f46; /* dark emerald green */
        border-color: #10b981; /* emerald border */
        color: #d1fae5; /* light emerald text */
    }

    .back-to-dashboard-btn:hover {
        background-color: #047857; /* slightly lighter emerald on hover */
        border-color: #34d399; /* brighter border on hover */
    }

    .back-to-dashboard-btn:focus {
        ring-color: #10b981;
    }
}


/* ===================================
   Back to Dashboard Button Styles
   =================================== */

/* Light mode - white with gray border (not green!) */
.back-to-dashboard-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    transition: all 0.15s ease;
}

.back-to-dashboard-btn:hover {
    background-color: #f9fafb;
}

.back-to-dashboard-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #10b981;
}

.back-to-dashboard-btn svg {
    width: 1rem;
    height: 1rem;
}

/* Dark mode - emerald green with subtle border */
@media (prefers-color-scheme: dark) {
    .back-to-dashboard-btn {
        background-color: #065f46; /* dark emerald green */
        border-color: #10b981; /* emerald border */
        color: #d1fae5; /* light emerald text */
    }

    .back-to-dashboard-btn:hover {
        background-color: #047857; /* slightly lighter emerald on hover */
        border-color: #34d399; /* brighter border on hover */
    }

    .back-to-dashboard-btn:focus {
        box-shadow: 0 0 0 2px #065f46, 0 0 0 4px #10b981;
    }
}

/* ===================================
   Email Change Warning Box
   =================================== */

.email-warning {
    padding: 1rem;
    border-radius: 0.5rem;
    border-width: 2px;
    border-style: solid;
}

/* Light mode - visible amber/orange */
.email-warning {
    background-color: #fef3c7; /* amber-100 */
    border-color: #f59e0b; /* amber-500 */
}

.email-warning-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: #d97706; /* amber-600 */
}

.email-warning-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #78350f; /* amber-900 */
}

.email-warning-text {
    font-size: 0.875rem;
    color: #92400e; /* amber-800 */
}

.email-warning-list {
    list-style-type: disc;
    list-style-position: inside;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #b45309; /* amber-700 */
}

.email-warning-list li {
    margin-top: 0.25rem;
}

/* Dark mode - current beautiful styling */

   .dark .email-warning {
        background-color: rgba(69, 26, 3, 0.2); /* amber-950/20 */
        border-color: rgba(16, 185, 129, 0.4); /* amber-500/40 - keeping emerald tint */
    }

    .dark .email-warning-icon {
        color: #f59e0b; /* amber-500 */
    }

    .dark .email-warning-title {
        color: #fcd34d; /* amber-200 */
    }

    .dark .email-warning-text {
        color: #fcd34d; /* amber-300 */
    }

    .dark .email-warning-list {
        color: #fcd34d; /* amber-300 */
    }



.ak-profile-headin {
	color: rgb(35, 40, 36) !important;
}


/* ===================================
   PROFILE PAGE STYLES (with !important to override app defaults)
   =================================== */

/* Back to Dashboard Button - Light Mode: WHITE, Dark Mode: EMERALD */
.back-to-dashboard-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    background-color: white !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    transition: all 0.15s ease !important;
}

.back-to-dashboard-btn:hover {
    background-color: #f9fafb !important;
}

.back-to-dashboard-btn svg {
    width: 1rem !important;
    height: 1rem !important;
}

@media (prefers-color-scheme: dark) {
    .back-to-dashboard-btn {
        background-color: #065f46 !important;
        border-color: #10b981 !important;
        color: #d1fae5 !important;
    }

    .back-to-dashboard-btn:hover {
        background-color: #047857 !important;
        border-color: #34d399 !important;
    }
}

/* Email Warning Box */
.email-warning {
    padding: 1rem !important;
    border-radius: 0.5rem !important;
    border: 2px solid #f59e0b !important;
    background-color: #fef3c7 !important;
}
 .email-warning svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex-shrink: 0 !important;
    color: #d97706 !important;
}

 .email-warning-title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
    color: #78350f !important;
}

.email-warning-text {
    font-size: 0.875rem !important;
    color: #92400e !important;
}

.email-warning p {
    color: #92400e !important;
}

.email-warning-list {
    list-style-type: disc !important;
    list-style-position: inside !important;
    margin-top: 0.5rem !important;
    font-size: 0.75rem !important;
    color: #b45309 !important;
}

.email-warning-list li {
    margin-top: 0.25rem !important;
    color: #b45309 !important;
}


    .dark .email-warning {
        background-color: rgba(69, 26, 3, 0.2) !important;
        border-color: rgba(245, 158, 11, 0.4) !important;
    }

    .dark .email-warning svg {
        color: #f59e0b !important;
    }

    .dark .email-warning-title {
        color: #fcd34d !important;
    }

    .dark .email-warning-text {
        color: #fcd34d !important;
    }

    .dark .email-warning p {
        color: #fcd34d !important;
    }

    .dark .email-warning-list {
        color: #fcd34d !important;
    }

    .dark .email-warning-list li {
        color: #fcd34d !important;
    }