/* Whale Stars UI (Neon) — unified style (matches provided template) */
:root{
  /* === Palette (from avatar) === */
  --bg-0:#050816;
  --bg-1:#070B1C;
  --card:#0B1028;
  --card-2:#0E1634;
  --stroke: rgba(148,163,184,.28);
  --stroke-2: rgba(56,189,248,.22);

  --text:#F8FAFF;
  --muted: rgba(248,250,255,.62);

  --violet:#8B5CF6;
  --violet-2:#6D28D9;
  --blue:#2563EB;
  --cyan:#22D3EE;
  --neon:#38BDF8;
  --gold:#FACC15;
  --good:#22C55E;
  --danger:#F97373;

  --shadow: 0 18px 40px rgba(0,0,0,.55);
  --shadow-soft: 0 10px 24px rgba(0,0,0,.32);

  --r-xl: 22px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 12px;

  --grad: linear-gradient(135deg, var(--violet-2), var(--blue), var(--cyan));
  --grad-soft: linear-gradient(135deg, rgba(109,40,217,.35), rgba(37,99,235,.35), rgba(34,211,238,.28));
  --glow: 0 0 18px rgba(56,189,248,.35), 0 0 48px rgba(37,99,235,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 900px at 70% 10%, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(900px 700px at 25% 20%, rgba(34,211,238,.14), transparent 55%),
    radial-gradient(900px 700px at 40% 85%, rgba(37,99,235,.16), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 55%, #040614);
  overflow-x:hidden;
}

/* Subtle "digital grid" like avatar */
body::before{
  content:"";
  position:fixed;
  inset:-40px;
  pointer-events:none;
  opacity:.28;
  background:
    linear-gradient(to right, rgba(56,189,248,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139,92,246,.12) 1px, transparent 1px);
  background-size: 56px 56px;
  filter: blur(.2px);
  mask-image: radial-gradient(circle at 50% 30%, black 35%, transparent 70%);
}

/* Tiny particles */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 18%, rgba(255,255,255,.42) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 70%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.32) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 48%, rgba(255,255,255,.25) 0 1px, transparent 2px);
  background-size: 420px 420px;
  filter: blur(.2px);
}

/* ==== Core containers (mapped to your app) ==== */
.app{
  min-height:100%;
  display:flex;
  justify-content:center;
  padding:18px 12px 100px;
}
.shell{
  width:min(430px, 100%);
  border-radius: 30px;
  background: rgba(7,10,26,.35);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  backdrop-filter: blur(14px);
  padding:14px 14px 18px;
}

/* Glass panels */
.glass,
.header,
.main-card,
.ref-card,
.panel,
.modal-card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

/* Topbar */
.header{
  border-radius: 22px;
  padding:12px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.header-left{display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0;}
.header-right{display:flex; align-items:center; gap:10px; flex:0 0 auto; flex-wrap:nowrap;}

/* Hide avatar/title in header (kept in DOM for JS safety) */
.header .avatar-wrap,
.header .title-block{display:none !important;}

/* Hide old balance block in content */
.old-balance-block{display:none !important;}

.avatar-wrap{flex:0 0 auto;}
.avatar,
#avatarInitial{
  width:40px;height:40px;border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(34,211,238,.30), rgba(37,99,235,.12) 45%, rgba(0,0,0,.2) 70%);
  border: 1px solid rgba(56,189,248,.25);
  position:relative;
  box-shadow: var(--glow);
  display:grid;place-items:center;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--text);
}

.title-block{flex:1 1 auto; min-width:0;}
.title-block h1{
  margin:0;
  display:flex;
  gap:8px;
  align-items:center;
  font-weight:800;
  font-size:15px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.subtitle,
#userInfo{
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Lang switch */
.lang-switch{
  display:flex;
  align-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 999px;
  overflow:hidden;
}
.lang-btn{
  appearance:none;
  border:0;
  color:var(--muted);
  background:transparent;
  padding:7px 10px;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
}
.lang-btn.active{
  color:var(--text);
  background: var(--grad);
  box-shadow: var(--glow);
}

/* Status chip (badge) */
.badge{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.16);
  color: rgba(248,250,255,.74);
  font-size:12px;
  white-space:nowrap;
}
.badge-dot{
  width:9px;height:9px;border-radius:50%;
  background: var(--good);
  box-shadow: 0 0 0 4px rgba(34,197,94,.12), 0 0 14px rgba(34,197,94,.35);
}

/* Balance card */
.main-card{
  margin-top:12px;
  border-radius: 22px;
  padding:14px;
  position:relative;
  overflow:hidden;
}
.main-card::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(700px 220px at 65% 0%, rgba(56,189,248,.22), transparent 55%),
              radial-gradient(520px 260px at 20% 35%, rgba(37,99,235,.12), transparent 60%);
  pointer-events:none;
}
.row-between{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  justify-content:space-between;
}
.balance-label{
  color:var(--muted);
  font-size:12px;
  margin-top:10px;
}
.balance-value{
  display:flex;
  align-items:baseline;
  gap:10px;
  justify-content:flex-end;
  font-size:40px;
  font-weight:900;
  letter-spacing:.2px;
  line-height:1;
  text-shadow: 0 0 22px rgba(56,189,248,.22);
}
.balance-value span{font:inherit}
#refreshBalance{opacity:.85}
.balance-actions{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
  margin-top:6px;
}
.icon-btn, .iconBtn, .mini-btn{
  width:36px;height:36px;
  border-radius:12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.05);
  display:grid;place-items:center;
  cursor:pointer;
  transition:.15s transform ease, .15s background ease;
  color:var(--text);
}
.icon-btn:hover, .iconBtn:hover, .mini-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07);}

