/* ==========================================================================
   DAILY WORKZONE - USER PANEL STYLESHEET  (single file: assets/css/main.css)

   One stylesheet for every user-panel page. Pages pick their look through the
   classes on <html> (set in includes/head.php or in the page itself):

     shell      desktop + mobile logged-in shell      apk      Android / WebView shell
     web        desktop logged-in panel               mui      Material You mobile theme
     auth       login-style pages                     auth-web desktop login / register / forgot
     auth-app   standalone mobile pages               mapp     mobile app components
     wdg        desktop dashboard widgets             welcome  desktop welcome page
     pg-*       one page only (page specific rules)

   Every rule is wrapped in :where(.class) so scoping adds no specificity.
   No page uses inline style="" or <style> blocks - add rules here instead.
   Third-party libraries (bootstrap, bootstrap-icons, simple-datatables) keep
   their own vendor stylesheets.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@500;600;700&family=Outfit:wght@500;600;700;800&family=Nunito:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=Orbitron:wght@500;700&family=Geist+Mono:wght@500&family=Instrument+Serif:ital@0;1&display=swap');


/* ==========================================================================
   Base shell (header, sidebar, cards, forms, utilities)
   scope: html.shell
   ========================================================================== */
:root:where(.shell) {
  scroll-behavior: smooth;
  --ink: #20172A;
  --ink-soft: #524B65;
  --paper: #F8F6FA;
  --paper2: #FFFFFF;
  --cobalt: #4C0D94;
  --cobalt-dark: #3B0B72;
  --brass: #FBC871;
  --brass-dark: #E1991D;
  --coral: #F4B23F;
  --success: #16A34A;
  --muted: #726B85;
  --muted-dark: #443F55;
  --border: rgba(76, 13, 148, 0.20);
  --surface-hover: rgba(76, 13, 148, 0.08);
  --shadow-sm: 0 2px 10px rgba(25, 16, 35, 0.06);
  --shadow-md: 0 10px 26px rgba(25, 16, 35, 0.10);
  --shadow-lg: 0 20px 48px rgba(25, 16, 35, 0.14);
  --shadow-glow: 0 0 24px rgba(251, 200, 113, 0.28);
  --grad-violet: linear-gradient(135deg, #4C0D94 0%, #FBC871 100%);
  --grad-gold: linear-gradient(135deg, #F59E0B 0%, #FBC871 100%);
  --font-display: "Sora", "Plus Jakarta Sans", serif;
}

:where(.shell) body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ink);
  font-size: 13px;
  background-color: var(--paper);
  background-image: radial-gradient(circle at 12% 8%, rgba(76, 13, 148, 0.10), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(251, 200, 113, 0.08), transparent 45%);
  background-attachment: fixed;
}

:where(.shell) a {
  color: var(--cobalt);
  text-decoration: none;
}

:where(.shell) a:hover {
  color: var(--cobalt-dark);
  text-decoration: none;
}
:where(.shell) #main {
  margin-top: 5rem;
  transition: all 0.3s;
  animation: fadeInPage 0.5s ease-out backwards;
}

@keyframes fadeInPage {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1199px) {
  :where(.shell) #main {
    padding: 11px;
  }
}
:where(.shell) .pagetitle {
  margin-bottom: 10px;
}

:where(.shell) .pagetitle h1 {
  font-family: var(--font-display);
  font-size: 26px;
  margin-bottom: 0;
  font-weight: 600;
  color: var(--ink);
  animation: taskRiseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
:where(.shell) .back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: var(--cobalt);
  width: 40px;
  height: 40px;
  border-radius: 40px;
  transition: all 0.4s;
  box-shadow: var(--shadow-glow);
}

:where(.shell) .back-to-top i {
  font-size: 24px;
  color: #FFFFFF;
  line-height: 0;
}

:where(.shell) .back-to-top:hover {
  background: var(--brass);
  color: #12151A;
}

:where(.shell) .back-to-top.active {
  visibility: visible;
  opacity: 1;
  animation: backToTopPulse 2.4s ease-in-out infinite;
}

@keyframes backToTopPulse {
  0%, 100% { box-shadow: var(--shadow-glow); }
  50% { box-shadow: 0 0 34px rgba(76, 13, 148, 0.55); }
}
:where(.shell) .dropdown-menu {
  border-radius: 10px;
  padding: 10px 0;
  animation-name: dropdown-animate;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  background: var(--paper2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

:where(.shell) .dropdown-menu .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  color: var(--ink);
  transition: 0.3s;
}

:where(.shell) .dropdown-menu .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

:where(.shell) .dropdown-menu .dropdown-item:hover {
  background-color: var(--surface-hover);
  color: var(--ink);
  transform: translateX(4px);
}

@media (min-width: 768px) {
  :where(.shell) .dropdown-menu-arrow::before {
    content: "";
    width: 13px;
    height: 13px;
    background: var(--paper2);
    position: absolute;
    top: -7px;
    right: 20px;
    transform: rotate(45deg);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
  }
}

@keyframes dropdown-animate {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
:where(.shell) .card {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  background: var(--paper2);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

:where(.shell) .card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md), 0 0 22px rgba(76, 13, 148, 0.18);
  border-color: rgba(76, 13, 148, 0.35);
}

:where(.shell) .card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
}

:where(.shell) .card:hover::after {
  animation: cardShine 1s ease;
}

@keyframes cardShine {
  from { left: -60%; }
  to { left: 120%; }
}

:where(.shell) .card-header,
:where(.shell) .card-footer {
  border-color: var(--border);
  background-color: var(--paper2);
  color: var(--muted);
  padding: 15px;
}

:where(.shell) .card-title {
    padding: 10px 14px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    font-family: var(--font-display);
    border-radius: 0;
    width: 100%;
    border-bottom: 3px dashed #373440;
    letter-spacing: 0.2px;
    background: transparent;
}

:where(.shell) .card-title span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

:where(.shell) .card-body {
  padding: 14px;
}
:where(.shell) .btn-close {
  background-size: 50%;
}

:where(.shell) .btn-close:focus {
  outline: 0;
  box-shadow: none;
}
:where(.shell) .breadcrumb {
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  color: var(--muted);
  font-weight: 600;
}

:where(.shell) .breadcrumb a {
  color: var(--muted);
  transition: 0.3s;
}

:where(.shell) .breadcrumb a:hover {
  color: var(--cobalt);
}

:where(.shell) .breadcrumb .breadcrumb-item::before {
  color: var(--muted);
}

:where(.shell) .breadcrumb .active {
  color: var(--ink);
  font-weight: 600;
}
:where(.shell) .logo {
  line-height: 1;
}

@media (min-width: 1200px) {
  :where(.shell) .logo {
    width: 100%;
  }
}

:where(.shell) .logo img {
  max-height: 49px;
  margin-right: 1px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

:where(.shell) .logo:hover img {
  transform: scale(1.08) rotate(-3deg);
}

:where(.shell) .logo span {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
}

:where(.shell) .header {
  transition: all 0.5s;
  z-index: 997;
  height: 60px;
  padding-left: 20px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

:where(.shell) .header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, var(--cobalt), var(--brass) 60%, transparent);
}

:where(.shell) .header .toggle-sidebar-btn {
  font-size: 32px;
  padding-left: 1px;
  cursor: pointer;
  color: var(--ink);
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

:where(.shell) .header .toggle-sidebar-btn:hover {
  transform: rotate(180deg) scale(1.1);
  color: var(--cobalt);
}

:where(.shell) .header .search-bar {
  min-width: 360px;
  padding: 0 20px;
}

@media (max-width: 1199px) {
  :where(.shell) .header .search-bar {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding: 20px;
    box-shadow: var(--shadow-md);
    background: var(--paper2);
    z-index: 9999;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
  }

  :where(.shell) .header .search-bar-show {
    top: 60px;
    visibility: visible;
    opacity: 1;
  }
}
:where(.shell) .header-nav ul {
  list-style: none;
}

:where(.shell) .header-nav>ul {
  margin: 0;
  padding: 0;
}

:where(.shell) .header-nav .nav-profile {
  color: var(--ink);
}

:where(.shell) .header-nav .nav-profile img {
  max-height: 36px;
  border: 2px solid var(--brass);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

:where(.shell) .header-nav .nav-profile:hover img {
  box-shadow: 0 0 0 4px rgba(76, 13, 148, 0.25);
  transform: scale(1.05);
}

:where(.shell) .header-nav .nav-profile span {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

:where(.shell) .header-nav .profile {
  min-width: 240px;
  padding-bottom: 0;
  top: 8px !important;
}

:where(.shell) .header-nav .profile .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

:where(.shell) .header-nav .profile .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

:where(.shell) .header-nav .profile .dropdown-item:hover {
  background-color: var(--surface-hover);
}
:where(.shell) .sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 240px;
    z-index: 996;
    transition: all 0.3s;
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    box-shadow: var(--shadow-md);
    border-right: 1px solid var(--border);
    background: var(--paper2);
}

@media (max-width: 1199px) {
  :where(.shell) .sidebar {
    left: -300px;
  }
}

:where(.shell) .sidebar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: var(--paper);
}

:where(.shell) .sidebar::-webkit-scrollbar-thumb {
  background-color: var(--brass);
}

@media (min-width: 1200px) {

  :where(.shell) #main,
  :where(.shell) #footer {
    margin-left: 20%;
  }
}

@media (max-width: 1199px) {
  :where(.shell) .toggle-sidebar .sidebar {
  left: 0;
  padding: 1rem;
  }
}

@media (min-width: 1200px) {

  :where(.shell) .toggle-sidebar #main,
  :where(.shell) .toggle-sidebar #footer {
    margin-left: 0;
  }

  :where(.shell) .toggle-sidebar .sidebar {
    left: -300px;
  }
}

:where(.shell) .sidebar-nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

:where(.shell) .sidebar-nav li {
  padding: 0;
  margin: 0;
  list-style: none;
}

:where(.shell) .sidebar-nav .nav-item {
  margin-bottom: 5px;
}

:where(.shell) .sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 10px 12px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: 0.25s;
  position: relative;
  overflow: hidden;
}

:where(.shell) .sidebar-nav .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cobalt), var(--brass));
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

:where(.shell) .sidebar-nav .nav-link i {
  font-size: 16px;
  margin-right: 10px;
  color: var(--muted);
  transition: 0.25s;
}

:where(.shell) .sidebar-nav .nav-link.collapsed {
  color: var(--ink-soft);
  background: transparent;
}

:where(.shell) .sidebar-nav .nav-link.collapsed i {
  color: var(--muted);
  font-size: 17px;
}

:where(.shell) .sidebar-nav .nav-link:hover {
  color: #030303;
  background-image: linear-gradient(315deg, rgb(79 245 216 / 73%), rgb(255 255 255 / 8%) 70%);
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

:where(.shell) .sidebar-nav .nav-link:hover i {
  color: var(--brass);
  transform: scale(1.15) rotate(-6deg);
}

:where(.shell) .sidebar-nav .nav-link .bi-chevron-down {
  margin-right: 0;
  transition: transform 0.2s ease-in-out;
}

:where(.shell) .sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

:where(.shell) .sidebar-nav .nav-content {
  padding: 5px 0 0 0;
  margin: 0;
  list-style: none;
}

:where(.shell) .sidebar-nav .nav-content a {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 0 10px 40px;
  transition: 0.3s;
}

:where(.shell) .sidebar-nav .nav-content a i {
  font-size: 6px;
  margin-right: 8px;
  line-height: 0;
  border-radius: 50%;
}

:where(.shell) .sidebar-nav .nav-content a:hover,
:where(.shell) .sidebar-nav .nav-content a.active {
  color: var(--brass);
}

:where(.shell) .sidebar-nav .nav-content a.active i {
  background-color: var(--brass);
}
:where(.shell) .dashboard .filter {
  position: absolute;
  right: 0px;
  top: 15px;
}

:where(.shell) .dashboard .filter .icon {
  color: var(--muted);
  padding-right: 20px;
  padding-bottom: 5px;
  transition: 0.3s;
  font-size: 16px;
}

:where(.shell) .dashboard .filter .icon:hover,
:where(.shell) .dashboard .filter .icon:focus {
  color: var(--cobalt);
}

:where(.shell) .dashboard .filter .dropdown-item {
  padding: 8px 15px;
}

:where(.shell) .contact .php-email-form input,
:where(.shell) .contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  border-radius: 0;
}

:where(.shell) .contact .php-email-form input:focus,
:where(.shell) .contact .php-email-form textarea:focus {
  border-color: var(--cobalt);
}

:where(.shell) .contact .php-email-form input {
  padding: 10px 15px;
}

:where(.shell) .contact .php-email-form textarea {
  padding: 12px 15px;
}

:where(.shell) .contact .php-email-form button[type=submit] {
  background: var(--cobalt);
  border: 0;
  padding: 10px 30px;
  color: #FFFFFF;
  transition: 0.4s;
  border-radius: 6px;
}

:where(.shell) .contact .php-email-form button[type=submit]:hover {
  background: var(--cobalt-dark);
}
:where(.shell) .error-404 {
  padding: 30px;
}

:where(.shell) .error-404 h1 {
  font-size: 180px;
  font-weight: 700;
  color: var(--cobalt);
  margin-bottom: 0;
  line-height: 150px;
}

:where(.shell) .error-404 h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 30px;
}

:where(.shell) .error-404 .btn {
  background: var(--cobalt);
  color: #FFFFFF;
  padding: 8px 30px;
}

:where(.shell) .error-404 .btn:hover {
  background: var(--cobalt-dark);
}

@media (min-width: 992px) {
  :where(.shell) .error-404 img {
    max-width: 50%;
  }
}
:where(.shell) .footer {
  padding: 6px 0;
  font-size: 11px;
  transition: all 0.3s;
  border-top: 1px solid var(--border);
  position: fixed;
  bottom: 0;
  width: 100%;
  background: rgba(255, 253, 247, 0.9);
  backdrop-filter: blur(10px);
}

:where(.shell) .footer .copyright {
  text-align: center;
  color: var(--muted);
}

:where(.shell) .footer .credits {
  padding-top: 5px;
  text-align: center;
  font-size: 13px;
  color: var(--brass);
}
:where(.shell) .xl-icon {
  font-size: larger;
}

:where(.shell) .task-btn {
  background: var(--cobalt);
  border: none;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  color: #FFFFFF;
  margin-top: 13px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

:where(.shell) .task-btn:hover {
  background: var(--cobalt-dark);
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-glow);
}

:where(.shell) .form-control:focus {
  color: var(--ink);
  background-color: var(--paper2);
  border-color: var(--cobalt);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(76, 13, 148, 0.25);
  transform: translateY(-1px);
}

:where(.shell) .g-3 {
  --bs-gutter-y: 3px;
}

:where(.shell) .form-control {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3rem;
  color: var(--ink);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--paper2);
  background-clip: padding-box;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

:where(.shell) .button-33 {
  padding: 8px 19px;
  border: 0;
  font-size: 12px;
  transition: all 150ms ease-in-out;
  border-radius: 6px;
  color: #FFFFFF;
  font-weight: bold;
  background: var(--success);
  box-shadow: var(--shadow-sm);
}

:where(.shell) .button-33:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 22px rgba(52, 211, 153, 0.45);
}

:where(.shell) .btn:hover {
  color: var(--bs-btn-hover-color);
  border-color: var(--bs-btn-hover-border-color);
}

:where(.shell) .button-33:active {
  filter: brightness(0.95);
}
:where(.shell) .dashboard-container {
  margin: 0 auto;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

:where(.shell) .notification-banner {
  margin-bottom: 20px;
}

:where(.shell) .text-muted {
  --bs-text-opacity: 1;
  color: var(--muted) !important;
}

:where(.shell) .stat-icon {
  font-size: 1.8rem;
  margin-right: 15px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
    background: rgb(255 255 255 / 28%);
  color: #FFFFFF;
  animation: taskIconFloat 3.4s ease-in-out infinite;
}

:where(.shell) .income-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

:where(.shell) .income-card {
  background: var(--paper2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  animation: taskPopIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

:where(.shell) .income-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(129, 34, 238, 0.35);
}

:where(.shell) .chart-card {
  background: var(--paper2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

@media (max-width: 768px) {

  
  :where(.shell) .income-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {

  
  :where(.shell) .income-grid {
    grid-template-columns: 1fr;
  }
}

:where(.shell) .btn-primary {
background-color: #FFE53B;
background-image: linear-gradient(147deg, #FFE53B 0%, #FFAF25 74%);

  border-radius: 6px !important;
  color: #FFFFFF;
  cursor: pointer;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 15px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-top: 8px;
  width: auto;
}

:where(.shell) .btn-primary:hover {
  background: linear-gradient(135deg, var(--brass) 0%, var(--brass-dark) 100%);
  color: #12151A;
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

:where(.shell) .table {
  --bs-table-color-type: initial;
  --bs-table-bg-type: initial;
  --bs-table-color-state: initial;
  --bs-table-bg-state: initial;
  --bs-table-color: var(--ink);
  --bs-table-bg: var(--paper2);
  --bs-table-border-color: var(--border);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--ink);
  --bs-table-striped-bg: rgba(35, 32, 43, 0.025);
  --bs-table-active-color: var(--ink);
  --bs-table-active-bg: rgba(76, 13, 148, 0.08);
  --bs-table-hover-color: var(--ink);
  --bs-table-hover-bg: rgba(76, 13, 148, 0.08);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}

:where(.shell) .table>:not(caption)>*>* {
  padding: .6rem .6rem;
  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--ink)));
  background-color: var(--paper2);
  border-bottom-width: var(--bs-border-width);
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
  font-size: smaller;
}

:where(.shell) .table thead {
  background: var(--paper2);
}

:where(.shell) .table thead th {
  color: var(--ink);
  font-weight: 600;
}

:where(.shell) button, :where(.shell) input, :where(.shell) select, :where(.shell) textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  width: 87%;
  border: 1px solid var(--border);
  border-radius: 6px;
}
:where(.shell) label {
    display: inline-block;
       color: var(--ink);
}
:where(.shell) ::placeholder {
  color: rgba(35, 32, 43, 0.45) !important;
  opacity: 1;
}
@keyframes taskRiseIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes taskPopIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes taskIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes taskBadgePulse {
  0%, 100% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.25), 0 8px 20px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 0 46px rgba(255, 255, 255, 0.42), 0 8px 20px rgba(0, 0, 0, 0.35); }
}

:where(.shell) .task-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #190B2A 0%, #4C0D94 55%, #FBC871 130%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-md), 0 0 30px rgba(76, 13, 148, 0.25);
  animation: taskRiseIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

:where(.shell) .hero-blob-1 {
  position: absolute;
  top: -70px;
  right: -50px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
  pointer-events: none;
}

:where(.shell) .task-hero-text {
  position: relative;
  z-index: 1;
}

:where(.shell) .task-hero-text h3 {
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  margin: 0 0 4px;
}

:where(.shell) .task-hero-text p {
  color: #EFE0AE;
  font-size: 0.85rem;
  margin: 0;
}

:where(.shell) .task-hero-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #F0D27A;
  box-shadow: 0 0 20px rgba(201, 162, 39, 0.35);
  animation: taskIconFloat 3.4s ease-in-out infinite;
}

:where(.shell) .task-section {
  background: var(--paper2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  animation: taskRiseIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s backwards;
}

:where(.shell) .task-section-title {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 18px;
  padding-bottom: 8px;
}

:where(.shell) .task-section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brass), var(--cobalt));
}
:where(.shell) .task-success {
  text-align: center;
  padding: 12px 6px 6px;
}

:where(.shell) .task-success-badge {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #FFFFFF;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  animation: taskPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
             taskBadgePulse 2.4s ease-in-out infinite;
}

:where(.shell) .task-success-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
}

:where(.shell) .task-success-msg {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 420px;
  margin: 0 auto 26px;
}
:where(.shell) .btn-app {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 15px 20px;
  margin-top: 6px;
  background: var(--grad-violet);
  background-size: 200% auto;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(76, 13, 148, 0.35);
  transition: all 0.3s ease;
}

:where(.shell) .btn-app:hover {
  transform: translateY(-3px);
  background-position: right center;
  box-shadow: 0 14px 34px rgba(76, 13, 148, 0.45);
  color: #FFFFFF;
}

:where(.shell) .btn-app:active {
  transform: translateY(-1px);
}
:where(.shell) .plant-upload-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 36px 20px;
  margin-bottom: 18px;
  border: 2px dashed rgba(76, 13, 148, 0.4);
  border-radius: 18px;
  background: rgba(76, 13, 148, 0.03);
  cursor: pointer;
  transition: all 0.3s ease;
}

:where(.shell) .plant-upload-box:hover {
  border-color: var(--cobalt);
  background: rgba(76, 13, 148, 0.06);
  box-shadow: 0 0 24px rgba(76, 13, 148, 0.15);
  transform: translateY(-2px);
}

:where(.shell) .plant-upload-box input[type="file"] {
  display: none;
}

:where(.shell) .plant-upload-box i {
  font-size: 2.2rem;
  color: var(--brass);
  animation: taskIconFloat 3s ease-in-out infinite;
}

:where(.shell) .plant-upload-title {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.98rem;
}

:where(.shell) .plant-upload-sub {
  color: var(--muted);
  font-size: 0.8rem;
  max-width: 280px;
}

:where(.shell) .plant-preview {
  display: none;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

:where(.shell) .task-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(76, 13, 148, 0.06);
  border: 1px solid rgba(76, 13, 148, 0.22);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 18px;
  color: var(--muted-dark);
  font-size: 0.85rem;
}

:where(.shell) .task-note i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 1.1rem;
  color: var(--cobalt);
}

@media (max-width: 576px) {
  :where(.shell) .task-hero {
    flex-direction: column;
    text-align: center;
  }
}


/* ==========================================================================
   Mobile shell (APK)
   scope: html.apk
   ========================================================================== */
