:root {
  color-scheme: light;
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f9fafc;
  --ink: #101828;
  --muted: #667085;
  --line: #e4e7ec;
  --navy: #061427;
  --navy-2: #0b1f3a;
  --primary: #0f766e;
  --primary-2: #14b8a6;
  --accent: #d4af37;
  --accent-soft: #fff7d6;
  --danger: #d92d20;
  --success: #039855;
  --shadow: 0 18px 46px rgba(16, 24, 40, .10);
  --shadow-soft: 0 10px 26px rgba(16, 24, 40, .07);
  --radius: 22px;
  --radius-sm: 14px;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 12px max(18px, calc((100vw - var(--max)) / 2));
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(228,231,236,.85);
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 15px;
  display: grid; place-items: center;
  color: #fff; font-size: 24px; font-weight: 900;
  background: linear-gradient(135deg, #0f766e, #081a34 62%, #d4af37);
  box-shadow: 0 12px 28px rgba(15,118,110,.25);
}
.brand strong { display: block; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; }
.brand small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; }
nav { display: flex; align-items: center; gap: 8px; }
nav a, .link-button {
  border: 0; background: transparent; color: #344054;
  border-radius: 999px; padding: 10px 14px; font-weight: 800;
}
nav a:hover, .link-button:hover { background: #f2f4f7; }

.hero {
  width: min(var(--max), calc(100% - 32px));
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: clamp(24px, 5vw, 58px);
  align-items: center;
  padding: clamp(42px, 7vw, 92px) 0;
}
.hero-copy { min-width: 0; }
.eyebrow { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--primary); font-size: 12px; font-weight: 900; }
h1, h2, h3 { margin: 0; letter-spacing: -.04em; line-height: 1.06; }
h1 { font-size: clamp(42px, 7vw, 78px); max-width: 760px; }
h2 { font-size: clamp(26px, 3vw, 42px); }
h3 { font-size: 20px; }
.hero p:not(.eyebrow) { max-width: 620px; color: #475467; line-height: 1.7; font-size: clamp(16px, 2vw, 20px); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.button {
  min-height: 46px; border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 900; color: var(--ink); background: #fff; box-shadow: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.button.primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--primary), var(--navy)); box-shadow: 0 14px 28px rgba(15,118,110,.20); }
.button.ghost { color: var(--navy); background: #fff; }
.hero-panel {
  position: relative; overflow: hidden; min-height: 500px; border-radius: 32px; padding: 26px;
  color: #fff; background: radial-gradient(circle at 26% 18%, rgba(212,175,55,.34), transparent 30%), linear-gradient(145deg, #061427, #0f766e 130%);
  box-shadow: 0 28px 70px rgba(6,20,39,.28);
}
.orbit { position:absolute; inset:0; opacity:.42; background: linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size: 42px 42px; }
.orbit span { position:absolute; border:1px solid rgba(255,255,255,.45); border-radius:50%; width:110px; height:110px; }
.orbit span:nth-child(1){ left:10%; top:12%; } .orbit span:nth-child(2){ right:12%; top:18%; width:150px; height:150px; } .orbit span:nth-child(3){ left:26%; bottom:18%; width:170px; height:170px; } .orbit span:nth-child(4){ right:18%; bottom:12%; }
.metric { position:relative; border:1px solid rgba(255,255,255,.22); border-radius:24px; padding:20px; background:rgba(255,255,255,.13); backdrop-filter: blur(12px); }
.metric.large { margin-top: 92px; }
.metric strong { display:block; font-size: clamp(38px, 6vw, 58px); line-height:1; }
.metric small, .metric span { display:block; color:rgba(255,255,255,.76); }
.metric-row { position:absolute; left:26px; right:26px; bottom:26px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.band, .referral-band, .app-shell { padding: clamp(30px, 5vw, 70px) max(16px, calc((100vw - var(--max)) / 2)); }
.band { background: #fff; }
.section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.section-title.compact { margin-bottom: 10px; }
.plans { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; }
.plan-card {
  min-width: 0; border:1px solid var(--line); border-radius: var(--radius); padding:20px;
  background: var(--surface); box-shadow: var(--shadow-soft); transition:.16s ease;
}
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.plan-price { margin: 14px 0; font-size: 32px; font-weight: 950; color: var(--primary); letter-spacing: -.04em; }
.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.plan-grid span { display:block; color:var(--muted); font-size:12px; font-weight:800; }
.plan-grid strong { display:block; }
.referral-band { display:grid; grid-template-columns: 1fr 1.1fr; gap:28px; align-items:center; color:#fff; background:linear-gradient(135deg, var(--navy), #0d2b4b); }
.referral-band .eyebrow { color: var(--accent); }
.level-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.level-grid div { border:1px solid rgba(255,255,255,.14); border-radius:22px; padding:20px; background:rgba(255,255,255,.08); text-align:center; }
.level-grid strong { display:block; font-size: clamp(32px,5vw,52px); color: #78f3d5; }

.auth-layout { display:grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap:18px; justify-content:center; }
.auth-card, .panel, .balance, .profile-card { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:22px; box-shadow: var(--shadow-soft); min-width:0; }
form { display:grid; gap:12px; }
input, select { width:100%; min-height:48px; border:1px solid #d0d5dd; border-radius:14px; padding:10px 13px; background:#fff; color:var(--ink); }
input:focus, select:focus { outline:3px solid rgba(20,184,166,.16); border-color:var(--primary); }
label { display:block; margin-bottom:8px; color:#475467; font-size:13px; font-weight:900; }
.toast { position:fixed; z-index:100; right:16px; bottom:16px; max-width:360px; padding:13px 16px; border-radius:16px; background:var(--navy); color:#fff; opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s ease; box-shadow:var(--shadow); }
.toast.show { opacity:1; transform:translateY(0); }

.app-topbar { background:rgba(6,20,39,.92); border-bottom-color:rgba(255,255,255,.10); color:#fff; }
.app-topbar .brand small, .app-topbar nav a, .app-topbar .link-button { color:rgba(255,255,255,.74); }
.menu-toggle { display:none; width:44px; height:44px; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:rgba(255,255,255,.08); color:#fff; padding:9px; flex-direction:column; gap:5px; justify-content:center; align-items:center; }
.menu-toggle span { display:block; width:22px; height:2px; border-radius:4px; background:currentColor; }
.app-shell { min-height:calc(100vh - 72px); }
.member-app { display:grid; grid-template-columns: 290px minmax(0, 1fr); gap:22px; align-items:start; }
.member-content { min-width:0; display:grid; gap:18px; padding-bottom: 88px; }
.drawer-shade { display:none; }
.side-drawer { position:sticky; top:94px; max-height:calc(100vh - 110px); overflow:auto; border-radius:28px; padding:16px; color:#fff; background:linear-gradient(180deg, #061427, #0a1c36); box-shadow:var(--shadow); }
.drawer-head { display:flex; justify-content:space-between; gap:10px; align-items:center; padding-bottom:14px; }
.drawer-close { display:none; width:42px; height:42px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(255,255,255,.08); color:#fff; font-weight:900; }
.ref-card { display:flex; gap:12px; align-items:center; margin:12px 0 18px; padding:14px; border:1px solid rgba(255,255,255,.10); border-radius:22px; background:rgba(255,255,255,.07); }
.avatar-block { width:54px; height:54px; flex:0 0 auto; border-radius:18px; background:linear-gradient(135deg,var(--primary-2),var(--accent)); }
.drawer-menu { display:grid; gap:8px; }
.menu-item { display:grid; grid-template-columns:40px minmax(0,1fr) 18px; align-items:center; gap:10px; width:100%; min-height:54px; border:1px solid rgba(255,255,255,.10); border-radius:18px; background:rgba(255,255,255,.055); color:rgba(255,255,255,.78); padding:8px 10px; text-align:left; }
.menu-item span { display:grid; place-items:center; width:36px; height:36px; border-radius:13px; background:rgba(255,255,255,.08); color:#fff; font-size:12px; font-weight:900; }
.menu-item strong { min-width:0; font-size:14px; line-height:1.2; overflow-wrap:anywhere; }
.menu-item b { opacity:.55; }
.menu-item.active { color:#fff; background:linear-gradient(135deg,var(--primary),var(--navy-2)); border-color:rgba(120,243,213,.38); }
.drawer-logout { width:100%; min-height:52px; margin-top:14px; border:0; border-radius:18px; color:#fff; background:linear-gradient(135deg,#0f766e,#061427); font-size:16px; font-weight:900; }

.member-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.35fr); gap:16px; align-items:stretch; padding:22px; border-radius:28px; color:#fff; background:radial-gradient(circle at 16% 12%, rgba(212,175,55,.28), transparent 28%), linear-gradient(135deg,#061427,#0f3d48 65%,#0f766e); box-shadow:var(--shadow); }
.member-hero h1 { font-size:clamp(28px,5vw,46px); }
.member-hero p { color:rgba(255,255,255,.76); }
.member-hero .balance { color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); box-shadow:none; }
.dashboard, .view-section, .list { display:grid; gap:14px; }
.dashboard-head { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.balance span { display:block; color:var(--muted); font-weight:800; }
.balance strong { display:block; font-size:clamp(26px,4vw,36px); letter-spacing:-.04em; }
.split { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.dashboard-plans { grid-template-columns: repeat(2,minmax(0,1fr)); }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.stat { min-width:0; border:1px solid var(--line); border-radius:20px; padding:16px; background:#fff; box-shadow:var(--shadow-soft); }
.stat span { color:var(--muted); font-size:13px; font-weight:800; }
.stat strong { display:block; margin-top:4px; font-size:clamp(22px,3vw,32px); overflow-wrap:anywhere; }
.big-number { display:block; margin-top:10px; font-size:clamp(28px,4vw,44px); line-height:1; letter-spacing:0; color:var(--primary); overflow-wrap:anywhere; }
.noticeable-timer {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-color: rgba(212, 175, 55, .26);
  background:
    radial-gradient(circle at 18% 18%, rgba(20, 184, 166, .22), transparent 30%),
    radial-gradient(circle at 82% 0%, rgba(212, 175, 55, .28), transparent 26%),
    linear-gradient(145deg, #050b18, #081a34 56%, #10243f);
  box-shadow: 0 24px 54px rgba(6, 20, 39, .24);
}
.noticeable-timer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .18;
  pointer-events: none;
}
.noticeable-timer > * { position: relative; z-index: 1; }
.noticeable-timer h2 {
  color: #fff;
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: .02em;
}
.timer-kicker {
  margin: 0 0 9px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.countdown-unit {
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, #071224 0 52%, transparent 53%),
    conic-gradient(from -24deg, #78f3d5 calc(var(--progress) * 1%), rgba(255,255,255,.10) 0);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 22px rgba(20, 184, 166, .16);
}
.countdown-unit strong {
  color: #fff;
  font-size: clamp(20px, 4vw, 36px);
  line-height: .9;
  font-weight: 950;
  letter-spacing: .03em;
}
.countdown-unit span {
  color: rgba(255,255,255,.72);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.timer-note {
  margin:14px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  font-weight: 700;
}
.plan-status { margin:0 0 12px; color:var(--primary); font-size:13px; font-weight:900; }
.row, .admin-row { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.row strong, .row span, .admin-row strong, .admin-row span { display:block; overflow-wrap:anywhere; }
.row span, .admin-row span { color:var(--muted); font-size:13px; }
.status { color:var(--primary); font-weight:900; }
.deposit-grid { display:grid; grid-template-columns:1.05fr 1fr .85fr; gap:18px; align-items:start; }
.method-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.method-card { min-height:96px; border:1px solid var(--line); border-radius:18px; background:#fff; padding:13px; text-align:left; }
.method-card span, .method-card small { display:block; color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.08em; }
.method-card strong { display:block; margin:7px 0 4px; font-size:17px; }
.method-card em { display:block; margin-top:6px; color:#0f172a; font-size:12px; font-style:normal; font-weight:800; line-height:1.35; overflow-wrap:anywhere; }
.method-card.selected { border-color:var(--primary); background:#ecfdf9; box-shadow:0 14px 28px rgba(15,118,110,.12); }
.account-box { display:grid; gap:12px; margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--surface-2); }
.account-box span { display:block; color:var(--muted); font-size:13px; font-weight:800; }
.account-box strong { display:block; overflow-wrap:anywhere; }
.copy-line { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:10px; border-radius:15px; background:#fff; }
.inline-balance { box-shadow:none; padding:14px; margin-bottom:10px; }
.profile-card { display:flex; gap:16px; align-items:center; }
.profile-avatar { width:72px; height:72px; flex:0 0 auto; border-radius:24px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--primary),var(--navy)); font-size:28px; font-weight:900; }
.settings-list { display:grid; gap:10px; }
.settings-list button { display:flex; justify-content:space-between; gap:12px; align-items:center; min-height:56px; border:1px solid var(--line); border-radius:16px; background:#fff; padding:12px 14px; font-weight:900; text-align:left; }
.settings-list span { color:var(--muted); font-weight:700; }
.bottom-nav { display:none; }

.admin-body { background:#eef2f6; }
.admin-shell { min-height:100vh; display:grid; grid-template-columns:280px minmax(0,1fr); }
.admin-sidebar { position:sticky; top:0; min-height:100vh; padding:18px; color:#fff; background:linear-gradient(180deg,#061427,#0b1f3a); }
.admin-brand { margin-bottom:22px; }
.admin-menu { display:grid; gap:8px; width:100%; overflow:visible; }
.admin-menu button { width:100%; min-height:48px; border:1px solid rgba(255,255,255,.10); border-radius:16px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.78); padding:10px 12px; text-align:left; font-size:14px; font-weight:900; }
.admin-menu button.active { color:#fff; border-color:rgba(120,243,213,.36); background:linear-gradient(135deg,var(--primary),#0b1f3a); }
.admin-logout { position:absolute; left:18px; right:18px; bottom:18px; width:auto; }
.admin-main { min-width:0; display:grid; gap:18px; align-content:start; padding:24px; }
.admin-top { display:flex; justify-content:space-between; gap:16px; align-items:center; border:1px solid var(--line); border-radius:26px; background:#fff; padding:22px; box-shadow:var(--shadow-soft); }
.admin-top h1 { font-size:clamp(28px,4vw,48px); }
.admin-view { display:grid; gap:18px; min-width:0; }
.admin-stats { grid-template-columns:repeat(5,minmax(0,1fr)); }
.admin-row > div:last-child { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; align-items:center; }
.admin-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) auto auto; gap:10px; align-items:center; margin:14px 0; }
.account-admin { display:grid; gap:12px; }
.account-form { display:grid; grid-template-columns:120px 110px 150px 160px minmax(190px,1fr) 90px minmax(180px,1fr) 90px 110px; gap:8px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.user-admin-form { display:grid; grid-template-columns:minmax(120px,1fr) minmax(170px,1.2fr) minmax(120px,.9fr) 130px 120px 110px 96px; gap:8px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.account-form input, .user-admin-form input, .user-admin-form select { min-height:42px; border-radius:12px; }
.admin-user-card { display:grid; gap:10px; padding:12px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow-soft); }
.admin-user-card .user-admin-form { padding:0; border:0; border-radius:0; box-shadow:none; }
.user-plan-summary { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px; border-radius:14px; background:#f8fafc; }
.user-plan-summary strong { color:var(--navy); font-size:13px; }
.user-plan-summary span { padding:6px 9px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); font-size:12px; font-weight:800; }
.check { display:flex; gap:8px; align-items:center; margin:0; color:var(--muted); }
.check input { width:auto; min-height:auto; }

@media (max-width: 1100px) {
  .plans { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .deposit-grid, .split { grid-template-columns:1fr; }
  .account-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .user-admin-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .hero, .referral-band, .grid-2, .member-hero, .member-app { grid-template-columns:1fr; }
  .hero { min-height:auto; }
  .hero-panel { min-height:430px; }
  .menu-toggle { display:inline-flex; }
  .desktop-nav { display:none; }
  .member-app { display:block; }
  .side-drawer { position:fixed; z-index:60; inset:0 auto 0 0; top:0; width:min(86vw,340px); max-height:none; min-height:100vh; border-radius:0 28px 28px 0; transform:translateX(-104%); transition:transform .22s ease; }
  .drawer-open .side-drawer { transform:translateX(0); }
  .drawer-open .drawer-shade { display:block; position:fixed; z-index:55; inset:0; background:rgba(6,20,39,.55); backdrop-filter:blur(2px); }
  .drawer-close { display:inline-grid; place-items:center; }
  .bottom-nav { position:fixed; z-index:50; left:12px; right:12px; bottom:12px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; padding:8px; border:1px solid rgba(255,255,255,.14); border-radius:24px; background:rgba(6,20,39,.94); backdrop-filter:blur(16px); box-shadow:0 22px 50px rgba(6,20,39,.34); }
  .bottom-nav button { min-width:0; min-height:56px; border:0; border-radius:18px; background:transparent; color:rgba(255,255,255,.70); display:grid; place-items:center; gap:2px; font-weight:900; }
  .bottom-nav span { display:grid; place-items:center; width:28px; height:28px; border-radius:12px; background:rgba(255,255,255,.08); }
  .bottom-nav strong { font-size:11px; }
  .bottom-nav button.active, .bottom-nav .primary-tab { color:#fff; background:linear-gradient(135deg,var(--primary),var(--navy-2)); }
  .admin-shell { grid-template-columns:1fr; }
  .admin-sidebar { position:relative; min-height:auto; padding:14px; }
  .admin-menu { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .admin-logout { position:static; width:100%; }
}
@media (max-width: 680px) {
  .topbar { min-height:64px; padding:10px 14px; }
  .brand-mark { width:38px; height:38px; border-radius:13px; font-size:20px; }
  .brand small { display:none; }
  nav { gap:4px; }
  nav a, .link-button { padding:8px 9px; font-size:13px; }
  .hero { width:calc(100% - 28px); padding:34px 0; }
  h1 { font-size:clamp(36px,12vw,48px); }
  .hero-panel { min-height:360px; padding:18px; border-radius:26px; }
  .metric.large { margin-top:50px; }
  .metric-row { position:relative; left:auto; right:auto; bottom:auto; margin-top:12px; grid-template-columns:1fr; }
  .band, .referral-band, .app-shell { padding:24px 14px; }
  .section-title, .dashboard-head, .admin-top { flex-direction:column; align-items:flex-start; }
  .plans, .dashboard-plans, .auth-layout, .stats, .level-grid, .method-grid, .mobile-stats, .admin-stats { grid-template-columns:1fr; }
  .panel, .auth-card, .balance, .profile-card { border-radius:20px; padding:16px; }
  .noticeable-timer { padding:18px 14px; }
  .countdown-grid { gap:7px; }
  .countdown-unit strong { font-size: clamp(18px, 8vw, 30px); }
  .countdown-unit span { font-size: 8px; letter-spacing: .08em; }
  .row, .admin-row { grid-template-columns:1fr; align-items:stretch; }
  .admin-row > div:last-child { justify-content:flex-start; }
  .copy-line { grid-template-columns:1fr; }
  .member-hero { border-radius:24px; padding:18px; }
  .member-hero h1 { font-size:30px; }
  .app-shell { padding-bottom:98px; }
  .admin-main { padding:14px; }
  .admin-menu { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-menu button { min-height:44px; font-size:12px; padding:8px; }
  .account-form, .user-admin-form { grid-template-columns:1fr; }
  .admin-toolbar { grid-template-columns:1fr; }
  .bottom-nav { left:8px; right:8px; bottom:8px; border-radius:22px; }
  .bottom-nav button { min-height:52px; }
  .bottom-nav strong { font-size:10px; }
}
@media (max-width: 390px) {
  .brand strong { font-size:14px; }
  .bottom-nav { gap:4px; padding:6px; }
  .bottom-nav span { width:25px; height:25px; }
  .countdown-grid { gap:5px; }
  .countdown-unit span { font-size: 7px; }
}

.account-form label { display:grid; gap:6px; }
.account-form label span { color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.04em; }
.account-form .check { display:flex; align-items:center; gap:8px; }

/* Professional wallet deposit flow */
.deposit-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 18px;
  align-items: start;
}
.deposit-card {
  gap: 14px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
}
.deposit-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(300px, 1.08fr);
  gap: 18px;
  align-items: start;
}
.deposit-section {
  min-width: 0;
  display: grid;
  gap: 12px;
}
.deposit-note-panel {
  position: sticky;
  top: 96px;
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.deposit-note-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.deposit-note-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.deposit-note-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.deposit-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 2px;
}
.deposit-step span {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--navy));
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(15, 118, 110, .18);
}
.deposit-step strong {
  font-size: 15px;
  letter-spacing: -.01em;
}
.quick-amounts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.quick-amounts button {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: 12px;
  color: #0f3d48;
  background: #ecfdf9;
  font-size: 12px;
  font-weight: 900;
}
.full-width { width: 100%; }
button:disabled { opacity: .65; cursor: not-allowed; transform: none !important; }
.account-box {
  margin-top: 0;
  border-color: rgba(15, 118, 110, .18);
  background: linear-gradient(180deg, #f8fffd, #ffffff);
}
.account-highlight {
  padding: 12px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--primary));
}
.account-highlight span {
  color: rgba(255,255,255,.72);
}
.account-highlight strong {
  color: #fff;
}
.method-card {
  position: relative;
  overflow: hidden;
  min-height: 104px;
}
.method-card.selected::after {
  content: "Selected";
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  font-size: 10px;
  font-weight: 900;
}
@media (max-width: 1100px) {
  .deposit-flow { grid-template-columns: 1fr; }
  .deposit-note-panel { position: static; }
}
@media (max-width: 900px) {
  .deposit-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .deposit-flow { gap: 12px; }
  .deposit-card { padding: 14px; }
  .quick-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-card { min-height: 88px; padding-right: 76px; }
  .method-card.selected::after { right: 8px; top: 8px; }
  .deposit-note-panel { display: none; }
}


/* Noticeable dashboard timer badges */
.noticeable-timer {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 18% 12%, rgba(15, 118, 110, .12), transparent 30%), linear-gradient(180deg, #ffffff, #f8fffd);
}
.noticeable-timer::after {
  content: "";
  position: absolute;
  inset: auto -34px -48px auto;
  width: 130px;
  height: 130px;
  border-radius: 999px;
  background: rgba(15, 118, 110, .08);
  pointer-events: none;
}
.timer-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 260px);
  min-height: 54px;
  margin-top: 14px;
  padding: 12px 18px;
  border: 1px solid rgba(15, 118, 110, .24);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--navy));
  box-shadow: 0 16px 34px rgba(15, 118, 110, .22);
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 950;
  letter-spacing: -.03em;
}
.reward-pill {
  border-color: rgba(212, 175, 55, .36);
  background: linear-gradient(135deg, #0f766e, #061427);
}
@media (max-width: 680px) {
  .timer-pill {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    font-size: 24px;
  }
}


/* WhatsApp channel card and floating support */
.whatsapp-channel-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 18px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, .18), transparent 30%),
    linear-gradient(135deg, #16a34a, #047857 58%, #065f46);
  box-shadow: 0 22px 48px rgba(4, 120, 87, .24);
  overflow: hidden;
  position: relative;
}
.whatsapp-channel-card::after {
  content: "";
  position: absolute;
  right: -54px;
  bottom: -70px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  pointer-events: none;
}
.whatsapp-channel-icon {
  width: 72px;
  height: 72px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.whatsapp-channel-icon svg,
.support-float svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
}
.whatsapp-channel-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.whatsapp-channel-copy h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.whatsapp-channel-copy p {
  margin: 0 0 18px;
  max-width: 720px;
  color: rgba(255, 255, 255, .84);
  font-size: 15px;
  line-height: 1.7;
}
.whatsapp-join-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  min-width: min(100%, 260px);
  padding: 12px 18px;
  border-radius: 999px;
  color: #063b2c;
  background: #ecfdf5;
  font-weight: 950;
  box-shadow: 0 14px 28px rgba(6, 95, 70, .22);
}
.whatsapp-join-button:hover {
  transform: translateY(-1px);
  background: #ffffff;
}
.support-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #047857);
  box-shadow: 0 18px 38px rgba(4, 120, 87, .35);
  font-weight: 950;
}
.support-float:hover { transform: translateY(-2px); }
@media (max-width: 680px) {
  .whatsapp-channel-card {
    grid-template-columns: 1fr;
    gap: 14px;
    border-radius: 24px;
  }
  .whatsapp-channel-icon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
  }
  .whatsapp-join-button { width: 100%; }
  .support-float {
    right: 14px;
    bottom: 92px;
    width: 58px;
    height: 58px;
    min-height: 58px;
    padding: 0;
    justify-content: center;
  }
  .support-float span { display: none; }
}