/* Buttons */
.btn{
  appearance:none;
  border:0;
  cursor:pointer;
  font-weight:800;
  border-radius: 999px;
  padding:11px 14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition: .15s transform ease, .15s filter ease, .15s box-shadow ease;
  color:var(--text);
  user-select:none;
  text-decoration:none;
}
.btn:active{transform: scale(.98);}
.btn-primary{
  background: var(--grad);
  box-shadow: var(--glow);
  border: 1px solid rgba(255,255,255,.08);
}
.btn-primary:hover{filter: brightness(1.06);}
.btn-secondary,
.btn-outline{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.18);
  color: rgba(248,250,255,.88);
}
.btn-ghost{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.14);
  color: rgba(248,250,255,.78);
}

/* Tabs / Main nav */
.main-nav{
  margin-top:14px;
  display:flex;
  gap:10px;
}
.main-nav-btn{
  flex:1 1 0;
  border-radius: 16px;
  padding:12px 12px;
  text-align:center;
  font-weight:800;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.70);
  cursor:pointer;
  transition:.15s transform ease, .15s background ease;
}
.main-nav-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06);}
.main-nav-btn.active{
  background: linear-gradient(135deg, rgba(56,189,248,.24), rgba(37,99,235,.12));
  border-color: rgba(56,189,248,.25);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(56,189,248,.18), 0 0 26px rgba(56,189,248,.14);
}

/* Section titles */
.section-title, h2.section-title{
  margin-top:14px;
  font-weight:900;
  font-size:18px;
}
.section-desc, .muted{
  color: var(--muted);
  font-size:13px;
  line-height:1.35;
}

/* Segmented pills */
.filter-row, .seg{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.filter-btn, .seg .pill, .pill{
  flex:1 1 0;
  min-width:140px;
  text-align:center;
  border-radius: 999px;
  padding:11px 12px;
  font-weight:800;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.78);
  cursor:pointer;
}
.filter-btn.active, .seg .pill.active, .pill.active{
  background: var(--grad);
  border-color: rgba(255,255,255,.10);
  box-shadow: var(--glow);
  color: var(--text);
}

/* Task cards (your renderer already uses .task) */
.task{
  margin-top:12px;
  border-radius: 20px;
  padding:12px;
  background: rgba(8,12,30,.52);
  border: 1px solid rgba(56,189,248,.18);
  box-shadow: 0 0 0 1px rgba(139,92,246,.10) inset, var(--shadow-soft);
  overflow:hidden;
  position:relative;
}
.task::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(520px 180px at 15% 10%, rgba(139,92,246,.22), transparent 55%),
              radial-gradient(520px 200px at 85% 85%, rgba(34,211,238,.18), transparent 55%);
  pointer-events:none;
  opacity:.85;
}
.task .trow{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.task .reward{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(250,204,21,.22);
  box-shadow: 0 0 18px rgba(250,204,21,.10);
  font-weight:900;
}
.task .actions{
  position:relative;
  display:flex;
  gap:10px;
  margin-top:10px;
}
.task .actions .btn{
  flex:1 1 0;
  justify-content:center;
  border-radius: 14px;
  padding:11px 12px;
}

/* Subtabs */
.subtabs{
  margin-top:14px;
  display:flex;
  gap:10px;
}
.subtab{
  flex:1 1 0;
  padding:11px 12px;
  border-radius: 999px;
  text-align:center;
  font-weight:900;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.70);
  cursor:pointer;
}
.subtab.active{
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(139,92,246,.12));
  border-color: rgba(56,189,248,.22);
  color:var(--text);
  box-shadow: 0 0 20px rgba(56,189,248,.12);
}

/* Referral card */
.ref-card, .ref{
  margin-top:12px;
  border-radius: 20px;
  padding:12px;
}
.ref-card h3, .ref h3{
  margin:0;
  font-size:16px;
  font-weight:900;
}
.ref-card p, .ref p{
  margin:8px 0 0;
  color: var(--muted);
  font-size:13px;
  line-height:1.35;
}
.stats{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.stat{
  border-radius: 16px;
  padding:10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.14);
}
.stat .k{color: rgba(248,250,255,.55); font-size:12px;}
.stat .v{margin-top:4px; font-weight:900; font-size:16px; display:flex; align-items:center; gap:8px;}
.refrow{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 16px;
  padding:10px;
}
.refrow input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:none;
  background:transparent;
  color: rgba(248,250,255,.86);
  font-weight:700;
  font-size:13px;
}
.refrow .copy{
  flex:0 0 auto;
  border-radius: 12px;
  padding:10px 12px;
  font-weight:900;
}

/* Form controls */
.input, input[type="text"], input[type="number"], input[type="url"], textarea, select{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.90);
  padding:12px 12px;
  outline:none;
}
.input:focus, input:focus, textarea:focus, select:focus{
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 0 0 1px rgba(56,189,248,.18), 0 0 22px rgba(56,189,248,.12);
}
textarea{min-height:96px; resize:vertical;}

hr{border:0; border-top:1px solid rgba(148,163,184,.14); margin:12px 0;}
.hidden{display:none !important;}
.small{font-size:12px;color:var(--muted)}
.spacer{height:6px}