:root:where(.apk) {
   --blue: #5B6EF5;
   --purple: #AC63FF;
   --pink: #F5A623;
   --red: #AC63FF;
   --red-dark: #9147E5;
   --red-soft: #EEF0FF;
   --gm: linear-gradient(135deg, #AC63FF 0%, #C490FF 100%);
   --go: linear-gradient(135deg, #F5A623 0%, #FFC857 100%);
   --gt: linear-gradient(135deg, #AC63FF 0%, #C490FF 100%);
   --gp: linear-gradient(135deg, #A45CF6 0%, #BF8BFA 100%);
   --gi: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
   --dark: #2D3142;
   --mid: #6D6680;
   --light: #9F9AAF;
   --surf: #E9EDF3;
   --sh:rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
   --shh: 9px 9px 20px rgba(163, 177, 198, 0.6), -9px -9px 20px rgba(255, 255, 255, 0.9);
   --sh-inset:rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
   --sh-sm: 4px 4px 9px rgba(163, 177, 198, 0.5), -4px -4px 9px rgba(255, 255, 255, 0.8);
}
:where(.apk) body {
   background: var(--surf);
   min-height: 100vh;
   margin: 0;
   padding: 0;
   font-size: 13px;
   font-family: 'Plus Jakarta Sans', sans-serif;
   display: flex;
   flex-direction: column;
   color: var(--dark);
}
@keyframes slideUp {
   from {
      transform: translateY(100%);
      opacity: 0;
   }

   to {
      transform: translateY(0);
      opacity: 1;
   }
}

@keyframes slideInLeft {
   from {
      opacity: 0;
      transform: translateX(-24px);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }
}

@keyframes navGlow {

   0%,
   100% {
      box-shadow: 0 6px 22px rgba(172, 99, 255, .35), 0 0 0 6px var(--surf);
   }

   50% {
      box-shadow: 0 8px 28px rgba(196, 144, 255, .45), 0 0 0 6px var(--surf);
   }
}

@keyframes riseIn {
   from { opacity: 0; transform: translateY(16px); }
   to   { opacity: 1; transform: translateY(0); }
}
:where(.apk) .bottom-menu {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   display: flex;
   justify-content: space-around;
   background: var(--surf);
   box-shadow: 0 -6px 18px rgba(163, 177, 198, .35);
   z-index: 1000;
}

:where(.apk) .menu-item {
   color: var(--mid);
   text-align: center;
   flex: 1;
   padding: 6px 0;
   font-size: 12px;
   cursor: pointer;
   transition: all .2s ease;
}

:where(.apk) .menu-item i {
   display: block;
   font-size: 22px;
   margin-bottom: 3px;
   font-style: normal;
}

:where(.apk) .menu-item:hover {
   transform: translateY(-3px);
   color: var(--blue);
}

:where(.apk) .menu-item.active {
   color: var(--red);
   font-weight: 700;
   transform: scale(1.1);
}

:where(.apk) p.text-mob {
   font-size: 11px;
   font-weight: 500;
   margin: 0;
   color: var(--dark);
}

:where(.apk) span.menu-text {
   font-size: 10px;
   color: var(--dark);
   font-weight: 700;
}

:where(.apk) .sm-text {
   font-size: 11px;
   color: var(--dark);
}

:where(.apk) .mob-box-menu {
   border: none;
   padding: 8px;
   border-radius: 14px;
   width: 6rem;
   box-shadow: var(--sh);
   background: var(--surf);
}

:where(.apk) .login-bottom-ul {
   list-style: none;
   display: flex;
   padding: 0;
   margin: 0;
}

:where(.apk) .ul-li {
   margin: 4px;
   padding: 7px;
}

:where(.apk) .w-9 {
   width: 6rem !important;
}
:where(.apk) .card {
   border: none;
   border-radius: 18px;
   background: var(--surf);
   box-shadow: var(--sh);
}

:where(.apk) .card-body {
   padding: 12px;
}

:where(.apk) .card-title {
   padding: 4px 0 8px;
   font-size: 13px;
   font-weight: 700;
   color: var(--dark);
   font-family: 'Plus Jakarta Sans', sans-serif;
   text-transform: uppercase;
   letter-spacing: .5px;
}

:where(.apk) .bg-danger {
   --bs-bg-opacity: 1;
   background: var(--gt) !important;
}

:where(.apk) .bg-success {
   --bs-bg-opacity: 1;
   background: linear-gradient(135deg, #16A34A, #22C55E) !important;
}
:where(.apk) .form-control {
   background-color: var(--surf) !important;
   border: none !important;
   border-radius: 12px !important;
   color: var(--dark) !important;
   box-shadow: var(--sh-inset) !important;
}

:where(.apk) .form-control:focus {
   background-color: var(--surf) !important;
   border-color: transparent !important;
   outline: 0;
   box-shadow: var(--sh-inset), 0 0 0 3px rgba(172, 99, 255, .18) !important;
}

:where(.apk) ::placeholder {
   color: var(--light) !important;
   opacity: 1;
}
:where(.apk) .header {
  transition: all .5s;
    z-index: 997;
    height: auto;
    min-height: 60px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px 14px;
    color: #FFFFFF;
    background: #7700FF;
    background-size: 200% 200%;
    animation: gmFlow 12s ease infinite;
    box-shadow: 0 4px 18px rgba(172, 99, 255, .30);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

:where(.apk) .header::after {
   content: '';
   position: absolute;
   top: -40px;
   right: -30px;
   width: 120px;
   height: 120px;
   background: rgba(255, 255, 255, .12);
   border-radius: 50%;
   pointer-events: none;
}

:where(.apk) .header::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .14) 50%, transparent 60%);
   background-size: 250% 250%;
   background-position: 200% 0;
   pointer-events: none;
   animation: headerSheen 7s ease-in-out infinite;
}

@keyframes headerSheen {
   0%, 60%, 100% { background-position: 200% 0; }
   80% { background-position: -50% 0; }
}

:where(.apk) .header .toggle-sidebar-btn,
:where(.apk) .tb-menu-btn {
   width: 40px;
   height: 40px;
   border: none;
   border-radius: 12px;
   background: rgba(255, 255, 255, .22);
   color: #FFFFFF !important;
   font-size: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   backdrop-filter: blur(6px);
   cursor: pointer;
   position: relative;
   z-index: 1;
   transition: background .2s ease, transform .15s ease;
}

:where(.apk) .header .toggle-sidebar-btn:active,
:where(.apk) .tb-menu-btn:active {
   transform: scale(.9);
   background: rgba(255, 255, 255, .4);
}

:where(.apk) .header .nav-profile {
   display: flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, .18);
   padding: 5px 14px 5px 5px;
   border-radius: 30px;
   text-decoration: none;
   position: relative;
   z-index: 1;
}

:where(.apk) .header .hdr-avatar {
   width: 32px;
   height: 32px;
   min-width: 32px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .28);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #FFFFFF;
   font-size: 16px;
   backdrop-filter: blur(6px);
}

:where(.apk) .header .hdr-username {
   font-size: 12.5px;
   font-weight: 700;
   color: #FFFFFF;
   max-width: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

@keyframes gmFlow {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}
:where(.apk) #main {
   margin-top: 0;
   padding: 8px 14px;
   transition: all .3s;
   margin-bottom: 5rem;
   background: transparent;
}

:where(.apk) .g-3 {
   --bs-gutter-y: 2px;
}

:where(.apk) .sidebar-nav .nav-item {
   margin-bottom: -2px;
}

:where(.apk) .bottom-nav {
border-radius: 10px;
    position: fixed;
    bottom: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 4px;
    z-index: 1000;
    background: #000000;
    box-shadow: var(--shh);
    animation: slideUp .45s cubic-bezier(.4, 0, .2, 1);
    border: 1px solid #7700FF;
}
:where(.apk) .bottom-nav a {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   color: #7700FF;
   padding: 6px 8px;
   border-radius: 18px;
   transition: all .3s cubic-bezier(.4, 0, .2, 1);
   position: relative;
   gap: 3px;
   -webkit-user-select: none;
   user-select: none;
}

:where(.apk) .bottom-nav a i {
   font-size: 20px;
   transition: all .3s ease;
}

:where(.apk) .bottom-nav a span {
   font-size: 10px;
   font-weight: 500;
   letter-spacing: .3px;
   white-space: nowrap;
   transition: all .3s ease;
}
:where(.apk) .bottom-nav a.active {
   color: var(--red);
}

:where(.apk) .bottom-nav a.active i {
   transform: translateY(-2px) scale(1.1);
   background: var(--gt);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

:where(.apk) .bottom-nav a.active span {
   font-weight: 700;
   color: var(--red);
}
:where(.apk) .bottom-nav a.active::after {
   content: '';
   position: absolute;
   inset: 4px 6px;
   box-shadow: var(--sh-inset);
   border-radius: 14px;
   z-index: -1;
}
:where(.apk) .bottom-nav a:active:not(:nth-child(3)) {
   transform: scale(.94);
}
:where(.apk) .bottom-nav a:nth-child(3) {
   flex: none;
   width: 58px;
   height: 58px;
   margin-top: -24px;
   border-radius: 50%;
   background: #7700FF;
   color: #FFFFFF;
   flex-direction: row;
   padding: 0;
   animation: navGlow 3s ease-in-out infinite;
   box-shadow: 0 10px 22px rgba(172, 99, 255, .4), 0 0 0 6px var(--surf) !important;
}

:where(.apk) .bottom-nav a:nth-child(3)::before,
:where(.apk) .bottom-nav a:nth-child(3)::after {
   display: none;
}

:where(.apk) .bottom-nav a:nth-child(3) i {
   font-size: 24px;
   margin: 0;
   color: #FFFFFF;
   transform: none !important;
   background: none !important;
   -webkit-text-fill-color: #FFFFFF !important;
}

:where(.apk) .bottom-nav a:nth-child(3) span {
   display: none;
}

:where(.apk) .bottom-nav a:nth-child(3):active {
   transform: scale(.92);
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
   :where(.apk) .bottom-nav {
      padding-bottom: env(safe-area-inset-bottom);
      height: calc(68px + env(safe-area-inset-bottom));
   }
}
@media (max-width: 360px) {
   :where(.apk) .bottom-nav a i {
      font-size: 19px;
   }

   :where(.apk) .bottom-nav a span {
      font-size: 9px;
   }

   :where(.apk) .bottom-nav a:nth-child(3) {
      width: 52px;
      height: 52px;
   }

   :where(.apk) .bottom-nav a:nth-child(3) i {
      font-size: 21px;
   }
}

@media (min-width: 768px) {
   :where(.apk) .bottom-nav {
      max-width: 480px;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      border-radius: 26px;
   }
}

:where(.apk) .indicator {
   display: none;
}

@media (max-width: 1199px) {
   :where(.apk) .sidebar {
      left: -434px;
   }
}
:where(.apk) .menu-bg {
background-image: linear-gradient(142.29deg, #86F3BC 21.8%, #B58CE3 73.22%);

   border-radius: 0 30px 30px 0 !important;
   padding: 0 0 16px;
   margin: 0;
   box-shadow: var(--shh) !important;
   border: none;
   animation: slideInLeft .3s cubic-bezier(.4, 0, .2, 1);
   display: flex;
   flex-direction: column;
   position: absolute;
   overflow: hidden;
}
:where(.apk) .menu-bg::before {
   content: '';
   position: absolute;
   top: -60px;
   right: -60px;
   width: 180px;
   height: 180px;
   background: radial-gradient(circle, rgba(172, 99, 255, .10), transparent 70%);
   border-radius: 50%;
   pointer-events: none;
}

:where(.apk) .menu-bg::after {
   content: '';
   position: absolute;
   bottom: 60px;
   left: -40px;
   width: 140px;
   height: 140px;
   background: radial-gradient(circle, rgba(91, 110, 245, .08), transparent 70%);
   border-radius: 50%;
   pointer-events: none;
}
:where(.apk) .sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 18px 16px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    background-image: linear-gradient(142.78deg, #B77BFC -22.92%, #FFDD95 122.49%);
        border-radius: 15px;
}


:where(.apk) .sidebar-header .sh-avatar {
   width: 50px;
   height: 50px;
   min-width: 50px;
   border-radius: 16px;
   background: var(--gt);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #FFFFFF;
   font-size: 24px;
   box-shadow: 0 8px 18px rgba(172, 99, 255, .30);
}

:where(.apk) .sidebar-header .sh-info {
   flex: 1;
   min-width: 0;
}

:where(.apk) .sidebar-header .sh-name {
   font-size: 14.5px;
   font-weight: 700;
   color: var(--dark);
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

:where(.apk) .sidebar-header .sh-code {
   font-size: 11.5px;
   color: var(--mid);
   margin: 2px 0 0;
}

:where(.apk) .sidebar-header .sh-close {
   width: 34px;
   height: 34px;
   min-width: 34px;
   border: none;
   border-radius: 10px;
   background: var(--surf);
   box-shadow: var(--sh-sm);
   color: var(--dark);
   font-size: 17px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background .2s ease, transform .15s ease, box-shadow .15s ease;
}

:where(.apk) .sidebar-header .sh-close:active {
   transform: scale(.94);
   box-shadow: var(--sh-inset);
}
:where(.apk) .menu-bg::-webkit-scrollbar {
   width: 4px;
}

:where(.apk) .menu-bg::-webkit-scrollbar-track {
   background: transparent;
}

:where(.apk) .menu-bg::-webkit-scrollbar-thumb {
   background: rgba(109, 102, 128, .28);
   border-radius: 10px;
}

:where(.apk) .menu-bg::-webkit-scrollbar-thumb:hover {
   background: rgba(109, 102, 128, .45);
}

@media (max-width: 768px) {
   :where(.apk) .menu-bg {
      border-radius: 0;
      width: 100%;
   }
}
:where(.apk) .menu-list-bg {
   background: transparent !important;
   color: var(--dark) !important;
   padding: 2px 10px !important;
   margin-top: 2px !important;
   border-radius: 0 !important;
   transition: none;
}
:where(.apk) .sidebar-nav .nav-link {
   display: flex !important;
   align-items: center !important;
   gap: 0 !important;
   font-size: 14px !important;
   font-weight: 500 !important;
   border-radius: 14px !important;
   text-transform: capitalize !important;
   box-shadow: none !important;
   letter-spacing: .25px !important;
   padding: 10px 14px !important;
   transition: all .25s ease !important;
   position: relative !important;
   color: var(--dark) !important;
   margin-bottom: 2px !important;
   animation: riseIn .35s ease backwards;
}

:where(.apk) .sidebar-nav .nav-item:nth-child(1) .nav-link { animation-delay: .02s; }
:where(.apk) .sidebar-nav .nav-item:nth-child(2) .nav-link { animation-delay: .05s; }
:where(.apk) .sidebar-nav .nav-item:nth-child(3) .nav-link { animation-delay: .08s; }
:where(.apk) .sidebar-nav .nav-item:nth-child(4) .nav-link { animation-delay: .11s; }
:where(.apk) .sidebar-nav .nav-item:nth-child(5) .nav-link { animation-delay: .14s; }
:where(.apk) .sidebar-nav .nav-item:nth-child(6) .nav-link { animation-delay: .17s; }
:where(.apk) .sidebar-nav .nav-item:nth-child(7) .nav-link { animation-delay: .20s; }
:where(.apk) .sidebar-nav .nav-item:nth-child(8) .nav-link { animation-delay: .23s; }
:where(.apk) .sidebar-nav .nav-item:nth-child(9) .nav-link { animation-delay: .26s; }

:where(.apk) .sidebar-nav .nav-link:hover {
   background: transparent !important;
   box-shadow: var(--sh-sm) !important;
   color: var(--red) !important;
   transform: translateX(4px);
}
:where(.apk) .sidebar-nav .nav-link.active {
   background: transparent !important;
   box-shadow: var(--sh-inset) !important;
   color: var(--red) !important;
   border: none !important;
}
:where(.apk) .sidebar-nav .nav-link.active::before {
   content: '';
   position: absolute;
   left: 0;
   top: 20%;
   bottom: 20%;
   width: 4px;
   background: var(--gt);
   border-radius: 0 6px 6px 0;
}

:where(.apk) .sidebar-nav .nav-link:active {
   transform: scale(.97);
}

:where(.apk) .sidebar-nav .nav-link:focus {
   outline: 2px solid rgba(172, 99, 255, .4);
   outline-offset: 2px;
}
:where(.apk) .sidebar-nav .nav-link i {
font-size: 17px !important;
    margin-right: 14px !important;
    color: #FFFFFF !important;
    border-radius: 40px !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all .25s ease !important;
    background: #000000 !important;
    box-shadow: var(--sh-sm) !important;
}

:where(.apk) .sidebar-nav .nav-link:hover i {
   background: var(--gt) !important;
   color: #FFFFFF !important;
   box-shadow: 0 6px 16px rgba(172, 99, 255, .38) !important;
   transform: scale(1.1) !important;
}

:where(.apk) .sidebar-nav .nav-link.active i {
   background: var(--gt) !important;
   color: #FFFFFF !important;
   box-shadow: 0 6px 16px rgba(172, 99, 255, .42) !important;
}

:where(.apk) .sidebar-nav .nav-link.collapsed i {
   color: var(--mid) !important;
}
:where(.apk) .sidebar-nav .nav-content a {
   display: flex;
   align-items: center;
   font-size: 13px;
   font-weight: 500;
   color: var(--mid);
   padding: 9px 14px 9px 56px;
   border-radius: 10px;
   letter-spacing: .2px;
   transition: all .25s ease;
   text-decoration: none;
}

:where(.apk) .sidebar-nav .nav-content a::before {
   content: '';
   width: 6px;
   height: 6px;
   background: rgba(109, 102, 128, .35);
   border-radius: 50%;
   margin-right: 10px;
   flex-shrink: 0;
   transition: all .25s ease;
}

:where(.apk) .sidebar-nav .nav-content a:hover {
   color: var(--red);
   background: transparent;
   box-shadow: var(--sh-sm);
   padding-left: 60px;
}

:where(.apk) .sidebar-nav .nav-content a:hover::before {
   background: var(--red);
   box-shadow: 0 0 6px rgba(172, 99, 255, .55);
}
:where(.apk) .sidebar-nav .nav-link .badge {
   margin-left: auto;
   background: var(--gt);
   color: #FFFFFF;
   font-size: 10px;
   font-weight: 700;
   padding: 2px 8px;
   border-radius: 12px;
   min-width: 20px;
   text-align: center;
}
:where(.apk) .sidebar-nav .nav-link[data-bs-toggle="collapse"]::after {
   content: '\f282';
   font-family: 'bootstrap-icons';
   font-weight: 400;
   margin-left: auto;
   color: rgba(109, 102, 128, .4);
   font-size: 13px;
   transition: transform .3s ease, color .25s ease;
}

:where(.apk) .sidebar-nav .nav-link[data-bs-toggle="collapse"]:not(.collapsed)::after {
   transform: rotate(-180deg);
   color: var(--red);
}
:where(.apk) .sidebar-nav .nav-link.version-note {
   background: transparent !important;
   border: none !important;
   justify-content: center !important;
   padding: 10px 14px 4px !important;
   opacity: .55;
   cursor: default;
}

:where(.apk) .sidebar-nav .nav-link.version-note:hover {
   background: transparent !important;
   box-shadow: none !important;
   transform: none;
}

:where(.apk) .sidebar-nav .nav-link.version-note i {
   width: 22px !important;
   height: 22px !important;
   font-size: 13px !important;
   margin-right: 8px !important;
   background: transparent !important;
   box-shadow: none !important;
}

:where(.apk) .sidebar-nav .nav-link.version-note span {
   font-size: 11.5px !important;
}


/* ==========================================================================
   Desktop auth pages (login / register / forgot)
   scope: html.auth-web
   ========================================================================== */
:root:where(.auth-web) {
  --bg-deep: #F8F6FA;
  --bg: #F0EAF6;
  --card: rgba(255, 255, 255, 0.68);
  --card-border: rgba(76, 13, 148, 0.16);
  --ink: #191023;
  --muted: #6C6482;
  --line: rgba(25, 16, 35, 0.08);
  --sun: #4C0D94;
  --sun-2: #FBC871;
  --solar-blue: #FBC871;
  --solar-cyan: #E1991D;
  --eco-lime: #F59E0B;
  --panel-grid: rgba(76, 13, 148,0.05);
  --radius: 18px;
  --radius-lg: 26px;
  --color-text-muted: var(--muted);
  --font-size-sm: 12.5px;
}
:where(.auth-web) * { box-sizing: border-box; margin: 0; padding: 0; }
:where(.auth-web) body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg-deep);
  color: var(--ink);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow-x: hidden;
  position: relative;
}
:where(.auth-web) body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 10% 10%, rgba(76, 13, 148,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 92% 15%, rgba(251, 200, 113,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 95%, rgba(245, 158, 11,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 8% 92%, rgba(76, 13, 148,0.12) 0%, transparent 55%);
  z-index: -3;
}
:where(.auth-web) body::after {
  content: '';
  position: fixed;
  width: 620px; height: 620px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(76, 13, 148,0.20) 0%, rgba(251, 200, 113,0.14) 40%, transparent 70%);
  filter: blur(50px);
  border-radius: 50%;
  animation: auroraPulse 6s ease-in-out infinite;
  z-index: -2;
}
@keyframes auroraPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}
:where(.auth-web) .register-card {
  isolation: isolate;
  width: 100%;
  max-width: 440px;
  background: var(--card);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 38px 32px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255,0.6) inset,
    0 24px 60px rgba(25, 16, 35,0.10),
    0 8px 24px rgba(76, 13, 148,0.10);
  animation: cardRise 0.7s cubic-bezier(0.16,1,0.3,1) both, cardBreathe 5s ease-in-out 0.7s infinite;
}

@keyframes cardRise {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cardBreathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255,0.6) inset, 0 24px 60px rgba(25, 16, 35,0.10), 0 8px 24px rgba(76, 13, 148,0.10); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 255, 255,0.6) inset, 0 24px 60px rgba(25, 16, 35,0.10), 0 8px 36px rgba(76, 13, 148,0.20); }
}
:where(.auth-web) .register-card::before {
  content: '';
  position: absolute;
  top: -70px; right: -70px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(251, 200, 113,0.32) 0%, rgba(76, 13, 148,0.16) 45%, transparent 70%);
  filter: blur(10px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
:where(.auth-web) .register-card::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sun), var(--eco-lime), transparent);
  opacity: 0.5;
}

:where(.auth-web) .register-card > * { position: relative; z-index: 1; }
:where(.auth-web) .logo-img {
  width: 44%;
  height: 117px;
  display: block;
  margin: 0 auto 16px;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(76, 13, 148,0.25));
  animation: logoFloat 4.5s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
:where(.auth-web) .auth-eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sun);
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0 auto 16px;
  width: fit-content;
  padding: 6px 14px;
  background: rgba(76, 13, 148,0.08);
  border: 1px solid rgba(76, 13, 148,0.20);
  border-radius: 999px;
}
:where(.auth-web) .auth-eyebrow::before { content: '✦'; font-size: 11px; color: var(--eco-lime); animation: sway 2.4s ease-in-out infinite; transform-origin: bottom center; }
@keyframes sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

:where(.auth-web) h4 {
  font-family: 'Instrument Serif', serif;
  font-size: 34px; font-weight: 400; line-height: 1; letter-spacing: -0.02em;
  text-align: center;
  color: var(--ink);
  position: relative;
  padding-bottom: 14px;
}
:where(.auth-web) h4::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 46px; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, var(--sun), var(--sun-2), var(--eco-lime));
}

:where(.auth-web) .auth-subtitle {
  text-align: center; color: var(--muted); font-size: 13.5px;
  margin: 8px 0 26px; line-height: 1.5;
}
:where(.auth-web) label, :where(.auth-web) .captcha-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
:where(.auth-web) label::before {
  content: ''; width: 4px; height: 4px; background: var(--sun-2); border-radius: 50%;
  box-shadow: 0 0 6px rgba(251, 200, 113,0.6);
}
:where(.auth-web) .input-icon-group { position: relative; margin-bottom: 16px; }
:where(.auth-web) .input-icon-group > i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px;
  background: rgba(25, 16, 35,0.04);
  border-radius: 50%;
  transition: 0.3s ease;
}

:where(.auth-web) .form-control, :where(.auth-web) select {
  width: 100%;
  padding: 14px 16px 14px 48px;
  font-size: 14.5px; font-weight: 500;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(25, 16, 35,0.08);
  border-radius: 14px;
  outline: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255,0.6) inset;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  position: relative;
}

:where(.auth-web) .form-control::placeholder { color: #9994A9; }
:where(.auth-web) .form-control:focus, :where(.auth-web) select:focus {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--sun);
  box-shadow: 0 0 0 4px rgba(76, 13, 148,0.14), 0 4px 16px rgba(76, 13, 148,0.12);
  transform: translateY(-1px);
  color: var(--sun);
}
:where(.auth-web) .input-icon-group:focus-within > i { color: var(--sun); background: rgba(76, 13, 148,0.14); transform: translateY(-50%) scale(1.1); }

:where(.auth-web) select { color: var(--ink); }
:where(.auth-web) select:invalid { color: #9994A9; }
:where(.auth-web) .form-check-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 18px;
  flex-wrap: wrap; gap: 8px;
}
:where(.auth-web) .form-check { display: flex; align-items: center; gap: 8px; }
:where(.auth-web) .form-check-input {
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--sun);
  background-color: rgba(255, 255, 255,0.8);
  border: 1px solid rgba(25, 16, 35,0.2);
  cursor: pointer;
}
:where(.auth-web) .form-check-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
:where(.auth-web) .button-33 {
  width: 100%;
  padding: 15px;
  margin-top: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: #FFFFFF;
  background: linear-gradient(100deg, var(--sun) 0%, var(--sun-2) 55%, var(--eco-lime) 100%);
  background-size: 200% auto;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  position: relative; overflow: hidden;
  box-shadow: 0 10px 26px rgba(76, 13, 148,0.30), 0 0 0 1px rgba(76, 13, 148,0.25) inset;
  transition: all 0.3s ease;
}

:where(.auth-web) .button-33::before {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%; height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255,0.35), transparent);
  border-radius: 999px 999px 50% 50%;
  pointer-events: none;
}

:where(.auth-web) .button-33::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255,0.4), transparent);
  transform: translateX(-100%) skewX(-15deg);
  transition: transform 0.6s ease;
}

:where(.auth-web) .button-33:hover {
  transform: translateY(-2px) scale(1.01);
  background-position: right center;
  box-shadow: 0 14px 34px rgba(76, 13, 148,0.40), 0 0 30px rgba(251, 200, 113,0.28);
}
:where(.auth-web) .button-33:hover::after { transform: translateX(100%) skewX(-15deg); }
:where(.auth-web) .captcha-container {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
:where(.auth-web) #captchaCanvas {
  border-radius: 12px; border: 1px solid rgba(25, 16, 35,0.1);
  background: rgba(255, 255, 255,0.6);
  flex: 1; min-width: 0;
}
:where(.auth-web) .refresh-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace; font-size: 14px;
  background: linear-gradient(135deg, var(--sun), var(--sun-2)); color: #FFFFFF; border: none; border-radius: 50%;
  font-weight: 700; cursor: pointer; transition: 0.3s ease;
  box-shadow: 0 4px 12px rgba(76, 13, 148,0.35);
}
:where(.auth-web) .refresh-btn:hover { transform: rotate(180deg) scale(1.08); }
:where(.auth-web) a { color: var(--solar-cyan); font-size: 13px; font-weight: 600; text-decoration: none; border-bottom: 1px dashed rgba(225, 153, 29,0.35); }
:where(.auth-web) a:hover { color: var(--sun); border-bottom-color: var(--sun); }

