@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── Dark mode flash prevention ── */
html.dark-mode, html.dark-mode body, html.dark-mode .main-content { background-color:#0b0d1a!important; color:#c9d1d9!important; }
html.dark-mode .sidenav, html.dark-mode .sidenav.bg-white { background-color:#0e1120!important; }
html.dark-mode .navbar-top { background:#0e1120!important; }
html.dark-mode .card, html.dark-mode .card-body { background-color:#12152b!important; border-color:rgba(255,255,255,0.06)!important; }
html.dark-mode .card-header { background-color:#12152b!important; }
html.dark-mode .table th, html.dark-mode .table td { background-color:#12152b!important; color:#c9d1d9!important; border-color:rgba(255,255,255,0.05)!important; }
html.dark-mode .dropdown-menu { background-color:#141729!important; }
html.dark-mode .modal-content:not([class*="bg-gradient"]) { background-color:#12152b!important; }
html.dark-mode footer, html.dark-mode .footer { background-color:#0b0d1a!important; border:none!important; }
html.dark-mode .form-control { background-color:#0d1117!important; border-color:rgba(255,255,255,0.09)!important; color:#c9d1d9!important; }
html.dark-mode .btn-white, html.dark-mode .btn-neutral { background-color:#1a1f38!important; border-color:rgba(255,255,255,0.1)!important; color:#e6edf3!important; }


/* ═══════════════════════════════════════════════════════════════════════════
   angkor.css — Angkor Hosting custom styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dark Mode ────────────────────────────────────────────────────────────── */
/* ================================================
   Dashactyl Dark Mode — Polished v3
   ================================================ */

/* ── Base ───────────────────────────────────────── */
html.dark-mode {
  background-color: #0d0f1a !important;
  color: #c9d1d9 !important;
}

/* ── Sidebar ────────────────────────────────────── */
html.dark-mode .sidenav.bg-white {
  background: #13172a !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.4) !important;
}
html.dark-mode .sidenav .nav-link {
  color: #7d8590 !important;
  border-radius: 8px;
  margin: 1px 8px;
}
html.dark-mode .sidenav .nav-link:hover {
  color: #e6edf3 !important;
  background: rgba(255,255,255,0.07) !important;
}
html.dark-mode .sidenav .nav-link.active {
  color: #fff !important;
  background: rgba(94,114,228,0.25) !important;
}
html.dark-mode .sidenav .nav-link .nav-link-text { color: inherit !important; }
html.dark-mode .sidenav .navbar-brand { border-bottom: none !important; }
html.dark-mode .sidenav hr { border-color: rgba(255,255,255,0.06) !important; }
html.dark-mode .sidenav-toggler-line { background: rgba(255,255,255,0.4) !important; }

/* ── Top Navbar ─────────────────────────────────── */
html.dark-mode .navbar-top {
  background: linear-gradient(135deg, #13172a 0%, #1c2040 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.35) !important;
}

/* Coins badge */
html.dark-mode .navbar-top .btn.bg-gradient-primary,
html.dark-mode .navbar-top .bg-gradient-primary {
  background: rgba(94,114,228,0.2) !important;
  border: 1px solid rgba(94,114,228,0.4) !important;
  box-shadow: none !important;
}

/* ── Header (purple hero area) ───────────────────── */
html.dark-mode .header,
html.dark-mode .header.pb-6,
html.dark-mode .header.bg-gradient-primary {
  background: linear-gradient(135deg, #1a1f38 0%, #232848 100%) !important;
}

/* ── Main content ───────────────────────────────── */
html.dark-mode .main-content,
html.dark-mode .container-fluid {
  background: transparent !important;
}

/* ── Cards ──────────────────────────────────────── */
html.dark-mode .card {
  background: #13172a !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}
html.dark-mode .card-header {
  background: #1a1f38 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
html.dark-mode .card h3,
html.dark-mode .card h4,
html.dark-mode .card h5,
html.dark-mode .card .mb-0,
html.dark-mode .card .h3,
html.dark-mode .card .h2,
html.dark-mode .card strong { color: #e6edf3 !important; }
html.dark-mode .card .text-uppercase { color: #7d8590 !important; }

/* ── Stat card icons — restore their colors ──────── */
html.dark-mode .card .icon.icon-shape.bg-gradient-red { background: linear-gradient(135deg,#f5365c,#f56036) !important; }
html.dark-mode .card .icon.icon-shape.bg-gradient-orange { background: linear-gradient(135deg,#fb6340,#fbb140) !important; }
html.dark-mode .card .icon.icon-shape.bg-gradient-green { background: linear-gradient(135deg,#2dce89,#2dcecc) !important; }
html.dark-mode .card .icon.icon-shape.bg-gradient-info { background: linear-gradient(135deg,#11cdef,#1171ef) !important; }
html.dark-mode .card .icon.icon-shape.bg-gradient-primary { background: linear-gradient(135deg,#5e72e4,#825ee4) !important; }
html.dark-mode .card .icon i { color: #fff !important; }

/* ── Tables ─────────────────────────────────────── */
html.dark-mode .table { color: #c9d1d9 !important; }
html.dark-mode .table thead th {
  background: #1a1f38 !important;
  color: #7d8590 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html.dark-mode .table td {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  color: #c9d1d9 !important;
  vertical-align: middle;
}
html.dark-mode .table-hover tbody tr:hover td {
  background: rgba(94,114,228,0.07) !important;
}

/* ── Inputs ─────────────────────────────────────── */
html.dark-mode .form-control,
html.dark-mode .form-control[readonly] {
  background: #0d1117 !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: #c9d1d9 !important;
  border-radius: 6px;
}
html.dark-mode .form-control:focus {
  background: #13172a !important;
  border-color: #5e72e4 !important;
  color: #e6edf3 !important;
  box-shadow: 0 0 0 3px rgba(94,114,228,0.18) !important;
}
html.dark-mode .form-control::placeholder { color: #3d444d !important; }
html.dark-mode .input-group-text {
  background: #0d1117 !important;
  border-color: rgba(255,255,255,0.09) !important;
  color: #7d8590 !important;
}
html.dark-mode label { color: #7d8590 !important; }
html.dark-mode select.form-control option { background: #13172a; color: #c9d1d9; }

/* ── Dropdowns ──────────────────────────────────── */
html.dark-mode .dropdown-menu {
  background: #1a1f38 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important;
  border-radius: 10px !important;
}
html.dark-mode .dropdown-item { color: #7d8590 !important; border-radius: 6px; margin: 1px 4px; }
html.dark-mode .dropdown-item:hover { background: rgba(94,114,228,0.12) !important; color: #e6edf3 !important; }
html.dark-mode .dropdown-divider { border-color: rgba(255,255,255,0.06) !important; }
html.dark-mode .dropdown-header { color: #3d444d !important; }

/* ── Buttons ────────────────────────────────────── */
html.dark-mode .btn-white {
  background: #1a1f38 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #e6edf3 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}
html.dark-mode .btn-white:hover { background: #232848 !important; color: #fff !important; }
html.dark-mode .btn-neutral {
  background: #1a1f38 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #e6edf3 !important;
}

/* ── Modals ─────────────────────────────────────── */
html.dark-mode .modal-content:not([class*="bg-gradient"]) {
  background: #13172a !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}
html.dark-mode .modal-header:not([class*="bg-gradient"]) { border-bottom-color: rgba(255,255,255,0.06) !important; }
html.dark-mode .modal-footer:not([class*="bg-gradient"]) { border-top-color: rgba(255,255,255,0.06) !important; }
html.dark-mode .modal-title:not(.text-white) { color: #e6edf3 !important; }
html.dark-mode .modal-body:not(.text-white) { color: #7d8590 !important; }
html.dark-mode .close { color: #7d8590 !important; text-shadow: none !important; }

/* ── Pricing plan cards ─────────────────────────── */
html.dark-mode .plan-card { background: #13172a !important; border-color: rgba(255,255,255,0.06) !important; }
html.dark-mode .plan-card .price-coins,
html.dark-mode .plan-card h2,
html.dark-mode .plan-card h3 { color: #e6edf3 !important; }
html.dark-mode .plan-card .price-sub,
html.dark-mode .plan-card small,
html.dark-mode .plan-card li { color: #7d8590 !important; }
html.dark-mode .next-billing { color: #7d8590 !important; }
html.dark-mode .badge-current { color: #2dce89 !important; }

/* ── Footer ─────────────────────────────────────── */
html.dark-mode footer,
html.dark-mode .footer { background: #0d0f1a !important; border: none !important; }
html.dark-mode footer *,
html.dark-mode .footer * { color: #3d444d !important; }
html.dark-mode footer a,
html.dark-mode .footer a { color: #7d8590 !important; }
html.dark-mode footer a:hover,
html.dark-mode .footer a:hover { color: #c9d1d9 !important; }

/* ── Misc ───────────────────────────────────────── */
html.dark-mode .text-muted { color: #7d8590 !important; }
html.dark-mode .text-dark { color: #c9d1d9 !important; }
html.dark-mode hr { border-color: rgba(255,255,255,0.06) !important; }
html.dark-mode .border { border-color: rgba(255,255,255,0.06) !important; }
html.dark-mode .progress { background: #1a1f38 !important; }
html.dark-mode .badge-pill { opacity: 0.9; }
html.dark-mode .alert-default { background: #1a1f38 !important; border-color: rgba(255,255,255,0.07) !important; }

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0d0f1a; }
::-webkit-scrollbar-thumb { background: #2d333b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #444c56; }
html.dark-mode ::-webkit-scrollbar { width: 6px; height: 6px; }
html.dark-mode ::-webkit-scrollbar-track { background: #0d0f1a; }
html.dark-mode ::-webkit-scrollbar-thumb { background: #2d333b; border-radius: 4px; }
html.dark-mode ::-webkit-scrollbar-thumb:hover { background: #444c56; }

/* ── Theme toggle button ────────────────────────── */
button#themeToggle,
li button#themeToggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
button#themeToggle:hover {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
}
button#themeToggle i,
button#themeToggle #themeIcon {
  pointer-events: none !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
  font-weight: 900 !important;
  font-style: normal !important;
  color: inherit !important;
}

/* ================================================
   Sidebar Polish — both light & dark match
   ================================================ */

/* Light mode sidebar base */
.sidenav.navbar-vertical .navbar-nav .nav-item {
  padding: 0 8px !important;
}
.sidenav.navbar-vertical .navbar-nav .nav-link {
  border-radius: 8px !important;
  padding: 0.65rem 1rem !important;
  margin: 1px 0 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  font-size: 0.875rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}
.sidenav.navbar-vertical .navbar-nav .nav-link:hover {
  background: rgba(94,114,228,0.09) !important;
  color: #32325d !important;
}
.sidenav.navbar-vertical .navbar-nav .nav-link.active,
.sidenav.navbar-vertical .navbar-nav .active > .nav-link {
  background: rgba(94,114,228,0.13) !important;
  color: #5e72e4 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.sidenav.navbar-vertical .navbar-nav .nav-link .nav-link-text {
  color: inherit !important;
}
.sidenav hr.my-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
  border-color: rgba(0,0,0,0.06) !important;
}

/* Dark mode sidebar — same pill style, darker palette */
html.dark-mode .sidenav.navbar-vertical .navbar-nav .nav-link:hover {
  background: rgba(255,255,255,0.07) !important;
  color: #e6edf3 !important;
}
html.dark-mode .sidenav.navbar-vertical .navbar-nav .nav-link.active,
html.dark-mode .sidenav.navbar-vertical .navbar-nav .active > .nav-link {
  background: rgba(94,114,228,0.25) !important;
  color: #fff !important;
}

/* ── Kill all sidebar icon animations ───────────── */
.sidenav .nav-link i,
.sidenav .nav-link .nav-link-icon,
.sidenav .nav-item i {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ── Navbar compact fixed height — consistent across all pages ── */
.navbar-top.navbar-top {
  min-height: 56px !important;
  max-height: 56px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.navbar-top .container-fluid {
  height: 56px !important;
  align-items: center !important;
}
.navbar-top .collapse.navbar-collapse {
  height: 56px !important;
  align-items: center !important;
  display: flex !important;
}
/* Balance pill — fixed size always */
.navbar-top a.btn-sm[href="/invoices"] {
  padding: 5px 12px !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  height: 32px !important;
  white-space: nowrap !important;
  align-items: center !important;
}
/* Push any alert banners below the navbar instead of inflating it */
.navbar-top .alert {
  position: fixed !important;
  top: 60px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  min-width: 400px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}


/* ── Angkor Theme ─────────────────────────────────────────────────────────── */
/* ============================================================
   ANGKOR HOSTING — Theme
   Only touches: font, sidebar, resource monitor cards
   ============================================================ */


/* ── Font across everything ── */
body, html, .navbar, .nav-link, .btn, .card, .table,
.form-control, .dropdown-item, h1, h2, h3, h4, h5, h6, p, span, a {
  font-family: 'Outfit', sans-serif !important;
}

/* ════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════ */

.sidenav.bg-white,
.sidenav {
  background: #0e1120 !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 4px 0 20px rgba(0,0,0,0.4) !important;
}

/* Logo area */
.sidenav-header {
  padding: 1.2rem 1.25rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* All nav links */
.sidenav .nav-link {
  margin: 2px 0.6rem !important;
  padding: 0.6rem 0.9rem !important;
  border-radius: 10px !important;
  color: #6b7099 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 0.18s ease !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.sidenav .nav-link:hover,
.sidenav .nav-link:focus {
  background: rgba(255,255,255,0.05) !important;
  color: #c8cce0 !important;
}

/* Active link — gold highlight */
.sidenav .nav-link.active,
.sidenav .active > .nav-link {
  background: linear-gradient(135deg, rgba(245,200,66,0.13), rgba(245,200,66,0.05)) !important;
  border: 1px solid rgba(245,200,66,0.2) !important;
  color: #f5c842 !important;
}

.sidenav .nav-link.active i,
.sidenav .active > .nav-link i {
  color: #f5c842 !important;
  opacity: 1 !important;
}

/* Link text color */
.sidenav .nav-link .nav-link-text {
  color: inherit !important;
}

/* Dividers */
.sidenav hr {
  border-color: rgba(255,255,255,0.05) !important;
}

/* ════════════════════════════════════════
   RESOURCE MONITOR CARDS (stat cards)
   ════════════════════════════════════════ */

.card-stats {
  background: #12152b !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Subtle top shimmer per card */
.card-stats::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.card-stats:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

.card-stats .card-body {
  background: transparent !important;
  padding: 1.1rem 1.25rem !important;
}

.card-stats .card-title {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: #525675 !important;
  text-transform: uppercase !important;
  margin-bottom: 0.3rem !important;
}

.card-stats .h2,
.card-stats .font-weight-bold {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #dde0f0 !important;
  line-height: 1.2 !important;
}

.card-stats .text-sm {
  font-size: 0.72rem !important;
  color: #525675 !important;
}

.card-stats .text-success {
  color: #4ade80 !important;
}

/* Icon circles — keep original gradient colors, just tweak size */
.card-stats .icon-shape {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* ── Scrollbar ── */
.sidenav ::-webkit-scrollbar { width: 4px; }
.sidenav ::-webkit-scrollbar-track { background: transparent; }
.sidenav ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* ── Shared Components ────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────────
   Dashactyl — Shared Component Styles
   Loaded on every page via darkmode.css link
───────────────────────────────────────────────────────────────────────────── */

/* ── Dark mode base ─────────────────────────────────────────────────────── */
html.dark-mode,html.dark-mode body,html.dark-mode .main-content{background-color:#0b0d1a!important;color:#c9d1d9!important;}
html.dark-mode .sidenav,html.dark-mode .sidenav.bg-white{background-color:#0e1120!important;}
html.dark-mode .card,html.dark-mode .card-body{background-color:#12152b!important;border-color:rgba(255,255,255,0.06)!important;}
html.dark-mode .card-header{background-color:#12152b!important;}
html.dark-mode .navbar-top{background:#0e1120!important;}
html.dark-mode .dropdown-menu{background-color:#141729!important;}
html.dark-mode .modal-content:not([class*="bg-gradient"]){background-color:#12152b!important;}
html.dark-mode .btn-white,html.dark-mode .btn-neutral{background-color:#1a1f38!important;border-color:rgba(255,255,255,0.1)!important;color:#e6edf3!important;}
html.dark-mode .table th,html.dark-mode .table td{background-color:#12152b!important;color:#c9d1d9!important;border-color:rgba(255,255,255,0.06)!important;}
html.dark-mode footer,html.dark-mode .footer{background-color:#0b0d1a!important;border:none!important;}
html.dark-mode .form-control,html.dark-mode .input-group-text{background-color:#0d1117!important;border-color:rgba(255,255,255,0.1)!important;color:#c9d1d9!important;}

/* ── FontAwesome icon fixes ─────────────────────────────────────────────── */
.nav-link i{display:inline-block!important;width:2.25rem!important;font-size:0.9375rem!important;line-height:1.5rem!important;text-align:center!important;opacity:1!important;visibility:visible!important;}
.btn i,.dropdown-item i,th i,td i{display:inline-block!important;visibility:visible!important;opacity:1!important;}
.btn-manage-fix{display:inline-flex!important;align-items:center!important;gap:5px!important;}
.btn-manage-fix i{width:auto!important;font-size:0.8rem!important;}

/* ── Sidenav & main content ─────────────────────────────────────────────── */
.main-content{will-change:scroll-position;-webkit-overflow-scrolling:touch;margin-left:250px!important;} @media(max-width:1200px){.main-content{margin-left:0!important;}}
.sidenav .scrollbar-inner{overflow-y:auto;}

/* ── Page header ────────────────────────────────────────────────────────── */
.page-eyebrow{font-size:0.6rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:rgba(245,200,66,0.75);margin:0 0 0.4rem;}
html:not(.dark-mode) .page-eyebrow{color:rgba(255,255,255,0.7);}
.page-title{font-size:1.65rem;font-weight:800;color:#fff;margin:0;line-height:1.2;}
.page-sub{font-size:0.8rem;color:rgba(255,255,255,0.5);margin-top:0.3rem;}
.page-content{margin-top:-2.5rem;padding:0 1.5rem 2rem;position:relative;z-index:1;}
.page-actions{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:1rem;}

/* ── Top navbar ─────────────────────────────────────────────────────────── */
.ak-navbar{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;height:60px;position:relative;z-index:10;}
.ak-balance{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:#fff;border-radius:100px;padding:5px 14px;font-size:0.78rem;text-decoration:none;}
.ak-balance:hover{background:rgba(255,255,255,0.18);color:#fff;text-decoration:none;}
.ak-nav-right{display:flex;align-items:center;gap:0.5rem;}
.ak-icon-btn{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.9);font-size:0.85rem;text-decoration:none;cursor:pointer;transition:background 0.18s;}
.ak-icon-btn:hover{background:rgba(255,255,255,0.18);color:#fff;text-decoration:none;}
.ak-avatar{width:36px;height:36px;border-radius:10px;object-fit:cover;border:2px solid rgba(255,255,255,0.25);}
.ak-username{font-size:0.85rem;font-weight:600;color:rgba(255,255,255,0.9);}
.ak-avatar-btn{display:flex;align-items:center;gap:0.5rem;text-decoration:none;}

/* ── Card component ─────────────────────────────────────────────────────── */
.ak-card{background:#fff;border:1px solid #e4e7ef;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,0.06);overflow:hidden;margin-bottom:1.25rem;}
html.dark-mode .ak-card{background:#12152b;border-color:rgba(255,255,255,0.07);}
.ak-card-header{display:flex;align-items:center;gap:0.85rem;padding:1.1rem 1.4rem;border-bottom:1px solid #f0f2f8;}
html.dark-mode .ak-card-header{border-bottom-color:rgba(255,255,255,0.05);}
.ak-card-title{font-size:0.95rem;font-weight:700;color:#111827;display:flex;align-items:center;gap:0.5rem;}
html.dark-mode .ak-card-title{color:#dde0f0;}
.ak-card-body{padding:1.25rem 1.4rem;}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.ak-btn-white{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);color:#fff;border-radius:8px;padding:6px 14px;font-size:0.78rem;font-weight:600;text-decoration:none;transition:all 0.15s;cursor:pointer;font-family:inherit;}
.ak-btn-white:hover{background:rgba(255,255,255,0.2);color:#fff;text-decoration:none;}

/* ── Form inputs ────────────────────────────────────────────────────────── */
.field-label{font-size:0.75rem;font-weight:700;color:#374151;margin-bottom:0.4rem;display:block;}
html.dark-mode .field-label{color:#b0b5cc;}
.field-hint{font-size:0.7rem;color:#9ca3af;margin-top:0.3rem;}
html.dark-mode .field-hint{color:#525675;}
.ak-input{width:100%;background:#fff;border:1.5px solid #e4e7ef;color:#111827;padding:9px 12px;border-radius:10px;font-size:0.875rem;font-family:inherit;transition:border-color 0.15s,box-shadow 0.15s;outline:none;}
html.dark-mode .ak-input{background:#0d1117;border-color:rgba(255,255,255,0.09);color:#c9d1d9;}
.ak-input:focus{border-color:#825ee4;box-shadow:0 0 0 3px rgba(130,94,228,0.12);}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.ak-footer{text-align:center;padding:2rem 1rem 1.5rem;font-size:0.7rem;color:#9ca3af;line-height:2;}
html.dark-mode .ak-footer{color:#525675;}
.ak-footer a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:all 0.2s;}
.ak-footer a:hover{color:#f5c842;border-bottom-color:#f5c842;}

/* ── Balance banner ─────────────────────────────────────────────────────── */
.balance-banner{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e4e7ef;border-radius:14px;padding:1rem 1.4rem;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap;}
html.dark-mode .balance-banner{background:#12152b;border-color:rgba(255,255,255,0.07);}
.balance-banner-label{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#9ca3af;margin-bottom:0.2rem;}
html.dark-mode .balance-banner-label{color:#525675;}
.balance-banner-amount{font-size:1.5rem;font-weight:800;color:#111827;}
html.dark-mode .balance-banner-amount{color:#dde0f0;}
/* ── Additional shared rules ────────────────────────────────────────────── */
.main-content{will-change:scroll-position;-webkit-overflow-scrolling:touch;}
html:not(.dark-mode) .dash-header{background:linear-gradient(135deg,#5e72e4 0%,#825ee4 100%);border-bottom:none;}
html:not(.dark-mode) .dash-header::before{background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,0.25) 50%,transparent 95%);}
.dash-header::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(245,200,66,0.4) 50%,transparent 95%);}
.header-inner{padding:1.5rem 1.5rem 0;}
.dash-header{background:linear-gradient(135deg,#1a1f3e 0%,#0f1228 60%,#12152b 100%);padding:0 0 4rem;position:relative;overflow:hidden;border-bottom:1px solid rgba(245,200,66,0.08);}
html:not(.dark-mode) .ak-navbar{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);}
.page-eyebrow{font-size:0.6rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:rgba(245,200,66,0.7);margin:0 0 0.4rem;}
.ak-btn-white{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#fff;border-radius:10px;padding:7px 16px;font-size:0.82rem;font-weight:600;text-decoration:none;transition:all 0.2s;cursor:pointer;}
html:not(.dark-mode) .stat-card{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3);}
.stat-label{font-size:0.6rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:0.15rem;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;padding:1.25rem 1.5rem 0;}
.stat-card{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.15);border-radius:14px;padding:1rem 1.1rem;display:flex;align-items:center;gap:0.85rem;}
.stat-icon{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;flex-shrink:0;}
.stat-value{font-size:0.9rem;font-weight:700;color:#fff;line-height:1.2;}
select.ak-input{cursor:pointer;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}
.form-row-full{grid-column:1/-1;}
.form-field{display:flex;flex-direction:column;gap:0.4rem;}
.field-label{font-size:0.78rem;font-weight:700;color:#374151;display:flex;align-items:center;gap:0.4rem;}
.field-label i{color:#825ee4;font-size:0.8rem;width:auto!important;}
html.dark-mode .ak-input:focus{border-color:#825ee4;box-shadow:0 0 0 3px rgba(130,94,228,0.2);}
.input-with-badge{position:relative;}
.input-badge{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:0.7rem;font-weight:700;color:#9ca3af;background:#f4f6fb;padding:2px 8px;border-radius:6px;}
html.dark-mode .input-badge{background:rgba(255,255,255,0.07);color:#525675;}
.submit-row{display:flex;align-items:center;gap:1rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid #f0f2f8;}
html.dark-mode .submit-row{border-top-color:rgba(255,255,255,0.05);}
.btn-submit{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#825ee4,#5e72e4);border:none;color:#fff;border-radius:10px;padding:10px 24px;font-size:0.875rem;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 14px rgba(130,94,228,0.3);}
.btn-submit:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(130,94,228,0.4);}
.btn-back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1.5px solid #e4e7ef;color:#6b7280;border-radius:10px;padding:10px 18px;font-size:0.875rem;font-weight:600;text-decoration:none;transition:all 0.18s;cursor:pointer;}
.btn-back:hover{border-color:#825ee4;color:#825ee4;text-decoration:none;}
html.dark-mode .btn-back{border-color:rgba(255,255,255,0.1);color:#9196b0;}
html.dark-mode .btn-back:hover{border-color:#825ee4;color:#9580f0;}
overflow: hidden;
display: flex; align-items: center; gap: 0.5rem;
background: #fff;
border: 1px solid #e4e7ef;
border-radius: 16px;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
display: flex; align-items: center; justify-content: center;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid #f0f2f8;
html.dark-mode .empty-title{color:#b0b5cc;}