/* Mobile tweaks */
@media (max-width: 380px){
  .balance-value{font-size:34px}
  .badge{display:none}
  .filter-btn, .seg .pill, .pill{min-width: 120px}
}

/* Overrides for legacy inline-styled controls */
#refLinkInput{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  color: rgba(248,250,255,.86) !important;
  font-weight:700 !important;
  font-size:13px !important;
}
.btn-sm{padding:9px 12px; font-size:12px; border-radius:12px;}

/* === Additional mappings for app-specific classes (to ensure 100% coverage) === */

/* Generic headings / sections */
.section-title{
  margin-top:14px;
  font-weight:900;
  font-size:18px;
}
.section-sub,
.section-desc{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

/* Tabs used in app */
.offer-tabs,
.task-types{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.offer-tab,
.task-type-btn{
  flex:1 1 0;
  min-width:140px;
  border-radius: 999px;
  margin-bottom: 3px;
  margin-top: 3px;
  padding:11px 12px;
  font-weight:900;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.78);
  cursor:pointer;
  transition:.15s transform ease, .15s background ease;
}
.offer-tab:hover,
.task-type-btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06);}
.offer-tab.active,
.task-type-btn.active{
  background: var(--grad);
  border-color: rgba(255,255,255,.10);
  box-shadow: var(--glow);
  color: var(--text);
}

/* Inner tabs (Create / My tasks etc.) */
.inner-tabs{display:flex; gap:10px; margin-top:12px;}
.inner-tab{
  flex:1 1 0;
  padding:11px 12px;
  border-radius: 999px;
  text-align:center;
  font-weight:900;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.70);
  cursor:pointer;
  transition:.15s transform ease, .15s background ease;
}
.inner-tab:hover{transform: translateY(-1px); background: rgba(255,255,255,.06);}
.inner-tab-active,
.inner-tab.active{
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(139,92,246,.12));
  border-color: rgba(56,189,248,.22);
  color:var(--text);
  box-shadow: 0 0 20px rgba(56,189,248,.12);
}

/* Lists */
.list{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.list-item{
  border-radius: 20px;
  padding:12px;
  background: rgba(8,12,30,.52);
  border: 1px solid rgba(56,189,248,.18);
  box-shadow: 0 0 0 1px rgba(139,92,246,.10) inset, var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.list-item::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(520px 180px at 15% 10%, rgba(37,99,235,.12), transparent 55%),
              radial-gradient(520px 200px at 85% 85%, rgba(34,211,238,.14), transparent 55%);
  pointer-events:none;
  opacity:.75;
}

/* History list layout + status badges */
.list-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  position:relative;
  z-index:1;
}
.list-main-left{
  font-weight:900;
  font-size:13px;
  color: rgba(248,250,255,.92);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.list-sub{
  margin-top:6px;
  position:relative;
  z-index:1;
  font-weight:800;
  color: rgba(248,250,255,.88);
}
.list-meta{
  margin-top:6px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color: var(--muted);
  position:relative;
  z-index:1;
}
.badge-status{
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.2px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(255,255,255,.05);
  color: rgba(248,250,255,.80);
  white-space:nowrap;
}
.badge-status.paid{
  background: rgba(34,211,238,.12);
  border-color: rgba(34,211,238,.28);
  color: rgba(248,250,255,.92);
  box-shadow: 0 0 14px rgba(34,211,238,.16);
}
.badge-status.completed{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.28);
  color: rgba(248,250,255,.92);
  box-shadow: 0 0 14px rgba(34,197,94,.14);
}
.badge-status.pending{
  background: rgba(250,204,21,.10);
  border-color: rgba(250,204,21,.24);
  color: rgba(248,250,255,.90);
  box-shadow: 0 0 14px rgba(250,204,21,.10);
}
.badge-status.rejected,
.badge-status.canceled{
  background: rgba(249,115,115,.10);
  border-color: rgba(249,115,115,.24);
  color: rgba(248,250,255,.90);
}

/* Generic card class (some blocks in index.php use .card) */
.card{
  border-radius: 22px;
  padding:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px);
}

/* Form groups */
.input-group{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 16px;
  padding:10px;
}

/* Ensure plain <button> inside app looks consistent even if missing .btn */
.shell button:not(.btn):not(.lang-btn):not(.offer-tab):not(.task-type-btn):not(.inner-tab):not(.main-nav-btn){
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.82);
  border-radius: 14px;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;
}

/* Small chips/badges */
.chip,
.badge{
  padding:8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.05);
  color: rgba(248,250,255,.70);
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Sections */
.main-section{margin-top:12px;}


/* === PATCH v3 fixes === */

/* Remove the "left line" effect on primary/active elements: use outline instead of border */
.btn-primary,
.offer-tab.active,
.task-type-btn.active,
.inner-tab-active{
  border: 0 !important;
  outline: 1px solid rgba(255,255,255,.10);
  outline-offset: -1px;
  box-shadow: var(--glow), 0 0 0 1px rgba(255,255,255,.06) inset;
}

.btn-primary:hover{
  box-shadow: var(--glow), 0 0 0 1px rgba(255,255,255,.08) inset;
}

/* Tabs (Referrals / Withdraw / History) */
.tabs{
  margin-top: 14px;
  display:flex;
  gap:10px;
}
.tab{
  flex:1 1 0;
  border-radius: 16px;
  padding:12px 12px;
  text-align:center;
  font-weight:900;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.04);
  color: rgba(248,250,255,.72);
  cursor:pointer;
  transition:.15s transform ease, .15s background ease;
}
.tab:hover{transform: translateY(-1px); background: rgba(255,255,255,.06);}
.tab.active{
  border:0;
  outline: 1px solid rgba(56,189,248,.20);
  outline-offset:-1px;
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(139,92,246,.12));
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(56,189,248,.12) inset, 0 0 22px rgba(56,189,248,.14);
}