:where(.auth-web) .auth-links {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid rgba(25, 16, 35,0.08);
  position: relative;
  text-align: center;
}
:where(.auth-web) .auth-links::before {
  content: '✦ 100% Secure';
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--bg-deep); padding: 0 10px;
  font-family: 'Geist Mono', monospace; font-size: 9px; color: var(--sun);
  letter-spacing: 0.15em; text-transform: uppercase;
}
:where(.auth-web) .auth-links-inline {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
:where(.auth-web) .auth-links-inline .sep { color: var(--muted); border: none; font-size: 12px; }

:where(.auth-web) .alert-success {
  background: linear-gradient(135deg, rgba(245, 158, 11,0.14), rgba(76, 13, 148,0.14)) !important;
  border: 1px solid rgba(76, 13, 148,0.3) !important;
  color: var(--ink) !important; border-radius: 14px;
}


/* ==========================================================================
   Mobile app components
   scope: html.mapp
   ========================================================================== */
:where(.mapp) *, :where(.mapp) *::before, :where(.mapp) *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-tap-highlight-color: transparent;
}
:root:where(.mapp) {
   --brand-50:  #F7F0FF;
   --brand-100: #EDDEFF;
   --brand-200: #DCBEFF;
   --brand-400: #B06BFF;
   --brand-500: #9D47FF;
   --brand-600: #8933EC;
   --brand-700: #6D1EC8;
   --amber:     #FFB020;
   --amber-soft:#FFF3D6;
   --mint:      #10B981;
   --mint-soft: #D6F5E6;
   --sky:       #2E90FA;
   --sky-soft:  #E0EFFE;
   --violet:    #A85CFF;
   --violet-soft:#F2E7FF;
   --ink-900: #16141A;
   --ink-700: #34323A;
   --ink-500: #625E6E;
   --ink-300: #9591A2;
   --ink-100: #C4C1CB;
   --paper:        #FBF8F7;
   --paper-raised: #FFFFFF;
   --paper-sunken: #F3EEEC;
   --paper-edge:   #E7E3EC;
   --hairline:     #E0DDE7;
   --r-xs: 8px;
   --r-sm: 12px;
   --r-md: 18px;
   --r-lg: 22px;
   --r-xl: 28px;
   --r-2xl: 34px;
   --r-pill: 999px;
   --lift-0: none;
   --lift-1: 0 1px 2px rgba(22, 20, 26,.04), 0 2px 6px -2px rgba(22, 20, 26,.06);
   --lift-2: 0 2px 4px rgba(22, 20, 26,.04), 0 8px 18px -6px rgba(22, 20, 26,.10);
   --lift-3: 0 4px 10px rgba(22, 20, 26,.06), 0 18px 38px -12px rgba(22, 20, 26,.16);
   --lift-brand: 0 8px 20px -6px rgba(157, 71, 255,.45);
   --lift-brand-lg: 0 14px 34px -10px rgba(157, 71, 255,.55);
   --ease-out: cubic-bezier(.22, 1, .36, 1);
   --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
   --dur-1: .16s;
   --dur-2: .28s;
   --dur-3: .5s;
   --red: var(--brand-500);
   --red-dark: var(--brand-600);
   --red-soft: var(--brand-50);
   --blue: var(--sky);
   --purple: var(--violet);
   --pink: #F472B6;
   --teal: var(--mint);
   --orange: var(--amber);
   --yellow: #FBBF24;
   --green: var(--mint);
   --green-dark: #0E9F6E;
   --ink: var(--ink-900);
   --ink-soft: var(--ink-500);
   --muted: var(--ink-300);
   --cream: var(--paper-sunken);
   --surface: var(--paper-raised);
   --card: var(--paper-raised);
   --border-soft: var(--hairline);
   --white: #FFFFFF;
   --radius-lg: var(--r-2xl);
   --radius-md: var(--r-lg);
   --radius-sm: var(--r-md);
   --radius-full: var(--r-pill);
   --pop-sm: var(--lift-1);
   --pop-md: var(--lift-2);
   --pop-lg: var(--lift-3);
   --shadow-btn: var(--lift-brand);

   --safe-t: env(safe-area-inset-top, 0px);
   --safe-b: env(safe-area-inset-bottom, 0px);
}
:where(.mapp) body {
   font-family: 'Plus Jakarta Sans', 'Google Sans', 'Segoe UI',
                system-ui, -apple-system, sans-serif;
   font-feature-settings: 'ss01', 'cv11';
   min-height: 100vh;
   color: var(--ink-900);
   background: var(--paper);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   letter-spacing: -0.005em;
}

