/* Shared stylesheet generated from all pages. Page rules are scoped by body class. */

/* Plan card page */
body.page-plan {
      --bg: #f4f0e8;
      --ink: #17191c;
      --muted: #62676f;
      --line: #ded8cc;
      --card: #fffdf8;
      --green: #0f8f61;
      --green-dark: #08714a;
      --gold: #f0ad26;
      --coral: #eb6848;
      --teal: #159a9c;
      --shadow: 0 22px 52px rgba(34, 27, 18, 0.16);
    }

    body.page-plan * {
      box-sizing: border-box;
    }

    body.page-plan {
      min-height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      padding: 28px;
      background:
        radial-gradient(circle at top left, rgba(240, 173, 38, 0.22), transparent 32%),
        linear-gradient(135deg, #f7f2e9 0%, #e8f2ef 48%, #f7eadf 100%);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body.page-plan .plan-card {
      width: min(420px, 100%);
      overflow: hidden;
      border: 1px solid rgba(23, 25, 28, 0.08);
      border-radius: 8px;
      background: var(--card);
      box-shadow: var(--shadow);
    }

    body.page-plan .plan-visual {
      position: relative;
      min-height: 188px;
      padding: 22px;
      background:
        linear-gradient(120deg, rgba(15, 143, 97, 0.94), rgba(21, 154, 156, 0.86)),
        url("data:image/svg+xml,%3Csvg width='420' height='190' viewBox='0 0 420 190' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M-30 148C37 98 82 117 129 78s96-47 145-12 82 33 176-21'/%3E%3Cpath d='M-12 181C48 145 91 150 141 116s94-39 143-9 87 29 157-9'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
      color: #fff;
    }

    body.page-plan .plan-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    body.page-plan .plan-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
      font-size: 13px;
      font-weight: 750;
      backdrop-filter: blur(10px);
    }

    body.page-plan .plan-badge svg,
    body.page-plan .metric-icon svg,
    body.page-plan .bonus-icon svg {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
    }

    body.page-plan .risk-chip {
      min-height: 30px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(14, 20, 22, 0.2);
      color: rgba(255, 255, 255, 0.92);
      font-size: 12px;
      font-weight: 700;
    }

    body.page-plan .coin-scene {
      position: absolute;
      right: 22px;
      bottom: 14px;
      width: 158px;
      height: 116px;
    }

    body.page-plan .coin {
      position: absolute;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: radial-gradient(circle at 32% 25%, #ffe9a7 0 14%, #f3bd37 38%, #c77b0a 100%);
      border: 2px solid rgba(255, 255, 255, 0.46);
      box-shadow: 0 16px 28px rgba(8, 53, 40, 0.24);
      color: #7c4704;
      font-weight: 900;
    }

    body.page-plan .coin.large {
      right: 0;
      bottom: 8px;
      width: 84px;
      height: 84px;
      font-size: 34px;
      animation: floatCoin 3s ease-in-out infinite;
    }

    body.page-plan .coin.small {
      left: 10px;
      top: 22px;
      width: 54px;
      height: 54px;
      font-size: 22px;
      animation: floatCoin 3.5s ease-in-out infinite reverse;
    }

    body.page-plan .bars {
      position: absolute;
      left: 42px;
      bottom: 6px;
      display: flex;
      align-items: end;
      gap: 8px;
      height: 74px;
    }

    body.page-plan .bars span {
      width: 20px;
      border-radius: 4px 4px 0 0;
      background: rgba(255, 255, 255, 0.82);
      box-shadow: inset 0 -10px 0 rgba(15, 143, 97, 0.2);
      animation: growBars 2.8s ease-in-out infinite;
    }

    body.page-plan .bars span:nth-child(1) {
      height: 34px;
    }

    body.page-plan .bars span:nth-child(2) {
      height: 52px;
      animation-delay: 0.15s;
    }

    body.page-plan .bars span:nth-child(3) {
      height: 70px;
      animation-delay: 0.3s;
    }

    body.page-plan .spark {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.85;
      animation: blink 1.8s ease-in-out infinite;
    }

    body.page-plan .spark.one {
      right: 134px;
      top: 20px;
    }

    body.page-plan .spark.two {
      right: 86px;
      top: 6px;
      animation-delay: 0.4s;
    }

    body.page-plan .spark.three {
      right: 12px;
      top: 28px;
      animation-delay: 0.8s;
    }

    body.page-plan .plan-heading {
      position: relative;
      z-index: 1;
      max-width: 210px;
      margin-top: 30px;
    }

    body.page-plan .plan-heading h1 {
      margin: 0;
      font-size: 32px;
      line-height: 1.05;
      letter-spacing: 0;
    }

    body.page-plan .plan-heading p {
      margin: 9px 0 0;
      color: rgba(255, 255, 255, 0.82);
      font-size: 14px;
      line-height: 1.45;
    }

    body.page-plan .plan-body {
      padding: 18px;
    }

    body.page-plan .metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    body.page-plan .metric {
      min-height: 94px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fffaf0;
    }

    body.page-plan .metric:nth-child(2) {
      background: #eef9f4;
    }

    body.page-plan .metric:nth-child(3) {
      background: #f2f7fb;
    }

    body.page-plan .metric:nth-child(4) {
      background: #fff2eb;
    }

    body.page-plan .metric-icon,
    body.page-plan .bonus-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: #fff;
      background: var(--green);
    }

    body.page-plan .metric:nth-child(1) .metric-icon {
      background: var(--gold);
      color: #4e3301;
    }

    body.page-plan .metric:nth-child(3) .metric-icon {
      background: var(--teal);
    }

    body.page-plan .metric:nth-child(4) .metric-icon {
      background: var(--coral);
    }

    body.page-plan .metric label,
    body.page-plan .bonus-copy label {
      display: block;
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      text-transform: uppercase;
    }

    body.page-plan .metric strong,
    body.page-plan .bonus-copy strong {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-size: 20px;
      line-height: 1.1;
    }

    body.page-plan .refer-bonus {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-top: 12px;
      padding: 14px;
      border: 1px solid rgba(15, 143, 97, 0.22);
      border-radius: 8px;
      background: linear-gradient(90deg, rgba(15, 143, 97, 0.1), rgba(240, 173, 38, 0.12));
    }

    body.page-plan .bonus-icon {
      width: 44px;
      height: 44px;
      background: var(--ink);
    }

    body.page-plan .bonus-copy {
      min-width: 0;
    }

    body.page-plan .bonus-copy label {
      margin-top: 0;
    }

    body.page-plan .invest-button {
      position: relative;
      width: 100%;
      min-height: 56px;
      margin-top: 16px;
      border: 0;
      border-radius: 8px;
      overflow: hidden;
      background: linear-gradient(90deg, var(--green-dark), var(--green), #18a36f);
      color: #fff;
      cursor: pointer;
      font: 800 16px/1 Inter, ui-sans-serif, system-ui, sans-serif;
      box-shadow: 0 14px 26px rgba(15, 143, 97, 0.28);
      transform: translateY(0);
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    body.page-plan .invest-button::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 0 32%, rgba(255, 255, 255, 0.35) 44%, transparent 56% 100%);
      transform: translateX(-110%);
      animation: shine 2.4s ease-in-out infinite;
    }

    body.page-plan .invest-button span {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 9px;
    }

    body.page-plan .invest-button svg {
      width: 19px;
      height: 19px;
    }

    body.page-plan .invest-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(15, 143, 97, 0.32);
    }

    body.page-plan .invest-button:active {
      transform: translateY(0);
    }

    @keyframes shine {
      0%, 35% {
        transform: translateX(-110%);
      }
      70%, 100% {
        transform: translateX(110%);
      }
    }

    @keyframes floatCoin {
      0%, 100% {
        transform: translateY(0) rotate(-3deg);
      }
      50% {
        transform: translateY(-8px) rotate(4deg);
      }
    }

    @keyframes growBars {
      0%, 100% {
        transform: scaleY(0.86);
      }
      50% {
        transform: scaleY(1);
      }
    }

    @keyframes blink {
      0%, 100% {
        transform: scale(0.7);
        opacity: 0.45;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.95;
      }
    }

    @media (max-width: 390px) {
      body.page-plan {
        padding: 16px;
      }

      body.page-plan .plan-visual {
        min-height: 204px;
        padding: 18px;
      }

      body.page-plan .plan-heading {
        max-width: 185px;
      }

      body.page-plan .plan-heading h1 {
        font-size: 28px;
      }

      body.page-plan .coin-scene {
        right: 10px;
        width: 132px;
        transform: scale(0.9);
        transform-origin: bottom right;
      }

      body.page-plan .metrics {
        grid-template-columns: 1fr;
      }
    }