/* Offerwall tabs: show all buttons (no horizontal scroll) */
.offer-tabs{
  flex-wrap: wrap;
  overflow: visible;
  padding-bottom: 0;
}
.offer-tab{
  flex: 1 1 0;
  min-width: 140px;
  white-space: normal;
}
/* Task-type buttons spacing */
.task-types{
  margin-top: 14px;
  margin-bottom: 12px;
}

/* Offerwall frame back */
.offerwall-frame{
  margin-top: 12px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(56,189,248,.18);
  background: rgba(8,12,30,.52);
  box-shadow: 0 0 0 1px rgba(139,92,246,.10) inset, var(--shadow-soft);
  position:relative;
}
.offerwall-frame::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(520px 180px at 15% 10%, rgba(37,99,235,.12), transparent 55%),
              radial-gradient(520px 200px at 85% 85%, rgba(34,211,238,.16), transparent 55%);
  pointer-events:none;
}
.offerwall-frame iframe{
  position:relative;
  width: 100%;
  height: min(72vh, 640px);
  border: 0;
  display:block;
  background: transparent;
}

/* Referral link input border visibility */
#refLinkInput{
  background: rgba(2,6,23,.55) !important;
  border: 1px solid rgba(56,189,248,.22) !important;
  box-shadow: 0 0 0 1px rgba(56,189,248,.10) inset, 0 0 18px rgba(56,189,248,.10);
  border-radius: 14px !important;
  padding: 10px 12px !important;
  color: rgba(248,250,255,.92) !important;
}

/* Make "Offerwalls" and "Create task" cards more neon (less grey feel) */
#sectionOfferwalls .card,
#sectionCreateTask .card{
  background: radial-gradient(700px 220px at 65% 0%, rgba(56,189,248,.14), transparent 55%),
              radial-gradient(520px 260px at 20% 35%, rgba(139,92,246,.12), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-color: rgba(56,189,248,.16);
}

/* Keep buttons from collapsing into full width single column where not needed */
.offer-tabs .offer-tab{width:auto}


/* Safety: badge removed from markup, but if exists, hide */
#i18n-badge{display:none !important;}


.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);color:#08110a;border:0;}
.btn-success:disabled{opacity:.45;filter:saturate(.6);}