:where(.mapp) .app-auth-screen,
:where(.mapp) .inner-screen,
:where(.mapp) .welcome-screen { position: relative; }
:where(.mapp) .app-auth-screen {
   min-height: 100vh;
   min-height: 100dvh;
   max-width: 480px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   position: relative;
   background:
      radial-gradient(120% 55% at 50% -10%, #E9D6FF 0%, transparent 55%),
      radial-gradient(80% 40% at 100% 5%, #FFE9CE 0%, transparent 60%),
      var(--paper);
}
:where(.mapp) .app-auth-screen::before {
   content: '';
   position: absolute;
   top: -120px; right: -120px;
   width: 320px; height: 320px;
   border-radius: 50%;
   background: radial-gradient(circle,
               rgba(157, 71, 255,.28) 0%,
               rgba(157, 71, 255,.08) 40%,
               transparent 70%);
   filter: blur(8px);
   pointer-events: none;
   z-index: 0;
}

:where(.mapp) .app-auth-screen::after {
   content: '';
   position: absolute;
   bottom: -100px; left: -100px;
   width: 260px; height: 260px;
   border-radius: 50%;
   background: radial-gradient(circle,
               rgba(255, 176, 32,.18) 0%,
               transparent 65%);
   filter: blur(10px);
   pointer-events: none;
   z-index: 0;
}
:where(.mapp) .app-topbar {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: calc(18px + var(--safe-t)) 20px 6px;
   background: transparent;
   position: relative;
   z-index: 3;
}

:where(.mapp) .app-topbar .tb-back,
:where(.mapp) .app-topbar .tb-spacer {
   width: 44px; height: 44px; min-width: 44px;
   border-radius: var(--r-md);
}

:where(.mapp) .app-topbar .tb-back {
   display: flex; align-items: center; justify-content: center;
   background: var(--paper-raised);
   border: 1px solid var(--hairline);
   color: var(--ink-900);
   font-size: 19px;
   text-decoration: none;
   box-shadow: var(--lift-1);
   position: relative;
   overflow: hidden;
   transition: transform var(--dur-1) var(--ease-out),
               box-shadow var(--dur-1) var(--ease-out);
}
:where(.mapp) .app-topbar .tb-back::after {
   content: '';
   position: absolute; inset: 0;
   background: radial-gradient(circle at 50% 50%,
               rgba(157, 71, 255,.22), transparent 65%);
   opacity: 0;
   transition: opacity var(--dur-2) var(--ease-out);
   pointer-events: none;
}
:where(.mapp) .app-topbar .tb-back:active {
   transform: scale(.9);
   box-shadow: var(--lift-0);
}
:where(.mapp) .app-topbar .tb-back:active::after { opacity: 1; transition-duration: .04s; }

:where(.mapp) .app-topbar .tb-title {
   flex: 1;
   text-align: center;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: -0.01em;
   color: var(--ink-900);
}
:where(.mapp) .app-body {
   flex: 1 1 auto;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   padding: 18px 22px 28px;
   position: relative;
   z-index: 1;
}
:where(.mapp) .app-brand { text-align: center; margin-bottom: 32px; }

:where(.mapp) .app-brand .brand-badge {
   width: 92px; height: 92px;
   margin: 0 auto 22px;
   border-radius: 30px;
   display: flex; align-items: center; justify-content: center;
   position: relative;
   background:
      linear-gradient(140deg, #FFFFFF 0%, #FAF5FF 100%);
   box-shadow:
      0 0 0 1px rgba(157, 71, 255,.10),
      0 22px 40px -16px rgba(157, 71, 255,.35),
      inset 0 1px 0 #FFFFFF;
}
:where(.mapp) .app-brand .brand-badge::after {
   content: '';
   position: absolute;
   top: 10px; right: 10px;
   width: 10px; height: 10px;
   border-radius: 3px;
   background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
   box-shadow: 0 3px 8px -2px rgba(157, 71, 255,.6);
}

:where(.mapp) .app-brand .brand-badge img { width: 100px; object-fit: contain; }

:where(.mapp) .app-brand h1 {
   font-size: 28px;
   font-weight: 800;
   letter-spacing: -0.035em;
   line-height: 1.1;
   color: var(--ink-900);
   margin-bottom: 8px;
}
:where(.mapp) .app-brand p {
   font-size: 14px;
   color: var(--ink-500);
   font-weight: 500;
   letter-spacing: -0.005em;
}
:where(.mapp) .app-icon-block {
   width: 78px; height: 78px;
   margin: 4px auto 22px;
   border-radius: 26px;
   background: linear-gradient(140deg, #F1E4FF 0%, #E4CDFF 100%);
   display: flex; align-items: center; justify-content: center;
   box-shadow:
      inset 0 1px 0 rgba(255, 255, 255,.7),
      0 10px 24px -10px rgba(157, 71, 255,.35);
   position: relative;
}
:where(.mapp) .app-icon-block i { font-size: 30px; color: var(--brand-600); }

:where(.mapp) .app-form-title {
   font-size: 24px;
   font-weight: 800;
   letter-spacing: -0.03em;
   color: var(--ink-900);
   margin-bottom: 8px;
   text-align: center;
}
:where(.mapp) .app-form-sub {
   font-size: 14px;
   color: var(--ink-500);
   font-weight: 500;
   letter-spacing: -0.005em;
   margin-bottom: 26px;
   text-align: center;
   line-height: 1.55;
}

:where(.mapp) .field-label {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.14em;
   color: var(--ink-300);
   margin: 0 0 10px 4px;
}
:where(.mapp) .field-label::before {
   content: '';
   width: 6px; height: 6px;
   border-radius: 2px;
   background: var(--brand-500);
   box-shadow: 0 0 0 3px var(--brand-50);
}

:where(.mapp) .mini-link {
   color: var(--brand-500);
   font-weight: 700;
   font-size: 13.5px;
   text-decoration: none;
   letter-spacing: -0.005em;
   transition: color var(--dur-1) var(--ease-out);
}
:where(.mapp) .mini-link:hover { color: var(--brand-700); text-decoration: underline; }
:where(.mapp) .app-cta-dock {
   flex: 0 0 auto;
   position: relative;
   z-index: 3;
   padding: 10px 16px calc(14px + var(--safe-b));
   background: transparent;
}
:where(.mapp) .app-cta-dock::before {
   content: '';
   position: absolute;
   inset: 0 12px calc(6px + var(--safe-b)) 12px;
   border-radius: var(--r-2xl);
   background: rgba(255, 255, 255,.72);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
   border: 1px solid rgba(255, 255, 255,.9);
   box-shadow:
      0 -1px 0 rgba(22, 20, 26,.03),
      0 20px 40px -18px rgba(22, 20, 26,.22);
   z-index: -1;
}
:where(.mapp) .app-cta-dock .dock-links {
   text-align: center;
   margin-top: 16px;
   font-size: 13.5px;
   color: var(--ink-500);
   font-weight: 500;
}
:where(.mapp) .app-cta-dock .dock-links a {
   color: var(--brand-500);
   font-weight: 700;
   text-decoration: none;
}
:where(.mapp) .app-cta-dock .dock-links a:hover { text-decoration: underline; }
:where(.mapp) .field-wrap {
   position: relative;
   margin-bottom: 18px;
}

:where(.mapp) .field-wrap .f-icon {
   position: absolute;
   left: 18px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 17px;
   color: var(--ink-300);
   pointer-events: none;
   z-index: 1;
   transition: color var(--dur-1) var(--ease-out),
               transform var(--dur-2) var(--ease-spring);
}
:where(.mapp) .field-wrap:focus-within .f-icon {
   color: var(--brand-500);
   transform: translateY(-50%) scale(1.1);
}

:where(.mapp) .field-wrap.textarea-wrap .f-icon {
   top: 18px;
   transform: none;
}
:where(.mapp) .field-wrap.textarea-wrap:focus-within .f-icon {
   transform: scale(1.1);
}

:where(.mapp) .field-wrap input,
:where(.mapp) .field-wrap select,
:where(.mapp) .field-wrap textarea {
   width: 100%;
   padding: 17px 18px 17px 50px;
   border: 1px solid var(--hairline);
   border-radius: var(--r-lg);
   font-family: inherit;
   font-size: 14.5px;
   font-weight: 500;
   letter-spacing: -0.005em;
   color: var(--ink-900);
   background: var(--paper-raised);
   outline: none;
   appearance: none;
   -webkit-appearance: none;
   box-shadow: var(--lift-1);
   transition: border-color var(--dur-1) var(--ease-out),
               box-shadow var(--dur-2) var(--ease-out),
               background var(--dur-1) var(--ease-out);
}

:where(.mapp) .field-wrap textarea {
   min-height: 118px;
   resize: none;
   padding-top: 17px;
   border-radius: var(--r-lg);
}

:where(.mapp) .field-wrap input:focus,
:where(.mapp) .field-wrap select:focus,
:where(.mapp) .field-wrap textarea:focus {
   border-color: var(--brand-400);
   box-shadow:
      0 0 0 4px var(--brand-50),
      var(--lift-2);
}
:where(.mapp) .field-wrap input::placeholder,
:where(.mapp) .field-wrap textarea::placeholder {
   color: var(--ink-300);
   font-weight: 500;
}
:where(.mapp) .field-wrap select {
   background-image:
      linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
      linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
   background-position:
      calc(100% - 22px) calc(50% - 2px),
      calc(100% - 16px) calc(50% - 2px);
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
   padding-right: 44px;
}

:where(.mapp) .field-wrap .sponsor-status {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.02em;
   margin-top: 8px;
   margin-left: 6px;
   display: block;
}
:where(.mapp) .btn-app {
   display: block;
   width: 100%;
   padding: 17px 24px;
   background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%);
   color: #FFFFFF;
   font-family: inherit;
   font-size: 15px;
   font-weight: 700;
   letter-spacing: -0.005em;
   border: none;
   border-radius: var(--r-pill);
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   box-shadow:
      inset 0 1px 0 rgba(255, 255, 255,.35),
      var(--lift-brand);
   position: relative;
   overflow: hidden;
   margin-top: 12px;
   transition: transform var(--dur-1) var(--ease-out),
               box-shadow var(--dur-2) var(--ease-out),
               filter var(--dur-1) var(--ease-out);
}
:where(.mapp) .btn-app::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 50% 50%,
               rgba(255, 255, 255,.45), transparent 55%);
   opacity: 0;
   transition: opacity var(--dur-2) var(--ease-out);
   pointer-events: none;
}
:where(.mapp) .btn-app:hover {
   color: #FFFFFF;
   filter: brightness(1.04);
   box-shadow:
      inset 0 1px 0 rgba(255, 255, 255,.4),
      var(--lift-brand-lg);
}
:where(.mapp) .btn-app:active {
   transform: translateY(1px) scale(.985);
   box-shadow:
      inset 0 1px 0 rgba(255, 255, 255,.2),
      0 4px 12px -4px rgba(157, 71, 255,.5);
}
:where(.mapp) .btn-app:active::after { opacity: 1; transition-duration: .05s; }
:where(.mapp) .check-wrap {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   margin-bottom: 10px;
}
:where(.mapp) .check-wrap input[type=checkbox] {
   width: 22px;
   height: 22px;
   min-width: 22px;
   accent-color: var(--brand-500);
   cursor: pointer;
   margin-top: 1px;
   border-radius: 7px;
}
:where(.mapp) .check-wrap label {
   font-size: 13px;
   color: var(--ink-500);
   cursor: pointer;
   line-height: 1.55;
   font-weight: 500;
   letter-spacing: -0.005em;
}
:where(.mapp) .check-wrap label a {
   color: var(--brand-500);
   font-weight: 700;
   text-decoration: underline;
}
:where(.mapp) .captcha-block {
   background: var(--paper-sunken);
   border: 1px solid var(--hairline);
   border-radius: var(--r-lg);
   padding: 18px;
   margin-bottom: 20px;
   box-shadow: inset 0 1px 2px rgba(22, 20, 26,.04);
}
:where(.mapp) .captcha-block label {
   font-size: 10.5px;
   font-weight: 800;
   color: var(--ink-300);
   text-transform: uppercase;
   letter-spacing: 0.16em;
   margin-bottom: 12px;
   display: block;
}
:where(.mapp) .captcha-block canvas {
   border-radius: var(--r-sm);
   border: 1px solid var(--hairline);
   display: block;
   margin-bottom: 12px;
   max-width: 100%;
   background: #FFFFFF;
}

:where(.mapp) .captcha-refresh {
   background: var(--paper-raised);
   color: var(--brand-500);
   border: 1px solid var(--hairline);
   border-radius: var(--r-pill);
   padding: 9px 20px;
   font-family: inherit;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   margin-bottom: 12px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   box-shadow: var(--lift-1);
   transition: transform .5s var(--ease-out),
               box-shadow var(--dur-1) var(--ease-out);
}
:where(.mapp) .captcha-refresh:hover {
   transform: rotate(180deg);
   box-shadow: var(--lift-2);
}
:where(.mapp) .inner-screen {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   max-width: 480px;
   margin: 0 auto;
   overflow: hidden;
   background: linear-gradient(150deg,
               var(--brand-500) 0%,
               #A75AFF 55%,
               var(--amber) 130%);
   position: relative;
}
:where(.mapp) .inner-screen::before {
   content: '';
   position: absolute;
   top: -60px; left: -80px;
   width: 240px; height: 240px;
   border-radius: 50%;
   background: radial-gradient(circle,
               rgba(255, 255, 255,.35) 0%, transparent 65%);
   filter: blur(6px);
   pointer-events: none;
}
:where(.mapp) .inner-screen::after {
   content: '';
   position: absolute;
   top: 40px; right: -70px;
   width: 200px; height: 200px;
   border-radius: 50%;
   background: radial-gradient(circle,
               rgba(255, 176, 32,.55) 0%, transparent 65%);
   filter: blur(8px);
   pointer-events: none;
}

:where(.mapp) .inner-header {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: calc(40px + var(--safe-t)) 22px 30px;
   position: relative;
   z-index: 1;
}
:where(.mapp) .inner-header .back-btn {
   width: 46px; height: 46px;
   background: rgba(255, 255, 255,.22);
   border: 1px solid rgba(255, 255, 255,.35);
   border-radius: var(--r-md);
   display: flex; align-items: center; justify-content: center;
   color: #FFFFFF;
   font-size: 22px;
   text-decoration: none;
   flex-shrink: 0;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   box-shadow: 0 6px 16px -6px rgba(0, 0, 0,.28);
   transition: transform var(--dur-1) var(--ease-out),
               background var(--dur-1) var(--ease-out);
}
:where(.mapp) .inner-header .back-btn:hover { color: #FFFFFF; background: rgba(255, 255, 255,.32); }
:where(.mapp) .inner-header .back-btn:active { transform: scale(.9); }

:where(.mapp) .inner-header .page-title {
   font-size: 24px;
   font-weight: 800;
   letter-spacing: -0.03em;
   color: #FFFFFF;
   margin: 0;
   text-shadow: 0 2px 8px rgba(0, 0, 0,.08);
}
:where(.mapp) .inner-header .logo-sm img {
   width: 46px; height: 46px;
   object-fit: contain;
   border-radius: var(--r-md);
   background: #FFFFFF;
   box-shadow: 0 6px 16px -6px rgba(0, 0, 0,.28);
}
:where(.mapp) .inner-card {
   background: var(--paper);
   border-radius: var(--r-2xl) var(--r-2xl) 0 0;
   flex: 1;
   padding: 26px 22px calc(46px + var(--safe-b));
   animation: slideUp var(--dur-3) var(--ease-out);
   overflow: hidden;
   position: relative;
   z-index: 1;
   box-shadow: 0 -20px 44px -20px rgba(0, 0, 0,.28);
}
:where(.mapp) .inner-card::before {
   content: '';
   position: absolute;
   top: 12px;
   left: 50%;
   transform: translateX(-50%);
   width: 40px; height: 4px;
   border-radius: var(--r-pill);
   background: var(--ink-100);
}

:where(.mapp) .inner-scroll {
   max-height: 62vh;
   overflow-y: auto;
   padding-right: 6px;
   scrollbar-width: thin;
   scrollbar-color: var(--ink-100) transparent;
   margin-bottom: 18px;
}
:where(.mapp) .inner-scroll::-webkit-scrollbar { width: 4px; }
:where(.mapp) .inner-scroll::-webkit-scrollbar-thumb {
   background: var(--ink-100);
   border-radius: var(--r-pill);
}
:where(.mapp) .inner-card h4 {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: var(--ink-900);
   margin: 22px 0 10px;
}
:where(.mapp) .inner-card h4::before {
   content: '';
   width: 4px; height: 16px;
   border-radius: var(--r-pill);
   background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
   box-shadow: 0 0 10px rgba(157, 71, 255,.45);
   flex-shrink: 0;
}

:where(.mapp) .inner-card p {
   font-size: 14px;
   color: var(--ink-500);
   line-height: 1.72;
   letter-spacing: -0.005em;
   margin-bottom: 10px;
}
:where(.mapp) .inner-card ul { padding-left: 4px; margin-bottom: 10px; list-style: none; }
:where(.mapp) .inner-card ul li {
   font-size: 14px;
   color: var(--ink-500);
   margin-bottom: 8px;
   line-height: 1.65;
   padding-left: 20px;
   position: relative;
}
:where(.mapp) .inner-card ul li::before {
   content: '';
   position: absolute;
   left: 4px; top: 9px;
   width: 6px; height: 6px;
   border-radius: 2px;
   background: var(--brand-400);
}
:where(.mapp) .inner-card strong { color: var(--ink-900); font-weight: 700; }
:where(.mapp) .ci-row {
   display: flex;
   align-items: center;
   gap: 14px;
   background: var(--paper-raised);
   border: 1px solid var(--hairline);
   border-radius: var(--r-lg);
   padding: 14px 16px;
   margin-bottom: 12px;
   box-shadow: var(--lift-1);
   position: relative;
   overflow: hidden;
   transition: transform var(--dur-1) var(--ease-out),
               box-shadow var(--dur-1) var(--ease-out);
}
:where(.mapp) .ci-row::before {
   content: '';
   position: absolute;
   left: 0; top: 14%; bottom: 14%;
   width: 3px;
   border-radius: 0 var(--r-pill) var(--r-pill) 0;
   background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
   opacity: 0;
   transition: opacity var(--dur-2) var(--ease-out);
}
:where(.mapp) .ci-row:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
:where(.mapp) .ci-row:hover::before { opacity: 1; }

:where(.mapp) .ci-icon {
   width: 46px; height: 46px;
   border-radius: 16px;
   display: flex; align-items: center; justify-content: center;
   flex-shrink: 0;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255,.35);
}
:where(.mapp) .ci-icon i { font-size: 20px; color: #FFFFFF; }

:where(.mapp) .ci-row:nth-child(3n+1) .ci-icon {
   background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
}
:where(.mapp) .ci-row:nth-child(3n+2) .ci-icon {
   background: linear-gradient(135deg, #5AA6FF, var(--sky));
}
:where(.mapp) .ci-row:nth-child(3n+3) .ci-icon {
   background: linear-gradient(135deg, #3ADBB0, var(--mint));
}

:where(.mapp) .ci-text p {
   margin: 0;
   font-size: 10.5px;
   color: var(--ink-300);
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.14em;
}
:where(.mapp) .ci-text strong {
   font-size: 14px;
   color: var(--ink-900);
   display: block;
   margin-top: 3px;
   font-weight: 700;
   letter-spacing: -0.005em;
}
:where(.mapp) .inner-divider {
   display: flex;
   align-items: center;
   gap: 14px;
   margin: 26px 0 18px;
   font-size: 10.5px;
   color: var(--ink-300);
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.16em;
}
:where(.mapp) .inner-divider::before,
:where(.mapp) .inner-divider::after {
   content: '';
   flex: 1;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
:where(.mapp) .welcome-screen {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   max-width: 480px;
   margin: 0 auto;
   overflow: hidden;
   position: relative;
   background: linear-gradient(155deg,
               var(--brand-500) 0%,
               #A75AFF 60%,
               var(--amber) 130%);
}
:where(.mapp) .welcome-screen::before {
   content: '';
   position: absolute;
   top: -80px; right: -60px;
   width: 280px; height: 280px;
   border-radius: 50%;
   background: radial-gradient(circle,
               rgba(255, 255, 255,.28) 0%, transparent 65%);
   filter: blur(8px);
   pointer-events: none;
}

:where(.mapp) .welcome-hero {
   padding: calc(56px + var(--safe-t)) 24px 76px;
   text-align: center;
   position: relative;
   z-index: 1;
}

:where(.mapp) .welcome-badge {
   width: 118px; height: 118px;
   background: linear-gradient(140deg, #FFFFFF 0%, #F8F1FF 100%);
   border-radius: 40px;
   margin: 0 auto 26px;
   display: flex; align-items: center; justify-content: center;
   font-size: 54px;
   position: relative;
   box-shadow:
      0 28px 56px -18px rgba(0, 0, 0,.32),
      inset 0 1px 0 #FFFFFF;
   animation: bounceIn .8s var(--ease-spring);
}
:where(.mapp) .welcome-badge::after {
   content: '';
   position: absolute;
   top: -4px; right: -4px;
   width: 26px; height: 26px;
   border-radius: 10px;
   background: linear-gradient(135deg, var(--amber), #FF8A3D);
   box-shadow: 0 6px 14px -4px rgba(255, 138, 61,.7);
}

:where(.mapp) .welcome-hero h1 {
   font-size: 30px;
   font-weight: 800;
   letter-spacing: -0.035em;
   color: #FFFFFF;
   margin-bottom: 8px;
   text-shadow: 0 2px 10px rgba(0, 0, 0,.08);
}
:where(.mapp) .welcome-hero p {
   font-size: 14px;
   color: rgba(255, 255, 255,.94);
   font-weight: 500;
   letter-spacing: -0.005em;
}

:where(.mapp) .welcome-card {
   background: var(--paper);
   border-radius: var(--r-2xl) var(--r-2xl) 0 0;
   flex: 1;
   padding: 30px 22px calc(46px + var(--safe-b));
   animation: slideUp var(--dur-3) var(--ease-out);
   position: relative;
   z-index: 1;
   box-shadow: 0 -20px 44px -20px rgba(0, 0, 0,.28);
}
:where(.mapp) .welcome-card::before {
   content: '';
   position: absolute;
   top: 12px;
   left: 50%;
   transform: translateX(-50%);
   width: 40px; height: 4px;
   border-radius: var(--r-pill);
   background: var(--ink-100);
}

:where(.mapp) .welcome-notice {
   background: linear-gradient(140deg, var(--brand-50), #FFF4EC);
   border: 1px solid rgba(157, 71, 255,.14);
   border-radius: var(--r-lg);
   padding: 16px;
   margin-bottom: 24px;
   display: flex;
   align-items: flex-start;
   gap: 12px;
   position: relative;
   overflow: hidden;
}
:where(.mapp) .welcome-notice::before {
   content: '';
   position: absolute;
   left: 0; top: 0; bottom: 0;
   width: 4px;
   background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
}
:where(.mapp) .welcome-notice i {
   font-size: 20px;
   color: var(--brand-600);
   flex-shrink: 0;
   margin-top: 1px;
}
:where(.mapp) .welcome-notice p {
   font-size: 12.5px;
   color: var(--ink-700);
   margin: 0;
   line-height: 1.6;
   font-weight: 500;
}

:where(.mapp) .cred-table { width: 100%; border-collapse: collapse; margin-bottom: 26px; }
:where(.mapp) .cred-table tr { border-bottom: 1px dashed var(--hairline); }
:where(.mapp) .cred-table tr:last-child { border-bottom: none; }
:where(.mapp) .cred-table td {
   padding: 16px 4px;
   font-size: 14px;
   letter-spacing: -0.005em;
}
:where(.mapp) .cred-table td:first-child {
   color: var(--ink-300);
   font-weight: 600;
   width: 40%;
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.12em;
}
:where(.mapp) .cred-table td:last-child {
   color: var(--ink-900);
   font-weight: 800;
   font-size: 15px;
}
:where(.mapp) .task-hero {
   background: linear-gradient(135deg, var(--brand-500) 0%, #B26EFF 100%);
   border-radius: var(--r-2xl);
   padding: 24px;
   margin-bottom: 22px;
   text-align: center;
   position: relative;
   overflow: hidden;
   box-shadow:
      0 16px 32px -14px rgba(157, 71, 255,.5),
      inset 0 1px 0 rgba(255, 255, 255,.28);
}
:where(.mapp) .task-hero::before {
   content: '';
   position: absolute;
   top: -60px; right: -40px;
   width: 180px; height: 180px;
   border-radius: 50%;
   background: radial-gradient(circle,
               rgba(255, 255, 255,.28) 0%, transparent 65%);
}
:where(.mapp) .task-hero img {
   width: 80px; height: 80px;
   object-fit: contain;
   position: relative;
   z-index: 1;
   filter: drop-shadow(0 8px 16px rgba(0, 0, 0,.2));
}
:where(.mapp) .task-tile-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
   margin-bottom: 22px;
}
:where(.mapp) .task-tile {
   background: var(--paper-raised);
   border: 1px solid var(--hairline);
   border-radius: var(--r-xl);
   padding: 20px 12px 16px;
   text-align: center;
   box-shadow: var(--lift-1);
   text-decoration: none;
   display: block;
   position: relative;
   overflow: hidden;
   transition: transform var(--dur-1) var(--ease-out),
               box-shadow var(--dur-1) var(--ease-out);
}
:where(.mapp) .task-tile::before {
   content: '';
   position: absolute;
   top: 0; left: 12%; right: 12%;
   height: 3px;
   border-radius: 0 0 var(--r-pill) var(--r-pill);
   opacity: .9;
}
:where(.mapp) .task-tile:nth-child(3n+1)::before {
   background: linear-gradient(90deg, #5AA6FF, var(--sky));
}
:where(.mapp) .task-tile:nth-child(3n+2)::before {
   background: linear-gradient(90deg, #FFC24A, var(--amber));
}
:where(.mapp) .task-tile:nth-child(3n+3)::before {
   background: linear-gradient(90deg, #3ADBB0, var(--mint));
}
:where(.mapp) .task-tile:active {
   transform: scale(.96);
   box-shadow: var(--lift-0);
}

:where(.mapp) .tile-icon {
   width: 56px; height: 56px;
   margin: 0 auto 12px;
   border-radius: 20px;
   display: flex; align-items: center; justify-content: center;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255,.35);
}
:where(.mapp) .tile-icon i { font-size: 26px; color: #FFFFFF; }
:where(.mapp) .tile-icon.ti-data    { background: linear-gradient(135deg, #5AA6FF, var(--sky)); }
:where(.mapp) .tile-icon.ti-captcha { background: linear-gradient(135deg, #FFC24A, var(--amber)); }
:where(.mapp) .tile-icon.ti-redeem  { background: linear-gradient(135deg, #3ADBB0, var(--mint)); }

:where(.mapp) .tile-label {
   font-size: 12.5px;
   font-weight: 700;
   letter-spacing: -0.005em;
   color: var(--ink-900);
   margin-bottom: 12px;
}

:where(.mapp) .tile-btn {
   display: inline-block;
   background: var(--ink-900);
   color: #FFFFFF;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.02em;
   padding: 7px 16px;
   border-radius: var(--r-pill);
   text-decoration: none;
   border: none;
   cursor: pointer;
   transition: transform var(--dur-1) var(--ease-out),
               background var(--dur-1) var(--ease-out);
}
:where(.mapp) .tile-btn:hover { background: var(--brand-500); }
:where(.mapp) .tile-btn:active { transform: scale(.94); }
:where(.mapp) .task-section {
   background: var(--paper-raised);
   border: 1px solid var(--hairline);
   border-radius: var(--r-xl);
   padding: 20px 18px;
   box-shadow: var(--lift-1);
   margin-bottom: 20px;
}
:where(.mapp) .task-section-title {
   font-size: 15px;
   font-weight: 800;
   letter-spacing: -0.02em;
   color: var(--ink-900);
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 10px;
}
:where(.mapp) .task-section-title::before {
   content: '';
   display: inline-block;
   width: 4px;
   height: 18px;
   border-radius: var(--r-pill);
   background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
   box-shadow: 0 0 10px rgba(157, 71, 255,.45);
   flex-shrink: 0;
}
:where(.mapp) .task-item {
   display: flex;
   align-items: center;
   gap: 14px;
   background: var(--paper);
   border: 1px solid var(--hairline);
   border-radius: var(--r-lg);
   padding: 12px 14px;
   margin-bottom: 10px;
   position: relative;
   overflow: hidden;
   transition: transform var(--dur-1) var(--ease-out),
               border-color var(--dur-1) var(--ease-out),
               box-shadow var(--dur-1) var(--ease-out);
}
:where(.mapp) .task-item::before {
   content: '';
   position: absolute;
   left: 0; top: 22%; bottom: 22%;
   width: 3px;
   border-radius: 0 var(--r-pill) var(--r-pill) 0;
   background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
   opacity: 0;
   transition: opacity var(--dur-2) var(--ease-out);
}
:where(.mapp) .task-item:hover {
   border-color: var(--brand-200);
   box-shadow: var(--lift-1);
   transform: translateX(2px);
}
:where(.mapp) .task-item:hover::before { opacity: 1; }
:where(.mapp) .task-item:last-child { margin-bottom: 0; }

:where(.mapp) .task-logo {
   width: 44px; height: 44px;
   border-radius: 16px;
   border: 1px solid var(--hairline);
   overflow: hidden;
   flex-shrink: 0;
   background: #FFFFFF;
   display: flex; align-items: center; justify-content: center;
   box-shadow: var(--lift-1);
}
:where(.mapp) .task-logo img { width: 100%; height: 100%; object-fit: cover; }

:where(.mapp) .task-info { flex: 1; min-width: 0; }
:where(.mapp) .task-name {
   font-size: 13.5px;
   font-weight: 700;
   letter-spacing: -0.01em;
   color: var(--ink-900);
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
:where(.mapp) .task-earn {
   font-size: 12px;
   font-weight: 800;
   color: var(--mint);
   margin: 3px 0 0;
   letter-spacing: -0.005em;
   display: inline-flex;
   align-items: center;
   gap: 4px;
}
:where(.mapp) .task-earn::before {
   content: '▲';
   font-size: 8px;
   line-height: 1;
}

:where(.mapp) .task-action { flex-shrink: 0; }

:where(.mapp) .task-btn-pill {
   padding: 8px 18px;
   border-radius: var(--r-pill);
   font-family: inherit;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: -0.005em;
   border: none;
   cursor: pointer;
   text-decoration: none;
   display: inline-block;
   line-height: 1;
   position: relative;
   overflow: hidden;
   transition: transform var(--dur-1) var(--ease-out),
               filter var(--dur-1) var(--ease-out);
}
:where(.mapp) .task-btn-pill:active { transform: scale(.94); }

:where(.mapp) .task-btn-pill.start {
   background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
   color: #FFFFFF;
   box-shadow: 0 6px 14px -6px rgba(157, 71, 255,.6);
}
:where(.mapp) .task-btn-pill.claim {
   background: linear-gradient(135deg, #FFC24A, var(--amber));
   color: var(--ink-900);
   box-shadow: 0 6px 14px -6px rgba(255, 176, 32,.6);
}
:where(.mapp) .task-btn-pill.done {
   background: var(--paper-sunken);
   color: var(--ink-300);
   cursor: default;
}
:where(.mapp) .rank-hero {
   background: linear-gradient(135deg, var(--brand-500) 0%, #B26EFF 100%);
   border-radius: var(--r-2xl);
   padding: 24px;
   margin-bottom: 22px;
   text-align: center;
   color: #FFFFFF;
   position: relative;
   overflow: hidden;
   box-shadow:
      0 16px 32px -14px rgba(157, 71, 255,.5),
      inset 0 1px 0 rgba(255, 255, 255,.28);
}
:where(.mapp) .rank-hero::before {
   content: '';
   position: absolute;
   top: -50px; left: -30px;
   width: 160px; height: 160px;
   border-radius: 50%;
   background: radial-gradient(circle,
               rgba(255, 255, 255,.25) 0%, transparent 65%);
}
:where(.mapp) .rank-hero h5 {
   font-size: 20px;
   font-weight: 800;
   letter-spacing: -0.03em;
   margin: 0;
   position: relative;
}
:where(.mapp) .rank-hero p {
   font-size: 13px;
   color: rgba(255, 255, 255,.94);
   margin: 6px 0 0;
   font-weight: 500;
   letter-spacing: -0.005em;
   position: relative;
}
:where(.mapp) .rank-item {
   display: flex;
   align-items: center;
   gap: 14px;
   background: var(--paper-raised);
   border: 1px solid var(--hairline);
   border-radius: var(--r-lg);
   padding: 14px 16px;
   margin-bottom: 10px;
   box-shadow: var(--lift-1);
   position: relative;
   overflow: hidden;
   transition: transform var(--dur-1) var(--ease-out),
               box-shadow var(--dur-1) var(--ease-out);
}
:where(.mapp) .rank-item::before {
   content: '';
   position: absolute;
   left: 0; top: 0; bottom: 0;
   width: 4px;
   background: transparent;
   transition: background var(--dur-2) var(--ease-out);
}
:where(.mapp) .rank-item:hover {
   transform: translateY(-3px);
   box-shadow: var(--lift-2);
}

:where(.mapp) .rank-item.r1 {
   background: linear-gradient(135deg, #FFFBEC 0%, #FFF2CC 100%);
   border-color: #F5DE8A;
}
:where(.mapp) .rank-item.r1::before {
   background: linear-gradient(180deg, #FFD54A, #F0A500);
   box-shadow: 0 0 14px rgba(240, 165, 0,.55);
}
:where(.mapp) .rank-item.r2 {
   background: linear-gradient(135deg, #FBFCFD 0%, #EEF1F5 100%);
   border-color: #DDE3EB;
}
:where(.mapp) .rank-item.r2::before {
   background: linear-gradient(180deg, #C7D0DB, #918AA6);
}
:where(.mapp) .rank-item.r3 {
   background: linear-gradient(135deg, #FFF7F0 0%, #FCE9D9 100%);
   border-color: #EECFB2;
}
:where(.mapp) .rank-item.r3::before {
   background: linear-gradient(180deg, #E9A66B, #C97B3C);
}

:where(.mapp) .rank-num {
   font-size: 16px;
   font-weight: 800;
   min-width: 34px;
   text-align: center;
   color: var(--ink-300);
   font-variant-numeric: tabular-nums;
}
:where(.mapp) .rank-item.r1 .rank-num::before { content: '🥇'; font-size: 22px; }
:where(.mapp) .rank-item.r2 .rank-num::before { content: '🥈'; font-size: 22px; }
:where(.mapp) .rank-item.r3 .rank-num::before { content: '🥉'; font-size: 22px; }
:where(.mapp) .rank-item.r1 .rank-num,
:where(.mapp) .rank-item.r2 .rank-num,
:where(.mapp) .rank-item.r3 .rank-num { font-size: 0; }

:where(.mapp) .rank-badge img {
   width: 44px; height: 44px;
   object-fit: contain;
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0,.12));
}

:where(.mapp) .rank-user { flex: 1; min-width: 0; }
:where(.mapp) .rank-user .r-name {
   font-size: 14px;
   font-weight: 700;
   letter-spacing: -0.01em;
   color: var(--ink-900);
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
:where(.mapp) .rank-user .r-code {
   font-size: 11.5px;
   color: var(--ink-300);
   margin: 2px 0 0;
   font-weight: 600;
   letter-spacing: 0.02em;
   font-variant-numeric: tabular-nums;
}
:where(.mapp) .rank-user .r-refer {
   font-size: 12px;
   font-weight: 800;
   color: var(--mint);
   margin: 3px 0 0;
   letter-spacing: -0.005em;
   display: inline-flex;
   align-items: center;
   gap: 4px;
}
:where(.mapp) .rank-user .r-refer::before {
   content: '▲';
   font-size: 8px;
}
@keyframes slideUp {
   from { opacity: 0; transform: translateY(36px); }
   to   { opacity: 1; transform: translateY(0); }
}

@keyframes bounceIn {
   0%   { opacity: 0; transform: scale(.5) rotate(-8deg); }
   60%  { transform: scale(1.08) rotate(3deg); }
   100% { opacity: 1; transform: scale(1) rotate(0); }
}
:where(.mapp) ::-webkit-scrollbar { width: 5px; }
:where(.mapp) ::-webkit-scrollbar-thumb {
   background: var(--ink-100);
   border-radius: var(--r-pill);
}
:where(.mapp) ::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) {
   :where(.mapp) *, :where(.mapp) *::before, :where(.mapp) *::after {
      animation-duration: .001ms !important;
      transition-duration: .001ms !important;
   }
}


/* ==========================================================================
   Mobile dashboard widgets
   scope: html.apk
   ========================================================================== */
:root:where(.apk) {
   --wm-ink: #F7F8FA;
   --wm-ink-soft: #EEF1F4;
   --wm-panel: #FFFFFF;
   --wm-panel-light: #F6F4F8;
   --wm-line: #E6EAEE;
   --wm-text: #202B36;
   --wm-muted: #807A91;
   --wm-amber: #FFB547;
   --wm-amber-deep: #E58B28;
   --wm-cyan: #6822B8;
   --wm-green: #22A06B;
   --wm-red: #A462F0;
   --wm-blue: #4D9DE0;
   --wm-purple: #9F72D2;
   --wm-shadow: 0 14px 30px rgba(38, 53, 67, .09);
   --wm-shadow-small: 0 5px 14px rgba(38, 53, 67, .07);
}

:where(.apk) body:has(.wm-wrap) { background: var(--paper); }

:where(.apk) .wm-wrap {
   width: min(100%, 510px);
   box-sizing: border-box;
   margin: 0 auto;
   padding: 14px 14px 100px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   color: var(--wm-text);
   background: radial-gradient(circle at 100% 0, rgba(255, 181, 71, .12), transparent 28%), var(--wm-ink);
}

:where(.apk) .wm-wrap *, :where(.apk) .wm-wrap *::before, :where(.apk) .wm-wrap *::after { box-sizing: border-box; }
:where(.apk) .wm-wrap a { -webkit-tap-highlight-color: transparent; }

@keyframes wmAppear {
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
}

@keyframes wmBlink {
   0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(101, 211, 145, .4); }
   50% { opacity: .65; box-shadow: 0 0 0 5px rgba(101, 211, 145, 0); }
}

@keyframes wmDrift {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-3px); }
}

:where(.apk) .wm-notif,
:where(.apk) .wm-profile,
:where(.apk) .wm-wallet-card,
:where(.apk) .wm-team-card,
:where(.apk) .wm-income-card,
:where(.apk) .wm-ref-card,
:where(.apk) .wm-social-card,
:where(.apk) .wm-level-reward {
   border: 1px solid var(--wm-line);
   box-shadow: var(--wm-shadow-small);
}

:where(.apk) .wm-notif {
   min-height: 42px;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 9px 12px;
   overflow: hidden;
   border-radius: 10px;
   border-left: 3px solid var(--wm-cyan);
   background: var(--wm-panel);
   animation: wmAppear .45s ease-out both;
}

:where(.apk) .wm-notif .notif-dot {
   width: 8px;
   height: 8px;
   flex: 0 0 auto;
   border-radius: 50%;
   background: var(--wm-green);
   animation: wmBlink 1.8s infinite;
}

:where(.apk) .wm-notif marquee { flex: 1; color: var(--wm-text); font-size: 12px; font-weight: 600; }

:where(.apk) .wm-profile {
   position: relative;
   display: flex;
   align-items: center;
   gap: 12px;
   overflow: hidden;
   padding: 17px 15px;
   border-radius: 14px;
   background: linear-gradient(120deg, #A462F0 0%, #AA70EC 58%, #F5A15B 100%);
   box-shadow: 0 12px 24px rgba(164, 98, 240, .2);
   animation: wmAppear .5s .04s ease-out both;
}

:where(.apk) .wm-profile::after {
   content: '';
   position: absolute;
   right: -42px;
   top: -58px;
   width: 170px;
   height: 170px;
   border: 1px solid rgba(245, 181, 68, .28);
   border-radius: 50%;
   box-shadow: 0 0 0 18px rgba(245, 181, 68, .04), 0 0 0 36px rgba(245, 181, 68, .03);
}

:where(.apk) .wm-avatar {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 52px;
   height: 52px;
   flex: 0 0 auto;
   border: 2px solid rgba(245, 181, 68, .72);
   border-radius: 50%;
   background: rgba(245, 181, 68, .14);
   color: var(--wm-amber);
   font-size: 24px;
}

:where(.apk) .wm-profile-text { position: relative; z-index: 1; flex: 1; min-width: 0; }
:where(.apk) .wm-profile-text h4 { margin: 0; overflow: hidden; color: #FFFFFF; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
:where(.apk) .wm-profile-text p { margin: 4px 0 0; color: rgba(255, 255, 255, .82); font-size: 11px; font-weight: 600; }

:where(.apk) .wm-logout {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   flex: 0 0 auto;
   border: 1px solid rgba(255, 255, 255, .14);
   border-radius: 9px;
   background: rgba(255, 255, 255, .16);
   color: var(--wm-text);
   font-size: 17px;
   text-decoration: none;
   transition: background .2s ease, color .2s ease, transform .2s ease;
}
:where(.apk) .wm-logout:hover { color: #FFFFFF; background: rgba(255, 255, 255, .28); transform: translateY(-2px); }

:where(.apk) .wm-wallet-row, :where(.apk) .wm-team-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

:where(.apk) .wm-wallet-card {
   position: relative;
   min-height: 142px;
   overflow: hidden;
   padding: 15px;
   border-radius: 14px;
   animation: wmAppear .5s .1s ease-out both;
}
:where(.apk) .wm-wallet-card::after { content: ''; position: absolute; right: -26px; bottom: -32px; width: 100px; height: 100px; border: 1px solid rgba(255, 255, 255,.2); border-radius: 50%; }
:where(.apk) .wm-wallet-card.bal { background: linear-gradient(145deg, #1FA77D, #4B138C); }
:where(.apk) .wm-wallet-card.with { background: linear-gradient(145deg, #F4A340, #E87A4D); }
:where(.apk) .wm-wallet-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 18px; border-radius: 10px; background: rgba(255, 255, 255,.14); color: #FFFFFF; font-size: 19px; animation: wmDrift 3.5s ease-in-out infinite; }
:where(.apk) .wm-wallet-label { margin: 0; color: rgba(255, 255, 255,.72); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
:where(.apk) .wm-wallet-amt { margin: 4px 0 0; color: #FFFFFF; font-size: clamp(18px, 5vw, 23px); font-weight: 700; letter-spacing: 0; }

:where(.apk) .wm-team-card {
   display: flex;
   align-items: center;
   gap: 10px;
   min-width: 0;
   padding: 13px 11px;
   border-radius: 12px;
   background: var(--wm-panel);
   text-decoration: none;
   transition: border-color .2s ease, transform .2s ease, background .2s ease;
   animation: wmAppear .5s .16s ease-out both;
}
:where(.apk) .wm-team-card:hover { border-color: rgba(140, 79, 209, .55); background: var(--wm-panel-light); transform: translateY(-2px); }
:where(.apk) .wm-team-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; color: #FFFFFF; font-size: 18px; }
:where(.apk) .wm-team-card.direct .wm-team-icon { background: var(--wm-cyan); }
:where(.apk) .wm-team-card.all .wm-team-icon { background: var(--wm-amber); }
:where(.apk) .wm-team-info { flex: 1; min-width: 0; }
:where(.apk) .wm-team-info p { margin: 0; overflow: hidden; color: var(--wm-muted); font-size: 10px; font-weight: 700; letter-spacing: .45px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
:where(.apk) .wm-team-info h4 { margin: 3px 0 0; color: var(--wm-text); font-size: 21px; font-weight: 700; }
:where(.apk) .wm-team-arrow { color: var(--wm-muted); font-size: 13px; }

:where(.apk) .wm-section-title { display: flex; align-items: center; gap: 8px; margin: 8px 0 -1px; color: var(--wm-text); font-size: 14px; font-weight: 700; }
:where(.apk) .wm-section-title::before { content: ''; width: 4px; height: 17px; flex: 0 0 auto; border-radius: 3px; background: var(--wm-amber); }

:where(.apk) .wm-income-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
:where(.apk) .wm-income-card { padding: 12px 6px 11px; border-radius: 12px; background: var(--wm-panel); text-align: center; animation: wmAppear .4s ease-out both; }
:where(.apk) .wm-income-card:hover { border-color: rgba(245, 181, 68, .4); }
:where(.apk) .wm-inc-icon { display: flex; align-items: center; justify-content: center; width: 37px; height: 37px; margin: 0 auto 8px; border-radius: 10px; color: #FFFFFF; font-size: 17px; }
:where(.apk) .wm-income-card.ic-login .wm-inc-icon { background: var(--wm-amber); }
:where(.apk) .wm-income-card.ic-telegram .wm-inc-icon { background: #8D46DF; }
:where(.apk) .wm-income-card.ic-whatsapp .wm-inc-icon { background: var(--wm-green); }
:where(.apk) .wm-income-card.ic-referral .wm-inc-icon { background: #B98BED; }
:where(.apk) .wm-income-card.ic-captcha .wm-inc-icon { background: #E7A854; }
:where(.apk) .wm-income-card.ic-dataentry .wm-inc-icon { background: var(--wm-blue); }
:where(.apk) .wm-income-card.ic-reward .wm-inc-icon { background: var(--wm-purple); }
:where(.apk) .wm-income-card.ic-redeem .wm-inc-icon { background: var(--wm-cyan); }
:where(.apk) .wm-income-card.ic-rating .wm-inc-icon { background: #E7C15F; }
:where(.apk) .wm-income-card.ic-commission .wm-inc-icon { background: #AB8BD0; }
:where(.apk) .wm-inc-amt { margin: 0; color: var(--wm-text); font-size: 13px; font-weight: 700; }
:where(.apk) .wm-inc-label { min-height: 25px; margin: 3px 0 0; color: var(--wm-muted); font-size: 9px; font-weight: 600; line-height: 1.35; text-transform: uppercase; }

:where(.apk) .wm-ref-card, :where(.apk) .wm-social-card, :where(.apk) .wm-card { padding: 15px 13px; border-radius: 14px; background: var(--wm-panel); animation: wmAppear .5s .22s ease-out both; }
:where(.apk) .wm-ref-note { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px; border: 1px solid rgba(229, 139, 40,.24); border-radius: 9px; background: #FFF8E9; color: #8A5B20; font-size: 11px; font-weight: 600; }
:where(.apk) .wm-ref-note i { color: var(--wm-amber); font-size: 15px; }
:where(.apk) .wm-action-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
:where(.apk) .wm-action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 68px; padding: 9px 5px; border: 1px solid transparent; border-radius: 10px; color: #FFFFFF; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; text-decoration: none; transition: transform .2s ease, filter .2s ease; }
:where(.apk) .wm-action-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
:where(.apk) .wm-action-btn i { font-size: 19px; }
:where(.apk) .wm-action-btn.ab-referral { background: var(--wm-red); }
:where(.apk) .wm-action-btn.ab-chat { background: var(--wm-cyan); }
:where(.apk) .wm-action-btn.ab-call { background: var(--wm-green); }

:where(.apk) .wm-social-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 8px; }
:where(.apk) .wm-social-item { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--wm-muted); text-decoration: none; }
:where(.apk) .wm-social-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; color: #FFFFFF; font-size: 20px; transition: transform .2s ease; }
:where(.apk) .wm-social-item:hover .wm-social-icon { transform: translateY(-3px); }
:where(.apk) .wm-social-icon.si-wa { background: var(--wm-green); }
:where(.apk) .wm-social-icon.si-yt { background: var(--wm-red); }
:where(.apk) .wm-social-icon.si-gl { background: var(--wm-blue); }
:where(.apk) .wm-social-icon.si-vb { background: var(--wm-purple); }
:where(.apk) .wm-social-icon.si-tg { background: #9B58E7; }
:where(.apk) .wm-social-icon.si-cm { background: var(--wm-amber); }
:where(.apk) .wm-social-label { color: var(--wm-text); font-size: 10px; font-weight: 600; text-align: center; }
:where(.apk) .wm-social-sub { margin-top: -4px; color: var(--wm-muted); font-size: 9px; }

:where(.apk) .wm-card-title { margin: 0 0 13px; color: var(--wm-text); font-size: 14px; font-weight: 700; }
:where(.apk) .wm-card-title i { color: var(--wm-amber); }
:where(.apk) .wm-card iframe { display: block; width: 100%; border: 0; border-radius: 9px; }
:where(.apk) .wm-chart-container { position: relative; height: 220px; margin-bottom: 15px; }
:where(.apk) .wm-level-reward { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; padding: 12px; border-radius: 10px; border-left: 3px solid var(--wm-amber); background: var(--wm-panel-light); }
:where(.apk) .wm-reward-lvl { margin: 0; color: var(--wm-text); font-size: 12px; font-weight: 600; }
:where(.apk) .wm-reward-amt { margin: 3px 0 0; color: var(--wm-green); font-size: 16px; font-weight: 700; }
:where(.apk) .wm-claim-btn { padding: 8px 12px !important; border: 0 !important; border-radius: 7px !important; background: var(--wm-red) !important; box-shadow: none !important; color: #FFFFFF !important; cursor: pointer; font-size: 10px !important; font-weight: 800 !important; white-space: nowrap; }

@media (max-width: 350px) {
   :where(.apk) .wm-wrap { padding-right: 10px; padding-left: 10px; }
   :where(.apk) .wm-wallet-card { min-height: 132px; padding: 12px; }
   :where(.apk) .wm-wallet-amt { font-size: 17px; }
   :where(.apk) .wm-income-grid { gap: 6px; }
   :where(.apk) .wm-inc-label { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
   :where(.apk) .wm-wrap *, :where(.apk) .wm-wrap *::before, :where(.apk) .wm-wrap *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ==========================================================================
   Desktop dashboard widgets
   scope: html.wdg
   ========================================================================== */
:root:where(.wdg) {
  --bg-primary: #0B0F19;
  --bg-surface: #131A29;
  --bg-surface-hover: #1C263B;
  --border-color: rgba(255, 255, 255, 0.08);
  --accent-cyan: #7700FE;
  --accent-purple: #7928CA;
  --accent-green: #00E676;
  --accent-orange: #FF9100;
  --accent-pink: #FF007F;
  --text-main: #F4F3F6;
  --text-muted: #A19CAF;
  --card-radius: 16px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:where(.wdg) body {
background-image: linear-gradient(rgb(255, 128, 0), rgb(255, 179, 102));

  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

:where(.wdg) .dashboard-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
:where(.wdg) .notification-banner {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

:where(.wdg) .notify-badge {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
  color: #FFFFFF;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

:where(.wdg) .notify-content marquee {
  color: var(--text-main);
  font-size: 0.95rem;
  font-weight: 500;
}

:where(.wdg) .notify-content marquee span {
  margin-right: 30px;
}
:where(.wdg) .wallet-panel {
  background: linear-gradient(145deg, #131A2A, #0D121D);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

:where(.wdg) .wallet-panel::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(119, 0, 254, 0.15), transparent 70%);
  pointer-events: none;
}

:where(.wdg) .hero-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

:where(.wdg) .hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

:where(.wdg) .hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #FFFFFF;
  box-shadow: 0 0 15px rgba(119, 0, 254, 0.3);
}

:where(.wdg) .hero-greet {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

:where(.wdg) .hero-name {
  margin: 2px 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #FFFFFF;
}

:where(.wdg) .hero-code code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--accent-cyan);
  font-family: monospace;
}

:where(.wdg) .hero-copy-btn {
 width: fit-content;
    background: linear-gradient(135deg, #7700FE, #4FACFE);
    color: #0B0F19;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(119, 0, 254, 0.25);
}

:where(.wdg) .hero-copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(119, 0, 254, 0.4);
}
:where(.wdg) .stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

:where(.wdg) .stat-pill {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--transition);
}

:where(.wdg) .stat-pill:hover {
  background: var(--bg-surface-hover);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

:where(.wdg) .stat-pill-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

:where(.wdg) .balance .stat-pill-icon { background: rgba(0, 230, 118, 0.15); color: var(--accent-green); }
:where(.wdg) .withdrawal .stat-pill-icon { background: rgba(255, 145, 0, 0.15); color: var(--accent-orange); }
:where(.wdg) .team .stat-pill-icon { background: rgba(119, 0, 254, 0.15); color: var(--accent-cyan); }
:where(.wdg) .total-team .stat-pill-icon { background: rgba(121, 40, 202, 0.15); color: var(--accent-purple); }

:where(.wdg) .stat-pill-info { display: flex; flex-direction: column; }
:where(.wdg) .stat-pill-label { font-size: 0.8rem; color: var(--text-muted); }
:where(.wdg) .stat-pill-value { font-size: 1.25rem; font-weight: 700; color: #FFFFFF; margin-top: 2px; }
:where(.wdg) .quick-dock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

:where(.wdg) .dock-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text-main);
  transition: var(--transition);
}

:where(.wdg) .dock-item:hover {
  transform: translateY(-3px);
  border-color: var(--accent-cyan);
  background: var(--bg-surface-hover);
  color: #FFFFFF;
}

:where(.wdg) .dock-icon {
  font-size: 1.5rem;
}

:where(.wdg) .dock-download .dock-icon { color: var(--accent-cyan); }
:where(.wdg) .dock-chat .dock-icon { color: #A855F7; }
:where(.wdg) .dock-call .dock-icon { color: var(--accent-orange); }
:where(.wdg) .dock-telegram .dock-icon { color: #9238F8; }
:where(.wdg) .dock-whatsapp .dock-icon { color: var(--accent-green); }
:where(.wdg) .dock-youtube .dock-icon { color: #EFB044; }

:where(.wdg) .dock-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}
:where(.wdg) .income-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 24px;
}

:where(.wdg) .section-header {
  margin-bottom: 20px;
}

:where(.wdg) .section-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
}

:where(.wdg) .income-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

:where(.wdg) .income-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition);
}

:where(.wdg) .income-card:hover {
  background: var(--bg-surface-hover);
  border-color: rgba(255, 255, 255, 0.12);
}

:where(.wdg) .income-row-icon {
  font-size: 1.25rem;
  color: var(--accent-cyan);
  background: rgba(119, 0, 254, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.wdg) .income-details {
  display: flex;
  flex-direction: column;
}

:where(.wdg) .income-row-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

:where(.wdg) .income-row-amount {
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
}
:where(.wdg) .media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 992px) {
  :where(.wdg) .media-grid {
    grid-template-columns: 1fr;
  }
}

:where(.wdg) .media-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:where(.wdg) .card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
}

:where(.wdg) .video-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0,0.4);
}
:where(.wdg) .reward-table-wrap {
  margin-top: 10px;
  overflow-x: auto;
}

:where(.wdg) .reward-table {
  width: 100%;
  border-collapse: collapse;
}

:where(.wdg) .reward-table th, :where(.wdg) .reward-table td {
  padding: 10px 12px;
  font-size: 0.85rem;
  text-align: left;
}

:where(.wdg) .reward-table th {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
}

:where(.wdg) .reward-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

:where(.wdg) .reward-amount-cell {
  font-weight: 700;
  color: var(--accent-green);
}

:where(.wdg) .lvlclaim-btn {
  background: linear-gradient(135deg, var(--accent-green), #7700FF);
  color: #000000;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.75rem;
  cursor: pointer;
  transition: var(--transition);
}

:where(.wdg) .lvlclaim-btn:hover {
  opacity: 0.9;
  transform: scale(1.03);
}

:where(.wdg) .reward-empty {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}


/* ==========================================================================
   Page: dashboard (desktop)
   scope: html.pg-dash
   ========================================================================== */
:where(.pg-dash) .card-header, :where(.pg-dash) .card-footer {
    border-color: var(--border);
    background-color: transparent;
    color: var(--muted);
    padding: 15px;
}


/* ==========================================================================
   Page: dashboard timer
   scope: html.pg-dash
   ========================================================================== */
:where(.pg-dash) .countdown {
        font-family: 'Orbitron', sans-serif !important;
    color: #FFFFFF;
    background: rgb(255 0 0 / 80%);
    padding: 12px;
    border-radius: 7px;
    box-shadow: 0 0 30px #7904FF9c;
    text-shadow: 0 0 15px #37343Eba;
    font-size: 17px;
    }


/* ==========================================================================
   Page: transactions
   scope: html.pg-trn
   ========================================================================== */
:root:where(.pg-trn) {
    --trn-ink: #202B36;
    --trn-muted: #807B91;
    --trn-surface: #FFFFFF;
    --trn-canvas: #F5F7F9;
    --trn-line: #E6EBEF;
    --trn-coral: #A564EF;
    --trn-teal: #5D1CA7;
    --trn-amber: #E99A35;
    --trn-blue: #4D91D4;
    --trn-shadow: 0 12px 28px rgba(34, 53, 68, .08);
  }

  :where(.pg-trn) body:has(.trn-filter) {
    background: var(--trn-canvas);
    color: var(--trn-ink);
  }

  :where(.pg-trn) .section:has(.trn-filter) {
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 24px 100px;
    background: var(--trn-canvas);
  }

  :where(.pg-trn) .trn-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
  }

  :where(.pg-trn) .trn-tile {
    position: relative;
    min-height: 112px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 16px;
    color: #FFFFFF;
    box-shadow: var(--trn-shadow);
  }

  :where(.pg-trn) .trn-tile::after {
    content: '';
    position: absolute;
    right: -24px;
    bottom: -48px;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
  }

  :where(.pg-trn) .trn-tile .stat-icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    font-size: 1.15rem;
  }

  :where(.pg-trn) .trn-tile h6 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
  }

  :where(.pg-trn) .trn-tile h3 {
    position: relative;
    z-index: 1;
    margin: 3px 0 0;
    color: #FFFFFF;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
  }

  :where(.pg-trn) .trn-tile.income {
    background: linear-gradient(135deg, #1AA783, #481484);
  }

  :where(.pg-trn) .trn-tile.withdraw {
    background: linear-gradient(135deg, #EF9B3C, #9A59E5);
  }

  :where(.pg-trn) .trn-tile.net {
    background: linear-gradient(135deg, #587ED3, #936BC0);
  }

  :where(.pg-trn) .trn-filter {
    padding: 22px;
    border: 1px solid var(--trn-line);
    border-radius: 18px;
    background: var(--trn-surface);
    box-shadow: var(--trn-shadow);
  }

  :where(.pg-trn) .trn-filter .section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    color: var(--trn-ink);
    font-size: 1.05rem;
    font-weight: 800;
  }

  :where(.pg-trn) .trn-filter .section-title::before {
    content: '';
    width: 5px;
    height: 21px;
    border-radius: 4px;
    background: var(--trn-coral);
  }

  :where(.pg-trn) .trn-filter .form-label {
    margin-bottom: 6px;
    color: var(--trn-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .35px;
    text-transform: uppercase;
  }

  :where(.pg-trn) .trn-filter .form-control,
  :where(.pg-trn) .trn-filter .form-select {
    min-height: 40px;
    border-color: var(--trn-line);
    border-radius: 9px;
    color: var(--trn-ink);
    box-shadow: none;
  }

  :where(.pg-trn) .trn-filter .form-control:focus,
  :where(.pg-trn) .trn-filter .form-select:focus {
    border-color: rgba(165, 100, 239, .65);
    box-shadow: 0 0 0 3px rgba(165, 100, 239, .12);
  }

  :where(.pg-trn) .trn-filter .task-btn {
    min-height: 40px;
    border: 0;
    border-radius: 9px;
    background: var(--trn-coral);
    color: #FFFFFF;
    font-weight: 700;
  }

  :where(.pg-trn) .trn-filter .btn-outline-secondary {
    min-height: 40px;
    border-radius: 9px;
  }

  :where(.pg-trn) .trn-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 17px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--trn-line);
  }

  :where(.pg-trn) .trn-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1px;
    color: #FFFFFF;
    white-space: nowrap;
  }

  :where(.pg-trn) .trn-task {
    background: var(--trn-blue);
  }

  :where(.pg-trn) .trn-commission {
    background: #8C62BD;
  }

  :where(.pg-trn) .trn-reward {
    background: var(--trn-amber);
  }

  :where(.pg-trn) .trn-tree {
    background: var(--trn-teal);
  }

  :where(.pg-trn) .trn-withdraw {
    background: var(--trn-coral);
  }

  :where(.pg-trn) .trn-other {
    background: #8B859B;
  }

  :where(.pg-trn) #trnSearch {
    min-height: 42px;
    margin: 14px 0 13px !important;
    padding-left: 38px;
    border-color: var(--trn-line);
    border-radius: 10px;
    background: #FBFCFD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237b8791' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 13px center;
  }

  :where(.pg-trn) .reward-table-wrap {
    margin-top: 0;
    overflow-x: auto;
    border: 1px solid var(--trn-line);
    border-radius: 12px;
  }

  :where(.pg-trn) .reward-table {
    min-width: 790px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  :where(.pg-trn) .reward-table th,
  :where(.pg-trn) .reward-table td {
    padding: 13px 12px;
    font-size: .82rem;
    text-align: left;
  }

  :where(.pg-trn) .reward-table th {
    color: var(--trn-muted);
    background: #F9F8FB;
    border-bottom: 1px solid var(--trn-line);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
  }

  :where(.pg-trn) .reward-table th:first-child {
    border-radius: 11px 0 0 0;
  }

  :where(.pg-trn) .reward-table th:last-child {
    border-radius: 0 11px 0 0;
  }

  :where(.pg-trn) .reward-table td {
    border-bottom: 1px solid #EEEDF2;
    color: var(--trn-ink);
    background: #FFFFFF;
    vertical-align: middle;
  }

  :where(.pg-trn) .reward-table tbody tr:hover td {
    background: #FFFAF6;
  }

  :where(.pg-trn) .reward-table tbody tr:last-child td {
    border-bottom: 0;
  }

  :where(.pg-trn) .reward-table tfoot td {
    background: #F9F8FB;
    border-top: 1px solid var(--trn-line);
    border-bottom: 0;
    font-size: .8rem;
  }

  :where(.pg-trn) .reward-amount-cell {
    color: var(--trn-teal) !important;
    font-weight: 800;
  }

  :where(.pg-trn) .reward-empty {
    padding: 42px 16px !important;
    color: var(--trn-muted) !important;
    text-align: center !important;
  }

  @media (max-width: 767px) {
    :where(.pg-trn) .section:has(.trn-filter) {
      padding: 12px 12px 90px;
    }

    :where(.pg-trn) .trn-summary {
      grid-template-columns: 1fr;
      gap: 9px;
    }

    :where(.pg-trn) .trn-tile {
      min-height: 84px;
      padding: 14px;
    }

    :where(.pg-trn) .trn-tile .stat-icon {
      width: 38px;
      height: 38px;
    }

    :where(.pg-trn) .trn-filter {
      padding: 15px 12px;
      border-radius: 14px;
    }

    :where(.pg-trn) .trn-filter .section-title {
      margin-bottom: 15px;
    }

    :where(.pg-trn) .trn-legend {
      gap: 5px;
    }

    :where(.pg-trn) .trn-badge {
      padding: 5px 7px;
      font-size: .62rem;
    }

    :where(.pg-trn) .reward-table-wrap {
      overflow: visible;
      border: 0;
    }

    :where(.pg-trn) .reward-table {
      min-width: 0;
      display: block;
    }

    :where(.pg-trn) .reward-table thead,
    :where(.pg-trn) .reward-table tfoot {
      display: none;
    }

    :where(.pg-trn) .reward-table tbody,
    :where(.pg-trn) .reward-table tr,
    :where(.pg-trn) .reward-table td {
      display: block;
    }

    :where(.pg-trn) .reward-table tbody tr {
      position: relative;
      margin-bottom: 9px;
      padding: 12px 12px 10px 52px;
      border: 1px solid var(--trn-line);
      border-radius: 12px;
      background: #FFFFFF;
      box-shadow: 0 4px 12px rgba(34, 53, 68, .05);
    }

    :where(.pg-trn) .reward-table tbody tr:hover td {
      background: transparent;
    }

    :where(.pg-trn) .reward-table td {
      min-height: 0;
      padding: 2px 0;
      border: 0;
      background: transparent;
      font-size: .78rem;
    }

    :where(.pg-trn) .reward-table td:first-child {
      position: absolute;
      top: 13px;
      left: 13px;
      color: var(--trn-muted);
      font-size: .7rem;
    }

    :where(.pg-trn) .reward-table td:nth-child(2) {
      margin-bottom: 5px;
    }

    :where(.pg-trn) .reward-table td:nth-child(3) {
      font-size: .88rem;
      font-weight: 700;
    }

    :where(.pg-trn) .reward-table td:nth-child(4)::before {
      content: 'Date: ';
      color: var(--trn-muted);
    }

    :where(.pg-trn) .reward-table td:nth-child(5)::before {
      content: 'Credit: ';
      color: var(--trn-muted);
    }

    :where(.pg-trn) .reward-table td:nth-child(6)::before {
      content: 'Debit: ';
      color: var(--trn-muted);
    }

    :where(.pg-trn) .reward-table td:nth-child(7)::before {
      content: 'Balance: ';
      color: var(--trn-muted);
    }

    :where(.pg-trn) .reward-table td:nth-child(5),
    :where(.pg-trn) .reward-table td:nth-child(6),
    :where(.pg-trn) .reward-table td:nth-child(7) {
      display: inline-block;
      margin-right: 10px;
    }
  }


/* ==========================================================================
   Page: bank details
   scope: html.pg-bank
   ========================================================================== */
:where(.pg-bank) .hidden { display: none; }


/* ==========================================================================
   Page: coming projects
   scope: html.pg-coming
   ========================================================================== */
:where(.pg-coming) .pro-icon {
    font-size: 25px;
    color: #6c757d;
}


/* ==========================================================================
   Page: register (mobile)
   scope: html.pg-register-mob
   ========================================================================== */
:where(.pg-register-mob) input[type=date] { color-scheme: light; }


/* ==========================================================================
   Page: captcha task
   scope: html.pg-captcha
   ========================================================================== */
:where(.pg-captcha) button.refresh-btn {
    border: none;
    background: none;
    font-size: 22px;
    cursor: pointer;
  }

  :where(.pg-captcha) .captcha-value {
    font-weight: 500;
    text-decoration: line-through;
    background: #ffcece;
    border: none;
    text-align: center;
  }


/* ==========================================================================
   Page: image rating task
   scope: html.pg-rating
   ========================================================================== */
:where(.pg-rating) .star-rating .star {
    font-size: 36px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
    margin: 0 3px;
}
:where(.pg-rating) .star-rating .star.selected,
:where(.pg-rating) .star-rating .star.hover {
    color: #f5a623;
}


/* ==========================================================================
   Page: task menu (mobile)
   scope: html.pg-task
   ========================================================================== */
:where(.pg-task) .section:has(.task-hero) {
      max-width: 520px;
      padding: 14px 14px 100px;
      background: #F6F7F9;
   }

   :where(.pg-task) .section:has(.task-hero) .task-hero {
      min-height: 166px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 14px;
      padding: 22px 24px;
      border-radius: 24px;
      background: linear-gradient(128deg, #A462EF 0%, #A86BED 52%, #F4A148 100%);
      box-shadow: 0 16px 28px rgba(164, 98, 239, .22);
      text-align: left;
   }

   :where(.pg-task) .section:has(.task-hero) .task-hero::after {
      content: 'Complete today\A Earn more every day';
      position: absolute;
      left: 24px;
      bottom: 20px;
      z-index: 1;
      color: rgba(255, 255, 255, .92);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.55;
      white-space: pre;
   }

   :where(.pg-task) .section:has(.task-hero) .task-hero::before {
      top: -78px;
      right: -20px;
      width: 210px;
      height: 210px;
      background: radial-gradient(circle, rgba(255, 255, 255,.3) 0%, transparent 68%);
   }

   :where(.pg-task) .section:has(.task-hero) .task-hero img {
      width: 112px;
      height: 112px;
      margin-left: auto;
      filter: drop-shadow(0 10px 14px rgba(71, 38, 109, .24));
   }

   :where(.pg-task) .section:has(.task-hero) .task-tile-grid {
      gap: 9px;
      margin-bottom: 14px;
   }

   :where(.pg-task) .section:has(.task-hero) .task-tile {
      min-height: 142px;
      padding: 16px 10px 13px;
      border: 1px solid #E9E7EE;
      border-radius: 17px;
      background: #FFFFFF;
      box-shadow: 0 6px 16px rgba(38, 53, 67, .07);
   }

   :where(.pg-task) .section:has(.task-hero) .task-tile:hover {
      border-color: #C7A1F2;
      box-shadow: 0 10px 20px rgba(38, 53, 67, .1);
      transform: translateY(-2px);
   }

   :where(.pg-task) .section:has(.task-hero) .tile-icon {
      width: 48px;
      height: 48px;
      margin-bottom: 9px;
      border-radius: 14px;
   }

   :where(.pg-task) .section:has(.task-hero) .tile-icon i { font-size: 22px; }
   :where(.pg-task) .section:has(.task-hero) .tile-label { margin-bottom: 9px; font-size: 12px; }
   :where(.pg-task) .section:has(.task-hero) .tile-btn { padding: 6px 14px; background: #202B36; font-size: 10px; }
   :where(.pg-task) .section:has(.task-hero) .tile-btn:hover { background: #A564EF; }

   :where(.pg-task) .section:has(.task-hero) .task-section {
      margin-bottom: 0;
      padding: 17px 13px 13px;
      border: 1px solid #E9E7EE;
      border-radius: 18px;
      background: #FFFFFF;
      box-shadow: 0 8px 20px rgba(38, 53, 67, .07);
   }

   :where(.pg-task) .section:has(.task-hero) .task-section-title {
      margin-bottom: 13px;
      color: #202B36;
      font-size: 14px;
   }

   :where(.pg-task) .section:has(.task-hero) .task-item {
      gap: 11px;
      min-height: 68px;
      margin-bottom: 8px;
      padding: 10px;
      border: 1px solid #E9E7EE;
      border-radius: 13px;
      background: #FBFCFD;
      box-shadow: none;
   }

   :where(.pg-task) .section:has(.task-hero) .task-item:hover { transform: translateY(-1px); }
   :where(.pg-task) .section:has(.task-hero) .task-logo { width: 42px; height: 42px; border-radius: 12px; box-shadow: none; }
   :where(.pg-task) .section:has(.task-hero) .task-name { font-size: 12.5px; }
   :where(.pg-task) .section:has(.task-hero) .task-earn { margin-top: 4px; font-size: 11px; }
   :where(.pg-task) .section:has(.task-hero) .task-btn-pill { padding: 8px 11px; border-radius: 8px; font-size: 10px; }
   :where(.pg-task) .section:has(.task-hero) .task-btn-pill.start { background: #A564EF; box-shadow: 0 5px 12px rgba(165, 100, 239, .2); }
   :where(.pg-task) .section:has(.task-hero) .task-btn-pill.claim { background: #F2AD43; box-shadow: 0 5px 12px rgba(242, 173, 67, .2); }
   :where(.pg-task) .section:has(.task-hero) .task-btn-pill.done { border: 1px solid #DCE9E3; background: #EDF7F1; color: #23845E; }

   @media (max-width: 360px) {
      :where(.pg-task) .section:has(.task-hero) { padding-right: 10px; padding-left: 10px; }
      :where(.pg-task) .section:has(.task-hero) .task-hero { min-height: 150px; padding: 18px; }
      :where(.pg-task) .section:has(.task-hero) .task-hero::after { left: 18px; bottom: 17px; font-size: 11px; }
      :where(.pg-task) .section:has(.task-hero) .task-hero img { width: 94px; height: 94px; }
      :where(.pg-task) .section:has(.task-hero) .task-btn-pill { padding-right: 8px; padding-left: 8px; }
   }


/* ==========================================================================
   Page: social task
   scope: html.pg-social
   ========================================================================== */
:where(.pg-social) p.text-mob {
    color: antiquewhite !important;
}


/* ==========================================================================
   Page: withdraw timer
   scope: html.pg-withdraw
   ========================================================================== */
:where(.pg-withdraw) section.countdown-section {
    overflow: hidden;
}
:where(.pg-withdraw) .countdown-header {
    text-align: center !important;
    border: 1px solid #BBB9C3e8;
    padding: 0.4rem;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
}
:where(.pg-withdraw) .countdown-header p {
  color: #310067;
    letter-spacing: 1px;
}
:where(.pg-withdraw) div#countDiv {
    display: flex;
    padding: 5px;
}
:where(.pg-withdraw) .counter-element {
    padding: 2px;
    width: -webkit-fill-available;
    text-align: center;
}
:where(.pg-withdraw) .number-div {
    font-family: fantasy;
    font-size: xx-large;
}


/* ==========================================================================
   Page: withdraw
   scope: html.pg-withdraw
   ========================================================================== */
:where(.pg-withdraw) .bank-card {
    width: 100%;
    border-radius: 16px;
    background: linear-gradient(163deg, #271739, #37343E);
    color: #FFFFFF;
    padding: 20px;
    box-shadow: 0px 4px 10px #770DF036;
    position: relative;
}
  :where(.pg-withdraw) .bank-card h2 {
    margin: 0;
    font-size: 18px;
  }

  :where(.pg-withdraw) .bank-card .bank-name {
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
  }

  :where(.pg-withdraw) .bank-card .chip {
    width: 50px;
    height: 35px;
    background-image: linear-gradient(135deg, #0E0220 0%, #000000 6px, #0C0B07 24.8%, #0E0220 35%, #726890 56.3%, #FFF3CD 62.4%, #635427 72.9%, #45305Cdb 78.5%, #3B3523 100%);
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 5px;
}

  :where(.pg-withdraw) .bank-card .acc-number {
    font-size: 17px;
    margin-top: 30px;
    letter-spacing: 0px;
  }

  :where(.pg-withdraw) .bank-card .holder {
    margin-top: 15px;
    font-size: 14px;
    text-transform: uppercase;
  }

  :where(.pg-withdraw) .bank-card .upi-id {
    margin-top: 5px;
    font-size: 12px;
  }

  :where(.pg-withdraw) .bank-card .bottom-row {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 12px;
  }

  :where(.pg-withdraw) .card-logo {
    width: 40px;
    height: auto;
  }


/* ==========================================================================
   Page: welcome (desktop)
   scope: html.pg-welcome
   ========================================================================== */
:where(.pg-welcome) .success-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  :where(.pg-welcome) .icon-circle {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #28D47C;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  :where(.pg-welcome) .data-block p {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 15px;
    margin-bottom: 10px;
  }


/* ==========================================================================
   Clay 3D theme (web + mobile base)
   scope: global (all pages)
   ========================================================================== */
:root {
  --g-violet: linear-gradient(150deg, #A78BFF 0%, #6C3BFF 100%);  --e-violet: #4A22C9; --c-violet: 108,59,255;
  --g-pink:   linear-gradient(150deg, #FF8FC2 0%, #F2357F 100%);  --e-pink:   #B81E5C; --c-pink: 242,53,127;
  --g-blue:   linear-gradient(150deg, #6FD0FF 0%, #2477FF 100%);  --e-blue:   #134FC4; --c-blue: 36,119,255;
  --g-mint:   linear-gradient(150deg, #7DF5CF 0%, #12BE8C 100%);  --e-mint:   #0B8A64; --c-mint: 18,190,140;
  --g-sun:    linear-gradient(150deg, #FFE07A 0%, #FFA11E 100%);  --e-sun:    #C26C00; --c-sun: 255,161,30;
  --g-coral:  linear-gradient(150deg, #FF9E7A 0%, #FF5A3C 100%);  --e-coral:  #BF3318; --c-coral: 255,90,60;

  --clay-bg1: #EEF0FF; --clay-bg2: #FFF0F6; --clay-bg3: #E6FAFF;
  --clay-ink: #241B4B; --clay-soft: #6A6591; --clay-line: rgba(108,59,255,.14);
  --clay-r: 24px;
  --clay-card: 0 2px 0 rgba(255,255,255,.95) inset, 0 -8px 16px rgba(108,59,255,.06) inset, 0 18px 34px -12px rgba(60,40,140,.28), 0 4px 10px rgba(60,40,140,.08);
  --clay-card-hover: 0 2px 0 rgba(255,255,255,.95) inset, 0 -8px 16px rgba(108,59,255,.06) inset, 0 30px 50px -14px rgba(60,40,140,.38), 0 8px 16px rgba(60,40,140,.10);
  --clay-in: inset 0 3px 7px rgba(60,40,140,.14), inset 0 -2px 0 rgba(255,255,255,.9);
  --clay-gloss: inset 0 2px 1px rgba(255,255,255,.65), inset 0 -3px 6px rgba(0,0,0,.14);
  --pop-font: 'Outfit', 'Nunito', sans-serif;
  --pop-body: 'Nunito', system-ui, sans-serif;
  --ink: var(--clay-ink); --ink-soft: var(--clay-soft); --paper: var(--clay-bg1); --paper2: #fff;
  --cobalt: #6C3BFF; --cobalt-dark: #4A22C9; --brass: #FFA11E; --brass-dark: #C26C00; --coral: #F2357F;
  --success: #12BE8C; --muted: var(--clay-soft); --muted-dark: var(--clay-ink);
  --border: var(--clay-line); --surface-hover: rgba(108,59,255,.08);
  --shadow-sm: 0 6px 14px -4px rgba(60,40,140,.2); --shadow-md: var(--clay-card); --shadow-lg: var(--clay-card-hover);
  --shadow-glow: 0 10px 30px rgba(108,59,255,.35);
  --grad-violet: var(--g-violet); --grad-gold: var(--g-sun); --font-display: var(--pop-font);
  --bg-primary: var(--clay-bg1); --bg-surface: #fff; --bg-surface-hover: #F6F2FF;
  --border-color: var(--clay-line); --accent-cyan: #2477FF; --accent-purple: #6C3BFF;
  --accent-green: #12BE8C; --accent-orange: #FFA11E; --accent-pink: #F2357F;
  --text-main: var(--clay-ink); --text-muted: var(--clay-soft); --card-radius: var(--clay-r);
  --wm-ink: transparent; --wm-ink-soft: #fff; --wm-panel: #fff; --wm-panel-light: #F6F2FF;
  --wm-line: var(--clay-line); --wm-text: var(--clay-ink); --wm-muted: var(--clay-soft);
  --wm-amber: #FFA11E; --wm-amber-deep: #C26C00; --wm-cyan: #2FC7E8; --wm-green: #12BE8C;
  --wm-red: #F2357F; --wm-blue: #2477FF; --wm-purple: #6C3BFF;
  --wm-shadow: var(--clay-card); --wm-shadow-small: 0 8px 18px -8px rgba(60,40,140,.3);
  --brand-50: #F3EEFF; --brand-100: #E4D9FF; --brand-200: #C9B5FF; --brand-400: #9068FF;
  --brand-500: #6C3BFF; --brand-600: #5A2AE6; --brand-700: #4A22C9;
  --amber: #FFA11E; --amber-soft: #FFF0D1; --mint: #12BE8C; --mint-soft: #D5F7EC;
  --sky: #2477FF; --sky-soft: #DCEAFF; --violet: #6C3BFF; --violet-soft: #EDE5FF;
  --ink-900: var(--clay-ink); --ink-700: #3A3166; --ink-500: var(--clay-soft); --ink-300: #9A95BD; --ink-100: #D4D0EA;
  --paper-raised: #fff; --paper-sunken: #F3F0FF; --paper-edge: var(--clay-line); --hairline: var(--clay-line);
  --r-xs: 10px; --r-sm: 14px; --r-md: 18px; --r-lg: 22px; --r-xl: 26px; --r-2xl: 30px;
  --lift-1: 0 6px 14px -6px rgba(60,40,140,.25); --lift-2: var(--clay-card); --lift-3: var(--clay-card-hover);
  --lift-brand: 0 12px 24px -8px rgba(108,59,255,.55); --lift-brand-lg: 0 18px 36px -10px rgba(108,59,255,.6);
  --red: #6C3BFF; --red-dark: #4A22C9; --red-soft: #F3EEFF;
  --cream: #F3F0FF; --surface: #fff; --card: #fff; --border-soft: var(--clay-line);
  --green: #12BE8C; --green-dark: #0B8A64;
  --blue: #2477FF; --purple: #6C3BFF; --pink: #F2357F;
  --gm: var(--g-violet); --go: var(--g-sun); --gt: var(--g-violet); --gp: var(--g-pink); --gi: var(--g-blue);
  --dark: var(--clay-ink); --mid: var(--clay-soft); --light: #9A95BD; --surf: var(--clay-bg1);
  --sh: var(--clay-card); --shh: var(--clay-card-hover); --sh-inset: var(--clay-in); --sh-sm: 0 8px 16px -8px rgba(60,40,140,.3);
}
html body, body.web, body.apk {
  font-family: var(--pop-body) !important;
  color: var(--clay-ink) !important;
  background-color: var(--clay-bg1) !important;
  background-image:
    radial-gradient(60vw 50vh at 8% 4%, rgba(167,139,255,.38), transparent 60%),
    radial-gradient(55vw 45vh at 95% 12%, rgba(255,143,194,.30), transparent 60%),
    radial-gradient(60vw 50vh at 85% 98%, rgba(111,208,255,.34), transparent 60%),
    radial-gradient(50vw 40vh at 5% 95%, rgba(125,245,207,.28), transparent 60%) !important;
  background-attachment: fixed !important;
  background-size: auto !important;
}
h1, h2, h3, h4, h5, h6, .card-title, .section-title, .pagetitle h1, .wm-section-title, .hero-name { font-family: var(--pop-font) !important; letter-spacing: -.01em; }
a { color: #6C3BFF; } a:hover { color: #4A22C9; }
::selection { background: #C9B5FF; color: #241B4B; }

.pagetitle h1 {
  font-weight: 800 !important; font-size: 28px !important;
  background: var(--g-violet); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
  filter: drop-shadow(0 3px 0 rgba(74,34,201,.18));
}
.breadcrumb a { color: #6C3BFF !important; font-weight: 700; }
.breadcrumb .active { color: var(--clay-soft) !important; }
.header {
  background: rgba(255,255,255,.78) !important; backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border-bottom: 0 !important;
  box-shadow: 0 10px 30px -12px rgba(60,40,140,.28), 0 2px 0 rgba(255,255,255,.9) inset !important;
}
.header::after { display: none !important; }
.header .toggle-sidebar-btn {
  color: #fff !important; background: var(--g-violet); width: 40px; height: 40px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px !important;
  box-shadow: 0 4px 0 var(--e-violet), 0 10px 18px -4px rgba(var(--c-violet),.5), var(--clay-gloss);
  padding: 0 !important; margin-left: 14px !important; transition: transform .12s, box-shadow .12s;
}
.header .toggle-sidebar-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--e-violet), var(--clay-gloss); }
.header-nav .nav-profile { color: var(--clay-ink) !important; font-weight: 800; }
.header-nav .nav-profile img { border: 3px solid #fff !important; box-shadow: 0 6px 14px -3px rgba(var(--c-violet),.5), 0 0 0 3px rgba(167,139,255,.5); }
.header-nav .nav-profile span { color: var(--clay-ink) !important; }
.sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,242,255,.92)) !important;
  border-right: 0 !important; backdrop-filter: blur(14px);
  box-shadow: 14px 0 40px -18px rgba(60,40,140,.35), 2px 0 0 rgba(255,255,255,.9) inset !important;
}
.sidebar .sidebar-nav .nav-link {
  color: var(--clay-ink) !important; background: transparent !important; border: 0 !important;
  border-radius: 16px !important; font-weight: 700 !important; margin-bottom: 6px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.sidebar .sidebar-nav .nav-link::before { display: none !important; }
.sidebar .sidebar-nav .nav-link i {
  color: #6C3BFF !important; background: #F3EEFF !important; width: 34px; height: 34px; min-width: 34px;
  border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px !important;
  margin-right: 10px; box-shadow: 0 3px 0 #D9CCFF, inset 0 2px 0 #fff;
}
.sidebar .sidebar-nav .nav-link .bi-chevron-down { background: none !important; box-shadow: none !important; width: auto; min-width: 0; color: var(--clay-soft) !important; }
.sidebar .sidebar-nav .nav-link:hover { background: #fff !important; transform: translateX(4px); box-shadow: 0 10px 20px -10px rgba(60,40,140,.35); }
.sidebar .sidebar-nav .nav-link:not(.collapsed),
.sidebar .sidebar-nav .nav-link.active {
     background: transparent;
    color: #6c3bff !important;
    box-shadow: 0 5px 0 var(--e-violet), 0 14px 24px -8px rgba(var(--c-violet), .55), var(--clay-gloss);
    border: 1px solid #6c3bff !important;
    margin-bottom: 9px !important;
    padding: 4px !important;
}
.sidebar .sidebar-nav .nav-link:not(.collapsed) i, .sidebar .sidebar-nav .nav-link.active i {
  
      background: #6c3bff !important;
    color: #fff !important;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4);
    border-radius: 11px !important;
}
.sidebar .sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down { color: #fff !important; }
.sidebar .sidebar-nav .nav-content a { color: var(--clay-ink) !important; font-weight: 700; border-radius: 12px; }
.sidebar .sidebar-nav .nav-content a:hover, .sidebar .sidebar-nav .nav-content a.active { background: #F3EEFF !important; color: #6C3BFF !important; }
.card, .modal-content, .dropdown-menu {
  background: linear-gradient(180deg, #fff 0%, #FBF9FF 100%) !important;
  border: 0 !important; border-radius: var(--clay-r) !important;
  box-shadow: var(--clay-card) !important; backdrop-filter: none !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.card::after, .card::before { display: none !important; }
.card:hover { transform: translateY(-5px); box-shadow: var(--clay-card-hover) !important; }
.card-header, .card-footer, .modal-header { background: transparent !important; border-color: var(--clay-line) !important; color: var(--clay-ink) !important; }
.card-title { color: var(--clay-ink) !important; font-weight: 800 !important; }
.card-title span { color: var(--clay-soft) !important; font-weight: 600; }
.alert { border: 0 !important; border-radius: 18px !important; box-shadow: var(--clay-card) !important; font-weight: 600; }
.dropdown-menu { padding: 8px !important; }
.dropdown-menu .dropdown-item { border-radius: 12px; font-weight: 700; color: var(--clay-ink) !important; }
.dropdown-menu .dropdown-item:hover { background: #F3EEFF !important; color: #6C3BFF !important; }
.dropdown-menu-arrow::before { display: none !important; }
.btn {
  border: 0 !important; border-radius: 16px !important; font-family: var(--pop-font); font-weight: 700 !important;
  color: #fff; padding-top: .55rem; padding-bottom: .55rem; position: relative;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}
.btn:hover { filter: brightness(1.07) saturate(1.1); transform: translateY(-2px); }
.btn:active { transform: translateY(4px) !important; }
.btn-primary { background: var(--g-violet) !important; color: #fff !important; box-shadow: 0 5px 0 var(--e-violet), 0 14px 22px -6px rgba(var(--c-violet),.55), var(--clay-gloss) !important; }
.btn-success { background: var(--g-mint) !important; color: #fff !important; box-shadow: 0 5px 0 var(--e-mint), 0 14px 22px -6px rgba(var(--c-mint),.55), var(--clay-gloss) !important; }
.btn-info { background: var(--g-blue) !important; color: #fff !important; box-shadow: 0 5px 0 var(--e-blue), 0 14px 22px -6px rgba(var(--c-blue),.55), var(--clay-gloss) !important; }
.btn-light, .btn-outline-secondary { background: #fff !important; color: #6C3BFF !important; box-shadow: 0 5px 0 #DCD3FA, 0 12px 20px -8px rgba(60,40,140,.25) !important; }
.btn:active.btn-primary, .btn:active.btn-success, .btn:active.btn-info { box-shadow: 0 1px 0 rgba(0,0,0,.25), var(--clay-gloss) !important; }
.btn-close { background-color: #fff !important; border-radius: 12px !important; opacity: 1 !important; box-shadow: 0 3px 0 #DCD3FA, 0 8px 14px -6px rgba(60,40,140,.3); }
.form-control, .form-select, textarea, select {
  background: #F4F1FF !important; color: var(--clay-ink) !important; border: 2px solid transparent !important;
  border-radius: 16px !important; box-shadow: var(--clay-in) !important; font-weight: 600;
}
.form-control:focus, .form-select:focus { border-color: #A78BFF !important; background: #fff !important; box-shadow: var(--clay-in), 0 0 0 5px rgba(167,139,255,.28) !important; }
.form-control::placeholder { color: #A6A1C8; }
.form-check-input { border: 2px solid #C9B5FF !important; box-shadow: var(--clay-in); }
.form-check-input:checked { background-color: #6C3BFF !important; border-color: #6C3BFF !important; }
.form-label, label { font-weight: 700; color: var(--clay-ink); }
.table { --bs-table-bg: transparent; color: var(--clay-ink); border-color: transparent !important; }
.table thead th {
  background: var(--g-violet) !important; color: #fff !important; border: 0 !important;
  font-family: var(--pop-font); font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
}
.table thead th:first-child { border-radius: 14px 0 0 14px; } .table thead th:last-child { border-radius: 0 14px 14px 0; }
.table td, .table th { border-color: rgba(108,59,255,.1) !important; }
.badge { border: 0 !important; border-radius: 10px !important; font-weight: 800; box-shadow: 0 3px 0 rgba(0,0,0,.16), var(--clay-gloss); color: #fff !important; }
.bg-primary, .badge.bg-primary { background: var(--g-violet) !important; }
.bg-success, .badge.bg-success { background: var(--g-mint) !important; }
.bg-danger, .badge.bg-danger { background: var(--g-pink) !important; }
.alert-success { background: #E2FAF1 !important; color: #0B6B4D; } .alert-info { background: #E0EEFF !important; color: #123F9C; }
.pagination .page-link { border: 0 !important; color: #6C3BFF !important; font-weight: 800; margin: 0 3px; border-radius: 12px !important; box-shadow: 0 4px 0 #DCD3FA; background: #fff; }
.pagination .active .page-link { background: var(--g-violet) !important; color: #fff !important; box-shadow: 0 4px 0 var(--e-violet); }

.back-to-top { background: var(--g-pink) !important; color: #fff !important; border-radius: 16px !important; box-shadow: 0 5px 0 var(--e-pink), 0 14px 22px -6px rgba(var(--c-pink),.55), var(--clay-gloss) !important; }
.footer { color: var(--clay-soft) !important; font-weight: 700; border-top: 0 !important; background: transparent !important; }
.notification-banner {
  background: linear-gradient(135deg, #fff, #F6F0FF) !important; border: 0 !important; border-radius: 20px !important;
  box-shadow: var(--clay-card) !important;
}
.notify-badge { background: var(--g-pink) !important; color: #fff !important; border-radius: 12px !important; box-shadow: 0 3px 0 var(--e-pink), var(--clay-gloss); }
.notify-content marquee { color: var(--clay-ink) !important; font-weight: 700 !important; }

.wallet-panel {
  background: radial-gradient(120% 140% at 0% 0%, #A78BFF 0%, #6C3BFF 45%, #3E1FC0 100%) !important;
  border: 0 !important; border-radius: 30px !important; color: #fff !important;
  box-shadow: 0 8px 0 #2F1596, 0 30px 50px -14px rgba(var(--c-violet),.6), 0 3px 0 rgba(255,255,255,.45) inset !important;
  overflow: hidden;
}
.wallet-panel::before { background: radial-gradient(circle at 85% 10%, rgba(255,255,255,.4), transparent 45%), radial-gradient(circle at 10% 110%, rgba(255,143,194,.55), transparent 50%) !important; }
.hero-avatar { background: var(--g-sun) !important; color: #4a2a00 !important; border: 3px solid #fff; border-radius: 20px !important; box-shadow: 0 5px 0 var(--e-sun), 0 14px 20px -6px rgba(0,0,0,.35), var(--clay-gloss) !important; }
.hero-greet { color: rgba(255,255,255,.8) !important; font-weight: 800; }
.hero-name { color: #fff !important; font-weight: 800 !important; font-size: 1.7rem !important; text-shadow: 0 3px 0 rgba(0,0,0,.18); }
.hero-code code { background: rgba(255,255,255,.2) !important; color: #fff !important; font-weight: 800; border-radius: 10px !important; box-shadow: inset 0 2px 5px rgba(0,0,0,.2); }
.hero-copy-btn { background: var(--g-sun) !important; color: #4a2a00 !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 4px 0 var(--e-sun), var(--clay-gloss) !important; }

.stat-pill { border: 0 !important; border-radius: 24px !important; color: #fff !important; position: relative; overflow: hidden; }
.stat-pill::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent); pointer-events: none; border-radius: 24px 24px 60% 60%; }
.stat-pill.balance { background: var(--g-mint) !important; box-shadow: 0 7px 0 var(--e-mint), 0 22px 30px -10px rgba(var(--c-mint),.6) !important; }
.stat-pill.withdrawal { background: var(--g-pink) !important; box-shadow: 0 7px 0 var(--e-pink), 0 22px 30px -10px rgba(var(--c-pink),.6) !important; }
.stat-pill.team { background: var(--g-blue) !important; box-shadow: 0 7px 0 var(--e-blue), 0 22px 30px -10px rgba(var(--c-blue),.6) !important; }
.stat-pill.total-team { background: var(--g-sun) !important; box-shadow: 0 7px 0 var(--e-sun), 0 22px 30px -10px rgba(var(--c-sun),.6) !important; }
.stat-pill:hover { transform: translateY(-6px) rotateX(4deg) !important; background-color: transparent !important; }
.stat-pill-icon { background: rgba(255,255,255,.3) !important; color: #fff !important; border-radius: 16px !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 8px rgba(0,0,0,.12); }
.stat-pill-label { color: rgba(255,255,255,.92) !important; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem !important; }
.stat-pill-value { color: #fff !important; font-family: var(--pop-font); font-weight: 800 !important; font-size: 1.55rem !important; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.stat-pill.total-team .stat-pill-label, .stat-pill.total-team .stat-pill-value { color: #4a2a00 !important; text-shadow: none; }

.dock-item { border: 0 !important; border-radius: 22px !important; color: #fff !important; position: relative; overflow: hidden; }
.dock-item::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,.3), transparent); pointer-events: none; }
.dock-item:hover { transform: translateY(-6px) !important; color: #fff !important; }
.dock-item:active { transform: translateY(2px) !important; }
.dock-icon, .dock-label { color: #fff !important; position: relative; z-index: 1; }
.dock-label { font-weight: 800 !important; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.dock-item:nth-child(6n+1) { background: var(--g-blue) !important; box-shadow: 0 6px 0 var(--e-blue), 0 16px 24px -8px rgba(var(--c-blue),.55) !important; }
.dock-item:nth-child(6n+2) { background: var(--g-violet) !important; box-shadow: 0 6px 0 var(--e-violet), 0 16px 24px -8px rgba(var(--c-violet),.55) !important; }
.dock-item:nth-child(6n+3) { background: var(--g-sun) !important; box-shadow: 0 6px 0 var(--e-sun), 0 16px 24px -8px rgba(var(--c-sun),.55) !important; }
.dock-item:nth-child(6n+4) { background: var(--g-pink) !important; box-shadow: 0 6px 0 var(--e-pink), 0 16px 24px -8px rgba(var(--c-pink),.55) !important; }
.dock-item:nth-child(6n+5) { background: var(--g-mint) !important; box-shadow: 0 6px 0 var(--e-mint), 0 16px 24px -8px rgba(var(--c-mint),.55) !important; }
.dock-item:nth-child(6n) { background: var(--g-coral) !important; box-shadow: 0 6px 0 var(--e-coral), 0 16px 24px -8px rgba(var(--c-coral),.55) !important; }

.income-section, .media-card { background: linear-gradient(180deg,#fff,#FBF9FF) !important; border: 0 !important; border-radius: 28px !important; box-shadow: var(--clay-card) !important; color: var(--clay-ink) !important; }
.section-title { color: var(--clay-ink) !important; font-weight: 800 !important; }
.income-card { background: #fff !important; border: 0 !important; border-radius: 20px !important; box-shadow: 0 2px 0 #fff inset, 0 10px 20px -10px rgba(60,40,140,.35), 0 3px 0 #E7E0FF !important; color: var(--clay-ink) !important; transition: transform .2s ease, box-shadow .2s ease; }
.income-card:hover { transform: translateY(-5px) !important; background: #fff !important; box-shadow: 0 2px 0 #fff inset, 0 20px 30px -12px rgba(60,40,140,.4), 0 3px 0 #D9CCFF !important; }
.income-row-icon { color: #fff !important; border-radius: 14px !important; background: var(--g-violet) !important; box-shadow: 0 4px 0 var(--e-violet), var(--clay-gloss); }
.income-card:nth-child(4n+2) .income-row-icon { background: var(--g-pink) !important; box-shadow: 0 4px 0 var(--e-pink), var(--clay-gloss); }
.income-card:nth-child(4n+3) .income-row-icon { background: var(--g-mint) !important; box-shadow: 0 4px 0 var(--e-mint), var(--clay-gloss); }
.income-card:nth-child(4n) .income-row-icon { background: var(--g-sun) !important; box-shadow: 0 4px 0 var(--e-sun), var(--clay-gloss); }
.income-row-label { color: var(--clay-soft) !important; font-weight: 700; }
.income-row-amount { color: var(--clay-ink) !important; font-family: var(--pop-font); font-weight: 800 !important; }
.video-container { border-radius: 20px !important; box-shadow: 0 16px 30px -10px rgba(60,40,140,.45) !important; overflow: hidden; border: 4px solid #fff; }
.wm-wrap { background: transparent !important; color: var(--clay-ink); font-family: var(--pop-body); }
.wm-notif, .wm-level-reward, .wm-ref-card, .wm-social-card, .wm-card {
  background: linear-gradient(180deg,#fff,#FBF9FF) !important; border: 0 !important;
  box-shadow: var(--clay-card) !important; border-radius: 24px !important;
}
.wm-notif { border-radius: 18px !important; }
.wm-notif marquee { color: var(--clay-ink) !important; font-weight: 700 !important; }
.wm-notif .notif-dot { background: #F2357F; box-shadow: 0 0 0 4px rgba(242,53,127,.2); width: 10px; height: 10px; }
.wm-profile {
  background: radial-gradient(120% 160% at 0% 0%, #A78BFF 0%, #6C3BFF 50%, #3E1FC0 100%) !important;
  border: 0 !important; border-radius: 28px !important;
  box-shadow: 0 7px 0 #2F1596, 0 26px 40px -12px rgba(var(--c-violet),.6), 0 3px 0 rgba(255,255,255,.45) inset !important;
}
.wm-profile::after { display: block !important; border: 0 !important; background: radial-gradient(circle, rgba(255,143,194,.55), transparent 65%) !important; box-shadow: none !important; }
.wm-avatar { background: var(--g-sun) !important; color: #4a2a00 !important; border: 3px solid #fff !important; border-radius: 18px !important; box-shadow: 0 4px 0 var(--e-sun), 0 12px 18px -6px rgba(0,0,0,.35), var(--clay-gloss) !important; }
.wm-profile-text h4 { color: #fff !important; font-family: var(--pop-font); font-weight: 800 !important; font-size: 17px !important; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.wm-profile-text p { color: rgba(255,255,255,.88) !important; font-weight: 700 !important; }
.wm-logout { background: var(--g-pink) !important; border: 0 !important; color: #fff !important; border-radius: 14px !important; box-shadow: 0 4px 0 var(--e-pink), var(--clay-gloss) !important; }
.wm-logout:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--e-pink) !important; }

.wm-wallet-card, .wm-team-card { border: 0 !important; border-radius: 24px !important; position: relative; }
.wm-wallet-card::after { border: 0 !important; background: radial-gradient(circle, rgba(255,255,255,.4), transparent 65%) !important; width: 120px; height: 120px; }
.wm-wallet-card.bal { background: var(--g-mint) !important; box-shadow: 0 7px 0 var(--e-mint), 0 20px 28px -10px rgba(var(--c-mint),.6), 0 2px 0 rgba(255,255,255,.5) inset !important; }
.wm-wallet-card.with { background: var(--g-pink) !important; box-shadow: 0 7px 0 var(--e-pink), 0 20px 28px -10px rgba(var(--c-pink),.6), 0 2px 0 rgba(255,255,255,.5) inset !important; }
.wm-wallet-icon { background: rgba(255,255,255,.3) !important; color: #fff !important; border-radius: 14px !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 8px rgba(0,0,0,.12); }
.wm-wallet-label { color: rgba(255,255,255,.92) !important; font-weight: 800 !important; }
.wm-wallet-amt { color: #fff !important; font-family: var(--pop-font); font-weight: 800 !important; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.wm-team-card.direct { background: var(--g-blue) !important; box-shadow: 0 6px 0 var(--e-blue), 0 18px 26px -10px rgba(var(--c-blue),.55) !important; }
.wm-team-card.all { background: var(--g-sun) !important; box-shadow: 0 6px 0 var(--e-sun), 0 18px 26px -10px rgba(var(--c-sun),.55) !important; }
.wm-team-card:hover { transform: translateY(-4px) !important; filter: brightness(1.05); }
.wm-team-card:active { transform: translateY(3px) !important; }
.wm-team-icon { background: rgba(255,255,255,.3) !important; color: #fff !important; border-radius: 14px !important; box-shadow: inset 0 2px 0 rgba(255,255,255,.5); }
.wm-team-info p { color: rgba(255,255,255,.92) !important; }
.wm-team-info h4 { color: #fff !important; font-family: var(--pop-font); font-weight: 800 !important; }
.wm-team-card.all .wm-team-info p, .wm-team-card.all .wm-team-info h4 { color: #4a2a00 !important; }
.wm-team-arrow { color: rgba(255,255,255,.9) !important; } .wm-team-card.all .wm-team-arrow { color: #4a2a00 !important; }

.wm-section-title { color: var(--clay-ink) !important; font-weight: 800 !important; font-size: 16px !important; }
.wm-section-title::before { width: 12px !important; height: 12px !important; border-radius: 50% !important; background: var(--g-pink) !important; box-shadow: 0 3px 0 var(--e-pink), inset 0 2px 1px rgba(255,255,255,.6); }
.wm-income-card { background: #fff !important; border: 0 !important; border-radius: 20px !important; box-shadow: 0 2px 0 #fff inset, 0 12px 20px -10px rgba(60,40,140,.38), 0 4px 0 #E7E0FF !important; }
.wm-income-card:active { transform: translateY(3px); box-shadow: 0 2px 0 #E7E0FF !important; }
.wm-inc-icon { border: 0 !important; color: #fff !important; border-radius: 14px !important; background: var(--g-violet) !important; box-shadow: 0 4px 0 var(--e-violet), var(--clay-gloss) !important; }
.wm-income-card:nth-child(4n+1) .wm-inc-icon { background: var(--g-sun) !important; box-shadow: 0 4px 0 var(--e-sun), var(--clay-gloss) !important; }
.wm-income-card:nth-child(4n+2) .wm-inc-icon { background: var(--g-pink) !important; box-shadow: 0 4px 0 var(--e-pink), var(--clay-gloss) !important; }
.wm-income-card:nth-child(4n+3) .wm-inc-icon { background: var(--g-mint) !important; box-shadow: 0 4px 0 var(--e-mint), var(--clay-gloss) !important; }
.wm-income-card:nth-child(4n) .wm-inc-icon { background: var(--g-blue) !important; box-shadow: 0 4px 0 var(--e-blue), var(--clay-gloss) !important; }
.wm-inc-amt { color: var(--clay-ink) !important; font-family: var(--pop-font); font-weight: 800 !important; }
.wm-inc-label { color: var(--clay-soft) !important; font-weight: 700 !important; }
.wm-ref-note { background: #FFF1D6 !important; color: #8A4B00 !important; border: 0 !important; border-radius: 16px !important; box-shadow: var(--clay-in); font-weight: 700 !important; }
.wm-ref-note i { color: #FFA11E !important; }
.wm-action-btn { border: 0 !important; color: #fff !important; border-radius: 18px !important; font-family: var(--pop-font); }
.wm-action-btn.ab-referral { background: var(--g-pink) !important; box-shadow: 0 5px 0 var(--e-pink), 0 14px 20px -8px rgba(var(--c-pink),.55), var(--clay-gloss); }
.wm-action-btn.ab-chat { background: var(--g-blue) !important; box-shadow: 0 5px 0 var(--e-blue), 0 14px 20px -8px rgba(var(--c-blue),.55), var(--clay-gloss); }
.wm-action-btn.ab-call { background: var(--g-mint) !important; box-shadow: 0 5px 0 var(--e-mint), 0 14px 20px -8px rgba(var(--c-mint),.55), var(--clay-gloss); }
.wm-action-btn:active { transform: translateY(4px); filter: none; }
.wm-social-item { color: var(--clay-soft) !important; font-weight: 800; }
.wm-social-icon { border: 0 !important; color: #fff !important; border-radius: 18px !important; }
.wm-social-icon.si-wa { background: var(--g-mint) !important; box-shadow: 0 5px 0 var(--e-mint), var(--clay-gloss); }
.wm-social-icon.si-yt { background: var(--g-pink) !important; box-shadow: 0 5px 0 var(--e-pink), var(--clay-gloss); }
.wm-social-icon.si-gl { background: var(--g-sun) !important; box-shadow: 0 5px 0 var(--e-sun), var(--clay-gloss); }
.wm-social-icon.si-vb { background: var(--g-violet) !important; box-shadow: 0 5px 0 var(--e-violet), var(--clay-gloss); }
.wm-social-icon.si-tg { background: var(--g-blue) !important; box-shadow: 0 5px 0 var(--e-blue), var(--clay-gloss); }
.wm-social-icon.si-cm { background: var(--g-coral) !important; box-shadow: 0 5px 0 var(--e-coral), var(--clay-gloss); }
.wm-claim-btn { background: var(--g-violet) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important; font-weight: 800; box-shadow: 0 4px 0 var(--e-violet), var(--clay-gloss) !important; }
.wm-claim-btn:active { transform: translateY(3px); }
.bottom-nav {
  background: rgba(255,255,255,.9) !important; backdrop-filter: blur(16px); border: 0 !important; border-radius: 28px !important;
  box-shadow: 0 2px 0 #fff inset, 0 6px 0 #DCD3FA, 0 24px 40px -10px rgba(60,40,140,.45) !important; padding: 7px !important;
}
.bottom-nav a { color: #9A95BD !important; border-radius: 20px !important; font-weight: 800; }
.bottom-nav a span { font-weight: 800 !important; font-size: 10px !important; }
.bottom-nav a.active { background: var(--g-violet) !important; color: #fff !important; box-shadow: 0 4px 0 var(--e-violet), var(--clay-gloss); }
.bottom-nav a.active i { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; }
.bottom-nav a.active::after { display: none !important; }
.bottom-nav a:nth-child(3) {
  background: var(--g-pink) !important; color: #fff !important; border-radius: 50% !important; animation: none !important;
  box-shadow: 0 6px 0 var(--e-pink), 0 18px 26px -6px rgba(var(--c-pink),.6), var(--clay-gloss), 0 0 0 7px #fff !important;
}
.bottom-nav a:nth-child(3) i { -webkit-text-fill-color: #fff !important; color: #fff !important; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ==========================================================================
   Auth: floating spheres
   scope: html.auth
   ========================================================================== */
:where(.auth) body::before, :where(.auth) body::after { content: '' !important; position: fixed !important; border-radius: 50% !important; pointer-events: none; z-index: -1 !important; inset: auto !important; filter: none !important; animation: clayFloat 9s ease-in-out infinite !important; }
:where(.auth) body::before { width: 260px !important; height: 260px !important; top: -70px !important; left: -60px !important; background: radial-gradient(circle at 32% 28%, #FFD3E8 0%, #FF8FC2 35%, #F2357F 100%) !important; box-shadow: inset -18px -22px 40px rgba(120,10,60,.35), 0 40px 60px -20px rgba(242,53,127,.5) !important; }
:where(.auth) body::after { width: 340px !important; height: 340px !important; right: -110px !important; bottom: -90px !important; top: auto !important; left: auto !important; transform: none !important; background: radial-gradient(circle at 32% 28%, #CFF1FF 0%, #6FD0FF 35%, #2477FF 100%) !important; box-shadow: inset -24px -28px 50px rgba(10,40,130,.4), 0 50px 70px -24px rgba(36,119,255,.5) !important; animation-delay: -4s !important; opacity: 1 !important; }
@keyframes clayFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -22px; } }


/* ==========================================================================
   Auth: desktop card
   scope: html.auth-web
   ========================================================================== */
:where(.auth-web) .register-card {
  max-width: 450px !important; padding: 40px 34px !important; border: 0 !important; border-radius: 36px !important;
  background: linear-gradient(180deg, #fff 0%, #FAF7FF 100%) !important; backdrop-filter: none !important;
  box-shadow: 0 3px 0 #fff inset, 0 -10px 20px rgba(108,59,255,.06) inset, 0 10px 0 #DCD3FA, 0 40px 70px -20px rgba(60,40,140,.5) !important;
  animation: cardRise .7s cubic-bezier(.16,1,.3,1) both !important;
}
:where(.auth-web) .register-card::before { top: -50px !important; right: -50px !important; width: 170px !important; height: 170px !important; filter: none !important; background: radial-gradient(circle at 32% 28%, #FFF3C4 0%, #FFD04D 40%, #FFA11E 100%) !important; box-shadow: inset -10px -12px 22px rgba(150,80,0,.35) !important; }
:where(.auth-web) .register-card::after { display: none !important; }
:where(.auth-web) .register-card .logo-img { max-height: 70px; filter: drop-shadow(0 10px 12px rgba(60,40,140,.3)); }
:where(.auth-web) .register-card h4 { font-family: var(--pop-font); font-weight: 800 !important; font-size: 30px; color: var(--clay-ink) !important; margin-top: 6px; }
:where(.auth-web) .auth-eyebrow, :where(.auth-web) .auth-subtitle { font-family: var(--pop-body); font-weight: 800; }
:where(.auth-web) .auth-eyebrow { display: table !important; margin: 0 auto 6px !important; padding: 5px 14px !important; border-radius: 99px !important; background: var(--g-violet) !important; color: #fff !important; font-size: 11px !important; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 3px 0 var(--e-violet), var(--clay-gloss) !important; }
:where(.auth-web) .auth-eyebrow::before { color: #FFE07A !important; }
:where(.auth-web) .auth-subtitle { color: var(--clay-soft) !important; }

:where(.auth-web) .input-icon-group > i { background: #fff !important; color: #6C3BFF !important; border-radius: 12px !important; box-shadow: 0 3px 0 #D9CCFF, inset 0 2px 0 #fff !important; }
:where(.auth-web) .input-icon-group:focus-within > i { background: var(--g-violet) !important; color: #fff !important; box-shadow: 0 3px 0 var(--e-violet) !important; }
:where(.auth-web) .input-icon-group .form-control, :where(.auth-web) .register-card .form-control, :where(.auth-web) .register-card select {
  height: 52px; padding-left: 58px !important; background: #F1EDFF !important; border: 2px solid transparent !important;
  border-radius: 18px !important; box-shadow: var(--clay-in) !important; color: var(--clay-ink) !important; font-weight: 700 !important;
}
:where(.auth-web) .register-card .form-control.mb-3 { padding-left: 16px !important; }
:where(.auth-web) .register-card .form-control:focus { border-color: #A78BFF !important; background: #fff !important; box-shadow: var(--clay-in), 0 0 0 5px rgba(167,139,255,.28) !important; }
:where(.auth-web) .register-card a { color: #6C3BFF !important; font-weight: 800; }

:where(.auth-web) .button-33 {
  width: 100%; border: 0 !important; border-radius: 20px !important; padding: 15px 20px !important; color: #fff !important;
  font-family: var(--pop-font); font-size: 17px !important; font-weight: 800 !important; letter-spacing: .03em;
  background: var(--g-violet) !important;
  box-shadow: 0 7px 0 var(--e-violet), 0 22px 32px -8px rgba(var(--c-violet),.6), var(--clay-gloss) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important; text-shadow: 0 2px 0 rgba(0,0,0,.2);
}
:where(.auth-web) .button-33::before, :where(.auth-web) .button-33::after { display: none !important; }
:where(.auth-web) .button-33:hover { transform: translateY(-3px) !important; filter: brightness(1.07); box-shadow: 0 10px 0 var(--e-violet), 0 28px 36px -8px rgba(var(--c-violet),.6), var(--clay-gloss) !important; }
:where(.auth-web) .button-33:active { transform: translateY(6px) !important; box-shadow: 0 1px 0 var(--e-violet), var(--clay-gloss) !important; }
:where(.auth-web) .captcha-container { background: #F1EDFF !important; border: 0 !important; border-radius: 18px !important; box-shadow: var(--clay-in) !important; }
:where(.auth-web) .captcha-label { color: #6C3BFF !important; font-weight: 800; }
:where(.auth-web) .refresh-btn { background: var(--g-sun) !important; color: #4a2a00 !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 4px 0 var(--e-sun), var(--clay-gloss) !important; }
:where(.auth-web) .auth-links::before { display: none !important; }
:where(.auth-web) .auth-links, :where(.auth-web) .auth-links .sep { color: var(--clay-soft) !important; }
:where(.auth-web) .register-card .form-check-input { border-radius: 8px !important; }
:where(.auth-web) .register-card .alert { border-radius: 16px !important; }


/* ==========================================================================
   Welcome page (desktop)
   scope: html.welcome
   ========================================================================== */
:where(.welcome) .success-card { background: linear-gradient(150deg, #7DF5CF 0%, #12BE8C 55%, #0B8A64 100%) !important; border: 0 !important; border-radius: 36px !important; box-shadow: 0 10px 0 #0B6B4D, 0 40px 60px -16px rgba(18,190,140,.6), 0 3px 0 rgba(255,255,255,.5) inset !important; }
:where(.welcome) .success-card:hover { transform: none; }
:where(.welcome) .icon-circle { background: #fff !important; color: #12BE8C !important; border-radius: 50% !important; box-shadow: 0 6px 0 #0B8A64, 0 16px 24px -6px rgba(0,0,0,.3), inset 0 -4px 8px rgba(18,190,140,.25) !important; }
:where(.welcome) .success-card .data-block { background: rgba(255,255,255,.22) !important; border-radius: 20px !important; box-shadow: inset 0 3px 8px rgba(0,0,0,.15) !important; padding: 14px 16px; }
:where(.welcome) .success-card .btn-light { background: #fff !important; color: #0B8A64 !important; border-radius: 99px !important; box-shadow: 0 5px 0 #BFEBDD, 0 14px 22px -6px rgba(0,0,0,.3) !important; }


/* ==========================================================================
   Auth + info pages (mobile)
   scope: html.auth-app
   ========================================================================== */
:where(.auth-app) .app-auth-screen, :where(.auth-app) .inner-screen, :where(.auth-app) .welcome-screen { background: transparent !important; }
:where(.auth-app) .app-auth-screen::before { width: 220px !important; height: 220px !important; top: -60px !important; left: -60px !important; right: auto !important; background: radial-gradient(circle at 32% 28%, #FFD3E8 0%, #FF8FC2 35%, #F2357F 100%) !important; box-shadow: inset -16px -20px 36px rgba(120,10,60,.35) !important; opacity: 1 !important; filter: none !important; }
:where(.auth-app) .app-auth-screen::after { width: 260px !important; height: 260px !important; bottom: -80px !important; right: -80px !important; top: auto !important; left: auto !important; background: radial-gradient(circle at 32% 28%, #CFF1FF 0%, #6FD0FF 35%, #2477FF 100%) !important; box-shadow: inset -20px -24px 44px rgba(10,40,130,.4) !important; opacity: 1 !important; filter: none !important; }
:where(.auth-app) .app-brand .brand-badge { background: linear-gradient(180deg,#fff,#F4F0FF) !important; border: 0 !important; border-radius: 34px !important; box-shadow: 0 3px 0 #fff inset, 0 8px 0 #DCD3FA, 0 28px 40px -12px rgba(60,40,140,.5) !important; }
:where(.auth-app) .app-brand .brand-badge::after { background: var(--g-pink) !important; border-radius: 50% !important; box-shadow: 0 3px 0 var(--e-pink), var(--clay-gloss) !important; }
:where(.auth-app) .app-brand h1 { font-family: var(--pop-font) !important; font-weight: 800 !important; background: var(--g-violet); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
:where(.auth-app) .app-brand p, :where(.auth-app) .app-form-sub { color: var(--clay-soft) !important; font-weight: 700; }
:where(.auth-app) .app-form-title { font-family: var(--pop-font) !important; font-weight: 800 !important; color: var(--clay-ink) !important; }
:where(.auth-app) .app-icon-block { background: var(--g-violet) !important; border-radius: 28px !important; box-shadow: 0 6px 0 var(--e-violet), 0 20px 30px -10px rgba(var(--c-violet),.55), var(--clay-gloss) !important; }
:where(.auth-app) .app-icon-block i { color: #fff !important; }

:where(.auth-app) .field-wrap input, :where(.auth-app) .field-wrap select, :where(.auth-app) .field-wrap textarea {
  background: #F1EDFF !important; border: 2px solid transparent !important; border-radius: 20px !important;
  box-shadow: var(--clay-in) !important; color: var(--clay-ink) !important; font-weight: 700 !important;
}
:where(.auth-app) .field-wrap input:focus, :where(.auth-app) .field-wrap select:focus, :where(.auth-app) .field-wrap textarea:focus { background: #fff !important; border-color: #A78BFF !important; box-shadow: var(--clay-in), 0 0 0 5px rgba(167,139,255,.28) !important; }
:where(.auth-app) .field-wrap .f-icon { color: #A78BFF !important; }
:where(.auth-app) .field-wrap:focus-within .f-icon { color: #6C3BFF !important; }
:where(.auth-app) .field-label { color: var(--clay-ink) !important; font-weight: 800 !important; }
:where(.auth-app) .mini-link, :where(.auth-app) .app-cta-dock .dock-links a, :where(.auth-app) .check-wrap label a { color: #6C3BFF !important; font-weight: 800 !important; }
:where(.auth-app) .app-cta-dock::before { background: rgba(255,255,255,.92) !important; border: 0 !important; border-radius: 30px !important; box-shadow: 0 3px 0 #fff inset, 0 6px 0 #DCD3FA, 0 -10px 40px -10px rgba(60,40,140,.35) !important; backdrop-filter: blur(14px); }
:where(.auth-app) .app-cta-dock .dock-links { color: var(--clay-soft) !important; font-weight: 700; }

:where(.auth-app) .btn-app {
  background: var(--g-violet) !important; color: #fff !important; border: 0 !important; border-radius: 22px !important;
  font-family: var(--pop-font) !important; font-weight: 800 !important; letter-spacing: .03em; text-shadow: 0 2px 0 rgba(0,0,0,.2);
  box-shadow: 0 6px 0 var(--e-violet), 0 20px 28px -8px rgba(var(--c-violet),.6), var(--clay-gloss) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
:where(.auth-app) .btn-app::after { display: none !important; }
:where(.auth-app) .btn-app:active { transform: translateY(5px) !important; box-shadow: 0 1px 0 var(--e-violet), var(--clay-gloss) !important; }
:where(.auth-app) .captcha-block { background: #F1EDFF !important; border-radius: 20px !important; box-shadow: var(--clay-in) !important; border: 0 !important; }
:where(.auth-app) .captcha-refresh { background: var(--g-sun) !important; color: #4a2a00 !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 4px 0 var(--e-sun), var(--clay-gloss) !important; }
:where(.auth-app) .check-wrap input[type=checkbox] { accent-color: #6C3BFF; }
:where(.auth-app) .app-topbar .tb-back, :where(.auth-app) .back-btn { background: #fff !important; border: 0 !important; border-radius: 16px !important; color: #6C3BFF !important; box-shadow: 0 5px 0 #DCD3FA, 0 12px 18px -8px rgba(60,40,140,.3) !important; }
:where(.auth-app) .app-topbar .tb-title, :where(.auth-app) .page-title { font-family: var(--pop-font) !important; font-weight: 800 !important; color: var(--clay-ink) !important; }
:where(.auth-app) .inner-header { background: transparent !important; }
:where(.auth-app) .inner-card { background: linear-gradient(180deg,#fff,#FBF9FF) !important; border: 0 !important; border-radius: 28px !important; box-shadow: var(--clay-card) !important; }
:where(.auth-app) .inner-divider { background: var(--clay-line) !important; }
:where(.auth-app) .ci-icon { background: var(--g-violet) !important; color: #fff !important; border-radius: 16px !important; box-shadow: 0 4px 0 var(--e-violet), var(--clay-gloss) !important; }
:where(.auth-app) .ci-row:nth-child(3n+2) .ci-icon { background: var(--g-pink) !important; box-shadow: 0 4px 0 var(--e-pink), var(--clay-gloss) !important; }
:where(.auth-app) .ci-row:nth-child(3n) .ci-icon { background: var(--g-mint) !important; box-shadow: 0 4px 0 var(--e-mint), var(--clay-gloss) !important; }
:where(.auth-app) .ci-text { color: var(--clay-ink) !important; font-weight: 700; }
:where(.auth-app) .welcome-hero { background: var(--g-mint) !important; border-radius: 32px !important; box-shadow: 0 8px 0 var(--e-mint), 0 30px 44px -14px rgba(var(--c-mint),.6), 0 3px 0 rgba(255,255,255,.5) inset !important; color: #fff !important; }
:where(.auth-app) .welcome-badge { background: #fff !important; color: #12BE8C !important; border-radius: 50% !important; box-shadow: 0 5px 0 var(--e-mint), 0 14px 22px -6px rgba(0,0,0,.3) !important; }
:where(.auth-app) .welcome-card { background: linear-gradient(180deg,#fff,#FBF9FF) !important; border: 0 !important; border-radius: 28px !important; box-shadow: var(--clay-card) !important; }
:where(.auth-app) .welcome-notice { background: #FFF1D6 !important; color: #8A4B00 !important; border-radius: 18px !important; box-shadow: var(--clay-in); border: 0 !important; font-weight: 700; }
:where(.auth-app) .cred-table td, :where(.auth-app) .cred-table th { color: var(--clay-ink) !important; border-color: rgba(108,59,255,.12) !important; font-weight: 700; }


/* ==========================================================================
   Material You theme (mobile / APK)
   scope: html.mui
   ========================================================================== */
:root:where(.mui) {
  --pop-font: 'Manrope', 'Inter', sans-serif;
  --pop-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --m-primary: #4338CA; --m-primary-2: #5B54E8; --m-on-primary: #fff;
  --m-primary-c: #E3E1FF; --m-on-primary-c: #1E1A6B;
  --m-bg: #F4F5FB; --m-card: #FFFFFF; --m-outline: #E4E6F2; --m-outline-2: #D5D8EA;
  --m-text: #1A1B2E; --m-text-2: #5B5E78; --m-text-3: #8C8FA8;
  --m-green: #14A06D;  --m-green-c: #DDF6E8;
  --m-orange: #EE8A1F; --m-orange-c: #FFEBD6;
  --m-blue: #2B7BE4;   --m-blue-c: #DDEBFF;
  --m-violet: #7A4DFF; --m-violet-c: #EBE3FF;
  --m-pink: #D6336C;   --m-pink-c: #FFE0EB;
  --m-teal: #0E9F95;   --m-teal-c: #D3F5F0;
  --m-amber: #E8A200;  --m-amber-c: #FFF3CC;
  --m-elev1: 0 1px 2px rgba(26,27,70,.06), 0 1px 3px rgba(26,27,70,.06);
  --m-elev2: 0 2px 6px rgba(26,27,70,.08), 0 6px 16px -6px rgba(26,27,70,.14);
  --m-elev3: 0 6px 12px rgba(26,27,70,.10), 0 16px 30px -10px rgba(26,27,70,.22);
  --e-violet: transparent; --e-pink: transparent; --e-blue: transparent; --e-mint: transparent; --e-sun: transparent; --e-coral: transparent;
  --clay-gloss: 0 0 0 0 transparent; --clay-in: 0 0 0 0 transparent;
  --clay-card: var(--m-elev1); --clay-card-hover: var(--m-elev1);
  --clay-bg1: var(--m-bg); --clay-ink: var(--m-text); --clay-soft: var(--m-text-2); --clay-line: var(--m-outline);
  --g-violet: linear-gradient(135deg, #5B54E8, #4338CA);
  --g-pink: linear-gradient(135deg, #E8457F, #D6336C);
  --g-blue: linear-gradient(135deg, #3B8EF0, #2B7BE4);
  --g-mint: linear-gradient(135deg, #22B98A, #14A06D);
  --g-sun: linear-gradient(135deg, #FFB02E, #EE8A1F);
  --g-coral: linear-gradient(135deg, #FF7A50, #E8521F);
  --brand-50: #EEEEFF; --brand-100: #E3E1FF; --brand-200: #C3C2FA; --brand-400: #7B78F0;
  --brand-500: #5B54E8; --brand-600: #4338CA; --brand-700: #3730A3;
  --red: #4338CA; --red-dark: #3730A3; --red-soft: #EEEEFF; --blue: #2B7BE4; --purple: #7A4DFF;
  --ink-900: var(--m-text); --ink-700: #34364F; --ink-500: var(--m-text-2); --ink-300: var(--m-text-3);
  --paper: var(--m-bg); --paper-raised: #fff; --paper-sunken: #EDEEF8; --paper-edge: var(--m-outline); --hairline: var(--m-outline);
  --surf: var(--m-bg); --dark: var(--m-text); --mid: var(--m-text-2); --light: var(--m-text-3);
  --lift-1: var(--m-elev1); --lift-2: var(--m-elev2); --lift-3: var(--m-elev3);
  --lift-brand: 0 6px 16px -6px rgba(67,56,202,.5); --lift-brand-lg: 0 12px 26px -8px rgba(67,56,202,.55);
  --sh: var(--m-elev1); --shh: var(--m-elev2); --sh-sm: var(--m-elev1); --sh-inset: none;
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-2xl: 28px;
  --wm-text: var(--m-text); --wm-muted: var(--m-text-2); --wm-line: var(--m-outline); --wm-panel: #fff;
  --wm-shadow: var(--m-elev2); --wm-shadow-small: var(--m-elev1);
}
html:where(.mui) body.apk, :where(.mui) body:has(.wm-wrap), :where(.mui) body:has(.app-auth-screen), :where(.mui) body:has(.inner-screen), :where(.mui) body:has(.welcome-screen), :where(.mui) body:has(.app-topbar) {
  background-color: var(--m-bg) !important; background-image: none !important;
  font-family: var(--pop-body) !important; color: var(--m-text) !important;
}
:where(.mui) body::before, :where(.mui) body::after { display: none !important; }
:where(.mui) h1, :where(.mui) h2, :where(.mui) h3, :where(.mui) h4, :where(.mui) h5, :where(.mui) h6, :where(.mui) .card-title, :where(.mui) .wm-section-title { font-family: var(--pop-font) !important; letter-spacing: -.01em; }
:where(.mui) body .wm-wrap { gap: 14px; padding: 12px 14px 118px; background: transparent !important; }
:where(.mui) body .wm-notif { background: var(--m-card) !important; border: 1px solid var(--m-outline) !important; border-left: 1px solid var(--m-outline) !important; border-radius: 16px !important; box-shadow: none !important; min-height: 44px; }
:where(.mui) body .wm-notif marquee { color: var(--m-text-2) !important; font-weight: 500 !important; font-size: 12.5px; }
:where(.mui) body .wm-notif .notif-dot { background: var(--m-green); box-shadow: 0 0 0 4px rgba(20,160,109,.18); }
:where(.mui) body .wm-profile {
  background: linear-gradient(135deg, #1E1B4B 0%, #3730A3 55%, #5B54E8 100%) !important;
  border: 0 !important; border-radius: 28px !important; padding: 18px 16px !important; box-shadow: var(--m-elev3) !important;
}
:where(.mui) body .wm-profile::after { display: block !important; content: ''; right: -50px !important; top: -60px !important; width: 190px !important; height: 190px !important; border: 0 !important; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%) !important; box-shadow: none !important; }
:where(.mui) body .wm-avatar { width: 50px; height: 50px; border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.18) !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35) !important; transform: none !important; }
:where(.mui) body .wm-profile-text h4 { color: #fff !important; font-size: 17px !important; font-weight: 700 !important; text-shadow: none !important; }
:where(.mui) body .wm-profile-text p { color: rgba(255,255,255,.72) !important; font-weight: 500 !important; }
:where(.mui) body .wm-logout { width: 42px; height: 42px; border-radius: 50% !important; background: rgba(255,255,255,.16) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
:where(.mui) body .wm-logout:active { background: rgba(255,255,255,.3) !important; transform: scale(.92); box-shadow: none !important; }
:where(.mui) body .wm-wallet-row { gap: 12px; }
:where(.mui) body .wm-wallet-card { min-height: 132px; border: 0 !important; border-radius: 24px !important; padding: 16px !important; box-shadow: none !important; }
:where(.mui) body .wm-wallet-card::after { display: none !important; }
:where(.mui) body .wm-wallet-card.bal { background: var(--m-green-c) !important; }
:where(.mui) body .wm-wallet-card.with { background: var(--m-orange-c) !important; }
:where(.mui) body .wm-wallet-icon { width: 40px; height: 40px; border-radius: 50% !important; box-shadow: none !important; color: #fff !important; font-size: 19px; margin-bottom: 16px; animation: none !important; }
:where(.mui) body .wm-wallet-card.bal .wm-wallet-icon { background: var(--m-green) !important; }
:where(.mui) body .wm-wallet-card.with .wm-wallet-icon { background: var(--m-orange) !important; }
:where(.mui) body .wm-wallet-label { color: var(--m-text-2) !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: .04em; }
:where(.mui) body .wm-wallet-amt { color: var(--m-text) !important; text-shadow: none !important; font-weight: 800 !important; font-size: clamp(19px, 5.4vw, 24px) !important; }
:where(.mui) body .wm-wallet-card.bal .wm-wallet-amt { color: #0B5D3B !important; }
:where(.mui) body .wm-wallet-card.with .wm-wallet-amt { color: #8A4A00 !important; }
:where(.mui) body .wm-team-row { gap: 12px; }
:where(.mui) body .wm-team-card { border: 0 !important; border-radius: 22px !important; padding: 14px 12px !important; box-shadow: none !important; filter: none !important; transition: transform .15s ease; }
:where(.mui) body .wm-team-card.direct { background: var(--m-blue-c) !important; }
:where(.mui) body .wm-team-card.all { background: var(--m-violet-c) !important; }
:where(.mui) body .wm-team-card:active { transform: scale(.96) !important; }
:where(.mui) body .wm-team-icon { width: 42px; height: 42px; border-radius: 50% !important; box-shadow: none !important; color: #fff !important; }
:where(.mui) body .wm-team-card.direct .wm-team-icon { background: var(--m-blue) !important; }
:where(.mui) body .wm-team-card.all .wm-team-icon { background: var(--m-violet) !important; }
:where(.mui) body .wm-team-card .wm-team-info p, :where(.mui) body .wm-team-card.all .wm-team-info p { color: var(--m-text-2) !important; font-weight: 600 !important; }
:where(.mui) body .wm-team-card .wm-team-info h4, :where(.mui) body .wm-team-card.all .wm-team-info h4 { color: var(--m-text) !important; font-weight: 800 !important; }
:where(.mui) body .wm-team-card .wm-team-arrow, :where(.mui) body .wm-team-card.all .wm-team-arrow { color: var(--m-text-2) !important; }
:where(.mui) body .wm-section-title { margin: 10px 2px 0; font-size: 17px !important; font-weight: 800 !important; color: var(--m-text) !important; }
:where(.mui) body .wm-section-title::before { width: 4px !important; height: 18px !important; border-radius: 4px !important; background: var(--m-primary-2) !important; box-shadow: none !important; transform: none !important; }
:where(.mui) body .wm-income-grid { gap: 10px; }
:where(.mui) body .wm-income-card { background: var(--m-card) !important; border: 1px solid var(--m-outline) !important; border-radius: 20px !important; padding: 14px 6px 12px !important; box-shadow: none !important; transition: transform .15s ease, background .15s ease; }
:where(.mui) body .wm-income-card:active { transform: scale(.95) !important; background: #F7F7FD !important; box-shadow: none !important; }
:where(.mui) body .wm-inc-icon { width: 42px; height: 42px; border-radius: 50% !important; box-shadow: none !important; font-size: 18px; border: 0 !important; margin-bottom: 9px; }
:where(.mui) body .wm-income-card.ic-login .wm-inc-icon { background: var(--m-amber-c) !important; color: var(--m-amber) !important; }
:where(.mui) body .wm-income-card.ic-telegram .wm-inc-icon { background: var(--m-blue-c) !important; color: var(--m-blue) !important; }
:where(.mui) body .wm-income-card.ic-whatsapp .wm-inc-icon { background: var(--m-green-c) !important; color: var(--m-green) !important; }
:where(.mui) body .wm-income-card.ic-referral .wm-inc-icon { background: var(--m-violet-c) !important; color: var(--m-violet) !important; }
:where(.mui) body .wm-income-card.ic-captcha .wm-inc-icon { background: var(--m-orange-c) !important; color: var(--m-orange) !important; }
:where(.mui) body .wm-income-card.ic-dataentry .wm-inc-icon { background: var(--m-teal-c) !important; color: var(--m-teal) !important; }
:where(.mui) body .wm-income-card.ic-reward .wm-inc-icon { background: var(--m-pink-c) !important; color: var(--m-pink) !important; }
:where(.mui) body .wm-income-card.ic-redeem .wm-inc-icon { background: var(--m-primary-c) !important; color: var(--m-primary) !important; }
:where(.mui) body .wm-income-card.ic-rating .wm-inc-icon { background: var(--m-amber-c) !important; color: var(--m-amber) !important; }
:where(.mui) body .wm-income-card.ic-commission .wm-inc-icon { background: var(--m-blue-c) !important; color: var(--m-blue) !important; }
:where(.mui) body .wm-inc-amt { color: var(--m-text) !important; font-weight: 800 !important; font-size: 14px !important; }
:where(.mui) body .wm-inc-label { color: var(--m-text-2) !important; font-weight: 500 !important; text-transform: none !important; font-size: 10.5px !important; letter-spacing: 0; }
:where(.mui) body .wm-ref-card, :where(.mui) body .wm-social-card, :where(.mui) body .wm-card, :where(.mui) body .wm-level-reward { background: var(--m-card) !important; border: 1px solid var(--m-outline) !important; border-radius: 24px !important; box-shadow: none !important; }
:where(.mui) body .wm-ref-note { background: var(--m-amber-c) !important; color: #7A5200 !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important; font-weight: 500 !important; }
:where(.mui) body .wm-ref-note i { color: var(--m-amber) !important; }
:where(.mui) body .wm-action-btn { min-height: 66px; border: 0 !important; border-radius: 18px !important; box-shadow: none !important; font-family: var(--pop-body); font-weight: 700 !important; font-size: 11.5px !important; transition: transform .15s ease; }
:where(.mui) body .wm-action-btn i { font-size: 22px !important; }
:where(.mui) body .wm-action-btn.ab-referral { background: var(--m-primary) !important; color: #fff !important; }
:where(.mui) body .wm-action-btn.ab-chat { background: var(--m-blue-c) !important; color: var(--m-blue) !important; }
:where(.mui) body .wm-action-btn.ab-call { background: var(--m-green-c) !important; color: var(--m-green) !important; }
:where(.mui) body .wm-action-btn:active { transform: scale(.95) !important; }
:where(.mui) body .wm-social-item { color: var(--m-text-2) !important; font-weight: 600 !important; }
:where(.mui) body .wm-social-icon { width: 50px; height: 50px; border-radius: 50% !important; border: 0 !important; box-shadow: none !important; font-size: 22px !important; }
:where(.mui) body .wm-social-icon.si-wa { background: var(--m-green-c) !important; color: var(--m-green) !important; }
:where(.mui) body .wm-social-icon.si-yt { background: var(--m-pink-c) !important; color: #E0245E !important; }
:where(.mui) body .wm-social-icon.si-gl { background: var(--m-blue-c) !important; color: var(--m-blue) !important; }
:where(.mui) body .wm-social-icon.si-vb { background: var(--m-violet-c) !important; color: var(--m-violet) !important; }
:where(.mui) body .wm-social-icon.si-tg { background: #D9F1FF !important; color: #1C8FD6 !important; }
:where(.mui) body .wm-social-icon.si-cm { background: var(--m-orange-c) !important; color: var(--m-orange) !important; }
:where(.mui) body .wm-claim-btn { background: var(--m-primary) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; font-weight: 700; }
:where(.mui) body .bottom-nav {
  left: 0 !important; right: 0 !important; bottom: 0 !important; border-radius: 26px 26px 0 0 !important;
  background: #fff !important; backdrop-filter: none !important; border: 0 !important; border-top: 1px solid var(--m-outline) !important;
  box-shadow: 0 -8px 24px -10px rgba(26,27,70,.22) !important; padding: 8px 6px calc(10px + env(safe-area-inset-bottom)) !important;
  animation: none !important; align-items: flex-end;
}
:where(.mui) body .bottom-nav .indicator { display: none !important; }
:where(.mui) body .bottom-nav a { color: var(--m-text-2) !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; gap: 4px !important; padding: 0 !important; }
:where(.mui) body .bottom-nav a i { display: inline-flex !important; align-items: center; justify-content: center; width: 60px; height: 32px; border-radius: 16px; font-size: 19px !important; transition: background .2s ease, color .2s ease; background: none; -webkit-text-fill-color: currentColor !important; }
:where(.mui) body .bottom-nav a span { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
:where(.mui) body .bottom-nav a.active { color: var(--m-text) !important; background: none !important; box-shadow: none !important; }
:where(.mui) body .bottom-nav a.active span { font-weight: 800 !important; color: var(--m-primary) !important; }
:where(.mui) body .bottom-nav a.active i { background: var(--m-primary-c) !important; color: var(--m-primary) !important; -webkit-text-fill-color: var(--m-primary) !important; transform: none !important; }
:where(.mui) body .bottom-nav a:active i { background: var(--m-primary-c) !important; }
:where(.mui) body .bottom-nav a:nth-child(3) {
  flex: none !important; width: 62px !important; height: 62px !important; margin: -30px 6px 2px !important; border-radius: 22px !important;
  background: linear-gradient(135deg, #5B54E8, #4338CA) !important; color: #fff !important; animation: none !important;
  box-shadow: 0 10px 22px -6px rgba(67,56,202,.65), 0 0 0 5px var(--m-bg) !important; justify-content: center !important; align-items: center !important;
}
:where(.mui) body .bottom-nav a:nth-child(3) i { width: auto !important; height: auto !important; background: none !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 24px !important; }
:where(.mui) body .bottom-nav a:nth-child(3):active { transform: scale(.93); }
:where(.mui) body.apk .card, :where(.mui) body.apk .modal-content { background: var(--m-card) !important; border: 1px solid var(--m-outline) !important; border-radius: 20px !important; box-shadow: none !important; transform: none !important; }
:where(.mui) body.apk .card:hover { transform: none !important; box-shadow: none !important; }
:where(.mui) body.apk .modal-content { border: 0 !important; border-radius: 28px !important; box-shadow: var(--m-elev3) !important; }
:where(.mui) body.apk .pagetitle h1 { background: none !important; -webkit-text-fill-color: var(--m-text) !important; color: var(--m-text) !important; filter: none; font-size: 22px !important; }
:where(.mui) body.apk .btn { height: 48px; border-radius: 14px !important; box-shadow: none !important; text-shadow: none !important; font-family: var(--pop-body); font-weight: 700 !important; letter-spacing: .01em; filter: none !important; transform: none !important; }
:where(.mui) body.apk .btn:active { transform: scale(.97) !important; }
:where(.mui) body.apk .btn-primary { background: var(--m-primary) !important; color: #fff !important; }
:where(.mui) body.apk .btn-success { background: var(--m-green) !important; color: #fff !important; }
:where(.mui) body.apk .btn-info { background: var(--m-blue) !important; color: #fff !important; }
:where(.mui) body.apk .btn-light { background: var(--m-primary-c) !important; color: var(--m-primary) !important; }
:where(.mui) body.apk .form-control, :where(.mui) body.apk .form-select, :where(.mui) body.apk select, :where(.mui) body.apk textarea {
  background: #fff !important; border: 1.5px solid var(--m-outline-2) !important; border-radius: 14px !important; box-shadow: none !important; min-height: 50px; font-weight: 500 !important;
}
:where(.mui) body.apk .form-control:focus, :where(.mui) body.apk .form-select:focus { border-color: var(--m-primary-2) !important; box-shadow: 0 0 0 3px rgba(91,84,232,.18) !important; background: #fff !important; }
:where(.mui) body.apk .table thead th { background: var(--m-primary-c) !important; color: var(--m-primary) !important; border-radius: 0 !important; }
:where(.mui) body.apk .badge { box-shadow: none !important; border-radius: 99px !important; font-weight: 700; }
:where(.mui) .app-auth-screen::before, :where(.mui) .app-auth-screen::after { display: none !important; }
:where(.mui) .app-auth-screen, :where(.mui) .inner-screen, :where(.mui) .welcome-screen { background: transparent !important; }
:where(.mui) .app-brand .brand-badge { width: 92px; height: 92px; border-radius: 50% !important; background: #fff !important; box-shadow: var(--m-elev2), 0 0 0 8px var(--m-primary-c) !important; }
:where(.mui) .app-brand .brand-badge::after { display: none !important; }
:where(.mui) .app-brand h1 { background: none !important; -webkit-text-fill-color: var(--m-text) !important; color: var(--m-text) !important; font-size: 26px !important; }
:where(.mui) .app-brand p, :where(.mui) .app-form-sub { color: var(--m-text-2) !important; font-weight: 500 !important; }
:where(.mui) .app-icon-block { background: var(--m-primary-c) !important; box-shadow: none !important; border-radius: 50% !important; }
:where(.mui) .app-icon-block i { color: var(--m-primary) !important; }
:where(.mui) .field-wrap input, :where(.mui) .field-wrap select, :where(.mui) .field-wrap textarea {
  background: #fff !important; border: 1.5px solid var(--m-outline-2) !important; border-radius: 16px !important; box-shadow: none !important; min-height: 56px; font-weight: 500 !important; color: var(--m-text) !important;
}
:where(.mui) .field-wrap input:focus, :where(.mui) .field-wrap select:focus, :where(.mui) .field-wrap textarea:focus { border-color: var(--m-primary-2) !important; box-shadow: 0 0 0 3px rgba(91,84,232,.18) !important; background: #fff !important; }
:where(.mui) .field-wrap .f-icon { color: var(--m-text-3) !important; } :where(.mui) .field-wrap:focus-within .f-icon { color: var(--m-primary) !important; }
:where(.mui) .field-label { color: var(--m-text-2) !important; font-weight: 600 !important; }
:where(.mui) .mini-link, :where(.mui) .app-cta-dock .dock-links a, :where(.mui) .check-wrap label a { color: var(--m-primary) !important; font-weight: 700 !important; }
:where(.mui) .app-cta-dock::before { background: #fff !important; border: 0 !important; border-radius: 28px 28px 0 0 !important; box-shadow: 0 -10px 30px -12px rgba(26,27,70,.25) !important; backdrop-filter: none !important; }
:where(.mui) .app-cta-dock .dock-links { color: var(--m-text-2) !important; font-weight: 500 !important; }
:where(.mui) .btn-app { height: 54px; background: var(--m-primary) !important; color: #fff !important; border-radius: 999px !important; box-shadow: none !important; text-shadow: none !important; font-family: var(--pop-body) !important; font-weight: 700 !important; letter-spacing: .02em; transition: transform .12s ease, background .12s ease !important; }
:where(.mui) .btn-app:active { transform: scale(.97) !important; background: var(--m-on-primary-c) !important; box-shadow: none !important; }
:where(.mui) .captcha-block { background: var(--m-primary-c) !important; box-shadow: none !important; border-radius: 16px !important; }
:where(.mui) .captcha-refresh { background: var(--m-primary) !important; color: #fff !important; box-shadow: none !important; border-radius: 50% !important; }
:where(.mui) .check-wrap input[type=checkbox] { accent-color: var(--m-primary); }

:where(.mui) .app-topbar .tb-back, :where(.mui) .back-btn { width: 44px; height: 44px; background: #fff !important; border: 1px solid var(--m-outline) !important; border-radius: 50% !important; color: var(--m-text) !important; box-shadow: none !important; }
:where(.mui) .app-topbar .tb-title, :where(.mui) .page-title { font-family: var(--pop-font) !important; font-weight: 800 !important; color: var(--m-text) !important; }
:where(.mui) .inner-card, :where(.mui) .welcome-card { background: #fff !important; border: 1px solid var(--m-outline) !important; border-radius: 24px !important; box-shadow: none !important; }
:where(.mui) .ci-icon { background: var(--m-primary-c) !important; color: var(--m-primary) !important; border-radius: 50% !important; box-shadow: none !important; }
:where(.mui) .ci-row:nth-child(3n+2) .ci-icon { background: var(--m-pink-c) !important; color: var(--m-pink) !important; box-shadow: none !important; }
:where(.mui) .ci-row:nth-child(3n) .ci-icon { background: var(--m-green-c) !important; color: var(--m-green) !important; box-shadow: none !important; }
:where(.mui) .ci-text { color: var(--m-text) !important; font-weight: 500; }
:where(.mui) .welcome-hero { background: linear-gradient(135deg, #1E1B4B 0%, #3730A3 55%, #5B54E8 100%) !important; border-radius: 28px !important; box-shadow: var(--m-elev3) !important; }
:where(.mui) .welcome-badge { background: #fff !important; color: var(--m-green) !important; box-shadow: 0 0 0 8px rgba(255,255,255,.2) !important; }
:where(.mui) .welcome-notice { background: var(--m-amber-c) !important; color: #7A5200 !important; box-shadow: none !important; border-radius: 16px !important; font-weight: 500 !important; }
:where(.mui) .cred-table td, :where(.mui) .cred-table th { color: var(--m-text) !important; border-color: var(--m-outline) !important; font-weight: 600; }


/* ==========================================================================
   Small helpers (these replaced the old inline style="" attributes)
   ========================================================================== */
.icon-gap { margin-right: 8px !important; }
.icon-xl { font-size: 3rem; }
.icon-lg { font-size: 2rem; }
.col-min-100 { min-width: 100px; }
.copy-message { display: none; color: green; margin-left: 5px; }
.activation-username { color: #00b297; }
.rating-img { max-height: 280px; object-fit: cover; width: 100%; }
.task-success-badge.is-gold { background: var(--grad-gold); }

/* about page */
.about-logo { text-align: center; margin-bottom: 20px; }
.about-logo-img { width: 80px; border-radius: 16px; box-shadow: 0 6px 20px rgba(71, 118, 230, 0.2); }
.about-title { margin-top: 0 !important; }

/* desktop login */
.remember-label { text-transform: none; letter-spacing: normal; color: var(--color-text-muted); font-weight: 500; }
.auth-forgot { font-size: var(--font-size-sm); }

/* mobile login / register */
.field-wrap-tight { margin-bottom: 8px !important; }
.field-wrap-flush { margin-bottom: 0 !important; }
.forgot-row { text-align: right; margin-bottom: 8px; }
.title-top-sm { margin-top: 6px !important; }
.check-wrap-top { margin-top: 4px !important; }
.field-label-gap { margin-top: 18px !important; }