/* Register page */
body.page-register {
      --bg: #f5f1e9;
      --card: #fffdf8;
      --ink: #17191c;
      --muted: #62676f;
      --line: #ddd6ca;
      --green: #0f8f61;
      --green-dark: #08714a;
      --gold: #f0ad26;
      --coral: #eb6848;
      --teal: #159a9c;
      --shadow: 0 22px 52px rgba(34, 27, 18, 0.16);
    }

    body.page-register * {
      box-sizing: border-box;
    }

    body.page-register {
      min-height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      padding: 26px;
      background:
        radial-gradient(circle at 12% 12%, rgba(240, 173, 38, 0.22), transparent 28%),
        radial-gradient(circle at 86% 82%, rgba(21, 154, 156, 0.2), transparent 30%),
        linear-gradient(135deg, #f7f2e9 0%, #e8f2ef 52%, #f7eadf 100%);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body.page-register .register-card {
      width: min(430px, 100%);
      overflow: hidden;
      border: 1px solid rgba(23, 25, 28, 0.08);
      border-radius: 8px;
      background: var(--card);
      box-shadow: var(--shadow);
    }

    body.page-register .hero {
      position: relative;
      min-height: 176px;
      padding: 22px;
      color: #fff;
      background:
        linear-gradient(120deg, rgba(15, 143, 97, 0.96), rgba(21, 154, 156, 0.88)),
        url("data:image/svg+xml,%3Csvg width='430' height='180' viewBox='0 0 430 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.17' stroke-width='2'%3E%3Cpath d='M-25 140C30 100 76 108 124 72s95-41 145-10 92 30 186-18'/%3E%3Cpath d='M-8 174C46 139 91 143 143 111s96-35 148-9 91 25 151-7'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
    }

    body.page-register .top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    body.page-register .brand {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 36px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.18);
      font-size: 13px;
      font-weight: 800;
      backdrop-filter: blur(10px);
    }

    body.page-register .brand svg,
    body.page-register .input-icon svg,
    body.page-register .submit-button svg {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
    }

    body.page-register .signin-link {
      min-height: 32px;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(14, 20, 22, 0.2);
      color: rgba(255, 255, 255, 0.94);
      text-decoration: none;
      font-size: 12px;
      font-weight: 750;
    }

    body.page-register .hero h1 {
      position: relative;
      z-index: 1;
      max-width: 260px;
      margin: 32px 0 8px;
      font-size: 31px;
      line-height: 1.06;
      letter-spacing: 0;
    }

    body.page-register .hero p {
      position: relative;
      z-index: 1;
      max-width: 275px;
      margin: 0;
      color: rgba(255, 255, 255, 0.82);
      font-size: 14px;
      line-height: 1.45;
    }

    body.page-register .profit-stack {
      position: absolute;
      right: 22px;
      bottom: 18px;
      width: 116px;
      height: 104px;
    }

    body.page-register .coin {
      position: absolute;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: radial-gradient(circle at 32% 25%, #ffe9a7 0 14%, #f3bd37 38%, #c77b0a 100%);
      border: 2px solid rgba(255, 255, 255, 0.46);
      box-shadow: 0 16px 28px rgba(8, 53, 40, 0.24);
      color: #7c4704;
      font-weight: 900;
    }

    body.page-register .coin.big {
      right: 0;
      bottom: 0;
      width: 72px;
      height: 72px;
      font-size: 29px;
      animation: floatCoin 3s ease-in-out infinite;
    }

    body.page-register .coin.small {
      left: 0;
      top: 6px;
      width: 48px;
      height: 48px;
      font-size: 20px;
      animation: floatCoin 3.4s ease-in-out infinite reverse;
    }

    body.page-register .spark {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.85;
      animation: blink 1.8s ease-in-out infinite;
    }

    body.page-register .spark.one {
      right: 85px;
      top: 8px;
    }

    body.page-register .spark.two {
      right: 12px;
      top: 22px;
      animation-delay: 0.45s;
    }

    body.page-register .form-wrap {
      padding: 18px;
    }

    body.page-register .form-grid {
      display: grid;
      gap: 12px;
    }

    body.page-register .field {
      display: grid;
      gap: 7px;
    }

    body.page-register .field label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    body.page-register .input-box {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fffaf0;
      transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
    }

    body.page-register .input-box:focus-within {
      border-color: rgba(15, 143, 97, 0.6);
      background: #fffdf8;
      box-shadow: 0 0 0 4px rgba(15, 143, 97, 0.12);
    }

    body.page-register .input-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: var(--green);
      color: #fff;
    }

    body.page-register .field:nth-child(2) .input-icon {
      background: var(--teal);
    }

    body.page-register .field:nth-child(3) .input-icon {
      background: var(--gold);
      color: #4e3301;
    }

    body.page-register .field:nth-child(4) .input-icon {
      background: var(--coral);
    }

    body.page-register input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font: 700 15px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
    }

    body.page-register input::placeholder {
      color: #9a948a;
      font-weight: 650;
    }

    body.page-register .bonus-strip {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-top: 14px;
      padding: 13px;
      border: 1px solid rgba(15, 143, 97, 0.22);
      border-radius: 8px;
      background: linear-gradient(90deg, rgba(15, 143, 97, 0.1), rgba(240, 173, 38, 0.12));
    }

    body.page-register .bonus-strip strong {
      display: block;
      font-size: 15px;
      line-height: 1.2;
    }

    body.page-register .bonus-strip span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    body.page-register .gift {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: var(--ink);
      color: #fff;
      flex: 0 0 auto;
    }

    body.page-register .gift svg {
      width: 20px;
      height: 20px;
    }

    body.page-register .submit-button {
      position: relative;
      width: 100%;
      min-height: 56px;
      margin-top: 16px;
      border: 0;
      border-radius: 8px;
      overflow: hidden;
      background: linear-gradient(90deg, var(--green-dark), var(--green), #18a36f);
      color: #fff;
      cursor: pointer;
      font: 800 16px/1 Inter, ui-sans-serif, system-ui, sans-serif;
      box-shadow: 0 14px 26px rgba(15, 143, 97, 0.28);
      transform: translateY(0);
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    body.page-register .submit-button::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 0 32%, rgba(255, 255, 255, 0.35) 44%, transparent 56% 100%);
      transform: translateX(-110%);
      animation: shine 2.4s ease-in-out infinite;
    }

    body.page-register .submit-button span {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 9px;
    }

    body.page-register .submit-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(15, 143, 97, 0.32);
    }

    body.page-register .submit-button:active {
      transform: translateY(0);
    }

    body.page-register .terms {
      margin: 12px 2px 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      text-align: center;
    }

    body.page-register .terms a {
      color: var(--green-dark);
      font-weight: 800;
      text-decoration: none;
    }

    @keyframes shine {
      0%, 35% {
        transform: translateX(-110%);
      }
      70%, 100% {
        transform: translateX(110%);
      }
    }

    @keyframes floatCoin {
      0%, 100% {
        transform: translateY(0) rotate(-3deg);
      }
      50% {
        transform: translateY(-8px) rotate(4deg);
      }
    }

    @keyframes blink {
      0%, 100% {
        transform: scale(0.7);
        opacity: 0.45;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.95;
      }
    }

    @media (max-width: 390px) {
      body.page-register {
        padding: 16px;
      }

      body.page-register .hero {
        min-height: 196px;
        padding: 18px;
      }

      body.page-register .hero h1 {
        max-width: 210px;
        font-size: 28px;
      }

      body.page-register .hero p {
        max-width: 205px;
      }

      body.page-register .profit-stack {
        right: 12px;
        transform: scale(0.9);
        transform-origin: bottom right;
      }
    }