/* ===== Whale Crash Stage ===== */
.crash-stage{
  position:relative;
  width:100%;
  height:180px;
  border-radius:16px;
  overflow:hidden;
  background: radial-gradient(120% 120% at 20% 20%, rgba(46,249,255,.18) 0%, rgba(165,107,255,.14) 45%, rgba(10,12,30,.92) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.crash-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
.crash-grid{
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.55;
  pointer-events:none;
}
.crash-whale{
  position:absolute;
  left:18px;
  bottom:18px;
  font-size:38px;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.45));
  transform: translate3d(0,0,0);
  pointer-events:none;
  transition: transform 80ms linear;
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.crash-stage{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background: radial-gradient(1200px 600px at 20% 20%, rgba(46,249,255,.14), transparent 55%),
              radial-gradient(900px 520px at 85% 10%, rgba(165,107,255,.18), transparent 55%),
              rgba(10,14,28,.92);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}

#crashCanvas{ width:100%; height:auto; display:block; }

.crash-hud{
  position:absolute; left:12px; right:12px; top:10px;
  display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
  pointer-events:none;
}

.crash-mult{
  pointer-events:none;
  font-size:34px; font-weight:900;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.crash-pf{
  pointer-events:auto;
  max-width: 360px;
  font-size:12px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.crash-pf .muted{ opacity:.75; }
.crash-pf #pfSeed, .crash-pf #pfHash { word-break: break-all; }

.pf-actions{ display:flex; gap:10px; align-items:center; margin-top:8px; }



/* ===== Crash window from 1.html (scoped) ===== */
.crashWrap{
  --safe-top: 0px;
  position: relative;
  width: 100%;
  height: min(66vh, 380px);
  min-height: 220px;
  margin-top: 10px;
  border-radius: 18px;
  overflow: hidden;
}

.crashWrap .crashArea{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow: 0 18px 60px rgba(0,0,0,.48);
  overflow: hidden;
}
.crashWrap .crashArea::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(1100px 520px at 30% 10%, rgba(57,214,255,.16), transparent 60%),
        radial-gradient(980px 520px at 90% 40%, rgba(122,92,255,.14), transparent 60%),
        repeating-radial-gradient(circle at 30% 30%, rgba(57,214,255,.06) 0 2px, transparent 2px 22px);
      opacity:.95;
      pointer-events:none;
      mix-blend-mode: screen;
    }.crashWrap .crashArea::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:0;
      height: 42%;
      background:
        linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45));
      pointer-events:none;
    }.crashWrap /* decors (left/center/right) */
    .decor{ position:absolute; z-index:3; pointer-events:none; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); opacity:.95; }.crashWrap .decor.left{ font-size: 40px; bottom: 14px; left: 14px; }.crashWrap .decor.center{ font-size: 38px; bottom: 16px; left: 50%; transform: translateX(-50%); }.crashWrap .decor.right{ font-size: 32px; bottom: 20px; right: 14px; opacity:.88; }.crashWrap .hud{
      position: relative;
      z-index: 4;
      padding: 14px 12px 0;
      text-align:center;
    }.crashWrap .mult{
      font-size: 58px;
      font-weight: 990;
      letter-spacing: .3px;
      color: var(--accent);
      text-shadow: 0 0 18px rgba(57,214,255,.35);
      line-height: 1;
    }.crashWrap .mult.crashed{
      color: var(--bad);
      text-shadow: 0 0 18px rgba(255,107,107,.30);
    }.crashWrap .status{
      margin-top: 6px;
      font-size: 13px;
      color: var(--hint);
      font-weight: 950;
    }.crashWrap .swimField{
      position: absolute;
      left: 0; right: 0;
      top: 92px;
      bottom: 0;
      z-index: 3;
      overflow:hidden;
    }.crashWrap .creature{
      position:absolute;
      left: 0; top: 0;
      opacity: 1;
      pointer-events:none;
      filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
      will-change: transform;
      user-select:none;
      transform: translate(-120px, 999px);
    }.crashWrap /* bubbles restored: emoji bubble up + burst bubbles */
    .emojiBubble{
      position:absolute;
      z-index: 2;
      font-size: 18px;
      opacity:.6;
      pointer-events:none;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.22));
      animation: bubbleUp var(--dur) linear forwards;
      transform: translateY(20px);
    }@keyframes bubbleUp{
      0%{ transform: translateY(20px); opacity:.0; }.crashWrap 18%{ opacity:.6; }.crashWrap 100%{ transform: translateY(-240px); opacity:0; }.crashWrap }
    .burstBubble{
      position:absolute;
      width: 10px; height: 10px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(57,214,255,.35) 55%, rgba(57,214,255,.08) 72%, transparent 75%);
      border: 1px solid rgba(255,255,255,.20);
      box-shadow: 0 0 18px rgba(57,214,255,.16);
      pointer-events:none;
      will-change: transform, opacity;
      opacity: 1;
      animation: bubbleBurst 700ms ease-out forwards;
    }@keyframes bubbleBurst{
      0%   { transform: translate(0,0) scale(.85); opacity: 1; }.crashWrap 90%{ opacity: .85; }.crashWrap 100%{ transform: translate(var(--dx), var(--dy)) scale(.35); opacity: 0; }.crashWrap }

    /* multiplier strip */
    .strip{
      position:absolute;
      left:0; right:0;
      bottom: 120px;
      padding: 0 12px;
      display:flex;
      gap:10px;
      justify-content:center;
      z-index: 10;
      pointer-events:none;
    }.crashWrap .chip{
      pointer-events:auto;
      padding: 10px 14px;
      border-radius: 14px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.08);
      color: rgba(255,255,255,.80);
      font-weight: 900;
      letter-spacing: .2px;
      min-width: 68px;
      text-align:center;
    }.crashWrap .chip.active{
      background: linear-gradient(135deg, rgba(122,92,255,.28), rgba(57,214,255,.18));
      border-color: rgba(57,214,255,.22);
      color: rgba(255,255,255,.92);
      box-shadow: 0 10px 30px rgba(57,214,255,.10);
    }.crashWrap /* big action button */
    .ctaWrap{
      position:absolute;
      left:0; right:0;
      bottom: 20px;
      padding: 0 14px;
      z-index: 10;
    }.crashWrap .cta{
      width:100%;
      border:0;
      padding: 18px 16px;
      border-radius: 20px;
      font-weight: 950;
      font-size: 22px;
      letter-spacing:.2px;
      color: rgba(255,255,255,.95);
      background: linear-gradient(180deg, #2c93ff, #1a79ff);
      box-shadow: 0 20px 60px rgba(26,121,255,.22);
      cursor:pointer;
    }.crashWrap .cta:active{ transform: translateY(1px); }.crashWrap /* bottom list + nav like screenshot */
    .list{
      flex: 1;
      background: rgba(255,255,255,.03);
      border-top: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(16px);
      overflow:auto;
    }.crashWrap .row{
      display:flex;
      align-items:center;
      gap: 12px;
      padding: 16px 14px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
    }.crashWrap .avatar{
      width: 46px; height: 46px;
      border-radius: 999px;
      display:grid; place-items:center;
      font-weight: 900;
      color: rgba(255,255,255,.92);
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.12);
      flex:0 0 46px;
    }.crashWrap .meta{ flex:1; min-width:0; }.crashWrap .name{
      font-weight: 950;
      font-size: 20px;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }.crashWrap .sub{
      margin-top: 6px;
      display:flex;
      align-items:center;
      gap: 10px;
      color: rgba(255,255,255,.55);
      font-weight: 900;
      font-size: 14px;
    }.crashWrap .sub .x{ color: rgba(61,255,178,.80); }.crashWrap .starsMini{
      display:inline-flex; align-items:center; gap: 6px;
    }.crashWrap .starDot{
      width: 16px; height: 16px;
      border-radius: 999px;
      display:grid; place-items:center;
      font-size: 10px;
      background: rgba(255,215,0,.14);
      border: 1px solid rgba(255,215,0,.16);
      color: rgba(255,255,255,.88);
    }.crashWrap .right{
      display:flex;
      align-items:center;
      gap: 12px;
    }.crashWrap .gain{
      font-weight: 980;
      font-size: 28px;
      letter-spacing: .2px;
      white-space:nowrap;
    }.crashWrap .gain.green{ color: rgba(61,255,178,.90); }.crashWrap .gain.white{ color: rgba(255,255,255,.88); }.crashWrap .item{
      width: 40px; height: 40px;
      display:grid; place-items:center;
      font-size: 28px;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
    }

    


/* ===== Whale Crash UI extras ===== */
.crashArea{ position:relative; overflow:hidden; }
.crashArea .hud .sub{ font-size:12px; opacity:.85; margin-top:2px; }

.crashToasts{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  pointer-events:none;
  z-index:30;
  width: min(92%, 360px);
}
.toast{
  align-self:center; text-align:center; width:100%;
  padding:10px 12px;
  border-radius:14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-weight:700;
  transform: translateY(0);
  opacity: 1;
  transition: transform .35s ease, opacity .35s ease;
}
.toast.info{ background: rgba(99,102,241,.18); border:1px solid rgba(99,102,241,.35); }
.toast.success{ background: rgba(16,185,129,.16); border:1px solid rgba(16,185,129,.35); }
.toast.warn{ background: rgba(245,158,11,.16); border:1px solid rgba(245,158,11,.35); }
.toast.error{ background: rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.35); }
.toast.hide{ transform: translateY(-8px); opacity:0; }

.bubbleLayer{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.bubble{
  position:absolute; bottom:-10%;
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.20);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  animation: bubbleUp linear infinite;
}
@keyframes bubbleUp{
  0%{ transform: translateY(0) scale(1); opacity:.0; }
  10%{ opacity:.65; }
  100%{ transform: translateY(-130vh) scale(1.25); opacity:0; }
}

.swimEntity{
  position:absolute;
  z-index:3;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
  opacity: 1;
  transition: transform .8s ease;
}
.swimEntity.go{
  animation: swimGo 6.8s linear forwards;
}
@keyframes swimGo{
  0%{ left:-12%; }
  100%{ left:112%; }
}
.swimEntity.pop{
  animation: popOut .6s ease forwards;
}
@keyframes popOut{
  0%{ transform: scale(1); opacity:1; }
  100%{ transform: scale(1.8); opacity:0; }
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid rgba(148,163,184,.25);
  background: rgba(148,163,184,.10);
  color: inherit;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}
.chip.low{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); }
.chip.mid{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); }
.chip.high{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.10); }

#crashLiveBetsList .lbRow{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(148,163,184,.08);
  border:1px solid rgba(148,163,184,.14);
  margin-bottom:8px;
}
#crashLiveBetsList .lbRow.active{ }
#crashLiveBetsList .lbRow.cashed_out{ border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.08); }
#crashLiveBetsList .lbRow.lost{ opacity:.65; }
#crashLiveBetsList .lbName{ font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#crashLiveBetsList .lbBet{ font-weight:900; }
#crashLiveBetsList .lbRight{ font-weight:800; opacity:.85; text-align:right; }


/* Whale Crash UI fixes */
.topHistory{
  display:flex;
  gap:6px;
  justify-content:flex-start;
  align-items:center;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin-bottom:6px;
  padding:0 6px;
}
.topHistory::-webkit-scrollbar{ display:none; }
.topHistory .chip{
  transform: scale(.92);
  padding:6px 10px;
  border-radius:999px;
}
#crashStatus.centerTimer{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:26px;
  font-weight:950;
  color:rgba(255,255,255,.92);
  padding:10px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 40px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: max-content;
  max-width: 92%;
}
#crashStatus.hiddenStatus{ display:none; }
.btn.is-disabled{ opacity:.48; cursor:not-allowed; }

.toast.belowTimer{ margin-top: 64px; }


/* Header Stars balance */
.header-balance{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:0;
}
.header-balance .hb-icon{
  margin-right:6px;
  opacity:.95;
}
.header-balance .hb-amount{
  display:flex;
  align-items:center;
  padding:0 10px;
  height:28px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight:700;
  line-height:1;
}
.header-balance .hb-btn{
  min-width:34px;
  height:28px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:inherit;
  font-weight:700;
  line-height: 0;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:18px;
  }

.header-balance .hb-btn:active{transform:scale(.98)}
/* Simple modal */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;z-index:9999}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.modal-panel{position:relative;max-width:520px;margin:10vh auto 0 auto;background:rgba(25,27,35,.98);border:1px solid rgba(255,255,255,.10);border-radius:18px;overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.6)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.10)}
.modal-title{font-weight:800}
.modal-x{width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:inherit;font-size:20px;line-height:1}
.modal-body{padding:14px}

.hb-minus{transform: translateY(-1px);}

.hb-plus{transform: translateY(-1px);}



/* ensure header balance buttons are clickable */
.header-balance{position:relative; z-index:10;}
.header-balance .hb-btn{position:relative; z-index:11;}



/* === Fixed Bottom Navigation (Tasks / Earn / Crash / Create) === */
:root{
  --bottom-nav-h: 84px;
}

/* Give content room so it doesn't hide behind fixed nav */
.shell{
  padding-bottom: calc(18px + var(--bottom-nav-h));
}

.bottom-nav-wrap{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(7,10,26,.72);
  border-top: 1px solid rgba(148,163,184,.16);
  backdrop-filter: blur(14px);
}

.bottom-nav-wrap .main-nav{
  margin: 0;
  width: 100%;
}

.bottom-nav-wrap .main-nav-btn{
  padding: 10px 8px;
  border-radius: 16px;
  font-weight: 800;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
}