/* Home page */
body.page-home {
      --bg: #f6f1e9;
      --card: #fffdf8;
      --ink: #17191c;
      --muted: #60666f;
      --line: #ded7ca;
      --green: #0f8f61;
      --green-dark: #08714a;
      --gold: #f0ad26;
      --coral: #eb6848;
      --teal: #159a9c;
      --shadow: 0 22px 52px rgba(34, 27, 18, 0.16);
    }

    body.page-home * {
      box-sizing: border-box;
    }

    body.page-home {
      min-height: 100vh;
      margin: 0;
      background:
        radial-gradient(circle at 10% 8%, rgba(240, 173, 38, 0.22), transparent 30%),
        radial-gradient(circle at 88% 72%, rgba(21, 154, 156, 0.22), transparent 32%),
        linear-gradient(135deg, #f7f2e9 0%, #e9f3ef 52%, #f8eadf 100%);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body.page-home .app {
      width: min(440px, 100%);
      min-height: 100vh;
      margin: 0 auto;
      padding: 16px;
    }

    body.page-home .shell {
      min-height: calc(100vh - 32px);
      overflow: hidden;
      border: 1px solid rgba(23, 25, 28, 0.08);
      border-radius: 8px;
      background: var(--card);
      box-shadow: var(--shadow);
    }

    body.page-home .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px;
      border-bottom: 1px solid rgba(222, 215, 202, 0.75);
    }

    body.page-home .brand {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      color: var(--ink);
      font-size: 16px;
      font-weight: 900;
      text-decoration: none;
    }

    body.page-home .brand-mark {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--green), var(--teal));
      color: #fff;
      flex: 0 0 auto;
    }

    body.page-home svg {
      width: 19px;
      height: 19px;
      flex: 0 0 auto;
    }

    body.page-home .actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }

    body.page-home .nav-btn {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 12px;
      border-radius: 8px;
      border: 1px solid var(--line);
      color: var(--ink);
      background: #fffaf0;
      text-decoration: none;
      font-size: 13px;
      font-weight: 850;
    }

    body.page-home .nav-btn.primary {
      border-color: transparent;
      background: var(--green);
      color: #fff;
      box-shadow: 0 10px 22px rgba(15, 143, 97, 0.24);
    }

    body.page-home .content {
      padding: 14px;
    }

    body.page-home .slider {
      position: relative;
      min-height: 265px;
      overflow: hidden;
      border-radius: 8px;
      color: #fff;
      background: #0f8f61;
    }

    body.page-home .slide {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 18px;
      opacity: 0;
      animation: slideShow 12s infinite;
      background-size: cover;
      background-position: center;
    }

    body.page-home .slide::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(9, 43, 36, 0.74), rgba(9, 43, 36, 0.2));
    }

    body.page-home .slide:nth-child(1) {
      opacity: 1;
      background-image:
        linear-gradient(120deg, rgba(15, 143, 97, 0.85), rgba(21, 154, 156, 0.64)),
        url("data:image/svg+xml,%3Csvg width='420' height='270' viewBox='0 0 420 270' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='420' height='270' fill='%23159a9c'/%3E%3Ccircle cx='320' cy='70' r='74' fill='%23f0ad26' fill-opacity='.9'/%3E%3Ccircle cx='355' cy='96' r='55' fill='%23fff2bc' fill-opacity='.22'/%3E%3Cpath d='M33 212h47v-62H33v62zm70 0h47V119h-47v93zm70 0h47V83h-47v129zm70 0h47V139h-47v73z' fill='%23fffdf8' fill-opacity='.82'/%3E%3Cpath d='M36 126c55-48 100-45 142-69 57-32 98 3 141-21' fill='none' stroke='%23fffdf8' stroke-width='9' stroke-linecap='round' stroke-opacity='.9'/%3E%3Cpath d='M299 64l32 30 50-58' fill='none' stroke='%2308714a' stroke-width='13' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      animation-delay: 0s;
    }

    body.page-home .slide:nth-child(2) {
      background-image:
        linear-gradient(120deg, rgba(8, 113, 74, 0.82), rgba(235, 104, 72, 0.56)),
        url("data:image/svg+xml,%3Csvg width='420' height='270' viewBox='0 0 420 270' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='420' height='270' fill='%23eb6848'/%3E%3Crect x='42' y='42' width='128' height='174' rx='18' fill='%23fffdf8' fill-opacity='.9'/%3E%3Crect x='62' y='71' width='88' height='12' rx='6' fill='%230f8f61'/%3E%3Crect x='62' y='103' width='66' height='12' rx='6' fill='%23159a9c'/%3E%3Crect x='62' y='135' width='82' height='12' rx='6' fill='%23f0ad26'/%3E%3Ccircle cx='294' cy='88' r='54' fill='%23f0ad26'/%3E%3Ccircle cx='332' cy='151' r='74' fill='%23fffdf8' fill-opacity='.24'/%3E%3Cpath d='M254 150l38-38 31 31 54-70' fill='none' stroke='%23fffdf8' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      animation-delay: 4s;
    }

    body.page-home .slide:nth-child(3) {
      background-image:
        linear-gradient(120deg, rgba(15, 143, 97, 0.86), rgba(240, 173, 38, 0.5)),
        url("data:image/svg+xml,%3Csvg width='420' height='270' viewBox='0 0 420 270' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='420' height='270' fill='%230f8f61'/%3E%3Ccircle cx='96' cy='78' r='56' fill='%23f0ad26'/%3E%3Ccircle cx='117' cy='93' r='34' fill='%23fffdf8' fill-opacity='.24'/%3E%3Cpath d='M255 43c54 0 98 44 98 98s-44 98-98 98-98-44-98-98 44-98 98-98z' fill='%23fffdf8' fill-opacity='.18'/%3E%3Cpath d='M254 79v126M201 142h106' stroke='%23fffdf8' stroke-width='18' stroke-linecap='round'/%3E%3Cpath d='M53 204c46-35 87-31 128-55s76-23 119 4 66 24 98 4' fill='none' stroke='%23fffdf8' stroke-opacity='.72' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
      animation-delay: 8s;
    }

    body.page-home .slide-content,
    body.page-home .slide-foot {
      position: relative;
      z-index: 1;
    }

    body.page-home .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      min-height: 34px;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.18);
      font-size: 12px;
      font-weight: 850;
      backdrop-filter: blur(10px);
    }

    body.page-home .slide h1 {
      max-width: 280px;
      margin: 24px 0 8px;
      font-size: 32px;
      line-height: 1.04;
      letter-spacing: 0;
    }

    body.page-home .slide p {
      max-width: 285px;
      margin: 0;
      color: rgba(255, 255, 255, 0.84);
      font-size: 14px;
      line-height: 1.45;
    }

    body.page-home .slide-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    body.page-home .profit-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 8px 12px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.92);
      color: var(--ink);
      font-size: 13px;
      font-weight: 900;
    }

    body.page-home .dots {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    body.page-home .dots span {
      width: 18px;
      height: 5px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.42);
      animation: dotShow 12s infinite;
    }

    body.page-home .dots span:nth-child(2) {
      animation-delay: 4s;
    }

    body.page-home .dots span:nth-child(3) {
      animation-delay: 8s;
    }

    body.page-home .quick-login {
      margin-top: 14px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fffaf0;
    }

    body.page-home .quick-login h2,
    body.page-home .plans h2 {
      margin: 0 0 12px;
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: 0;
    }

    body.page-home .login-grid {
      display: grid;
      gap: 10px;
    }

    body.page-home .field {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 50px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--card);
    }

    body.page-home .field svg {
      color: var(--green);
    }

    body.page-home input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font: 750 14px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
    }

    body.page-home input::placeholder {
      color: #9a948a;
    }

    body.page-home .login-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
    }

    body.page-home .main-btn {
      min-height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 0;
      border-radius: 8px;
      background: linear-gradient(90deg, var(--green-dark), var(--green), #18a36f);
      color: #fff;
      cursor: pointer;
      font: 850 14px/1 Inter, ui-sans-serif, system-ui, sans-serif;
      text-decoration: none;
      box-shadow: 0 12px 24px rgba(15, 143, 97, 0.22);
    }

    body.page-home .main-btn.light {
      border: 1px solid var(--line);
      background: var(--card);
      color: var(--ink);
      box-shadow: none;
    }

    body.page-home .plans {
      margin-top: 14px;
    }

    body.page-home .plan-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }

    body.page-home .plan-mini {
      min-height: 94px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #eef9f4;
    }

    body.page-home .plan-mini:nth-child(2) {
      background: #fff7e8;
    }

    body.page-home .plan-mini:nth-child(3) {
      background: #fff2eb;
    }

    body.page-home .plan-mini svg {
      color: var(--green);
    }

    body.page-home .plan-mini:nth-child(2) svg {
      color: #a86f05;
    }

    body.page-home .plan-mini:nth-child(3) svg {
      color: var(--coral);
    }

    body.page-home .plan-mini span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      text-transform: uppercase;
    }

    body.page-home .plan-mini strong {
      display: block;
      margin-top: 3px;
      font-size: 17px;
      line-height: 1.1;
    }

    @keyframes slideShow {
      0%, 28% {
        opacity: 1;
        transform: translateX(0);
      }
      33%, 94% {
        opacity: 0;
        transform: translateX(-18px);
      }
      95%, 100% {
        opacity: 0;
        transform: translateX(18px);
      }
    }

    @keyframes dotShow {
      0%, 28% {
        width: 30px;
        background: #fff;
      }
      33%, 100% {
        width: 18px;
        background: rgba(255, 255, 255, 0.42);
      }
    }

    @media (max-width: 390px) {
      body.page-home .app {
        padding: 10px;
      }

      body.page-home .shell {
        min-height: calc(100vh - 20px);
      }

      body.page-home .topbar {
        align-items: flex-start;
      }

      body.page-home .actions {
        flex-direction: column;
        align-items: stretch;
      }

      body.page-home .nav-btn {
        min-height: 34px;
        padding: 0 10px;
      }

      body.page-home .slider {
        min-height: 288px;
      }

      body.page-home .slide h1 {
        max-width: 245px;
        font-size: 28px;
      }

      body.page-home .login-actions {
        grid-template-columns: 1fr;
      }

      body.page-home .plan-row {
        grid-template-columns: 1fr;
      }
    }