/* Bottom nav icons */
.main-nav-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.main-nav-btn .nav-ic{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}
.main-nav-btn .nav-ic svg{
  width:18px;
  height:18px;
  fill:currentColor;
}


/* --- Background override from template (continuous, pinned to viewport) --- */
html{
  background:
    radial-gradient(1200px 900px at 70% 10%, rgba(34,211,238,.10), transparent 55%),
    radial-gradient(900px 700px at 25% 20%, rgba(34,211,238,.14), transparent 55%),
    radial-gradient(900px 700px at 40% 85%, rgba(37,99,235,.16), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 55%, #040614);
  background-attachment: fixed;
  background-repeat:no-repeat;
  background-size: cover;
}
body{
  background: transparent !important;
}
body::before{
  content:"";
  position:fixed;
  inset:-60px;
  pointer-events:none;
  opacity:.26;
  background:
    linear-gradient(to right, rgba(56,189,248,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139,92,246,.12) 1px, transparent 1px);
  background-size: 56px 56px;
  filter: blur(.2px);
  mask-image: radial-gradient(circle at 50% 30%, black 35%, transparent 72%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 18%, rgba(255,255,255,.42) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 70%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.32) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 48%, rgba(255,255,255,.25) 0 1px, transparent 2px);
  background-size: 420px 420px;
  filter: blur(.2px);
}


/* --- FIXES: Offerwalls + Daily Combo --- */
#sectionOfferwalls .card::before{ display:none !important; }
#sectionOfferwalls .card{
  box-shadow: var(--shadow-soft) !important;
  border-color: rgba(148,163,184,.18) !important;
}
#sectionOfferwalls .offer-tabs{ box-shadow:none !important; }
#sectionOfferwalls .offer-tab, #sectionOfferwalls .offer-tab.active{
  box-shadow:none !important;
}

/* Hide unused offerwall tabs (keep CPX + Daily Combo only) */
#offerTabOfferwall, #offerTabBitco, #offerTabBitlabs{ display:none !important; }

/* Daily Combo: center emojis + spacing */
#dcGrid .btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
}
#dcInfo{ margin-bottom:14px !important; }
#dcPick{ margin-top:14px !important; }




/* --- Overrides: Offerwalls without purple glow --- */
#sectionOfferwalls .offer-tab.active{
  box-shadow: none !important;
}
#sectionOfferwalls .offer-tab.active{
  background: linear-gradient(135deg, rgba(56,189,248,.14), rgba(139,92,246,.06)) !important;
}


/* --- v30 fixes: remove purple glow in Offerwalls & add spacing in Create Task --- */
#sectionOfferwalls .card.offerwalls-card{
  border-color: rgba(56,189,248,.16);
  box-shadow: var(--shadow-soft);
}
#sectionOfferwalls .card.offerwalls-card::before{ display:none !important; }

#sectionOfferwalls /* If any generic glow is applied within Offerwalls card, kill it */
#sectionOfferwalls .glow,
#sectionOfferwalls [style*="box-shadow: var(--glow)"]{ box-shadow:none !important; }

#sectionCreateTask #blockCreateTask{ padding: 6px 2px 12px; }
#sectionCreateTask .card{ margin-top: 12px !important; }
#sectionCreateTask .input-group{ margin-top: 10px; margin-bottom: 10px; }

/* Reduce any accidental glow inside Create Task */
#sectionCreateTask .inner-tab-active{ box-shadow:none !important; }


/* TonConnect UI must be above our modal */
.tc-root, .tc-widget-root, .tc-modal, .tc-overlay, .tc-popup, .tc-wallets-modal, .tc-connect-modal,
[class^="tc-"], [class*=" tc-"],
[data-tc-modal], [data-tc-overlay], [data-tc-wallets-modal]{
  z-index: 2147483647 !important;
}
.tc-modal, .tc-overlay, .tc-popup, .tc-wallets-modal, .tc-connect-modal,
[data-tc-modal], [data-tc-overlay], [data-tc-wallets-modal]{
  position: fixed !important;
}

.bot-pill{
  display:inline-block;
  padding:4px 10px;
  margin:0 4px;
  border-radius:999px;
  background:rgba(56,189,248,.18);
  border:1px solid rgba(56,189,248,.45);
  color:#38bdf8;
  font-weight:600;
  text-decoration:none;
  transition:all .15s ease;
}

.bot-pill:hover{
  background:rgba(56,189,248,.28);
  border-color:rgba(56,189,248,.7);
  color:#7dd3fc;
}


/* Floating toast notifications (do not conflict with existing .toast styles) */
.tg-toast{
  position:fixed;
  left:50%;
  bottom:84px;
  transform:translateX(-50%) translateY(14px);
  background:rgba(20,30,50,.92);
  color:#fff;
  padding:12px 16px;
  border-radius:14px;
  font-weight:700;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  opacity:0;
  z-index:99999;
  pointer-events:none;
  transition:transform .26s ease, opacity .26s ease;
  max-width:min(92vw, 520px);
  text-align:center;
}
.tg-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.tg-toast.success{ border-color: rgba(34,211,238,.65); }
.tg-toast.error{ border-color: rgba(239,68,68,.65); }
.tg-toast.info{ border-color: rgba(99,102,241,.65); }


/* Earn tabs: match Tasks capsules */
.offer-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-top:8px;
}
.offer-tab{
  flex:1 1 0;
  min-width:140px;
  border-radius:999px;
  margin:3px 0;
  padding:11px 12px;
  font-weight:900;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(255,255,255,.04);
  color:rgba(248,250,255,.78);
  cursor:pointer;
  transition:.15s transform ease, .15s background ease;
}
.offer-tab.active{
  background:var(--grad);
  border-color:rgba(255,255,255,.10);
  box-shadow:var(--glow);
  color:var(--text);
}

/* Earn tabs inherit task-type styles */
.offer-tabs.task-type-tabs .offer-tab.task-type-btn{
  width:auto;
}

/* Force Adsgram tab visible and active glow like Tasks */
#offerTabAdsgram{display:inline-flex !important;}
.offer-tabs .offer-tab.active{background:var(--grad);box-shadow:var(--glow);color:var(--text);}


/* Force Adsgram tab visible and active glow like Tasks */
#offerTabAdsgram{display:inline-flex !important;}
.offer-tabs .offer-tab.active{
  background:var(--grad);
  box-shadow:var(--glow);
  color:var(--text);
}

/* Force Adsgram tab visible and active glow like Tasks */
#offerTabAdsgram{display:inline-flex !important;}
.offer-tabs .offer-tab.active{
  background:var(--grad) !important;
  box-shadow:var(--glow) !important;
  color:var(--text) !important;
}


.offer-tabs .offer-tab > span{
  display:inline-block !important;
  line-height:1 !important;
}
.offer-tabs .offer-tab.active{
  background:var(--grad) !important;
  box-shadow:var(--glow) !important;
  border-color:rgba(255,255,255,.10) !important;
  color:#fff !important;
}
.offer-tabs .offer-tab.active > span{
  color:#fff !important;
}


#offerwallsSection .offer-tabs.task-type-tabs .offer-tab.active > span{
  color:#fff !important;
}


#offerwallsSection .offer-tabs .offer-tab.active{
  background: var(--grad) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: var(--glow) !important;
  color: var(--text) !important;
}
#offerwallsSection .offer-tabs .offer-tab.active > span{
  color: var(--text) !important;
}


/* Earn tabs: EXACT match to Tasks capsules (Offerwalls section) */
#sectionOfferwalls .offer-tabs .offer-tab{
  flex:1 1 0 !important;
  min-width:140px !important;
  border-radius:999px !important;
  margin:3px 0 !important;
  padding:11px 12px !important;
  font-weight:900 !important;
  border:1px solid rgba(148,163,184,.16) !important;
  background:rgba(255,255,255,.04) !important;
  color:rgba(248,250,255,.78) !important;
  cursor:pointer !important;
  transition:.15s transform ease, .15s background ease !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
}
#sectionOfferwalls .offer-tabs .offer-tab.active{
  background: var(--grad) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: var(--glow) !important;
  color: var(--text) !important;
}
#sectionOfferwalls .offer-tabs .offer-tab.active > span{
  color: var(--text) !important;
}



/* Earn active capsule border: match Tasks (no extra inset ring) */
#sectionOfferwalls .offer-tabs .offer-tab.active{
  box-shadow: var(--glow) !important;
  border-color: rgba(255,255,255,.10) !important;
}





/* FINAL: Earn tabs active style exactly like Tasks (no extra inset ring) */
#sectionOfferwalls .offer-tabs .offer-tab{
  flex:1 1 0 !important;
  min-width:140px !important;
  border-radius:999px !important;
  margin:3px 0 !important;
  padding:11px 12px !important;
  font-weight:900 !important;
  border:1px solid rgba(148,163,184,.16) !important;
  background:rgba(255,255,255,.04) !important;
  color:rgba(248,250,255,.78) !important;
  cursor:pointer !important;
  transition:.15s transform ease, .15s background ease !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1 !important;
  outline:none !important;
}

/* FINAL2: ensure active outline is visible (match Tasks thin light border) */
#sectionOfferwalls .offer-tabs .offer-tab.active{
  border-color: rgba(255,255,255,.14) !important;
  background-clip: padding-box !important; /* keep border crisp */
}
#sectionOfferwalls .offer-tabs .offer-tab.active{
  background: var(--grad) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: var(--glow) !important;
  color: var(--text) !important;
  background-clip: padding-box !important;
}
#sectionOfferwalls .offer-tabs .offer-tab.active > span{ color: var(--text) !important; }

/* Daily Combo bigger */
#dailyComboPanel .emoji-grid button,
#dailyComboPanel .emoji-grid .emoji-cell,
#dailyComboPanel .combo-grid button,
#dailyComboPanel .combo-emoji,
#dailyComboPanel .daily-emoji,
#dailyComboPanel .emoji-btn{
  width: 56px !important;
  height: 56px !important;
  font-size: 30px !important;
  line-height: 1 !important;
}
#dailyComboPanel .emoji-grid,
#dailyComboPanel .combo-grid{
  gap: 10px !important;
}

/* Daily Combo pick slots */
.dc-pick{
  margin-top:14px;
  display:flex;
  gap:14px;
  justify-content:center;
  padding:14px;
  border:1px dashed rgba(148,163,184,.65);
  border-radius:16px;
  background:rgba(15,23,42,.22);
  box-shadow:0 10px 30px rgba(0,0,0,.25) inset;
}
.dc-slot{
  width:74px;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:38px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(148,163,184,.18), rgba(148,163,184,.08));
  border:1px solid rgba(148,163,184,.20);
}
.dc-slot:empty::after{
  content:"";
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  box-shadow:0 0 0 10px rgba(148,163,184,.06);
}