/* Dashboard page */
body.page-dashboard {
      --bg: #f6f1e9;
      --card: #fffdf8;
      --ink: #17191c;
      --muted: #62676f;
      --line: #ded7ca;
      --green: #0f8f61;
      --green-dark: #08714a;
      --gold: #f0ad26;
      --coral: #eb6848;
      --teal: #159a9c;
      --blue: #3478f6;
      --panel: rgba(255, 253, 248, 0.78);
      --shadow: 0 24px 60px rgba(34, 27, 18, 0.18);
      --soft-shadow: 0 14px 34px rgba(34, 27, 18, 0.11);
    }

    body.page-dashboard * {
      box-sizing: border-box;
    }

    body.page-dashboard {
      min-height: 100vh;
      margin: 0;
      background:
        radial-gradient(circle at 8% 8%, rgba(240, 173, 38, 0.26), transparent 29%),
        radial-gradient(circle at 92% 76%, rgba(21, 154, 156, 0.24), transparent 31%),
        linear-gradient(135deg, #f8f3eb 0%, #eaf4f1 50%, #f9ebe1 100%);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body.page-dashboard svg {
      width: 19px;
      height: 19px;
      flex: 0 0 auto;
    }

    body.page-dashboard button,
    body.page-dashboard a {
      -webkit-tap-highlight-color: transparent;
    }

    body.page-dashboard .dashboard {
      width: min(1180px, 100%);
      margin: 0 auto;
      padding: 16px;
      perspective: 1200px;
    }

    body.page-dashboard .app-shell {
      min-height: calc(100vh - 32px);
      display: grid;
      grid-template-columns: 268px minmax(0, 1fr);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.62);
      border-radius: 18px;
      background: rgba(255, 253, 248, 0.72);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    body.page-dashboard .sidebar {
      position: relative;
      padding: 16px;
      border-right: 1px solid rgba(222, 215, 202, 0.68);
      background:
        linear-gradient(180deg, rgba(255, 250, 240, 0.96), rgba(240, 248, 244, 0.92)),
        radial-gradient(circle at 20% 0%, rgba(240, 173, 38, 0.18), transparent 34%);
    }

    body.page-dashboard .sidebar-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 18px;
    }

    body.page-dashboard .side-close {
      display: none;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(23, 25, 28, 0.08);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.72);
      color: var(--ink);
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(34, 27, 18, 0.09);
    }

    body.page-dashboard .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      color: var(--ink);
      font-size: 17px;
      font-weight: 900;
      text-decoration: none;
    }

    body.page-dashboard .brand-mark,
    body.page-dashboard .avatar,
    body.page-dashboard .icon-box,
    body.page-dashboard .stat-icon {
      display: grid;
      place-items: center;
      border-radius: 8px;
      color: #fff;
      flex: 0 0 auto;
    }

    body.page-dashboard .brand-mark {
      width: 40px;
      height: 40px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      background: linear-gradient(145deg, #22b47f 0%, #0f8f61 52%, #066744 100%);
      box-shadow: 0 14px 24px rgba(15, 143, 97, 0.28), inset 0 2px 5px rgba(255, 255, 255, 0.38);
      transform: rotateX(10deg) rotateY(-10deg);
    }

    body.page-dashboard .menu-title {
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      text-transform: uppercase;
    }

    body.page-dashboard .menu-list {
      display: grid;
      gap: 7px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    body.page-dashboard .menu-list a {
      min-height: 42px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 11px;
      border-radius: 12px;
      color: var(--ink);
      text-decoration: none;
      font-size: 14px;
      font-weight: 800;
      transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }

    body.page-dashboard .menu-list a.active,
    body.page-dashboard .menu-list a:hover {
      background: linear-gradient(135deg, var(--green-dark), var(--green));
      color: #fff;
      box-shadow: 0 14px 28px rgba(15, 143, 97, 0.22);
      transform: translateX(3px);
    }

    body.page-dashboard .menu-list a svg {
      filter: drop-shadow(0 7px 8px rgba(34, 27, 18, 0.14));
    }

    body.page-dashboard .support-panel {
      margin-top: 16px;
      padding: 13px;
      border: 1px solid rgba(15, 143, 97, 0.18);
      border-radius: 14px;
      background: linear-gradient(90deg, rgba(15, 143, 97, 0.1), rgba(240, 173, 38, 0.12));
      box-shadow: var(--soft-shadow);
    }

    body.page-dashboard .support-panel strong {
      display: block;
      font-size: 14px;
    }

    body.page-dashboard .support-panel span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
    }

    body.page-dashboard .main {
      min-width: 0;
    }

    body.page-dashboard .top-header {
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 18px;
      border-bottom: 1px solid rgba(222, 215, 202, 0.82);
      background: rgba(255, 253, 248, 0.74);
      backdrop-filter: blur(12px);
    }

    body.page-dashboard .menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255, 250, 240, 0.86);
      color: var(--ink);
      cursor: pointer;
      box-shadow: var(--soft-shadow);
    }

    body.page-dashboard .page-title {
      min-width: 0;
    }

    body.page-dashboard .page-title h1 {
      margin: 0;
      font-size: 24px;
      line-height: 1.12;
      letter-spacing: 0;
    }

    body.page-dashboard .page-title p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    body.page-dashboard .header-profile {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 10px 7px 7px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 250, 240, 0.86);
      box-shadow: 0 12px 26px rgba(34, 27, 18, 0.08);
    }

    body.page-dashboard .avatar {
      width: 38px;
      height: 38px;
      background: linear-gradient(145deg, #ff916f 0%, var(--coral) 44%, #b8462d 100%);
      color: #fff;
      font-weight: 900;
      box-shadow: 0 12px 20px rgba(235, 104, 72, 0.24), inset 0 2px 5px rgba(255, 255, 255, 0.4);
    }

    body.page-dashboard .profile-copy strong,
    body.page-dashboard .user-info strong {
      display: block;
      font-size: 14px;
      line-height: 1.1;
    }

    body.page-dashboard .profile-copy span,
    body.page-dashboard .user-info span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }

    body.page-dashboard .content {
      padding: 18px;
    }

    body.page-dashboard .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
      gap: 14px;
    }

    body.page-dashboard .balance-card {
      position: relative;
      min-height: 250px;
      overflow: hidden;
      padding: 20px;
      border: 1px solid rgba(255, 255, 255, 0.34);
      border-radius: 18px;
      color: #fff;
      background:
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.22), transparent 26%),
        linear-gradient(120deg, rgba(15, 143, 97, 0.96), rgba(21, 154, 156, 0.88)),
        url("data:image/svg+xml,%3Csvg width='720' height='260' viewBox='0 0 720 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16' stroke-width='3'%3E%3Cpath d='M-30 210C73 128 141 159 225 94s158-69 236-12 135 48 291-35'/%3E%3Cpath d='M-20 252C75 191 153 197 240 143s157-56 239-12 147 45 271-14'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
      box-shadow: 0 26px 44px rgba(8, 113, 74, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.35);
      transform: translateZ(0);
    }

    body.page-dashboard .balance-card::after {
      content: "";
      position: absolute;
      inset: auto 18px 0;
      height: 36px;
      border-radius: 50%;
      background: rgba(7, 78, 55, 0.2);
      filter: blur(18px);
      z-index: 0;
    }

    body.page-dashboard .balance-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    body.page-dashboard .user-pill {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
    }

    body.page-dashboard .user-pill .avatar {
      width: 48px;
      height: 48px;
      border: 2px solid rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.18);
    }

    body.page-dashboard .user-info strong {
      color: #fff;
      font-size: 17px;
    }

    body.page-dashboard .user-info span {
      color: rgba(255, 255, 255, 0.78);
    }

    body.page-dashboard .status-chip {
      min-height: 34px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(14, 20, 22, 0.24);
      color: rgba(255, 255, 255, 0.92);
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    body.page-dashboard .balance-amount {
      position: relative;
      z-index: 1;
      margin-top: 34px;
    }

    body.page-dashboard .balance-amount span {
      display: block;
      color: rgba(255, 255, 255, 0.78);
      font-size: 13px;
      font-weight: 850;
      text-transform: uppercase;
    }

    body.page-dashboard .balance-amount strong {
      display: block;
      margin-top: 5px;
      font-size: 42px;
      line-height: 1;
      letter-spacing: 0;
    }

    body.page-dashboard .next-profit {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      margin-top: 18px;
      padding: 8px 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.92);
      color: var(--ink);
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 14px 24px rgba(7, 78, 55, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    body.page-dashboard .float-icon {
      position: absolute;
      z-index: 1;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: radial-gradient(circle at 32% 25%, #ffe9a7 0 14%, #f3bd37 38%, #c77b0a 100%);
      border: 2px solid rgba(255, 255, 255, 0.46);
      box-shadow: 0 18px 28px rgba(8, 53, 40, 0.28), inset -8px -10px 16px rgba(124, 71, 4, 0.22), inset 5px 5px 10px rgba(255, 255, 255, 0.42);
      color: #7c4704;
      font-weight: 950;
      animation: floatIcon 3s ease-in-out infinite;
      transform-style: preserve-3d;
    }

    body.page-dashboard .float-icon::after {
      content: "";
      position: absolute;
      inset: 18%;
      border-radius: inherit;
      border: 2px solid rgba(124, 71, 4, 0.18);
    }

    body.page-dashboard .float-icon.one {
      right: 28px;
      bottom: 32px;
      width: 88px;
      height: 88px;
      font-size: 34px;
    }

    body.page-dashboard .float-icon.two {
      right: 124px;
      bottom: 82px;
      width: 54px;
      height: 54px;
      font-size: 22px;
      animation-delay: 0.35s;
      animation-direction: reverse;
    }

    body.page-dashboard .float-icon.three {
      right: 86px;
      top: 36px;
      width: 38px;
      height: 38px;
      font-size: 16px;
      animation-delay: 0.7s;
    }

    body.page-dashboard .profile-card,
    body.page-dashboard .refer-card,
    body.page-dashboard .quick-card,
    body.page-dashboard .stat-card {
      border: 1px solid rgba(222, 215, 202, 0.78);
      border-radius: 16px;
      background: rgba(255, 250, 240, 0.84);
      box-shadow: var(--soft-shadow);
      backdrop-filter: blur(10px);
    }

    body.page-dashboard .profile-card {
      padding: 16px;
    }

    body.page-dashboard .profile-card h2,
    body.page-dashboard .refer-card h2,
    body.page-dashboard .stats-section h2,
    body.page-dashboard .quick-card h2 {
      margin: 0 0 12px;
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: 0;
    }

    body.page-dashboard .profile-list {
      display: grid;
      gap: 10px;
    }

    body.page-dashboard .profile-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 44px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(255, 253, 248, 0.82);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
    }

    body.page-dashboard .profile-row span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      text-transform: uppercase;
    }

    body.page-dashboard .profile-row strong {
      min-width: 0;
      text-align: right;
      font-size: 14px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    body.page-dashboard .action-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    body.page-dashboard .action-btn,
    body.page-dashboard .support-btn,
    body.page-dashboard .copy-btn {
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 0;
      border-radius: 14px;
      color: #fff;
      cursor: pointer;
      font: 850 14px/1 Inter, ui-sans-serif, system-ui, sans-serif;
      text-decoration: none;
      box-shadow: 0 14px 24px rgba(15, 143, 97, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.26);
      transform: translateY(0);
      transition: transform 160ms ease, box-shadow 160ms ease;
    }

    body.page-dashboard .action-btn:hover,
    body.page-dashboard .support-btn:hover,
    body.page-dashboard .copy-btn:hover {
      transform: translateY(-2px);
    }

    body.page-dashboard .action-btn svg,
    body.page-dashboard .support-btn svg,
    body.page-dashboard .copy-btn svg {
      filter: drop-shadow(0 8px 8px rgba(34, 27, 18, 0.2));
    }

    body.page-dashboard .action-btn.deposit {
      background: linear-gradient(145deg, #23b77f, var(--green-dark));
    }

    body.page-dashboard .action-btn.withdraw {
      background: linear-gradient(145deg, #ff8e70, #c94c31);
    }

    body.page-dashboard .action-btn.profit {
      background: linear-gradient(145deg, #ffd36d, var(--gold), #c77b0a);
      color: #4e3301;
    }

    body.page-dashboard .action-btn.team {
      background: linear-gradient(145deg, #35c1c2, var(--teal), #087a7b);
    }

    body.page-dashboard .lower-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
      gap: 14px;
      margin-top: 14px;
    }

    body.page-dashboard .refer-card,
    body.page-dashboard .quick-card {
      padding: 16px;
    }

    body.page-dashboard .refer-link {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 52px;
      padding: 10px 12px;
      border: 1px solid rgba(15, 143, 97, 0.22);
      border-radius: 14px;
      background: linear-gradient(90deg, rgba(15, 143, 97, 0.1), rgba(240, 173, 38, 0.12));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
    }

    body.page-dashboard .refer-link input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font: 800 13px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
    }

    body.page-dashboard .copy-btn {
      min-height: 38px;
      padding: 0 12px;
      background: linear-gradient(145deg, #333941, var(--ink));
      white-space: nowrap;
      box-shadow: 0 12px 20px rgba(23, 25, 28, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    body.page-dashboard .copy-note {
      min-height: 18px;
      margin: 8px 2px 0;
      color: var(--green-dark);
      font-size: 12px;
      font-weight: 800;
    }

    body.page-dashboard .support-grid {
      display: grid;
      gap: 10px;
    }

    body.page-dashboard .support-btn.app {
      background: linear-gradient(145deg, #6aa0ff, var(--blue), #1f55b8);
    }

    body.page-dashboard .support-btn.whatsapp {
      background: linear-gradient(145deg, #28bd84, var(--green-dark));
    }

    body.page-dashboard .support-btn.channel {
      background: linear-gradient(145deg, #343a43, var(--ink));
    }

    body.page-dashboard .stats-section {
      margin-top: 14px;
    }

    body.page-dashboard .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    body.page-dashboard .stat-card {
      min-height: 112px;
      padding: 13px;
      background: linear-gradient(145deg, rgba(238, 249, 244, 0.95), rgba(255, 253, 248, 0.78));
      transition: transform 160ms ease, box-shadow 160ms ease;
    }

    body.page-dashboard .stat-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 32px rgba(34, 27, 18, 0.14);
    }

    body.page-dashboard .stat-card:nth-child(2n) {
      background: linear-gradient(145deg, rgba(255, 247, 232, 0.96), rgba(255, 253, 248, 0.78));
    }

    body.page-dashboard .stat-card:nth-child(3n) {
      background: linear-gradient(145deg, rgba(255, 242, 235, 0.96), rgba(255, 253, 248, 0.78));
    }

    body.page-dashboard .stat-card:nth-child(4n) {
      background: linear-gradient(145deg, rgba(242, 247, 251, 0.96), rgba(255, 253, 248, 0.78));
    }

    body.page-dashboard .stat-icon {
      width: 36px;
      height: 36px;
      background: linear-gradient(145deg, #23b77f, var(--green-dark));
      box-shadow: 0 12px 20px rgba(15, 143, 97, 0.22), inset -5px -5px 10px rgba(0, 0, 0, 0.12), inset 4px 4px 8px rgba(255, 255, 255, 0.28);
      transform: rotateX(8deg) rotateY(-10deg);
    }

    body.page-dashboard .stat-card:nth-child(2n) .stat-icon {
      background: linear-gradient(145deg, #ffd36d, var(--gold), #c77b0a);
      color: #4e3301;
    }

    body.page-dashboard .stat-card:nth-child(3n) .stat-icon {
      background: linear-gradient(145deg, #ff916f, var(--coral), #b8462d);
    }

    body.page-dashboard .stat-card:nth-child(4n) .stat-icon {
      background: linear-gradient(145deg, #35c1c2, var(--teal), #087a7b);
    }

    body.page-dashboard .stat-card span {
      display: block;
      margin-top: 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      text-transform: uppercase;
    }

    body.page-dashboard .stat-card strong {
      display: block;
      margin-top: 4px;
      font-size: 19px;
      line-height: 1.1;
      overflow-wrap: anywhere;
    }

    @keyframes floatIcon {
      0%, 100% {
        transform: translateY(0) rotate(-3deg);
      }
      50% {
        transform: translateY(-9px) rotate(4deg);
      }
    }

    @media (max-width: 900px) {
      body.page-dashboard .dashboard {
        padding: 10px;
      }

      body.page-dashboard .app-shell {
        grid-template-columns: 1fr;
        min-height: calc(100vh - 20px);
      }

      body.page-dashboard .sidebar {
        position: fixed;
        inset: 10px auto 10px 10px;
        z-index: 20;
        width: min(310px, calc(100vw - 20px));
        display: block;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-right: 0;
        border-bottom: 0;
        border-radius: 18px;
        box-shadow: 0 28px 70px rgba(23, 25, 28, 0.26);
        transform: translateX(calc(-100% - 20px));
        transition: transform 220ms ease;
      }

      body.page-dashboard .sidebar.open {
        transform: translateX(0);
      }

      body.page-dashboard .side-close {
        display: grid;
        place-items: center;
      }

      body.page-dashboard .menu-toggle {
        display: grid;
        place-items: center;
      }

      body.page-dashboard .top-header {
        align-items: flex-start;
      }

      body.page-dashboard .hero-grid,
      body.page-dashboard .lower-grid {
        grid-template-columns: 1fr;
      }

      body.page-dashboard .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 560px) {
      body.page-dashboard .dashboard {
        padding: 0;
      }

      body.page-dashboard .app-shell {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
      }

      body.page-dashboard .top-header {
        padding: 12px;
      }

      body.page-dashboard .header-profile {
        padding: 6px;
      }

      body.page-dashboard .profile-copy {
        display: none;
      }

      body.page-dashboard .content {
        padding: 12px;
      }

      body.page-dashboard .balance-card {
        min-height: 286px;
        padding: 16px;
      }

      body.page-dashboard .balance-top {
        align-items: flex-start;
      }

      body.page-dashboard .status-chip {
        padding: 8px 10px;
      }

      body.page-dashboard .balance-amount strong {
        font-size: 36px;
      }

      body.page-dashboard .float-icon.one {
        right: 16px;
        bottom: 24px;
        width: 72px;
        height: 72px;
        font-size: 28px;
      }

      body.page-dashboard .float-icon.two {
        right: 94px;
        bottom: 82px;
      }

      body.page-dashboard .action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      body.page-dashboard .refer-link {
        align-items: stretch;
        flex-direction: column;
      }

      body.page-dashboard .stats-grid {
        grid-template-columns: 1fr;
      }
    }